收银台

fuintAdmin/.env.development

@@ -11,4 +11,4 @@ VUE_APP_BASE_API = '/dev-api'
 VUE_APP_PUBLIC_PATH = '/'
 
 # 后端接口地址
-VUE_APP_SERVER_URL = 'http://192.168.1.5:8080/'
+VUE_APP_SERVER_URL = 'http://192.168.1.4:8080/'

fuintAdmin/src/layout/components/Sidebar/index.vue

@@ -8,7 +8,7 @@
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
-                :collapse="isCollapse"
+                :collapse="false"
                 :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
                 :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
                 :unique-opened="true"

fuintBackend/fuint-application/src/main/resources/application.properties

@@ -1,7 +1,7 @@
 # \u57FA\u672C\u914D\u7F6E
 server.port=8008
 env.profile=dev
-env.properties.path=D:/code/oilSystem/fuintBackend/configure/
+env.properties.path=D:/work/ServiceStation/oilSystem/fuintBackend/configure/
 
 
 # \u6570\u636E\u5E93\u914D\u7F6E

fuintCashierWeb/src/views/cashier/NewComponents/Recharge.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="app-center">
+      <div class="">充值</div>
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "Recharge",
+      data(){
+          return{
+
+          }
+      }
+
+    }
+</script>
+
+<style scoped lang="scss">
+  .app-center{
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    padding: 10px;
+
+  }
+</style>

fuintCashierWeb/src/views/cashier/NewComponents/homeindex.vue

@@ -0,0 +1,552 @@
+<template>
+  <div class="app-center">
+    <div class="center-left">
+      <div class="center-vh">
+        <div class="center-left-top">
+          <div class="vip-bottom" @click="dialogVisiblevip = true">
+            <div>会员登录</div>
+          </div>
+        </div>
+        <div class="center-left-hj">
+          <div class="hj-box" style="justify-content: left">油品:￥200.00</div>
+          <div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥0.52</div>
+          <div class="hj-box" style="justify-content: flex-end">合计: ￥200.52</div>
+        </div>
+        <div class="center-left-hj">
+          <div>满减活动</div>
+          <div>-￥2.87</div>
+        </div>
+        <div class="center-left-th">
+          <div class="th-box">
+            <div>扫码支付</div>
+            <div class="bule">394.7</div>
+          </div>
+          <div class="th-box">
+            <div>找零</div>
+            <div class="bule">394.7</div>
+          </div>
+          <div class="th-box">
+            <div>加油员</div>
+            <div style="cursor: pointer;color: crimson" @click="dialogVisible = true" >加油员名称</div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom-posi">
+        <div class="center-left-wrap">
+          <div class="wrap-box" v-for="(item,index) in 6" :key="index">
+
+            <span>支付方式</span>
+          </div>
+        </div>
+        <div class="center-left-bottom">
+          <div>
+            <div class="bottom-price">￥349.78</div>
+            <div class="price-red">优惠合计：5.74元</div>
+          </div>
+          <div class="center-left-lv" @click="dialogVisiblej = true ">立即结算</div>
+        </div>
+      </div>
+
+    </div>
+    <div class="center-right">
+      <div class="center-top">
+        <div class="center-top-tab">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="全部" name="first"></el-tab-pane>
+            <el-tab-pane label="92#" name="second"></el-tab-pane>
+            <el-tab-pane label="95#" name="third"></el-tab-pane>
+            <el-tab-pane label="98#" name="fourth"></el-tab-pane>
+            <el-tab-pane label="0#" name="one"></el-tab-pane>
+            <el-tab-pane label="京0#" name="two"></el-tab-pane>
+            <el-tab-pane label="京10#" name="three"></el-tab-pane>
+            <el-tab-pane label="CNG" name="frou"></el-tab-pane>
+            <el-tab-pane label="LNG" name="frous"></el-tab-pane>
+          </el-tabs>
+        </div>
+
+        <div class="center-top-data">
+          <div class="center-top-of" >
+            <div class="wrap-wrap">
+              <div class="of-box" v-for="(item,index) in 17" :key="index" :style="{'background-color': colorList[index%5].color}">
+                <div>92#</div>
+
+                <div class="of-title" >{{index+1}}号枪</div>
+                <div>
+                  <img src="../../../assets/images/jya.png" style="width: 18px;height: 18px;">
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!--            -->
+          <div class="content-top-bottom">
+            <div>订单笔数 <span class="bule">3件</span> </div>
+            <div>订单金额 <span class="bule">￥2.03</span> </div>
+          </div>
+        </div>
+      </div>
+      <div class="center-left-bottom">
+        <div class="bottom-gd">新增订单</div>
+        <div class="bottom-qk">解锁</div>
+      </div>
+    </div>
+    <div class="center-app">
+      <div class="center-top">
+        <div class="center-top-title">非油商品</div>
+        <div class="center-top-input">
+          <input  type="text" placeholder="请输入商品名称，条码，商品关键词">
+        </div>
+        <div class="center-top-data">
+          <div class="data-top">
+            <div class="data-top-title">商品</div>
+            <div class="data-top-three">
+              <div>单价</div>
+              <div>数量</div>
+              <div>操作</div>
+            </div>
+          </div>
+          <div class="data-top-box">
+            <div class="data-top-title">商品名称</div>
+            <div class="data-top-three">
+              <div>0.01</div>
+              <div>  <el-input-number v-model="num" size="small" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>   </div>
+              <div><i class="el-icon-circle-close" style="font-size: 22px"></i></div>
+            </div>
+          </div>
+          <!--            -->
+          <div class="content-top-bottom">
+            <div>商品数量 <span class="bule">3件</span> </div>
+            <div>商品总额 <span class="bule">￥2.03</span> </div>
+          </div>
+        </div>
+      </div>
+      <div class="center-left-bottom">
+        <div class="bottom-qk">清空</div>
+        <div style="display: flex">
+          <div class="bottom-qd">取单</div>
+          <div class="bottom-gd">挂单</div>
+        </div>
+      </div>
+    </div>
+<!--    加油员姓名-->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose">
+          <div class="wrap-wrap">
+        <div class="of-box" v-for="(item,index) in 7" :key="index" :style="{'background-color': item.color}">
+          <div>92#</div>
+          <div class="of-title"  >加油员姓名</div>
+          <div>
+            <img src="../../../assets/images/jya.png" style="width: 18px;height: 18px;">
+          </div>
+        </div>
+      </div>
+         <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+<!--    立即结算-->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisiblej"
+      width="30%"
+      :before-close="handleClose">
+      <div >
+        立即结算
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisiblej = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisiblej = false">确 定</el-button>
+      </span>
+    </el-dialog>
+<!--    会员登录-->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisiblevip"
+      width="30%"
+      :before-close="handleClose">
+      <div >
+        会员登录
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisiblevip = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisiblevip = false">确 定</el-button>
+      </span>
+    </el-dialog>
+<!--    油号选择-->
+
+
+
+
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "homeindex",
+      data(){
+          return{
+            dialogVisible: false,
+            dialogVisiblej: false,
+            dialogVisiblevip:false,
+            activeName: 'second',
+            tabarr:[
+              {name:'收银台',icon:'el-icon-s-platform'},
+              {name:'充值',icon: 'el-icon-s-finance'},
+              {name:'订单',icon: 'el-icon-s-order'},
+              {name:'会员',icon: 'el-icon-s-custom'},
+              {name:'核销',icon: 'el-icon-s-check'},
+              {name:'挂账',icon:'el-icon-s-claim'},
+              {name:'积分',icon:'el-icon-s-data'},
+              {name:'交班',icon: 'el-icon-s-flag'},
+            ],
+            leftindex:0,
+            oilList:[
+            ],
+            colorList:[
+              {color:'#e5f0ff'},
+              {color:'#fff2e5'},
+              {color:'#e5edf1'},
+              {color:'#ecfae5'},
+              {color:'#fafafa'}
+            ],
+            num: 1,
+          }
+      },
+      methods:{
+        handleClose(done) {
+          this.$confirm('确认关闭？')
+            .then(_ => {
+              done();
+            })
+            .catch(_ => {});
+        },
+        handleChange(value) {
+          console.log(value);
+        },
+        handleClick(tab, event) {
+          console.log(tab, event);
+        },
+        gocomponents(index){
+          this.leftindex = index
+        },
+      }
+
+    }
+</script>
+
+<style scoped lang="scss">
+  .app-center{
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .center-left{
+    width: 33%;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 98vh;
+
+    position: relative;
+    /*height: 70vh;*/
+    /*box-sizing: border-box;*/
+    /*padding: 10px;*/
+  }
+  .bottom-posi{
+    width: 100%;
+    position: absolute;
+    bottom: 0px;
+  }
+  .center-app{
+    width: 33%;
+    border-radius: 8px;
+    overflow: hidden;
+    /*background: white;*/
+
+  }
+  .center-right{
+    width: 33%;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 0px 10px;
+
+
+
+  }
+  .center-top{
+    width: 100%;
+    height: 86vh;
+    background: white;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    padding: 10px;
+    position: relative;
+
+  }
+  .center-top-title{
+    box-sizing: border-box;
+    padding: 10px 0px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ececec;
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  .center-top-tab{
+    box-sizing: border-box;
+    padding: 15px 0px;
+
+  }
+  .center-top-input{
+    width: 100%;
+    height: 60px;
+    background: #f8f8f8;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  input{
+    width: 90%;
+    font-size: 18px;
+    border: none;
+    outline: none;
+    background-color:transparent;
+  }
+
+  }
+  .center-top-data{
+    width: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-top: 10px;
+
+
+    /*background-color: #f8f8f8;*/
+  }
+  .center-top-of{
+    width: 100%;
+    /*background-color: #99a9bf;*/
+    height: 70vh;
+    overflow: auto;
+
+
+  }
+  .wrap-wrap{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .of-box{
+    width: 31%;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    background-color: #b4d5ff;
+    height: 110px;
+    padding: 10px;
+    color: #3e4f60;
+  }
+  .of-title{
+    font-weight: bold;
+    font-size: 22px;
+    text-align: center;
+    margin: 13px;
+  }
+  .data-top{
+    width: 100%;
+    background-color: #ededed;
+    box-sizing: border-box;
+    padding: 15px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .data-top-box{
+    width: 100%;
+    /*background-color: #ededed;*/
+    box-sizing: border-box;
+    padding: 15px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .data-top-three{
+    width: 55%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+  }
+  .data-top-title{
+    width: 45%;
+    overflow: hidden;
+  }
+  .content-top-bottom{
+    position: absolute;
+    bottom:-16px;
+    width: 98%;
+    border-top: 1px solid #ececec;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transform: translate(-50%,-50%);
+    left: 50%;
+    color: #2c3e50;
+    font-size: 18px;
+    box-sizing: border-box;
+    padding: 15px ;
+    background-color: white;
+
+
+  }
+  .center-left-top{
+    width: 100%;
+    background: #5393ff;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .center-vh{
+    /*height: 68vh;*/
+  }
+  .center-left-hj{
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 15px;
+    margin-bottom: 2px;
+  }
+  .center-left-th{
+    background: white;
+    box-sizing: border-box;
+    padding: 15px;
+    margin: 10px auto;
+  }
+  .center-left-wrap{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    /*margin-top: 280px;*/
+  }
+  .wrap-box{
+    width: 31%;
+    background: #ffffff;
+    border-radius: 8px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+
+  }
+  .wrap-box :hover{
+    /*background: #00afff !important;*/
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #00afff;
+    cursor: pointer;
+    /*color: white;*/
+  }
+
+  .center-left-bottom{
+    width: 100%;
+    background-color: white;
+    border-radius: 8px;
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .bottom-qk{
+    border: 1px solid #99a9bf;
+    box-sizing: border-box;
+    padding: 14px 20px;
+    border-radius: 50px;
+    color: #99a9bf;
+    margin: 15px 0px ;
+  }
+  .bottom-qd{
+    border: 1px solid #13ce66;
+    background: #13ce66;
+    box-sizing: border-box;
+    padding: 14px 20px;
+    border-radius: 50px;
+    color: #ffffff;
+
+    margin: 15px 10px ;
+  }
+  .bottom-gd{
+    border: 1px solid #5393ff;
+    background: #5393ff;
+    box-sizing: border-box;
+    padding: 14px 20px;
+    border-radius: 50px;
+    color: #ffffff;
+
+    margin: 15px 10px ;
+  }
+
+  .bottom-price{
+    font-size: 26px;
+    font-weight: bold;
+  }
+  .price-red{
+    color: red;
+  }
+  .center-left-lv{
+    width: 60%;
+    height: 80px;
+    background-color: #13ce66;
+    color: white;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+  }
+  .th-box{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #f6f8f9;
+    box-sizing: border-box;
+    padding: 10px 0px;
+  }
+  .hj-box{
+    width: 33%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .bule{
+    font-weight: 700;
+    color: #5393ff !important;
+  }
+  .vip-bottom{
+    border: 1px solid #ffffff;
+    box-sizing: border-box;
+    padding: 5px 15px;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    cursor: pointer;
+  }
+
+</style>

fuintCashierWeb/src/views/cashier/index.vue

@@ -176,8 +176,8 @@
 <!--     <noGoodsCashier :show-dialog="openNoGoodsCashierDialog" @submit="submitCashier" @closeDialog="closeDialog"></noGoodsCashier>-->
 <!--     &lt;!&ndash; 无商品收款组件 end&ndash;&gt;-->
 <!--   </div>-->
+<!--  👇 均为新建-->
   <div class="app-containers">
-
     <div class="app-left">
       <div class="app-left-top">
         <div class="app-left-img">
@@ -185,81 +185,18 @@
         </div>
         <div class="app-left-title">蓝鲸油站收银 </div>
       </div>
-      <div class="app-left-box" v-for="(item,index) in tabarr" :key="index"> <spen style="cursor: pointer">{{item.name}}</spen> </div>
+      <div class="app-left-box" v-for="(item,index) in tabarr" :class="{'bule': leftindex == index }" :key="index" @click="gocomponents(index)">
-
+        <i :class="item.icon" style="font-size: 18px" ></i> <div style="cursor: pointer;margin-left: 10px">{{item.name}}</div>
-    </div>
-    <div class="app-center">
-      <div class="center-left">
-        <div class="center-vh">
-        <div class="center-left-top">
-          <div class="vip-bottom">
-            <div>会员登录</div>
-          </div>
-        </div>
-        <div class="center-left-hj">
-          <div class="hj-box" style="justify-content: left">油品:￥200.00</div>
-          <div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥0.52</div>
-          <div class="hj-box" style="justify-content: flex-end">合计: ￥200.52</div>
-        </div>
-        <div class="center-left-hj">
-          <div>满减活动</div>
-          <div>-￥2.87</div>
-        </div>
-        <div class="center-left-th">
-          <div class="th-box">
-            <div>扫码支付</div>
-            <div class="bule">394.7</div>
-          </div>
-          <div class="th-box">
-            <div>找零</div>
-            <div class="bule">394.7</div>
-          </div>
-          <div class="th-box">
-            <div>加油员</div>
-            <div >加油员名称</div>
-          </div>
-        </div>
-        </div>
-        <div class="center-left-wrap">
-          <div class="wrap-box" v-for="(item,index) in 6" :key="index">
-            <div>支付方式</div>
-          </div>
-        </div>
-        <div class="center-left-bottom">
-          <div>
-            <div class="bottom-price">￥349.78</div>
-            <div class="price-red">优惠合计：5.74元</div>
-          </div>
-          <div class="center-left-lv">立即结算</div>
-        </div>
-      </div>
-      <div class="center-app">
-        <div class="center-top">
-          <div class="center-top-title">非油商品</div>
-          <div class="center-top-input">
-            <input type="text" placeholder="请输入商品名称，条码，商品关键词">
-          </div>
-        </div>
-        <div class="center-left-bottom">
-          <div class="bottom-qk">清空</div>
-          <div style="display: flex">
-            <div class="bottom-qd">取单</div>
-            <div class="bottom-gd">挂单</div>
-          </div>
-        </div>
-      </div>
-      <div class="center-right">
-        <div class="center-top">
-          <div>选择油号</div>
-        </div>
-        <div class="center-left-bottom">
-          <div class="bottom-gd">新增订单</div>
-          <div class="bottom-qk">解锁</div>
       </div>
     </div>
 
+    <homeindex v-if="leftindex == 0"></homeindex>
+    <Recharge v-if="leftindex == 1"></Recharge>
+    <div style="width: 100%;padding:200px " v-if="leftindex != 0 && leftindex != 1">
+      <el-empty  description="暂未开发"></el-empty>
     </div>
-<!--    <div class="app-right"></div>-->
+
+
 
   </div>
 </template>
@@ -278,6 +215,8 @@ import orderList from "./components/orderList";
 import memberList from "./components/memberList";
 import couponConfirm from "./components/couponConfirm";
 import noGoodsCashier from "./components/noGoodsCashier";
+import homeindex from "./NewComponents/homeindex";
+import Recharge from "./NewComponents/Recharge";
 export default {
   name: "Cashier",
   components: {
@@ -290,21 +229,36 @@ export default {
     orderList,
     memberList,
     couponConfirm,
-    noGoodsCashier
+    noGoodsCashier,
+    homeindex,
+    Recharge,
+
+
+
   },
   data() {
     return {
+      activeName: 'second',
       tabarr:[
-        {name:'收银台'},
+        {name:'收银台',icon:'el-icon-s-platform'},
-        {name:'充值'},
+        {name:'充值',icon: 'el-icon-s-finance'},
-        {name:'订单'},
+        {name:'订单',icon: 'el-icon-s-order'},
-        {name:'会员'},
+        {name:'会员',icon: 'el-icon-s-custom'},
-        {name:'核销'},
+        {name:'核销',icon: 'el-icon-s-check'},
-        {name:'挂账'},
+        {name:'挂账',icon:'el-icon-s-claim'},
-        {name:'积分'},
+        {name:'积分',icon:'el-icon-s-data'},
-        {name:'交班'},
+        {name:'交班',icon: 'el-icon-s-flag'},
-
       ],
+      leftindex:0,
+      oilList:[
+        {color:'#e5f0ff'},
+        {color:'#fff2e5'},
+        {color:'#e5edf1'},
+        {color:'#ecfae5'},
+        {color:'#fafafa'}
+      ],
+      num: 1,
+
       // 系统名称
       systemName: process.env.VUE_APP_TITLE,
       // 导航tab
@@ -431,6 +385,15 @@ export default {
     // this.getCartList();
   },
   methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    gocomponents(index){
+      this.leftindex = index
+    },
     // 初始化数据
     initCashier() {
       const app = this;
@@ -867,194 +830,9 @@ export default {
     background: #f6f8f9;
     display: flex;
   }
-  .app-center{
-    width: 100%;
-    display: flex;
-    box-sizing: border-box;
-    padding: 10px;
-  }
-  .center-left{
-    width: 33%;
-    border-radius: 8px;
-    overflow: hidden;
-    /*height: 70vh;*/
-    /*box-sizing: border-box;*/
-    /*padding: 10px;*/
-  }
-  .center-app{
-    width: 33%;
-    border-radius: 8px;
-    overflow: hidden;
-    /*background: white;*/
-    margin: 0px 10px;
-  }
-  .center-right{
-    width: 33%;
-    border-radius: 8px;
-    overflow: hidden;
-
-
-  }
-  .center-top{
-    width: 100%;
-    height: 86vh;
-    background: white;
-    margin-bottom: 10px;
-    box-sizing: border-box;
-    padding: 10px;
-
-  }
-  .center-top-title{
-    box-sizing: border-box;
-    padding: 10px 0px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #ececec;
-    font-size: 22px;
-  }
-  .center-top-input{
-    width: 100%;
-    height: 60px;
-    background: #f8f8f8;
-    border-radius: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    input{
-      border: none;
-      outline: none;
-      background-color:transparent;
-    }
-
-  }
-  .center-left-top{
-    width: 100%;
-    background: #5393ff;
-    height: 70px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .center-vh{
-    height: 68vh;
-  }
-  .center-left-hj{
-    background: white;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 15px;
-    margin-bottom: 2px;
-  }
-  .center-left-th{
-    background: white;
-    box-sizing: border-box;
-    padding: 15px;
-    margin: 10px auto;
-  }
-  .center-left-wrap{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    /*margin-top: 280px;*/
-  }
-  .wrap-box{
-    width: 31%;
-    background-color: white;
-    border-radius: 8px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-
-  }
-  .center-left-bottom{
-    width: 100%;
-    background-color: white;
-    border-radius: 8px;
-    box-sizing: border-box;
-    padding: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .bottom-qk{
-    border: 1px solid #99a9bf;
-    box-sizing: border-box;
-    padding: 14px 20px;
-    border-radius: 50px;
-    color: #99a9bf;
-    margin: 15px 0px ;
-  }
-  .bottom-qd{
-    border: 1px solid #13ce66;
-    background: #13ce66;
-    box-sizing: border-box;
-    padding: 14px 20px;
-    border-radius: 50px;
-    color: #ffffff;
-
-    margin: 15px 10px ;
-  }
-  .bottom-gd{
-    border: 1px solid #5393ff;
-    background: #5393ff;
-    box-sizing: border-box;
-    padding: 14px 20px;
-    border-radius: 50px;
-    color: #ffffff;
-
-    margin: 15px 10px ;
-  }
-
-  .bottom-price{
-    font-size: 26px;
-    font-weight: bold;
-  }
-  .price-red{
-    color: red;
-  }
-  .center-left-lv{
-    width: 60%;
-    height: 80px;
-    background-color: #13ce66;
-    color: white;
-    border-radius: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 22px;
-  }
-  .th-box{
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #f6f8f9;
-    box-sizing: border-box;
-    padding: 10px 0px;
-  }
-  .hj-box{
-    width: 33%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
   .bule{
     font-weight: 700;
-    color: #5393ff;
+    color: #5393ff !important;
-  }
-  .vip-bottom{
-    border: 1px solid #ffffff;
-    box-sizing: border-box;
-    padding: 5px 15px;
-    border-radius: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    cursor: pointer;
   }
   .app-left{
     width: 180px;