webfront / videoWeb · 提交

转到一个项目

作者 乔爽
提交 43b473d7c75b6dd104dbf5239514e735e267e41a 1 个父辈 8cd212a2

update

内嵌 并排对比
正在显示 15 个修改的文件 包含 1937 行增加 和 114 行删除
  1 +.dropload-up,.dropload-down{
  2 + position: relative;
  3 + height: 0;
  4 + overflow: hidden;
  5 + font-size: 12px;
  6 + /* 开启硬件加速 */
  7 + -webkit-transform:translateZ(0);
  8 + transform:translateZ(0);
  9 +}
  10 +.dropload-down{
  11 + height: 50px;
  12 +}
  13 +.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
  14 + height: 50px;
  15 + line-height: 50px;
  16 + text-align: center;
  17 +}
  18 +.dropload-load .loading{
  19 + display: inline-block;
  20 + height: 15px;
  21 + width: 15px;
  22 + border-radius: 100%;
  23 + margin: 6px;
  24 + border: 2px solid #666;
  25 + border-bottom-color: transparent;
  26 + vertical-align: middle;
  27 + -webkit-animation: rotate 0.75s linear infinite;
  28 + animation: rotate 0.75s linear infinite;
  29 +}
  30 +@-webkit-keyframes rotate {
  31 + 0% {
  32 + -webkit-transform: rotate(0deg);
  33 + }
  34 + 50% {
  35 + -webkit-transform: rotate(180deg);
  36 + }
  37 + 100% {
  38 + -webkit-transform: rotate(360deg);
  39 + }
  40 +}
  41 +@keyframes rotate {
  42 + 0% {
  43 + transform: rotate(0deg);
  44 + }
  45 + 50% {
  46 + transform: rotate(180deg);
  47 + }
  48 + 100% {
  49 + transform: rotate(360deg);
  50 + }
  51 +}
  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{
  106 +
  107 + font-size: 0.48rem;
  108 + font-family:PingFang-SC-Bold;
  109 + font-weight:bold;
  110 + color:rgba(51,51,51,1);
  111 +
  112 +}
  113 +.mid_adv{
  114 + width: 3.4rem;
  115 + margin-top: 0.67rem;
  116 + display: flex;
  117 + justify-content: space-between;
  118 +}
  119 +.mid_adv_left{
  120 + width: 1.5rem;
  121 + height: 0.4rem;
  122 + background:rgba(192,44,44,1);
  123 + border-radius: 0.04rem;
  124 + border: 1px solid rgba(192,44,44,1);
  125 +
  126 + font-size: 0.2rem;
  127 + font-family:PingFang-SC-Medium;
  128 + font-weight:500;
  129 + color:rgba(255,255,255,1);
  130 + line-height: 0.36rem;
  131 + text-align: center;
  132 +}
  133 +.mid_adv_right{
  134 + width: 1.5rem;
  135 + height: 0.4rem;
  136 + background:rgba(192,44,44,0);
  137 + border:1px solid rgba(153, 153, 153, 1);
  138 + border-radius: 0.04rem;
  139 +
  140 +
  141 + font-size: 0.2rem;
  142 + font-family:PingFang-SC-Medium;
  143 + font-weight:500;
  144 + color:rgba(51,51,51,1);
  145 + line-height: 0.36rem;
  146 + text-align: center;
  147 +}
  148 +.mid_area{
  149 + margin-top: 0.32rem;
  150 + width: 6.2rem;
  151 + height: 2.62rem;
  152 + background:rgba(166,16,16,0);
  153 + border:1px solid rgba(153, 153, 153, 1);
  154 + border-radius: 0.04rem;
  155 + box-sizing: border-box;
  156 + padding: 0.2rem 0.2rem;
  157 +}
  158 +.mid_area textarea{
  159 + width: 100%;
  160 + height: 100%;
  161 + outline: none;
  162 + border: none;
  163 +}
  164 +.mid_area textarea::placeholder{
  165 + color: #999999;
  166 +}
  167 +.mid_way{
  168 + margin-top: 0.67rem;
  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.36rem;
  174 +}
  175 +.mid_input{
  176 + border-bottom: 1px solid #A61010;
  177 +}
  178 +.mid_input input{
  179 + width: 100%;
  180 + height: 0.8rem;
  181 + outline: none;
  182 + border: none;
  183 + font-size: 0.3rem;
  184 +}
  185 +.mid_input input::placeholder{
  186 + color: #999999;
  187 +}
  188 +.mid_sub{
  189 + width: 3.5rem;
  190 + height: 0.5rem;
  191 + background:rgba(192,44,44,1);
  192 + border-radius:4px;
  193 +
  194 + margin-top: 1.26rem;
  195 + font-size: 0.26rem;
  196 + font-family:PingFang-SC-Bold;
  197 + font-weight:bold;
  198 + color:rgba(255,255,255,1);
  199 + line-height: 0.5rem;
  200 + text-align: center;
  201 +}
  202 +.sub{
  203 + display: flex;
  204 + justify-content: center;
  205 +}
  206 +
@@ -95,149 +95,132 @@ @@ -95,149 +95,132 @@
95 .top_d_input::placeholder{ 95 .top_d_input::placeholder{
96 color: #999999; 96 color: #999999;
97 } 97 }
98 -/*---------- 信息框 ----------*/ 98 +
  99 +
99 .mid{ 100 .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; 101 + width: 7.5rem;
  102 + display: flex;
  103 + margin-top: 0.6rem;
  104 + justify-content: center;
  105 + overflow-x: scroll;
  106 +}
  107 +.mid_item{
106 display: flex; 108 display: flex;
  109 + flex-flow: column;
  110 + align-items: center;
  111 + border-bottom: 1px solid #e8e8e8;
  112 + margin-left: 0.38rem;
  113 +}
  114 +.mid_item_pic{
  115 + width: 1.6rem;
  116 + height: 1.8rem;
  117 + display: flex;
  118 +}
  119 +
  120 +.mid_item_pic img{
  121 + width: 100%;
  122 + height: 100%;
  123 +}
  124 +.mid_item_text{
  125 +
  126 + font-size: 0.16rem;
  127 + font-family:MicrosoftYaHei;
  128 + font-weight:400;
  129 + color:rgba(51,51,51,1);
  130 + /*line-height:30px;*/
  131 + margin-top: 0.1rem;
  132 + margin-bottom: 0.1rem;
  133 +}
  134 +.bottom{
  135 + display: flex;
  136 + margin-top: 0.3rem;
  137 +}
  138 +.bottom_top{
  139 + display: flex;
  140 + border-bottom: 1px solid #e8e8e8;
  141 + height: 1.8rem;
107 align-items: center; 142 align-items: center;
108 - box-sizing: border-box;  
109 - padding-left: 0.3rem;  
110 } 143 }
111 -.mid_left{ 144 +.bottom_top_pic{
112 width: 0.9rem; 145 width: 0.9rem;
113 height: 0.9rem; 146 height: 0.9rem;
114 display: flex; 147 display: flex;
115 - /*align-items: center;*/  
116 - border-radius: 50%;  
117 -  
118 } 148 }
119 -.mid_left img{ 149 +.bottom_top_pic img{
120 width: 100%; 150 width: 100%;
121 height: 100%; 151 height: 100%;
122 - border-radius: 50%;  
123 } 152 }
124 -.mid_right{  
125 - margin-left: 0.3rem; 153 +.bottom_top_text{
  154 + display: flex;
  155 + flex-flow: column;
  156 + margin-left: 0.33rem;
126 } 157 }
127 -.mid_right_big{ 158 +.bottom_top_text_big{
128 159
129 font-size: 0.36rem; 160 font-size: 0.36rem;
130 font-family:PingFang-SC-Bold; 161 font-family:PingFang-SC-Bold;
131 font-weight:bold; 162 font-weight:bold;
132 color:rgba(51,51,51,1); 163 color:rgba(51,51,51,1);
133 - line-height: 0.24rem;  
134 - display: flex; 164 + /*line-height:24px;*/
  165 + line-height: 0.45rem;
135 } 166 }
136 -.mid_right_small{  
137 - margin-top: 0.2rem;  
138 - font-size: 0.2rem; 167 +.bottom_top_text_small{
  168 +
  169 + font-size: 0.24rem;
139 font-family:PingFang-SC-Medium; 170 font-family:PingFang-SC-Medium;
140 font-weight:500; 171 font-weight:500;
141 color:rgba(51,51,51,1); 172 color:rgba(51,51,51,1);
142 - line-height: 0.24rem;  
143 - display: flex; 173 + line-height: 0.45rem;
144 } 174 }
145 -.item{  
146 - width: 6.86rem; 175 +.bottom_top_b{
  176 + margin-top: 0.13rem;
147 display: flex; 177 display: flex;
148 - justify-content: space-around;  
149 - margin-top: 0.6rem; 178 + width: 4.3rem;
  179 + justify-content: space-between;
150 } 180 }
151 -.item_m{ 181 +.bottom_top_b_left{
152 182
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; 183 + font-size: 0.2rem;
  184 + font-family:PingFang-SC-Medium;
  185 + font-weight:500;
  186 + color:rgba(51,51,51,1);
  187 + /*line-height:24px;*/
159 } 188 }
160 -/*.item_right{*/  
161 -  
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;*/  
168 -/*}*/  
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%; 189 +.bottom_top_b_att{
  190 + width: 1rem;
  191 + height: 0.28rem;
  192 + background: #C02C2C;
  193 + border-radius: 0.04rem;
175 194
  195 + font-size: 0.2rem;
  196 + line-height: 0.28rem;
  197 + text-align: center;
  198 + color: #ffffff;
  199 +}
176 200
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;  
185 -  
186 - position: absolute;  
187 - top: -0.18rem;  
188 - left: 0.6rem;  
189 -}  
190 -.item_color{  
191 - color: #A61010;  
192 -}  
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;*/  
201 -}  
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 201
209 - line-height: 0.36rem;  
210 -}  
211 -.message_box{  
212 - margin-top: 0.2rem;  
213 -}  
214 -.color_red{  
215 - color: #A61010;  
216 -}  
217 -/*审核消息*/  
218 -.audit{  
219 - margin-top: 0.66rem;  
220 - width: 6.86rem; 202 +/*底部菜单栏*/
  203 +.menu{
  204 + width: 7.5rem;
  205 + height: 1.58rem;
  206 + position: fixed;
  207 + bottom: 0;
221 } 208 }
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; 209 +.menu_top{
  210 + display: flex;
  211 + justify-content: space-around;
229 } 212 }
230 -.audit_big:first-child{  
231 - margin-top: 0; 213 +.menu_top_item{
  214 + display: flex;
  215 + align-items: center;
232 } 216 }
233 -.audit_big:last-child{  
234 - margin-bottom: 0.6rem; 217 +.menu_bottom{
  218 + display: flex;
  219 + justify-content: space-between;
  220 + box-sizing: border-box;
  221 + padding: 0 0.3rem;
235 } 222 }
236 -.audit_small{  
237 - 223 +.menu_bottom_item{
238 font-size: 0.24rem; 224 font-size: 0.24rem;
239 - font-family:MicrosoftYaHei;  
240 - font-weight:400;  
241 - color:rgba(51,51,51,1);  
242 - line-height: 0.36rem; 225 + line-height: 2;
243 } 226 }
  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.7rem;*/
  101 + font-size: 0.3rem;
  102 + font-family:PingFang-SC-Medium;
  103 + font-weight:500;
  104 + color:rgba(51,51,51,1);
  105 + padding: 0.7rem 0.3rem;
  106 + line-height: 0.36rem;
  107 +}
  108 +.color_red{
  109 + color: #A61010;
  110 +}
  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 +.banner{
  100 + margin-top: 0.17rem;
  101 + width: 7.5rem;
  102 + height: 3.6rem;
  103 + display: flex;
  104 +}
  105 +.banner img{
  106 + width: 100%;
  107 + height: 100%;
  108 +}
  109 +.items{
  110 + width: 7.5rem;
  111 + display: flex;
  112 + margin-top: 0.3rem;
  113 +
  114 +
  115 + overflow-x: scroll;
  116 + overflow-y: hidden;
  117 +}
  118 +.item{
  119 + display: flex;
  120 + flex-flow: column;
  121 +
  122 + width: 2rem;
  123 + height: 1.5rem;
  124 + background:rgba(255,255,255,1);
  125 + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
  126 + border-radius: 0.06rem;
  127 + margin-left: 0.1rem;
  128 +}
  129 +.item_pic{
  130 + width: 2rem;
  131 + height: 1.1rem;
  132 + display: flex;
  133 +
  134 +}
  135 +.item_pic img{
  136 + width: 100%;
  137 + height: 100%;
  138 + border-radius: 0.06rem 0.06rem 0 0;
  139 +}
  140 +.item_text{
  141 + height: 0.4rem;
  142 + line-height: 0.4rem;
  143 + font-size: 0.2rem;
  144 + font-family:PingFang-SC-Medium;
  145 + font-weight:500;
  146 + color:rgba(51,51,51,1);
  147 + /*line-height:48px;*/
  148 + box-sizing: border-box;
  149 + text-overflow: ellipsis;
  150 + display: -webkit-box;
  151 + -webkit-box-orient: vertical;
  152 + -webkit-line-clamp: 1;
  153 + overflow: hidden;
  154 +
  155 + box-sizing: border-box;
  156 + padding: 0 0.16rem;
  157 +}
  158 +.mid{
  159 + /*margin-top: 0.3rem;*/
  160 + width: 6.86rem;
  161 + display: flex;
  162 + flex-flow: column;
  163 + border-bottom: 1px solid #e8e8e8;
  164 + box-sizing: border-box;
  165 + padding: 0.3rem;
  166 +}
  167 +.mid_title{
  168 + font-size: 0.3rem;
  169 + font-family:PingFang-SC-Bold;
  170 + font-weight:bold;
  171 + color:rgba(51,51,51,1);
  172 + line-height: 0.3rem;
  173 +}
  174 +.mid_infor{
  175 + display: flex;
  176 + justify-content: space-between;
  177 + margin-top: 0.15rem;
  178 +}
  179 +.mid_infor_left{
  180 + display: flex;
  181 + align-items: center;
  182 +}
  183 +.mid_infor_left_pic{
  184 + width: 0.4rem;
  185 + height: 0.4rem;
  186 + border-radius: 0.2rem;
  187 + display: flex;
  188 +}
  189 +.mid_infor_left_pic img{
  190 + width: 100%;
  191 + height: 100%;
  192 + border-radius: 0.2rem;
  193 +}
  194 +.mid_infor_left_text{
  195 +
  196 + font-size: 0.24rem;
  197 + font-family:PingFang-SC-Medium;
  198 + font-weight:500;
  199 + color:rgba(51,51,51,1);
  200 + /*line-height:30px;*/
  201 + margin-left: 0.2rem;
  202 +}
  203 +.mid_infor_right{
  204 +
  205 + font-size: 0.2rem;
  206 + font-family:PingFang-SC-Medium;
  207 + font-weight:500;
  208 + color:rgba(153,153,153,1);
  209 + line-height:30px;
  210 +}
  211 +.mid_text{
  212 +
  213 + font-size: 0.2rem;
  214 + font-family:PingFang-SC-Medium;
  215 + font-weight:500;
  216 + color:rgba(51,51,51,1);
  217 + line-height: 0.3rem;
  218 + box-sizing: border-box;
  219 + padding: 0.2rem 0;
  220 +}
  221 +.mid_pic{
  222 + width: 6.86rem;
  223 + height: 2.6rem;
  224 + display: flex;
  225 +}
  226 +.mid_pic img{
  227 + width: 100%;
  228 + height: 100%;
  229 +}
  230 +.mid_people{
  231 + display: flex;
  232 + flex-flow: column;
  233 + margin-top: 0.2rem;
  234 +}
  235 +.mid_people_title{
  236 +
  237 + font-size: 0.2rem;
  238 + font-family:PingFang-SC-Medium;
  239 + font-weight:500;
  240 + color:rgba(51,51,51,1);
  241 + line-height: 0.3rem;
  242 +}
  243 +.mid_people_name{
  244 + margin-top: 0.14rem;
  245 + margin-left: 0.14rem;
  246 + font-size: 0.16rem;
  247 + font-family:PingFang-SC-Medium;
  248 + font-weight:500;
  249 + color:rgba(51,51,51,1);
  250 + line-height: 0.24rem;
  251 +}
  252 +
  253 +.share{
  254 + display: flex;
  255 + margin-top: 0.3rem;
  256 +}
  257 +.share_items{
  258 + width: 6.86rem;
  259 + display: flex;
  260 + justify-content: space-between;
  261 +}
  262 +.share_item{
  263 + /*width: 1.5rem;*/
  264 + height: 0.3rem;
  265 + background:rgba(232,232,232,0);
  266 + border:1px solid rgba(153, 153, 153, 1);
  267 + border-radius: 0.04rem;
  268 +
  269 +
  270 + font-size: 0.18rem;
  271 + font-family:MicrosoftYaHei;
  272 + font-weight:400;
  273 + color:rgba(51,51,51,1);
  274 + line-height: 0.3rem;
  275 + text-align: center;
  276 + padding: 0 0.3rem;
  277 +}
  278 +
  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 +.banner{
  100 + margin-top: 0.2rem;
  101 + width: 7.5rem;
  102 + height: 3rem;
  103 + display: flex;
  104 +}
  105 +.banner img{
  106 + width: 100%;
  107 + height: 100%;
  108 +}
  109 +.items{
  110 + margin-top: 0.3rem;
  111 + display: flex;
  112 + flex-flow: wrap;
  113 + justify-content: space-between;
  114 + box-sizing: border-box;
  115 + padding: 0 0.34rem;
  116 + margin-bottom: 0.4rem;
  117 +}
  118 +.item{
  119 + margin-top: 0.2rem;
  120 + display: flex;
  121 + flex-flow: column;
  122 + width: 3.2rem;
  123 + height: 3.2rem;
  124 + background:rgba(255,255,255,1);
  125 + box-shadow:0rem 1rem 6rem 0rem rgba(102,102,102,0.14);
  126 + border-radius: 0.1rem;
  127 +}
  128 +.item_top{
  129 + width: 3.2rem;
  130 + height: 2rem;
  131 + background:linear-gradient(0deg,rgba(0,0,0,0.5) 0%,rgba(255,255,255,0) 100%);
  132 + border-radius: 0.1rem 0.1rem 0rem 0rem;
  133 +
  134 + display: flex;
  135 + position: relative;
  136 +}
  137 +.item_top img{
  138 + width: 100%;
  139 + height: 100%;
  140 + border-radius: 0.1rem 0.1rem 0rem 0rem;
  141 +}
  142 +.item_top_box{
  143 + width: 100%;
  144 + position: absolute;
  145 + bottom: 0;
  146 + display: flex;
  147 + justify-content: space-between;
  148 + box-sizing: border-box;
  149 + padding: 0 0.2rem;
  150 +}
  151 +.item_top_box_item{
  152 +
  153 + font-size: 0.16rem;
  154 + font-family:PingFang-SC-Medium;
  155 + font-weight:500;
  156 + color:rgba(255,255,255,1);
  157 + line-height:24px;
  158 + text-shadow:0rem 1rem 2rem rgba(82,82,82,0.45);
  159 +}
  160 +.item_bottom{
  161 + display: flex;
  162 + flex-flow: column;
  163 + box-sizing: border-box;
  164 + padding: 0.2rem 0.22rem 0.2rem .16rem;
  165 +}
  166 +.item_bottom_t{
  167 +
  168 + font-size: 0.24rem;
  169 + font-family:PingFang-SC-Medium;
  170 + font-weight:500;
  171 + color:rgba(51,51,51,1);
  172 + line-height: 0.24rem;
  173 + text-align: center;
  174 +}
  175 +.item_bottom_b{
  176 +
  177 + font-size: 0.16rem;
  178 + font-family:MicrosoftYaHei;
  179 + font-weight:400;
  180 + color:rgba(51,51,51,1);
  181 + line-height: 0.24rem;
  182 +
  183 + box-sizing: border-box;
  184 + text-overflow: ellipsis;
  185 + display: -webkit-box;
  186 + -webkit-box-orient: vertical;
  187 + -webkit-line-clamp: 2;
  188 + overflow: hidden;
  189 +
  190 +}
  191 +
  1 +/**
  2 + * dropload
  3 + * 西门(http://ons.me/526.html)
  4 + * 0.9.1(161205)
  5 + */
  6 +!function (a) {
  7 + "use strict";
  8 +
  9 + function g(a) {
  10 + a.touches || (a.touches = a.originalEvent.touches)
  11 + }
  12 + function h(a, b) {
  13 + b._startY = a.touches[0].pageY, b.touchScrollTop = b.$scrollArea.scrollTop()
  14 + }
  15 + function i(b, c) {
  16 + c._curY = b.touches[0].pageY, c._moveY = c._curY - c._startY, c._moveY > 0 ? c.direction = "down" : c._moveY < 0 && (c.direction = "up");
  17 + var d = Math.abs(c._moveY);
  18 + "" != c.opts.loadUpFn && c.touchScrollTop <= 0 && "down" == c.direction && !c.isLockUp && (b.preventDefault(), c.$domUp = a("." + c.opts.domUp.domClass), c.upInsertDOM || (c.$element.prepend('<div class="' + c.opts.domUp.domClass + '"></div>'), c.upInsertDOM = !0), n(c.$domUp, 0), d <= c.opts.distance ? (c._offsetY = d, c.$domUp.html(c.opts.domUp.domRefresh)) : d > c.opts.distance && d <= 2 * c.opts.distance ? (c._offsetY = c.opts.distance + .5 * (d - c.opts.distance), c.$domUp.html(c.opts.domUp.domUpdate)) : c._offsetY = c.opts.distance + .5 * c.opts.distance + .2 * (d - 2 * c.opts.distance), c.$domUp.css({height: c._offsetY}))
  19 + }
  20 +
  21 + function j(b) {
  22 + var c = Math.abs(b._moveY);
  23 + "" != b.opts.loadUpFn && b.touchScrollTop <= 0 && "down" == b.direction && !b.isLockUp && (n(b.$domUp, 300), c > b.opts.distance ? (b.$domUp.css({height: b.$domUp.children().height()}), b.$domUp.html(b.opts.domUp.domLoad), b.loading = !0, b.opts.loadUpFn(b)) : b.$domUp.css({height: "0"}).on("webkitTransitionEnd mozTransitionEnd transitionend", function () {
  24 + b.upInsertDOM = !1, a(this).remove()
  25 + }), b._moveY = 0)
  26 + }
  27 +
  28 + function k(a) {
  29 + "" != a.opts.loadDownFn && a.opts.autoLoad && a._scrollContentHeight - a._threshold <= a._scrollWindowHeight && m(a)
  30 + }
  31 +
  32 + function l(a) {
  33 + a._scrollContentHeight = a.opts.scrollArea == b ? e.height() : a.$element[0].scrollHeight
  34 + }
  35 +
  36 + function m(a) {
  37 + a.direction = "up", a.$domDown.html(a.opts.domDown.domLoad), a.loading = !0, a.opts.loadDownFn(a)
  38 + }
  39 +
  40 + function n(a, b) {
  41 + a.css({"-webkit-transition": "all " + b + "ms", transition: "all " + b + "ms"})
  42 + }
  43 +
  44 + var f, b = window, c = document, d = a(b), e = a(c);
  45 + a.fn.dropload = function (a) {
  46 + return new f(this, a)
  47 + }, f = function (a, b) {
  48 + var c = this;
  49 + c.$element = a, c.upInsertDOM = !1, c.loading = !1, c.isLockUp = !1, c.isLockDown = !1, c.isData = !0, c._scrollTop = 0, c._threshold = 0, c.init(b)
  50 + }, f.prototype.init = function (f) {
  51 + var l = this;
  52 + l.opts = a.extend(!0, {}, {
  53 + scrollArea: l.$element,
  54 + domUp: {
  55 + domClass: "dropload-up",
  56 + domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
  57 + domUpdate: '<div class="dropload-update">↑释放更新</div>',
  58 + domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  59 + },
  60 + domDown: {
  61 + domClass: "dropload-down",
  62 + domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
  63 + domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  64 + domNoData: '<div class="dropload-noData">暂无数据</div>'
  65 + },
  66 + autoLoad: !0,
  67 + distance: 50,
  68 + threshold: "",
  69 + loadUpFn: "",
  70 + loadDownFn: ""
  71 + }, f), "" != l.opts.loadDownFn && (l.$element.append('<div class="' + l.opts.domDown.domClass + '">' + l.opts.domDown.domRefresh + "</div>"), l.$domDown = a("." + l.opts.domDown.domClass)), l._threshold = l.$domDown && "" === l.opts.threshold ? Math.floor(1 * l.$domDown.height() / 3) : l.opts.threshold, l.opts.scrollArea == b ? (l.$scrollArea = d, l._scrollContentHeight = e.height(), l._scrollWindowHeight = c.documentElement.clientHeight) : (l.$scrollArea = l.opts.scrollArea, l._scrollContentHeight = l.$element[0].scrollHeight, l._scrollWindowHeight = l.$element.height()), k(l), d.on("resize", function () {
  72 + clearTimeout(l.timer), l.timer = setTimeout(function () {
  73 + l._scrollWindowHeight = l.opts.scrollArea == b ? b.innerHeight : l.$element.height(), k(l)
  74 + }, 150)
  75 + }), l.$element.on("touchstart", function (a) {
  76 + l.loading || (g(a), h(a, l))
  77 + }), l.$element.on("touchmove", function (a) {
  78 + l.loading || (g(a, l), i(a, l))
  79 + }), l.$element.on("touchend", function () {
  80 + l.loading || j(l)
  81 + }), l.$scrollArea.on("scroll", function () {
  82 + l._scrollTop = l.$scrollArea.scrollTop(), "" != l.opts.loadDownFn && !l.loading && !l.isLockDown && l._scrollContentHeight - l._threshold <= l._scrollWindowHeight + l._scrollTop && m(l)
  83 + })
  84 + }, f.prototype.lock = function (a) {
  85 + var b = this;
  86 + void 0 === a ? "up" == b.direction ? b.isLockDown = !0 : "down" == b.direction ? b.isLockUp = !0 : (b.isLockUp = !0, b.isLockDown = !0) : "up" == a ? b.isLockUp = !0 : "down" == a && (b.isLockDown = !0, b.direction = "up")
  87 + }, f.prototype.unlock = function () {
  88 + var a = this;
  89 + a.isLockUp = !1, a.isLockDown = !1, a.direction = "up"
  90 + }, f.prototype.noData = function (a) {
  91 + var b = this;
  92 + void 0 === a || 1 == a ? b.isData = !1 : 0 == a && (b.isData = !0)
  93 + }, f.prototype.resetload = function () {
  94 + var b = this;
  95 + "down" == b.direction && b.upInsertDOM ? b.$domUp.css({height: "0"}).on("webkitTransitionEnd mozTransitionEnd transitionend", function () {
  96 + b.loading = !1, b.upInsertDOM = !1, a(this).remove(), l(b)
  97 + }) : "up" == b.direction && (b.loading = !1, b.isData ? (b.$domDown.html(b.opts.domDown.domRefresh), l(b), k(b)) : b.$domDown.html(b.opts.domDown.domNoData))
  98 + }
  99 +}(window.Zepto || window.jQuery);
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<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" />
  7 +
  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/lxwm.css">
  11 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7sk198wo5xx.css">
  12 + <script src="js/base.js"></script>
  13 + <script src="js/jquery.min.js"></script>
  14 +
  15 + <style>
  16 + .icon-caidan{
  17 + font-size: 0.5rem;
  18 + }
  19 + .icon-magnifier{
  20 + color: #999999;
  21 + }
  22 +
  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 +
  52 + /*底部菜单*/
  53 + .font_s{
  54 + font-size: 0.4rem;
  55 + color: #A61010;
  56 + }
  57 + .icon-bilibilidonghua{
  58 + font-size: 0.8rem;
  59 + }
  60 +
  61 + </style>
  62 +</head>
  63 +
  64 +<body>
  65 +<div class="container">
  66 + <div class="top">
  67 + <!--顶部菜单-->
  68 + <div class="top_t">
  69 + <!--左-->
  70 + <div class="top_t_left">
  71 + <!--中文字-->
  72 + <div class="top_t_left_text">
  73 + 中
  74 + </div>
  75 + <!--菜单图标-->
  76 + <div class="iconfont icon-caidan"></div>
  77 + </div>
  78 + <!--中-->
  79 + <div class="top_t_middle">
  80 + <img src="images/peke.png">
  81 + </div>
  82 + <!--右-->
  83 + <div class="top_t_right">
  84 + <!--铃声-->
  85 + <div class="iconfont icon-10">
  86 + <!--小红点-->
  87 + <div class="top_dot"></div>
  88 + </div>
  89 + <!--头像-->
  90 + <div class="top_t_right_pic">
  91 + <img src="images/1.png">
  92 + </div>
  93 + </div>
  94 + </div>
  95 + <!--底部搜索-->
  96 + <div class="top_d">
  97 + <div class="iconfont icon-magnifier"></div>
  98 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  99 + </div>
  100 + </div>
  101 +
  102 + <div class="mid">
  103 + <div class="mid_title">
  104 + 联系我们
  105 + </div>
  106 + <div class="mid_adv">
  107 + <div class="mid_adv_left">
  108 + 咨询/建议
  109 + </div>
  110 + <div class="mid_adv_right">
  111 + 商务合作
  112 + </div>
  113 + </div>
  114 + <div class="mid_area">
  115 + <textarea placeholder="请填写内容"></textarea>
  116 + </div>
  117 + <div class="mid_way">
  118 + 联系方式
  119 + </div>
  120 + <div class="mid_input">
  121 + <input placeholder="请输入邮箱/手机号/微信等联系方式">
  122 + </div>
  123 + <div class="sub">
  124 + <div class="mid_sub">
  125 + 提交
  126 + </div>
  127 + </div>
  128 + </div>
  129 +
  130 +</div>
  131 +</body>
  132 +<script>
  133 + //标题切换
  134 + $('.item_m').click(function () {
  135 + var index = $(this).index()
  136 +
  137 + $(this).addClass('item_color').siblings(".item_m").removeClass('item_color')
  138 +
  139 +
  140 + //内容切换
  141 + var dataid = $(this).attr("data-id");
  142 + if(dataid == 1){
  143 + $(".message").show();
  144 + $('.audit').hide();
  145 + }else {
  146 + $(".audit").show();
  147 + $(".message").hide();
  148 + }
  149 +
  150 +
  151 +
  152 + })
  153 +</script>
  154 +</html>
@@ -7,8 +7,8 @@ @@ -7,8 +7,8 @@
7 7
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9 <link rel="stylesheet" type="text/css" href="css/common.css"> 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"> 10 + <link rel="stylesheet" type="text/css" href="css/search.css">
  11 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7sk198wo5xx.css">
12 <script src="js/base.js"></script> 12 <script src="js/base.js"></script>
13 <script src="js/jquery.min.js"></script> 13 <script src="js/jquery.min.js"></script>
14 14
@@ -48,6 +48,16 @@ @@ -48,6 +48,16 @@
48 .margin_t{ 48 .margin_t{
49 margin-top: 0.1rem; 49 margin-top: 0.1rem;
50 } 50 }
  51 +
  52 + /*底部菜单*/
  53 + .font_s{
  54 + font-size: 0.4rem;
  55 + color: #A61010;
  56 + }
  57 + .icon-bilibilidonghua{
  58 + font-size: 0.8rem;
  59 + }
  60 +
51 </style> 61 </style>
52 </head> 62 </head>
53 63
@@ -90,7 +100,131 @@ @@ -90,7 +100,131 @@
90 </div> 100 </div>
91 101
92 <!--图片列表--> 102 <!--图片列表-->
93 - <div class=""></div> 103 + <div class="mid">
  104 + <div class="mid_item">
  105 + <!--图片-->
  106 + <div class="mid_item_pic">
  107 + <img src="images/1.png">
  108 + </div>
  109 + <!--文字-->
  110 + <div class="mid_item_text">
  111 + 某某某
  112 + </div>
  113 + </div>
  114 + <div class="mid_item">
  115 + <!--图片-->
  116 + <div class="mid_item_pic">
  117 + <img src="images/1.png">
  118 + </div>
  119 + <!--文字-->
  120 + <div class="mid_item_text">
  121 + 某某某
  122 + </div>
  123 + </div>
  124 + <div class="mid_item">
  125 + <!--图片-->
  126 + <div class="mid_item_pic">
  127 + <img src="images/1.png">
  128 + </div>
  129 + <!--文字-->
  130 + <div class="mid_item_text">
  131 + 某某某
  132 + </div>
  133 + </div>
  134 + <div class="mid_item">
  135 + <!--图片-->
  136 + <div class="mid_item_pic">
  137 + <img src="images/1.png">
  138 + </div>
  139 + <!--文字-->
  140 + <div class="mid_item_text">
  141 + 某某某
  142 + </div>
  143 + </div>
  144 + <div class="mid_item">
  145 + <!--图片-->
  146 + <div class="mid_item_pic">
  147 + <img src="images/1.png">
  148 + </div>
  149 + <!--文字-->
  150 + <div class="mid_item_text">
  151 + 某某某
  152 + </div>
  153 + </div>
  154 + </div>
  155 +
  156 + <!--关注人信息-->
  157 + <div class="bottom">
  158 + <div class="bottom_top">
  159 + <div class="bottom_top_pic">
  160 + <img src="images/1.png">
  161 + </div>
  162 + <!--文字-->
  163 + <div class="bottom_top_text">
  164 + <p class="bottom_top_text_big">
  165 + 皮还是皮不过我的你
  166 + </p>
  167 + <p class="bottom_top_text_small">
  168 + 不要太皮哈
  169 + </p>
  170 + <!--关注，贡献，关注-->
  171 + <div class="bottom_top_b">
  172 + <div class="bottom_top_b_left">
  173 + 38个关注
  174 + </div>
  175 + <div class="bottom_top_b_left">
  176 + 25个贡献
  177 + </div>
  178 + <!--关注-->
  179 + <div class="bottom_top_b_att">
  180 + 关注
  181 + </div>
  182 + </div>
  183 + </div>
  184 + </div>
  185 + </div>
  186 +
  187 + <!--底部菜单栏-->
  188 + <div class="menu">
  189 + <div class="menu_top">
  190 + <div class="menu_top_item">
  191 + <div class="iconfont icon-qietu11 font_s"></div>
  192 + </div>
  193 + <div class="menu_top_item">
  194 + <div class="iconfont icon-weixin font_s"></div>
  195 + </div>
  196 + <div class="menu_top_item">
  197 + <div class="iconfont icon-tuite font_s"></div>
  198 + </div>
  199 + <div class="menu_top_item">
  200 + <div class="iconfont icon-bilibilidonghua font_s"></div>
  201 + </div>
  202 + <div class="menu_top_item">
  203 + <div class="iconfont icon-NGlianshu font_s"></div>
  204 + </div>
  205 + <div class="menu_top_item">
  206 + <div class="iconfont icon-youtube font_s"></div>
  207 + </div>
  208 + <div class="menu_top_item">
  209 + <div class="iconfont icon-CD font_s"></div>
  210 + </div>
  211 +
  212 + </div>
  213 + <div class="menu_bottom">
  214 + <div class="menu_bottom_item">
  215 + 隐私协议
  216 + </div>
  217 + <div class="menu_bottom_item">
  218 + 关于我们
  219 + </div>
  220 + <div class="menu_bottom_item">
  221 + 联系我们
  222 + </div>
  223 + <div class="menu_bottom_item">
  224 + 商店
  225 + </div>
  226 + </div>
  227 + </div>
94 228
95 </div> 229 </div>
96 </body> 230 </body>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<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" />
  7 +
  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/search_no.css">
  11 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7sk198wo5xx.css">
  12 + <script src="js/base.js"></script>
  13 + <script src="js/jquery.min.js"></script>
  14 +
  15 + <style>
  16 + .icon-caidan{
  17 + font-size: 0.5rem;
  18 + }
  19 + .icon-magnifier{
  20 + color: #999999;
  21 + }
  22 +
  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 +
  52 + /*底部菜单*/
  53 + .font_s{
  54 + font-size: 0.4rem;
  55 + color: #A61010;
  56 + }
  57 + .icon-bilibilidonghua{
  58 + font-size: 0.8rem;
  59 + }
  60 +
  61 + </style>
  62 +</head>
  63 +
  64 +<body>
  65 +<div class="container">
  66 + <div class="top">
  67 + <!--顶部菜单-->
  68 + <div class="top_t">
  69 + <!--左-->
  70 + <div class="top_t_left">
  71 + <!--中文字-->
  72 + <div class="top_t_left_text">
  73 + 中
  74 + </div>
  75 + <!--菜单图标-->
  76 + <div class="iconfont icon-caidan"></div>
  77 + </div>
  78 + <!--中-->
  79 + <div class="top_t_middle">
  80 + <img src="images/peke.png">
  81 + </div>
  82 + <!--右-->
  83 + <div class="top_t_right">
  84 + <!--铃声-->
  85 + <div class="iconfont icon-10">
  86 + <!--小红点-->
  87 + <div class="top_dot"></div>
  88 + </div>
  89 + <!--头像-->
  90 + <div class="top_t_right_pic">
  91 + <img src="images/1.png">
  92 + </div>
  93 + </div>
  94 + </div>
  95 + <!--底部搜索-->
  96 + <div class="top_d">
  97 + <div class="iconfont icon-magnifier"></div>
  98 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  99 + </div>
  100 + </div>
  101 +
  102 +
  103 +
  104 + <!--暂无消息-->
  105 + <div class="mid">
  106 +
  107 + 暂无关于“新艺术音乐”的搜索结果。我来
  108 + <span class="color_red">贡献内容</span>
  109 +
  110 + </div>
  111 +
  112 +</div>
  113 +</body>
  114 +<script>
  115 + //标题切换
  116 + $('.item_m').click(function () {
  117 + var index = $(this).index()
  118 +
  119 + $(this).addClass('item_color').siblings(".item_m").removeClass('item_color')
  120 +
  121 +
  122 + //内容切换
  123 + var dataid = $(this).attr("data-id");
  124 + if(dataid == 1){
  125 + $(".message").show();
  126 + $('.audit').hide();
  127 + }else {
  128 + $(".audit").show();
  129 + $(".message").hide();
  130 + }
  131 +
  132 +
  133 +
  134 + })
  135 +</script>
  136 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<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" />
  7 +
  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/spxq.css">
  11 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_i66rltl2rzp.css">
  12 + <script src="js/base.js"></script>
  13 + <script src="js/jquery.min.js"></script>
  14 +
  15 + <style>
  16 + .icon-caidan{
  17 + font-size: 0.5rem;
  18 + }
  19 + .icon-magnifier{
  20 + color: #999999;
  21 + }
  22 +
  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 +
  52 + /*底部菜单*/
  53 + .font_s{
  54 + font-size: 0.4rem;
  55 + color: #A61010;
  56 + }
  57 + .icon-bilibilidonghua{
  58 + font-size: 0.8rem;
  59 + }
  60 + .share_color{
  61 + color: #999999;
  62 + }
  63 + </style>
  64 +</head>
  65 +
  66 +<body>
  67 +<div class="container">
  68 + <div class="top">
  69 + <!--顶部菜单-->
  70 + <div class="top_t">
  71 + <!--左-->
  72 + <div class="top_t_left">
  73 + <!--中文字-->
  74 + <div class="top_t_left_text">
  75 + 中
  76 + </div>
  77 + <!--菜单图标-->
  78 + <div class="iconfont icon-caidan"></div>
  79 + </div>
  80 + <!--中-->
  81 + <div class="top_t_middle">
  82 + <img src="images/peke.png">
  83 + </div>
  84 + <!--右-->
  85 + <div class="top_t_right">
  86 + <!--铃声-->
  87 + <div class="iconfont icon-10">
  88 + <!--小红点-->
  89 + <div class="top_dot"></div>
  90 + </div>
  91 + <!--头像-->
  92 + <div class="top_t_right_pic">
  93 + <img src="images/1.png">
  94 + </div>
  95 + </div>
  96 + </div>
  97 + <!--底部搜索-->
  98 + <div class="top_d">
  99 + <div class="iconfont icon-magnifier"></div>
  100 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  101 + </div>
  102 + </div>
  103 +
  104 + <div class="banner">
  105 + <img src="images/banner_5.png">
  106 + </div>
  107 +
  108 + <div class="items">
  109 + <div class="item">
  110 + <div class="item_pic">
  111 + <img src="images/banner_1.png">
  112 + </div>
  113 + <div class="item_text">
  114 + 少数派的音乐不少数派的音乐不少数派的音乐不
  115 + </div>
  116 + </div>
  117 + <div class="item">
  118 + <div class="item_pic">
  119 + <img src="images/banner_1.png">
  120 + </div>
  121 + <div class="item_text">
  122 + 少数派的音乐不少数派的音乐不少数派的音乐不
  123 + </div>
  124 + </div>
  125 + <div class="item">
  126 + <div class="item_pic">
  127 + <img src="images/banner_1.png">
  128 + </div>
  129 + <div class="item_text">
  130 + 少数派的音乐不少数派的音乐不少数派的音乐不
  131 + </div>
  132 + </div>
  133 + <div class="item">
  134 + <div class="item_pic">
  135 + <img src="images/banner_1.png">
  136 + </div>
  137 + <div class="item_text">
  138 + 少数派的音乐不少数派的音乐不少数派的音乐不
  139 + </div>
  140 + </div>
  141 + <div class="item">
  142 + <div class="item_pic">
  143 + <img src="images/banner_1.png">
  144 + </div>
  145 + <div class="item_text">
  146 + 少数派的音乐不少数派的音乐不少数派的音乐不
  147 + </div>
  148 + </div>
  149 + </div>
  150 +
  151 + <div class="mid">
  152 + <!--标题-->
  153 + <div class="mid_title">
  154 + 少一点抱怨，多一点积极
  155 + </div>
  156 + <!--信息栏-->
  157 + <div class="mid_infor">
  158 + <div class="mid_infor_left">
  159 + <div class="mid_infor_left_pic">
  160 + <img src="images/banner_1.png">
  161 + </div>
  162 + <div class="mid_infor_left_text">
  163 + 哪里来的猴子
  164 + </div>
  165 + </div>
  166 + <div class="mid_infor_right">
  167 + 2018年12月31日
  168 + </div>
  169 + </div>
  170 + <!--文章内容-->
  171 + <div class="mid_text">
  172 +
  173 + 有的人生活光彩夺目，有的人生活布满荆棘。
  174 + <br>
  175 + <br>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢?
  176 + <br>
  177 + <br>很多时候，我们更多的是站在自己的一个渺小的角落，思考着我们所处的问题，而忽略了大的环境所能赐予我们的能量。
  178 + <br>
  179 + <br>生活中，我 们可能基础环境过于薄弱，导致我们的生活经历了辛酸，往往就会羡慕和想要我们所不能及的生活，而忽略了我们所拥有的美好;某些人，会在困苦中涅重生，改变自己被动的困境;而有些人，则更多的是抱怨、是颓废，得到的仅仅只能是越来越困苦的生活，越来越被动的人生，自己也变得失落，迷茫。
  180 + <br>
  181 + <br>其实我们有没有想过，我们今天的生活，自己再多的抱怨又有什么用呢?抱怨了，生活变好了嘛?是否通过抱怨实现了自己想要的生活呢?答案肯定是没有的，生活还是一成不变的，并不会有所改变，改变的只是个人的心态，永远是生活在悲观之中，所以，为什么还要继续去抱怨呢?
  182 + <br>
  183 + <br>工作中，我们难免会遇到一些棘手的事情，而不管是大公司还是小公司，不管是什么岗位总会有那么些人，喜欢将烦死了、急死了、麻烦死了等一些词汇挂在嘴边。
  184 + <br>
  185 + <br>这个对于刚刚参加工作的小白来说很正常，但是要及时
  186 +
  187 + </div>
  188 + <!--图片-->
  189 + <div class="mid_pic">
  190 + <img src="images/text.png">
  191 + </div>
  192 + <!--文章内容-->
  193 + <div class="mid_text">
  194 +
  195 + 有的人生活光彩夺目，有的人生活布满荆棘。
  196 + <br>
  197 + <br>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢?
  198 + <br>
  199 + <br>很多时候，我们更多的是站在自己的一个渺小的角落，思考着我们所处的问题，而忽略了大的环境所能赐予我们的能量。
  200 + <br>
  201 +
  202 +
  203 + </div>
  204 + <!--引用人物-->
  205 + <div class="mid_people">
  206 + <div class="mid_people_title">
  207 + 引用人物
  208 + </div>
  209 + <div class="mid_people_name">
  210 + 陈其钢 叶小钢
  211 + </div>
  212 + </div>
  213 + <!--引用作品-->
  214 + <div class="mid_people">
  215 + <div class="mid_people_title">
  216 + 引用人物
  217 + </div>
  218 + <div class="mid_people_name">
  219 + 《中国音乐史》 《History of Arts》 蝶恋花
  220 + </div>
  221 + </div>
  222 + </div>
  223 +
  224 + <div class="share">
  225 + <div class="share_items">
  226 + <div class="share_item">艺术家姓名</div>
  227 + <div class="share_item">长笛</div>
  228 + <div class="share_item">音乐风格</div>
  229 + <div class="iconfont icon-xinaixin share_color">
  230 + <span></span>
  231 + </div>
  232 + <div class="iconfont icon-fenxiang share_color"></div>
  233 + </div>
  234 + </div>
  235 +
  236 +
  237 +
  238 +
  239 +
  240 +</div>
  241 +</body>
  242 +<script>
  243 +
  244 +
  245 +</script>
  246 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<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" />
  7 +
  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/ztxq.css">
  11 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7sk198wo5xx.css">
  12 + <link rel="stylesheet" type="text/css" href="css/dropload.css">
  13 + <script src="js/base.js"></script>
  14 + <script src="js/jquery.min.js"></script>
  15 +
  16 + <style>
  17 + .icon-caidan{
  18 + font-size: 0.5rem;
  19 + }
  20 + .icon-magnifier{
  21 + color: #999999;
  22 + }
  23 +
  24 + .f_size{
  25 + font-weight: normal;
  26 + font-size: 0.18rem;
  27 + }
  28 + .icon-xiugai{
  29 + margin-left: 0.15rem;
  30 + font-size: 0.3rem;
  31 + color: #999999;
  32 + display: flex;
  33 + font-weight: bold;
  34 + align-items: center;
  35 + }
  36 + .top_dot{
  37 + width: 0.08rem;
  38 + height: 0.08rem;
  39 + background:rgba(166,16,16,1);
  40 + border:1px solid rgba(255, 255, 255, 1);
  41 + border-radius: 50%;
  42 + position: absolute;
  43 + top: 0;
  44 + right: 0;
  45 + }
  46 + .color_black{
  47 + color: black;
  48 + }
  49 + .margin_t{
  50 + margin-top: 0.1rem;
  51 + }
  52 +
  53 + /*底部菜单*/
  54 + .font_s{
  55 + font-size: 0.4rem;
  56 + color: #A61010;
  57 + }
  58 + .icon-bilibilidonghua{
  59 + font-size: 0.8rem;
  60 + }
  61 +
  62 + </style>
  63 +</head>
  64 +
  65 +<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"></div>
  78 + </div>
  79 + <!--中-->
  80 + <div class="top_t_middle">
  81 + <img src="images/peke.png">
  82 + </div>
  83 + <!--右-->
  84 + <div class="top_t_right">
  85 + <!--铃声-->
  86 + <div class="iconfont icon-10">
  87 + <!--小红点-->
  88 + <div class="top_dot"></div>
  89 + </div>
  90 + <!--头像-->
  91 + <div class="top_t_right_pic">
  92 + <img src="images/1.png">
  93 + </div>
  94 + </div>
  95 + </div>
  96 + <!--底部搜索-->
  97 + <div class="top_d">
  98 + <div class="iconfont icon-magnifier"></div>
  99 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  100 + </div>
  101 + </div>
  102 +
  103 + <div class="banner">
  104 + <img src="images/banner1.png">
  105 + </div>
  106 +
  107 + <div class="item_box">
  108 + <div class="items">
  109 + <div class="item">
  110 + <div class="item_top">
  111 + <img src="images/banner_3.png">
  112 + <div class="item_top_box">
  113 + <div class="item_top_box_item">
  114 + 观看人数 12356
  115 + </div>
  116 + <div class="item_top_box_item">
  117 + 时长 10:00
  118 + </div>
  119 + </div>
  120 + </div>
  121 +
  122 + <div class="item_bottom">
  123 + <div class="item_bottom_t">
  124 + The best of 2018
  125 + </div>
  126 + <div class="item_bottom_b">
  127 +
  128 + 文章开通一部分内容截取文章开通一
  129 + 部分容截取文章开通一部分内容截取
  130 + 文章开通一部分内容截取文章开通一
  131 + 部分容截取文章开通一部分内容截取
  132 +
  133 + </div>
  134 + </div>
  135 + </div>
  136 +
  137 + </div>
  138 + </div>
  139 +
  140 +
  141 +</div>
  142 +</body>
  143 +<script src="js/dropload.min.js"></script>
  144 +<script>
  145 + // 页数
  146 + var page = 0;
  147 + // 每页展示10个
  148 + var size = 3;
  149 + $('.item_box').dropload({
  150 + scrollArea : window,
  151 + domUp : {
  152 + domClass : 'dropload-up',
  153 + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  154 + domUpdate : '<div class="dropload-update">↑释放更新</div>',
  155 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  156 + },
  157 + domDown : {
  158 + domClass : 'dropload-down',
  159 + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  160 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  161 + domNoData : '<div class="dropload-noData">暂无数据</div>'
  162 + },
  163 + loadDownFn : function(me){
  164 + page++;
  165 + // 拼接HTML
  166 + var result = '';
  167 + var s = "";
  168 + var show="";
  169 + var list_compressor="";
  170 + var list_answer="";
  171 + $.ajax({
  172 + type: 'GET',
  173 + url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  174 + dataType: 'json',
  175 + success: function(data){
  176 + console.log(data);
  177 + var arrLen = data.length;
  178 + if(arrLen > 0){
  179 + for(var i=0; i<arrLen; i++){
  180 + result +='<div class="item">\n' +
  181 + ' <div class="item_top">\n' +
  182 + ' <img src="images/banner_3.png">\n' +
  183 + ' <div class="item_top_box">\n' +
  184 + ' <div class="item_top_box_item">\n' +
  185 + ' 观看人数 12356\n' +
  186 + ' </div>\n' +
  187 + ' <div class="item_top_box_item">\n' +
  188 + ' 时长 10:00\n' +
  189 + ' </div>\n' +
  190 + ' </div>\n' +
  191 + ' </div>\n' +
  192 + '\n' +
  193 + ' <div class="item_bottom">\n' +
  194 + ' <div class="item_bottom_t">\n' +
  195 + ' The best of 2018\n' +
  196 + ' </div>\n' +
  197 + ' <div class="item_bottom_b">\n' +
  198 + '\n' +
  199 + ' 文章开通一部分内容截取文章开通一\n' +
  200 + ' 部分容截取文章开通一部分内容截取\n' +
  201 + ' 文章开通一部分内容截取文章开通一\n' +
  202 + ' 部分容截取文章开通一部分内容截取\n' +
  203 + '\n' +
  204 + ' </div>\n' +
  205 + ' </div>\n' +
  206 + ' </div>'
  207 +
  208 + }
  209 + // 如果没有数据
  210 + }else{
  211 + // 锁定
  212 + me.lock();
  213 + // 无数据
  214 + me.noData();
  215 + }
  216 + // 为了测试，延迟1秒加载
  217 + setTimeout(function(){
  218 + // 插入数据到页面，放到最后面
  219 + $('.items').append(result);
  220 + // 每次数据插入，必须重置
  221 + me.resetload();
  222 + },500);
  223 + },
  224 + error: function(xhr, type){
  225 + alert('Ajax error!');
  226 + // 即使加载出错，也得重置
  227 + me.resetload();
  228 + }
  229 + });
  230 + },
  231 + threshold : 50
  232 + });
  233 +
  234 +</script>
  235 +</html>