Browse Source

样式修改

See999 4 years ago
parent
commit
fc741d4101

+ 1 - 1
.postcssrc.js View File

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

+ 1 - 1
src/router/index.js View File

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

+ 30 - 30
src/scrm_pages/activity/activity.vue View File

@@ -123,69 +123,69 @@
123 123
 <style lang="scss" scoped>
124 124
 .contentOne {
125 125
   margin: auto;
126
-  margin-top: 18px;
127
-  width: 334px;
128
-  height: 119px;
126
+  margin-top: 1.125rem;
127
+  width: 20.875rem;
128
+  height: 7.4375rem;
129 129
   background: rgba(255, 255, 255, 1);
130 130
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
131 131
   border-radius: 16px;
132
-  padding-left: 16px;
133
-  padding-top: 18px;
132
+  padding-left: 1rem;
133
+  padding-top: 1.125rem;
134 134
   box-sizing: border-box;
135 135
   .img {
136 136
     float: left;
137
-    width: 80px;
138
-    height: 80px;
137
+    width: 5rem;
138
+    height: 5rem;
139 139
     border-radius: 12px;
140 140
   }
141 141
   .detail {
142 142
     float: left;
143
-    margin-left: 13px;
144
-    width: 210px;
143
+    margin-left: 0.8125rem;
144
+    width: 13.125rem;
145 145
     .detailTitle {
146
-      margin-top: 8px;
147
-      width: 203px;
148
-      height: 17px;
149
-      font-size: 15px;
146
+      margin-top: 0.5rem;
147
+      width: 12.6875rem;
148
+      height: 1.0625rem;
149
+      font-size: 0.9375rem;
150 150
       font-weight: 600;
151 151
       color: rgba(7, 18, 40, 1);
152 152
     }
153 153
     .detailMessage {
154
-      margin-top: 4px;
155
-      width: 212px;
156
-      height: 58px;
157
-      font-size: 13px;
154
+      margin-top: 0.25rem;
155
+      width: 13.25rem;
156
+      height: 3.625rem;
157
+      font-size: 0.8125rem;
158 158
       font-weight: 400;
159 159
       color: rgba(155, 155, 155, 1);
160
-      line-height: 18px;
160
+      line-height: 1.125rem;
161 161
     }
162 162
   }
163 163
 }
164 164
 .detailBox {
165
-  margin-top: 10px;
165
+  margin-top: 0.625rem;
166 166
   .activityTime {
167 167
     float: left;
168
-    width: 118px;
169
-    height: 35px;
170
-    font-size: 13px;
168
+    width: 7.375rem;
169
+    height: 2.1875rem;
170
+    font-size: 0.8125rem;
171 171
     color: rgba(155, 155, 155, 1);
172
-    line-height: 24px;
172
+    line-height: 1.5rem;
173 173
   }
174 174
   .people {
175
-    margin-top: 16px;
175
+    margin-top: 1rem;
176 176
     float: left;
177
-    width: 86px;
178
-    height: 30px;
177
+    width: 5.375rem;
178
+    height: 1.875rem;
179 179
     background: rgba(57, 124, 254, 0.1);
180 180
     border-radius: 30px;
181 181
     p {
182 182
       margin: auto;
183 183
       text-align: center;
184
-      width: 70px;
185
-      height: 12px;
186
-      font-size: 12px;
184
+      width: 4.375rem;
185
+      height: 0.75rem;
186
+      font-size: 0.75rem;
187 187
       color: rgba(57, 124, 254, 1);
188
-      line-height: 30px;
188
+      line-height: 1.875rem;
189 189
     }
190 190
   }
191 191
 }

+ 37 - 37
src/scrm_pages/activityDetail/activityDetail.vue View File

@@ -7,7 +7,7 @@
7 7
       <div class="top">与孩子一起挑选采摘新鲜有机马陆葡萄,体验采摘乐趣</div>
8 8
       <div class="bottom">
9 9
         <p class="browse">
10
-          <i class="iconfont">&#xe632;</i>
10
+          <i class="iconfont">&#xe629;</i>
11 11
           <span>浏览400次</span>
12 12
         </p>
13 13
       </div>
@@ -46,8 +46,8 @@
46 46
 
47 47
 <style lang="scss" scoped>
48 48
 .banner {
49
-  width: 375px;
50
-  height: 220px;
49
+  width: 100%;
50
+  height: 13.75rem;
51 51
   img {
52 52
     width: 100%;
53 53
     height: 100%;
@@ -55,67 +55,67 @@
55 55
 }
56 56
 .headline {
57 57
   position: fixed;
58
-  width: 334px;
59
-  height: 105px;
60
-  margin-top: -20px;
61
-  left: 20px;
62
-  z-index: 99px;
58
+  width: 20.875rem;
59
+  height: 6.5625rem;
60
+  margin-top: -1.25rem;
61
+  left: 1.25rem;
62
+  z-index: 99;
63 63
   background: rgba(255, 255, 255, 1);
64 64
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
65 65
   border-radius: 10px;
66
-  padding: 17px 10px 0 14px;
66
+  padding: 1.0625rem 0.625rem 0 0.875rem;
67 67
   box-sizing: border-box;
68 68
   .top {
69
-    font-size: 17px;
69
+    font-size: 1.0625rem;
70 70
     font-weight: 600;
71 71
     color: rgba(7, 18, 40, 1);
72
-    line-height: 24px;
72
+    line-height: 1.5rem;
73 73
   }
74 74
 }
75 75
 .browse {
76 76
   color: rgba(182, 186, 193, 1);
77
-  margin-top: 8px;
77
+  margin-top: 0.5rem;
78 78
   span {
79
-    font-size: 12px;
79
+    font-size: 0.75rem;
80 80
     font-weight: 400;
81 81
   }
82 82
 }
83 83
 .detail {
84
-  margin-left: 20px;
85
-  margin-top: 90px;
84
+  margin-left: 1.25rem;
85
+  margin-top: 5.625rem;
86 86
   .row {
87
-    margin: 10px 0;
87
+    margin: 0.625rem 0;
88 88
     i {
89 89
       color: #b6bac1;
90 90
     }
91 91
     span {
92
-      font-size: 14px;
92
+      font-size: 0.875rem;
93 93
       font-weight: 600;
94 94
       color: rgba(7, 18, 40, 1);
95
-      margin-left: 10px;
95
+      margin-left: 0.625rem;
96 96
     }
97 97
   }
98 98
 }
99 99
 .introduce {
100
-  margin-left: 20px;
101
-  margin-top: 24px;
100
+  margin-left: 1.25rem;
101
+  margin-top: 1.5rem;
102 102
 }
103 103
 
104 104
 .common_title {
105
-  width: 335px;
106
-  height: 18px;
107
-  line-height: 18px;
108
-  font-size: 18px;
105
+  width: 20.9375rem;
106
+  height: 1.125rem;
107
+  line-height: 1.125rem;
108
+  font-size: 1.125rem;
109 109
   font-weight: 800;
110 110
   color: rgba(7, 18, 40, 1);
111 111
 }
112 112
 
113 113
 .one {
114
-  margin-top: 2px;
115
-  margin-right: 10px;
114
+  margin-top: 0.125rem;
115
+  margin-right: 0.625rem;
116 116
   float: left;
117
-  width: 2px;
118
-  height: 14px;
117
+  width: 0.125rem;
118
+  height: 0.875rem;
119 119
   background: linear-gradient(
120 120
     0deg,
121 121
     rgba(114, 182, 253, 1),
@@ -125,25 +125,25 @@
125 125
   border-radius: 3px;
126 126
 }
127 127
 .introduceDetail {
128
-  width: 318px;
129
-  height: 92px;
130
-  font-size: 16px;
128
+  width: 19.875rem;
129
+  height: 5.75rem;
130
+  font-size: 1rem;
131 131
   color: rgba(155, 155, 155, 1);
132
-  line-height: 24px;
133
-  margin-top: 18px;
134
-  padding-left: 6px;
132
+  line-height: 1.5rem;
133
+  margin-top: 1.125rem;
134
+  padding-left: 0.375rem;
135 135
   box-sizing: border-box;
136 136
 }
137 137
 .apply {
138 138
   width: 100%;
139
-  height: 42px;
139
+  height: 2.625rem;
140 140
   position: fixed;
141 141
   left: 0;
142 142
   bottom: 0;
143 143
   text-align: center;
144
-  line-height: 42px;
144
+  line-height: 2.625rem;
145 145
   color: rgba(255, 255, 255, 1);
146
-  font-size: 18px;
146
+  font-size: 1.125rem;
147 147
   background: linear-gradient(
148 148
     90deg,
149 149
     rgba(114, 182, 253, 1),

+ 23 - 20
src/scrm_pages/apply/apply.vue View File

@@ -1,11 +1,11 @@
1 1
 <template>
2 2
   <div>
3 3
     <div class="tel">
4
-      <el-input v-model="phone" placeholder="手机号码"></el-input>
4
+      <el-input v-model="phone" placeholder="手机号码" class="myinput"></el-input>
5 5
     </div>
6 6
     <div class="codeBox">
7 7
       <div class="verificationCode">
8
-        <el-input v-model="verificationCode" placeholder="手机号码"></el-input>
8
+        <el-input v-model="verificationCode" placeholder="手机号码" class="myinput"></el-input>
9 9
       </div>
10 10
       <div class="gain">获取验证码</div>
11 11
     </div>
@@ -26,29 +26,32 @@ export default {
26 26
 </script>
27 27
 
28 28
 
29
-<style lang="scss" scoped>
29
+<style lang="scss">
30
+.myinput .el-input__inner {
31
+  height: 2.25rem;
32
+}
30 33
 .tel {
31
-  margin: 34px 21px 17px 21px;
32
-  height: 40px;
34
+  margin: 2.125rem 1.3125rem 1.0625rem 1.3125rem;
35
+  height: 2.5rem;
33 36
 }
34 37
 .codeBox {
35
-  height: 36px;
36
-  margin-left: 21px;
37
-  margin-bottom: 17px;
38
+  height: 2.25rem;
39
+  margin-left: 1.3125rem;
40
+  margin-bottom: 1.0625rem;
38 41
   .verificationCode {
39 42
     float: left;
40
-    width: 208px;
41
-    height: 40px;
42
-    margin-right: 12px;
43
+    width: 13rem;
44
+    height: 2.5rem;
45
+    margin-right: 0.75rem;
43 46
   }
44 47
   .gain {
45 48
     float: left;
46 49
     text-align: center;
47 50
     color: rgba(255, 255, 255, 1);
48
-    font-size: 15px;
49
-    line-height: 36px;
50
-    width: 114px;
51
-    height: 36px;
51
+    font-size: 0.9375rem;
52
+    line-height: 2.25rem;
53
+    width: 7.125rem;
54
+    height: 2.25rem;
52 55
     background: linear-gradient(
53 56
       90deg,
54 57
       rgba(114, 182, 253, 1),
@@ -59,8 +62,8 @@ export default {
59 62
   }
60 63
 }
61 64
 .submit {
62
-  width: 334px;
63
-  height: 40px;
65
+  width: 20.875rem;
66
+  height: 2.5rem;
64 67
   background: linear-gradient(
65 68
     90deg,
66 69
     rgba(114, 182, 253, 1),
@@ -69,9 +72,9 @@ export default {
69 72
   box-shadow: 0px 4px 12px 0px rgba(60, 127, 254, 0.2);
70 73
   border-radius: 4px;
71 74
   color: rgba(255, 255, 255, 1);
72
-  font-size: 18px;
75
+  font-size: 1.125rem;
73 76
   text-align: center;
74
-  line-height: 40px;
75
-  margin-left: 21px;
77
+  line-height: 2.5rem;
78
+  margin-left: 1.3125rem;
76 79
 }
77 80
 </style>

+ 35 - 35
src/scrm_pages/doctorIntroduction/doctorIntroduction.vue View File

@@ -38,73 +38,73 @@
38 38
 <style lang="scss" scoped>
39 39
 .contentOne {
40 40
   margin: auto;
41
-  margin-top: 18px;
42
-  width: 334px;
43
-  height: 119px;
41
+  margin-top: 1.125rem;
42
+  width: 20.875rem;
43
+  height: 7.4375rem;
44 44
   background: rgba(255, 255, 255, 1);
45 45
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
46 46
   border-radius: 16px;
47
-  padding-left: 16px;
48
-  padding-top: 18px;
47
+  padding-left: 1rem;
48
+  padding-top: 1.125rem;
49 49
   box-sizing: border-box;
50 50
   .img {
51 51
     float: left;
52
-    width: 80px;
53
-    height: 80px;
52
+    width: 5rem;
53
+    height: 5rem;
54 54
     border-radius: 12px;
55 55
   }
56 56
   .detail {
57 57
     float: left;
58
-    margin-left: 13px;
59
-    width: 210px;
58
+    margin-left: 0.8125rem;
59
+    width: 13.125rem;
60 60
     .detailTitle {
61
-      margin-top: 8px;
62
-      width: 203px;
63
-      height: 17px;
64
-      font-size: 15px;
61
+      margin-top: 0.5rem;
62
+      width: 12.6875rem;
63
+      height: 1.0625rem;
64
+      font-size: 0.9375rem;
65 65
       font-weight: 600;
66 66
       color: rgba(7, 18, 40, 1);
67 67
       span {
68
-        font-size: 14px;
68
+        font-size: 0.875rem;
69 69
         color: rgba(155, 155, 155, 1);
70
-        line-height: 18px;
71
-        margin-left: 20px;
70
+        line-height: 1.125rem;
71
+        margin-left: 1.25rem;
72 72
         font-weight: 400;
73 73
       }
74 74
     }
75 75
     .detailMessage {
76
-      font-size: 14px;
76
+      font-size: 0.875rem;
77 77
       color: rgba(155, 155, 155, 1);
78
-      line-height: 24px;
78
+      line-height: 1.5rem;
79 79
       font-weight: 400;
80
-      margin-top: 14px;
80
+      margin-top: 0.875rem;
81 81
     }
82 82
   }
83 83
 }
84 84
 .good {
85
-  margin-left: 20px;
86
-  margin-top: 35px;
85
+  margin-left: 1.25rem;
86
+  margin-top: 2.1875rem;
87 87
 }
88 88
 .common_title {
89
-  width: 335px;
90
-  height: 18px;
91
-  line-height: 18px;
89
+  width: 20.9375rem;
90
+  height: 1.125rem;
91
+  line-height: 1.125rem;
92 92
 }
93 93
 .dynamicTxt {
94 94
   float: left;
95
-  width: 72px;
96
-  height: 18px;
97
-  line-height: 18px;
98
-  font-size: 18px;
95
+  width: 4.5rem;
96
+  height: 1.125rem;
97
+  line-height: 1.125rem;
98
+  font-size: 1.125rem;
99 99
   font-weight: 600;
100 100
   color: rgba(7, 18, 40, 1);
101 101
 }
102 102
 .one {
103
-  margin-top: 2px;
104
-  margin-right: 6px;
103
+  margin-top: 0.125rem;
104
+  margin-right: 0.375rem;
105 105
   float: left;
106
-  width: 2px;
107
-  height: 14px;
106
+  width: 0.125rem;
107
+  height: 0.875rem;
108 108
   background: linear-gradient(
109 109
     0deg,
110 110
     rgba(114, 182, 253, 1),
@@ -114,10 +114,10 @@
114 114
   border-radius: 3px;
115 115
 }
116 116
 .goodtxt {
117
-  margin: 16px 0 36px 14px;
118
-  font-size: 16px;
117
+  margin: 1rem 0 2.25rem 0.875rem;
118
+  font-size: 1rem;
119 119
   font-weight: 400;
120 120
   color: rgba(68, 75, 92, 1);
121
-  line-height: 24px;
121
+  line-height: 1.5rem;
122 122
 }
123 123
 </style>

+ 7 - 7
src/scrm_pages/hospitalIntroduction/hospitalIntroduction.vue View File

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

+ 31 - 30
src/scrm_pages/medicalTeam/medicalTeam.vue View File

@@ -70,25 +70,26 @@
70 70
 
71 71
 <style lang="scss" scoped>
72 72
 .header {
73
-  height: 20px;
74
-  width: 138px;
73
+  height: 1.25rem;
74
+  width: 9.375rem;
75 75
   text-align: center;
76
-  margin: 12px auto;
76
+  margin: 0.75rem auto;
77 77
   .headerTitle {
78 78
     float: left;
79
-    height: 20px;
80
-    line-height: 20px;
81
-    font-size: 18px;
79
+    height: 1.25rem;
80
+    line-height: 1.25rem;
81
+    font-size: 1.125rem;
82 82
     color: rgba(7, 18, 40, 1);
83 83
     font-weight: 600;
84 84
     margin: 0 auto;
85 85
     text-align: center;
86
+    padding: 0 0.25rem;
86 87
   }
87 88
   .line {
88 89
     float: left;
89
-    margin-top: 8px;
90
-    width: 15px;
91
-    height: 3px;
90
+    margin-top: 0.5rem;
91
+    width: 0.9375rem;
92
+    height: 0.1875rem;
92 93
     background: linear-gradient(
93 94
       -45deg,
94 95
       rgba(50, 210, 139, 1),
@@ -97,50 +98,50 @@
97 98
   }
98 99
 }
99 100
 .msg {
100
-  width: 210px;
101
-  height: 15px;
102
-  font-size: 15px;
101
+  width: 13.125rem;
102
+  height: 0.9375rem;
103
+  font-size: 0.9375rem;
103 104
   font-weight: 100;
104 105
   color: rgba(7, 18, 40, 1);
105 106
   margin: 0 auto;
106 107
 }
107 108
 .contentOne {
108 109
   margin: auto;
109
-  margin-top: 18px;
110
-  width: 334px;
111
-  height: 119px;
110
+  margin-top: 1.125rem;
111
+  width: 20.875rem;
112
+  height: 7.4375rem;
112 113
   background: rgba(255, 255, 255, 1);
113 114
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
114 115
   border-radius: 16px;
115
-  padding-left: 16px;
116
-  padding-top: 18px;
116
+  padding-left: 1rem;
117
+  padding-top: 1.125rem;
117 118
   box-sizing: border-box;
118 119
   .img {
119 120
     float: left;
120
-    width: 80px;
121
-    height: 80px;
121
+    width: 5rem;
122
+    height: 5rem;
122 123
     border-radius: 12px;
123 124
   }
124 125
   .detail {
125 126
     float: left;
126
-    margin-left: 13px;
127
-    width: 210px;
127
+    margin-left: 0.8125rem;
128
+    width: 13.125rem;
128 129
     .detailTitle {
129
-      margin-top: 8px;
130
-      width: 203px;
131
-      height: 17px;
132
-      font-size: 15px;
130
+      margin-top: 0.5rem;
131
+      width: 12.6875rem;
132
+      height: 1.0625rem;
133
+      font-size: 0.9375rem;
133 134
       font-weight: 600;
134 135
       color: rgba(7, 18, 40, 1);
135 136
     }
136 137
     .detailMessage {
137
-      margin-top: 4px;
138
-      width: 212px;
139
-      height: 58px;
140
-      font-size: 13px;
138
+      margin-top: 0.25rem;
139
+      width: 13.25rem;
140
+      height: 3.625rem;
141
+      font-size: 0.8125rem;
141 142
       font-weight: 400;
142 143
       color: rgba(155, 155, 155, 1);
143
-      line-height: 18px;
144
+      line-height: 1.125rem;
144 145
     }
145 146
   }
146 147
 }

+ 79 - 76
src/scrm_pages/microHome/microHome.vue View File

@@ -271,6 +271,9 @@ export default {
271 271
   },
272 272
   mounted() {
273 273
     this.initSwiper();
274
+  },
275
+  updated() {
276
+    this.initSwiper();
274 277
   }
275 278
 };
276 279
 </script>
@@ -290,7 +293,7 @@ export default {
290 293
   }
291 294
 }
292 295
 .banner {
293
-  height: 151px;
296
+  height: 9.4375rem;
294 297
 }
295 298
 .swiper-container {
296 299
   height: 100%;
@@ -313,18 +316,18 @@ export default {
313 316
   flex-wrap: wrap;
314 317
   width: 100%;
315 318
   //   height: 180px;
316
-  margin-top: 20px;
319
+  margin-top: 1.25rem;
317 320
 }
318 321
 .btnOne {
319 322
   display: block;
320 323
   width: 25%;
321 324
   text-align: center;
322
-  height: 80px;
325
+  height: 5rem;
323 326
   img {
324
-    margin-bottom: 5px;
327
+    margin-bottom: 0.3125rem;
325 328
     text-align: center;
326
-    width: 45px;
327
-    height: 45px;
329
+    width: 2.8125rem;
330
+    height: 2.8125rem;
328 331
     background: linear-gradient(
329 332
       0deg,
330 333
       rgba(255, 201, 115, 1),
@@ -335,35 +338,35 @@ export default {
335 338
   }
336 339
   .title {
337 340
     width: 100%;
338
-    height: 18px;
339
-    line-height: 18px;
340
-    font-size: 14px;
341
+    height: 1.125rem;
342
+    line-height: 1.125rem;
343
+    font-size: 0.875rem;
341 344
     text-align: center;
342 345
   }
343 346
 }
344 347
 .dynamic {
345
-  margin-top: 49px;
348
+  margin-top: 3.0625rem;
346 349
 }
347 350
 .common_title {
348
-  width: 335px;
349
-  height: 18px;
351
+  width: 20.9375rem;
352
+  height: 1.125rem;
350 353
   margin: 0 auto;
351 354
 }
352 355
 .dynamicTxt {
353 356
   float: left;
354
-  width: 72px;
355
-  height: 18px;
356
-  line-height: 18px;
357
-  font-size: 18px;
357
+  width: 4.5rem;
358
+  height: 1.125rem;
359
+  line-height: 1.125rem;
360
+  font-size: 1.125rem;
358 361
   font-weight: 600;
359 362
   color: rgba(7, 18, 40, 1);
360 363
 }
361 364
 .one {
362
-  margin-top: 2px;
363
-  margin-right: 6px;
365
+  margin-top: 0.125rem;
366
+  margin-right: 0.375rem;
364 367
   float: left;
365
-  width: 2px;
366
-  height: 14px;
368
+  width: 0.125rem;
369
+  height: 0.875rem;
367 370
   background: linear-gradient(
368 371
     0deg,
369 372
     rgba(114, 182, 253, 1),
@@ -376,126 +379,126 @@ export default {
376 379
   float: right;
377 380
   p {
378 381
     color: #b6bac1;
379
-    height: 18px;
380
-    line-height: 18px;
382
+    height: 1.125rem;
383
+    line-height: 1.125rem;
381 384
   }
382 385
 }
383 386
 .contentOne {
384 387
   margin: auto;
385
-  margin-top: 18px;
386
-  width: 334px;
387
-  height: 119px;
388
+  margin-top: 1.125rem;
389
+  width: 20.875rem;
390
+  height: 7.4375rem;
388 391
   background: rgba(255, 255, 255, 1);
389 392
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
390
-  border-radius: 16px;
391
-  padding-left: 16px;
392
-  padding-top: 18px;
393
+  border-radius: 1rem;
394
+  padding-left: 1rem;
395
+  padding-top: 1.125rem;
393 396
   box-sizing: border-box;
394 397
   .img {
395 398
     float: left;
396
-    width: 80px;
397
-    height: 80px;
399
+    width: 5rem;
400
+    height: 5rem;
398 401
     border-radius: 12px;
399 402
   }
400 403
   .detail {
401 404
     float: left;
402
-    margin-left: 13px;
403
-    width: 210px;
405
+    margin-left: 0.8125rem;
406
+    width: 13.125rem;
404 407
     .detailTitle {
405
-      margin-top: 8px;
406
-      width: 203px;
407
-      height: 17px;
408
-      font-size: 15px;
408
+      margin-top: 0.5rem;
409
+      width: 12.6875rem;
410
+      height: 1.0625rem;
411
+      font-size: 0.9375rem;
409 412
       font-weight: 600;
410 413
       color: rgba(7, 18, 40, 1);
411 414
     }
412 415
     .detailMessage {
413
-      margin-top: 4px;
414
-      width: 212px;
415
-      height: 58px;
416
-      font-size: 13px;
416
+      margin-top: 0.25rem;
417
+      width: 13.25rem;
418
+      height: 3.625rem;
419
+      font-size: 0.75rem;
417 420
       font-weight: 400;
418 421
       color: rgba(155, 155, 155, 1);
419
-      line-height: 18px;
422
+      line-height: 1.125rem;
420 423
     }
421 424
   }
422 425
 }
423 426
 .common {
424
-  margin-top: 30px;
427
+  margin-top: 1.875rem;
425 428
   .commonBox {
426 429
     margin: auto;
427
-    margin-top: 20px;
428
-    width: 334px;
429
-    height: 325px;
430
+    margin-top: 1.25rem;
431
+    width: 20.875rem;
432
+    height: 20.3125rem;
430 433
     background: rgba(255, 255, 255, 1);
431 434
     box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
432 435
     border-radius: 16px;
433
-    padding: 18px 21px 21px 21px;
436
+    padding: 1.125rem 1.3125rem 1.3125rem 1.3125rem;
434 437
   }
435 438
   .commonImg {
436
-    width: 295px;
437
-    height: 169px;
439
+    width: 18.4375rem;
440
+    height: 10.5625rem;
438 441
     border-radius: 10px;
439 442
   }
440 443
   .commonMessage {
441
-    margin-top: 22px;
442
-    width: 284px;
443
-    height: 81px;
444
-    font-size: 14px;
444
+    margin-top: 1.375rem;
445
+    width: 17.75rem;
446
+    height: 5.0625rem;
447
+    font-size: 0.875rem;
445 448
     color: rgba(60, 60, 60, 1);
446
-    line-height: 22px;
449
+    line-height: 1.375rem;
447 450
   }
448 451
 }
449 452
 .imgs {
450
-  margin-top: 30px;
453
+  margin-top: 1.875rem;
451 454
   overflow-x: hidden;
452 455
   img {
453
-    width: 172px;
454
-    height: 125px;
456
+    width: 10.75rem;
457
+    height: 7.8125rem;
455 458
     border-radius: 10px;
456 459
   }
457 460
   .carousel {
458 461
     width: 100%;
459 462
     height: 100%;
460 463
     float: left;
461
-    padding-left: 20px;
464
+    padding-left: 1.25rem;
462 465
   }
463 466
 }
464 467
 .detailBox {
465
-  margin-top: 10px;
468
+  margin-top: 0.625rem;
466 469
   .activityTime {
467 470
     float: left;
468
-    width: 118px;
469
-    height: 35px;
470
-    font-size: 13px;
471
+    width: 7.375rem;
472
+    height: 2.1875rem;
473
+    font-size: 0.8125rem;
471 474
     color: rgba(155, 155, 155, 1);
472
-    line-height: 24px;
475
+    line-height: 1.5rem;
473 476
   }
474 477
   .people {
475
-    margin-top: 16px;
478
+    margin-top: 1rem;
476 479
     float: left;
477
-    width: 86px;
478
-    height: 30px;
480
+    width: 5.375rem;
481
+    height: 1.875rem;
479 482
     background: rgba(57, 124, 254, 0.1);
480 483
     border-radius: 30px;
481 484
     p {
482 485
       margin: auto;
483 486
       text-align: center;
484
-      width: 70px;
485
-      height: 12px;
486
-      font-size: 12px;
487
+      width: 4.375rem;
488
+      height: 0.75rem;
489
+      font-size: 0.75rem;
487 490
       color: rgba(57, 124, 254, 1);
488
-      line-height: 30px;
491
+      line-height: 1.875rem;
489 492
     }
490 493
   }
491 494
 }
492 495
 .bottom {
493
-  margin-bottom: 20px;
496
+  margin-bottom: 1.25rem;
494 497
 }
495 498
 .tabs {
496 499
   @include border-top;
497 500
   width: 100%;
498
-  height: 50px;
501
+  height: 3.125rem;
499 502
   box-sizing: border-box;
500 503
 }
501 504
 .tabList {
@@ -509,9 +512,9 @@ export default {
509 512
     align-items: center;
510 513
 
511 514
     img {
512
-      margin-top: 8px;
513
-      width: 20px;
514
-      height: 20px;
515
+      margin-top: 0.5rem;
516
+      width: 1.25rem;
517
+      height: 1.25rem;
515 518
       background: linear-gradient(
516 519
         0deg,
517 520
         rgba(114, 182, 253, 1),
@@ -519,9 +522,9 @@ export default {
519 522
       );
520 523
     }
521 524
     span {
522
-      font-size: 12px;
525
+      font-size: 0.75rem;
523 526
       color: rgba(182, 186, 193, 1);
524
-      line-height: 21px;
527
+      line-height: 1.3125rem;
525 528
     }
526 529
   }
527 530
 }

+ 18 - 18
src/scrm_pages/news/news.vue View File

@@ -63,41 +63,41 @@
63 63
 <style lang="scss" scoped>
64 64
 .contentOne {
65 65
   margin: auto;
66
-  margin-top: 18px;
67
-  width: 334px;
68
-  height: 119px;
66
+  margin-top: 1.125rem;
67
+  width: 20.875rem;
68
+  height: 7.4375rem;
69 69
   background: rgba(255, 255, 255, 1);
70 70
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
71 71
   border-radius: 16px;
72
-  padding-left: 16px;
73
-  padding-top: 18px;
72
+  padding-left: 1rem;
73
+  padding-top: 1.125rem;
74 74
   box-sizing: border-box;
75 75
   .img {
76 76
     float: left;
77
-    width: 80px;
78
-    height: 80px;
77
+    width: 5rem;
78
+    height: 5rem;
79 79
     border-radius: 12px;
80 80
   }
81 81
   .detail {
82 82
     float: left;
83
-    margin-left: 13px;
84
-    width: 210px;
83
+    margin-left: 0.8125rem;
84
+    width: 13.125rem;
85 85
     .detailTitle {
86
-      margin-top: 8px;
87
-      width: 203px;
88
-      height: 17px;
89
-      font-size: 15px;
86
+      margin-top: 0.5rem;
87
+      width: 12.6875rem;
88
+      height: 1.0625rem;
89
+      font-size: 0.9375rem;
90 90
       font-weight: 600;
91 91
       color: rgba(7, 18, 40, 1);
92 92
     }
93 93
     .detailMessage {
94
-      margin-top: 4px;
95
-      width: 212px;
96
-      height: 58px;
97
-      font-size: 13px;
94
+      margin-top: 0.25rem;
95
+      width: 13.25rem;
96
+      height: 3.625rem;
97
+      font-size: 0.8125rem;
98 98
       font-weight: 400;
99 99
       color: rgba(155, 155, 155, 1);
100
-      line-height: 18px;
100
+      line-height: 1.125rem;
101 101
     }
102 102
   }
103 103
 }