diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/0oil.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/0oil.png
new file mode 100644
index 000000000..1e4c1888b
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/0oil.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/92oil.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/92oil.png
new file mode 100644
index 000000000..2bc9e3713
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/92oil.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/95oil.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/95oil.png
new file mode 100644
index 000000000..a20329a6a
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/95oil.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/98oil.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/98oil.png
new file mode 100644
index 000000000..e7f11138a
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/98oil.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/newHome.vue b/fuintCashierWeb/src/views/cashier/NewComponents/newHome.vue
index 502e9b8b3..980daf46e 100644
--- a/fuintCashierWeb/src/views/cashier/NewComponents/newHome.vue
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/newHome.vue
@@ -1,151 +1,334 @@
 <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="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">
-                <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>
+                <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 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>
+          <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">活动优惠 <i class="el-icon-arrow-down"></i> </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 class="wrap-box">
+          <div class="f-box" v-for="(item,index) in cardList" :key="index">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="box-bottom">
+          <div>
+            <div class="price_">￥0.00</div>
+            <div class="price_prefer">优惠合计:￥0.00元</div>
+          </div>
+          <div class="anniu">立即结算</div>
+      </div>
+    </div>
+    <div class="cont-box">
+      <div class="box-top">
+        <div class="cont-tab">
+          <div class="tab-box" v-for="(item,index) in tabList" :key="index" @click="setTabindex(index)">
+            <div class="tab-name" :class="{ 'active_name' : tabIndex == index }">{{ item.name }}</div>
+            <div class="gang" :class="{ 'active_gang' : tabIndex == index }"></div>
+          </div>
+        </div>
+        <div class="tab-kuang" style="flex-wrap: wrap">
+          <div class="card92" v-for="(item,index) in 3">
+            <div>汽油 92#</div>
+            <div class="card-title">1号枪</div>
+            <div class="c-b-d">
+              <img src="./imgs/92oil.png" style="width: 16px;height: 16px">
+              <div>92号汽油罐</div>
+            </div>
+          </div>
+          <div class="card95" v-for="(item,index) in 3">
+            <div>汽油 95#</div>
+            <div class="card-title">1号枪</div>
+            <div class="c-b-d">
+              <img src="./imgs/95oil.png" style="width: 16px;height: 16px">
+              <div>95号汽油罐</div>
+            </div>
+          </div>
+          <div class="card98" v-for="(item,index) in 3">
+            <div>汽油 98#</div>
+            <div class="card-title">1号枪</div>
+            <div class="c-b-d">
+              <img src="./imgs/98oil.png" style="width: 16px;height: 16px">
+              <div>98号汽油罐</div>
+            </div>
+          </div>
+          <div class="card0" v-for="(item,index) in 3">
+            <div>柴油 0#</div>
+            <div class="card-title">1号枪</div>
+            <div class="c-b-d">
+              <img src="./imgs/0oil.png" style="width: 16px;height: 16px">
+              <div>0#柴油罐</div>
+            </div>
+          </div>
+
+
+        </div>
+        <div class="c-bottom">
+          8号枪（21.03L/191.7936元）；10号枪（45.03L/300.2852元）
+        </div>
+        <div class="bottom-b-d">
+          <div>订单笔数 <span style="color: #FF9655">0件</span> </div>
+          <div>订单金额 <span style="color: #FF9655">￥0.00</span> </div>
+        </div>
+      </div>
+        <div class="box-bottom">
+        <div class="anniu-c">
+          重置
+        </div>
+      </div>
+    </div>
+    <div class="right-box">
+      <div class="box-top">
+          <div class="r-top">非油商品</div>
+        <div class="input-box">
+          <input type="text" placeholder="商品名称，商品关键词，商品条码">
+        </div>
+        <div class="taber-top">
+          <div class="goods_name">商品</div>
+          <div class="stock_name">库存</div>
+          <div class="u-price_name">单价</div>
+          <div class="num_name">数量</div>
+          <div class="orerate_name">操作</div>
+        </div>
+        <div class="taber-box" v-for="(item,index) in 5" :key="index">
+          <div class="goods_name">
+            <img src="../../../assets/images/goods.png" style="width: 30px;height: 30px">
+          </div>
+          <div class="stock_name">60</div>
+          <div class="u-price_name">6.8</div>
+          <div class="num_name">1</div>
+          <div class="orerate_name">
+            <span style="color: red;cursor: pointer">删除</span>
+          </div>
+        </div>
+        <div class="bottom-b-d">
+          <div>订单笔数 <span style="color: #FF9655">0件</span> </div>
+          <div>订单金额 <span style="color: #FF9655">￥27.00</span> </div>
+        </div>
+      </div>
+      <div class="box-bottom">
+        <div class="anniu-c">
+          重置
+        </div>
+        <div class="d-s">
+          <div class="anniu-lv">取单</div>
+          <div class="anniu-lan">挂单</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-data(){
-  return {
-    boxShow:true,
-    boxShow1:true,
-    boxShow2:true
-  }
-},
-  methods:{
-    changeBox(){
+  data() {
+    return {
+      boxShow: true,
+      boxShow1: true,
+      boxShow2: true,
+      cardList: [
+        {
+          name: '储值卡',
+          num: '0'
+        },
+        {
+          name: '支付宝',
+          num: '0'
+        },
+        {
+          name: '微信',
+          num: '0'
+        },
+        {
+          name: '银联二维码',
+          num: '0'
+        },
+        {
+          name: '现金',
+          num: '0'
+        },
+        {
+          name: '小程序码',
+          num: '0'
+        },
+        {
+          name: '挂账',
+          num: '0'
+        },
+        {
+          name: '囤油卡',
+          num: '0'
+        }
+      ],
+      tabList: [
+        {
+          name: '全部',
+          id: ''
+        },
+        {
+          name: '92#',
+          id: '1'
+        },
+        {
+          name: '95#',
+          id: '2'
+        },
+        {
+          name: '98#',
+          id: '3'
+        },
+        {
+          name: '0#',
+          id: '4'
+        },
+      ],
+      tabIndex: 0
+    }
+  },
+  methods: {
+    changeBox() {
       this.boxShow = !this.boxShow
     },
-    changeBox1(){
+    changeBox1() {
       this.boxShow1 = !this.boxShow1
     },
-    changeBox2(){
+    changeBox2() {
       this.boxShow2 = !this.boxShow2
+    },
+    setTabindex(index) {
+      this.tabIndex = index
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.new-contoner{
+input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+.new-contoner {
   width: 100%;
   box-sizing: border-box;
   height: 100vh;
   padding: 20px 0px;
   padding-right: 20px;
+  padding-bottom: 0px;
   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);
+.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);
+.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{
+
+.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);
+  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{
+
+.box-top {
   height: 84vh;
   background: #fff;
   margin-bottom: 5px;
+  position: relative;
 }
-.box-bottom{
-  height: 15vh;
+
+.box-bottom {
+  height: 12vh;
   background: #fff;
+  z-index: 9;
+  box-sizing: border-box;
+  padding: 15px;
+  display: flex;align-items: center;justify-content: space-between
 }
-.o-top{
+
+.o-top {
   width: 100%;
   height: 80px;
   background: #FF9655;
@@ -158,11 +341,13 @@ data(){
   justify-content: space-between;
 
 }
-.d-s{
+
+.d-s {
   display: flex;
   align-items: center;
 }
-.an_bor{
+
+.an_bor {
   box-sizing: border-box;
   padding: 10px;
   border: 1px solid #fff;
@@ -175,7 +360,8 @@ data(){
   margin: 0px 5px;
   cursor: pointer;
 }
-.t-top{
+
+.t-top {
   width: 100%;
   display: flex;
   align-items: center;
@@ -184,7 +370,8 @@ data(){
   padding: 20px 0px;
   border-bottom: #F4F5F9 1px solid;
 }
-.three_box{
+
+.three_box {
   width: 33%;
   display: flex;
   align-items: center;
@@ -192,14 +379,16 @@ data(){
   font-size: 16px;
   color: #555555;
 }
-.d-b{
+
+.d-b {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 15px 0px;
 }
-.d-top{
+
+.d-top {
   width: 100%;
   box-sizing: border-box;
   padding: 0px 40px;
@@ -207,7 +396,8 @@ data(){
   color: #555555;
   border-bottom: #f6f8f9 4px solid;
 }
-.checkbox{
+
+.checkbox {
   width: 15px;
   height: 15px;
   border: 1px solid #ddd;
@@ -216,24 +406,30 @@ data(){
   justify-content: center;
   border-radius: 2px;
 }
-.d_text{
+
+.d_text {
   color: #555555;
   margin-left: 10px;
+  font-size: 16px;
 }
-.or_num{
+
+.or_num {
   color: #FF9655;
 }
-.active{
+
+.active {
   background: #FF9655 !important;
   color: #FFFFFF !important;
   border: 1px solid #FF9655;
 }
-.three-top{
+
+.three-top {
   width: 100%;
   box-sizing: border-box;
   border-bottom: #f6f8f9 4px solid;
 }
-.addbor{
+
+.addbor {
   border-bottom: 1px solid #f6f8f9;
   padding: 15px 40px;
   box-sizing: border-box;
@@ -241,7 +437,305 @@ data(){
   align-items: center;
   justify-content: space-between;
 }
-.er-box{
+
+.er-box {
+  width: 100%;
 
 }
+
+.wrap-box {
+  height: 190px;
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  flex-wrap: wrap;
+  display: flex;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.f-box {
+  width: 31%;
+  height: 44px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  font-size: 16px;
+  color: #555555;
+  margin-right: 2%;
+  margin-bottom: 2%;
+  border-radius: 10px;
+  border: 1px solid #409EFF;
+  cursor: pointer;
+}
+
+.f-acvite {
+  background: #409eff !important;
+  color: #fff !important;
+  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
+}
+
+.anniu {
+  width: 160px;
+  height: 60px;
+  background: linear-gradient(312deg, #FF945B 0%, #FEB37C 100%);
+  border-radius: 6px 6px 6px 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+.price_ {
+  font-size: 24px;
+  color: #333333;
+  font-weight: bold;
+}
+
+.price_prefer {
+  font-size: 16px;
+  color: #FF4347;
+}
+
+.cont-tab {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #EEEEEE;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #999999;
+  padding: 0px 20px;
+  padding-top: 25px;
+}
+.r-top{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #EEEEEE;
+  padding: 0px 20px;
+  padding-top: 15px;
+  padding-bottom: 10px;
+  font-size: 16px;
+  color: #555555;
+}
+.input-box{
+  width: 90%;
+  height: 40px;
+  background: #FAFAFA;
+  border-radius: 6px 6px 6px 6px;
+  border: 1px solid #DDDDDD;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0px 15px;
+  margin: 15px auto;
+}
+.gang {
+  width: 24px;
+  height: 3px;
+  //background: linear-gradient( 90deg, #FF8646 0%, #FFA360 100%);
+  border-radius: 3px 3px 3px 3px;
+}
+
+.active_gang {
+  background: linear-gradient(90deg, #FF8646 0%, #FFA360 100%) !important;
+}
+
+.tab-box {
+  margin-right: 30px;
+  cursor: pointer;
+}
+
+.active_name {
+  font-size: 14px;
+  color: #555555;
+  font-weight: bold;
+}
+
+.tab-kuang {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  margin: 0 auto;
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  overflow: auto;
+  height: 68vh;
+
+}
+
+.card92 {
+  width: 32%;
+  height: 90px;
+  box-sizing: border-box;
+  padding: 5px;
+  background: rgba(255, 150, 85, 0.1);
+  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: 6px 6px 6px 6px;
+  border: 1px solid #FF9655;
+  color: #FF9655;
+  font-size: 12px;
+  color: #FF9655;
+  overflow: hidden;
+  margin-right: 1%;
+  margin-bottom: 1%;
+}
+
+.card0 {
+  width: 32%;
+  height: 90px;
+  box-sizing: border-box;
+  padding: 5px;
+  background: rgba(255,181,25,0.1);
+  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: 6px 6px 6px 6px;
+  border: 1px solid #FFB519;
+
+  font-size: 12px;
+  color: #FFB519;
+  overflow: hidden;
+  margin-right: 1%;
+  margin-bottom: 1%;
+}
+
+.card98 {
+  width: 32%;
+  height: 90px;
+  box-sizing: border-box;
+  padding: 5px;
+  background: rgba(64,158,255,0.1);
+  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: 6px 6px 6px 6px;
+  border: 1px solid #409EFF;
+  font-size: 12px;
+  color: #409EFF;
+  overflow: hidden;
+  margin-right: 1%;
+  margin-bottom: 1%;
+}
+
+.card95 {
+  width: 32%;
+  height: 90px;
+  box-sizing: border-box;
+  padding: 5px;
+  background: rgba(13, 194, 145, 0.1);
+  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: 6px 6px 6px 6px;
+  border: 1px solid #0DC291;
+  font-size: 12px;
+  color: #0DC291;
+  overflow: hidden;
+  margin-right: 1%;
+  margin-bottom: 1%;
+}
+
+.card-title {
+  font-size: 24px;
+  color: #555555;
+  margin: 6px auto;
+  text-align: center;
+}
+
+.c-b-d {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.c-bottom{
+  font-size: 14px;
+  color: #333333;
+  border-bottom: 2px solid #F4F5F9;
+  box-sizing: border-box;
+  padding: 10px 20px;
+
+}
+.bottom-b-d{
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  font-size: 16px;
+  color: #777777;
+}
+.anniu-c{
+  width: 80px;
+  height: 36px;
+  background: #FFFFFF;
+  border-radius: 6px 6px 6px 6px;
+  border: 1px solid #DDDDDD;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #777777;
+}
+.anniu-lv{
+  width: 80px;
+  height: 36px;
+  background: linear-gradient( 312deg, #9CDCA0 0%, #5BC557 100%);
+  border-radius: 6px 6px 6px 6px;
+cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.anniu-lan{
+  cursor: pointer;
+  width: 80px;
+  height: 36px;
+  background: linear-gradient( 312deg, #70CAFD 0%, #0BADFE 100%, #02AAFE 100%);
+  border-radius: 6px 6px 6px 6px;
+  margin: 0px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.taber-top{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 5px 20px;
+  background: #f4f5f9;
+  display: flex;
+  align-items: center;
+}
+.taber-box{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  border-bottom: 1px solid #f4f5f9;
+  display: flex;
+  align-items: center;
+}
+.goods_name{
+  width: 35%;
+
+
+}
+.stock_name{
+  width: 15%;
+  text-align: center;
+
+}
+.u-price_name{
+  width: 15%;
+  text-align: center;
+}
+.num_name{
+  width: 15%;
+  text-align: center;
+}
+.orerate_name{
+  width: 20%;
+  text-align: center;
+}
 </style>