Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
bc6f2782 by simon
Options

登陆页面样式1200

1 parent 7d6affad
Expand all
Inline Side-by-side
Showing 31 changed files with 241 additions and 291 deletions
...@@ -6,6 +6,7 @@ node_modules ...@@ -6,6 +6,7 @@ node_modules
6 .DS_Store 6 .DS_Store
7 sync.sh 7 sync.sh
8 git.sh 8 git.sh
9 /sandbox
9 10
10 # local env files 11 # local env files
11 .env.local 12 .env.local
......
...@@ -59,7 +59,8 @@ html { ...@@ -59,7 +59,8 @@ html {
59 word-spacing: 1px; 59 word-spacing: 1px;
60 word-break: break-word; 60 word-break: break-word;
61 text-rendering: optimizeLegibility; 61 text-rendering: optimizeLegibility;
62 color: #333; 62 // color: #333;
63 color: $cFontGray;
63 background-color: #ffffff; 64 background-color: #ffffff;
64 // -ms-text-size-adjust: 100%; 65 // -ms-text-size-adjust: 100%;
65 // -webkit-text-size-adjust: 100%; 66 // -webkit-text-size-adjust: 100%;
......

8.38 KB | W: | H:

13.7 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

192 KB | W: | H:

6.31 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

9.69 KB | W: | H:

4.34 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

4.97 KB | W: | H:

6.52 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -609,7 +609,7 @@ module.exports = { ...@@ -609,7 +609,7 @@ module.exports = {
609 m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）" 609 m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）"
610 }, 610 },
611 qrcode: { 611 qrcode: {
612 title: "官方公眾號" 612 title: "社交媒體"
613 } 613 }
614 }, 614 },
615 customService: { 615 customService: {
......
...@@ -103,8 +103,8 @@ module.exports = { ...@@ -103,8 +103,8 @@ module.exports = {
103 ] 103 ]
104 }, 104 },
105 footer: { 105 footer: {
106 hkPhone: "客戶服務熱線（香港）", 106 hkPhone: "香港号码",
107 cnPhone: "客戶服務熱線（內地）", 107 cnPhone: "内地号码",
108 aboutUs: "關於我們", 108 aboutUs: "關於我們",
109 companyIntroduction: "公司介紹", 109 companyIntroduction: "公司介紹",
110 news: "新聞資訊", 110 news: "新聞資訊",
...@@ -607,7 +607,7 @@ module.exports = { ...@@ -607,7 +607,7 @@ module.exports = {
607 m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）" 607 m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）"
608 }, 608 },
609 qrcode: { 609 qrcode: {
610 title: "官方公眾號" 610 title: "社交媒體"
611 } 611 }
612 }, 612 },
613 customService: { 613 customService: {
......
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
2 2
3 .drop-list { 3 .drop-list {
4 display: inline-block; 4 display: inline-block;
5 min-width: 6.25rem; 5 min-width: 8rem;
6 position: relative; 6 position: relative;
7 margin: 0 1rem; 7 margin: 0 1rem;
8 font-size: $fontSize;
8 9
9 .list { 10 .list {
10 position: absolute; 11 position: absolute;
...@@ -42,7 +43,7 @@ ...@@ -42,7 +43,7 @@
42 } 43 }
43 44
44 li:hover { 45 li:hover {
45 color: #ec6429; 46 color: $cOrange;
46 } 47 }
47 } 48 }
48 } 49 }
...@@ -50,8 +51,8 @@ ...@@ -50,8 +51,8 @@
50 .user { 51 .user {
51 width: 7.333333rem; 52 width: 7.333333rem;
52 height: 2.25rem; 53 height: 2.25rem;
53 background-color: #f05a23; 54 background-color: $cOrange;
54 border-radius: 1.333333rem; 55 border-radius: 2.25rem;
55 display: flex; 56 display: flex;
56 align-items: center; 57 align-items: center;
57 justify-content: center; 58 justify-content: center;
......
...@@ -4,17 +4,16 @@ ...@@ -4,17 +4,16 @@
4 font-family: MicrosoftYaHei; 4 font-family: MicrosoftYaHei;
5 color: #ffffff; 5 color: #ffffff;
6 background-color: #2e2b2a; 6 background-color: #2e2b2a;
7 font-size: $fontSizeSmall; 7 font-size: $fontSize;
8 8
9 .footer-containter { 9 .footer-containter {
10 margin: 0 auto; 10 margin: 0 auto;
11 // max-width: 1200px; 11 width: 1200px;
12 12
13 .cont { 13 .cont {
14 margin-left: 3.166667rem;
15 14
16 .logo-wrap { 15 .logo-wrap {
17 padding: 1.75rem 0; 16 padding: 2.166667rem 0;
18 17
19 .logo-img { 18 .logo-img {
20 cursor: pointer; 19 cursor: pointer;
...@@ -30,12 +29,12 @@ ...@@ -30,12 +29,12 @@
30 29
31 // 信息 30 // 信息
32 .info { 31 .info {
33 padding: 1.25rem 0 1.5rem; 32 padding: 2rem 0 2rem;
34 display: flex; 33 display: flex;
35 34
36 // 热线 35 // 热线
37 .hotline { 36 .hotline {
38 min-width: 280px; 37 min-width: 24.5rem;
39 38
40 .contact { 39 .contact {
41 .n-item { 40 .n-item {
...@@ -43,7 +42,7 @@ ...@@ -43,7 +42,7 @@
43 } 42 }
44 43
45 .phone { 44 .phone {
46 color: #ea5a26; 45 color: $cOrange;
47 font-size: $fontSizeTitle; 46 font-size: $fontSizeTitle;
48 font-weight: bold; 47 font-weight: bold;
49 } 48 }
...@@ -57,38 +56,36 @@ ...@@ -57,38 +56,36 @@
57 56
58 // 导航 57 // 导航
59 .nav { 58 .nav {
60 flex: 1; 59 // flex: 1;
61 display: flex; 60 display: flex;
62 61
63 .nav-v { 62 .nav-v {
64 // margin: 0 5.2rem;
65 } 63 }
66 64
67 .n-item { 65 .n-item {
68 cursor: pointer; 66 cursor: pointer;
69 min-width: 14rem; 67 min-width: 14.75rem;
70 } 68 }
71 } 69 }
72 70
73 .public { 71 .public {
74 width: 6.25rem; 72 text-align: left;
75 text-align: center; 73 margin-left: 5.32rem;
76 margin-right: 3rem;
77 74
78 .qrcode { 75 .qrcode {
79 margin-top: .75rem; 76 margin-top: .75rem;
77 margin-right: 1rem;
78 display: inline-block;
80 } 79 }
81
82 } 80 }
83 81
84 // 公共组件 82 // 公共组件
85 .n-item { 83 .n-item {
86 margin-bottom: 1.416667rem; 84 margin-bottom: 2rem;
87 color: rgba(179, 177, 168, 0.5); 85 color: #dcdddd;
88 86
89 &:first-child { 87 &:first-child {
90 color: #ffffff; 88 margin-bottom: 2.666667rem;
91 margin-bottom: 2rem;
92 } 89 }
93 90
94 &:last-child { 91 &:last-child {
...@@ -102,6 +99,7 @@ ...@@ -102,6 +99,7 @@
102 color: rgba(179, 177, 168, 0.5); 99 color: rgba(179, 177, 168, 0.5);
103 padding: 1.5rem 0; 100 padding: 1.5rem 0;
104 line-height: 1.58; 101 line-height: 1.58;
102 font-size: $fontSizeSmall;
105 } 103 }
106 } 104 }
107 105
...@@ -125,7 +123,7 @@ ...@@ -125,7 +123,7 @@
125 width: 100%; 123 width: 100%;
126 } 124 }
127 125
128 .n-item{ 126 .n-item {
129 min-width: 0; 127 min-width: 0;
130 } 128 }
131 } 129 }
......
1 1
2 <template> 2 <template>
3 <footer class="v-footer "> 3 <footer class="v-footer ">
4 <div class="content footer-containter "> 4 <div class="footer-containter ">
5 <div class="cont"> 5 <div class="cont">
6 <div class="logo-wrap"> 6 <div class="logo-wrap">
7 <img class="logo-img" src="@/assets/images/home/footer-logo.png" alt="中国平安人寿保险"> 7 <img class="logo-img" src="@/assets/images/home/footer-logo.png" alt="中国平安人寿保险">
...@@ -41,7 +41,10 @@ ...@@ -41,7 +41,10 @@
41 </div> 41 </div>
42 <div class="public"> 42 <div class="public">
43 <div class="tit">{{$t('footer.qrcode')}}</div> 43 <div class="tit">{{$t('footer.qrcode')}}</div>
44 <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> 44 <!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> -->
45 <img class="qrcode" src="@/assets/images/home/footer-icon-1.png" alt="">
46 <img class="qrcode" src="@/assets/images/home/footer-icon-2.png" alt="">
47 <img class="qrcode" src="@/assets/images/home/footer-icon-3.png" alt="">
45 </div> 48 </div>
46 49
47 </div> 50 </div>
......
1 @import '@/styles/_support';
2
1 .v-header { 3 .v-header {
2 // font-family: SourceHanSansCN; 4 height: 7.666667rem;
3 height: 5.833333rem;
4 background-color: #fff; 5 background-color: #fff;
5 color: #4c4948; 6 color: $cFontGray;
6 position: relative; 7 position: relative;
7 z-index: 11; 8 z-index: 11;
9 font-size: $fontSize;
8 10
9 .header-container { 11 .header-container {
10 max-width: 950px; 12 max-width: 1200px;
11 // max-width: 1024px;
12 height: 100%; 13 height: 100%;
13 margin: auto; 14 margin: auto;
14 display: flex; 15 display: flex;
...@@ -39,8 +40,6 @@ ...@@ -39,8 +40,6 @@
39 align-items: center; 40 align-items: center;
40 height: 100%; 41 height: 100%;
41 margin: 0; 42 margin: 0;
42 font-size: 1rem;
43 // padding: 0 4.166667rem;
44 -ms-flex-pack: center; 43 -ms-flex-pack: center;
45 justify-content: center; 44 justify-content: center;
46 position: relative; 45 position: relative;
...@@ -68,7 +67,7 @@ ...@@ -68,7 +67,7 @@
68 .user { 67 .user {
69 width: 7.333333rem; 68 width: 7.333333rem;
70 height: 2.25rem; 69 height: 2.25rem;
71 background-color: #f05a23; 70 background-color: $cOrange;
72 border-radius: 1.333333rem; 71 border-radius: 1.333333rem;
73 display: flex; 72 display: flex;
74 align-items: center; 73 align-items: center;
...@@ -81,7 +80,7 @@ ...@@ -81,7 +80,7 @@
81 } 80 }
82 81
83 .lang { 82 .lang {
84 color: #f05a23; 83 color: $cOrange;
85 84
86 } 85 }
87 } 86 }
......
...@@ -19,8 +19,10 @@ ...@@ -19,8 +19,10 @@
19 .modal { 19 .modal {
20 position: relative; 20 position: relative;
21 @extend .bb; 21 @extend .bb;
22 width: 36rem; 22 width: 46.25rem;
23 min-height: 22.5rem; 23 height: 28.5rem;
24 // width: 36rem;
25 // min-height: 22.5rem;
24 border-radius: 1.25rem; 26 border-radius: 1.25rem;
25 background-color: #ffffff; 27 background-color: #ffffff;
26 padding: 4.5rem 2rem 2.5rem; 28 padding: 4.5rem 2rem 2.5rem;
...@@ -28,17 +30,19 @@ ...@@ -28,17 +30,19 @@
28 &-title { 30 &-title {
29 margin-bottom: 3rem; 31 margin-bottom: 3rem;
30 color: $cOrange; 32 color: $cOrange;
31 font-size: 24px; 33 font-size: $fontSizeTitle;
32 font-weight: bold; 34 font-weight: bold;
33 } 35 }
34 36
35 &-icon-wrap { 37 &-icon-wrap {
36 @extend .fcc; 38 @extend .fcc;
39 height: 12rem;
37 } 40 }
38 41
39 &-content { 42 &-content {
43 margin-top: 1rem;
40 color: $cOrange; 44 color: $cOrange;
41 font-size: 18px; 45 font-size: $fontSizeTitle;
42 font-weight: bold; 46 font-weight: bold;
43 } 47 }
44 48
...@@ -48,7 +52,7 @@ ...@@ -48,7 +52,7 @@
48 52
49 .btn { 53 .btn {
50 @include btc2(12rem, 3.6rem, 16px); 54 @include btc2(12rem, 3.6rem, 16px);
51 margin: 2rem 1rem 0; 55 margin: 3rem 1rem 0;
52 @extend .pointer; 56 @extend .pointer;
53 } 57 }
54 } 58 }
......
...@@ -2,11 +2,14 @@ ...@@ -2,11 +2,14 @@
2 2
3 .content { 3 .content {
4 position: relative; 4 position: relative;
5 padding-bottom: 2.25rem; 5 min-height: 50rem;
6 padding-bottom: $marginMedium;
7 color: $cFontGray;
8 font-size: $fontSize;
6 } 9 }
7 10
8 .top-space { 11 .top-space {
9 height: 2.25rem; 12 height: $marginMedium;
10 } 13 }
11 14
12 .box { 15 .box {
...@@ -16,12 +19,9 @@ ...@@ -16,12 +19,9 @@
16 .ebg { 19 .ebg {
17 position: absolute; 20 position: absolute;
18 bottom: 0; 21 bottom: 0;
19 left: 0; 22 left: 50%;
20 right: 0; 23 margin-left: -960px;
21 24 width: 1920px;
22 img {
23 max-width: 100%;
24 }
25 } 25 }
26 26
27 .step { 27 .step {
...@@ -30,16 +30,14 @@ ...@@ -30,16 +30,14 @@
30 } 30 }
31 31
32 .login { 32 .login {
33 color: #4c4948; 33 color: $cFontGray;
34 @extend .bb; 34 @extend .bb;
35 padding: 1.416667rem 6rem 2.25rem; 35 padding: 2.75rem 6.25rem 3.75rem;
36 border-bottom: solid .666667rem #006441; 36 border-bottom: solid 0.9rem $cGreen;
37 37
38 margin: auto; 38 margin: auto;
39 max-width: 40.25rem; 39 max-width: 51rem;
40 // height: 49.25rem; 40 border-radius: $borderRadius;
41
42 border-radius: .75rem;
43 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 41 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
44 background-color: #ffffff; 42 background-color: #ffffff;
45 43
...@@ -106,14 +104,8 @@ ...@@ -106,14 +104,8 @@
106 } 104 }
107 105
108 &-submit { 106 &-submit {
109 @include btc2(13.2rem, 4rem, 16px); 107 @include btc2(17.25rem, 5.25rem, 16px);
110 // margin: 2rem 1rem 0;
111 letter-spacing: 1.6px; 108 letter-spacing: 1.6px;
112 // position: absolute;
113 // left: 0;
114 // right: 0;
115 // margin: 0 auto;
116 // bottom: 2.25rem;
117 } 109 }
118 110
119 &-func { 111 &-func {
...@@ -166,6 +158,7 @@ ...@@ -166,6 +158,7 @@
166 } 158 }
167 159
168 .ipt-wrap { 160 .ipt-wrap {
161 position: relative;
169 display: flex; 162 display: flex;
170 justify-content: space-between; 163 justify-content: space-between;
171 164
...@@ -173,12 +166,13 @@ ...@@ -173,12 +166,13 @@
173 .ipt { 166 .ipt {
174 @extend .bb; 167 @extend .bb;
175 width: 100%; 168 width: 100%;
176 height: 3.5rem; 169 height: 4.5rem;
170 border-radius: 4.5rem;
177 border: solid 1px #dcdddd; 171 border: solid 1px #dcdddd;
178 background-color: #ffffff; 172 background-color: #ffffff;
179 border-radius: 3.5rem; 173 padding: 0 2rem;
180 padding: 0 1.75rem;
181 flex: 1; 174 flex: 1;
175 letter-spacing: .1rem;
182 } 176 }
183 177
184 // 长文本 178 // 长文本
...@@ -189,13 +183,8 @@ ...@@ -189,13 +183,8 @@
189 183
190 .down-arrow { 184 .down-arrow {
191 position: absolute; 185 position: absolute;
192 top: 1.6rem; 186 top: 2.2rem;
193 right: 2rem; 187 right: 2rem;
194 background-image: url('~@/assets/images/reservation/re-down-arrow.png');
195 width: 1rem;
196 height: .666667rem;
197 pointer-events: none;
198 cursor: default;
199 } 188 }
200 189
201 190
...@@ -208,29 +197,23 @@ ...@@ -208,29 +197,23 @@
208 background-color: #f2f2f2; 197 background-color: #f2f2f2;
209 flex: none; 198 flex: none;
210 margin-left: 1.5rem; 199 margin-left: 1.5rem;
211 color: #4c4948; 200 color: $cFontGray;
212 } 201 }
213 202
203
214 // 框内按钮 204 // 框内按钮
215 .ipt2 { 205 .ipt2 {
216 display: flex; 206 display: flex;
217 justify-content: space-between; 207 justify-content: space-between;
218 align-items: center; 208 align-items: center;
219 209
220 .ipt-tel {
221 flex: 1;
222 padding-left: 1.75rem;
223 }
224
225 .ipt-code { 210 .ipt-code {
226 flex: 1; 211 flex: 1;
227 padding-right: 1.75rem; 212 padding-right: 1.75rem;
228 } 213 }
229 214
230 .region-tel {}
231
232 .veri-btn { 215 .veri-btn {
233 color: #f05a23; 216 color: $cOrange;
234 text-decoration: underline; 217 text-decoration: underline;
235 } 218 }
236 219
...@@ -238,7 +221,6 @@ ...@@ -238,7 +221,6 @@
238 color: #aaaaaa; 221 color: #aaaaaa;
239 } 222 }
240 } 223 }
241
242 } 224 }
243 225
244 .validator { 226 .validator {
......
1 1
2 2
3 <template> 3 <template>
4 <div class="content"> 4 <div class="content">
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 </div> 31 </div>
32 <div class="ipt-wrap"> 32 <div class="ipt-wrap">
33 <div class="down-arrow"></div> 33 <div class="down-arrow"></div>
34 <select class="ipt" :class="{err : errorTips.e2.length > 0}" v-model="information.sex"> 34 <select class="ipt" :class="{err : errorTips.e2.length > 0}" v-model="information.sex">
35 <template v-if="sexCandidates"> 35 <template v-if="sexCandidates">
36 <option v-for="(item,index) in sexCandidates" :key="index" :value="item.value">{{item.name}}</option> 36 <option v-for="(item,index) in sexCandidates" :key="index" :value="item.value">{{item.name}}</option>
37 </template> 37 </template>
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
50 <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> 50 <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate">
51 </div> 51 </div>
52 <div class="validator" v-if="errorTips.e3.length > 0 "> 52 <div class="validator" v-if="errorTips.e3.length > 0 ">
53 <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}} 53 <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}}
54 </div> 54 </div>
55 </div> 55 </div>
56 56
...@@ -60,14 +60,14 @@ ...@@ -60,14 +60,14 @@
60 </div> 60 </div>
61 <div class="ipt-wrap"> 61 <div class="ipt-wrap">
62 <div class="down-arrow"></div> 62 <div class="down-arrow"></div>
63 <select class="ipt" :class="{err : errorTips.e4.length > 0}" v-model="information.idType"> 63 <select class="ipt" :class="{err : errorTips.e4.length > 0}" v-model="information.idType">
64 <template v-if="idTypeCandidates"> 64 <template v-if="idTypeCandidates">
65 <option v-for="(item,index) in idTypeCandidates" :key="index" :value="item.value">{{item.name}}</option> 65 <option v-for="(item,index) in idTypeCandidates" :key="index" :value="item.value">{{item.name}}</option>
66 </template> 66 </template>
67 </select> 67 </select>
68 </div> 68 </div>
69 <div class="validator" v-if="errorTips.e4.length > 0 "> 69 <div class="validator" v-if="errorTips.e4.length > 0 ">
70 <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e4}} 70 <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e4}}
71 </div> 71 </div>
72 </div> 72 </div>
73 73
...@@ -76,10 +76,10 @@ ...@@ -76,10 +76,10 @@
76 <img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t5')}} 76 <img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t5')}}
77 </div> 77 </div>
78 <div class="ipt-wrap"> 78 <div class="ipt-wrap">
79 <input class="ipt" type="text" :class="{err : errorTips.e5.length > 0}" v-model="information.idNo"> 79 <input class="ipt" type="text" :class="{err : errorTips.e5.length > 0}" v-model="information.idNo">
80 </div> 80 </div>
81 <div class="validator" v-if="errorTips.e5.length > 0 "> 81 <div class="validator" v-if="errorTips.e5.length > 0 ">
82 <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e5}} 82 <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e5}}
83 </div> 83 </div>
84 </div> 84 </div>
85 85
......
...@@ -3,11 +3,13 @@ ...@@ -3,11 +3,13 @@
3 .content { 3 .content {
4 position: relative; 4 position: relative;
5 min-height: 50rem; 5 min-height: 50rem;
6 padding-bottom: 2.25rem; 6 padding-bottom: $marginMedium;
7 color: $cFontGray;
8 font-size: $fontSize;
7 } 9 }
8 10
9 .top-space { 11 .top-space {
10 height: 2.25rem; 12 height: $marginMedium;
11 } 13 }
12 14
13 .box { 15 .box {
...@@ -17,38 +19,34 @@ ...@@ -17,38 +19,34 @@
17 .ebg { 19 .ebg {
18 position: absolute; 20 position: absolute;
19 bottom: 0; 21 bottom: 0;
20 left: 0; 22 left: 50%;
21 right: 0; 23 margin-left: -960px;
22 24 width: 1920px;
23 img {
24 max-width: 100%;
25 }
26 } 25 }
27 26
28 .login { 27 .login {
29 color: #4c4948; 28 color: $cFontGray;
30 @extend .bb; 29 @extend .bb;
31 padding: 2rem 5rem 3.5rem; 30 padding: 2.75rem 6.25rem 4.5rem;
32 border-bottom: solid .666667rem #006441; 31 border-bottom: solid 0.9rem $cGreen;
33 32
34 margin: auto; 33 margin: auto;
35 max-width: 40.25rem; 34 max-width: 51rem;
36 border-radius: .75rem; 35 border-radius: $borderRadius;
37 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 36 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
38 background-color: #ffffff; 37 background-color: #ffffff;
39 38
40 &-tit { 39 &-tit {
41 // font-family: MicrosoftYaHei; 40 color: $cOrange;
42 color: #f05a23;
43 text-align: center; 41 text-align: center;
44 font-size: 18px; 42 font-size: $fontSizeTitle;
45 font-weight: bold; 43 font-weight: bold;
46 letter-spacing: .2rem; 44 letter-spacing: .2rem;
47 display: flex; 45 display: flex;
48 justify-content: center; 46 justify-content: center;
49 47
50 img{ 48 img {
51 height: 1.416667rem; /* 17/12 */ 49 height: 1.75rem;
52 } 50 }
53 51
54 .img-en { 52 .img-en {
...@@ -57,35 +55,32 @@ ...@@ -57,35 +55,32 @@
57 } 55 }
58 56
59 &-nav { 57 &-nav {
60 margin: 2.25rem 0 auto; 58 margin: 2.75rem auto 1rem;
61 display: flex; 59 display: flex;
62 justify-content: center; 60 justify-content: center;
63 align-items: center; 61 align-items: center;
64 62
65 &-v-line { 63 &-v-line {
66 width: .2rem; 64 width: 2px;
67 height: 1.25rem; 65 height: 1.2rem;
68 background-color: #4c4948; 66 background-color: $cFontGray;
69 margin: 0 2.25rem; 67 margin: 0 2.25rem;
70 } 68 }
71 69
72 &-tit { 70 &-tit {
73 // font-family: MicrosoftYaHei;
74 flex: 1; 71 flex: 1;
75 font-size: 18px; 72 font-size: $fontSizeTitle;
76 font-weight: bold; 73 font-weight: bold;
77 color: #4c4948;
78 // text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27);
79 } 74 }
80 75
81 .active { 76 .active {
82 color: #f05a23; 77 color: $cOrange;
83 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); 78 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
84 } 79 }
85 } 80 }
86 81
87 &-protocol { 82 &-protocol {
88 margin: 2.5rem auto 0; 83 margin: 3rem auto 0;
89 display: flex; 84 display: flex;
90 align-items: center; 85 align-items: center;
91 padding-left: 1rem; 86 padding-left: 1rem;
...@@ -96,23 +91,23 @@ ...@@ -96,23 +91,23 @@
96 } 91 }
97 92
98 .protocol { 93 .protocol {
99 color: #f05a23; 94 color: $cOrange;
100 } 95 }
101 } 96 }
102 97
103 &-submit { 98 &-submit {
104 @include btc2(13.5rem, 4rem, 16px); 99 @include btc2(17.25rem, 5.25rem, 16px);
105 margin: 3.25rem auto 0; 100 margin: 4rem auto 0;
106 letter-spacing: 1.6px; 101 letter-spacing: 1.6px;
107 } 102 }
108 103
109 &-func { 104 &-func {
110 margin: 1.5rem auto 0; 105 margin: 2rem auto 0;
111 display: flex; 106 display: flex;
112 justify-content: center; 107 justify-content: center;
113 108
114 &-btn { 109 &-btn {
115 margin: 0 1.25rem; 110 margin: 0 1.5rem;
116 text-decoration: underline; 111 text-decoration: underline;
117 } 112 }
118 } 113 }
...@@ -128,6 +123,7 @@ ...@@ -128,6 +123,7 @@
128 background-color: transparent !important; 123 background-color: transparent !important;
129 padding: 0 !important; 124 padding: 0 !important;
130 overflow: hidden; 125 overflow: hidden;
126
131 img { 127 img {
132 width: 100%; 128 width: 100%;
133 height: 100%; 129 height: 100%;
...@@ -136,14 +132,12 @@ ...@@ -136,14 +132,12 @@
136 132
137 &-item { 133 &-item {
138 position: relative; 134 position: relative;
139 // margin-top: 2.75rem; 135 margin-top: 3.25rem;
140 margin-top: 2.5rem;
141 136
142 .label { 137 .label {
143 // font-family: MicrosoftYaHei; 138 font-size: $fontSizeTitle;
144 font-size: 18px;
145 font-weight: bold; 139 font-weight: bold;
146 color: #f05a23; 140 color: $cOrange;
147 display: flex; 141 display: flex;
148 align-items: center; 142 align-items: center;
149 margin-bottom: 1.25rem; 143 margin-bottom: 1.25rem;
...@@ -163,14 +157,13 @@ ...@@ -163,14 +157,13 @@
163 .ipt { 157 .ipt {
164 @extend .bb; 158 @extend .bb;
165 width: 100%; 159 width: 100%;
166 height: 3.5rem; 160 height: 4.5rem;
161 border-radius: 4.5rem;
167 border: solid 1px #dcdddd; 162 border: solid 1px #dcdddd;
168 background-color: #ffffff; 163 background-color: #ffffff;
169 border-radius: 3.5rem; 164 padding: 0 2rem;
170 padding: 0 1.75rem;
171 flex: 1; 165 flex: 1;
172 font-size: 1.166667rem; /* 14/12 */ 166 letter-spacing: .1rem;
173 letter-spacing: .1rem;/* 1.2/12 */
174 } 167 }
175 168
176 // 长文本 169 // 长文本
...@@ -181,7 +174,7 @@ ...@@ -181,7 +174,7 @@
181 174
182 .down-arrow { 175 .down-arrow {
183 position: absolute; 176 position: absolute;
184 top: 1.6rem; 177 top: 2.2rem;
185 right: 2rem; 178 right: 2rem;
186 } 179 }
187 180
...@@ -195,7 +188,7 @@ ...@@ -195,7 +188,7 @@
195 background-color: #f2f2f2; 188 background-color: #f2f2f2;
196 flex: none; 189 flex: none;
197 margin-left: 1.5rem; 190 margin-left: 1.5rem;
198 color: #4c4948; 191 color: $cFontGray;
199 } 192 }
200 193
201 194
...@@ -211,7 +204,7 @@ ...@@ -211,7 +204,7 @@
211 } 204 }
212 205
213 .veri-btn { 206 .veri-btn {
214 color: #f05a23; 207 color: $cOrange;
215 text-decoration: underline; 208 text-decoration: underline;
216 } 209 }
217 210
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 </div> 16 </div>
17 <div class="login-nav"> 17 <div class="login-nav">
18 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div> 18 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div>
19 <div class="login-nav-v-line">|</div> 19 <div class="login-nav-v-line"></div>
20 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div> 20 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div>
21 </div> 21 </div>
22 <div class="gird-g form"> 22 <div class="gird-g form">
...@@ -54,10 +54,9 @@ ...@@ -54,10 +54,9 @@
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" > 57 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
58 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png"> 58 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
59 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> 59 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
60 {{$t('login.agree')}}
61 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> 60 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
62 </div> 61 </div>
63 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div> 62 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
...@@ -76,7 +75,7 @@ ...@@ -76,7 +75,7 @@
76 </div> 75 </div>
77 <div class="login-nav"> 76 <div class="login-nav">
78 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div> 77 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div>
79 <div class="login-nav-v-line">|</div> 78 <div class="login-nav-v-line"></div>
80 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div> 79 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div>
81 </div> 80 </div>
82 <div class="gird-g form"> 81 <div class="gird-g form">
...@@ -93,7 +92,7 @@ ...@@ -93,7 +92,7 @@
93 </div> 92 </div>
94 <div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode"> 93 <div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode">
95 <div class="ipt-wrap"> 94 <div class="ipt-wrap">
96 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue"> 95 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue">
97 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue"> 96 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
98 <img :src="values.imageBase64"> 97 <img :src="values.imageBase64">
99 </div> 98 </div>
...@@ -109,7 +108,7 @@ ...@@ -109,7 +108,7 @@
109 <div class="ipt-wrap"> 108 <div class="ipt-wrap">
110 <div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }"> 109 <div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }">
111 <input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp"> 110 <input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp">
112 <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP" >{{$t('register.verifyCodeGet')}}</div> 111 <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div>
113 <div v-else class="veri-btn-default">{{times.tip}}</div> 112 <div v-else class="veri-btn-default">{{times.tip}}</div>
114 </div> 113 </div>
115 </div> 114 </div>
...@@ -118,10 +117,9 @@ ...@@ -118,10 +117,9 @@
118 </div> 117 </div>
119 </div> 118 </div>
120 </div> 119 </div>
121 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" > 120 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
122 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png"> 121 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
123 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> 122 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
124 {{$t('login.agree')}}
125 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> 123 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
126 </div> 124 </div>
127 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div> 125 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
......
...@@ -3,10 +3,14 @@ ...@@ -3,10 +3,14 @@
3 .content { 3 .content {
4 position: relative; 4 position: relative;
5 padding-bottom: 2.25rem; 5 padding-bottom: 2.25rem;
6 position: relative;
7 padding-bottom: $paddingMedium;
8 color: $cFontGray;
9 font-size: $fontSize;
6 } 10 }
7 11
8 .top-space { 12 .top-space {
9 height: 2.25rem; 13 height: $marginMedium;
10 } 14 }
11 15
12 .box { 16 .box {
...@@ -16,12 +20,9 @@ ...@@ -16,12 +20,9 @@
16 .ebg { 20 .ebg {
17 position: absolute; 21 position: absolute;
18 bottom: 0; 22 bottom: 0;
19 left: 0; 23 left: 50%;
20 right: 0; 24 margin-left: -960px;
21 25 width: 1920px;
22 img {
23 max-width: 100%;
24 }
25 } 26 }
26 27
27 .step { 28 .step {
...@@ -30,23 +31,21 @@ ...@@ -30,23 +31,21 @@
30 } 31 }
31 32
32 .login { 33 .login {
33 color: #4c4948;
34 @extend .bb; 34 @extend .bb;
35 padding: 1.416667rem 5rem 0; 35 padding: 2rem 6.25rem 4.5rem;
36 border-bottom: solid .666667rem #006441; 36 border-bottom: solid 0.9rem $cGreen;
37 height: 38rem;
37 38
38 margin: auto; 39 margin: auto;
39 max-width: 40.25rem; 40 max-width: 51rem;
40 height: 31rem; 41 border-radius: $borderRadius;
41
42 border-radius: .75rem;
43 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 42 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
44 background-color: #ffffff; 43 background-color: #ffffff;
45 44
46 &-tit { 45 &-tit {
47 color: #f05a23; 46 color: $cOrange;
48 text-align: center; 47 text-align: center;
49 font-size: 18px; 48 font-size: $fontSizeTitle;
50 font-weight: bold; 49 font-weight: bold;
51 letter-spacing: .2rem; 50 letter-spacing: .2rem;
52 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); 51 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
...@@ -69,19 +68,19 @@ ...@@ -69,19 +68,19 @@
69 &-v-line { 68 &-v-line {
70 width: .2rem; 69 width: .2rem;
71 height: 1.25rem; 70 height: 1.25rem;
72 background-color: #4c4948; 71 background-color: $cFontGray;
73 margin: 0 2.25rem; 72 margin: 0 2.25rem;
74 } 73 }
75 74
76 &-tit { 75 &-tit {
77 flex: 1; 76 flex: 1;
78 font-size: 18px; 77 font-size: $fontSizeTitle;
79 font-weight: bold; 78 font-weight: bold;
80 color: #4c4948; 79 color: $cFontGray;
81 } 80 }
82 81
83 .active { 82 .active {
84 color: #f05a23; 83 color: $cOrange;
85 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); 84 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
86 } 85 }
87 } 86 }
...@@ -98,19 +97,19 @@ ...@@ -98,19 +97,19 @@
98 } 97 }
99 98
100 .protocol { 99 .protocol {
101 color: #f05a23; 100 color: $cOrange;
102 } 101 }
103 } 102 }
104 103
105 &-submit { 104 &-submit {
106 @include btc2(13.5rem, 4rem, 16px); 105 @include btc2(17.25rem, 5.25rem, 16px);
107 margin: 4.166667rem auto 0; 106 margin: 4.166667rem auto 0;
108 letter-spacing: 1.6px; 107 letter-spacing: 1.6px;
109 position: absolute; 108 position: absolute;
110 left: 0; 109 left: 0;
111 right: 0; 110 right: 0;
112 margin: 0 auto; 111 margin: 0 auto;
113 bottom: 2.25rem; 112 bottom: 3rem;
114 } 113 }
115 114
116 &-func { 115 &-func {
...@@ -148,12 +147,12 @@ ...@@ -148,12 +147,12 @@
148 147
149 &-item { 148 &-item {
150 position: relative; 149 position: relative;
151 margin-bottom: 2.25rem; 150 margin-bottom: 3rem;
152 151
153 .label { 152 .label {
154 font-size: 18px; 153 font-size: $fontSizeTitle;
155 font-weight: bold; 154 font-weight: bold;
156 color: #f05a23; 155 color: $cOrange;
157 display: flex; 156 display: flex;
158 align-items: center; 157 align-items: center;
159 margin-bottom: 1.25rem; 158 margin-bottom: 1.25rem;
...@@ -173,12 +172,13 @@ ...@@ -173,12 +172,13 @@
173 .ipt { 172 .ipt {
174 @extend .bb; 173 @extend .bb;
175 width: 100%; 174 width: 100%;
176 height: 3.5rem; 175 height: 4.5rem;
176 border-radius: 4.5rem;
177 border: solid 1px #dcdddd; 177 border: solid 1px #dcdddd;
178 background-color: #ffffff; 178 background-color: #ffffff;
179 border-radius: 3.5rem; 179 padding: 0 2rem;
180 padding: 0 1.75rem;
181 flex: 1; 180 flex: 1;
181 letter-spacing: .1rem;
182 } 182 }
183 183
184 // 长文本 184 // 长文本
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
189 189
190 .down-arrow { 190 .down-arrow {
191 position: absolute; 191 position: absolute;
192 top: 1.6rem; 192 top: 2.2rem;
193 right: 2rem; 193 right: 2rem;
194 } 194 }
195 195
...@@ -203,29 +203,23 @@ ...@@ -203,29 +203,23 @@
203 background-color: #f2f2f2; 203 background-color: #f2f2f2;
204 flex: none; 204 flex: none;
205 margin-left: 1.5rem; 205 margin-left: 1.5rem;
206 color: #4c4948; 206 color: $cFontGray;
207 } 207 }
208 208
209
209 // 框内按钮 210 // 框内按钮
210 .ipt2 { 211 .ipt2 {
211 display: flex; 212 display: flex;
212 justify-content: space-between; 213 justify-content: space-between;
213 align-items: center; 214 align-items: center;
214 215
215 .ipt-tel {
216 flex: 1;
217 padding-left: 1.75rem;
218 }
219
220 .ipt-code { 216 .ipt-code {
221 flex: 1; 217 flex: 1;
222 padding-right: 1.75rem; 218 padding-right: 1.75rem;
223 } 219 }
224 220
225 .region-tel {}
226
227 .veri-btn { 221 .veri-btn {
228 color: #f05a23; 222 color: $cOrange;
229 text-decoration: underline; 223 text-decoration: underline;
230 } 224 }
231 225
...@@ -233,7 +227,6 @@ ...@@ -233,7 +227,6 @@
233 color: #aaaaaa; 227 color: #aaaaaa;
234 } 228 }
235 } 229 }
236
237 } 230 }
238 231
239 .validator { 232 .validator {
...@@ -265,5 +258,5 @@ ...@@ -265,5 +258,5 @@
265 .disable { 258 .disable {
266 background-color: #dcdddd !important; 259 background-color: #dcdddd !important;
267 // color: $cFontGray; 260 // color: $cFontGray;
268 color: #4c4948; 261 color: $cFontGray;
269 } 262 }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <div class="content"> 3 <div class="content">
4 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 4 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
5 <div class="ebg"> 5 <div class="ebg">
6 <img src="@/assets/images/password-reset/password-reset-bg.png"> 6 <img src="@/assets/images/common/login-bg.png">
7 </div> 7 </div>
8 <div class="top-space"></div> 8 <div class="top-space"></div>
9 <div class="box"> 9 <div class="box">
......
...@@ -14,7 +14,7 @@ export default { ...@@ -14,7 +14,7 @@ export default {
14 data() { 14 data() {
15 return { 15 return {
16 key: 'value', 16 key: 'value',
17 type: 4, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码 17 type: 1, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码
18 values: { 18 values: {
19 cid: "", 19 cid: "",
20 oldPwd: "", 20 oldPwd: "",
......
...@@ -3,10 +3,14 @@ ...@@ -3,10 +3,14 @@
3 .content { 3 .content {
4 position: relative; 4 position: relative;
5 padding-bottom: 2.25rem; 5 padding-bottom: 2.25rem;
6 position: relative;
7 padding-bottom: $paddingMedium;
8 color: $cFontGray;
9 font-size: $fontSize;
6 } 10 }
7 11
8 .top-space { 12 .top-space {
9 height: 2.25rem; 13 height: $marginMedium;
10 } 14 }
11 15
12 .box { 16 .box {
...@@ -16,12 +20,9 @@ ...@@ -16,12 +20,9 @@
16 .ebg { 20 .ebg {
17 position: absolute; 21 position: absolute;
18 bottom: 0; 22 bottom: 0;
19 left: 0; 23 left: 50%;
20 right: 0; 24 margin-left: -960px;
21 25 width: 1920px;
22 img {
23 max-width: 100%;
24 }
25 } 26 }
26 27
27 .step { 28 .step {
...@@ -30,23 +31,21 @@ ...@@ -30,23 +31,21 @@
30 } 31 }
31 32
32 .login { 33 .login {
33 color: #4c4948;
34 @extend .bb; 34 @extend .bb;
35 padding: 1.416667rem 5rem 0; 35 padding: 2rem 6.25rem 4.5rem;
36 border-bottom: solid .666667rem #006441; 36 border-bottom: solid 0.9rem $cGreen;
37 height: 48rem;
37 38
38 margin: auto; 39 margin: auto;
39 max-width: 40.25rem; 40 max-width: 51rem;
40 height: 41rem; 41 border-radius: $borderRadius;
41
42 border-radius: .75rem;
43 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 42 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
44 background-color: #ffffff; 43 background-color: #ffffff;
45 44
46 &-tit { 45 &-tit {
47 color: #f05a23; 46 color: $cOrange;
48 text-align: center; 47 text-align: center;
49 font-size: 18px; 48 font-size: $fontSizeTitle;
50 font-weight: bold; 49 font-weight: bold;
51 letter-spacing: .2rem; 50 letter-spacing: .2rem;
52 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); 51 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
...@@ -69,19 +68,19 @@ ...@@ -69,19 +68,19 @@
69 &-v-line { 68 &-v-line {
70 width: .2rem; 69 width: .2rem;
71 height: 1.25rem; 70 height: 1.25rem;
72 background-color: #4c4948; 71 background-color: $cFontGray;
73 margin: 0 2.25rem; 72 margin: 0 2.25rem;
74 } 73 }
75 74
76 &-tit { 75 &-tit {
77 flex: 1; 76 flex: 1;
78 font-size: 18px; 77 font-size: $fontSizeTitle;
79 font-weight: bold; 78 font-weight: bold;
80 color: #4c4948; 79 color: $cFontGray;
81 } 80 }
82 81
83 .active { 82 .active {
84 color: #f05a23; 83 color: $cOrange;
85 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); 84 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
86 } 85 }
87 } 86 }
...@@ -98,19 +97,19 @@ ...@@ -98,19 +97,19 @@
98 } 97 }
99 98
100 .protocol { 99 .protocol {
101 color: #f05a23; 100 color: $cOrange;
102 } 101 }
103 } 102 }
104 103
105 &-submit { 104 &-submit {
106 @include btc2(13.5rem, 4rem, 16px); 105 @include btc2(17.25rem, 5.25rem, 16px);
107 margin: 4.166667rem auto 0; 106 margin: 4.166667rem auto 0;
108 letter-spacing: 1.6px; 107 letter-spacing: 1.6px;
109 position: absolute; 108 position: absolute;
110 left: 0; 109 left: 0;
111 right: 0; 110 right: 0;
112 margin: 0 auto; 111 margin: 0 auto;
113 bottom: 2.25rem; 112 bottom: 3rem;
114 } 113 }
115 114
116 &-func { 115 &-func {
...@@ -148,12 +147,12 @@ ...@@ -148,12 +147,12 @@
148 147
149 &-item { 148 &-item {
150 position: relative; 149 position: relative;
151 margin-bottom: 2.25rem; 150 margin-bottom: 3rem;
152 151
153 .label { 152 .label {
154 font-size: 18px; 153 font-size: $fontSizeTitle;
155 font-weight: bold; 154 font-weight: bold;
156 color: #f05a23; 155 color: $cOrange;
157 display: flex; 156 display: flex;
158 align-items: center; 157 align-items: center;
159 margin-bottom: 1.25rem; 158 margin-bottom: 1.25rem;
...@@ -173,12 +172,13 @@ ...@@ -173,12 +172,13 @@
173 .ipt { 172 .ipt {
174 @extend .bb; 173 @extend .bb;
175 width: 100%; 174 width: 100%;
176 height: 3.5rem; 175 height: 4.5rem;
176 border-radius: 4.5rem;
177 border: solid 1px #dcdddd; 177 border: solid 1px #dcdddd;
178 background-color: #ffffff; 178 background-color: #ffffff;
179 border-radius: 3.5rem; 179 padding: 0 2rem;
180 padding: 0 1.75rem;
181 flex: 1; 180 flex: 1;
181 letter-spacing: .1rem;
182 } 182 }
183 183
184 // 长文本 184 // 长文本
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
189 189
190 .down-arrow { 190 .down-arrow {
191 position: absolute; 191 position: absolute;
192 top: 1.6rem; 192 top: 2.2rem;
193 right: 2rem; 193 right: 2rem;
194 } 194 }
195 195
...@@ -203,29 +203,23 @@ ...@@ -203,29 +203,23 @@
203 background-color: #f2f2f2; 203 background-color: #f2f2f2;
204 flex: none; 204 flex: none;
205 margin-left: 1.5rem; 205 margin-left: 1.5rem;
206 color: #4c4948; 206 color: $cFontGray;
207 } 207 }
208 208
209
209 // 框内按钮 210 // 框内按钮
210 .ipt2 { 211 .ipt2 {
211 display: flex; 212 display: flex;
212 justify-content: space-between; 213 justify-content: space-between;
213 align-items: center; 214 align-items: center;
214 215
215 .ipt-tel {
216 flex: 1;
217 padding-left: 1.75rem;
218 }
219
220 .ipt-code { 216 .ipt-code {
221 flex: 1; 217 flex: 1;
222 padding-right: 1.75rem; 218 padding-right: 1.75rem;
223 } 219 }
224 220
225 .region-tel {}
226
227 .veri-btn { 221 .veri-btn {
228 color: #f05a23; 222 color: $cOrange;
229 text-decoration: underline; 223 text-decoration: underline;
230 } 224 }
231 225
...@@ -233,7 +227,6 @@ ...@@ -233,7 +227,6 @@
233 color: #aaaaaa; 227 color: #aaaaaa;
234 } 228 }
235 } 229 }
236
237 } 230 }
238 231
239 .validator { 232 .validator {
...@@ -265,5 +258,5 @@ ...@@ -265,5 +258,5 @@
265 .disable { 258 .disable {
266 background-color: #dcdddd !important; 259 background-color: #dcdddd !important;
267 // color: $cFontGray; 260 // color: $cFontGray;
268 color: #4c4948; 261 color: $cFontGray;
269 } 262 }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <div class="content"> 3 <div class="content">
4 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 4 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
5 <div class="ebg"> 5 <div class="ebg">
6 <img src="@/assets/images/password-reset/password-reset-bg.png"> 6 <img src="@/assets/images/common/login-bg.png">
7 </div> 7 </div>
8 <div class="top-space"></div> 8 <div class="top-space"></div>
9 <div class="box"> 9 <div class="box">
......
...@@ -3,11 +3,13 @@ ...@@ -3,11 +3,13 @@
3 .content { 3 .content {
4 position: relative; 4 position: relative;
5 min-height: 50rem; 5 min-height: 50rem;
6 padding-bottom: 2.25rem; 6 padding-bottom: $paddingMedium;
7 color: $cFontGray;
8 font-size: $fontSize;
7 } 9 }
8 10
9 .top-space { 11 .top-space {
10 height: 2.75rem; 12 height: $marginMedium;
11 } 13 }
12 14
13 .box { 15 .box {
...@@ -17,41 +19,39 @@ ...@@ -17,41 +19,39 @@
17 .ebg { 19 .ebg {
18 position: absolute; 20 position: absolute;
19 bottom: 0; 21 bottom: 0;
20 left: 0; 22 left: 50%;
21 right: 0; 23 margin-left: -960px;
22 24 width: 1920px;
23 img {
24 max-width: 100%;
25 }
26 } 25 }
27 26
28 .step { 27 .step {
29 @extend .fcc; 28 @extend .fcc;
30 margin-bottom: 3rem; 29 margin-bottom: 4.25rem;
30
31 img {
32 height: 4.25rem;
33 }
31 } 34 }
32 35
33 .login { 36 .login {
34 color: #4c4948; 37
35 @extend .bb; 38 @extend .bb;
36 padding: 2.75rem 5rem 4.25rem; 39 padding: 2.75rem 6.25rem 4.5rem;
37 border-bottom: solid .666667rem #006441; 40 border-bottom: solid 0.9rem $cGreen;
38 41
39 margin: auto; 42 margin: auto;
40 max-width: 40.25rem; 43 max-width: 51rem;
41 border-radius: .75rem; 44 border-radius: $borderRadius;
42 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 45 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
43 background-color: #ffffff; 46 background-color: #ffffff;
44 47
45 &-tit { 48 &-tit {
46 // font-family: MicrosoftYaHei;
47 color: $cOrange; 49 color: $cOrange;
48 display: flex; 50 display: flex;
49 justify-content: center; 51 justify-content: center;
50 52
51
52 img { 53 img {
53 height: 1.416667rem; 54 height: 1.416667rem;
54 /* 17/12 */
55 } 55 }
56 56
57 .img-en { 57 .img-en {
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
62 &-tit2 { 62 &-tit2 {
63 color: $cOrange; 63 color: $cOrange;
64 text-align: center; 64 text-align: center;
65 font-size: 18px; 65 font-size: $fontSizeTitle;
66 font-weight: bold; 66 font-weight: bold;
67 letter-spacing: .2rem; 67 letter-spacing: .2rem;
68 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); 68 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
...@@ -71,35 +71,32 @@ ...@@ -71,35 +71,32 @@
71 71
72 72
73 &-nav { 73 &-nav {
74 margin: 2.25rem 0 auto; 74 margin: 2.75rem auto 1rem;
75 display: flex; 75 display: flex;
76 justify-content: center; 76 justify-content: center;
77 align-items: center; 77 align-items: center;
78 78
79 &-v-line { 79 &-v-line {
80 width: .2rem; 80 width: 2px;
81 height: 1.25rem; 81 height: 1.2rem;
82 background-color: #4c4948; 82 background-color: $cFontGray;
83 margin: 0 2.25rem; 83 margin: 0 2.25rem;
84 } 84 }
85 85
86 &-tit { 86 &-tit {
87 // font-family: MicrosoftYaHei;
88 flex: 1; 87 flex: 1;
89 font-size: 18px; 88 font-size: $fontSizeTitle;
90 font-weight: bold; 89 font-weight: bold;
91 color: #4c4948;
92 // text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27);
93 } 90 }
94 91
95 .active { 92 .active {
96 color: #f05a23; 93 color: $cOrange;
97 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); 94 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
98 } 95 }
99 } 96 }
100 97
101 &-protocol { 98 &-protocol {
102 margin: 2.5rem auto 0; 99 margin: 3rem auto 0;
103 display: flex; 100 display: flex;
104 align-items: center; 101 align-items: center;
105 padding-left: 1rem; 102 padding-left: 1rem;
...@@ -110,23 +107,23 @@ ...@@ -110,23 +107,23 @@
110 } 107 }
111 108
112 .protocol { 109 .protocol {
113 color: #f05a23; 110 color: $cOrange;
114 } 111 }
115 } 112 }
116 113
117 &-submit { 114 &-submit {
118 @include btc2(13.5rem, 4rem, 16px); 115 @include btc2(17.25rem, 5.25rem, 16px);
119 margin: 4.166667rem auto 0; 116 margin: 4.166667rem auto 0;
120 letter-spacing: 1.6px; 117 letter-spacing: 1.6px;
121 } 118 }
122 119
123 &-func { 120 &-func {
124 margin: 1.5rem auto 0; 121 margin: 2rem auto 0;
125 display: flex; 122 display: flex;
126 justify-content: center; 123 justify-content: center;
127 124
128 &-btn { 125 &-btn {
129 margin: 0 1.25rem; 126 margin: 0 1.5rem;
130 text-decoration: underline; 127 text-decoration: underline;
131 } 128 }
132 } 129 }
...@@ -149,21 +146,17 @@ ...@@ -149,21 +146,17 @@
149 } 146 }
150 147
151 input { 148 input {
152 font-size: 1.166667rem;
153 /* 14/12 */
154 letter-spacing: .1rem; 149 letter-spacing: .1rem;
155 /* 1.2/12 */
156 } 150 }
157 151
158 &-item { 152 &-item {
159 position: relative; 153 position: relative;
160 margin-top: 3.75rem; 154 margin-top: 3.25rem;
161 155
162 .label { 156 .label {
163 // font-family: MicrosoftYaHei; 157 font-size: $fontSizeTitle;
164 font-size: 18px;
165 font-weight: bold; 158 font-weight: bold;
166 color: #f05a23; 159 color: $cOrange;
167 display: flex; 160 display: flex;
168 align-items: center; 161 align-items: center;
169 margin-bottom: 1.25rem; 162 margin-bottom: 1.25rem;
...@@ -183,12 +176,13 @@ ...@@ -183,12 +176,13 @@
183 .ipt { 176 .ipt {
184 @extend .bb; 177 @extend .bb;
185 width: 100%; 178 width: 100%;
186 height: 3.5rem; 179 height: 4.5rem;
180 border-radius: 4.5rem;
187 border: solid 1px #dcdddd; 181 border: solid 1px #dcdddd;
188 background-color: #ffffff; 182 background-color: #ffffff;
189 border-radius: 3.5rem; 183 padding: 0 2rem;
190 padding: 0 1.75rem;
191 flex: 1; 184 flex: 1;
185 letter-spacing: .1rem;
192 } 186 }
193 187
194 // 长文本 188 // 长文本
...@@ -199,7 +193,7 @@ ...@@ -199,7 +193,7 @@
199 193
200 .down-arrow { 194 .down-arrow {
201 position: absolute; 195 position: absolute;
202 top: 1.6rem; 196 top: 2.2rem;
203 right: 2rem; 197 right: 2rem;
204 } 198 }
205 199
...@@ -213,29 +207,23 @@ ...@@ -213,29 +207,23 @@
213 background-color: #f2f2f2; 207 background-color: #f2f2f2;
214 flex: none; 208 flex: none;
215 margin-left: 1.5rem; 209 margin-left: 1.5rem;
216 color: #4c4948; 210 color: $cFontGray;
217 } 211 }
218 212
213
219 // 框内按钮 214 // 框内按钮
220 .ipt2 { 215 .ipt2 {
221 display: flex; 216 display: flex;
222 justify-content: space-between; 217 justify-content: space-between;
223 align-items: center; 218 align-items: center;
224 219
225 .ipt-tel {
226 flex: 1;
227 padding-left: 1.75rem;
228 }
229
230 .ipt-code { 220 .ipt-code {
231 flex: 1; 221 flex: 1;
232 padding-right: 1.75rem; 222 padding-right: 1.75rem;
233 } 223 }
234 224
235 .region-tel {}
236
237 .veri-btn { 225 .veri-btn {
238 color: #f05a23; 226 color: $cOrange;
239 text-decoration: underline; 227 text-decoration: underline;
240 } 228 }
241 229
...@@ -243,7 +231,6 @@ ...@@ -243,7 +231,6 @@
243 color: #aaaaaa; 231 color: #aaaaaa;
244 } 232 }
245 } 233 }
246
247 } 234 }
248 235
249 .validator { 236 .validator {
......
...@@ -75,13 +75,12 @@ ...@@ -75,13 +75,12 @@
75 </div> 75 </div>
76 <!-- 输入密码 --> 76 <!-- 输入密码 -->
77 <div v-if="type == 2" class="login"> 77 <div v-if="type == 2" class="login">
78
79 <div class="login-tit"> 78 <div class="login-tit">
80 <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> 79 <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
81 <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> 80 <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
82 <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> 81 <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
83 </div> 82 </div>
84 <div class="login-tit">{{$t('register.title2')}}</div> 83 <div class="login-tit2">{{$t('register.title2')}}</div>
85 <div class="gird-g form"> 84 <div class="gird-g form">
86 <div class="pure-u-1 form-item"> 85 <div class="pure-u-1 form-item">
87 <div class="label"> 86 <div class="label">
...@@ -108,7 +107,6 @@ ...@@ -108,7 +107,6 @@
108 </div> 107 </div>
109 <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div> 108 <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
110 </div> 109 </div>
111 <!-- 输入密码 -->
112 </div> 110 </div>
113 </div> 111 </div>
114 </template> 112 </template>
......
...@@ -26,13 +26,12 @@ $fontSize:14px; ...@@ -26,13 +26,12 @@ $fontSize:14px;
26 $fontSizeSmall:12px; 26 $fontSizeSmall:12px;
27 27
28 // Color 28 // Color
29 $colorGray: #475669;
30 $cOrange:#f05a23; 29 $cOrange:#f05a23;
30 $cFontGray: #4c4948;
31 $cGreen:#006441; 31 $cGreen:#006441;
32 $cGray:#bfbfbf; 32 $cGray:#bfbfbf;
33 $cDark:#dcdcdc; 33 $cDark:#dcdcdc;
34 $cLightBlack:#333333; 34 $cLightBlack:#333333;
35 $cFontGray: #4c4948;
36 35
37 36
38 // 移动端 37 // 移动端
......