提交

assets/css/root.scss

@@ -514,6 +514,7 @@
         --size-172: 172px;
         --size-173: 173px;
         --size-174: 174px;
+        --size-175: 175px;
         --size-176: 176px;
         --size-178: 178px;
         --size-179: 179px;
@@ -860,6 +861,7 @@
         --size-172: 8.9583vw;
         --size-173: 9.0104vw;
         --size-174: 9.0625vw;
+        --size-175: 9.1145vw;
         --size-176: 9.1667vw;
         --size-178: 9.2708vw;
         --size-179: 9.3229vw;

components/Header/index.vue

@@ -490,11 +490,11 @@ const getDictListData = async () => {
     name: "term",
     icon: renderIcon("iconfont icon-shejiyukaifa-"),
   });
-  aboutOptions.push({
-    label: t("common.navAboutUs.qualify"),
-    name: "qualify",
-    icon: renderIcon("iconfont iconfont icon-ziyuan"),
-  });
+  // aboutOptions.push({
+  //   label: t("common.navAboutUs.qualify"),
+  //   name: "qualify",
+  //   icon: renderIcon("iconfont iconfont icon-ziyuan"),
+  // });
   bulletinOptions.push({
     label: "行业简报",
     name: "bulletinThinkTank",

pages/contact/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="page" class="page">
     <div class="top">
-      <img src="@/assets/images/report/img1.png" alt="">
+      <img src="@/assets/images/contactUs/img5.png" alt="">
       <div>
-        <div class="top_title">Industry News</div>
+        <div class="top_title">Contact Us</div>
         <div class="top_location">
           <span class="iconfont icon-weizhi"></span>
-          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Industry News</span>
+          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Contact Us</span>
         </div>
       </div>
     </div>

pages/mine/index.vue

@@ -9,7 +9,7 @@
         <div class="content_l">
           <div class="content_l_t">
             <img src="@/assets/images/avatar.png" alt="">
-            <div>Linda</div>
+            <div>{{user.name}}</div>
           </div>
           <div class="content_l_b">
             <div class="content_l_b_item" :class="{active:currentTab.index==0}" @click="handleTab(0)">
@@ -166,52 +166,52 @@ onMounted(() => {
     }
   }
   .content {
-    padding: 50px 175px;
+    padding: var(--size-50) var(--size-175);
     > div {
       background: #f4f7f9;
-      border-radius: 20px;
-      padding: 18px 20px;
+      border-radius: var(--size-20);
+      padding: var(--size-18) var(--size-20);
       display: flex;
       .content_l {
         .content_l_t {
-          width: 343px;
-          height: 220px;
+          width: var(--size-343);
+          height: var(--size-220);
           background: linear-gradient(180deg, #60ab91, #84a86c);
-          border-radius: 20px;
+          border-radius: var(--size-20);
           text-align: center;
-          padding-top: 32px;
+          padding-top: var(--size-32);
           img {
-            width: 100px;
-            height: 100px;
+            width: var(--size-100);
+            height: var(--size-100);
             background: rgba(0, 0, 0, 0);
-            border: 2px solid #ffffff;
+            border: var(--size-2) solid #ffffff;
             border-radius: 50%;
           }
           > div {
-            font-size: 28px;
+            font-size: var(--size-28);
             font-family: Microsoft YaHei, Microsoft YaHei-Regular;
             text-align: center;
             color: #ffffff;
-            line-height: 44px;
+            line-height: var(--size-44);
             letter-spacing: 0.08px;
           }
         }
         .content_l_b {
-          margin-top: 20px;
+          margin-top: var(--size-20);
           .content_l_b_item {
-            width: 343px;
-            height: 70px;
-            border-radius: 20px;
+            width: var(--size-343);
+            height: var(--size-70);
+            border-radius: var(--size-20);
             color: #1a1a1a;
-            line-height: 70px;
+            line-height: var(--size-70);
             letter-spacing: 0.05px;
-            font-size: 18px;
-            padding-left: 63px;
+            font-size: var(--size-18);
+            padding-left: var(--size-63);
             cursor: pointer;
             span {
               display: inline-block;
-              margin-right: 15px;
-              font-size: 20px;
+              margin-right: var(--size-15);
+              font-size: var(--size-20);
               color: #1a1a1a;
             }
           }
@@ -227,9 +227,9 @@ onMounted(() => {
       .content_r {
         flex: 1;
         background: #ffffff;
-        border-radius: 20px;
-        margin-left: 45px;
-        padding: 30px 30px;
+        border-radius: var(--size-20);
+        margin-left: var(--size-45);
+        padding: var(--size-30);
       }
     }
   }
@@ -239,13 +239,13 @@ onMounted(() => {
     .location {
       padding: 0;
       .location_l {
-        margin-right: 15px;
+        margin-right: var(--size-15);
       }
     }
     .mobile-container {
       .custom-tabs {
         .n-tab-pane {
-          padding: 15px;
+          padding: var(--size-15);
         }
       }
     }

pages/mine/modules/down.vue

@@ -71,37 +71,37 @@ const changePage = (page: number) => {
 @import "~/assets/css/tool.scss";
 .list-box {
   .title {
-    font-size: 24px;
+    font-size: var(--size-24);
     font-family: Arial, Arial-Bold;
     font-weight: 700;
     color: #1a1a1a;
-    line-height: 44px;
-    padding-bottom: 7px;
-    border-bottom: 1px solid #e6e6e6;
+    line-height: var(--size-44);
+    padding-bottom: var(--size-7);
+    border-bottom: var(--size-1) solid #e6e6e6;
   }
   .list {
-    margin-top: 45px;
+    margin-top: var(--size-45);
     .item {
-      padding: 30px 25px;
+      padding: var(--size-30) var(--size-25);
       display: flex;
-      border: 1px solid #e6e6e6;
-      margin-bottom: 30px;
+      border: var(--size-1) solid #e6e6e6;
+      margin-bottom: var(--size-30);
       &:last-child {
         margin-bottom: 0;
       }
       img {
-        width: 148px;
-        height: 216px;
+        width: var(--size-148);
+        height: var(--size-216);
         object-fit: contain;
       }
       .item_content {
-        margin-left: 40px;
+        margin-left: var(--size-40);
         .item_content_title {
-          font-size: 21px;
+          font-size: var(--size-21);
           font-family: Arial, Arial-Regular;
           color: #1a1a1a;
-          line-height: 28px;
-          margin-top: 10px;
+          line-height: var(--size-28);
+          margin-top: var(--size-10);
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
@@ -113,10 +113,10 @@ const changePage = (page: number) => {
         }
         .item_content_format {
           display: flex;
-          font-size: 16px;
+          font-size: var(--size-16);
           font-family: Arial, Arial-Regular;
           color: #1a1a1a;
-          line-height: 44px;
+          line-height: var(--size-44);
           letter-spacing: 0.05px;
           span {
             color: #808080;
@@ -129,20 +129,20 @@ const changePage = (page: number) => {
 @include responseTo("phone") {
   .list-box {
     .list {
-      margin-top: 20px;
+      margin-top: var(--size-20);
       .item {
-        padding: 10px;
+        padding: var(--size-10);
         > img {
           display: none;
         }
         .item_content {
-          padding: 10px;
+          padding: var(--size-10);
           margin: 0;
           .item_content_title {
             display: flex;
             > div {
-              font-size: 18px;
-              line-height: 26px;
+              font-size: var(--size-18);
+              line-height: var(--size-26);
               overflow: hidden;
               text-overflow: ellipsis;
               display: -webkit-box;
@@ -150,20 +150,21 @@ const changePage = (page: number) => {
               -webkit-box-orient: vertical;
             }
             > img {
-              width: 74px;
-              height: 108px;
+              width: var(--size-74);
+              height: var(--size-108);
               object-fit: contain;
-              margin-right: 10px;
+              margin-right: var(--size-10);
+              display: block;
             }
           }
           .item_content_format {
-            font-size: 14px;
+            font-size: var(--size-14);
           }
           .item_content_amount {
-            font-size: 14px;
-            line-height: 30px;
+            font-size: var(--size-14);
+            line-height: var(--size-30);
             span {
-              font-size: 26px;
+              font-size: var(--size-26);
             }
           }
         }
@@ -171,7 +172,7 @@ const changePage = (page: number) => {
           position: static;
           width: 100%;
           justify-content: center;
-          padding-bottom: 20px;
+          padding-bottom: var(--size-20);
         }
       }
     }

pages/mine/modules/order.vue

@@ -12,20 +12,20 @@
       </div>
     </div>
     <div class="list">
-      <div class="item" v-for="(v,i) in 3" :key="i">
-        <div class="item_title">Order Number：2145878541</div>
+      <div class="item" v-for="item in pageData.list" :key="item.id">
+        <div class="item_title">Order Number：{{ item.orderNumber }}</div>
         <div class="item_content">
-          <img src="" alt="">
+          <img :src="BaseUrl + '/report/' + item.researchReportFileName" alt="">
           <div>
             <div class="item_content_title">
-              <img src="" alt="">
+              <img :src="BaseUrl + '/report/' + item.researchReportFileName" alt="">
               <div>
-                China Industrial Park Industry Market In-depth Research andInvestment Strategy Planning Report 2024-2030
+                {{ item.researchBriefReportTitle ||item.researchReportTitle}}
               </div>
             </div>
-            <div class="item_content_time">Order placement time：<span>December 21, 2014, 15:11</span></div>
-            <div class="item_content_method">Payment method：<span>Alipay payment</span></div>
-            <div class="item_content_amount">Payment amount：<span>$4.950.00</span></div>
+            <div class="item_content_time">Order placement time：<span> {{item.createDate}}</span></div>
+            <div class="item_content_method">Payment method：<span>{{item.payResearchType}} </span></div>
+            <div class="item_content_amount">Payment amount：<span>${{item.payPrice}}</span></div>
           </div>
         </div>
         <div class="btnBox">
@@ -34,6 +34,26 @@
         </div>
       </div>
     </div>
+    <div class="pageBox" v-if="pageData?.list.length>0">
+      <n-pagination show-quick-jumper :page-count="pageData?.count" :on-update:page="changePage" :page-slot="6">
+        <template #prev>
+          <div class="pageBox_btn">Previous</div>
+        </template>
+        <template #next>
+          <div class="pageBox_btn">Next</div>
+        </template>
+        <template #goto>
+          <div class="pageBox_inp">Go To</div>
+        </template>
+      </n-pagination>
+    </div>
+    <div class="box-empty" v-if="pageData?.count === 0">
+      <n-empty description="Data Missed">
+        <template #extra>
+          <!-- <n-button @click="handleDemand({ id: '', price: 0 }, '0')" round type="primary">{{ t("report.detail.custom") }}</n-button> -->
+        </template>
+      </n-empty>
+    </div>
   </div>
 </template>
 
@@ -271,22 +291,22 @@ defineExpose({
   .titleBox {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 7px;
-    border-bottom: 1px solid #e6e6e6;
+    padding-bottom: var(--size-7);
+    border-bottom: var(--size-1) solid #e6e6e6;
     .titleBox_l {
-      font-size: 24px;
+      font-size: var(--size-24);
       font-family: Arial, Arial-Bold;
       font-weight: 700;
       color: #1a1a1a;
-      line-height: 44px;
+      line-height: var(--size-44);
     }
     .titleBox_r {
       display: flex;
       align-items: center;
-      width: 500px;
+      width: var(--size-500);
       height: var(--size-44);
       background: #f5f5f5;
-      border-radius: 8px;
+      border-radius: var(--size-8);
       overflow: hidden;
       .titleBox_r_l {
         flex-grow: 1;
@@ -294,7 +314,7 @@ defineExpose({
           --n-height: var(--size-26) !important;
           line-height: var(--size-26) !important;
           background: #f5f5f5 !important;
-          font-size: 14px !important;
+          font-size: var(--size-14) !important;
         }
       }
       .titleBox_r_r {
@@ -310,41 +330,41 @@ defineExpose({
     }
   }
   .list {
-    margin-top: 45px;
+    margin-top: var(--size-45);
     .item {
-      border: 1px solid #e6e6e6;
+      border: var(--size-1) solid #e6e6e6;
       position: relative;
-      margin-bottom: 30px;
+      margin-bottom: var(--size-30);
       &:last-child {
         margin-bottom: 0;
       }
       .item_title {
-        font-size: 20px;
+        font-size: var(--size-20);
         font-family: Arial, Arial-Bold;
         font-weight: 700;
         text-align: left;
         color: #1a1a1a;
-        line-height: 44px;
+        line-height: var(--size-44);
         letter-spacing: 0.06px;
-        padding: 14px 25px;
+        padding: var(--size-14) var(--size-25);
         background: #f5f5f5;
       }
       .item_content {
-        padding: 20px 25px 23px;
+        padding: var(--size-20) var(--size-25) var(--size-23);
         display: flex;
         align-items: center;
         > img {
-          width: 148px;
-          height: 216px;
+          width: var(--size-148);
+          height: var(--size-216);
           object-fit: contain;
         }
         > div {
-          margin-left: 40px;
+          margin-left: var(--size-40);
           .item_content_title {
-            font-size: 21px;
+            font-size: var(--size-21);
             font-family: Arial, Arial-Regular;
             color: #1a1a1a;
-            line-height: 28px;
+            line-height: var(--size-28);
             img {
               display: none;
             }
@@ -352,7 +372,7 @@ defineExpose({
           .item_content_time,
           .item_content_method {
             display: flex;
-            font-size: 16px;
+            font-size: var(--size-16);
             font-family: Arial, Arial-Regular;
             color: #1a1a1a;
             letter-spacing: 0.05px;
@@ -361,21 +381,21 @@ defineExpose({
             }
           }
           .item_content_time {
-            margin: 20px 0 0;
+            margin: var(--size-20) 0 0;
           }
           .item_content_method {
-            margin: 6px 0 10px;
+            margin: var(--size-6) 0 var(--size-10);
           }
           .item_content_amount {
             display: flex;
-            font-size: 16px;
+            font-size: var(--size-16);
             font-family: Arial, Arial-Regular;
             color: #1a1a1a;
-            line-height: 44px;
+            line-height: var(--size-44);
             letter-spacing: 0.05px;
             align-items: baseline;
             span {
-              font-size: 30px;
+              font-size: var(--size-30);
               color: #ee001f;
             }
           }
@@ -384,18 +404,18 @@ defineExpose({
       .btnBox {
         display: flex;
         position: absolute;
-        right: 20px;
-        bottom: 45px;
+        right: var(--size-20);
+        bottom: var(--size-45);
         > div {
-          width: 144px;
-          height: 48px;
-          border-radius: 8px;
-          font-size: 14px;
+          width: var(--size-144);
+          height: var(--size-48);
+          border-radius: var(--size-8);
+          font-size: var(--size-14);
           font-family: Arial, Arial-Regular;
           text-align: center;
           color: #ffffff;
-          line-height: 48px;
-          margin-right: 14px;
+          line-height: var(--size-48);
+          margin-right: var(--size-14);
           cursor: pointer;
           &:last-child {
             margin-right: 0;
@@ -414,22 +434,22 @@ defineExpose({
 @include responseTo("phone") {
   .list-box {
     .titleBox {
-      padding-bottom: 20px;
+      padding-bottom: var(--size-20);
       display: block;
       .titleBox_r {
         width: 100%;
       }
     }
     .list {
-      margin-top: 20px;
+      margin-top: var(--size-20);
       .item {
         .item_title {
-          padding: 10px 15px;
-          font-size: 18px;
-          line-height: 24px;
+          padding: var(--size-10) var(--size-15);
+          font-size: var(--size-18);
+          line-height: var(--size-24);
         }
         .item_content {
-          padding: 10px;
+          padding: var(--size-10);
           > img {
             display: none;
           }
@@ -438,8 +458,8 @@ defineExpose({
             .item_content_title {
               display: flex;
               > div {
-                font-size: 18px;
-                line-height: 26px;
+                font-size: var(--size-18);
+                line-height: var(--size-26);
                 overflow: hidden;
                 text-overflow: ellipsis;
                 display: -webkit-box;
@@ -447,21 +467,22 @@ defineExpose({
                 -webkit-box-orient: vertical;
               }
               > img {
-                width: 74px;
-                height: 108px;
+                width: var(--size-74);
+                height: var(--size-108);
                 object-fit: contain;
-                margin-right: 10px;
+                margin-right: var(--size-10);
+                display: block;
               }
             }
             .item_content_time,
             .item_content_method {
-              font-size: 14px;
+              font-size: var(--size-14);
             }
             .item_content_amount {
-              font-size: 14px;
-              line-height: 30px;
+              font-size: var(--size-14);
+              line-height: var(--size-30);
               span {
-                font-size: 26px;
+                font-size: var(--size-26);
               }
             }
           }
@@ -470,7 +491,7 @@ defineExpose({
           position: static;
           width: 100%;
           justify-content: center;
-          padding-bottom: 20px;
+          padding-bottom: var(--size-20);
         }
       }
     }

pages/mine/modules/update-info.vue

@@ -87,51 +87,51 @@ const message = createDiscreteApi(["message"]);
 <style lang="scss" scoped>
 @import "~/assets/css/tool.scss";
 .container {
-  padding: 30px 58px 45px;
+  padding: var(--size-30) var(--size-58) var(--size-45);
   background: #ffffff;
-  border-radius: 20px;
+  border-radius: var(--size-20);
   .title {
-    font-size: 38px;
+    font-size: var(--size-38);
     font-family: Arial, Arial-Bold;
     font-weight: 700;
     text-align: center;
     color: #1a1a1a;
     > div {
-      width: 71px;
-      height: 6px;
+      width: var(--size-71);
+      height: var(--size-6);
       background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
-      border-radius: 3px;
+      border-radius: var(--size-3);
       margin: auto;
     }
   }
   .login-btn {
     width: 100%;
-    height: 58px;
+    height: var(--size-58);
     background: linear-gradient(90deg, #60ab91, #84a86c);
-    border-radius: 8px;
-    font-size: 18px;
-    margin-top: 10px;
+    border-radius: var(--size-8);
+    font-size: var(--size-18);
+    margin-top: var(--size-10);
 
     :deep(.n-button__content) {
       display: block;
     }
   }
   .n-form {
-    margin-top: 30px;
+    margin-top: var(--size-30);
   }
   :deep(.n-form-item-blank) {
-    border-bottom: 1px solid #e6e6e6;
+    border-bottom: var(--size-1) solid #e6e6e6;
   }
   :deep(.n-form-item-label) {
     color: #666666;
     font-size: var(--size-14);
     font-family: Microsoft YaHei, Microsoft YaHei-Regular;
     line-height: var(--size-20);
-    padding: 10px 10px 10px 0;
-    border-bottom: 1px solid #e6e6e6;
+    padding: var(--size-10) var(--size-10) var(--size-10) 0;
+    border-bottom: var(--size-1) solid #e6e6e6;
   }
   :deep(.n-form-item-label__text) {
-    height: 30px;
+    height: var(--size-30);
   }
   :deep(.n-input-wrapper) {
     font-size: var(--size-14);

pages/mine/modules/updatePwd.vue

@@ -135,21 +135,22 @@ const handleUrl = () => {
 </script>
 
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .container {
-  padding: 30px 58px 55px;
+  padding: var(--size-30) var(--size-58) var(--size-55);
   background: #ffffff;
-  border-radius: 20px;
+  border-radius: var(--size-20);
   .title {
-    font-size: 38px;
+    font-size: var(--size-38);
     font-family: Arial, Arial-Bold;
     font-weight: 700;
     text-align: center;
     color: #1a1a1a;
     > div {
-      width: 71px;
-      height: 6px;
+      width: var(--size-71);
+      height: var(--size-6);
       background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
-      border-radius: 3px;
+      border-radius: var(--size-3);
       margin: auto;
     }
   }
@@ -157,11 +158,11 @@ const handleUrl = () => {
   .form {
     .login-btn {
       width: 100%;
-      height: 58px;
+      height: var(--size-58);
       background: linear-gradient(90deg, #60ab91, #84a86c);
-      border-radius: 8px;
-      font-size: 18px;
-      margin-top: 10px;
+      border-radius: var(--size-8);
+      font-size: var(--size-18);
+      margin-top: var(--size-10);
 
       :deep(.n-button__content) {
         display: block;
@@ -172,7 +173,7 @@ const handleUrl = () => {
   .mobile-form {
     top: 60%;
     width: 85%;
-    padding: 20px;
+    padding: var(--size-20);
   }
 
   // .n-form {
@@ -185,21 +186,21 @@ const handleUrl = () => {
   //   }
   // }
   .n-form {
-    margin-top: 30px;
+    margin-top: var(--size-30);
   }
   :deep(.n-form-item-blank) {
-    border-bottom: 1px solid #e6e6e6;
+    border-bottom: var(--size-1) solid #e6e6e6;
   }
   :deep(.n-form-item-label) {
     color: #666666;
     font-size: var(--size-14);
     font-family: Microsoft YaHei, Microsoft YaHei-Regular;
     line-height: var(--size-20);
-    padding: 10px 10px 10px 0;
-    border-bottom: 1px solid #e6e6e6;
+    padding: var(--size-10) var(--size-10) var(--size-10) 0;
+    border-bottom: var(--size-1) solid #e6e6e6;
   }
   :deep(.n-form-item-label__text) {
-    height: 30px;
+    height: var(--size-30);
   }
   :deep(.n-input-wrapper) {
     font-size: var(--size-14);

pages/mine/modules/user-info.vue

@@ -4,11 +4,11 @@
     <div class="formBox">
       <div class="item">
         <div class="label">Nickname：</div>
-        <div class="val">Linda</div>
+        <div class="val">{{ user.name }}</div>
       </div>
       <div class="item">
         <div class="label">Mobile phone number：</div>
-        <div class="val">18525462514</div>
+        <div class="val">{{ user.contact }}</div>
         <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
       </div>
       <div class="item">
@@ -18,24 +18,24 @@
       </div>
       <div class="item">
         <div class="label">Company name：</div>
-        <div class="val">Wuhan Baijian Fanglue Information Consulting Co., LTD</div>
+        <div class="val"> {{ user.companyName || "--" }}</div>
         <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
       </div>
       <div class="item">
         <div class="label">Company position：</div>
-        <div class="val">Sales Manager</div>
+        <div class="val">{{ user.addr || "--" }}</div>
         <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
       </div>
       <div class="item">
         <div class="label">Email address：</div>
-        <div class="val">12454871456@163com</div>
+        <div class="val">{{ user.email }}</div>
         <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
       </div>
-      <div class="item">
+      <!-- <div class="item">
         <div class="label">Contact number：</div>
         <div class="val">13512458745</div>
         <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
-      </div>
+      </div> -->
     </div>
   </div>
   <n-modal :show="editVisible" :title="editTitle" :showIcon="false" :close-on-esc="false" :mask-closable="false" @esc="editVisible = false" @mask-click="editVisible = false" @close="editVisible = false" class="modalCls" :class="{ 'login-dialog': isMobile }">
@@ -95,38 +95,38 @@ getUser();
 .user-box {
   height: 100%;
   .title {
-    font-size: 24px;
+    font-size: var(--size-24);
     font-family: Arial, Arial-Bold;
     font-weight: 700;
     color: #1a1a1a;
-    line-height: 44px;
-    padding-bottom: 7px;
-    border-bottom: 1px solid #e6e6e6;
+    line-height: var(--size-44);
+    padding-bottom: var(--size-7);
+    border-bottom: var(--size-1) solid #e6e6e6;
   }
   .formBox {
-    padding-bottom: 150px;
+    padding-bottom: var(--size-150);
     .item {
       display: flex;
       align-items: center;
-      border-bottom: 1px solid #f5f5f5;
-      margin-bottom: 10px;
+      border-bottom: var(--size-1) solid #f5f5f5;
+      margin-bottom: var(--size-10);
       .label {
-        font-size: 18px;
+        font-size: var(--size-18);
         font-family: Arial, Arial-Regular;
         color: #666666;
-        line-height: 63px;
+        line-height: var(--size-63);
       }
       .val {
-        font-size: 18px;
+        font-size: var(--size-18);
         font-family: Arial, Arial-Regular;
         color: #1a1a1a;
-        line-height: 63px;
+        line-height: var(--size-63);
       }
       .iconfont {
         color: #00b0fd;
         display: inline-block;
-        margin-left: 20px;
-        font-size: 18px;
+        margin-left: var(--size-20);
+        font-size: var(--size-18);
         cursor: pointer;
       }
     }
@@ -139,32 +139,32 @@ getUser();
 @include responseTo("phone") {
   .user-box {
     .formBox {
-      padding-bottom: 30px;
-      margin-top: 15px;
+      padding-bottom: var(--size-30);
+      margin-top: var(--size-15);
       .item {
         align-items: baseline;
-        border-bottom: 1px solid #f5f5f5;
-        margin-bottom: 10px;
+        border-bottom: var(--size-1) solid #f5f5f5;
+        margin-bottom: var(--size-10);
         .label {
-          font-size: 14px;
+          font-size: var(--size-14);
           font-family: Arial, Arial-Regular;
           color: #666666;
-          line-height: 30px;
+          line-height: var(--size-30);
           flex-shrink: 0;
-          padding-bottom: 10px;
+          padding-bottom: var(--size-10);
         }
         .val {
-          font-size: 14px;
+          font-size: var(--size-14);
           font-family: Arial, Arial-Regular;
           color: #1a1a1a;
-          line-height: 30px;
-          padding-bottom: 10px;
+          line-height: var(--size-30);
+          padding-bottom: var(--size-10);
         }
         .iconfont {
           color: #00b0fd;
           display: inline-block;
-          margin-left: 20px;
-          font-size: 14px;
+          margin-left: var(--size-20);
+          font-size: var(--size-14);
           cursor: pointer;
         }
       }