|
|
<!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 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/gx.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>
|
|
|
<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="https://at.alicdn.com/t/font_1037215_7bu9hl90ppx.css">
|
|
|
<link rel="stylesheet" href="css/public.css">
|
|
|
<link rel="stylesheet" type="text/css" href="css/gx.css">
|
|
|
<script src="js/base.js"></script>
|
|
|
<script src="js/jquery.min.js"></script>
|
|
|
|
|
|
<style>
|
|
|
.icon-caidan{
|
|
|
<style>
|
|
|
.icon-caidan{
|
|
|
font-size: 0.5rem;
|
|
|
}
|
|
|
.icon-magnifier{
|
...
|
...
|
@@ -63,238 +65,311 @@ |
|
|
</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 class="menu_item" style="display: none;">
|
|
|
|
|
|
<!--<p class="index_jump">主页</p >-->
|
|
|
<!--<p class="rwxq_jump">人物详情</p>-->
|
|
|
<!--<p class="grzy_jump">个人主页</p>-->
|
|
|
<!--<p class="spxq_jump">视频详情</p>-->
|
|
|
<div class="menu_item_a">
|
|
|
<div>首页</div>
|
|
|
<div class="menu_item_a_pic">
|
|
|
<img src="images/you@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="menu_item_a">
|
|
|
<div>精选</div>
|
|
|
<div class="menu_item_a_pic">
|
|
|
<img src="images/you@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="menu_item_a">
|
|
|
<div>动态</div>
|
|
|
<div class="menu_item_a_pic">
|
|
|
<img src="images/you@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="menu_item_a">
|
|
|
<div>百科</div>
|
|
|
<div class="menu_item_a_pic">
|
|
|
<img src="images/you@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
<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 class=""></div>-->
|
|
|
<!--菜单列表-->
|
|
|
<div class="menu_item" style="display: none;">
|
|
|
|
|
|
<!--<p class="index_jump">主页</p >-->
|
|
|
<!--<p class="rwxq_jump">人物详情</p>-->
|
|
|
<!--<p class="grzy_jump">个人主页</p>-->
|
|
|
<!--<p class="spxq_jump">视频详情</p>-->
|
|
|
<a href="index.html">
|
|
|
<div class="menu_item_a">
|
|
|
<div>首页</div>
|
|
|
<div class="menu_item_a_pic">
|
|
|
<img src="images/you@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="">
|
|
|
<div class="menu_item_a">
|
|
|
<div>精选</div>
|
|
|
<div class="menu_item_a_pic">
|
|
|
<img src="images/you@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="">
|
|
|
<div class="menu_item_a">
|
|
|
<div>动态</div>
|
|
|
<div class="menu_item_a_pic">
|
|
|
<img src="images/you@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="">
|
|
|
<div class="menu_item_a">
|
|
|
<div>百科</div>
|
|
|
<div class="menu_item_a_pic">
|
|
|
<img src="images/you@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--中-->
|
|
|
<div class="top_t_middle">
|
|
|
<img src="images/icon_1.png">
|
|
|
</div>
|
|
|
<!--右-->
|
|
|
<div class="top_t_right">
|
|
|
<!--铃声-->
|
|
|
<div class="iconfont icon-10">
|
|
|
<div class="top_dot"></div>
|
|
|
</div>
|
|
|
<div class="top_t_right_text">
|
|
|
注册/登录
|
|
|
</div>
|
|
|
<!--头像-->
|
|
|
<div class="top_t_right_pic" style="display: none">
|
|
|
<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_head">
|
|
|
<img src="images/banner_1.png">
|
|
|
</div>
|
|
|
<!--头部文本框-->
|
|
|
<div class="mid_title">
|
|
|
|
|
|
</div>
|
|
|
我在这里享受着很多地区不曾有的体验,每一天都在过四季。为此,很是苦恼,不知道怎么穿戴,分不清是穿多了还是穿少了。这种特有的气候,每年都会让体弱的人进出医院好几回。年少时,总觉得那些因为天气而生病的人,是残弱群体,而今,自己也慢慢加入这个群体,深深懂得,岁月不会优待谁,生老病死都得走这么一遭。这么一说,我感到一丝悲哀
|
|
|
|
|
|
</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_head">
|
|
|
<img src="images/banner_1.png">
|
|
|
</div>
|
|
|
<!--头部文本框-->
|
|
|
<div class="mid_title">
|
|
|
</div>
|
|
|
<!--文本框下的介绍内容-->
|
|
|
<div class="mid_small">
|
|
|
<!--图标-->
|
|
|
<div class="iconfont icon-gantanhao1"></div>
|
|
|
<!--<div class="mid_small_left">图标</div>-->
|
|
|
<!--文字-->
|
|
|
<div class="mid_small_right">
|
|
|
<p>包含图片/声音/视频或大附件内容请直接发送邮件至:</p>
|
|
|
<p>Musicofchina@outlook.com (后期会改成企业邮箱)</p>
|
|
|
</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_items">
|
|
|
<div class="mid_type_items_item">人物</div>
|
|
|
<div class="mid_type_items_item">演出</div>
|
|
|
<div class="mid_type_items_item">文章</div>
|
|
|
<div class="mid_type_items_item">新闻</div>
|
|
|
<div class="mid_type_items_item">风格</div>
|
|
|
<div class="mid_type_items_item">乐器</div>
|
|
|
<div class="mid_type_items_item">其他</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!--文本框下的介绍内容-->
|
|
|
<div class="mid_small">
|
|
|
<!--图标-->
|
|
|
<div class="iconfont icon-gantanhao1"></div>
|
|
|
<!--<div class="mid_small_left">图标</div>-->
|
|
|
<!--文字-->
|
|
|
<div class="mid_small_right">
|
|
|
<p>包含图片/声音/视频或大附件内容请直接发送邮件至:</p>
|
|
|
<p>Musicofchina@outlook.com (后期会改成企业邮箱)</p>
|
|
|
</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_items">
|
|
|
<!--标题-->
|
|
|
<div class="mid_type_items_title">
|
|
|
<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_items">
|
|
|
<div class="mid_type_items_item">人物</div>
|
|
|
<div class="mid_type_items_item">演出</div>
|
|
|
<div class="mid_type_items_item">文章</div>
|
|
|
<div class="mid_type_items_item">新闻</div>
|
|
|
<div class="mid_type_items_item">风格</div>
|
|
|
<div class="mid_type_items_item">乐器</div>
|
|
|
<div class="mid_type_items_item">其他</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_type">
|
|
|
<!--标题-->
|
|
|
<div class="mid_type_title">
|
|
|
<!--圆点-->
|
|
|
<p class="mid_type_title_dot"></p>
|
|
|
<p>内容</p>
|
|
|
</div>
|
|
|
<!--内容-->
|
|
|
<div class="mid_type_items">
|
|
|
<!--标题-->
|
|
|
<div class="mid_type_items_title">
|
|
|
<input type="text" placeholder="标题">
|
|
|
</div>
|
|
|
<!--内容-->
|
|
|
<div class="mid_type_items_area">
|
|
|
<textarea placeholder="内容不少于100字"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</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_item">
|
|
|
<img src="images/back_1.png">
|
|
|
<div class="close_button">
|
|
|
<div class="iconfont icon-guanbi"></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_set">
|
|
|
<div class="iconfont icon-icon02"></div>
|
|
|
</div>
|
|
|
</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>
|
|
|
|
|
|
<div class="mid_pic_set">
|
|
|
<div class="iconfont icon-icon02"></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>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!--内容提交-->
|
|
|
<div class="mask" style="display: none;">
|
|
|
<div class="mask_box submit_height">
|
|
|
<div class="mask_submit_text">
|
|
|
<p>
|
|
|
内容已成功提交,我们将尽快审核。
|
|
|
</p>
|
|
|
<p>
|
|
|
(结果将通过站内信告知)
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="mask_submit_bottom">
|
|
|
确定
|
|
|
</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>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</body>
|
|
|
<script>
|
|
|
//点击打开菜单
|
|
|
$('.icon-caidan').click(function () {
|
|
|
console.log(11)
|
|
|
$('.menu_item').slideToggle();
|
|
|
// 关闭图片功能 2019.4.8
|
|
|
// if($(this).hasClass("icon-caidan")){
|
|
|
// $(this).addClass("icon-guanbi");
|
|
|
// $(this).removeClass("icon-caidan");
|
|
|
// $("body").css("overflow","hidden");
|
|
|
// }else{
|
|
|
// $(this).removeClass("icon-guanbi");
|
|
|
// $(this).addClass("icon-caidan");
|
|
|
// $("body").css("overflow","auto");
|
|
|
// }
|
|
|
})
|
|
|
//点击打开菜单
|
|
|
$('.icon-caidan').click(function() {
|
|
|
console.log(11)
|
|
|
$('.menu_item').slideToggle();
|
|
|
// 关闭图片功能 2019.4.8
|
|
|
// if($(this).hasClass("icon-caidan")){
|
|
|
// $(this).addClass("icon-guanbi");
|
|
|
// $(this).removeClass("icon-caidan");
|
|
|
// $("body").css("overflow","hidden");
|
|
|
// }else{
|
|
|
// $(this).removeClass("icon-guanbi");
|
|
|
// $(this).addClass("icon-caidan");
|
|
|
// $("body").css("overflow","auto");
|
|
|
// }
|
|
|
})
|
|
|
$('.mid_type_items_sub').click(function() {
|
|
|
$('.mask').show()
|
|
|
})
|
|
|
$('.mask_submit_bottom').click(function() {
|
|
|
$('.mask').hide()
|
|
|
})
|
|
|
if ($('.mid_pic_item').length = 6) {
|
|
|
$('.mid_pic_set').hide()
|
|
|
} else {
|
|
|
$('.mid_pic_set').show()
|
|
|
|
|
|
}
|
|
|
//添加图片
|
|
|
$('.mid_pic_set').click(function() {
|
|
|
$(this).before(`<div class="mid_pic_item">
|
|
|
<img src="images/back_1.png">
|
|
|
<div class="close_button">
|
|
|
<div class="iconfont icon-guanbi"></div>
|
|
|
</div>
|
|
|
</div>`)
|
|
|
if ($('.mid_pic_item').length >= 6) {
|
|
|
$('.mid_pic_set').hide()
|
|
|
} else {
|
|
|
$('.mid_pic_set').show()
|
|
|
|
|
|
}
|
|
|
})
|
|
|
//删除图片
|
|
|
|
|
|
$('.mid_type .mid_pic_items').on("click", ".close_button", function() {
|
|
|
$(this).parent().remove()
|
|
|
if ($('.mid_pic_item').length >= 6) {
|
|
|
$('.mid_pic_set').hide()
|
|
|
} else {
|
|
|
$('.mid_pic_set').show()
|
|
|
|
|
|
}
|
|
|
})
|
|
|
|
|
|
$('.mid_type_items_item').click(function() {
|
|
|
$(".mid_type_items_item").eq($(this).index()).addClass("mid_type_items_item_active").siblings().removeClass('mid_type_items_item_active');
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</html> |
...
|
...
|
|