webfront / videoWeb · 提交

转到一个项目

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

更新

内嵌 并排对比
正在显示 5 个修改的文件 包含 576 行增加 和 6 行删除
... ... @@ -154,6 +154,7 @@
font-weight:500;
color:rgba(153,153,153,1);
line-height: 0.3rem;
margin-left: 0.21rem;
}
.mid_type{
display: flex;
... ... @@ -202,10 +203,127 @@
}
.mid_type_items_title{
width: 100%;
width: 6.1rem;
height: 0.5rem;
display: flex;
margin-top: 0.27rem;
background:rgba(232,232,232,0);
border:1px solid rgba(232, 232, 232, 1);
border-radius:0.04rem;
}
.mid_type_items_title input{
font-size: 0.24rem;
width: 100%;
outline: none;
border: none;
box-sizing: border-box;
padding: 0 0.14rem;
}
.mid_type_items_area{
margin-top: 0.2rem;
width: 6.1rem;
height: 2.41rem;
background:rgba(232,232,232,0);
border:1px solid rgba(232, 232, 232, 1);
border-radius: 0.04rem;
}
.mid_type_items_area textarea{
width: 100%;
height: 100%;
border: none;
outline: none;
box-sizing: border-box;
padding: 0.15rem 0.15rem;
}
.mid_type_items_area textarea::placeholder{
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height: 0.3rem;
}
/*图片*/
.mid_type_intro{
margin-left: 0.3rem;
font-size: 0.18rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height: 0.4rem;
}
.mid_pic_items{
display: flex;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
.mid_pic_item{
display: flex;
width: 2.93rem;
height: 1.7rem;
margin-left: 0.3rem;
margin-top: 0.3rem;
position: relative;
}
.mid_pic_item img{
width: 100%;
height: 100%;
}
.close_button{
width: 0.3rem;
height: 0.3rem;
background-color: #EB3941;
border-radius: 50%;
position: absolute;
right: -0.16rem;
top: -0.1rem;
display: flex;
align-items: center;
justify-content: center;
}
.mid_pic_set{
width: 2.93rem;
height: 1.7rem;
background:rgba(232,232,232,0);
border:2px dashed rgba(232,232,232,1);
margin-left: 0.3rem;
margin-top: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
}
.contact_way{
width: 1.7rem;
}
.mid_type_items_title input::placeholder{
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color: #999999;
line-height: 0.24rem;
}
.mid_type_items_sub{
margin: 0.65rem 0;
width: 3.5rem;
height: 0.5rem;
line-height: 0.5rem;
background:rgba(192,44,44,1);
border-radius: 0.04rem;
font-size: 0.26rem;
font-weight: bold;
text-align: center;
color: #ffffff;
}
.contact_mid{
display: flex;
align-items: center;
justify-content: center;
}
... ...
.container {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.top{
width: 7.5rem;
/*height: 1.5rem;*/
background-color: #F7F7F7;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.top_t{
width: 6.86rem;
height: 0.8rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.top_t_left{
width: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.top_t_left_text{
font-size:0.3rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(166,16,16,1);
}
.icon-caidan{
}
/*中部*/
.top_t_middle{
width: 1.2rem;
height: 0.5rem;
display: flex;
}
.top_t_middle img{
width: 100%;
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-10{
position: relative;
}
.top_t_right_pic{
width: 0.4rem;
height: 0.4rem;
display: flex;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.top_t_right_pic img{
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/*-----底部------*/
.top_d{
width: 5.56rem;
display: flex;
padding-bottom: 0.03rem;
border-bottom: 1px solid #999999;
margin: 0.3rem 0 0.2rem 0;
}
.top_d_input{
width: 5rem;
text-align: center;
border: none;
outline: none;
background-color: #F7F7F7;
font-size: 0.3rem;
box-sizing: border-box;
padding: 0 0.2rem;
}
.top_d_input::placeholder{
color: #999999;
}
/*---------- 信息框 ----------*/
.mid{
margin-top: 0.53rem;
width: 6.86rem;
height: 1.5rem;
background:rgba(255,255,255,1);
box-shadow:0 0.04rem 0.12rem 0 rgba(155,155,155,0.1);
border-radius: 0.1rem;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 0.3rem;
}
.mid_left{
width: 0.9rem;
height: 0.9rem;
display: flex;
/*align-items: center;*/
border-radius: 50%;
}
.mid_left img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.mid_right{
margin-left: 0.3rem;
}
.mid_right_big{
font-size: 0.36rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.24rem;
display: flex;
}
.mid_right_small{
margin-top: 0.2rem;
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.24rem;
display: flex;
}
.item{
width: 6.86rem;
display: flex;
justify-content: space-around;
margin-top: 0.6rem;
}
.item_m{
font-size: 0.36rem;
font-family:MicrosoftYaHei-Bold;
font-weight:bold;
/*color:rgba(166,16,16,1);*/
line-height: 0.36rem;
position: relative;
}
/*.item_right{*/
/*font-size: 0.36rem;*/
/*font-family:MicrosoftYaHei-Bold;*/
/*font-weight:bold;*/
/*color:rgba(51,51,51,1);*/
/*line-height: 0.36rem;*/
/*position: relative;*/
/*}*/
.item_number{
width: 0.2rem;
height: 0.2rem;
background:rgba(166,16,16,1);
border:2px solid rgba(255, 255, 255, 1);
border-radius:50%;
font-size: 0.12rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(252,254,255,1);
line-height: 0.36rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -0.18rem;
left: 0.6rem;
}
.item_color{
color: #A61010;
}
.item_color:before{
content: "";
width: 0.8rem;
height: 0.02rem;
background: #A61010;
position: absolute;
bottom: -0.15rem;
/*color: #A61010;*/
}
.message{
margin-top: 0.5rem;
width: 6.86rem;
font-size: 0.24rem;
font-family:MicrosoftYaHei;
font-weight:400;
line-height: 0.36rem;
}
.message_box{
margin-top: 0.2rem;
}
.color_red{
color: #A61010;
}
/*审核消息*/
.audit{
margin-top: 0.66rem;
width: 6.86rem;
}
.audit_big{
margin-top: 0.28rem;
font-size: 0.24rem;
font-family:MicrosoftYaHei-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.36rem;
}
.audit_big:first-child{
margin-top: 0;
}
.audit_big:last-child{
margin-bottom: 0.6rem;
}
.audit_small{
font-size: 0.24rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(51,51,51,1);
line-height: 0.36rem;
}
... ...
... ... @@ -8,7 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/gx.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_j5a2c541jh.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7bu9hl90ppx.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
... ... @@ -48,6 +48,17 @@
.margin_t{
margin-top: 0.1rem;
}
.icon-gantanhao1{
font-size: 0.18rem;
}
.icon-guanbi{
color: #ffffff;
font-size: 0.16rem;
}
.icon-icon02{
font-size: 1rem;
color: #e8e8e8;
}
</style>
</head>
... ... @@ -103,8 +114,8 @@
<!--文本框下的介绍内容-->
<div class="mid_small">
<!--图标-->
<!--<div class="iconfont icongantanhao"></div>-->
<div class="mid_small_left">图标</div>
<div class="iconfont icon-gantanhao1"></div>
<!--<div class="mid_small_left">图标</div>-->
<!--文字-->
<div class="mid_small_right">
<p>包含图片/声音/视频或大附件内容请直接发送邮件至：</p>
... ... @@ -138,13 +149,91 @@
<div class="mid_type_title">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>类型</p>
<p>内容</p>
</div>
<!--内容-->
<div class="mid_type_items">
<!--标题-->
<div class="mid_type_items_title">
<input type="text">
<input type="text" placeholder="标题">
</div>
<!--内容-->
<div class="mid_type_items_area">
<textarea placeholder="内容不少于100字"></textarea>
</div>
</div>
</div>
<!--图片-->
<div class="mid_type">
<!--标题-->
<div class="mid_type_title">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>内容</p>
</div>
<!--介绍-->
<div class="mid_type_intro">
点击上传相关图片，不多于6张
</div>
<!--图片列表-->
<div class="mid_pic_items">
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_set">
<div class="iconfont icon-icon02"></div>
</div>
</div>
</div>
<!--联系方式-->
<div class="mid_type ">
<!--标题-->
<div class="mid_type_title contact_way">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>联系方式</p>
</div>
<!--内容-->
<div class="mid_type_items contact_mid">
<!--标题-->
<div class="mid_type_items_title">
<input type="text" placeholder="可输入邮箱/手机号/微信等联系方式">
</div>
<!--提交-->
<div class="mid_type_items_sub">
提交
</div>
</div>
</div>
... ... @@ -156,5 +245,6 @@
<script>
</script>
</html>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/grzy.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<style>
.icon-caidan{
font-size: 0.5rem;
}
.icon-magnifier{
color: #999999;
}
.f_size{
font-weight: normal;
font-size: 0.18rem;
}
.icon-xiugai{
margin-left: 0.15rem;
font-size: 0.3rem;
color: #999999;
display: flex;
font-weight: bold;
align-items: center;
}
.top_dot{
width: 0.08rem;
height: 0.08rem;
background:rgba(166,16,16,1);
border:1px solid rgba(255, 255, 255, 1);
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
}
.color_black{
color: black;
}
.margin_t{
margin-top: 0.1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<!--顶部菜单-->
<div class="top_t">
<!--左-->
<div class="top_t_left">
<!--中文字-->
<div class="top_t_left_text">
中
</div>
<!--菜单图标-->
<div class="iconfont icon-caidan"></div>
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/peke.png">
</div>
<!--右-->
<div class="top_t_right">
<!--铃声-->
<div class="iconfont icon-10">
<!--小红点-->
<div class="top_dot"></div>
</div>
<!--头像-->
<div class="top_t_right_pic">
<img src="images/1.png">
</div>
</div>
</div>
<!--底部搜索-->
<div class="top_d">
<div class="iconfont icon-magnifier"></div>
<input class="top_d_input" placeholder="搜索音乐/作品/风格">
</div>
</div>
<!--图片列表-->
<div class=""></div>
</div>
</body>
<script>
//标题切换
$('.item_m').click(function () {
var index = $(this).index()
$(this).addClass('item_color').siblings(".item_m").removeClass('item_color')
//内容切换
var dataid = $(this).attr("data-id");
if(dataid == 1){
$(".message").show();
$('.audit').hide();
}else {
$(".audit").show();
$(".message").hide();
}
})
</script>
</html>
... ...