webfront / videoWeb · 提交

转到一个项目

作者 乔爽
提交 fd03cbd2dd90349f2867c84410472decbaccf943 1 个父辈 cf31f0cf

update

内嵌 并排对比
正在显示 2 个修改的文件 包含 109 行增加 和 263 行删除
@@ -5,261 +5,6 @@ @@ -5,261 +5,6 @@
5 } 5 }
6 6
7 7
8 -  
9 -.container {  
10 - width: 100%;  
11 - display: flex;  
12 - flex-flow: column;  
13 - align-items: center;  
14 - justify-content: center;  
15 - overflow-y: hidden;  
16 -}  
17 -.top{  
18 - width: 7.5rem;  
19 - /*height: 1.5rem;*/  
20 - background-color: #F7F7F7;  
21 - display: flex;  
22 - flex-flow: column;  
23 - align-items: center;  
24 - justify-content: center;  
25 -}  
26 -.top_t{  
27 - width: 6.86rem;  
28 - height: 0.8rem;  
29 - display: flex;  
30 - align-items: center;  
31 - justify-content: space-between;  
32 -}  
33 -.top_t_left{  
34 - width: 1.2rem;  
35 - display: flex;  
36 - justify-content: space-between;  
37 - align-items: center;  
38 -}  
39 -.top_t_left_text{  
40 - font-size:0.3rem;  
41 - font-family:PingFang-SC-Medium;  
42 - font-weight:500;  
43 - color:rgba(166,16,16,1);  
44 -}  
45 -.icon-caidan{  
46 -  
47 -}  
48 -/*中部*/  
49 -.top_t_middle{  
50 - width: 1.2rem;  
51 - height: 0.5rem;  
52 - display: flex;  
53 -}  
54 -.top_t_middle img{  
55 - width: 100%;  
56 - height: 100%;  
57 -}  
58 -/*右边*/  
59 -.top_t_right{  
60 - width: 1.5rem;  
61 - display: flex;  
62 - justify-content: space-between;  
63 - align-items: center;  
64 -}  
65 -.icon-10{  
66 - position: relative;  
67 -}  
68 -.top_t_right_pic{  
69 - width: 0.4rem;  
70 - height: 0.4rem;  
71 - display: flex;  
72 - -webkit-border-radius: 50%;  
73 - -moz-border-radius: 50%;  
74 - border-radius: 50%;  
75 -}  
76 -.top_t_right_pic img{  
77 - width: 100%;  
78 - height: 100%;  
79 - -webkit-border-radius: 50%;  
80 - -moz-border-radius: 50%;  
81 - border-radius: 50%;  
82 -}  
83 -.top_t_right_text{  
84 - font-size: 0.2rem;  
85 - font-weight: 500;  
86 - color: #333333;  
87 -}  
88 -/*-----底部------*/  
89 -.top_d{  
90 - width: 5.56rem;  
91 - display: flex;  
92 - padding-bottom: 0.03rem;  
93 - border-bottom: 1px solid #999999;  
94 - margin: 0.3rem 0 0.2rem 0;  
95 -}  
96 -.top_d_input{  
97 - width: 5rem;  
98 - text-align: center;  
99 - border: none;  
100 - outline: none;  
101 - background-color: #F7F7F7;  
102 - font-size: 0.3rem;  
103 - box-sizing: border-box;  
104 - padding: 0 0.2rem;  
105 -}  
106 -.top_d_input::placeholder{  
107 - color: #999999;  
108 -}  
109 -/*---------- 信息框 ----------*/  
110 -.mid{  
111 - margin-top: 0.53rem;  
112 - width: 6.86rem;  
113 - height: 1.5rem;  
114 - background:rgba(255,255,255,1);  
115 - box-shadow:0 0.04rem 0.12rem 0 rgba(155,155,155,0.1);  
116 - border-radius: 0.1rem;  
117 - display: flex;  
118 - flex-flow: column;  
119 -}  
120 -.mid_box{  
121 - display: flex;  
122 - align-items: center;  
123 - box-sizing: border-box;  
124 - padding-left: 0.3rem;  
125 -}  
126 -.mid_left{  
127 - width: 0.9rem;  
128 - height: 0.9rem;  
129 - display: flex;  
130 - /*align-items: center;*/  
131 - border-radius: 50%;  
132 -  
133 -}  
134 -.mid_left img{  
135 - width: 100%;  
136 - height: 100%;  
137 - border-radius: 50%;  
138 -}  
139 -.mid_right{  
140 - margin-left: 0.3rem;  
141 -}  
142 -.mid_right_big{  
143 -  
144 - font-size: 0.36rem;  
145 - font-family:PingFang-SC-Bold;  
146 - font-weight:bold;  
147 - color:rgba(51,51,51,1);  
148 - line-height: 0.24rem;  
149 - display: flex;  
150 -}  
151 -.mid_right_small{  
152 - margin-top: 0.2rem;  
153 - font-size: 0.2rem;  
154 - font-family:PingFang-SC-Medium;  
155 - font-weight:500;  
156 - color:rgba(51,51,51,1);  
157 - line-height: 0.24rem;  
158 - display: flex;  
159 -}  
160 -.mid_bottom{  
161 - width: 5rem;  
162 - margin-top: 0.12rem;  
163 - margin-left: 1.5rem;  
164 - display: flex;  
165 - justify-content: space-between;  
166 -}  
167 -.mid_bottom_left{  
168 - width: 2rem;  
169 - display: flex;  
170 - justify-content: space-between;  
171 -}  
172 -.mid_bottom_left_title{  
173 -  
174 - font-size: 0.2rem;  
175 - font-family:PingFang-SC-Medium;  
176 - font-weight:500;  
177 - color:rgba(51,51,51,1);  
178 - line-height: 0.24rem;  
179 - display: flex;  
180 -}  
181 -.mid_bottom_left_number{  
182 -  
183 - font-size: 0.28rem;  
184 - font-family:PingFang-SC-Bold;  
185 - font-weight:bold;  
186 - color:rgba(51,51,51,1);  
187 - line-height: 0.24rem;  
188 -}  
189 -.mid_bottom_right{  
190 - width: 1rem;  
191 - height: 0.28rem;  
192 - background: #A61010;  
193 - border-radius: 0.04rem;  
194 -  
195 -  
196 - font-size: 0.2rem;  
197 - font-family:PingFang-SC-Medium;  
198 - font-weight:500;  
199 - color:rgba(255,255,255,1);  
200 - line-height: 0.28rem;  
201 - text-align: center;  
202 -}  
203 -  
204 -.items{  
205 - margin-top: 0.63rem;  
206 - width: 6.86rem;  
207 - font-size: 0.36rem;  
208 - font-family:PingFang-SC-Bold;  
209 - font-weight:bold;  
210 - color:rgba(51,51,51,1);  
211 - line-height: 0.24rem;  
212 -}  
213 -.item{  
214 - margin-top: 0.24rem;  
215 - width: 6.86rem;  
216 - display: flex;  
217 -}  
218 -.item_left{  
219 - width: 2.99rem;  
220 - height: 1.74rem;  
221 - display: flex;  
222 - border-radius: 0.08rem;  
223 -}  
224 -.item_left img{  
225 - width: 100%;  
226 - height: 100%;  
227 - border-radius: 0.08rem;  
228 -}  
229 -.item_right{  
230 - margin-left: 0.31rem;  
231 - width: 3rem;  
232 -}  
233 -.item_right_top{  
234 - font-size: 0.28rem;  
235 - font-family:PingFang-SC-Bold;  
236 - font-weight:bold;  
237 - color:rgba(51,51,51,1);  
238 - line-height: 0.36rem;  
239 -}  
240 -.item_right_mid{  
241 - font-size: 0.2rem;  
242 - font-family:PingFang-SC-Medium;  
243 - font-weight:500;  
244 - color:rgba(51,51,51,1);  
245 - line-height: 0.36rem;  
246 - margin-top: 0.2rem;  
247 - overflow: hidden;  
248 - text-overflow: ellipsis;  
249 - white-space: nowrap;  
250 -}  
251 -.item_right_bottom{  
252 - font-size: 0.2rem;  
253 - font-family:PingFang-SC-Medium;  
254 - font-weight:500;  
255 - color:rgba(51,51,51,1);  
256 - line-height: 0.36rem;  
257 - margin-top: 0.2rem;  
258 -}  
259 -.item_right_bottom p{  
260 - line-height: 0.32rem;  
261 -}  
262 -  
263 /*动态层*/ 8 /*动态层*/
264 .mask{ 9 .mask{
265 width: 7.5rem; 10 width: 7.5rem;
@@ -99,7 +99,7 @@ @@ -99,7 +99,7 @@
99 <div class="mid_item_left"> 99 <div class="mid_item_left">
100 手机号 100 手机号
101 </div> 101 </div>
102 - <div class="mid_item_right"> 102 + <div class="mid_item_right set_tel">
103 修改 103 修改
104 </div> 104 </div>
105 <!--手机数字--> 105 <!--手机数字-->
@@ -112,16 +112,16 @@ @@ -112,16 +112,16 @@
112 <div class="mid_item2_left"> 112 <div class="mid_item2_left">
113 邮箱 113 邮箱
114 </div> 114 </div>
115 - <div class="mid_item2_right"> 115 + <div class="mid_item2_right set_email" >
116 设置邮箱 116 设置邮箱
117 </div> 117 </div>
118 </div> 118 </div>
119 <!--密码--> 119 <!--密码-->
120 <div class="mid_item2"> 120 <div class="mid_item2">
121 <div class="mid_item2_left"> 121 <div class="mid_item2_left">
122 - 邮箱 122 + 密码
123 </div> 123 </div>
124 - <div class="mid_item2_right"> 124 + <div class="mid_item2_right set_code">
125 修改密码 125 修改密码
126 </div> 126 </div>
127 </div> 127 </div>
@@ -325,12 +325,83 @@ @@ -325,12 +325,83 @@
325 325
326 </div> 326 </div>
327 </div> 327 </div>
328 - <!--设置新密码-->  
329 - <div class="mask"> 328 +
  329 + <!----------修改手机号---------->
  330 + <div class="mask mask_setTel" style="display: none;">
  331 + <div class="mask_box m_top">
  332 + <!--标题-->
  333 + <div class="mask_tel">
  334 + 修改手机号
  335 + </div>
  336 + <!--输入框盒子-->
  337 + <div class="mask_box_i">
  338 + <!--新手机号-->
  339 + <div class="mask_new">
  340 + <input class="mask_new_input" type="text" placeholder="新手机号">
  341 + </div>
  342 + <!--输入验证码-->
  343 + <div class="mask_new border_no">
  344 + <div class="mask_new">
  345 + <input class="mask_new_small" type="text" placeholder="手机验证码">
  346 + </div>
  347 + <div class="mask_new_text">获取验证码</div>
  348 + </div>
  349 + <!--底部按钮-->
  350 + <div class="mask_tel_button">
  351 + <!--左边取消-->
  352 + <div class="mask_tel_button_left close_tel">
  353 + 取消
  354 + </div>
  355 + <!--右边保存-->
  356 + <div class="mask_tel_button_right">
  357 + 确定
  358 + </div>
  359 + </div>
  360 + </div>
  361 + </div>
  362 + </div>
  363 +
  364 + <!----------设置邮箱---------->
  365 + <div class="mask mask_setEmail" style="display: none;">
  366 + <div class="mask_box m_top">
  367 + <!--标题-->
  368 + <div class="mask_tel">
  369 + 设置邮箱
  370 + </div>
  371 + <!--输入框盒子-->
  372 + <div class="mask_box_i">
  373 + <!--新手机号-->
  374 + <div class="mask_new">
  375 + <input class="mask_new_input" type="text" placeholder="新增邮箱">
  376 + </div>
  377 + <!--输入验证码-->
  378 + <div class="mask_new border_no">
  379 + <div class="mask_new">
  380 + <input class="mask_new_small" type="text" placeholder="邮箱验证码">
  381 + </div>
  382 + <div class="mask_new_text">获取验证码</div>
  383 + </div>
  384 + <!--底部按钮-->
  385 + <div class="mask_tel_button">
  386 + <!--左边取消-->
  387 + <div class="mask_tel_button_left close_email">
  388 + 取消
  389 + </div>
  390 + <!--右边保存-->
  391 + <div class="mask_tel_button_right">
  392 + 确定
  393 + </div>
  394 + </div>
  395 + </div>
  396 + </div>
  397 + </div>
  398 +
  399 + <!----------设置密码---------->
  400 + <div class="mask mask_newCode" style="display: none;">
330 <div class="mask_box m_top"> 401 <div class="mask_box m_top">
331 <!--标题--> 402 <!--标题-->
332 <div class="mask_tel"> 403 <div class="mask_tel">
333 - 设置密码 404 + 修改密码
334 </div> 405 </div>
335 <!--输入框盒子--> 406 <!--输入框盒子-->
336 <div class="mask_box_i"> 407 <div class="mask_box_i">
@@ -345,7 +416,7 @@ @@ -345,7 +416,7 @@
345 <!--底部按钮--> 416 <!--底部按钮-->
346 <div class="mask_tel_button"> 417 <div class="mask_tel_button">
347 <!--左边取消--> 418 <!--左边取消-->
348 - <div class="mask_tel_button_left"> 419 + <div class="mask_tel_button_left close_code">
349 取消 420 取消
350 </div> 421 </div>
351 <!--右边保存--> 422 <!--右边保存-->
@@ -403,6 +474,36 @@ @@ -403,6 +474,36 @@
403 $('.Google_n').hide() 474 $('.Google_n').hide()
404 }) 475 })
405 476
  477 + // 手机号
  478 + $('.set_tel').click(function () {
  479 + $('.mask_setTel').show()
  480 + // $('.mask_tel_button_left').hide()
  481 + })
  482 + $('.close_tel').click(function () {
  483 + $('.mask_setTel').hide()
  484 + $('.mask_new_input').val("")
  485 + $('.mask_new_small').val("")
  486 +
  487 + })
  488 +
  489 + // 设置邮箱
  490 + $('.set_email').click(function () {
  491 + $('.mask_setEmail').show()
  492 + })
  493 + $('.close_email').click(function () {
  494 + $('.mask_setEmail').hide()
  495 + $('.mask_new_input').val('')
  496 + $('.mask_new_small').val('')
  497 + })
  498 +
  499 + // 修改密码
  500 + $('.set_code').click(function () {
  501 + $('.mask_newCode').show()
  502 + })
  503 + $('.close_code').click(function () {
  504 + $('.mask_newCode').hide()
  505 + $('.mask_new_input').val('')
  506 + })
406 507
407 </script> 508 </script>
408 </html> 509 </html>