正在显示
32 个修改的文件
包含
1731 行增加
和
1207 行删除
@@ -19,15 +19,19 @@ | @@ -19,15 +19,19 @@ | ||
19 | } | 19 | } |
20 | .mask_box{ | 20 | .mask_box{ |
21 | width: 5.7rem; | 21 | width: 5.7rem; |
22 | - height: 7rem; | 22 | + height:max-content; |
23 | +/* | ||
23 | display: flex; | 24 | display: flex; |
24 | flex-flow: column; | 25 | flex-flow: column; |
25 | 26 | ||
26 | align-items: center; | 27 | align-items: center; |
28 | +*/ | ||
27 | background:rgba(255,255,255,1); | 29 | background:rgba(255,255,255,1); |
28 | 30 | ||
29 | border-radius: 0.16rem; | 31 | border-radius: 0.16rem; |
30 | box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08); | 32 | box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08); |
33 | + padding: 0 .5rem; | ||
34 | + padding-bottom: .32rem; | ||
31 | } | 35 | } |
32 | .mask_text{ | 36 | .mask_text{ |
33 | margin-top: 0.64rem; | 37 | margin-top: 0.64rem; |
@@ -35,8 +39,10 @@ | @@ -35,8 +39,10 @@ | ||
35 | font-family:PingFang-SC-Bold; | 39 | font-family:PingFang-SC-Bold; |
36 | font-weight:bold; | 40 | font-weight:bold; |
37 | color:rgba(51,51,51,1); | 41 | color:rgba(51,51,51,1); |
42 | + text-align: center; | ||
38 | } | 43 | } |
39 | .mask_box_top{ | 44 | .mask_box_top{ |
45 | + margin: 0 auto; | ||
40 | margin-top: 0.64rem; | 46 | margin-top: 0.64rem; |
41 | width: 3.5rem; | 47 | width: 3.5rem; |
42 | display: flex; | 48 | display: flex; |
@@ -54,10 +60,12 @@ | @@ -54,10 +60,12 @@ | ||
54 | margin-top: 0.1rem; | 60 | margin-top: 0.1rem; |
55 | } | 61 | } |
56 | .mask_box_mid{ | 62 | .mask_box_mid{ |
57 | - margin-top: 0.9rem; | 63 | + margin-top: 0.3rem; |
58 | display: flex; | 64 | display: flex; |
59 | flex-flow: column; | 65 | flex-flow: column; |
60 | position: relative; | 66 | position: relative; |
67 | + padding: 0 1.05rem; | ||
68 | + margin-bottom: .6rem; | ||
61 | } | 69 | } |
62 | .mask_box_text{ | 70 | .mask_box_text{ |
63 | display: flex; | 71 | display: flex; |
@@ -66,7 +74,7 @@ | @@ -66,7 +74,7 @@ | ||
66 | font-weight:500; | 74 | font-weight:500; |
67 | color:rgba(51,51,51,1); | 75 | color:rgba(51,51,51,1); |
68 | position: absolute; | 76 | position: absolute; |
69 | - left: -0.9rem; | 77 | + left: .3rem; |
70 | top: 0.16rem; | 78 | top: 0.16rem; |
71 | align-items: center; | 79 | align-items: center; |
72 | } | 80 | } |
@@ -76,7 +84,7 @@ | @@ -76,7 +84,7 @@ | ||
76 | height: 0.6rem; | 84 | height: 0.6rem; |
77 | outline:none; | 85 | outline:none; |
78 | border: none; | 86 | border: none; |
79 | - | 87 | + border-bottom: 1px solid #E8E8E8; |
80 | text-decoration: none; | 88 | text-decoration: none; |
81 | box-sizing: border-box; | 89 | box-sizing: border-box; |
82 | padding: 0.1rem; | 90 | padding: 0.1rem; |
@@ -89,7 +97,7 @@ | @@ -89,7 +97,7 @@ | ||
89 | color: #A61010; | 97 | color: #A61010; |
90 | position: absolute; | 98 | position: absolute; |
91 | top: 0.8rem; | 99 | top: 0.8rem; |
92 | - right: 0; | 100 | + right: 1.2rem; |
93 | } | 101 | } |
94 | .mask_box_sub{ | 102 | .mask_box_sub{ |
95 | margin-top: 0.53rem; | 103 | margin-top: 0.53rem; |
@@ -102,11 +110,14 @@ | @@ -102,11 +110,14 @@ | ||
102 | font-size: 0.26rem; | 110 | font-size: 0.26rem; |
103 | font-weight: bold; | 111 | font-weight: bold; |
104 | color: #fff; | 112 | color: #fff; |
113 | + margin: 0 auto; | ||
114 | + margin-top: .2rem; | ||
105 | } | 115 | } |
106 | .mask_box_account{ | 116 | .mask_box_account{ |
107 | width: 3.5rem; | 117 | width: 3.5rem; |
108 | display: flex; | 118 | display: flex; |
109 | - justify-content: space-between; | 119 | + padding: 0 1.05rem; |
120 | + justify-content: flex-end; | ||
110 | font-size: 0.14rem; | 121 | font-size: 0.14rem; |
111 | color: #333333; | 122 | color: #333333; |
112 | margin-top: 0.28rem; | 123 | margin-top: 0.28rem; |
@@ -126,7 +137,8 @@ | @@ -126,7 +137,8 @@ | ||
126 | 137 | ||
127 | .mask_box_model{ | 138 | .mask_box_model{ |
128 | width: 3.5rem; | 139 | width: 3.5rem; |
129 | - margin-top: 0.7rem; | 140 | + margin: 0 auto; |
141 | + margin-top: 0.3rem; | ||
130 | display: flex; | 142 | display: flex; |
131 | justify-content: space-between; | 143 | justify-content: space-between; |
132 | 144 | ||
@@ -143,6 +155,7 @@ | @@ -143,6 +155,7 @@ | ||
143 | border-radius: 50%; | 155 | border-radius: 50%; |
144 | } | 156 | } |
145 | .mask_box_bottom{ | 157 | .mask_box_bottom{ |
158 | + margin: 0 auto; | ||
146 | margin-top: 0.59rem; | 159 | margin-top: 0.59rem; |
147 | width: 3.5rem; | 160 | width: 3.5rem; |
148 | font-size: 0.18rem; | 161 | font-size: 0.18rem; |
@@ -156,6 +169,7 @@ | @@ -156,6 +169,7 @@ | ||
156 | font-size: 0.14rem; | 169 | font-size: 0.14rem; |
157 | color: #333333; | 170 | color: #333333; |
158 | margin-top: 0.28rem; | 171 | margin-top: 0.28rem; |
172 | + text-align: center; | ||
159 | } | 173 | } |
160 | /*立即登录,10秒后进入登录界面*/ | 174 | /*立即登录,10秒后进入登录界面*/ |
161 | .now_sub{ | 175 | .now_sub{ |
@@ -167,6 +181,7 @@ | @@ -167,6 +181,7 @@ | ||
167 | display: flex; | 181 | display: flex; |
168 | align-items: center; | 182 | align-items: center; |
169 | background:rgba(255,255,255,0.94); | 183 | background:rgba(255,255,255,0.94); |
184 | + z-index: 9; | ||
170 | } | 185 | } |
171 | .mask_big{ | 186 | .mask_big{ |
172 | margin-top: 2.97rem; | 187 | margin-top: 2.97rem; |
@@ -197,7 +212,7 @@ | @@ -197,7 +212,7 @@ | ||
197 | .mask_box_mid_input_remind{ | 212 | .mask_box_mid_input_remind{ |
198 | font-size: 0.12rem; | 213 | font-size: 0.12rem; |
199 | position: absolute; | 214 | position: absolute; |
200 | - top: 0.86rem; | 215 | + top: 1.1rem; |
201 | color: #999999; | 216 | color: #999999; |
202 | } | 217 | } |
203 | .mask_underline{ | 218 | .mask_underline{ |
@@ -224,8 +239,11 @@ | @@ -224,8 +239,11 @@ | ||
224 | .mask_find{ | 239 | .mask_find{ |
225 | margin-top: 3.04rem; | 240 | margin-top: 3.04rem; |
226 | width: 5.3rem; | 241 | width: 5.3rem; |
227 | - display: flex; | ||
228 | - flex-flow: column; | 242 | + height: 5rem; |
243 | +/* display: flex;*/ | ||
244 | +/* flex-flow: column;*/ | ||
245 | + margin: 0 auto; | ||
246 | +/* background: #fff;*/ | ||
229 | } | 247 | } |
230 | .mask_find_big{ | 248 | .mask_find_big{ |
231 | font-size: 0.48rem; | 249 | font-size: 0.48rem; |
@@ -323,7 +341,7 @@ | @@ -323,7 +341,7 @@ | ||
323 | color: #999999; | 341 | color: #999999; |
324 | } | 342 | } |
325 | .mask_new_small{ | 343 | .mask_new_small{ |
326 | - width: 2.7rem; | 344 | + width: 4rem; |
327 | font-size: 0.24rem; | 345 | font-size: 0.24rem; |
328 | outline: none; | 346 | outline: none; |
329 | border: none; | 347 | border: none; |
@@ -524,11 +542,18 @@ | @@ -524,11 +542,18 @@ | ||
524 | .mask_submit_text{ | 542 | .mask_submit_text{ |
525 | display: flex; | 543 | display: flex; |
526 | flex-flow: column; | 544 | flex-flow: column; |
545 | + text-align: center; | ||
527 | font-size: 0.3rem; | 546 | font-size: 0.3rem; |
528 | color: #333333; | 547 | color: #333333; |
529 | margin-top: 0.73rem; | 548 | margin-top: 0.73rem; |
549 | + line-height: 1.5; | ||
550 | +} | ||
551 | +.mask_submit_text p{ | ||
552 | + line-height: 1.5; | ||
553 | + font-weight: 600; | ||
530 | } | 554 | } |
531 | .mask_submit_bottom{ | 555 | .mask_submit_bottom{ |
556 | + margin: 0 auto; | ||
532 | margin-top: 0.43rem; | 557 | margin-top: 0.43rem; |
533 | width: 2.5rem; | 558 | width: 2.5rem; |
534 | height: 0.5rem; | 559 | height: 0.5rem; |
1 | - | ||
2 | - | ||
3 | .container { | 1 | .container { |
4 | - width: 100%; | ||
5 | - display: flex; | ||
6 | - flex-flow: column; | ||
7 | - align-items: center; | ||
8 | - justify-content: center; | 2 | + width: 100%; |
3 | + display: flex; | ||
4 | + flex-flow: column; | ||
5 | + align-items: center; | ||
6 | + justify-content: center; | ||
9 | 7 | ||
10 | } | 8 | } |
11 | -.top{ | ||
12 | - width: 7.5rem; | ||
13 | - /*height: 1.5rem;*/ | ||
14 | - background-color: #F7F7F7; | ||
15 | - display: flex; | ||
16 | - flex-flow: column; | ||
17 | - align-items: center; | ||
18 | - justify-content: center; | ||
19 | -} | ||
20 | -.top_t{ | ||
21 | - width: 6.86rem; | ||
22 | - height: 0.8rem; | ||
23 | - display: flex; | ||
24 | - align-items: center; | ||
25 | - justify-content: space-between; | 9 | + |
10 | +.top { | ||
11 | + width: 7.5rem; | ||
12 | + /*height: 1.5rem;*/ | ||
13 | + background-color: #F7F7F7; | ||
14 | + display: flex; | ||
15 | + flex-flow: column; | ||
16 | + align-items: center; | ||
17 | + justify-content: center; | ||
26 | } | 18 | } |
27 | -.top_t_left{ | ||
28 | - width: 1.2rem; | ||
29 | - display: flex; | ||
30 | - justify-content: space-between; | ||
31 | - align-items: center; | 19 | + |
20 | +.top_t { | ||
21 | + width: 6.86rem; | ||
22 | + height: 0.8rem; | ||
23 | + display: flex; | ||
24 | + align-items: center; | ||
25 | + justify-content: space-between; | ||
32 | } | 26 | } |
33 | -.top_t_left_text{ | ||
34 | - font-size:0.3rem; | ||
35 | - font-family:PingFang-SC-Medium; | ||
36 | - font-weight:500; | ||
37 | - color:rgba(166,16,16,1); | 27 | + |
28 | +.top_t_left { | ||
29 | + width: 1.2rem; | ||
30 | + display: flex; | ||
31 | + justify-content: space-between; | ||
32 | + align-items: center; | ||
38 | } | 33 | } |
39 | -.icon-caidan{ | ||
40 | 34 | ||
35 | +.top_t_left_text { | ||
36 | + font-size: 0.3rem; | ||
37 | + font-family: PingFang-SC-Medium; | ||
38 | + font-weight: 500; | ||
39 | + color: rgba(166, 16, 16, 1); | ||
41 | } | 40 | } |
41 | + | ||
42 | +.icon-caidan {} | ||
43 | + | ||
42 | /*中部*/ | 44 | /*中部*/ |
43 | -.top_t_middle{ | ||
44 | - width: 1.2rem; | ||
45 | - height: 0.5rem; | ||
46 | - display: flex; | 45 | +.top_t_middle { |
46 | + width: 1.2rem; | ||
47 | + height: 0.5rem; | ||
48 | + display: flex; | ||
47 | } | 49 | } |
48 | -.top_t_middle img{ | ||
49 | - width: 100%; | ||
50 | - height: 100%; | 50 | + |
51 | +.top_t_middle img { | ||
52 | + width: 100%; | ||
53 | + height: 100%; | ||
51 | } | 54 | } |
55 | + | ||
52 | /*右边*/ | 56 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | ||
55 | - display: flex; | ||
56 | - justify-content: space-between; | ||
57 | - align-items: center; | 57 | +.top_t_right { |
58 | + display: flex; | ||
59 | + justify-content: space-between; | ||
60 | + align-items: center; | ||
58 | } | 61 | } |
59 | -.icon-10{ | ||
60 | - position: relative; | 62 | + |
63 | +.icon-10 { | ||
64 | + position: relative; | ||
61 | } | 65 | } |
62 | -.top_t_right_pic{ | ||
63 | - width: 0.4rem; | ||
64 | - height: 0.4rem; | ||
65 | - display: flex; | ||
66 | - -webkit-border-radius: 50%; | ||
67 | - -moz-border-radius: 50%; | ||
68 | - border-radius: 50%; | 66 | + |
67 | +.top_t_right_pic { | ||
68 | + width: 0.4rem; | ||
69 | + height: 0.4rem; | ||
70 | + display: flex; | ||
71 | + -webkit-border-radius: 50%; | ||
72 | + -moz-border-radius: 50%; | ||
73 | + border-radius: 50%; | ||
69 | } | 74 | } |
70 | -.top_t_right_pic img{ | ||
71 | - width: 100%; | ||
72 | - height: 100%; | ||
73 | - -webkit-border-radius: 50%; | ||
74 | - -moz-border-radius: 50%; | ||
75 | - 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%; | ||
76 | } | 82 | } |
83 | + | ||
77 | /*-----底部------*/ | 84 | /*-----底部------*/ |
78 | -.top_d{ | ||
79 | - width: 5.56rem; | ||
80 | - display: flex; | ||
81 | - padding-bottom: 0.03rem; | ||
82 | - border-bottom: 1px solid #999999; | ||
83 | - margin: 0.3rem 0 0.2rem 0; | ||
84 | -} | ||
85 | -.top_d_input{ | ||
86 | - width: 5rem; | ||
87 | - text-align: center; | ||
88 | - border: none; | ||
89 | - outline: none; | ||
90 | - background-color: #F7F7F7; | ||
91 | - font-size: 0.3rem; | ||
92 | - box-sizing: border-box; | ||
93 | - padding: 0 0.2rem; | 85 | +.top_d { |
86 | + width: 5.56rem; | ||
87 | + display: flex; | ||
88 | + padding-bottom: 0.03rem; | ||
89 | + border-bottom: 1px solid #999999; | ||
90 | + margin: 0.3rem 0 0.2rem 0; | ||
94 | } | 91 | } |
95 | -.top_d_input::placeholder{ | ||
96 | - color: #999999; | 92 | + |
93 | +.top_d_input { | ||
94 | + width: 5rem; | ||
95 | + text-align: center; | ||
96 | + border: none; | ||
97 | + outline: none; | ||
98 | + background-color: #F7F7F7; | ||
99 | + font-size: 0.3rem; | ||
100 | + box-sizing: border-box; | ||
101 | + padding: 0 0.2rem; | ||
102 | +} | ||
103 | + | ||
104 | +.top_d_input::placeholder { | ||
105 | + color: #999999; | ||
97 | } | 106 | } |
107 | + | ||
98 | /*---------- 信息框 ----------*/ | 108 | /*---------- 信息框 ----------*/ |
99 | -.mid{ | ||
100 | - margin-top: 0.53rem; | ||
101 | - width: 6.86rem; | ||
102 | - height: 1.5rem; | ||
103 | - background:rgba(255,255,255,1); | ||
104 | - box-shadow:0 0.04rem 0.12rem 0 rgba(155,155,155,0.1); | ||
105 | - border-radius: 0.1rem; | ||
106 | - display: flex; | ||
107 | - align-items: center; | ||
108 | - box-sizing: border-box; | ||
109 | - padding-left: 0.3rem; | 109 | +.mid { |
110 | + margin-top: 0.53rem; | ||
111 | + width: 6.86rem; | ||
112 | + height: 1.5rem; | ||
113 | + background: rgba(255, 255, 255, 1); | ||
114 | + box-shadow: 0 0.04rem 0.12rem 0 rgba(155, 155, 155, 0.1); | ||
115 | + border-radius: 0.1rem; | ||
116 | + display: flex; | ||
117 | + align-items: center; | ||
118 | + box-sizing: border-box; | ||
119 | + padding-left: 0.3rem; | ||
120 | + flex-flow: initial; | ||
110 | } | 121 | } |
111 | -.mid_left{ | ||
112 | - width: 0.9rem; | ||
113 | - height: 0.9rem; | ||
114 | - display: flex; | ||
115 | - /*align-items: center;*/ | ||
116 | - border-radius: 50%; | 122 | + |
123 | +.mid_left { | ||
124 | + width: 0.9rem; | ||
125 | + height: 0.9rem; | ||
126 | + display: flex; | ||
127 | + /*align-items: center;*/ | ||
128 | + border-radius: 50%; | ||
117 | 129 | ||
118 | } | 130 | } |
119 | -.mid_left img{ | ||
120 | - width: 100%; | ||
121 | - height: 100%; | ||
122 | - border-radius: 50%; | 131 | + |
132 | +.mid_left img { | ||
133 | + width: 100%; | ||
134 | + height: 100%; | ||
135 | + border-radius: 50%; | ||
123 | } | 136 | } |
124 | -.mid_right{ | ||
125 | - margin-left: 0.3rem; | 137 | + |
138 | +.mid_right { | ||
139 | + margin-left: 0.3rem; | ||
126 | } | 140 | } |
127 | -.mid_right_big{ | ||
128 | 141 | ||
129 | - font-size: 0.36rem; | ||
130 | - font-family:PingFang-SC-Bold; | ||
131 | - font-weight:bold; | ||
132 | - color:rgba(51,51,51,1); | ||
133 | - line-height: 0.24rem; | ||
134 | - display: flex; | 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; | ||
135 | } | 150 | } |
136 | -.mid_right_small{ | ||
137 | - margin-top: 0.2rem; | ||
138 | - font-size: 0.2rem; | ||
139 | - font-family:PingFang-SC-Medium; | ||
140 | - font-weight:500; | ||
141 | - color:rgba(51,51,51,1); | ||
142 | - line-height: 0.24rem; | ||
143 | - display: flex; | 151 | + |
152 | +.mid_right_small { | ||
153 | + margin-top: 0.2rem; | ||
154 | + font-size: 0.2rem; | ||
155 | + font-family: PingFang-SC-Medium; | ||
156 | + font-weight: 500; | ||
157 | + color: rgba(51, 51, 51, 1); | ||
158 | + line-height: 0.24rem; | ||
159 | + display: flex; | ||
144 | } | 160 | } |
145 | -.item{ | ||
146 | - width: 6.86rem; | ||
147 | - display: flex; | ||
148 | - justify-content: space-around; | ||
149 | - margin-top: 0.6rem; | 161 | + |
162 | +.item { | ||
163 | + width: 6.86rem; | ||
164 | + display: flex; | ||
165 | + justify-content: space-around; | ||
166 | + margin-top: 0.6rem; | ||
150 | } | 167 | } |
151 | -.item_m{ | ||
152 | 168 | ||
153 | - font-size: 0.36rem; | ||
154 | - font-family:MicrosoftYaHei-Bold; | ||
155 | - font-weight:bold; | ||
156 | - /*color:rgba(166,16,16,1);*/ | ||
157 | - line-height: 0.36rem; | ||
158 | - position: relative; | 169 | +.item_m { |
170 | + | ||
171 | + font-size: 0.36rem; | ||
172 | + font-family: MicrosoftYaHei-Bold; | ||
173 | + font-weight: bold; | ||
174 | + /*color:rgba(166,16,16,1);*/ | ||
175 | + line-height: 0.36rem; | ||
176 | + position: relative; | ||
159 | } | 177 | } |
178 | + | ||
160 | /*.item_right{*/ | 179 | /*.item_right{*/ |
161 | 180 | ||
162 | - /*font-size: 0.36rem;*/ | ||
163 | - /*font-family:MicrosoftYaHei-Bold;*/ | ||
164 | - /*font-weight:bold;*/ | ||
165 | - /*color:rgba(51,51,51,1);*/ | ||
166 | - /*line-height: 0.36rem;*/ | ||
167 | - /*position: relative;*/ | 181 | +/*font-size: 0.36rem;*/ |
182 | +/*font-family:MicrosoftYaHei-Bold;*/ | ||
183 | +/*font-weight:bold;*/ | ||
184 | +/*color:rgba(51,51,51,1);*/ | ||
185 | +/*line-height: 0.36rem;*/ | ||
186 | +/*position: relative;*/ | ||
168 | /*}*/ | 187 | /*}*/ |
169 | -.item_number{ | ||
170 | - width: 0.2rem; | ||
171 | - height: 0.2rem; | ||
172 | - background:rgba(166,16,16,1); | ||
173 | - border:2px solid rgba(255, 255, 255, 1); | ||
174 | - border-radius:50%; | ||
175 | - | ||
176 | - | ||
177 | - font-size: 0.12rem; | ||
178 | - font-family:MicrosoftYaHei; | ||
179 | - font-weight:400; | ||
180 | - color:rgba(252,254,255,1); | ||
181 | - line-height: 0.36rem; | ||
182 | - display: flex; | ||
183 | - align-items: center; | ||
184 | - justify-content: center; | 188 | +.item_number { |
189 | + width: 0.2rem; | ||
190 | + height: 0.2rem; | ||
191 | + background: rgba(166, 16, 16, 1); | ||
192 | + border: 2px solid rgba(255, 255, 255, 1); | ||
193 | + border-radius: 50%; | ||
185 | 194 | ||
186 | - position: absolute; | ||
187 | - top: -0.18rem; | ||
188 | - left: 0.6rem; | 195 | + |
196 | + font-size: 0.12rem; | ||
197 | + font-family: MicrosoftYaHei; | ||
198 | + font-weight: 400; | ||
199 | + color: rgba(252, 254, 255, 1); | ||
200 | + line-height: 0.36rem; | ||
201 | + display: flex; | ||
202 | + align-items: center; | ||
203 | + justify-content: center; | ||
204 | + | ||
205 | + position: absolute; | ||
206 | + top: -0.18rem; | ||
207 | + left: 0.6rem; | ||
189 | } | 208 | } |
190 | -.item_color{ | ||
191 | - color: #A61010; | 209 | + |
210 | +.item_color { | ||
211 | + color: #A61010; | ||
192 | } | 212 | } |
193 | -.item_color:before{ | ||
194 | - content: ""; | ||
195 | - width: 0.8rem; | ||
196 | - height: 0.02rem; | ||
197 | - background: #A61010; | ||
198 | - position: absolute; | ||
199 | - bottom: -0.15rem; | ||
200 | - /*color: #A61010;*/ | 213 | + |
214 | +.item_color:before { | ||
215 | + content: ""; | ||
216 | + width: 0.8rem; | ||
217 | + height: 0.02rem; | ||
218 | + background: #A61010; | ||
219 | + position: absolute; | ||
220 | + bottom: -0.15rem; | ||
221 | + /*color: #A61010;*/ | ||
201 | } | 222 | } |
202 | -.message{ | ||
203 | - margin-top: 0.5rem; | ||
204 | - width: 6.86rem; | ||
205 | - font-size: 0.24rem; | ||
206 | - font-family:MicrosoftYaHei; | ||
207 | - font-weight:400; | ||
208 | 223 | ||
209 | - line-height: 0.36rem; | 224 | +.message { |
225 | + margin-top: 0.5rem; | ||
226 | + width: 6.86rem; | ||
227 | + font-size: 0.24rem; | ||
228 | + font-family: MicrosoftYaHei; | ||
229 | + font-weight: 400; | ||
230 | + | ||
231 | + line-height: 0.36rem; | ||
210 | } | 232 | } |
211 | -.message_box{ | ||
212 | - margin-top: 0.2rem; | 233 | + |
234 | +.message_box { | ||
235 | + margin-top: 0.2rem; | ||
213 | } | 236 | } |
214 | -.color_red{ | ||
215 | - color: #A61010; | 237 | + |
238 | +.color_red { | ||
239 | + color: #A61010; | ||
216 | } | 240 | } |
241 | + | ||
217 | /*审核消息*/ | 242 | /*审核消息*/ |
218 | -.audit{ | ||
219 | - margin-top: 0.66rem; | ||
220 | - width: 6.86rem; | 243 | +.audit { |
244 | + margin-top: 0.66rem; | ||
245 | + width: 6.86rem; | ||
221 | } | 246 | } |
222 | -.audit_big{ | ||
223 | - margin-top: 0.28rem; | ||
224 | - font-size: 0.24rem; | ||
225 | - font-family:MicrosoftYaHei-Bold; | ||
226 | - font-weight:bold; | ||
227 | - color:rgba(51,51,51,1); | ||
228 | - line-height: 0.36rem; | 247 | + |
248 | +.audit_big { | ||
249 | + margin-top: 0.28rem; | ||
250 | + font-size: 0.24rem; | ||
251 | + font-family: MicrosoftYaHei-Bold; | ||
252 | + font-weight: bold; | ||
253 | + color: rgba(51, 51, 51, 1); | ||
254 | + line-height: 0.36rem; | ||
229 | } | 255 | } |
230 | -.audit_big:first-child{ | ||
231 | - margin-top: 0; | 256 | + |
257 | +.audit_big:first-child { | ||
258 | + margin-top: 0; | ||
232 | } | 259 | } |
233 | -.audit_big:last-child{ | ||
234 | - margin-bottom: 0.6rem; | 260 | + |
261 | +.audit_big:last-child { | ||
262 | + margin-bottom: 0.6rem; | ||
235 | } | 263 | } |
236 | -.audit_small{ | ||
237 | 264 | ||
238 | - font-size: 0.24rem; | ||
239 | - font-family:MicrosoftYaHei; | ||
240 | - font-weight:400; | ||
241 | - color:rgba(51,51,51,1); | ||
242 | - line-height: 0.36rem; | 265 | +.audit_small { |
266 | + | ||
267 | + font-size: 0.24rem; | ||
268 | + font-family: MicrosoftYaHei; | ||
269 | + font-weight: 400; | ||
270 | + color: rgba(51, 51, 51, 1); | ||
271 | + line-height: 0.36rem; | ||
243 | } | 272 | } |
244 | 273 | ||
245 | /*菜单*/ | 274 | /*菜单*/ |
275 | +/* | ||
246 | .menu_item{ | 276 | .menu_item{ |
247 | width: 7.5rem; | 277 | width: 7.5rem; |
248 | display: flex; | 278 | display: flex; |
@@ -256,21 +286,83 @@ | @@ -256,21 +286,83 @@ | ||
256 | top: 0.8rem; | 286 | top: 0.8rem; |
257 | z-index: 999; | 287 | z-index: 999; |
258 | } | 288 | } |
259 | -.menu_item_a{ | ||
260 | - display: flex; | ||
261 | - align-items: center; | ||
262 | - justify-content: space-between; | ||
263 | - position: relative; | ||
264 | - padding: 0.38rem 0; | ||
265 | - border-bottom: 1px solid #EBEBEB; | ||
266 | - margin: 0 0.2rem; | ||
267 | -} | ||
268 | -.menu_item_a_pic{ | ||
269 | - width: 0.08rem; | ||
270 | - height: 0.16rem; | ||
271 | - display: flex; | 289 | +*/ |
290 | +.menu_item_a { | ||
291 | + display: flex; | ||
292 | + align-items: center; | ||
293 | + justify-content: space-between; | ||
294 | + position: relative; | ||
295 | + padding: 0.38rem 0; | ||
296 | + border-bottom: 1px solid #EBEBEB; | ||
297 | + margin: 0 0.2rem; | ||
298 | +} | ||
299 | + | ||
300 | +.menu_item_a_pic { | ||
301 | + width: 0.08rem; | ||
302 | + height: 0.16rem; | ||
303 | + display: flex; | ||
304 | +} | ||
305 | + | ||
306 | +.menu_item_a_pic img { | ||
307 | + width: 100%; | ||
308 | + height: 100%; | ||
309 | +} | ||
310 | + | ||
311 | +.mask { | ||
312 | + padding-top: 2.18rem; | ||
313 | +} | ||
314 | + | ||
315 | +.fit_name { | ||
316 | + width: 5.7rem; | ||
317 | + height: 4.4rem; | ||
318 | + margin: 0 auto; | ||
319 | + background: #fff; | ||
320 | + box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08); | ||
321 | + padding-bottom: .59rem | ||
322 | +} | ||
323 | + | ||
324 | +.fit_name_title { | ||
325 | + text-align: center; | ||
326 | + position: relative; | ||
327 | + font-size: .48rem; | ||
328 | + padding-top: .65rem; | ||
329 | + font-weight: bold; | ||
330 | +} | ||
331 | + | ||
332 | +.fit_name_title img { | ||
333 | + width: .3rem; | ||
334 | + height: .3rem; | ||
335 | + position: absolute; | ||
336 | + top: .23rem; | ||
337 | + right: .34rem; | ||
338 | +} | ||
339 | + | ||
340 | +.fit_name_main form { | ||
341 | + padding: 0 .85rem; | ||
342 | + margin-top: .75rem; | ||
272 | } | 343 | } |
273 | -.menu_item_a_pic img{ | ||
274 | - width: 100%; | ||
275 | - height: 100%; | 344 | + |
345 | +.fit_name_main form input { | ||
346 | + width: 100%; | ||
347 | + display: block; | ||
348 | + padding: .25rem 0; | ||
349 | + border: 0; | ||
350 | + border-bottom: .01rem solid #E8E8E8; | ||
351 | + outline: none; | ||
352 | +} | ||
353 | + | ||
354 | +.fit_name_main form p { | ||
355 | + font-size: .24rem; | ||
356 | + color: #999; | ||
357 | + margin-top: .15rem; | ||
358 | +} | ||
359 | + | ||
360 | +.fit_name_main form button { | ||
361 | + width: 100%; | ||
362 | + height: .5rem; | ||
363 | + border: 0; | ||
364 | + color: #fff; | ||
365 | + background: rgba(192, 44, 44, 1); | ||
366 | + border-radius: .04rem; | ||
367 | + outline: none; | ||
276 | } | 368 | } |
1 | +.container { | ||
2 | + width: 100%; | ||
3 | + display: flex; | ||
4 | + flex-flow: column; | ||
5 | + align-items: center; | ||
6 | + justify-content: center; | ||
1 | 7 | ||
8 | +} | ||
2 | 9 | ||
3 | -.container { | ||
4 | - width: 100%; | ||
5 | - display: flex; | ||
6 | - flex-flow: column; | ||
7 | - align-items: center; | ||
8 | - justify-content: center; | ||
9 | - | ||
10 | -} | ||
11 | -.top{ | ||
12 | - width: 7.5rem; | ||
13 | - /*height: 1.5rem;*/ | ||
14 | - background-color: #F7F7F7; | ||
15 | - display: flex; | ||
16 | - flex-flow: column; | ||
17 | - align-items: center; | ||
18 | - justify-content: center; | ||
19 | -} | ||
20 | -.top_t{ | ||
21 | - width: 6.86rem; | ||
22 | - height: 0.8rem; | ||
23 | - display: flex; | ||
24 | - align-items: center; | ||
25 | - justify-content: space-between; | ||
26 | -} | ||
27 | -.top_t_left{ | ||
28 | - width: 1.2rem; | ||
29 | - display: flex; | ||
30 | - justify-content: space-between; | ||
31 | - align-items: center; | ||
32 | -} | ||
33 | -.top_t_left_text{ | ||
34 | - font-size:0.3rem; | ||
35 | - font-family:PingFang-SC-Medium; | ||
36 | - font-weight:500; | ||
37 | - color:rgba(166,16,16,1); | ||
38 | -} | ||
39 | -.icon-caidan{ | 10 | +.top { |
11 | + width: 7.5rem; | ||
12 | + /*height: 1.5rem;*/ | ||
13 | + background-color: #F7F7F7; | ||
14 | + display: flex; | ||
15 | + flex-flow: column; | ||
16 | + align-items: center; | ||
17 | + justify-content: center; | ||
18 | +} | ||
19 | + | ||
20 | +.top_t { | ||
21 | + width: 6.86rem; | ||
22 | + height: 0.8rem; | ||
23 | + display: flex; | ||
24 | + align-items: center; | ||
25 | + justify-content: space-between; | ||
26 | +} | ||
40 | 27 | ||
28 | +.top_t_left { | ||
29 | + width: 1.2rem; | ||
30 | + display: flex; | ||
31 | + justify-content: space-between; | ||
32 | + align-items: center; | ||
41 | } | 33 | } |
34 | + | ||
35 | +.top_t_left_text { | ||
36 | + font-size: 0.3rem; | ||
37 | + font-family: PingFang-SC-Medium; | ||
38 | + font-weight: 500; | ||
39 | + color: rgba(166, 16, 16, 1); | ||
40 | +} | ||
41 | + | ||
42 | +.icon-caidan {} | ||
43 | + | ||
42 | /*中部*/ | 44 | /*中部*/ |
43 | -.top_t_middle{ | ||
44 | - width: 1.2rem; | ||
45 | - height: 0.5rem; | ||
46 | - display: flex; | 45 | +.top_t_middle { |
46 | + width: 1.2rem; | ||
47 | + height: 0.5rem; | ||
48 | + display: flex; | ||
47 | } | 49 | } |
48 | -.top_t_middle img{ | ||
49 | - width: 100%; | ||
50 | - height: 100%; | 50 | + |
51 | +.top_t_middle img { | ||
52 | + width: 100%; | ||
53 | + height: 100%; | ||
51 | } | 54 | } |
55 | + | ||
52 | /*右边*/ | 56 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | ||
55 | - display: flex; | ||
56 | - justify-content: space-between; | ||
57 | - align-items: center; | ||
58 | -} | ||
59 | -.icon-10{ | ||
60 | - position: relative; | ||
61 | -} | ||
62 | -.top_t_right_pic{ | ||
63 | - width: 0.4rem; | ||
64 | - height: 0.4rem; | ||
65 | - display: flex; | ||
66 | - -webkit-border-radius: 50%; | ||
67 | - -moz-border-radius: 50%; | ||
68 | - border-radius: 50%; | ||
69 | -} | ||
70 | -.top_t_right_pic img{ | ||
71 | - width: 100%; | ||
72 | - height: 100%; | ||
73 | - -webkit-border-radius: 50%; | ||
74 | - -moz-border-radius: 50%; | ||
75 | - border-radius: 50%; | 57 | +.top_t_right { |
58 | + display: flex; | ||
59 | + justify-content: space-between; | ||
60 | + align-items: center; | ||
76 | } | 61 | } |
62 | + | ||
63 | +.icon-10 { | ||
64 | + position: relative; | ||
65 | +} | ||
66 | + | ||
67 | +.top_t_right_pic { | ||
68 | + width: 0.4rem; | ||
69 | + height: 0.4rem; | ||
70 | + display: flex; | ||
71 | + -webkit-border-radius: 50%; | ||
72 | + -moz-border-radius: 50%; | ||
73 | + border-radius: 50%; | ||
74 | +} | ||
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 | + | ||
77 | /*-----底部------*/ | 84 | /*-----底部------*/ |
78 | -.top_d{ | ||
79 | - width: 5.56rem; | ||
80 | - display: flex; | ||
81 | - padding-bottom: 0.03rem; | ||
82 | - border-bottom: 1px solid #999999; | ||
83 | - margin: 0.3rem 0 0.2rem 0; | ||
84 | -} | ||
85 | -.top_d_input{ | ||
86 | - width: 5rem; | ||
87 | - text-align: center; | ||
88 | - border: none; | ||
89 | - outline: none; | ||
90 | - background-color: #F7F7F7; | ||
91 | - font-size: 0.3rem; | ||
92 | - box-sizing: border-box; | ||
93 | - padding: 0 0.2rem; | ||
94 | -} | ||
95 | -.top_d_input::placeholder{ | ||
96 | - color: #999999; | ||
97 | -} | ||
98 | -.mid{ | ||
99 | - width: 6.86rem; | ||
100 | - display: flex; | ||
101 | - flex-flow: column; | ||
102 | - margin-top: 0.13rem; | ||
103 | -} | ||
104 | -.mid_head{ | ||
105 | - width: 6.86rem; | ||
106 | - height: 3rem; | ||
107 | - display: flex; | ||
108 | - border-radius: 0.08rem; | ||
109 | -} | ||
110 | -.mid_head img{ | ||
111 | - width: 100%; | ||
112 | - height: 100%; | ||
113 | - border-radius: 0.08rem; | ||
114 | -} | ||
115 | -.mid_title{ | ||
116 | - margin-top: 0.6rem; | ||
117 | - width: 6.84rem; | ||
118 | - height: 2.83rem; | ||
119 | - background:rgba(255,222,37,0); | ||
120 | - border:1px solid rgba(232, 232, 232, 1); | ||
121 | - border-radius: 0.1rem; | ||
122 | - | ||
123 | - | ||
124 | - font-size: 0.24rem; | ||
125 | - font-family:PingFang-SC-Medium; | ||
126 | - font-weight:500; | ||
127 | - color:rgba(51,51,51,1); | ||
128 | - line-height: 0.36rem; | ||
129 | - -webkit-box-sizing: border-box; | ||
130 | - -moz-box-sizing: border-box; | ||
131 | - box-sizing: border-box; | ||
132 | - padding: 0.25rem 0.35rem 0.19rem 0.35rem; | ||
133 | - overflow-y: scroll; | 85 | +.top_d { |
86 | + width: 5.56rem; | ||
87 | + display: flex; | ||
88 | + padding-bottom: 0.03rem; | ||
89 | + border-bottom: 1px solid #999999; | ||
90 | + margin: 0.3rem 0 0.2rem 0; | ||
91 | +} | ||
92 | + | ||
93 | +.top_d_input { | ||
94 | + width: 5rem; | ||
95 | + text-align: center; | ||
96 | + border: none; | ||
97 | + outline: none; | ||
98 | + background-color: #F7F7F7; | ||
99 | + font-size: 0.3rem; | ||
100 | + box-sizing: border-box; | ||
101 | + padding: 0 0.2rem; | ||
102 | +} | ||
103 | + | ||
104 | +.top_d_input::placeholder { | ||
105 | + color: #999999; | ||
106 | +} | ||
107 | + | ||
108 | +.mid { | ||
109 | + width: 6.86rem; | ||
110 | + display: flex; | ||
111 | + flex-flow: column; | ||
112 | + margin-top: 0.13rem; | ||
113 | +} | ||
114 | + | ||
115 | +.mid_head { | ||
116 | + width: 6.86rem; | ||
117 | + height: 3rem; | ||
118 | + display: flex; | ||
119 | + border-radius: 0.08rem; | ||
120 | +} | ||
121 | + | ||
122 | +.mid_head img { | ||
123 | + width: 100%; | ||
124 | + height: 100%; | ||
125 | + border-radius: 0.08rem; | ||
126 | +} | ||
127 | + | ||
128 | +.mid_title { | ||
129 | + margin-top: 0.6rem; | ||
130 | + width: 6.84rem; | ||
131 | + height: 2.83rem; | ||
132 | + background: rgba(255, 222, 37, 0); | ||
133 | + border: 1px solid rgba(232, 232, 232, 1); | ||
134 | + border-radius: 0.1rem; | ||
135 | + | ||
136 | + | ||
137 | + font-size: 0.24rem; | ||
138 | + font-family: PingFang-SC-Medium; | ||
139 | + font-weight: 500; | ||
140 | + color: rgba(51, 51, 51, 1); | ||
141 | + line-height: 0.36rem; | ||
142 | + -webkit-box-sizing: border-box; | ||
143 | + -moz-box-sizing: border-box; | ||
144 | + box-sizing: border-box; | ||
145 | + padding: 0.25rem 0.35rem 0.19rem 0.35rem; | ||
146 | + overflow-y: scroll; | ||
134 | } | 147 | } |
148 | + | ||
135 | /*文本框下的介绍内容*/ | 149 | /*文本框下的介绍内容*/ |
136 | -.mid_small{ | ||
137 | - display: flex; | ||
138 | - justify-content: center; | ||
139 | - margin-top: 0.25rem; | ||
140 | -} | ||
141 | -.mid_small_left{ | ||
142 | - width: 0.6rem; | ||
143 | - font-size: 0.18rem; | ||
144 | - font-family:PingFang-SC-Medium; | ||
145 | - font-weight:500; | ||
146 | - color:rgba(153,153,153,1); | ||
147 | - line-height: 0.3rem; | ||
148 | - | ||
149 | -} | ||
150 | -.mid_small_right{ | ||
151 | - | ||
152 | - font-size: 0.18rem; | ||
153 | - font-family:PingFang-SC-Medium; | ||
154 | - font-weight:500; | ||
155 | - color:rgba(153,153,153,1); | ||
156 | - line-height: 0.3rem; | ||
157 | - margin-left: 0.21rem; | ||
158 | -} | ||
159 | -.mid_type{ | ||
160 | - display: flex; | ||
161 | - margin-top: 0.42rem; | ||
162 | - flex-flow: column; | ||
163 | -} | ||
164 | -.mid_type_title{ | ||
165 | - width: 1rem; | ||
166 | - display: flex; | ||
167 | - align-items: center; | ||
168 | - justify-content: space-between; | ||
169 | - font-size: 0.36rem; | ||
170 | - font-family:PingFang-SC-Bold; | ||
171 | - font-weight:bold; | ||
172 | - color:rgba(51,51,51,1); | ||
173 | - line-height: 0.3rem; | ||
174 | -} | ||
175 | -.mid_type_title_dot{ | ||
176 | - width: 0.14rem; | ||
177 | - height: 0.14rem; | ||
178 | - background:rgba(166,16,16,1); | ||
179 | - border-radius:50%; | ||
180 | -} | ||
181 | -.mid_type_items{ | ||
182 | - width: 6rem; | ||
183 | - display: flex; | ||
184 | - flex-wrap: wrap; | ||
185 | - margin-left: 0.4rem; | ||
186 | - justify-content: space-between; | ||
187 | -} | ||
188 | -.mid_type_items_item{ | ||
189 | - width: 1.5rem; | ||
190 | - height: 0.5rem; | ||
191 | - background:rgba(166,16,16,0); | ||
192 | - border:1px solid rgba(232, 232, 232, 1); | ||
193 | - border-radius: 0.04rem; | ||
194 | - | ||
195 | - line-height: 0.5rem; | ||
196 | - text-align: center; | ||
197 | - font-size: 0.24rem; | ||
198 | - font-family:MicrosoftYaHei; | ||
199 | - font-weight:400; | ||
200 | - color:rgba(51,51,51,1); | ||
201 | - | ||
202 | - margin-top: 0.2rem; | ||
203 | - | ||
204 | -} | ||
205 | -.mid_type_items_title{ | ||
206 | - width: 6.1rem; | ||
207 | - height: 0.5rem; | ||
208 | - display: flex; | ||
209 | - | ||
210 | - margin-top: 0.27rem; | ||
211 | - background:rgba(232,232,232,0); | ||
212 | - border:1px solid rgba(232, 232, 232, 1); | ||
213 | - border-radius:0.04rem; | ||
214 | -} | ||
215 | -.mid_type_items_title input{ | ||
216 | - font-size: 0.24rem; | ||
217 | - width: 100%; | ||
218 | - outline: none; | ||
219 | - border: none; | ||
220 | - box-sizing: border-box; | ||
221 | - padding: 0 0.14rem; | ||
222 | -} | ||
223 | - | ||
224 | -.mid_type_items_area{ | ||
225 | - margin-top: 0.2rem; | ||
226 | - width: 6.1rem; | ||
227 | - height: 2.41rem; | ||
228 | - background:rgba(232,232,232,0); | ||
229 | - border:1px solid rgba(232, 232, 232, 1); | ||
230 | - border-radius: 0.04rem; | ||
231 | - | ||
232 | -} | ||
233 | -.mid_type_items_area textarea{ | ||
234 | - width: 100%; | ||
235 | - height: 100%; | ||
236 | - border: none; | ||
237 | - outline: none; | ||
238 | - box-sizing: border-box; | ||
239 | - padding: 0.15rem 0.15rem; | ||
240 | -} | ||
241 | -.mid_type_items_area textarea::placeholder{ | ||
242 | - | ||
243 | - font-size: 0.24rem; | ||
244 | - font-family:PingFang-SC-Medium; | ||
245 | - font-weight:500; | ||
246 | - color:rgba(153,153,153,1); | ||
247 | - line-height: 0.3rem; | 150 | +.mid_small { |
151 | + display: flex; | ||
152 | + justify-content: center; | ||
153 | + margin-top: 0.25rem; | ||
154 | +} | ||
155 | + | ||
156 | +.mid_small_left { | ||
157 | + width: 0.6rem; | ||
158 | + font-size: 0.18rem; | ||
159 | + font-family: PingFang-SC-Medium; | ||
160 | + font-weight: 500; | ||
161 | + color: rgba(153, 153, 153, 1); | ||
162 | + line-height: 0.3rem; | ||
163 | + | ||
164 | +} | ||
165 | + | ||
166 | +.mid_small_right { | ||
167 | + | ||
168 | + font-size: 0.18rem; | ||
169 | + font-family: PingFang-SC-Medium; | ||
170 | + font-weight: 500; | ||
171 | + color: rgba(153, 153, 153, 1); | ||
172 | + line-height: 0.3rem; | ||
173 | + margin-left: 0.21rem; | ||
174 | +} | ||
175 | + | ||
176 | +.mid_type { | ||
177 | + display: flex; | ||
178 | + margin-top: 0.42rem; | ||
179 | + flex-flow: column; | ||
180 | +} | ||
181 | + | ||
182 | +.mid_type_title { | ||
183 | + width: 1rem; | ||
184 | + display: flex; | ||
185 | + align-items: center; | ||
186 | + justify-content: space-between; | ||
187 | + font-size: 0.36rem; | ||
188 | + font-family: PingFang-SC-Bold; | ||
189 | + font-weight: bold; | ||
190 | + color: rgba(51, 51, 51, 1); | ||
191 | + line-height: 0.3rem; | ||
192 | +} | ||
193 | + | ||
194 | +.mid_type_title_dot { | ||
195 | + width: 0.14rem; | ||
196 | + height: 0.14rem; | ||
197 | + background: rgba(166, 16, 16, 1); | ||
198 | + border-radius: 50%; | ||
199 | +} | ||
200 | + | ||
201 | +.mid_type_items { | ||
202 | + width: 6rem; | ||
203 | + display: flex; | ||
204 | + flex-wrap: wrap; | ||
205 | + margin-left: 0.4rem; | ||
206 | + justify-content: space-between; | ||
248 | } | 207 | } |
208 | + | ||
209 | +.mid_type_items_item { | ||
210 | + width: 1.5rem; | ||
211 | + height: 0.5rem; | ||
212 | + background: rgba(166, 16, 16, 0); | ||
213 | + border: 1px solid rgba(232, 232, 232, 1); | ||
214 | + border-radius: 0.1rem; | ||
215 | + | ||
216 | + line-height: 0.5rem; | ||
217 | + text-align: center; | ||
218 | + font-size: 0.24rem; | ||
219 | + font-family: MicrosoftYaHei; | ||
220 | + font-weight: 400; | ||
221 | + color: rgba(51, 51, 51, 1); | ||
222 | + | ||
223 | + margin-top: 0.2rem; | ||
224 | + | ||
225 | +} | ||
226 | + | ||
227 | +.mid_type_items_item_active { | ||
228 | + background: #A61010; | ||
229 | + color: #fff; | ||
230 | +} | ||
231 | + | ||
232 | +.mid_type_items_title { | ||
233 | + width: 6.1rem; | ||
234 | + height: 0.5rem; | ||
235 | + display: flex; | ||
236 | + | ||
237 | + margin-top: 0.27rem; | ||
238 | + background: rgba(232, 232, 232, 0); | ||
239 | + border: 1px solid rgba(232, 232, 232, 1); | ||
240 | + border-radius: 0.04rem; | ||
241 | +} | ||
242 | + | ||
243 | +.mid_type_items_title input { | ||
244 | + font-size: 0.24rem; | ||
245 | + width: 100%; | ||
246 | + outline: none; | ||
247 | + border: none; | ||
248 | + box-sizing: border-box; | ||
249 | + padding: 0 0.14rem; | ||
250 | +} | ||
251 | + | ||
252 | +.mid_type_items_area { | ||
253 | + margin-top: 0.2rem; | ||
254 | + width: 6.1rem; | ||
255 | + height: 2.41rem; | ||
256 | + background: rgba(232, 232, 232, 0); | ||
257 | + border: 1px solid rgba(232, 232, 232, 1); | ||
258 | + border-radius: 0.04rem; | ||
259 | + | ||
260 | +} | ||
261 | + | ||
262 | +.mid_type_items_area textarea { | ||
263 | + width: 100%; | ||
264 | + height: 100%; | ||
265 | + border: none; | ||
266 | + outline: none; | ||
267 | + resize: none; | ||
268 | + box-sizing: border-box; | ||
269 | + padding: 0.15rem 0.15rem; | ||
270 | +} | ||
271 | + | ||
272 | +.mid_type_items_area textarea::placeholder { | ||
273 | + | ||
274 | + font-size: 0.24rem; | ||
275 | + font-family: PingFang-SC-Medium; | ||
276 | + font-weight: 500; | ||
277 | + color: rgba(153, 153, 153, 1); | ||
278 | + line-height: 0.3rem; | ||
279 | +} | ||
280 | + | ||
249 | /*图片*/ | 281 | /*图片*/ |
250 | -.mid_type_intro{ | ||
251 | - margin-left: 0.3rem; | ||
252 | - font-size: 0.18rem; | ||
253 | - font-family:PingFang-SC-Medium; | ||
254 | - font-weight:500; | ||
255 | - color:rgba(153,153,153,1); | ||
256 | - line-height: 0.4rem; | ||
257 | -} | ||
258 | -.mid_pic_items{ | ||
259 | - display: flex; | ||
260 | - flex-wrap: wrap; | ||
261 | - margin-bottom: 0.3rem; | ||
262 | -} | ||
263 | -.mid_pic_item{ | ||
264 | - display: flex; | ||
265 | - width: 2.93rem; | ||
266 | - height: 1.7rem; | ||
267 | - margin-left: 0.3rem; | ||
268 | - margin-top: 0.3rem; | ||
269 | - position: relative; | ||
270 | -} | ||
271 | -.mid_pic_item img{ | ||
272 | - width: 100%; | ||
273 | - height: 100%; | ||
274 | -} | ||
275 | -.close_button{ | ||
276 | - width: 0.3rem; | ||
277 | - height: 0.3rem; | ||
278 | - background-color: #EB3941; | ||
279 | - border-radius: 50%; | ||
280 | - position: absolute; | ||
281 | - right: -0.16rem; | ||
282 | - top: -0.1rem; | ||
283 | - display: flex; | ||
284 | - align-items: center; | ||
285 | - justify-content: center; | ||
286 | -} | ||
287 | -.mid_pic_set{ | ||
288 | - width: 2.93rem; | ||
289 | - height: 1.7rem; | ||
290 | - background:rgba(232,232,232,0); | ||
291 | - border:2px dashed rgba(232,232,232,1); | ||
292 | - margin-left: 0.3rem; | ||
293 | - margin-top: 0.3rem; | ||
294 | - display: flex; | ||
295 | - align-items: center; | ||
296 | - justify-content: center; | ||
297 | -} | ||
298 | -.contact_way{ | ||
299 | - width: 1.7rem; | ||
300 | -} | ||
301 | -.mid_type_items_title input::placeholder{ | ||
302 | - | ||
303 | - font-size: 0.24rem; | ||
304 | - font-family:PingFang-SC-Medium; | ||
305 | - font-weight:500; | ||
306 | - color: #999999; | ||
307 | - line-height: 0.24rem; | ||
308 | -} | ||
309 | -.mid_type_items_sub{ | ||
310 | - margin: 0.65rem 0; | ||
311 | - width: 3.5rem; | ||
312 | - height: 0.5rem; | ||
313 | - line-height: 0.5rem; | ||
314 | - background:rgba(192,44,44,1); | ||
315 | - border-radius: 0.04rem; | ||
316 | - | ||
317 | - font-size: 0.26rem; | ||
318 | - font-weight: bold; | ||
319 | - text-align: center; | ||
320 | - color: #ffffff; | ||
321 | - | ||
322 | -} | ||
323 | -.contact_mid{ | ||
324 | - | ||
325 | - display: flex; | ||
326 | - align-items: center; | ||
327 | - justify-content: center; | 282 | +.mid_type_intro { |
283 | + margin-left: 0.3rem; | ||
284 | + font-size: 0.18rem; | ||
285 | + font-family: PingFang-SC-Medium; | ||
286 | + font-weight: 500; | ||
287 | + color: rgba(153, 153, 153, 1); | ||
288 | + line-height: 0.4rem; | ||
289 | +} | ||
290 | + | ||
291 | +.mid_pic_items { | ||
292 | + width: 6.13rem; | ||
293 | + margin: 0 auto; | ||
294 | + display: flex; | ||
295 | + justify-content: space-between; | ||
296 | + flex-wrap: wrap; | ||
297 | + margin-bottom: 0.3rem; | ||
298 | +} | ||
299 | + | ||
300 | +.mid_pic_item { | ||
301 | + display: flex; | ||
302 | + width: 2.93rem; | ||
303 | + height: 1.7rem; | ||
304 | + /* margin-left: 0.3rem;*/ | ||
305 | + margin-top: 0.3rem; | ||
306 | + position: relative; | ||
307 | +} | ||
308 | + | ||
309 | +.mid_pic_item img { | ||
310 | + width: 100%; | ||
311 | + height: 100%; | ||
312 | +} | ||
313 | + | ||
314 | +.close_button { | ||
315 | + width: 0.3rem; | ||
316 | + height: 0.3rem; | ||
317 | + background-color: #EB3941; | ||
318 | + border-radius: 50%; | ||
319 | + position: absolute; | ||
320 | + right: -0.16rem; | ||
321 | + top: -0.1rem; | ||
322 | + display: flex; | ||
323 | + align-items: center; | ||
324 | + justify-content: center; | ||
325 | +} | ||
326 | + | ||
327 | +.mid_pic_set { | ||
328 | + width: 2.93rem; | ||
329 | + height: 1.7rem; | ||
330 | + background: rgba(232, 232, 232, 0); | ||
331 | + border: 2px dashed rgba(232, 232, 232, 1); | ||
332 | + /* margin-left: 0.3rem;*/ | ||
333 | + margin-top: 0.3rem; | ||
334 | + display: flex; | ||
335 | + align-items: center; | ||
336 | + justify-content: center; | ||
337 | +} | ||
338 | + | ||
339 | +.contact_way { | ||
340 | + width: 1.7rem; | ||
341 | +} | ||
342 | + | ||
343 | +.mid_type_items_title input::placeholder { | ||
344 | + | ||
345 | + font-size: 0.24rem; | ||
346 | + font-family: PingFang-SC-Medium; | ||
347 | + font-weight: 500; | ||
348 | + color: #999999; | ||
349 | + line-height: 0.24rem; | ||
350 | +} | ||
351 | + | ||
352 | +.mid_type_items_sub { | ||
353 | + margin: 0.65rem 0; | ||
354 | + width: 3.5rem; | ||
355 | + height: 0.5rem; | ||
356 | + line-height: 0.5rem; | ||
357 | + background: rgba(192, 44, 44, 1); | ||
358 | + border-radius: 0.04rem; | ||
359 | + | ||
360 | + font-size: 0.26rem; | ||
361 | + font-weight: bold; | ||
362 | + text-align: center; | ||
363 | + color: #ffffff; | ||
364 | + | ||
365 | +} | ||
366 | + | ||
367 | +.contact_mid { | ||
368 | + | ||
369 | + display: flex; | ||
370 | + align-items: c·enter; | ||
371 | + justify-content: center; | ||
328 | } | 372 | } |
329 | 373 | ||
330 | /*菜单*/ | 374 | /*菜单*/ |
331 | -.menu_item{ | ||
332 | - width: 7.5rem; | ||
333 | - display: flex; | ||
334 | - flex-flow: column; | ||
335 | - font-size: 0.24rem; | ||
336 | - font-weight: bold; | ||
337 | - background-color: #F7F7F7; | ||
338 | - position: absolute; | ||
339 | - left: 0; | ||
340 | - bottom: 0; | ||
341 | - top: 0.8rem; | ||
342 | - z-index: 999; | ||
343 | -} | ||
344 | -.menu_item_a{ | ||
345 | - display: flex; | ||
346 | - align-items: center; | ||
347 | - justify-content: space-between; | ||
348 | - position: relative; | ||
349 | - padding: 0.38rem 0; | ||
350 | - border-bottom: 1px solid #EBEBEB; | ||
351 | - margin: 0 0.2rem; | ||
352 | -} | ||
353 | -.menu_item_a_pic{ | ||
354 | - width: 0.08rem; | ||
355 | - height: 0.16rem; | ||
356 | - display: flex; | ||
357 | -} | ||
358 | -.menu_item_a_pic img{ | ||
359 | - width: 100%; | ||
360 | - height: 100%; | 375 | + |
376 | + | ||
377 | +.menu_item_a { | ||
378 | + display: flex; | ||
379 | + align-items: center; | ||
380 | + justify-content: space-between; | ||
381 | + position: relative; | ||
382 | + padding: 0.38rem 0; | ||
383 | + border-bottom: 1px solid #EBEBEB; | ||
384 | + margin: 0 0.2rem; | ||
361 | } | 385 | } |
362 | 386 | ||
387 | +.menu_item_a_pic { | ||
388 | + width: 0.08rem; | ||
389 | + height: 0.16rem; | ||
390 | + display: flex; | ||
391 | +} | ||
363 | 392 | ||
393 | +.menu_item_a_pic img { | ||
394 | + width: 100%; | ||
395 | + height: 100%; | ||
396 | +} |
1 | - | 1 | + |
2 | 2 | ||
3 | .container { | 3 | .container { |
4 | width: 100%; | 4 | width: 100%; |
@@ -51,7 +51,6 @@ | @@ -51,7 +51,6 @@ | ||
51 | } | 51 | } |
52 | /*右边*/ | 52 | /*右边*/ |
53 | .top_t_right{ | 53 | .top_t_right{ |
54 | - width: 1.2rem; | ||
55 | display: flex; | 54 | display: flex; |
56 | justify-content: space-between; | 55 | justify-content: space-between; |
57 | align-items: center; | 56 | align-items: center; |
@@ -243,8 +242,10 @@ | @@ -243,8 +242,10 @@ | ||
243 | } | 242 | } |
244 | .item_pic{ | 243 | .item_pic{ |
245 | width: 6.86rem; | 244 | width: 6.86rem; |
245 | + flex-wrap: wrap; | ||
246 | display: flex; | 246 | display: flex; |
247 | justify-content: space-between; | 247 | justify-content: space-between; |
248 | + margin-top: .3rem; | ||
248 | } | 249 | } |
249 | .pic_box{ | 250 | .pic_box{ |
250 | width: 3.2rem; | 251 | width: 3.2rem; |
@@ -256,6 +257,7 @@ | @@ -256,6 +257,7 @@ | ||
256 | flex-flow: column; | 257 | flex-flow: column; |
257 | align-items: center; | 258 | align-items: center; |
258 | justify-content: center; | 259 | justify-content: center; |
260 | + margin-bottom: .3rem; | ||
259 | } | 261 | } |
260 | .pic_box_top{ | 262 | .pic_box_top{ |
261 | width: 3.2rem; | 263 | width: 3.2rem; |
@@ -365,14 +367,14 @@ | @@ -365,14 +367,14 @@ | ||
365 | .mask{ | 367 | .mask{ |
366 | width: 7.5rem; | 368 | width: 7.5rem; |
367 | height: 100%; | 369 | height: 100%; |
368 | - background-color: #ffffff; | ||
369 | - opacity: 0.9; | 370 | + background-color: rgba(255,255,255,0.9); |
370 | position: fixed; | 371 | position: fixed; |
371 | top: 1.69rem; | 372 | top: 1.69rem; |
372 | /*top: 0;*/ | 373 | /*top: 0;*/ |
373 | - z-index: 999; | 374 | + z-index: 9; |
374 | display: flex; | 375 | display: flex; |
375 | - align-items: center; | 376 | +/* align-items: center;*/ |
377 | + padding-top: .54rem; | ||
376 | overflow-y: hidden; | 378 | overflow-y: hidden; |
377 | } | 379 | } |
378 | .pop{ | 380 | .pop{ |
@@ -488,6 +490,10 @@ | @@ -488,6 +490,10 @@ | ||
488 | .month_item{ | 490 | .month_item{ |
489 | width: 70%; | 491 | width: 70%; |
490 | display: flex; | 492 | display: flex; |
491 | - justify-content: space-between; | 493 | + justify-content: space-between; |
492 | } | 494 | } |
493 | 495 | ||
496 | +input::-webkit-search-cancel-button { | ||
497 | +/* display: none;*/ | ||
498 | + color: #000; | ||
499 | +} |
1 | 1 | ||
2 | - | ||
3 | -.container { | ||
4 | - width: 100%; | ||
5 | - display: flex; | ||
6 | - flex-flow: column; | ||
7 | - align-items: center; | ||
8 | - justify-content: center; | ||
9 | - | ||
10 | -} | ||
11 | -.top{ | ||
12 | - width: 7.5rem; | ||
13 | - /*height: 1.5rem;*/ | ||
14 | - background-color: #F7F7F7; | ||
15 | - display: flex; | ||
16 | - flex-flow: column; | ||
17 | - align-items: center; | ||
18 | - justify-content: center; | ||
19 | -} | ||
20 | -.top_t{ | ||
21 | - width: 6.86rem; | ||
22 | - height: 0.8rem; | ||
23 | - display: flex; | ||
24 | - align-items: center; | ||
25 | - justify-content: space-between; | ||
26 | -} | ||
27 | -.top_t_left{ | ||
28 | - width: 1.2rem; | ||
29 | - display: flex; | ||
30 | - justify-content: space-between; | ||
31 | - align-items: center; | ||
32 | -} | ||
33 | -.top_t_left_text{ | ||
34 | - font-size:0.3rem; | ||
35 | - font-family:PingFang-SC-Medium; | ||
36 | - font-weight:500; | ||
37 | - color:rgba(166,16,16,1); | ||
38 | -} | ||
39 | -.icon-caidan{ | ||
40 | - | ||
41 | -} | ||
42 | -/*中部*/ | ||
43 | -.top_t_middle{ | ||
44 | - width: 1.2rem; | ||
45 | - height: 0.5rem; | ||
46 | - display: flex; | ||
47 | -} | ||
48 | -.top_t_middle img{ | ||
49 | - width: 100%; | ||
50 | - height: 100%; | ||
51 | -} | ||
52 | -/*右边*/ | ||
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | ||
55 | - display: flex; | ||
56 | - justify-content: space-between; | ||
57 | - align-items: center; | ||
58 | -} | ||
59 | -.icon-10{ | ||
60 | - position: relative; | ||
61 | -} | ||
62 | -.top_t_right_pic{ | ||
63 | - width: 0.4rem; | ||
64 | - height: 0.4rem; | ||
65 | - display: flex; | ||
66 | - -webkit-border-radius: 50%; | ||
67 | - -moz-border-radius: 50%; | ||
68 | - border-radius: 50%; | ||
69 | -} | ||
70 | -.top_t_right_pic img{ | ||
71 | - width: 100%; | ||
72 | - height: 100%; | ||
73 | - -webkit-border-radius: 50%; | ||
74 | - -moz-border-radius: 50%; | ||
75 | - border-radius: 50%; | ||
76 | -} | ||
77 | -/*-----底部------*/ | ||
78 | -.top_d{ | ||
79 | - width: 5.56rem; | ||
80 | - display: flex; | ||
81 | - padding-bottom: 0.03rem; | ||
82 | - border-bottom: 1px solid #999999; | ||
83 | - margin: 0.3rem 0 0.2rem 0; | ||
84 | -} | ||
85 | -.top_d_input{ | ||
86 | - width: 5rem; | ||
87 | - text-align: center; | ||
88 | - border: none; | ||
89 | - outline: none; | ||
90 | - background-color: #F7F7F7; | ||
91 | - font-size: 0.3rem; | ||
92 | - box-sizing: border-box; | ||
93 | - padding: 0 0.2rem; | ||
94 | -} | ||
95 | -.top_d_input::placeholder{ | ||
96 | - color: #999999; | ||
97 | -} | ||
98 | - | ||
99 | -.mid{ | ||
100 | - margin-top: 0.6rem; | ||
101 | - display: flex; | ||
102 | - width: 6.2rem; | ||
103 | - flex-flow: column; | ||
104 | -} | ||
105 | .mid_title{ | 2 | .mid_title{ |
106 | 3 | ||
107 | font-size: 0.48rem; | 4 | font-size: 0.48rem; |
css/public.css
0 → 100644
1 | +* { | ||
2 | + margin: 0; | ||
3 | + padding: 0; | ||
4 | +} | ||
5 | + | ||
6 | +a { | ||
7 | + text-decoration: none; | ||
8 | + color: #333; | ||
9 | +} | ||
10 | + | ||
11 | +body { | ||
12 | + padding-top: 1.8rem; | ||
13 | +} | ||
14 | + | ||
15 | +.container { | ||
16 | + width: 100%; | ||
17 | + display: flex; | ||
18 | + flex-flow: column; | ||
19 | + align-items: center; | ||
20 | + justify-content: center; | ||
21 | + | ||
22 | +} | ||
23 | + | ||
24 | +.top { | ||
25 | + width: 7.5rem; | ||
26 | + /*height: 1.5rem;*/ | ||
27 | + background-color: #F7F7F7; | ||
28 | + display: flex; | ||
29 | + flex-flow: column; | ||
30 | + align-items: center; | ||
31 | + justify-content: center; | ||
32 | + position: fixed; | ||
33 | + top: 0; | ||
34 | + z-index: 99; | ||
35 | +} | ||
36 | + | ||
37 | +.top_t_right_text { | ||
38 | + font-size: 0.2rem; | ||
39 | + font-weight: 500; | ||
40 | + color: #333333; | ||
41 | + display: -webkit-flex; | ||
42 | + display: -moz-flex; | ||
43 | + display: -ms-flex; | ||
44 | + display: -o-flex; | ||
45 | + display: flex; | ||
46 | + justify-content: flex-start; | ||
47 | + align-items: center; | ||
48 | +} | ||
49 | + | ||
50 | +.top_t { | ||
51 | + width: 6.86rem; | ||
52 | + height: 0.8rem; | ||
53 | + display: flex; | ||
54 | + align-items: center; | ||
55 | + justify-content: space-between; | ||
56 | +} | ||
57 | + | ||
58 | +.top_t_left { | ||
59 | + width: 1.2rem; | ||
60 | +/* width:max-content;*/ | ||
61 | + display: flex; | ||
62 | + justify-content: space-between; | ||
63 | + align-items: center; | ||
64 | +} | ||
65 | + | ||
66 | +.top_t_left_text { | ||
67 | + font-size: 0.3rem; | ||
68 | + font-family: PingFang-SC-Medium; | ||
69 | + font-weight: 500; | ||
70 | + color: rgba(166, 16, 16, 1); | ||
71 | +} | ||
72 | + | ||
73 | +.icon-caidan {} | ||
74 | + | ||
75 | +/*中部*/ | ||
76 | +.top_t_middle { | ||
77 | + width: 1.2rem; | ||
78 | + height: 0.5rem; | ||
79 | + display: flex; | ||
80 | +} | ||
81 | + | ||
82 | +.top_t_middle img { | ||
83 | + width: 100%; | ||
84 | + height: 100%; | ||
85 | +} | ||
86 | + | ||
87 | +/*右边*/ | ||
88 | +.top_t_right { | ||
89 | + display: flex; | ||
90 | + justify-content: space-between; | ||
91 | + align-items: center; | ||
92 | +} | ||
93 | + | ||
94 | +.icon-10 { | ||
95 | + position: relative; | ||
96 | + margin-right: .1rem; | ||
97 | +} | ||
98 | + | ||
99 | +.top_t_right_pic { | ||
100 | + width: 0.4rem; | ||
101 | + height: 0.4rem; | ||
102 | + display: flex; | ||
103 | + -webkit-border-radius: 50%; | ||
104 | + -moz-border-radius: 50%; | ||
105 | + border-radius: 50%; | ||
106 | + margin-left: .5rem; | ||
107 | + position: relative; | ||
108 | +} | ||
109 | +.head_right_nav{ | ||
110 | + width: 2.14rem; | ||
111 | + position: absolute; | ||
112 | + top: 160%; | ||
113 | + right: 0; | ||
114 | + background:rgba(255,255,255,1); | ||
115 | +box-shadow:0px 1px 6px 0px rgba(102,102,102,0.14); | ||
116 | +border-radius:10px; | ||
117 | + display: none; | ||
118 | + | ||
119 | +} | ||
120 | +.head_right_item a{ | ||
121 | + display: block; | ||
122 | + height: .8rem; | ||
123 | + font-size: .26rem; | ||
124 | + padding-left: .27rem; | ||
125 | + line-height: .8rem; | ||
126 | +} | ||
127 | +.top_t_right_pic img { | ||
128 | + width: 100%; | ||
129 | + height: 100%; | ||
130 | + -webkit-border-radius: 50%; | ||
131 | + -moz-border-radius: 50%; | ||
132 | + border-radius: 50%; | ||
133 | +} | ||
134 | + | ||
135 | +/*-----底部------*/ | ||
136 | +.top_d { | ||
137 | + width: 5.56rem; | ||
138 | + display: flex; | ||
139 | + padding-bottom: 0.03rem; | ||
140 | + border-bottom: 1px solid #999999; | ||
141 | + margin: 0.3rem 0 0.2rem 0; | ||
142 | +} | ||
143 | + | ||
144 | +.top_d_input { | ||
145 | + width: 5rem; | ||
146 | + text-align: center; | ||
147 | + border: none; | ||
148 | + outline: none; | ||
149 | + background-color: #F7F7F7; | ||
150 | + font-size: 0.3rem; | ||
151 | + box-sizing: border-box; | ||
152 | + padding: 0 0.2rem; | ||
153 | +} | ||
154 | + | ||
155 | +.top_d_input::placeholder { | ||
156 | + color: #999999; | ||
157 | +} | ||
158 | + | ||
159 | +.mid { | ||
160 | + margin-top: 0.6rem; | ||
161 | + display: flex; | ||
162 | + width: 6.2rem; | ||
163 | + flex-flow: column; | ||
164 | +} | ||
165 | +.swiper-pagination-bullet{ | ||
166 | + background:rgba(255,255,255,0.61) !important; | ||
167 | +} | ||
168 | +.swiper-pagination-bullet-active{ | ||
169 | + background: #A61010 !important; | ||
170 | +} | ||
171 | +/*菜单*/ | ||
172 | +.menu_item { | ||
173 | + width: 7.5rem; | ||
174 | + display: flex; | ||
175 | + flex-flow: column; | ||
176 | + font-size: 0.24rem; | ||
177 | + font-weight: bold; | ||
178 | + background-color: #F7F7F7; | ||
179 | + position: fixed; | ||
180 | + left: 0; | ||
181 | + bottom: 0; | ||
182 | + top: 0.8rem; | ||
183 | + z-index: 1999; | ||
184 | +} | ||
185 | + | ||
186 | +.menu_item_a { | ||
187 | + display: flex; | ||
188 | + align-items: center; | ||
189 | + justify-content: space-between; | ||
190 | + position: relative; | ||
191 | + padding: 0.38rem 0; | ||
192 | + border-bottom: 1px solid #EBEBEB; | ||
193 | + margin: 0 0.2rem; | ||
194 | +} | ||
195 | + | ||
196 | +.menu_item_a_pic { | ||
197 | + width: 0.08rem; | ||
198 | + height: 0.16rem; | ||
199 | + display: flex; | ||
200 | +} | ||
201 | + | ||
202 | +.menu_item_a_pic img { | ||
203 | + width: 100%; | ||
204 | + height: 100%; | ||
205 | +} | ||
206 | + | ||
207 | +.banner { | ||
208 | + position: relative; | ||
209 | +} | ||
210 | + | ||
211 | +.growl { | ||
212 | + position: fixed; | ||
213 | + top: 50%; | ||
214 | + left: 42%; | ||
215 | + width:max-content; | ||
216 | + height: .66rem; | ||
217 | + z-index: 9999999; | ||
218 | + text-align: center; | ||
219 | +} | ||
220 | + | ||
221 | +.alert { | ||
222 | + padding: .15rem; | ||
223 | + margin-bottom: .2rem; | ||
224 | + border-radius: .04rem; | ||
225 | +} | ||
226 | + | ||
227 | +.message_success { | ||
228 | + color: #fff; | ||
229 | + font-size: .14rem; | ||
230 | + | ||
231 | +} | ||
232 | + | ||
233 | +.growl-item { | ||
234 | + border-radius: .08rem; | ||
235 | + background-color: rgba(0, 0, 0, 0.8); | ||
236 | + border-color: #fff; | ||
237 | + margin-top: -.88rem; | ||
238 | + | ||
239 | +} | ||
240 | +.more{ | ||
241 | + width: .8rem; | ||
242 | + margin: 0 auto; | ||
243 | + margin-top: .25rem; | ||
244 | + padding: .11rem 0; | ||
245 | + border-bottom: .01rem solid #A61010; | ||
246 | +} | ||
247 | +.more a{ | ||
248 | + display: block; | ||
249 | + color: #A61010; | ||
250 | + font-size: .14rem; | ||
251 | + text-align: center; | ||
252 | +} |
@@ -52,8 +52,7 @@ | @@ -52,8 +52,7 @@ | ||
52 | height: 100%; | 52 | height: 100%; |
53 | } | 53 | } |
54 | /*右边*/ | 54 | /*右边*/ |
55 | -.top_t_right{ | ||
56 | - width: 1.2rem; | 55 | +.top_t_right{ |
57 | display: flex; | 56 | display: flex; |
58 | justify-content: space-between; | 57 | justify-content: space-between; |
59 | align-items: center; | 58 | align-items: center; |
@@ -50,8 +50,7 @@ | @@ -50,8 +50,7 @@ | ||
50 | height: 100%; | 50 | height: 100%; |
51 | } | 51 | } |
52 | /*右边*/ | 52 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | 53 | +.top_t_right{ |
55 | display: flex; | 54 | display: flex; |
56 | justify-content: space-between; | 55 | justify-content: space-between; |
57 | align-items: center; | 56 | align-items: center; |
1 | - | ||
2 | - | 1 | +body{ |
2 | + padding-bottom: 1.6rem; | ||
3 | +} | ||
4 | +.mid{ | ||
5 | + flex-flow: unset !important; | ||
6 | +} | ||
3 | .container { | 7 | .container { |
4 | width: 100%; | 8 | width: 100%; |
5 | display: flex; | 9 | display: flex; |
@@ -50,8 +54,7 @@ | @@ -50,8 +54,7 @@ | ||
50 | height: 100%; | 54 | height: 100%; |
51 | } | 55 | } |
52 | /*右边*/ | 56 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | 57 | +.top_t_right{ |
55 | display: flex; | 58 | display: flex; |
56 | justify-content: space-between; | 59 | justify-content: space-between; |
57 | align-items: center; | 60 | align-items: center; |
@@ -187,7 +190,7 @@ | @@ -187,7 +190,7 @@ | ||
187 | /*line-height:24px;*/ | 190 | /*line-height:24px;*/ |
188 | } | 191 | } |
189 | .bottom_top_b_att{ | 192 | .bottom_top_b_att{ |
190 | - width: 1rem; | 193 | + width: 1.2rem; |
191 | height: 0.28rem; | 194 | height: 0.28rem; |
192 | background: #C02C2C; | 195 | background: #C02C2C; |
193 | border-radius: 0.04rem; | 196 | border-radius: 0.04rem; |
@@ -205,10 +208,14 @@ | @@ -205,10 +208,14 @@ | ||
205 | height: 1.58rem; | 208 | height: 1.58rem; |
206 | position: fixed; | 209 | position: fixed; |
207 | bottom: 0; | 210 | bottom: 0; |
211 | + background-image: url(../images/big_bg.png); | ||
212 | + background-repeat: no-repeat; | ||
213 | + background-size: cover; | ||
208 | } | 214 | } |
209 | .menu_top{ | 215 | .menu_top{ |
210 | display: flex; | 216 | display: flex; |
211 | justify-content: space-around; | 217 | justify-content: space-around; |
218 | + padding: 0 0.3rem; | ||
212 | } | 219 | } |
213 | .menu_top_item{ | 220 | .menu_top_item{ |
214 | display: flex; | 221 | display: flex; |
@@ -50,8 +50,7 @@ | @@ -50,8 +50,7 @@ | ||
50 | height: 100%; | 50 | height: 100%; |
51 | } | 51 | } |
52 | /*右边*/ | 52 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | 53 | +.top_t_right{ |
55 | display: flex; | 54 | display: flex; |
56 | justify-content: space-between; | 55 | justify-content: space-between; |
57 | align-items: center; | 56 | align-items: center; |
@@ -50,8 +50,7 @@ | @@ -50,8 +50,7 @@ | ||
50 | height: 100%; | 50 | height: 100%; |
51 | } | 51 | } |
52 | /*右边*/ | 52 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | 53 | +.top_t_right{ |
55 | display: flex; | 54 | display: flex; |
56 | justify-content: space-between; | 55 | justify-content: space-between; |
57 | align-items: center; | 56 | align-items: center; |
@@ -324,7 +323,8 @@ | @@ -324,7 +323,8 @@ | ||
324 | /*分享*/ | 323 | /*分享*/ |
325 | .share_function{ | 324 | .share_function{ |
326 | width: 3.2rem; | 325 | width: 3.2rem; |
327 | - height: 0.8rem; | 326 | +/* height: 0.8rem;*/ |
327 | + padding: .12rem 0; | ||
328 | display: flex; | 328 | display: flex; |
329 | justify-content: space-around; | 329 | justify-content: space-around; |
330 | background-color: #fff; | 330 | background-color: #fff; |
@@ -391,7 +391,8 @@ | @@ -391,7 +391,8 @@ | ||
391 | line-height: 0.5rem; | 391 | line-height: 0.5rem; |
392 | } | 392 | } |
393 | .comment_item_right_text{ | 393 | .comment_item_right_text{ |
394 | - font-size: 0.16rem; | 394 | + font-size: 0.18rem; |
395 | + font-weight: 500; | ||
395 | margin-top: 0.1rem; | 396 | margin-top: 0.1rem; |
396 | line-height: 0.3rem; | 397 | line-height: 0.3rem; |
397 | } | 398 | } |
css/wiki.css
0 → 100644
1 | +body{ | ||
2 | + padding-bottom: 1rem; | ||
3 | +} | ||
4 | +.Figure_title { | ||
5 | + text-align: center; | ||
6 | + margin-top: .43rem; | ||
7 | + margin-bottom: .26rem; | ||
8 | +} | ||
9 | + | ||
10 | +.Figure_title p { | ||
11 | + font-size: .14rem; | ||
12 | + color: #A61010; | ||
13 | + font-weight: 500; | ||
14 | + margin-bottom: .07rem; | ||
15 | +} | ||
16 | + | ||
17 | +.Figure_title h2 { | ||
18 | + font-size: .3rem; | ||
19 | + color: #333; | ||
20 | + font-weight: bold; | ||
21 | +} | ||
22 | + | ||
23 | +.Figure_list { | ||
24 | + display: -webkit-flex; | ||
25 | + display: -moz-flex; | ||
26 | + display: -ms-flex; | ||
27 | + display: -o-flex; | ||
28 | + display: flex; | ||
29 | + justify-content: space-between; | ||
30 | + flex-wrap: wrap; | ||
31 | + padding: 0 .53rem; | ||
32 | +} | ||
33 | + | ||
34 | +.Figure_item { | ||
35 | + width: 3rem; | ||
36 | + height: 3.5rem; | ||
37 | + box-sizing: border-box; | ||
38 | + padding: .2rem .3rem; | ||
39 | + padding-bottom: 0; | ||
40 | + margin-bottom: .2rem; | ||
41 | + background: rgba(255, 255, 255, 1); | ||
42 | + box-shadow: 0px .01rem .06rem 0px rgba(102, 102, 102, 0.14); | ||
43 | + border-radius: .1rem; | ||
44 | +} | ||
45 | + | ||
46 | +.Figure_item img { | ||
47 | + display: block; | ||
48 | + width: 2.4rem; | ||
49 | + height: 2.7rem; | ||
50 | +} | ||
51 | + | ||
52 | +.Figure_item_text { | ||
53 | + padding: .18rem 0; | ||
54 | + text-align: center; | ||
55 | + font-size: .24rem; | ||
56 | + overflow: hidden; | ||
57 | + text-overflow: ellipsis; | ||
58 | + white-space: nowrap | ||
59 | +} | ||
60 | + | ||
61 | +.Article .Figure_item { | ||
62 | + padding: 0; | ||
63 | +} | ||
64 | + | ||
65 | +.Article .Figure_item img { | ||
66 | + width: 3rem; | ||
67 | + border-radius: .1rem .1rem 0px 0px; | ||
68 | + height: 1.7rem; | ||
69 | +} |
@@ -50,8 +50,7 @@ | @@ -50,8 +50,7 @@ | ||
50 | height: 100%; | 50 | height: 100%; |
51 | } | 51 | } |
52 | /*右边*/ | 52 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.5rem; | 53 | +.top_t_right{ |
55 | display: flex; | 54 | display: flex; |
56 | justify-content: space-between; | 55 | justify-content: space-between; |
57 | align-items: center; | 56 | align-items: center; |
@@ -74,11 +73,7 @@ | @@ -74,11 +73,7 @@ | ||
74 | -moz-border-radius: 50%; | 73 | -moz-border-radius: 50%; |
75 | border-radius: 50%; | 74 | border-radius: 50%; |
76 | } | 75 | } |
77 | -.top_t_right_text{ | ||
78 | - font-size: 0.2rem; | ||
79 | - font-weight: 500; | ||
80 | - color: #333333; | ||
81 | -} | 76 | + |
82 | /*-----底部------*/ | 77 | /*-----底部------*/ |
83 | .top_d{ | 78 | .top_d{ |
84 | width: 5.56rem; | 79 | width: 5.56rem; |
@@ -202,7 +197,7 @@ | @@ -202,7 +197,7 @@ | ||
202 | font-family:PingFang-SC-Bold; | 197 | font-family:PingFang-SC-Bold; |
203 | font-weight:bold; | 198 | font-weight:bold; |
204 | color:rgba(51,51,51,1); | 199 | color:rgba(51,51,51,1); |
205 | - line-height: 0.24rem; | 200 | +/* line-height: 0.24rem;*/ |
206 | } | 201 | } |
207 | .item{ | 202 | .item{ |
208 | margin-top: 0.24rem; | 203 | margin-top: 0.24rem; |
@@ -817,35 +812,4 @@ | @@ -817,35 +812,4 @@ | ||
817 | overflow-y: auto; | 812 | overflow-y: auto; |
818 | margin-bottom: 0.6rem; | 813 | margin-bottom: 0.6rem; |
819 | } | 814 | } |
820 | -/*菜单*/ | ||
821 | -.menu_item{ | ||
822 | - width: 7.5rem; | ||
823 | - display: flex; | ||
824 | - flex-flow: column; | ||
825 | - font-size: 0.24rem; | ||
826 | - font-weight: bold; | ||
827 | - background-color: #F7F7F7; | ||
828 | - position: absolute; | ||
829 | - left: 0; | ||
830 | - bottom: 0; | ||
831 | - top: 0.8rem; | ||
832 | - z-index: 1999; | ||
833 | -} | ||
834 | -.menu_item_a{ | ||
835 | - display: flex; | ||
836 | - align-items: center; | ||
837 | - justify-content: space-between; | ||
838 | - position: relative; | ||
839 | - padding: 0.38rem 0; | ||
840 | - border-bottom: 1px solid #EBEBEB; | ||
841 | - margin: 0 0.2rem; | ||
842 | -} | ||
843 | -.menu_item_a_pic{ | ||
844 | - width: 0.08rem; | ||
845 | - height: 0.16rem; | ||
846 | - display: flex; | ||
847 | -} | ||
848 | -.menu_item_a_pic img{ | ||
849 | - width: 100%; | ||
850 | - height: 100%; | ||
851 | -} | 815 | + |
@@ -50,8 +50,7 @@ | @@ -50,8 +50,7 @@ | ||
50 | height: 100%; | 50 | height: 100%; |
51 | } | 51 | } |
52 | /*右边*/ | 52 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | 53 | +.top_t_right{ |
55 | display: flex; | 54 | display: flex; |
56 | justify-content: space-between; | 55 | justify-content: space-between; |
57 | align-items: center; | 56 | align-items: center; |
@@ -285,7 +284,6 @@ | @@ -285,7 +284,6 @@ | ||
285 | } | 284 | } |
286 | /*右边*/ | 285 | /*右边*/ |
287 | .top_t_right{ | 286 | .top_t_right{ |
288 | - width: 1.2rem; | ||
289 | display: flex; | 287 | display: flex; |
290 | justify-content: space-between; | 288 | justify-content: space-between; |
291 | align-items: center; | 289 | align-items: center; |
@@ -50,8 +50,7 @@ | @@ -50,8 +50,7 @@ | ||
50 | height: 100%; | 50 | height: 100%; |
51 | } | 51 | } |
52 | /*右边*/ | 52 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | 53 | +.top_t_right{ |
55 | display: flex; | 54 | display: flex; |
56 | justify-content: space-between; | 55 | justify-content: space-between; |
57 | align-items: center; | 56 | align-items: center; |
@@ -178,7 +177,6 @@ | @@ -178,7 +177,6 @@ | ||
178 | font-family:PingFang-SC-Bold; | 177 | font-family:PingFang-SC-Bold; |
179 | font-weight:bold; | 178 | font-weight:bold; |
180 | color:rgba(51,51,51,1); | 179 | color:rgba(51,51,51,1); |
181 | - line-height: 0.24rem; | ||
182 | /*display: flex;*/ | 180 | /*display: flex;*/ |
183 | text-align: center; | 181 | text-align: center; |
184 | } | 182 | } |
@@ -50,8 +50,7 @@ | @@ -50,8 +50,7 @@ | ||
50 | height: 100%; | 50 | height: 100%; |
51 | } | 51 | } |
52 | /*右边*/ | 52 | /*右边*/ |
53 | -.top_t_right{ | ||
54 | - width: 1.2rem; | 53 | +.top_t_right{ |
55 | display: flex; | 54 | display: flex; |
56 | justify-content: space-between; | 55 | justify-content: space-between; |
57 | align-items: center; | 56 | align-items: center; |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html lang="en"> | 2 | <html lang="en"> |
3 | + | ||
3 | <head> | 4 | <head> |
4 | - <meta charset="UTF-8"> | ||
5 | - <title>个人主页</title> | ||
6 | - <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> | 5 | + <meta charset="UTF-8"> |
6 | + <title>个人主页</title> | ||
7 | + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> | ||
7 | 8 | ||
8 | - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
9 | - <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
10 | - <link rel="stylesheet" type="text/css" href="css/grzy.css"> | ||
11 | - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css"> | ||
12 | - <script src="js/base.js"></script> | ||
13 | - <script src="js/jquery.min.js"></script> | 9 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
10 | + <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
11 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css"> | ||
12 | + <link rel="stylesheet" href="css/public.css"> | ||
13 | + <link rel="stylesheet" type="text/css" href="css/grzy.css"> | ||
14 | + <script src="js/base.js"></script> | ||
15 | + <script src="js/jquery.min.js"></script> | ||
14 | 16 | ||
15 | - <style> | ||
16 | - .icon-caidan{ | ||
17 | - font-size: 0.5rem; | ||
18 | - } | ||
19 | - .icon-magnifier{ | ||
20 | - color: #999999; | ||
21 | - } | 17 | + <style> |
18 | + .icon-caidan { | ||
19 | + font-size: 0.5rem; | ||
20 | + } | ||
22 | 21 | ||
23 | - .f_size{ | ||
24 | - font-weight: normal; | ||
25 | - font-size: 0.18rem; | ||
26 | - } | ||
27 | - .icon-xiugai{ | ||
28 | - margin-left: 0.15rem; | ||
29 | - font-size: 0.3rem; | ||
30 | - color: #999999; | ||
31 | - display: flex; | ||
32 | - font-weight: bold; | ||
33 | - align-items: center; | ||
34 | - } | ||
35 | - .top_dot{ | ||
36 | - width: 0.08rem; | ||
37 | - height: 0.08rem; | ||
38 | - background:rgba(166,16,16,1); | ||
39 | - border:1px solid rgba(255, 255, 255, 1); | ||
40 | - border-radius: 50%; | ||
41 | - position: absolute; | ||
42 | - top: 0; | ||
43 | - right: 0; | ||
44 | - } | ||
45 | - .color_black{ | ||
46 | - color: black; | ||
47 | - } | ||
48 | - .margin_t{ | ||
49 | - margin-top: 0.1rem; | ||
50 | - } | ||
51 | - </style> | ||
52 | -</head> | 22 | + .icon-magnifier { |
23 | + color: #999999; | ||
24 | + } | ||
53 | 25 | ||
54 | -<body> | ||
55 | -<div class="container"> | ||
56 | - <div class="top"> | ||
57 | - <!--顶部菜单--> | ||
58 | - <div class="top_t"> | ||
59 | - <!--左--> | ||
60 | - <div class="top_t_left"> | ||
61 | - <!--中文字--> | ||
62 | - <div class="top_t_left_text"> | ||
63 | - 中 | ||
64 | - </div> | ||
65 | - <!--菜单图标--> | ||
66 | - <div class="iconfont icon-caidan"> | ||
67 | - <div class="menu_item" style="display: none;"> | 26 | + .f_size { |
27 | + font-weight: normal; | ||
28 | + font-size: 0.18rem; | ||
29 | + } | ||
30 | + | ||
31 | + .icon-xiugai { | ||
32 | + margin-left: 0.15rem; | ||
33 | + font-size: 0.3rem; | ||
34 | + color: #999999; | ||
35 | + display: flex; | ||
36 | + font-weight: bold; | ||
37 | + align-items: center; | ||
38 | + } | ||
39 | + | ||
40 | + .top_dot { | ||
41 | + width: 0.08rem; | ||
42 | + height: 0.08rem; | ||
43 | + background: rgba(166, 16, 16, 1); | ||
44 | + border: 1px solid rgba(255, 255, 255, 1); | ||
45 | + border-radius: 50%; | ||
46 | + position: absolute; | ||
47 | + top: 0; | ||
48 | + right: 0; | ||
49 | + } | ||
50 | + | ||
51 | + .color_black { | ||
52 | + color: black; | ||
53 | + } | ||
68 | 54 | ||
69 | - <!--<p class="index_jump">主页</p >--> | ||
70 | - <!--<p class="rwxq_jump">人物详情</p>--> | ||
71 | - <!--<p class="grzy_jump">个人主页</p>--> | ||
72 | - <!--<p class="spxq_jump">视频详情</p>--> | ||
73 | - <div class="menu_item_a"> | ||
74 | - <div>首页</div> | ||
75 | - <div class="menu_item_a_pic"> | ||
76 | - <img src="images/you@2x.png"> | ||
77 | - </div> | ||
78 | - </div> | ||
79 | - <div class="menu_item_a"> | ||
80 | - <div>精选</div> | ||
81 | - <div class="menu_item_a_pic"> | ||
82 | - <img src="images/you@2x.png"> | ||
83 | - </div> | ||
84 | - </div> | ||
85 | - <div class="menu_item_a"> | ||
86 | - <div>动态</div> | ||
87 | - <div class="menu_item_a_pic"> | ||
88 | - <img src="images/you@2x.png"> | ||
89 | - </div> | ||
90 | - </div> | ||
91 | - <div class="menu_item_a"> | ||
92 | - <div>百科</div> | ||
93 | - <div class="menu_item_a_pic"> | ||
94 | - <img src="images/you@2x.png"> | ||
95 | - </div> | ||
96 | - </div> | 55 | + .margin_t { |
56 | + margin-top: 0.1rem; | ||
57 | + } | ||
97 | 58 | ||
59 | + </style> | ||
60 | +</head> | ||
98 | 61 | ||
99 | - </div> | 62 | +<body> |
63 | + <div class="container"> | ||
64 | + <div class="top"> | ||
65 | + <!--顶部菜单--> | ||
66 | + <div class="top_t"> | ||
67 | + <!--左--> | ||
68 | + <div class="top_t_left"> | ||
69 | + <!--中文字--> | ||
70 | + <div class="top_t_left_text"> | ||
71 | + 中 | ||
72 | + </div> | ||
73 | + <!--菜单图标--> | ||
74 | + <div class="iconfont icon-caidan"> | ||
75 | + <!--<div class=""></div>--> | ||
76 | + <!--菜单列表--> | ||
77 | + <div class="menu_item" style="display: none;"> | ||
100 | 78 | ||
101 | - </div> | ||
102 | - </div> | ||
103 | - <!--中--> | ||
104 | - <div class="top_t_middle"> | ||
105 | - <img src="images/icon_1.png"> | ||
106 | - </div> | ||
107 | - <!--右--> | ||
108 | - <div class="top_t_right"> | ||
109 | - <!--铃声--> | ||
110 | - <div class="iconfont icon-10"> | ||
111 | - <!--小红点--> | ||
112 | - <div class="top_dot"></div> | ||
113 | - </div> | ||
114 | - <!--头像--> | ||
115 | - <div class="top_t_right_pic"> | ||
116 | - <img src="images/1.png"> | ||
117 | - </div> | ||
118 | - </div> | ||
119 | - </div> | ||
120 | - <!--底部搜索--> | ||
121 | - <div class="top_d"> | ||
122 | - <div class="iconfont icon-magnifier"></div> | ||
123 | - <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
124 | - </div> | ||
125 | - </div> | ||
126 | - <!--信息框--> | ||
127 | - <div class="mid"> | ||
128 | - <!--左边图片--> | ||
129 | - <div class="mid_left"> | ||
130 | - <img src="images/peke.png"> | ||
131 | - </div> | ||
132 | - <!--右边图片--> | ||
133 | - <div class="mid_right"> | ||
134 | - <!--大昵称--> | ||
135 | - <div class="mid_right_big"> | ||
136 | - 皮还是皮不过我的你 | ||
137 | - <!--修改--> | ||
138 | - <div class="iconfont icon-xiugai "> | ||
139 | - <p class="f_size">修改</p> | ||
140 | - </div> | ||
141 | - </div> | ||
142 | - <!--小昵称--> | ||
143 | - <div class="mid_right_small"> | ||
144 | - 皮还是皮不过我的你 | ||
145 | - <!--修改按钮--> | ||
146 | - <div class="iconfont icon-xiugai "> | ||
147 | - <p class="f_size">修改</p> | ||
148 | - </div> | ||
149 | - </div> | ||
150 | - </div> | ||
151 | - </div> | ||
152 | - <!--动态 审核--> | ||
153 | - <div class="item"> | ||
154 | - <div class="item_m item_color" data-id ="1"> | ||
155 | - 动态 | ||
156 | - <div class="item_number" data-id ="1"> | ||
157 | - 12 | ||
158 | - </div> | 79 | + <!--<p class="index_jump">主页</p >--> |
80 | + <!--<p class="rwxq_jump">人物详情</p>--> | ||
81 | + <!--<p class="grzy_jump">个人主页</p>--> | ||
82 | + <!--<p class="spxq_jump">视频详情</p>--> | ||
83 | + <a href="index.html"> | ||
84 | + <div class="menu_item_a"> | ||
85 | + <div>首页</div> | ||
86 | + <div class="menu_item_a_pic"> | ||
87 | + <img src="images/you@2x.png"> | ||
88 | + </div> | ||
89 | + </div> | ||
90 | + </a> | ||
91 | + <a href=""> | ||
92 | + <div class="menu_item_a"> | ||
93 | + <div>精选</div> | ||
94 | + <div class="menu_item_a_pic"> | ||
95 | + <img src="images/you@2x.png"> | ||
96 | + </div> | ||
97 | + </div> | ||
98 | + </a> | ||
99 | + <a href=""> | ||
100 | + <div class="menu_item_a"> | ||
101 | + <div>动态</div> | ||
102 | + <div class="menu_item_a_pic"> | ||
103 | + <img src="images/you@2x.png"> | ||
104 | + </div> | ||
105 | + </div> | ||
106 | + </a> | ||
107 | + <a href=""> | ||
108 | + <div class="menu_item_a"> | ||
109 | + <div>百科</div> | ||
110 | + <div class="menu_item_a_pic"> | ||
111 | + <img src="images/you@2x.png"> | ||
112 | + </div> | ||
113 | + </div> | ||
114 | + </a> | ||
115 | + </div> | ||
116 | + </div> | ||
117 | + </div> | ||
118 | + <!--中--> | ||
119 | + <div class="top_t_middle"> | ||
120 | + <img src="images/icon_1.png"> | ||
121 | + </div> | ||
122 | + <!--右--> | ||
123 | + <div class="top_t_right" style="display: none"> | ||
124 | + <!--铃声--> | ||
125 | + <div class="iconfont icon-10"> | ||
126 | + <div class="top_dot"></div> | ||
127 | + </div> | ||
128 | + <div class="top_t_right_text"> | ||
129 | + 注册/登录 | ||
130 | + </div> | ||
131 | + <!--头像--> | ||
132 | + <div class="top_t_right_pic" style="display: none"> | ||
133 | + <img src="images/1.png"> | ||
134 | + </div> | ||
135 | + | ||
136 | + </div> | ||
137 | + <div class="top_t_right"> | ||
138 | + | ||
139 | + <div class="top_t_right_pic"> | ||
140 | + <img src="images/1.png"> | ||
141 | + <div class="head_right_nav"> | ||
142 | + <div class="head_right_item"> | ||
143 | + <a href="grzy.html">个人主页</a> | ||
144 | + </div> | ||
145 | + <div class="head_right_item"> | ||
146 | + <a href="zhsz.html">设置</a> | ||
147 | + </div> | ||
148 | + <div class="head_right_item"> | ||
149 | + <a href="">退出登录</a> | ||
150 | + </div> | ||
151 | + </div> | ||
152 | + </div> | ||
153 | + </div> | ||
154 | + </div> | ||
155 | + <!--底部搜索--> | ||
156 | + <div class="top_d"> | ||
157 | + <div class="iconfont icon-magnifier"></div> | ||
158 | + <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
159 | + </div> | ||
160 | + </div> | ||
161 | + <!--信息框--> | ||
162 | + <div class="mid"> | ||
163 | + <!--左边图片--> | ||
164 | + <div class="mid_left"> | ||
165 | + <img src="images/peke.png"> | ||
166 | + </div> | ||
167 | + <!--右边图片--> | ||
168 | + <div class="mid_right"> | ||
169 | + <!--大昵称--> | ||
170 | + <div class="mid_right_big"> | ||
171 | + 皮还是皮不过我的你 | ||
172 | + <!--修改--> | ||
173 | + <div class="iconfont icon-xiugai "> | ||
174 | + <p class="f_size">修改</p> | ||
175 | + </div> | ||
176 | + </div> | ||
177 | + <!--小昵称--> | ||
178 | + <div class="mid_right_small"> | ||
179 | + 皮还是皮不过我的你 | ||
180 | + <!--修改按钮--> | ||
181 | + <div class="iconfont icon-xiugai "> | ||
182 | + <p class="f_size">修改</p> | ||
183 | + </div> | ||
184 | + </div> | ||
185 | + </div> | ||
186 | + </div> | ||
187 | + <!--动态 审核--> | ||
188 | + <div class="item"> | ||
189 | + <div class="item_m item_color" data-id="1"> | ||
190 | + 动态 | ||
191 | + <div class="item_number" data-id="1"> | ||
192 | + 12 | ||
193 | + </div> | ||
159 | 194 | ||
160 | - </div> | ||
161 | - <div class="item_m "> | ||
162 | - 审核 | ||
163 | - <div class="item_number"> | ||
164 | - 9 | ||
165 | - </div> | ||
166 | - </div> | ||
167 | - </div> | ||
168 | - <!--动态消息--> | ||
169 | - <div class="message" > | ||
170 | - <div class="message_box"> | ||
171 | - <p class="color_red"> | ||
172 | - 小猪佩奇 | ||
173 | - <span class="color_black"> | ||
174 | - 赞了你的 | ||
175 | - </span> | ||
176 | - 《中国流行音乐的发展历程》 | ||
177 | - </p> | ||
178 | - <p class="color_red margin_t"> | ||
179 | - 小猪佩奇 | ||
180 | - <span class="color_black"> | ||
181 | - 关注了你 | ||
182 | - </span> | ||
183 | - </p> | ||
184 | - </div> | ||
185 | - <div class="message_box"> | ||
186 | - <p class="color_red"> | ||
187 | - 小猪佩奇 | ||
188 | - <span class="color_black"> | ||
189 | - 赞了你的 | ||
190 | - </span> | ||
191 | - 《中国流行音乐的发展历程》 | ||
192 | - </p> | ||
193 | - <p class="color_red margin_t"> | ||
194 | - 小猪佩奇 | ||
195 | - <span class="color_black"> | ||
196 | - 关注了你 | ||
197 | - </span> | ||
198 | - </p> | ||
199 | - </div> | ||
200 | - <div class="message_box"> | ||
201 | - <p class="color_red"> | ||
202 | - 小猪佩奇 | ||
203 | - <span class="color_black"> | ||
204 | - 赞了你的 | ||
205 | - </span> | ||
206 | - 《中国流行音乐的发展历程》 | ||
207 | - </p> | ||
208 | - <p class="color_red margin_t"> | ||
209 | - 小猪佩奇 | ||
210 | - <span class="color_black"> | ||
211 | - 关注了你 | ||
212 | - </span> | ||
213 | - </p> | ||
214 | - </div> | 195 | + </div> |
196 | + <div class="item_m "> | ||
197 | + 审核 | ||
198 | + <div class="item_number"> | ||
199 | + 9 | ||
200 | + </div> | ||
201 | + </div> | ||
202 | + </div> | ||
203 | + <!--动态消息--> | ||
204 | + <div class="message"> | ||
205 | + <div class="message_box"> | ||
206 | + <p class="color_red"> | ||
207 | + 小猪佩奇 | ||
208 | + <span class="color_black"> | ||
209 | + 赞了你的 | ||
210 | + </span> | ||
211 | + 《中国流行音乐的发展历程》 | ||
212 | + </p> | ||
213 | + <p class="color_red margin_t"> | ||
214 | + 小猪佩奇 | ||
215 | + <span class="color_black"> | ||
216 | + 关注了你 | ||
217 | + </span> | ||
218 | + </p> | ||
219 | + </div> | ||
220 | + <div class="message_box"> | ||
221 | + <p class="color_red"> | ||
222 | + 小猪佩奇 | ||
223 | + <span class="color_black"> | ||
224 | + 赞了你的 | ||
225 | + </span> | ||
226 | + 《中国流行音乐的发展历程》 | ||
227 | + </p> | ||
228 | + <p class="color_red margin_t"> | ||
229 | + 小猪佩奇 | ||
230 | + <span class="color_black"> | ||
231 | + 关注了你 | ||
232 | + </span> | ||
233 | + </p> | ||
234 | + </div> | ||
235 | + <div class="message_box"> | ||
236 | + <p class="color_red"> | ||
237 | + 小猪佩奇 | ||
238 | + <span class="color_black"> | ||
239 | + 赞了你的 | ||
240 | + </span> | ||
241 | + 《中国流行音乐的发展历程》 | ||
242 | + </p> | ||
243 | + <p class="color_red margin_t"> | ||
244 | + 小猪佩奇 | ||
245 | + <span class="color_black"> | ||
246 | + 关注了你 | ||
247 | + </span> | ||
248 | + </p> | ||
249 | + </div> | ||
215 | 250 | ||
216 | 251 | ||
217 | - </div> | ||
218 | - <!--审核消息--> | ||
219 | - <div class="audit" style="display: none;" > | ||
220 | - <div class="audit_big"> | ||
221 | - 正在审核 | ||
222 | - <p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p> | ||
223 | - </div> | 252 | + </div> |
253 | + <!--审核消息--> | ||
254 | + <div class="audit" style="display: none;"> | ||
255 | + <div class="audit_big"> | ||
256 | + 正在审核 | ||
257 | + <p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p> | ||
258 | + </div> | ||
224 | 259 | ||
225 | - <div class="audit_big" > | ||
226 | - 正在审核 | ||
227 | - <p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p> | ||
228 | - </div> | ||
229 | - </div> | ||
230 | -</div> | 260 | + <div class="audit_big"> |
261 | + 正在审核 | ||
262 | + <p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p> | ||
263 | + </div> | ||
264 | + </div> | ||
265 | + <div class="mask fit" style="display: none"> | ||
266 | + <div class="fit_name"> | ||
267 | + <div class="fit_name_title"> | ||
268 | + 设置昵称 | ||
269 | + <img src="images/close.png" alt=""> | ||
270 | + </div> | ||
271 | + <div class="fit_name_main"> | ||
272 | + <form action=""> | ||
273 | + <input type="text" name="" id="" placeholder="请设置您的昵称"> | ||
274 | + <p>不超过8个中文,不超过12个英文字母,不能有除了_-以外的字符</p> | ||
275 | + <button type="button">完成</button> | ||
276 | + </form> | ||
277 | + </div> | ||
278 | + </div> | ||
279 | + </div> | ||
280 | + <div class="mask fit2" style="display: none"> | ||
281 | + <div class="fit_name"> | ||
282 | + <div class="fit_name_title"> | ||
283 | + 设置签名 | ||
284 | + <img src="images/close.png" alt=""> | ||
285 | + </div> | ||
286 | + <div class="fit_name_main"> | ||
287 | + <form action=""> | ||
288 | + <input type="text" name="" id="" placeholder="请设置您的签名"> | ||
289 | + <p>不超过30个中文</p> | ||
290 | + <button type="button">完成</button> | ||
291 | + </form> | ||
292 | + </div> | ||
293 | + </div> | ||
294 | + </div> | ||
295 | + <div id="message_info" class="growl" style="display:none;"> | ||
296 | + <div id="message_content" class="growl-item alert message_error"></div> | ||
297 | + </div> | ||
298 | + </div> | ||
231 | </body> | 299 | </body> |
232 | <script> | 300 | <script> |
233 | - //点击打开菜单 | ||
234 | - $('.icon-caidan').click(function () { | ||
235 | - console.log(11) | ||
236 | - $('.menu_item').slideToggle(); | ||
237 | - // 关闭图片功能 2019.4.8 | ||
238 | - // if($(this).hasClass("icon-caidan")){ | ||
239 | - // $(this).addClass("icon-guanbi"); | ||
240 | - // $(this).removeClass("icon-caidan"); | ||
241 | - // $("body").css("overflow","hidden"); | ||
242 | - // }else{ | ||
243 | - // $(this).removeClass("icon-guanbi"); | ||
244 | - // $(this).addClass("icon-caidan"); | ||
245 | - // $("body").css("overflow","auto"); | ||
246 | - // } | ||
247 | - }) | 301 | + var addMessage = function(type, message) { |
302 | + $("#message_content").html(""); | ||
303 | + $("#message_content").removeClass("message_success"); | ||
304 | + $("#message_content").removeClass("message_error"); | ||
305 | + if (message != null && message != '') { | ||
306 | + if (type == 'success') { | ||
307 | + $("#message_content").addClass("message_success"); | ||
308 | + } else { | ||
309 | + $("#message_content").addClass("message_error"); | ||
310 | + } | ||
311 | + $("#message_content").html(message); | ||
312 | + $("#message_info").fadeIn(); | ||
313 | + setTimeout(function() { | ||
314 | + $("#message_info").fadeOut(); | ||
315 | + }, 1000); | ||
316 | + }; | ||
317 | + }; | ||
318 | + //点击打开菜单 | ||
319 | + $('.icon-caidan').click(function() { | ||
320 | + console.log(11) | ||
321 | + $('.menu_item').slideToggle(); | ||
322 | + // 关闭图片功能 2019.4.8 | ||
323 | + // if($(this).hasClass("icon-caidan")){ | ||
324 | + // $(this).addClass("icon-guanbi"); | ||
325 | + // $(this).removeClass("icon-caidan"); | ||
326 | + // $("body").css("overflow","hidden"); | ||
327 | + // }else{ | ||
328 | + // $(this).removeClass("icon-guanbi"); | ||
329 | + // $(this).addClass("icon-caidan"); | ||
330 | + // $("body").css("overflow","auto"); | ||
331 | + // } | ||
332 | + }) | ||
333 | + | ||
334 | + //标题切换 | ||
335 | + $('.item_m').click(function() { | ||
336 | + var index = $(this).index() | ||
248 | 337 | ||
249 | - //标题切换 | ||
250 | - $('.item_m').click(function () { | ||
251 | - var index = $(this).index() | 338 | + $(this).addClass('item_color').siblings(".item_m").removeClass('item_color') |
252 | 339 | ||
253 | - $(this).addClass('item_color').siblings(".item_m").removeClass('item_color') | ||
254 | 340 | ||
341 | + //内容切换 | ||
342 | + var dataid = $(this).attr("data-id"); | ||
343 | + if (dataid == 1) { | ||
344 | + $(".message").show(); | ||
345 | + $('.audit').hide(); | ||
346 | + } else { | ||
347 | + $(".audit").show(); | ||
348 | + $(".message").hide(); | ||
349 | + } | ||
255 | 350 | ||
256 | - //内容切换 | ||
257 | - var dataid = $(this).attr("data-id"); | ||
258 | - if(dataid == 1){ | ||
259 | - $(".message").show(); | ||
260 | - $('.audit').hide(); | ||
261 | - }else { | ||
262 | - $(".audit").show(); | ||
263 | - $(".message").hide(); | ||
264 | - } | ||
265 | 351 | ||
266 | 352 | ||
353 | + }) | ||
354 | + //修改昵称 | ||
355 | + $('.mid_right_big .icon-xiugai').click(function() { | ||
356 | + $('.fit').show() | ||
357 | + | ||
358 | + }) | ||
359 | + | ||
360 | + $('.fit_name_title img').click(function() { | ||
361 | + $('.fit').hide() | ||
362 | + $('.fit2').hide() | ||
363 | + addMessage('success', '取消修改'); | ||
364 | + }) | ||
365 | + $('.fit_name_main button').click(function() { | ||
366 | + $('.fit').hide() | ||
367 | + $('.fit2').hide() | ||
368 | + addMessage('success', '修改成功'); | ||
369 | + }) | ||
370 | + //修改签名 | ||
371 | + $('.mid_right_small .icon-xiugai').click(function() { | ||
372 | + $('.fit2').show() | ||
373 | + // addMessage('success', '嘿嘿'); | ||
374 | + }) | ||
375 | + $('.top_t_right_pic img').click(function() { | ||
376 | + $('.head_right_nav').toggle() | ||
377 | + }) | ||
267 | 378 | ||
268 | - }) | ||
269 | </script> | 379 | </script> |
380 | + | ||
270 | </html> | 381 | </html> |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html lang="en"> | 2 | <html lang="en"> |
3 | + | ||
3 | <head> | 4 | <head> |
4 | - <meta charset="UTF-8"> | ||
5 | - <title>个人主页</title> | ||
6 | - <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> | 5 | + <meta charset="UTF-8"> |
6 | + <title>贡献内容</title> | ||
7 | + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> | ||
7 | 8 | ||
8 | - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
9 | - <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
10 | - <link rel="stylesheet" type="text/css" href="css/gx.css"> | ||
11 | - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7bu9hl90ppx.css"> | ||
12 | - <script src="js/base.js"></script> | ||
13 | - <script src="js/jquery.min.js"></script> | 9 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
10 | + <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
11 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7bu9hl90ppx.css"> | ||
12 | + <link rel="stylesheet" href="css/public.css"> | ||
13 | + <link rel="stylesheet" type="text/css" href="css/gx.css"> | ||
14 | + <script src="js/base.js"></script> | ||
15 | + <script src="js/jquery.min.js"></script> | ||
14 | 16 | ||
15 | - <style> | ||
16 | - .icon-caidan{ | 17 | + <style> |
18 | + .icon-caidan{ | ||
17 | font-size: 0.5rem; | 19 | font-size: 0.5rem; |
18 | } | 20 | } |
19 | .icon-magnifier{ | 21 | .icon-magnifier{ |
@@ -63,238 +65,311 @@ | @@ -63,238 +65,311 @@ | ||
63 | </head> | 65 | </head> |
64 | 66 | ||
65 | <body> | 67 | <body> |
66 | -<div class="container"> | ||
67 | - <div class="top"> | ||
68 | - <!--顶部菜单--> | ||
69 | - <div class="top_t"> | ||
70 | - <!--左--> | ||
71 | - <div class="top_t_left"> | ||
72 | - <!--中文字--> | ||
73 | - <div class="top_t_left_text"> | ||
74 | - 中 | ||
75 | - </div> | ||
76 | - <!--菜单图标--> | ||
77 | - <div class="iconfont icon-caidan"> | ||
78 | - <div class="menu_item" style="display: none;"> | ||
79 | - | ||
80 | - <!--<p class="index_jump">主页</p >--> | ||
81 | - <!--<p class="rwxq_jump">人物详情</p>--> | ||
82 | - <!--<p class="grzy_jump">个人主页</p>--> | ||
83 | - <!--<p class="spxq_jump">视频详情</p>--> | ||
84 | - <div class="menu_item_a"> | ||
85 | - <div>首页</div> | ||
86 | - <div class="menu_item_a_pic"> | ||
87 | - <img src="images/you@2x.png"> | ||
88 | - </div> | ||
89 | - </div> | ||
90 | - <div class="menu_item_a"> | ||
91 | - <div>精选</div> | ||
92 | - <div class="menu_item_a_pic"> | ||
93 | - <img src="images/you@2x.png"> | ||
94 | - </div> | ||
95 | - </div> | ||
96 | - <div class="menu_item_a"> | ||
97 | - <div>动态</div> | ||
98 | - <div class="menu_item_a_pic"> | ||
99 | - <img src="images/you@2x.png"> | ||
100 | - </div> | ||
101 | - </div> | ||
102 | - <div class="menu_item_a"> | ||
103 | - <div>百科</div> | ||
104 | - <div class="menu_item_a_pic"> | ||
105 | - <img src="images/you@2x.png"> | ||
106 | - </div> | ||
107 | - </div> | 68 | + <div class="container"> |
69 | + <div class="top"> | ||
70 | + <!--顶部菜单--> | ||
71 | + <div class="top_t"> | ||
72 | + <!--左--> | ||
73 | + <div class="top_t_left"> | ||
74 | + <!--中文字--> | ||
75 | + <div class="top_t_left_text"> | ||
76 | + 中 | ||
77 | + </div> | ||
78 | + <!--菜单图标--> | ||
79 | + <div class="iconfont icon-caidan"> | ||
80 | + <!--<div class=""></div>--> | ||
81 | + <!--菜单列表--> | ||
82 | + <div class="menu_item" style="display: none;"> | ||
108 | 83 | ||
84 | + <!--<p class="index_jump">主页</p >--> | ||
85 | + <!--<p class="rwxq_jump">人物详情</p>--> | ||
86 | + <!--<p class="grzy_jump">个人主页</p>--> | ||
87 | + <!--<p class="spxq_jump">视频详情</p>--> | ||
88 | + <a href="index.html"> | ||
89 | + <div class="menu_item_a"> | ||
90 | + <div>首页</div> | ||
91 | + <div class="menu_item_a_pic"> | ||
92 | + <img src="images/you@2x.png"> | ||
93 | + </div> | ||
94 | + </div> | ||
95 | + </a> | ||
96 | + <a href=""> | ||
97 | + <div class="menu_item_a"> | ||
98 | + <div>精选</div> | ||
99 | + <div class="menu_item_a_pic"> | ||
100 | + <img src="images/you@2x.png"> | ||
101 | + </div> | ||
102 | + </div> | ||
103 | + </a> | ||
104 | + <a href=""> | ||
105 | + <div class="menu_item_a"> | ||
106 | + <div>动态</div> | ||
107 | + <div class="menu_item_a_pic"> | ||
108 | + <img src="images/you@2x.png"> | ||
109 | + </div> | ||
110 | + </div> | ||
111 | + </a> | ||
112 | + <a href=""> | ||
113 | + <div class="menu_item_a"> | ||
114 | + <div>百科</div> | ||
115 | + <div class="menu_item_a_pic"> | ||
116 | + <img src="images/you@2x.png"> | ||
117 | + </div> | ||
118 | + </div> | ||
119 | + </a> | ||
120 | + </div> | ||
121 | + </div> | ||
122 | + </div> | ||
123 | + <!--中--> | ||
124 | + <div class="top_t_middle"> | ||
125 | + <img src="images/icon_1.png"> | ||
126 | + </div> | ||
127 | + <!--右--> | ||
128 | + <div class="top_t_right"> | ||
129 | + <!--铃声--> | ||
130 | + <div class="iconfont icon-10"> | ||
131 | + <div class="top_dot"></div> | ||
132 | + </div> | ||
133 | + <div class="top_t_right_text"> | ||
134 | + 注册/登录 | ||
135 | + </div> | ||
136 | + <!--头像--> | ||
137 | + <div class="top_t_right_pic" style="display: none"> | ||
138 | + <img src="images/1.png"> | ||
139 | + </div> | ||
140 | + </div> | ||
141 | + </div> | ||
142 | + <!--底部搜索--> | ||
143 | + <div class="top_d"> | ||
144 | + <div class="iconfont icon-magnifier"></div> | ||
145 | + <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
146 | + </div> | ||
147 | + </div> | ||
148 | + <!--主体内容--> | ||
149 | + <div class="mid"> | ||
150 | + <!--头部图片--> | ||
151 | + <div class="mid_head"> | ||
152 | + <img src="images/banner_1.png"> | ||
153 | + </div> | ||
154 | + <!--头部文本框--> | ||
155 | + <div class="mid_title"> | ||
109 | 156 | ||
110 | - </div> | 157 | + 我在这里享受着很多地区不曾有的体验,每一天都在过四季。为此,很是苦恼,不知道怎么穿戴,分不清是穿多了还是穿少了。这种特有的气候,每年都会让体弱的人进出医院好几回。年少时,总觉得那些因为天气而生病的人,是残弱群体,而今,自己也慢慢加入这个群体,深深懂得,岁月不会优待谁,生老病死都得走这么一遭。这么一说,我感到一丝悲哀 |
111 | 158 | ||
112 | - </div> | ||
113 | - </div> | ||
114 | - <!--中--> | ||
115 | - <div class="top_t_middle"> | ||
116 | - <img src="images/peke.png"> | ||
117 | - </div> | ||
118 | - <!--右--> | ||
119 | - <div class="top_t_right"> | ||
120 | - <!--铃声--> | ||
121 | - <div class="iconfont icon-10"> | ||
122 | - <!--小红点--> | ||
123 | - <div class="top_dot"></div> | ||
124 | - </div> | ||
125 | - <!--头像--> | ||
126 | - <div class="top_t_right_pic"> | ||
127 | - <img src="images/1.png"> | ||
128 | - </div> | ||
129 | - </div> | ||
130 | - </div> | ||
131 | - <!--底部搜索--> | ||
132 | - <div class="top_d"> | ||
133 | - <div class="iconfont icon-magnifier"></div> | ||
134 | - <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
135 | - </div> | ||
136 | - </div> | ||
137 | - <!--主体内容--> | ||
138 | - <div class="mid"> | ||
139 | - <!--头部图片--> | ||
140 | - <div class="mid_head"> | ||
141 | - <img src="images/banner_1.png"> | ||
142 | - </div> | ||
143 | - <!--头部文本框--> | ||
144 | - <div class="mid_title"> | 159 | + </div> |
160 | + <!--文本框下的介绍内容--> | ||
161 | + <div class="mid_small"> | ||
162 | + <!--图标--> | ||
163 | + <div class="iconfont icon-gantanhao1"></div> | ||
164 | + <!--<div class="mid_small_left">图标</div>--> | ||
165 | + <!--文字--> | ||
166 | + <div class="mid_small_right"> | ||
167 | + <p>包含图片/声音/视频或大附件内容请直接发送邮件至:</p> | ||
168 | + <p>Musicofchina@outlook.com (后期会改成企业邮箱)</p> | ||
169 | + </div> | ||
170 | + </div> | ||
145 | 171 | ||
146 | - 我在这里享受着很多地区不曾有的体验,每一天都在过四季。为此,很是苦恼,不知道怎么穿戴,分不清是穿多了还是穿少了。这种特有的气候,每年都会让体弱的人进出医院好几回。年少时,总觉得那些因为天气而生病的人,是残弱群体,而今,自己也慢慢加入这个群体,深深懂得,岁月不会优待谁,生老病死都得走这么一遭。这么一说,我感到一丝悲哀 | 172 | + <!--类型--> |
173 | + <div class="mid_type"> | ||
174 | + <!--标题--> | ||
175 | + <div class="mid_type_title"> | ||
176 | + <!--圆点--> | ||
177 | + <p class="mid_type_title_dot"></p> | ||
178 | + <p>类型</p> | ||
179 | + </div> | ||
180 | + <!--内容--> | ||
181 | + <div class="mid_type_items"> | ||
182 | + <div class="mid_type_items_item">人物</div> | ||
183 | + <div class="mid_type_items_item">演出</div> | ||
184 | + <div class="mid_type_items_item">文章</div> | ||
185 | + <div class="mid_type_items_item">新闻</div> | ||
186 | + <div class="mid_type_items_item">风格</div> | ||
187 | + <div class="mid_type_items_item">乐器</div> | ||
188 | + <div class="mid_type_items_item">其他</div> | ||
189 | + </div> | ||
190 | + </div> | ||
147 | 191 | ||
148 | - </div> | ||
149 | - <!--文本框下的介绍内容--> | ||
150 | - <div class="mid_small"> | ||
151 | - <!--图标--> | ||
152 | - <div class="iconfont icon-gantanhao1"></div> | ||
153 | - <!--<div class="mid_small_left">图标</div>--> | ||
154 | - <!--文字--> | ||
155 | - <div class="mid_small_right"> | ||
156 | - <p>包含图片/声音/视频或大附件内容请直接发送邮件至:</p> | ||
157 | - <p>Musicofchina@outlook.com (后期会改成企业邮箱)</p> | ||
158 | - </div> | ||
159 | - </div> | 192 | + <!--内容--> |
193 | + <div class="mid_type"> | ||
194 | + <!--标题--> | ||
195 | + <div class="mid_type_title"> | ||
196 | + <!--圆点--> | ||
197 | + <p class="mid_type_title_dot"></p> | ||
198 | + <p>内容</p> | ||
199 | + </div> | ||
200 | + <!--内容--> | ||
201 | + <div class="mid_type_items"> | ||
202 | + <!--标题--> | ||
203 | + <div class="mid_type_items_title"> | ||
204 | + <input type="text" placeholder="标题"> | ||
205 | + </div> | ||
206 | + <!--内容--> | ||
207 | + <div class="mid_type_items_area"> | ||
208 | + <textarea placeholder="内容不少于100字"></textarea> | ||
209 | + </div> | ||
210 | + </div> | ||
211 | + </div> | ||
160 | 212 | ||
161 | - <!--类型--> | ||
162 | - <div class="mid_type"> | ||
163 | - <!--标题--> | ||
164 | - <div class="mid_type_title"> | ||
165 | - <!--圆点--> | ||
166 | - <p class="mid_type_title_dot"></p> | ||
167 | - <p>类型</p> | ||
168 | - </div> | ||
169 | - <!--内容--> | ||
170 | - <div class="mid_type_items"> | ||
171 | - <div class="mid_type_items_item">人物</div> | ||
172 | - <div class="mid_type_items_item">演出</div> | ||
173 | - <div class="mid_type_items_item">文章</div> | ||
174 | - <div class="mid_type_items_item">新闻</div> | ||
175 | - <div class="mid_type_items_item">风格</div> | ||
176 | - <div class="mid_type_items_item">乐器</div> | ||
177 | - <div class="mid_type_items_item">其他</div> | ||
178 | - </div> | ||
179 | - </div> | 213 | + <!--图片--> |
214 | + <div class="mid_type"> | ||
215 | + <!--标题--> | ||
216 | + <div class="mid_type_title"> | ||
217 | + <!--圆点--> | ||
218 | + <p class="mid_type_title_dot"></p> | ||
219 | + <p>内容</p> | ||
220 | + </div> | ||
221 | + <!--介绍--> | ||
222 | + <div class="mid_type_intro"> | ||
223 | + 点击上传相关图片,不多于6张 | ||
224 | + </div> | ||
180 | 225 | ||
181 | - <!--内容--> | ||
182 | - <div class="mid_type"> | ||
183 | - <!--标题--> | ||
184 | - <div class="mid_type_title"> | ||
185 | - <!--圆点--> | ||
186 | - <p class="mid_type_title_dot"></p> | ||
187 | - <p>内容</p> | ||
188 | - </div> | ||
189 | - <!--内容--> | ||
190 | - <div class="mid_type_items"> | ||
191 | - <!--标题--> | ||
192 | - <div class="mid_type_items_title"> | ||
193 | - <input type="text" placeholder="标题"> | ||
194 | - </div> | ||
195 | - <!--内容--> | ||
196 | - <div class="mid_type_items_area"> | ||
197 | - <textarea placeholder="内容不少于100字"></textarea> | ||
198 | - </div> | ||
199 | - </div> | ||
200 | - </div> | 226 | + <!--图片列表--> |
227 | + <div class="mid_pic_items"> | ||
228 | + <div class="mid_pic_item"> | ||
229 | + <img src="images/back_1.png"> | ||
230 | + <div class="close_button"> | ||
231 | + <div class="iconfont icon-guanbi"></div> | ||
232 | + </div> | ||
233 | + </div> | ||
234 | + <div class="mid_pic_item"> | ||
235 | + <img src="images/back_1.png"> | ||
236 | + <div class="close_button"> | ||
237 | + <div class="iconfont icon-guanbi"></div> | ||
238 | + </div> | ||
239 | + </div> | ||
240 | + <div class="mid_pic_item"> | ||
241 | + <img src="images/back_1.png"> | ||
242 | + <div class="close_button"> | ||
243 | + <div class="iconfont icon-guanbi"></div> | ||
244 | + </div> | ||
245 | + </div> | ||
246 | + <div class="mid_pic_item"> | ||
247 | + <img src="images/back_1.png"> | ||
248 | + <div class="close_button"> | ||
249 | + <div class="iconfont icon-guanbi"></div> | ||
250 | + </div> | ||
251 | + </div> | ||
252 | + <div class="mid_pic_item"> | ||
253 | + <img src="images/back_1.png"> | ||
254 | + <div class="close_button"> | ||
255 | + <div class="iconfont icon-guanbi"></div> | ||
256 | + </div> | ||
257 | + </div> | ||
258 | + <div class="mid_pic_item"> | ||
259 | + <img src="images/back_1.png"> | ||
260 | + <div class="close_button"> | ||
261 | + <div class="iconfont icon-guanbi"></div> | ||
262 | + </div> | ||
263 | + </div> | ||
201 | 264 | ||
202 | - <!--图片--> | ||
203 | - <div class="mid_type"> | ||
204 | - <!--标题--> | ||
205 | - <div class="mid_type_title"> | ||
206 | - <!--圆点--> | ||
207 | - <p class="mid_type_title_dot"></p> | ||
208 | - <p>内容</p> | ||
209 | - </div> | ||
210 | - <!--介绍--> | ||
211 | - <div class="mid_type_intro"> | ||
212 | - 点击上传相关图片,不多于6张 | ||
213 | - </div> | 265 | + <div class="mid_pic_set"> |
266 | + <div class="iconfont icon-icon02"></div> | ||
267 | + </div> | ||
268 | + </div> | ||
214 | 269 | ||
215 | - <!--图片列表--> | ||
216 | - <div class="mid_pic_items"> | ||
217 | - <div class="mid_pic_item"> | ||
218 | - <img src="images/back_1.png"> | ||
219 | - <div class="close_button"> | ||
220 | - <div class="iconfont icon-guanbi"></div> | ||
221 | - </div> | ||
222 | - </div> | ||
223 | - <div class="mid_pic_item"> | ||
224 | - <img src="images/back_1.png"> | ||
225 | - <div class="close_button"> | ||
226 | - <div class="iconfont icon-guanbi"></div> | ||
227 | - </div> | ||
228 | - </div> | ||
229 | - <div class="mid_pic_item"> | ||
230 | - <img src="images/back_1.png"> | ||
231 | - <div class="close_button"> | ||
232 | - <div class="iconfont icon-guanbi"></div> | ||
233 | - </div> | ||
234 | - </div> | ||
235 | - <div class="mid_pic_item"> | ||
236 | - <img src="images/back_1.png"> | ||
237 | - <div class="close_button"> | ||
238 | - <div class="iconfont icon-guanbi"></div> | ||
239 | - </div> | ||
240 | - </div> | ||
241 | - <div class="mid_pic_item"> | ||
242 | - <img src="images/back_1.png"> | ||
243 | - <div class="close_button"> | ||
244 | - <div class="iconfont icon-guanbi"></div> | ||
245 | - </div> | ||
246 | - </div> | 270 | + </div> |
247 | 271 | ||
248 | - <div class="mid_pic_set"> | ||
249 | - <div class="iconfont icon-icon02"></div> | ||
250 | - </div> | ||
251 | - </div> | 272 | + <!--联系方式--> |
273 | + <div class="mid_type "> | ||
274 | + <!--标题--> | ||
275 | + <div class="mid_type_title contact_way"> | ||
276 | + <!--圆点--> | ||
277 | + <p class="mid_type_title_dot"></p> | ||
278 | + <p>联系方式</p> | ||
279 | + </div> | ||
280 | + <!--内容--> | ||
281 | + <div class="mid_type_items contact_mid"> | ||
282 | + <!--标题--> | ||
283 | + <div class="mid_type_items_title"> | ||
284 | + <input type="text" placeholder="可输入邮箱/手机号/微信等联系方式"> | ||
285 | + </div> | ||
286 | + <!--提交--> | ||
287 | + <div class="mid_type_items_sub"> | ||
288 | + 提交 | ||
289 | + </div> | ||
290 | + </div> | ||
291 | + </div> | ||
292 | + </div> | ||
252 | 293 | ||
253 | - </div> | 294 | + <!--内容提交--> |
295 | + <div class="mask" style="display: none;"> | ||
296 | + <div class="mask_box submit_height"> | ||
297 | + <div class="mask_submit_text"> | ||
298 | + <p> | ||
299 | + 内容已成功提交,我们将尽快审核。 | ||
300 | + </p> | ||
301 | + <p> | ||
302 | + (结果将通过站内信告知) | ||
303 | + </p> | ||
304 | + </div> | ||
305 | + <div class="mask_submit_bottom"> | ||
306 | + 确定 | ||
307 | + </div> | ||
308 | + </div> | ||
309 | + </div> | ||
254 | 310 | ||
255 | - <!--联系方式--> | ||
256 | - <div class="mid_type "> | ||
257 | - <!--标题--> | ||
258 | - <div class="mid_type_title contact_way"> | ||
259 | - <!--圆点--> | ||
260 | - <p class="mid_type_title_dot"></p> | ||
261 | - <p>联系方式</p> | ||
262 | - </div> | ||
263 | - <!--内容--> | ||
264 | - <div class="mid_type_items contact_mid"> | ||
265 | - <!--标题--> | ||
266 | - <div class="mid_type_items_title"> | ||
267 | - <input type="text" placeholder="可输入邮箱/手机号/微信等联系方式"> | ||
268 | - </div> | ||
269 | - <!--提交--> | ||
270 | - <div class="mid_type_items_sub"> | ||
271 | - 提交 | ||
272 | - </div> | ||
273 | - </div> | ||
274 | - </div> | ||
275 | - </div> | 311 | + </div> |
276 | 312 | ||
277 | - | ||
278 | -</div> | ||
279 | </body> | 313 | </body> |
280 | <script> | 314 | <script> |
281 | - //点击打开菜单 | ||
282 | - $('.icon-caidan').click(function () { | ||
283 | - console.log(11) | ||
284 | - $('.menu_item').slideToggle(); | ||
285 | - // 关闭图片功能 2019.4.8 | ||
286 | - // if($(this).hasClass("icon-caidan")){ | ||
287 | - // $(this).addClass("icon-guanbi"); | ||
288 | - // $(this).removeClass("icon-caidan"); | ||
289 | - // $("body").css("overflow","hidden"); | ||
290 | - // }else{ | ||
291 | - // $(this).removeClass("icon-guanbi"); | ||
292 | - // $(this).addClass("icon-caidan"); | ||
293 | - // $("body").css("overflow","auto"); | ||
294 | - // } | ||
295 | - }) | 315 | + //点击打开菜单 |
316 | + $('.icon-caidan').click(function() { | ||
317 | + console.log(11) | ||
318 | + $('.menu_item').slideToggle(); | ||
319 | + // 关闭图片功能 2019.4.8 | ||
320 | + // if($(this).hasClass("icon-caidan")){ | ||
321 | + // $(this).addClass("icon-guanbi"); | ||
322 | + // $(this).removeClass("icon-caidan"); | ||
323 | + // $("body").css("overflow","hidden"); | ||
324 | + // }else{ | ||
325 | + // $(this).removeClass("icon-guanbi"); | ||
326 | + // $(this).addClass("icon-caidan"); | ||
327 | + // $("body").css("overflow","auto"); | ||
328 | + // } | ||
329 | + }) | ||
330 | + $('.mid_type_items_sub').click(function() { | ||
331 | + $('.mask').show() | ||
332 | + }) | ||
333 | + $('.mask_submit_bottom').click(function() { | ||
334 | + $('.mask').hide() | ||
335 | + }) | ||
336 | + if ($('.mid_pic_item').length = 6) { | ||
337 | + $('.mid_pic_set').hide() | ||
338 | + } else { | ||
339 | + $('.mid_pic_set').show() | ||
340 | + | ||
341 | + } | ||
342 | + //添加图片 | ||
343 | + $('.mid_pic_set').click(function() { | ||
344 | + $(this).before(`<div class="mid_pic_item"> | ||
345 | + <img src="images/back_1.png"> | ||
346 | + <div class="close_button"> | ||
347 | + <div class="iconfont icon-guanbi"></div> | ||
348 | + </div> | ||
349 | + </div>`) | ||
350 | + if ($('.mid_pic_item').length >= 6) { | ||
351 | + $('.mid_pic_set').hide() | ||
352 | + } else { | ||
353 | + $('.mid_pic_set').show() | ||
296 | 354 | ||
355 | + } | ||
356 | + }) | ||
357 | + //删除图片 | ||
297 | 358 | ||
359 | + $('.mid_type .mid_pic_items').on("click", ".close_button", function() { | ||
360 | + $(this).parent().remove() | ||
361 | + if ($('.mid_pic_item').length >= 6) { | ||
362 | + $('.mid_pic_set').hide() | ||
363 | + } else { | ||
364 | + $('.mid_pic_set').show() | ||
365 | + | ||
366 | + } | ||
367 | + }) | ||
368 | + | ||
369 | + $('.mid_type_items_item').click(function() { | ||
370 | + $(".mid_type_items_item").eq($(this).index()).addClass("mid_type_items_item_active").siblings().removeClass('mid_type_items_item_active'); | ||
371 | + }) | ||
298 | 372 | ||
299 | </script> | 373 | </script> |
374 | + | ||
300 | </html> | 375 | </html> |
images/bg.png
0 → 100644
16.7 KB
images/big_bg.png
0 → 100644
25.8 KB
images/bilibili-logo.png
0 → 100644
2.3 KB
images/bottom_bg.png
0 → 100644
6.7 KB
images/close.png
0 → 100644
366 字节
images/e_mail.png
0 → 100644
954 字节
images/instagram.png
0 → 100644
1.5 KB
images/phone.png
0 → 100644
919 字节
images/qq-copy.png
0 → 100644
1.5 KB
images/tian7_facebook.png
0 → 100644
1.5 KB
images/twiter.png
0 → 100644
1.6 KB
images/wechat.png
0 → 100644
1.7 KB
images/youtube.png
0 → 100644
1.6 KB
-
请 注册 或 登录 后发表评论