|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>首页</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<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="mid">
|
|
|
|
<!--左边图片-->
|
|
|
|
<div class="mid_left">
|
|
|
|
<img src="images/peke.png">
|
|
|
|
</div>
|
|
|
|
<!--右边图片-->
|
|
|
|
<div class="mid_right">
|
|
|
|
<!--大昵称-->
|
|
|
|
<div class="mid_right_big">
|
|
|
|
皮还是皮不过我的你
|
|
|
|
<!--修改-->
|
|
|
|
<div class="iconfont icon-xiugai ">
|
|
|
|
<p class="f_size">修改</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--小昵称-->
|
|
|
|
<div class="mid_right_small">
|
|
|
|
皮还是皮不过我的你
|
|
|
|
<!--修改按钮-->
|
|
|
|
<div class="iconfont icon-xiugai ">
|
|
|
|
<p class="f_size">修改</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--动态 审核-->
|
|
|
|
<div class="item">
|
|
|
|
<div class="item_m item_color" data-id ="1">
|
|
|
|
动态
|
|
|
|
<div class="item_number" data-id ="1">
|
|
|
|
12
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="item_m ">
|
|
|
|
审核
|
|
|
|
<div class="item_number">
|
|
|
|
9
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--动态消息-->
|
|
|
|
<div class="message" >
|
|
|
|
<div class="message_box">
|
|
|
|
<p class="color_red">
|
|
|
|
小猪佩奇
|
|
|
|
<span class="color_black">
|
|
|
|
赞了你的
|
|
|
|
</span>
|
|
|
|
《中国流行音乐的发展历程》
|
|
|
|
</p>
|
|
|
|
<p class="color_red margin_t">
|
|
|
|
小猪佩奇
|
|
|
|
<span class="color_black">
|
|
|
|
关注了你
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="message_box">
|
|
|
|
<p class="color_red">
|
|
|
|
小猪佩奇
|
|
|
|
<span class="color_black">
|
|
|
|
赞了你的
|
|
|
|
</span>
|
|
|
|
《中国流行音乐的发展历程》
|
|
|
|
</p>
|
|
|
|
<p class="color_red margin_t">
|
|
|
|
小猪佩奇
|
|
|
|
<span class="color_black">
|
|
|
|
关注了你
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="message_box">
|
|
|
|
<p class="color_red">
|
|
|
|
小猪佩奇
|
|
|
|
<span class="color_black">
|
|
|
|
赞了你的
|
|
|
|
</span>
|
|
|
|
《中国流行音乐的发展历程》
|
|
|
|
</p>
|
|
|
|
<p class="color_red margin_t">
|
|
|
|
小猪佩奇
|
|
|
|
<span class="color_black">
|
|
|
|
关注了你
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!--审核消息-->
|
|
|
|
<div class="audit" style="display: none;" >
|
|
|
|
<div class="audit_big">
|
|
|
|
正在审核
|
|
|
|
<p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="audit_big" >
|
|
|
|
正在审核
|
|
|
|
<p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p>
|
|
|
|
</div>
|
|
|
|
</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> |
...
|
...
|
|
