样式修改

.postcssrc.js

@@ -8,7 +8,7 @@ module.exports = {
     autoprefixer: {}
   },
   "postcss-pxtorem": {
-    rootValue: 37.5,
+    rootValue: 32,
     propList: ["*"]
   }
 };

src/router/index.js

@@ -98,7 +98,7 @@ var _constant_router_map = [
   },
   {
     path: "/",
-    component: () => import("@/scrm_pages/microHome/microHome")
+    component: () => import("@/scrm_pages/apply/apply")
   },
 
   // 医院介绍详情路由

src/scrm_pages/activity/activity.vue

@@ -123,69 +123,69 @@
 <style lang="scss" scoped>
 .contentOne {
   margin: auto;
-  margin-top: 18px;
-  width: 334px;
-  height: 119px;
+  margin-top: 1.125rem;
+  width: 20.875rem;
+  height: 7.4375rem;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
   border-radius: 16px;
-  padding-left: 16px;
-  padding-top: 18px;
+  padding-left: 1rem;
+  padding-top: 1.125rem;
   box-sizing: border-box;
   .img {
     float: left;
-    width: 80px;
-    height: 80px;
+    width: 5rem;
+    height: 5rem;
     border-radius: 12px;
   }
   .detail {
     float: left;
-    margin-left: 13px;
-    width: 210px;
+    margin-left: 0.8125rem;
+    width: 13.125rem;
     .detailTitle {
-      margin-top: 8px;
-      width: 203px;
-      height: 17px;
-      font-size: 15px;
+      margin-top: 0.5rem;
+      width: 12.6875rem;
+      height: 1.0625rem;
+      font-size: 0.9375rem;
       font-weight: 600;
       color: rgba(7, 18, 40, 1);
     }
     .detailMessage {
-      margin-top: 4px;
-      width: 212px;
-      height: 58px;
-      font-size: 13px;
+      margin-top: 0.25rem;
+      width: 13.25rem;
+      height: 3.625rem;
+      font-size: 0.8125rem;
       font-weight: 400;
       color: rgba(155, 155, 155, 1);
-      line-height: 18px;
+      line-height: 1.125rem;
     }
   }
 }
 .detailBox {
-  margin-top: 10px;
+  margin-top: 0.625rem;
   .activityTime {
     float: left;
-    width: 118px;
-    height: 35px;
-    font-size: 13px;
+    width: 7.375rem;
+    height: 2.1875rem;
+    font-size: 0.8125rem;
     color: rgba(155, 155, 155, 1);
-    line-height: 24px;
+    line-height: 1.5rem;
   }
   .people {
-    margin-top: 16px;
+    margin-top: 1rem;
     float: left;
-    width: 86px;
-    height: 30px;
+    width: 5.375rem;
+    height: 1.875rem;
     background: rgba(57, 124, 254, 0.1);
     border-radius: 30px;
     p {
       margin: auto;
       text-align: center;
-      width: 70px;
-      height: 12px;
-      font-size: 12px;
+      width: 4.375rem;
+      height: 0.75rem;
+      font-size: 0.75rem;
       color: rgba(57, 124, 254, 1);
-      line-height: 30px;
+      line-height: 1.875rem;
     }
   }
 }

src/scrm_pages/activityDetail/activityDetail.vue

@@ -7,7 +7,7 @@
       <div class="top">与孩子一起挑选采摘新鲜有机马陆葡萄，体验采摘乐趣</div>
       <div class="bottom">
         <p class="browse">
-          <i class="iconfont">&#xe632;</i>
+          <i class="iconfont">&#xe629;</i>
           <span>浏览400次</span>
         </p>
       </div>
@@ -46,8 +46,8 @@
 
 <style lang="scss" scoped>
 .banner {
-  width: 375px;
-  height: 220px;
+  width: 100%;
+  height: 13.75rem;
   img {
     width: 100%;
     height: 100%;
@@ -55,67 +55,67 @@
 }
 .headline {
   position: fixed;
-  width: 334px;
-  height: 105px;
-  margin-top: -20px;
-  left: 20px;
-  z-index: 99px;
+  width: 20.875rem;
+  height: 6.5625rem;
+  margin-top: -1.25rem;
+  left: 1.25rem;
+  z-index: 99;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
   border-radius: 10px;
-  padding: 17px 10px 0 14px;
+  padding: 1.0625rem 0.625rem 0 0.875rem;
   box-sizing: border-box;
   .top {
-    font-size: 17px;
+    font-size: 1.0625rem;
     font-weight: 600;
     color: rgba(7, 18, 40, 1);
-    line-height: 24px;
+    line-height: 1.5rem;
   }
 }
 .browse {
   color: rgba(182, 186, 193, 1);
-  margin-top: 8px;
+  margin-top: 0.5rem;
   span {
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 400;
   }
 }
 .detail {
-  margin-left: 20px;
-  margin-top: 90px;
+  margin-left: 1.25rem;
+  margin-top: 5.625rem;
   .row {
-    margin: 10px 0;
+    margin: 0.625rem 0;
     i {
       color: #b6bac1;
     }
     span {
-      font-size: 14px;
+      font-size: 0.875rem;
       font-weight: 600;
       color: rgba(7, 18, 40, 1);
-      margin-left: 10px;
+      margin-left: 0.625rem;
     }
   }
 }
 .introduce {
-  margin-left: 20px;
-  margin-top: 24px;
+  margin-left: 1.25rem;
+  margin-top: 1.5rem;
 }
 
 .common_title {
-  width: 335px;
-  height: 18px;
-  line-height: 18px;
-  font-size: 18px;
+  width: 20.9375rem;
+  height: 1.125rem;
+  line-height: 1.125rem;
+  font-size: 1.125rem;
   font-weight: 800;
   color: rgba(7, 18, 40, 1);
 }
 
 .one {
-  margin-top: 2px;
-  margin-right: 10px;
+  margin-top: 0.125rem;
+  margin-right: 0.625rem;
   float: left;
-  width: 2px;
-  height: 14px;
+  width: 0.125rem;
+  height: 0.875rem;
   background: linear-gradient(
     0deg,
     rgba(114, 182, 253, 1),
@@ -125,25 +125,25 @@
   border-radius: 3px;
 }
 .introduceDetail {
-  width: 318px;
-  height: 92px;
-  font-size: 16px;
+  width: 19.875rem;
+  height: 5.75rem;
+  font-size: 1rem;
   color: rgba(155, 155, 155, 1);
-  line-height: 24px;
-  margin-top: 18px;
-  padding-left: 6px;
+  line-height: 1.5rem;
+  margin-top: 1.125rem;
+  padding-left: 0.375rem;
   box-sizing: border-box;
 }
 .apply {
   width: 100%;
-  height: 42px;
+  height: 2.625rem;
   position: fixed;
   left: 0;
   bottom: 0;
   text-align: center;
-  line-height: 42px;
+  line-height: 2.625rem;
   color: rgba(255, 255, 255, 1);
-  font-size: 18px;
+  font-size: 1.125rem;
   background: linear-gradient(
     90deg,
     rgba(114, 182, 253, 1),

src/scrm_pages/apply/apply.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <div class="tel">
-      <el-input v-model="phone" placeholder="手机号码"></el-input>
+      <el-input v-model="phone" placeholder="手机号码" class="myinput"></el-input>
     </div>
     <div class="codeBox">
       <div class="verificationCode">
-        <el-input v-model="verificationCode" placeholder="手机号码"></el-input>
+        <el-input v-model="verificationCode" placeholder="手机号码" class="myinput"></el-input>
       </div>
       <div class="gain">获取验证码</div>
     </div>
@@ -26,29 +26,32 @@ export default {
 </script>
 
 
-<style lang="scss" scoped>
+<style lang="scss">
+.myinput .el-input__inner {
+  height: 2.25rem;
+}
 .tel {
-  margin: 34px 21px 17px 21px;
-  height: 40px;
+  margin: 2.125rem 1.3125rem 1.0625rem 1.3125rem;
+  height: 2.5rem;
 }
 .codeBox {
-  height: 36px;
-  margin-left: 21px;
-  margin-bottom: 17px;
+  height: 2.25rem;
+  margin-left: 1.3125rem;
+  margin-bottom: 1.0625rem;
   .verificationCode {
     float: left;
-    width: 208px;
-    height: 40px;
-    margin-right: 12px;
+    width: 13rem;
+    height: 2.5rem;
+    margin-right: 0.75rem;
   }
   .gain {
     float: left;
     text-align: center;
     color: rgba(255, 255, 255, 1);
-    font-size: 15px;
-    line-height: 36px;
-    width: 114px;
-    height: 36px;
+    font-size: 0.9375rem;
+    line-height: 2.25rem;
+    width: 7.125rem;
+    height: 2.25rem;
     background: linear-gradient(
       90deg,
       rgba(114, 182, 253, 1),
@@ -59,8 +62,8 @@ export default {
   }
 }
 .submit {
-  width: 334px;
-  height: 40px;
+  width: 20.875rem;
+  height: 2.5rem;
   background: linear-gradient(
     90deg,
     rgba(114, 182, 253, 1),
@@ -69,9 +72,9 @@ export default {
   box-shadow: 0px 4px 12px 0px rgba(60, 127, 254, 0.2);
   border-radius: 4px;
   color: rgba(255, 255, 255, 1);
-  font-size: 18px;
+  font-size: 1.125rem;
   text-align: center;
-  line-height: 40px;
-  margin-left: 21px;
+  line-height: 2.5rem;
+  margin-left: 1.3125rem;
 }
 </style>

src/scrm_pages/doctorIntroduction/doctorIntroduction.vue

@@ -38,73 +38,73 @@
 <style lang="scss" scoped>
 .contentOne {
   margin: auto;
-  margin-top: 18px;
-  width: 334px;
-  height: 119px;
+  margin-top: 1.125rem;
+  width: 20.875rem;
+  height: 7.4375rem;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
   border-radius: 16px;
-  padding-left: 16px;
-  padding-top: 18px;
+  padding-left: 1rem;
+  padding-top: 1.125rem;
   box-sizing: border-box;
   .img {
     float: left;
-    width: 80px;
-    height: 80px;
+    width: 5rem;
+    height: 5rem;
     border-radius: 12px;
   }
   .detail {
     float: left;
-    margin-left: 13px;
-    width: 210px;
+    margin-left: 0.8125rem;
+    width: 13.125rem;
     .detailTitle {
-      margin-top: 8px;
-      width: 203px;
-      height: 17px;
-      font-size: 15px;
+      margin-top: 0.5rem;
+      width: 12.6875rem;
+      height: 1.0625rem;
+      font-size: 0.9375rem;
       font-weight: 600;
       color: rgba(7, 18, 40, 1);
       span {
-        font-size: 14px;
+        font-size: 0.875rem;
         color: rgba(155, 155, 155, 1);
-        line-height: 18px;
-        margin-left: 20px;
+        line-height: 1.125rem;
+        margin-left: 1.25rem;
         font-weight: 400;
       }
     }
     .detailMessage {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: rgba(155, 155, 155, 1);
-      line-height: 24px;
+      line-height: 1.5rem;
       font-weight: 400;
-      margin-top: 14px;
+      margin-top: 0.875rem;
     }
   }
 }
 .good {
-  margin-left: 20px;
-  margin-top: 35px;
+  margin-left: 1.25rem;
+  margin-top: 2.1875rem;
 }
 .common_title {
-  width: 335px;
-  height: 18px;
-  line-height: 18px;
+  width: 20.9375rem;
+  height: 1.125rem;
+  line-height: 1.125rem;
 }
 .dynamicTxt {
   float: left;
-  width: 72px;
-  height: 18px;
-  line-height: 18px;
-  font-size: 18px;
+  width: 4.5rem;
+  height: 1.125rem;
+  line-height: 1.125rem;
+  font-size: 1.125rem;
   font-weight: 600;
   color: rgba(7, 18, 40, 1);
 }
 .one {
-  margin-top: 2px;
-  margin-right: 6px;
+  margin-top: 0.125rem;
+  margin-right: 0.375rem;
   float: left;
-  width: 2px;
-  height: 14px;
+  width: 0.125rem;
+  height: 0.875rem;
   background: linear-gradient(
     0deg,
     rgba(114, 182, 253, 1),
@@ -114,10 +114,10 @@
   border-radius: 3px;
 }
 .goodtxt {
-  margin: 16px 0 36px 14px;
-  font-size: 16px;
+  margin: 1rem 0 2.25rem 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
   color: rgba(68, 75, 92, 1);
-  line-height: 24px;
+  line-height: 1.5rem;
 }
 </style>

src/scrm_pages/hospitalIntroduction/hospitalIntroduction.vue

@@ -17,19 +17,19 @@
 
 <style lang="scss" scoped>
 .bannerImg {
-  width: 339px;
-  height: 194px;
+  width: 21.1875rem;
+  height: 12.125rem;
   margin: 0 auto;
   border-radius: 10px;
   box-sizing: border-box;
-  padding: 18px 0;
+  padding: 1.125rem 0;
 }
 .detail {
   margin: 0 auto;
-  width: 336px;
-  height: 368px;
-  font-size: 16px;
+  width: 21rem;
+  height: 23rem;
+  font-size: 1rem;
   color: rgba(7, 18, 40, 1);
-  line-height: 24px;
+  line-height: 1.5rem;
 }
 </style>

src/scrm_pages/medicalTeam/medicalTeam.vue

@@ -70,25 +70,26 @@
 
 <style lang="scss" scoped>
 .header {
-  height: 20px;
-  width: 138px;
+  height: 1.25rem;
+  width: 9.375rem;
   text-align: center;
-  margin: 12px auto;
+  margin: 0.75rem auto;
   .headerTitle {
     float: left;
-    height: 20px;
-    line-height: 20px;
-    font-size: 18px;
+    height: 1.25rem;
+    line-height: 1.25rem;
+    font-size: 1.125rem;
     color: rgba(7, 18, 40, 1);
     font-weight: 600;
     margin: 0 auto;
     text-align: center;
+    padding: 0 0.25rem;
   }
   .line {
     float: left;
-    margin-top: 8px;
-    width: 15px;
-    height: 3px;
+    margin-top: 0.5rem;
+    width: 0.9375rem;
+    height: 0.1875rem;
     background: linear-gradient(
       -45deg,
       rgba(50, 210, 139, 1),
@@ -97,50 +98,50 @@
   }
 }
 .msg {
-  width: 210px;
-  height: 15px;
-  font-size: 15px;
+  width: 13.125rem;
+  height: 0.9375rem;
+  font-size: 0.9375rem;
   font-weight: 100;
   color: rgba(7, 18, 40, 1);
   margin: 0 auto;
 }
 .contentOne {
   margin: auto;
-  margin-top: 18px;
-  width: 334px;
-  height: 119px;
+  margin-top: 1.125rem;
+  width: 20.875rem;
+  height: 7.4375rem;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
   border-radius: 16px;
-  padding-left: 16px;
-  padding-top: 18px;
+  padding-left: 1rem;
+  padding-top: 1.125rem;
   box-sizing: border-box;
   .img {
     float: left;
-    width: 80px;
-    height: 80px;
+    width: 5rem;
+    height: 5rem;
     border-radius: 12px;
   }
   .detail {
     float: left;
-    margin-left: 13px;
-    width: 210px;
+    margin-left: 0.8125rem;
+    width: 13.125rem;
     .detailTitle {
-      margin-top: 8px;
-      width: 203px;
-      height: 17px;
-      font-size: 15px;
+      margin-top: 0.5rem;
+      width: 12.6875rem;
+      height: 1.0625rem;
+      font-size: 0.9375rem;
       font-weight: 600;
       color: rgba(7, 18, 40, 1);
     }
     .detailMessage {
-      margin-top: 4px;
-      width: 212px;
-      height: 58px;
-      font-size: 13px;
+      margin-top: 0.25rem;
+      width: 13.25rem;
+      height: 3.625rem;
+      font-size: 0.8125rem;
       font-weight: 400;
       color: rgba(155, 155, 155, 1);
-      line-height: 18px;
+      line-height: 1.125rem;
     }
   }
 }

src/scrm_pages/microHome/microHome.vue

@@ -271,6 +271,9 @@ export default {
   },
   mounted() {
     this.initSwiper();
+  },
+  updated() {
+    this.initSwiper();
   }
 };
 </script>
@@ -290,7 +293,7 @@ export default {
   }
 }
 .banner {
-  height: 151px;
+  height: 9.4375rem;
 }
 .swiper-container {
   height: 100%;
@@ -313,18 +316,18 @@ export default {
   flex-wrap: wrap;
   width: 100%;
   //   height: 180px;
-  margin-top: 20px;
+  margin-top: 1.25rem;
 }
 .btnOne {
   display: block;
   width: 25%;
   text-align: center;
-  height: 80px;
+  height: 5rem;
   img {
-    margin-bottom: 5px;
+    margin-bottom: 0.3125rem;
     text-align: center;
-    width: 45px;
-    height: 45px;
+    width: 2.8125rem;
+    height: 2.8125rem;
     background: linear-gradient(
       0deg,
       rgba(255, 201, 115, 1),
@@ -335,35 +338,35 @@ export default {
   }
   .title {
     width: 100%;
-    height: 18px;
-    line-height: 18px;
-    font-size: 14px;
+    height: 1.125rem;
+    line-height: 1.125rem;
+    font-size: 0.875rem;
     text-align: center;
   }
 }
 .dynamic {
-  margin-top: 49px;
+  margin-top: 3.0625rem;
 }
 .common_title {
-  width: 335px;
-  height: 18px;
+  width: 20.9375rem;
+  height: 1.125rem;
   margin: 0 auto;
 }
 .dynamicTxt {
   float: left;
-  width: 72px;
-  height: 18px;
-  line-height: 18px;
-  font-size: 18px;
+  width: 4.5rem;
+  height: 1.125rem;
+  line-height: 1.125rem;
+  font-size: 1.125rem;
   font-weight: 600;
   color: rgba(7, 18, 40, 1);
 }
 .one {
-  margin-top: 2px;
-  margin-right: 6px;
+  margin-top: 0.125rem;
+  margin-right: 0.375rem;
   float: left;
-  width: 2px;
-  height: 14px;
+  width: 0.125rem;
+  height: 0.875rem;
   background: linear-gradient(
     0deg,
     rgba(114, 182, 253, 1),
@@ -376,126 +379,126 @@ export default {
   float: right;
   p {
     color: #b6bac1;
-    height: 18px;
-    line-height: 18px;
+    height: 1.125rem;
+    line-height: 1.125rem;
   }
 }
 .contentOne {
   margin: auto;
-  margin-top: 18px;
-  width: 334px;
-  height: 119px;
+  margin-top: 1.125rem;
+  width: 20.875rem;
+  height: 7.4375rem;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 16px;
-  padding-left: 16px;
-  padding-top: 18px;
+  border-radius: 1rem;
+  padding-left: 1rem;
+  padding-top: 1.125rem;
   box-sizing: border-box;
   .img {
     float: left;
-    width: 80px;
-    height: 80px;
+    width: 5rem;
+    height: 5rem;
     border-radius: 12px;
   }
   .detail {
     float: left;
-    margin-left: 13px;
-    width: 210px;
+    margin-left: 0.8125rem;
+    width: 13.125rem;
     .detailTitle {
-      margin-top: 8px;
-      width: 203px;
-      height: 17px;
-      font-size: 15px;
+      margin-top: 0.5rem;
+      width: 12.6875rem;
+      height: 1.0625rem;
+      font-size: 0.9375rem;
       font-weight: 600;
       color: rgba(7, 18, 40, 1);
     }
     .detailMessage {
-      margin-top: 4px;
-      width: 212px;
-      height: 58px;
-      font-size: 13px;
+      margin-top: 0.25rem;
+      width: 13.25rem;
+      height: 3.625rem;
+      font-size: 0.75rem;
       font-weight: 400;
       color: rgba(155, 155, 155, 1);
-      line-height: 18px;
+      line-height: 1.125rem;
     }
   }
 }
 .common {
-  margin-top: 30px;
+  margin-top: 1.875rem;
   .commonBox {
     margin: auto;
-    margin-top: 20px;
-    width: 334px;
-    height: 325px;
+    margin-top: 1.25rem;
+    width: 20.875rem;
+    height: 20.3125rem;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
     border-radius: 16px;
-    padding: 18px 21px 21px 21px;
+    padding: 1.125rem 1.3125rem 1.3125rem 1.3125rem;
   }
   .commonImg {
-    width: 295px;
-    height: 169px;
+    width: 18.4375rem;
+    height: 10.5625rem;
     border-radius: 10px;
   }
   .commonMessage {
-    margin-top: 22px;
-    width: 284px;
-    height: 81px;
-    font-size: 14px;
+    margin-top: 1.375rem;
+    width: 17.75rem;
+    height: 5.0625rem;
+    font-size: 0.875rem;
     color: rgba(60, 60, 60, 1);
-    line-height: 22px;
+    line-height: 1.375rem;
   }
 }
 .imgs {
-  margin-top: 30px;
+  margin-top: 1.875rem;
   overflow-x: hidden;
   img {
-    width: 172px;
-    height: 125px;
+    width: 10.75rem;
+    height: 7.8125rem;
     border-radius: 10px;
   }
   .carousel {
     width: 100%;
     height: 100%;
     float: left;
-    padding-left: 20px;
+    padding-left: 1.25rem;
   }
 }
 .detailBox {
-  margin-top: 10px;
+  margin-top: 0.625rem;
   .activityTime {
     float: left;
-    width: 118px;
-    height: 35px;
-    font-size: 13px;
+    width: 7.375rem;
+    height: 2.1875rem;
+    font-size: 0.8125rem;
     color: rgba(155, 155, 155, 1);
-    line-height: 24px;
+    line-height: 1.5rem;
   }
   .people {
-    margin-top: 16px;
+    margin-top: 1rem;
     float: left;
-    width: 86px;
-    height: 30px;
+    width: 5.375rem;
+    height: 1.875rem;
     background: rgba(57, 124, 254, 0.1);
     border-radius: 30px;
     p {
       margin: auto;
       text-align: center;
-      width: 70px;
-      height: 12px;
-      font-size: 12px;
+      width: 4.375rem;
+      height: 0.75rem;
+      font-size: 0.75rem;
       color: rgba(57, 124, 254, 1);
-      line-height: 30px;
+      line-height: 1.875rem;
     }
   }
 }
 .bottom {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 .tabs {
   @include border-top;
   width: 100%;
-  height: 50px;
+  height: 3.125rem;
   box-sizing: border-box;
 }
 .tabList {
@@ -509,9 +512,9 @@ export default {
     align-items: center;
 
     img {
-      margin-top: 8px;
-      width: 20px;
-      height: 20px;
+      margin-top: 0.5rem;
+      width: 1.25rem;
+      height: 1.25rem;
       background: linear-gradient(
         0deg,
         rgba(114, 182, 253, 1),
@@ -519,9 +522,9 @@ export default {
       );
     }
     span {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: rgba(182, 186, 193, 1);
-      line-height: 21px;
+      line-height: 1.3125rem;
     }
   }
 }

src/scrm_pages/news/news.vue

@@ -63,41 +63,41 @@
 <style lang="scss" scoped>
 .contentOne {
   margin: auto;
-  margin-top: 18px;
-  width: 334px;
-  height: 119px;
+  margin-top: 1.125rem;
+  width: 20.875rem;
+  height: 7.4375rem;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
   border-radius: 16px;
-  padding-left: 16px;
-  padding-top: 18px;
+  padding-left: 1rem;
+  padding-top: 1.125rem;
   box-sizing: border-box;
   .img {
     float: left;
-    width: 80px;
-    height: 80px;
+    width: 5rem;
+    height: 5rem;
     border-radius: 12px;
   }
   .detail {
     float: left;
-    margin-left: 13px;
-    width: 210px;
+    margin-left: 0.8125rem;
+    width: 13.125rem;
     .detailTitle {
-      margin-top: 8px;
-      width: 203px;
-      height: 17px;
-      font-size: 15px;
+      margin-top: 0.5rem;
+      width: 12.6875rem;
+      height: 1.0625rem;
+      font-size: 0.9375rem;
       font-weight: 600;
       color: rgba(7, 18, 40, 1);
     }
     .detailMessage {
-      margin-top: 4px;
-      width: 212px;
-      height: 58px;
-      font-size: 13px;
+      margin-top: 0.25rem;
+      width: 13.25rem;
+      height: 3.625rem;
+      font-size: 0.8125rem;
       font-weight: 400;
       color: rgba(155, 155, 155, 1);
-      line-height: 18px;
+      line-height: 1.125rem;
     }
   }
 }