样式修改

src/pages/Home.vue

@@ -118,14 +118,8 @@ export default {
 <style lang="less" scoped>
 .container {
     .mytest {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-        width: 100%;
+        .mytest();
         height: 288px;
-        z-index: -1;
         img {
             width: 100vw;
             display: block;
@@ -245,10 +239,7 @@ export default {
                 }
             }
             .text2 {
-                font-size: 13px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 22px;
+                .text12();
                 margin: 2px 0 6px;
             }
             .text3 {
@@ -262,10 +253,7 @@ export default {
                 justify-content: space-between;
                 width: 100%;
                 .text2 {
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #939599;
-                    line-height: 22px;
+                    .text12();
                     margin-top: 6px;
                 }
                 .imgBox {

src/pages/confirmorder.vue

@@ -125,13 +125,14 @@
             </div>
         </div>
         <div class="box-total">
-            <div class="box-con-num">
+            <div class="box-num">
                 <span>合计</span>
                 <img
                     src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
                     alt=""
                 />
                 <p>{{ list.total }}</p>
+                <div class="text1">.00</div>
             </div>
             <van-button type="warning" @click="order">确认订单</van-button>
         </div>
@@ -336,15 +337,7 @@ export default {
     background: #f5f7fa;
     padding-bottom: 140px;
     /deep/ .van-button {
-        width: 120px;
-        height: 44px;
-        background: @prim;
-        border-radius: 8px;
-        font-size: 16px;
-        font-weight: 400;
-        color: #ffffff;
-        margin-right: 16px;
-        border: 0;
+        .button();
     }
     /deep/ .van-cell {
         --cell-vertical-padding: 0px;
@@ -353,14 +346,8 @@ export default {
     .top {
         padding: 108px 0 0 12px;
         .mytest {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-            width: 100%;
             height: 200px;
-            z-index: -1;
+            .mytest();
             img {
                 width: 100vw;
                 display: block;
@@ -405,10 +392,7 @@ export default {
                 }
             }
             .text2 {
-                font-size: 14px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 24px;
+                .text14();
                 margin: 4px 0 0 20px;
             }
             img {
@@ -426,10 +410,8 @@ export default {
             margin: 0 12px 0 32px;
 
             .text1 {
-                font-size: 14px;
+                .span();
                 font-weight: 400;
-                color: #000000;
-                line-height: 24px;
             }
             .time1 {
                 .flex();
@@ -464,10 +446,8 @@ export default {
                     height: 18px;
                 }
                 .tit {
-                    font-size: 14px;
+                    .span();
                     font-weight: 400;
-                    color: #000000;
-                    line-height: 24px;
                     padding-left: 6px;
                 }
             }
@@ -509,10 +489,8 @@ export default {
                     margin-right: 18px;
                 }
                 .name {
-                    font-size: 14px;
-                    font-weight: bold;
+                    .span();
                     color: #1c1c1c;
-                    line-height: 24px;
                 }
                 .name1 {
                     font-size: 14px;
@@ -534,16 +512,12 @@ export default {
             justify-content: space-between;
             padding: 0 16px;
             .text1 {
-                font-size: 13px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 24px;
+                .text13();
             }
             .text2 {
-                font-size: 14px;
+                .span();
                 font-weight: 400;
                 color: #1c1c1c;
-                line-height: 24px;
             }
         }
     }
@@ -562,22 +536,14 @@ export default {
             justify-content: space-between;
             padding: 0 16px;
             .name {
-                font-size: 14px;
-                font-weight: bold;
-                color: #000000;
+                .span();
                 line-height: 20px;
                 .message {
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #c8c9cc;
-                    line-height: 22px;
+                    .message();
                 }
             }
             .text1 {
-                font-size: 13px;
-                font-weight: 400;
-                color: #c8c9cc;
-                line-height: 22px;
+                .message();
             }
             .text2 {
                 height: 22px;
@@ -591,20 +557,12 @@ export default {
     .box-total {
         .bottom();
         .flex();
-        height: 56px;
-        justify-content: space-between;
-        background: #ffffff;
-        width: 100%;
-        position: fixed;
-        bottom: 0;
-        .box-con-num {
+        .btn();
+        .box-num {
             .flex();
             margin-left: 14px;
             span {
-                font-size: 14px;
-                font-weight: bold;
-                color: #000000;
-                line-height: 24px;
+                .span();
             }
             img {
                 width: 13px;
@@ -612,11 +570,10 @@ export default {
                 margin: 7px 0 0 5px;
             }
             p {
-                font-family: 'OSP';
-                font-size: 34px;
-                font-weight: normal;
-                color: #ff7f1f;
-                line-height: 34px;
+                .p();
+            }
+            .text1 {
+                .text10();
             }
         }
     }

src/pages/evaluate.vue

@@ -164,14 +164,14 @@ export default {
                 .then(res => {
                     this.hideLoading();
                     console.log(res);
-                    // this.images = [
-                    //     {
-                    //         url: res
-                    //     }
-                    // ];
-                    return this.img.push(res).map(item => {
-                        return (this.images = [{ url: item }]);
-                    });
+                    this.images = [
+                        {
+                            url: res
+                        }
+                    ];
+                    // return this.img.push(res).map(item => {
+                    //     return (this.images = [{ url: item }]);
+                    // });
                     // console.log(this.images);
                     // console.log(this.images);
                 })
@@ -238,10 +238,7 @@ export default {
             .flex();
             margin: 0 12px 18px 12px;
             .text1 {
-                font-size: 14px;
-                font-weight: bold;
-                color: #000000;
-                line-height: 24px;
+                .span();
                 &.text2 {
                     margin-left: 20px;
                 }
@@ -256,12 +253,8 @@ export default {
         padding: 20px 0 20px 0;
         margin: 20px 0;
         .title {
-            font-size: 14px;
-            font-weight: bold;
-            color: #000000;
-            line-height: 24px;
-            margin-left: 12px;
-            margin-bottom: 6px;
+            .span();
+            margin: 0 0 6px 12px;
         }
         .uploader {
             margin: 112px 0 0 12px;
@@ -285,10 +278,7 @@ export default {
             justify-content: space-between;
             margin: 0 12px 16px;
             .text1 {
-                font-size: 14px;
-                font-weight: bold;
-                color: #000000;
-                line-height: 24px;
+                .span();
             }
             .text2 {
                 .flex();
@@ -297,10 +287,8 @@ export default {
                     .flex();
                     margin-left: 16px;
                     .text4 {
-                        font-size: 14px;
+                        .span();
                         font-weight: 400;
-                        color: #000000;
-                        line-height: 24px;
                         margin-left: 4px;
                     }
                 }

src/pages/merchantorders.vue

@@ -215,12 +215,13 @@
                     @click="addFlag"
                 />
                 <div>
-                    <div class="box-con-num">
+                    <div class="box-num">
                         <img
                             src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
                             alt=""
                         />
-                        <p>{{ tal }}.00</p>
+                        <p>{{ tal }}</p>
+                        <div class="text1">.00</div>
                     </div>
                     <div class="text1">另外配送费2元</div>
                 </div>
@@ -230,7 +231,8 @@
         <van-popup :show="show" position="bottom" @close="show = false">
             <div class="popupTop">
                 <div class="text1">已选商品</div>
-                <div class="text2">(包装费 ¥5)</div>
+                <div class="text2">(包装费&nbsp;&nbsp;</div>
+                <div class="text3">¥5)</div>
             </div>
             <div
                 @click="navigateTo('/pages/storedetails')"
@@ -403,15 +405,7 @@ export default {
 .container {
     padding-bottom: 150px;
     /deep/ .van-button {
-        width: 120px;
-        height: 44px;
-        background: @prim;
-        border-radius: 8px;
-        font-size: 16px;
-        font-weight: 400;
-        color: #ffffff;
-        margin-right: 16px;
-        border: 0;
+        .button();
     }
     /deep/ .van-popup {
         margin-bottom: 73px;
@@ -449,14 +443,8 @@ export default {
     .top {
         padding: 96px 16px 0;
         .mytest {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-            width: 100%;
             height: 155px;
-            z-index: -1;
+            .mytest();
             img {
                 width: 100vw;
                 display: block;
@@ -499,10 +487,7 @@ export default {
                     margin: 2px 0 10px;
                 }
                 .text2 {
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #939599;
-                    line-height: 22px;
+                    .text12();
                 }
                 img {
                     width: 80px;
@@ -538,10 +523,7 @@ export default {
                 margin-right: 8px;
             }
             .text2 {
-                font-size: 13px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 24px;
+                .text13();
             }
         }
         .search {
@@ -562,10 +544,8 @@ export default {
                 margin: 0 10px 0 14px;
             }
             .text1 {
-                font-size: 14px;
-                font-weight: bold;
+                .span();
                 color: #1c1c1c;
-                line-height: 24px;
             }
             .text2 {
                 font-size: 13px;
@@ -579,19 +559,10 @@ export default {
                 justify-content: space-between;
                 width: 172px;
                 .price {
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #ff7f1f;
-                    line-height: 24px;
+                    .price();
                 }
                 .add {
-                    width: 24px;
-                    height: 24px;
-                    background: @prim;
-                    line-height: 24px;
-                    text-align: center;
-                    font-weight: bold;
-                    color: #fff;
+                    .add();
                 }
             }
         }
@@ -635,9 +606,7 @@ export default {
                         line-height: 24px;
                     }
                     .text2 {
-                        font-size: 13px;
-                        color: #939599;
-                        line-height: 22px;
+                        .text12();
                     }
                 }
                 .give {
@@ -648,10 +617,7 @@ export default {
                         height: 16px;
                     }
                     .text1 {
-                        font-size: 13px;
-                        font-weight: 400;
-                        color: #939599;
-                        line-height: 24px;
+                        .text13();
                         margin-left: 4px;
                     }
                 }
@@ -674,17 +640,11 @@ export default {
         }
         .characteristic {
             .title {
-                font-size: 14px;
-                font-weight: bold;
-                color: #000000;
-                line-height: 24px;
+                .span();
                 margin: 20px 0 6px;
             }
             .text1 {
-                font-size: 13px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 22px;
+                .text12();
             }
             .border {
                 border-bottom: 1px solid @bg;
@@ -693,16 +653,10 @@ export default {
             .text {
                 .flex();
                 .text1 {
-                    font-size: 14px;
-                    font-weight: bold;
-                    color: #000000;
-                    line-height: 24px;
+                    .span();
                 }
                 .text2 {
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #939599;
-                    line-height: 22px;
+                    .text12();
                     margin-left: 9px;
                 }
             }
@@ -717,14 +671,9 @@ export default {
     .box-total {
         .bottom();
         .flex();
-        height: 56px;
         z-index: 101;
-        justify-content: space-between;
-        background: #ffffff;
         box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
-        width: 100%;
-        position: fixed;
-        bottom: 0;
+        .btn();
         .ImgBox {
             .flex();
             img {
@@ -732,13 +681,10 @@ export default {
                 height: 72px;
                 margin-bottom: 6px;
             }
-            .box-con-num {
+            .box-num {
                 .flex();
                 span {
-                    font-size: 14px;
-                    font-weight: bold;
-                    color: #000000;
-                    line-height: 24px;
+                    .span();
                 }
                 img {
                     width: 13px;
@@ -746,11 +692,10 @@ export default {
                     margin-top: 16px;
                 }
                 p {
-                    font-family: 'OSP';
-                    font-size: 34px;
-                    font-weight: normal;
-                    color: #ff7f1f;
-                    line-height: 34px;
+                    .p();
+                }
+                .text1 {
+                    .text10();
                 }
             }
             .text1 {
@@ -774,6 +719,9 @@ export default {
         .text2 {
             color: #939599;
         }
+        .text3 {
+            color: #ff7f1f;
+        }
     }
     .popup {
         padding: 0 16px 0 16px;
@@ -787,10 +735,8 @@ export default {
                 margin: 0 10px 0 0;
             }
             .text1 {
-                font-size: 14px;
-                font-weight: bold;
+                .span();
                 color: #1c1c1c;
-                line-height: 24px;
                 margin-bottom: 32px;
             }
             .text2 {
@@ -805,19 +751,10 @@ export default {
                 justify-content: space-between;
                 width: 252px;
                 .price {
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #ff7f1f;
-                    line-height: 24px;
+                    .price();
                 }
                 .add {
-                    width: 24px;
-                    height: 24px;
-                    background: @prim;
-                    line-height: 24px;
-                    text-align: center;
-                    font-weight: bold;
-                    color: #fff;
+                    .add();
                 }
             }
         }

src/pages/orderdetails.vue

@@ -84,7 +84,7 @@
             <div class="box">
                 <div class="box-con">
                     <p>订单编号</p>
-                    <div class="texe1">
+                    <div class="text1">
                         <span @click="orderCopy">复制</span>
                         <div class="text2">{{ list.transactionId }}</div>
                     </div>
@@ -93,7 +93,7 @@
             <div class="box">
                 <div class="box-con">
                     <p>下单时间</p>
-                    <div class="texe1">
+                    <div class="text1">
                         <div class="text2">{{ list.createdAt }}</div>
                     </div>
                 </div>
@@ -234,14 +234,8 @@ export default {
     .top {
         padding: 100px 0 0 16px;
         .mytest {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-            width: 100%;
             height: 190px;
-            z-index: -1;
+            .mytest();
             img {
                 width: 100vw;
                 display: block;
@@ -273,10 +267,8 @@ export default {
                     height: 18px;
                 }
                 .tit {
-                    font-size: 14px;
+                    .span();
                     font-weight: 400;
-                    color: #000000;
-                    line-height: 24px;
                     padding-left: 6px;
                 }
             }
@@ -306,10 +298,8 @@ export default {
                     margin-right: 18px;
                 }
                 .name {
-                    font-size: 14px;
-                    font-weight: bold;
+                    .span();
                     color: #1c1c1c;
-                    line-height: 24px;
                 }
                 .name1 {
                     font-size: 14px;
@@ -331,16 +321,11 @@ export default {
             justify-content: space-between;
             padding: 0 16px;
             .text1 {
-                font-size: 13px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 24px;
+                .text13();
             }
             .text2 {
-                font-size: 14px;
-                font-weight: 400;
+                .span();
                 color: #1c1c1c;
-                line-height: 24px;
             }
             &.order2 {
                 margin-bottom: 14px;
@@ -392,9 +377,7 @@ export default {
             margin-bottom: 20px;
             padding: 0 16px;
             .name {
-                font-size: 14px;
-                font-weight: bold;
-                color: #000000;
+                .span();
                 line-height: 20px;
             }
             .text1 {
@@ -410,7 +393,7 @@ export default {
             .box-con {
                 .flex();
                 justify-content: space-between;
-                .texe1 {
+                .text1 {
                     display: flex;
                     span {
                         width: 38px;
@@ -426,11 +409,7 @@ export default {
                     }
                 }
                 p {
-                    height: 24px;
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #939599;
-                    line-height: 24px;
+                    .text13();
                 }
                 .text2 {
                     height: 22px;

src/pages/schoolsearch.vue

@@ -80,10 +80,7 @@ export default {
             }
         }
         .text {
-            font-size: 14px;
-            font-weight: 400;
-            color: #000000;
-            line-height: 24px;
+            .span();
             margin-left: 12px;
         }
     }
@@ -105,7 +102,7 @@ export default {
                 border-radius: 12px;
                 font-size: 13px;
                 font-weight: 400;
-                color: #c8c9cc;
+                background: @border1;
                 line-height: 24px;
                 text-align: center;
                 margin-right: 20px;

src/pages/shoppingCart.vue

@@ -16,8 +16,8 @@
                     alt=""
                 />
                 <div class="text">
-                    <div class="text1">总共3商品</div>
-                    <div class="text1 text2" @click="admini">{{ `${flag ? '管理' : '完成'}` }}</div>
+                    <div class="text1">总共2商品</div>
+                    <div class="text1 text2" @click="admini">{{ `${flag ? '管理' : '取消'}` }}</div>
                 </div>
 
                 <div class="box">
@@ -82,7 +82,7 @@
             </div>
         </van-sticky>
         <div class="box-total">
-            <div class="box-con-num">
+            <div class="box-num">
                 <img
                     style="width:24px;height:24px;margin:0;"
                     :src="
@@ -102,7 +102,8 @@
                     src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
                     alt=""
                 />
-                <p v-if="flag">24.00</p>
+                <p v-if="flag">24</p>
+                <div v-if="flag" class="text1">.00</div>
             </div>
             <van-button v-if="flag" type="warning" @click="order">一键结算</van-button>
             <van-button :disabled="!btn" v-else type="warning">删除</van-button>
@@ -143,13 +144,6 @@ export default {
                     image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
                     num: '226',
                     price: 20
-                },
-                {
-                    name: '寿司',
-                    id: 3,
-                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
-                    num: '226',
-                    price: 20
                 }
             ]
         };
@@ -203,15 +197,7 @@ export default {
     min-height: 600px;
     padding-bottom: 140px;
     /deep/ .van-button {
-        width: 120px;
-        height: 44px;
-        background: @prim;
-        border-radius: 8px;
-        font-size: 16px;
-        font-weight: 400;
-        color: #ffffff;
-        margin-right: 16px;
-        border: 0;
+        .button();
     }
     /deep/ .van-stepper__minus {
         width: 28px;
@@ -235,14 +221,8 @@ export default {
     .top {
         padding: 108px 12px 0;
         .mytest {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-            width: 100%;
             height: 200px;
-            z-index: -1;
+            .mytest();
             img {
                 width: 100vw;
                 display: block;
@@ -277,11 +257,9 @@ export default {
                     height: 24px;
                 }
                 .tit1 {
-                    font-size: 14px;
+                    .span();
                     font-weight: 400;
-                    color: #000000;
                     margin-right: 5px;
-                    line-height: 24px;
                 }
             }
             .merchantroCon {
@@ -294,10 +272,8 @@ export default {
                     margin: 0 10px 0 7px;
                 }
                 .text1 {
-                    font-size: 14px;
-                    font-weight: bold;
+                    .span();
                     color: #1c1c1c;
-                    line-height: 24px;
                 }
                 .text2 {
                     font-size: 13px;
@@ -311,10 +287,7 @@ export default {
                     justify-content: space-between;
                     width: 208px;
                     .price {
-                        font-size: 14px;
-                        font-weight: 400;
-                        color: #ff7f1f;
-                        line-height: 24px;
+                        .price();
                     }
                 }
             }
@@ -324,10 +297,7 @@ export default {
                 justify-content: space-between;
                 padding: 0 12px;
                 .text1 {
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #939599;
-                    line-height: 24px;
+                    .text13();
                     &.text2 {
                         color: #ff7f1f;
                     }
@@ -375,21 +345,13 @@ export default {
     .box-total {
         .bottom();
         .flex();
-        height: 56px;
-        justify-content: space-between;
-        background: #ffffff;
-        width: 100%;
+        .btn();
         box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
-        position: fixed;
-        bottom: 0;
-        .box-con-num {
+        .box-num {
             .flex();
             margin-left: 14px;
             span {
-                font-size: 14px;
-                font-weight: bold;
-                color: #000000;
-                line-height: 24px;
+                .span();
             }
             img {
                 width: 13px;
@@ -397,11 +359,10 @@ export default {
                 margin: 7px 0 0 5px;
             }
             p {
-                font-family: 'OSP';
-                font-size: 34px;
-                font-weight: normal;
-                color: #ff7f1f;
-                line-height: 34px;
+                .p();
+            }
+            .text1 {
+                .text10();
             }
             .all {
                 font-size: 14px;

src/pages/shopsearch.vue

@@ -101,10 +101,7 @@ export default {
             }
         }
         .text {
-            font-size: 14px;
-            font-weight: 400;
-            color: #000000;
-            line-height: 24px;
+            .span();
             margin-left: 12px;
         }
     }

src/pages/storedetails.vue

@@ -32,7 +32,8 @@
                             src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
                             alt=""
                         />
-                        <div class="text1">20.00</div>
+                        <div class="text1">20</div>
+                        <div class="text3">.00</div>
                         <div class="text2">另外配送费2元</div>
                     </div>
                     <div class="calculationCon">
@@ -107,16 +108,17 @@
         <div class="box-total">
             <div class="ImgBox">
                 <img
-                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-01-16-30-03wvZqsAeX.png"
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-16-47-32IOmXLZXX.png"
                     alt=""
                 />
                 <div>
-                    <div class="box-con-num">
+                    <div class="box-num">
                         <img
                             src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
                             alt=""
                         />
-                        <p>22.00</p>
+                        <p>22</p>
+                        <div class="text1">.00</div>
                     </div>
                     <div class="text1">另外配送费2元</div>
                 </div>
@@ -186,15 +188,7 @@ export default {
     background: #f5f7fa;
     padding-bottom: 150px;
     /deep/ .van-button {
-        width: 120px;
-        height: 44px;
-        background: @prim;
-        border-radius: 8px;
-        font-size: 16px;
-        font-weight: 400;
-        color: #ffffff;
-        margin-right: 16px;
-        border: 0;
+        .button();
     }
     .swiper {
         height: 375px;
@@ -241,10 +235,7 @@ export default {
                     margin-right: 8px;
                 }
                 .text2 {
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #939599;
-                    line-height: 24px;
+                    .text13();
                 }
             }
         }
@@ -282,7 +273,10 @@ export default {
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
-                    margin-left: 8px;
+                    margin: 8px 0 0 8px;
+                }
+                .text3 {
+                    .text10();
                 }
             }
             .calculationCon {
@@ -386,10 +380,7 @@ export default {
                         line-height: 24px;
                     }
                     .text2 {
-                        font-size: 13px;
-                        font-weight: 400;
-                        color: #939599;
-                        line-height: 22px;
+                        .text12();
                     }
                 }
                 .give {
@@ -400,10 +391,7 @@ export default {
                         height: 16px;
                     }
                     .text1 {
-                        font-size: 13px;
-                        font-weight: 400;
-                        color: #939599;
-                        line-height: 24px;
+                        .text13();
                         margin-left: 4px;
                     }
                 }
@@ -446,10 +434,7 @@ export default {
             margin-bottom: 5px;
             .text1 {
                 width: 79px;
-                font-size: 13px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 22px;
+                .text12();
             }
             .text2 {
                 font-size: 13px;
@@ -462,12 +447,7 @@ export default {
     .box-total {
         .bottom();
         .flex();
-        height: 56px;
-        justify-content: space-between;
-        background: #ffffff;
-        width: 100%;
-        position: fixed;
-        bottom: 0;
+        .btn();
         .ImgBox {
             .flex();
             img {
@@ -475,13 +455,10 @@ export default {
                 height: 72px;
                 margin-bottom: 6px;
             }
-            .box-con-num {
+            .box-num {
                 .flex();
                 span {
-                    font-size: 14px;
-                    font-weight: bold;
-                    color: #000000;
-                    line-height: 24px;
+                    .span();
                 }
                 img {
                     width: 13px;
@@ -489,11 +466,10 @@ export default {
                     margin-top: 16px;
                 }
                 p {
-                    font-family: 'OSP';
-                    font-size: 34px;
-                    font-weight: normal;
-                    color: #ff7f1f;
-                    line-height: 34px;
+                    .p();
+                }
+                .text1 {
+                    .text10();
                 }
             }
             .text1 {

src/styles/common.less

@@ -30,7 +30,94 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-
+.btn(){
+    height: 56px;
+    justify-content: space-between;
+    background: #ffffff;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+}
+.message(){
+      font-size: 13px;
+      font-weight: 400;
+      color: #c8c9cc;
+      line-height: 22px;
+}
+.span(){
+    font-size: 14px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 24px;
+}
+.p(){
+    font-family: 'OSP';
+    font-size: 34px;
+    font-weight: normal;
+    color: #ff7f1f;
+    line-height: 34px;
+}
+.text10(){
+    color: #ff7f1f;
+    font-size: 22px;
+    font-family: 'OSP';
+    font-weight: normal;
+    line-height: 22px;
+    margin-top: 8px;
+}
+.text14(){
+       font-size: 14px;
+       font-weight: 400;
+       color: #939599;
+       line-height: 24px;
+}
+.text13(){
+      font-size: 13px;
+      font-weight: 400;
+      color: #939599;
+      line-height: 24px;
+}
+.text12(){
+      font-size: 13px;
+      font-weight: 400;
+      color: #939599;
+      line-height: 22px;
+}
+.price(){
+     font-size: 14px;
+     font-weight: 400;
+     color: #ff7f1f;
+     line-height: 24px;
+}
+.add(){
+     width: 24px;
+     height: 24px;
+     background: @prim;
+     line-height: 24px;
+     text-align: center;
+     font-weight: bold;
+     color: #fff;
+}
+.mytest(){
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 100%;
+    z-index: -1;
+}
+.button(){
+    width: 120px;
+    height: 44px;
+    background: @prim;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #ffffff;
+    margin-right: 16px;
+    border: 0;
+}
 .ellipsis-line( @line:2 ) {
     display: -webkit-box;
     -webkit-box-orient: vertical;