9.9

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

@@ -1,18 +1,247 @@
 <template>
    <div class="new-contoner">
+     <div class="left-box">
+       <div class="box-top">
+         <div class="o-top">
+           <div class="d-s">
+             <img src="./imgs/new_user.png" style="width: 28px;height: 28px;margin-right: 10px">
+             <div>
+               <div style="font-weight: bold">匿名</div>
+               <div class="d-s">
+                 <span>12345679912</span>
+                 <img src="./imgs/fz.png" style="width: 17px;height: 17px;margin: 0px 10px">
+                 <img src="./imgs/vipicon.png" style="width: 23px;height: 19px;">
+               </div>
+             </div>
+           </div>
+           <div class="d-s">
+             <div class="an_bor">会员充值</div>
+             <div class="an_bor">重置会员</div>
+             <div class="an_bor">赠送优惠券</div>
+           </div>
 
+
+         </div>
+          <div class="t-top">
+            <div class="three_box">油品:￥0.00</div>
+            <div style="color: #F4F5F9">|</div>
+            <div class="three_box">商品:￥0.00</div>
+            <div style="color: #F4F5F9">|</div>
+            <div class="three_box">合计:￥0.00</div>
+          </div>
+          <div class="d-top">
+            <div class="d-b">
+              <div class="d-s">
+                <div class="checkbox" @click="changeBox" :class="{ 'active' : boxShow == true }" > <i class="el-icon-check" size="15" v-if="boxShow == true" ></i> </div>
+                <div class="d_text">活动优惠</div>
+              </div>
+              <div class="or_num">-￥0.00</div>
+            </div>
+            <div class="d-b">
+              <div class="d-s">
+                <div class="checkbox" @click="changeBox1" :class="{ 'active' : boxShow1 == true }" > <i class="el-icon-check" size="15" v-if="boxShow1 == true" ></i> </div>
+                <div class="d_text">储值卡（账户余额:0元)</div>
+              </div>
+              <div class="or_num">￥0.00</div>
+            </div>
+            <div class="d-b" >
+              <div class="d-s">
+                <div class="checkbox" @click="changeBox2" :class="{ 'active' : boxShow2 == true }" > <i class="el-icon-check" size="15" v-if="boxShow2 == true" ></i> </div>
+                <div class="d_text">囤油卡（账户余额:1000元)</div>
+              </div>
+              <div class="or_num">-￥220.00</div>
+            </div>
+          </div>
+         <div class="three-top">
+           <div class="addbor">
+             <div class="">扫码支付</div>
+             <div class="or_num">0.00</div>
+           </div>
+           <div class="addbor">
+             <div class="">找零</div>
+             <div class="or_num">0.00</div>
+           </div>
+           <div class="addbor">
+             <div class="">加油员</div>
+             <div class="or_num">0.00</div>
+           </div>
+         </div>
+          <div class="er-box"></div>
+       </div>
+       <div class="box-bottom"></div>
+     </div>
+     <div class="cont-box">
+       <div class="box-top"></div>
+       <div class="box-bottom"></div>
+     </div>
+     <div class="right-box">
+       <div class="box-top"></div>
+       <div class="box-bottom"></div>
+     </div>
    </div>
 </template>
 
 <script>
-
+export default {
+data(){
+  return {
+    boxShow:true,
+    boxShow1:true,
+    boxShow2:true
+  }
+},
+  methods:{
+    changeBox(){
+      this.boxShow = !this.boxShow
+    },
+    changeBox1(){
+      this.boxShow1 = !this.boxShow1
+    },
+    changeBox2(){
+      this.boxShow2 = !this.boxShow2
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
 .new-contoner{
   width: 100%;
   box-sizing: border-box;
-  background: #0ECB98;
   height: 100vh;
+  padding: 20px 0px;
+  padding-right: 20px;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+}
+.left-box{
+  width: 33%;
+
+  box-shadow: 0px 3px 6px 1px rgba(255,255,255,0.4), inset 0px 3px 6px 1px rgba(255,255,255,0.5);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.cont-box{
+  width: 33%;
+
+  box-shadow: 0px 3px 6px 1px rgba(255,255,255,0.4), inset 0px 3px 6px 1px rgba(255,255,255,0.5);
+  border-radius: 10px;
+  margin: 0px 20px;
+  overflow: hidden;
+}
+.right-box{
+  width: 33%;
+  box-shadow: 0px 3px 6px 1px rgba(255,255,255,0.4), inset 0px 3px 6px 1px rgba(255,255,255,0.5);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.box-top{
+  height: 84vh;
+  background: #fff;
+  margin-bottom: 5px;
+}
+.box-bottom{
+  height: 15vh;
+  background: #fff;
+}
+.o-top{
+  width: 100%;
+  height: 80px;
+  background: #FF9655;
+  box-sizing: border-box;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  justify-content: space-between;
+
+}
+.d-s{
+  display: flex;
+  align-items: center;
+}
+.an_bor{
+  box-sizing: border-box;
+  padding: 10px;
+  border: 1px solid #fff;
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #FFFFFF;
+  justify-content: center;
+  margin: 0px 5px;
+  cursor: pointer;
+}
+.t-top{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 20px 0px;
+  border-bottom: #F4F5F9 1px solid;
+}
+.three_box{
+  width: 33%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #555555;
+}
+.d-b{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 15px 0px;
+}
+.d-top{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0px 40px;
+  font-size: 16px;
+  color: #555555;
+  border-bottom: #f6f8f9 4px solid;
+}
+.checkbox{
+  width: 15px;
+  height: 15px;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+.d_text{
+  color: #555555;
+  margin-left: 10px;
+}
+.or_num{
+  color: #FF9655;
+}
+.active{
+  background: #FF9655 !important;
+  color: #FFFFFF !important;
+  border: 1px solid #FF9655;
+}
+.three-top{
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: #f6f8f9 4px solid;
+}
+.addbor{
+  border-bottom: 1px solid #f6f8f9;
+  padding: 15px 40px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.er-box{
+
 }
 </style>

fuintCashierWeb/src/views/cashier/index.vue

@@ -4,10 +4,10 @@
   <div class="app-containers">
     <div class="app-left">
       <div class="app-left-top">
-        <div class="app-left-img">
+        <img src="../../assets/logo/logo_syt.png" style="width: 167px;height: 16px;">
-<!--          <img src="../../assets/images/lanlogo.png" alt="">-->
+<!--        <div class="app-left-title">-->
-        </div>
+<!--        -->
-        <div class="app-left-title">百业兴油站收银 </div>
+<!--        </div>-->
       </div>
       <div class="app-left-box" v-for="(item,index) in tabarr" v-if="item.name !== '积分'" :class="{'bule': leftindex == item.index1}" :key="index" @click="gocomponents(index,item.path)">
           <i :class="item.icon" style="font-size: 18px" ></i> <div style="cursor: pointer;margin-left: 10px">{{item.name}}</div>