webfront / videoWeb · 提交

转到一个项目

作者 乔爽
提交 8cd212a289d43355f071da05515c2f7805573f0b 1 个父辈 2b726d53

更新

内嵌 并排对比
正在显示 5 个修改的文件 包含 576 行增加 和 6 行删除
@@ -154,6 +154,7 @@ @@ -154,6 +154,7 @@
154 font-weight:500; 154 font-weight:500;
155 color:rgba(153,153,153,1); 155 color:rgba(153,153,153,1);
156 line-height: 0.3rem; 156 line-height: 0.3rem;
  157 + margin-left: 0.21rem;
157 } 158 }
158 .mid_type{ 159 .mid_type{
159 display: flex; 160 display: flex;
@@ -202,10 +203,127 @@ @@ -202,10 +203,127 @@
202 203
203 } 204 }
204 .mid_type_items_title{ 205 .mid_type_items_title{
205 - width: 100%; 206 + width: 6.1rem;
  207 + height: 0.5rem;
206 display: flex; 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;
207 } 214 }
208 .mid_type_items_title input{ 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{
209 width: 100%; 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;
  248 +}
  249 +/*图片*/
  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;
210 } 328 }
211 329
  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.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;
  110 +}
  111 +.mid_left{
  112 + width: 0.9rem;
  113 + height: 0.9rem;
  114 + display: flex;
  115 + /*align-items: center;*/
  116 + border-radius: 50%;
  117 +
  118 +}
  119 +.mid_left img{
  120 + width: 100%;
  121 + height: 100%;
  122 + border-radius: 50%;
  123 +}
  124 +.mid_right{
  125 + margin-left: 0.3rem;
  126 +}
  127 +.mid_right_big{
  128 +
  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;
  135 +}
  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;
  144 +}
  145 +.item{
  146 + width: 6.86rem;
  147 + display: flex;
  148 + justify-content: space-around;
  149 + margin-top: 0.6rem;
  150 +}
  151 +.item_m{
  152 +
  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;
  159 +}
  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%;
  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;
  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 +
  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;
  221 +}
  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;
  229 +}
  230 +.audit_big:first-child{
  231 + margin-top: 0;
  232 +}
  233 +.audit_big:last-child{
  234 + margin-bottom: 0.6rem;
  235 +}
  236 +.audit_small{
  237 +
  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;
  243 +}
@@ -8,7 +8,7 @@ @@ -8,7 +8,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/gx.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_j5a2c541jh.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> 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,17 @@ @@ -48,6 +48,17 @@
48 .margin_t{ 48 .margin_t{
49 margin-top: 0.1rem; 49 margin-top: 0.1rem;
50 } 50 }
  51 + .icon-gantanhao1{
  52 + font-size: 0.18rem;
  53 + }
  54 + .icon-guanbi{
  55 + color: #ffffff;
  56 + font-size: 0.16rem;
  57 + }
  58 + .icon-icon02{
  59 + font-size: 1rem;
  60 + color: #e8e8e8;
  61 + }
51 </style> 62 </style>
52 </head> 63 </head>
53 64
@@ -103,8 +114,8 @@ @@ -103,8 +114,8 @@
103 <!--文本框下的介绍内容--> 114 <!--文本框下的介绍内容-->
104 <div class="mid_small"> 115 <div class="mid_small">
105 <!--图标--> 116 <!--图标-->
106 - <!--<div class="iconfont icongantanhao"></div>-->  
107 - <div class="mid_small_left">图标</div> 117 + <div class="iconfont icon-gantanhao1"></div>
  118 + <!--<div class="mid_small_left">图标</div>-->
108 <!--文字--> 119 <!--文字-->
109 <div class="mid_small_right"> 120 <div class="mid_small_right">
110 <p>包含图片/声音/视频或大附件内容请直接发送邮件至：</p> 121 <p>包含图片/声音/视频或大附件内容请直接发送邮件至：</p>
@@ -138,13 +149,91 @@ @@ -138,13 +149,91 @@
138 <div class="mid_type_title"> 149 <div class="mid_type_title">
139 <!--圆点--> 150 <!--圆点-->
140 <p class="mid_type_title_dot"></p> 151 <p class="mid_type_title_dot"></p>
141 - <p>类型</p> 152 + <p>内容</p>
142 </div> 153 </div>
143 <!--内容--> 154 <!--内容-->
144 <div class="mid_type_items"> 155 <div class="mid_type_items">
145 <!--标题--> 156 <!--标题-->
146 <div class="mid_type_items_title"> 157 <div class="mid_type_items_title">
147 - <input type="text"> 158 + <input type="text" placeholder="标题">
  159 + </div>
  160 + <!--内容-->
  161 + <div class="mid_type_items_area">
  162 + <textarea placeholder="内容不少于100字"></textarea>
  163 + </div>
  164 + </div>
  165 + </div>
  166 +
  167 + <!--图片-->
  168 + <div class="mid_type">
  169 + <!--标题-->
  170 + <div class="mid_type_title">
  171 + <!--圆点-->
  172 + <p class="mid_type_title_dot"></p>
  173 + <p>内容</p>
  174 + </div>
  175 + <!--介绍-->
  176 + <div class="mid_type_intro">
  177 + 点击上传相关图片，不多于6张
  178 + </div>
  179 +
  180 + <!--图片列表-->
  181 + <div class="mid_pic_items">
  182 + <div class="mid_pic_item">
  183 + <img src="images/back_1.png">
  184 + <div class="close_button">
  185 + <div class="iconfont icon-guanbi"></div>
  186 + </div>
  187 + </div>
  188 + <div class="mid_pic_item">
  189 + <img src="images/back_1.png">
  190 + <div class="close_button">
  191 + <div class="iconfont icon-guanbi"></div>
  192 + </div>
  193 + </div>
  194 + <div class="mid_pic_item">
  195 + <img src="images/back_1.png">
  196 + <div class="close_button">
  197 + <div class="iconfont icon-guanbi"></div>
  198 + </div>
  199 + </div>
  200 + <div class="mid_pic_item">
  201 + <img src="images/back_1.png">
  202 + <div class="close_button">
  203 + <div class="iconfont icon-guanbi"></div>
  204 + </div>
  205 + </div>
  206 + <div class="mid_pic_item">
  207 + <img src="images/back_1.png">
  208 + <div class="close_button">
  209 + <div class="iconfont icon-guanbi"></div>
  210 + </div>
  211 + </div>
  212 +
  213 + <div class="mid_pic_set">
  214 + <div class="iconfont icon-icon02"></div>
  215 + </div>
  216 + </div>
  217 +
  218 + </div>
  219 +
  220 + <!--联系方式-->
  221 + <div class="mid_type ">
  222 + <!--标题-->
  223 + <div class="mid_type_title contact_way">
  224 + <!--圆点-->
  225 + <p class="mid_type_title_dot"></p>
  226 + <p>联系方式</p>
  227 + </div>
  228 + <!--内容-->
  229 + <div class="mid_type_items contact_mid">
  230 + <!--标题-->
  231 + <div class="mid_type_items_title">
  232 + <input type="text" placeholder="可输入邮箱/手机号/微信等联系方式">
  233 + </div>
  234 + <!--提交-->
  235 + <div class="mid_type_items_sub">
  236 + 提交
148 </div> 237 </div>
149 </div> 238 </div>
150 </div> 239 </div>
@@ -156,5 +245,6 @@ @@ -156,5 +245,6 @@
156 <script> 245 <script>
157 246
158 247
  248 +
159 </script> 249 </script>
160 </html> 250 </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/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>
  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 + </style>
  52 +</head>
  53 +
  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"></div>
  67 + </div>
  68 + <!--中-->
  69 + <div class="top_t_middle">
  70 + <img src="images/peke.png">
  71 + </div>
  72 + <!--右-->
  73 + <div class="top_t_right">
  74 + <!--铃声-->
  75 + <div class="iconfont icon-10">
  76 + <!--小红点-->
  77 + <div class="top_dot"></div>
  78 + </div>
  79 + <!--头像-->
  80 + <div class="top_t_right_pic">
  81 + <img src="images/1.png">
  82 + </div>
  83 + </div>
  84 + </div>
  85 + <!--底部搜索-->
  86 + <div class="top_d">
  87 + <div class="iconfont icon-magnifier"></div>
  88 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  89 + </div>
  90 + </div>
  91 +
  92 + <!--图片列表-->
  93 + <div class=""></div>
  94 +
  95 +</div>
  96 +</body>
  97 +<script>
  98 + //标题切换
  99 + $('.item_m').click(function () {
  100 + var index = $(this).index()
  101 +
  102 + $(this).addClass('item_color').siblings(".item_m").removeClass('item_color')
  103 +
  104 +
  105 + //内容切换
  106 + var dataid = $(this).attr("data-id");
  107 + if(dataid == 1){
  108 + $(".message").show();
  109 + $('.audit').hide();
  110 + }else {
  111 + $(".audit").show();
  112 + $(".message").hide();
  113 + }
  114 +
  115 +
  116 +
  117 + })
  118 +</script>
  119 +</html>