master

分支 (1)

管理

管理

master

Example
/
sideMenu.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>左侧边栏</title>
	<style type="text/css">
		html,body {
			height:	100%;
			width: 100%;
			margin: 0px;
			padding: 0px;
			font-family:Arial,Verdana,Sans-serif;
		}

		.side {
			padding:45px 0px;
			position: fixed;
			top:0px;
			left:0%;
			height: 100%;
			max-width: 268px;
			background: rgba(136,125,221,.9);
			transition: width .3s ease;
			-moz-transition: width .3s ease;
			-webkit-transition: width .3s ease;
			-o-transition: width .3s ease;
			-ms-transition: width .3s ease;
			overflow: hidden;
			z-index: 1000;
		}

		.side .imgHead {
			width: 120px;
			height: 120px;
			border:1px solid #eee;
			border-radius: 120px;
			background: white;
			margin: 0px auto;
			overflow: hidden;
			cursor: pointer;
			transition: all .3s ease;
			-moz-transition: all .3s ease;
			-webkit-transition: all .3s ease;
			-o-transition: all .3s ease;
			-ms-transition: all .3s ease;
		}

		.side .imgHead:hover {
			opacity: 0.8;
		}

		.side .imgHead img {
			width: 100%;
			height: 100%;
		}

		.side .info p {
			text-align: center;
			color:white;
			margin: 0px 10px;
			line-height: 30px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}

		.side .info p:first-child {
			font-weight: 600;
		}

		.side .navTitle ul {
			margin: 30px 15px;
			padding: 0px;
			list-style: none;
			position: relative;
		}

		.side .navTitle ul li {
			line-height: 30px;
			padding: 10px 0px 10px 50px;
			position: relative;
			color:white;
			font-size: 16px;
			cursor: pointer;
			transition: all .3s ease;
			-moz-transition: all .3s ease;
			-webkit-transition: all .3s ease;
			-o-transition: all .3s ease;
			-ms-transition: all .3s ease;
		}

		.side .navTitle ul li:hover {
			opacity: 0.45;
		}

		.side .navTitle ul li span {
			position: absolute;
			top:10px;
			left:5px;
			display: block;
			width:30px;
			line-height: 30px;
			text-align: center;
			background: #cd7bdd;
			color:white;
			border-radius: 30px;
		}

		.side .fixedName {
			display: block;
			width:60%;
			line-height:30px;
			text-align: center;
			margin:30px auto;
			color:white;
			border:none;
			background: #cd7bdd;
			cursor: pointer;
		}

		.side .fixedName:hover {
			opacity: 0.65;
		}

		.content {
			position: absolute;
			right:0%;
			height:100%;
			overflow-x: hidden;
			transition: all .3s ease;
			-moz-transition: all .3s ease;
			-webkit-transition: all .3s ease;
			-o-transition: all .3s ease;
			-ms-transition: all .3s ease;
		}

		.content .header {
			line-height:45px;
			width: 100%;
			text-align: center;
			font-weight: 600px;
			font-size: 20px;
		}

		.content .title {
			margin:30px 10px;
			line-height: 40px;
		}

		.content .title span {
			padding:10px 15px;
			margin-right:15px;
			background: #cd7bdd;
			cursor: pointer;
			color:white;
			border-radius:25px;
		}

		.content .detailContent {
			width:100%;
			padding:0px 60px;
		}

		.content .detailContent .item {
			display: inline-block;
			min-width: 300px;
			padding:15px 20px;
			font-size:15px;
			letter-spacing: 1.5px;
		}

		.content .detailContent .item div {
			display: inline;
		}

		.content .detailContent .item div.key {
			font-size: 16px;
			font-weight: 600;
		}

		.content .education  {
			width:100%;
			margin:30px 0px;
		}

		.content .education  .item {
			min-height:40px;
			padding:70px 0px 70px 150px;
			position: relative;
			border-bottom:  1px solid #d1d2d4;
		}

		.content .education  .item .top {
			position: absolute;
			left:45px;
			top:10px;
			width:60px;
			height:60px;
			border-radius: 60px;
			line-height: 60px;
			text-align: center;
			background: #887ddd;
			color:white;
		}

		.content .education  .item .bottom {
			position: absolute;
			left:45px;
			bottom:10px;
			width:60px;
			height:60px;
			border-radius: 60px;
			line-height: 60px;
			text-align: center;
			background: #887ddd;
			color:white;
		}

		.content .education  .item .line {
			position: absolute;
			top:70px;
			bottom:70px;
			left:74px;
			width:2px;
			background: #887ddd;
		}

		.content .education .item .educationContent {
			letter-spacing: 5px;
		}

		.content .project  {
			width:100%;
			margin:30px 0px;
		}

		.content .project  .item {
			min-height:40px;
			padding:70px 0px 70px 150px;
			position: relative;
			border-bottom:  1px solid #d1d2d4;
		}

		.content .project  .item .top {
			position: absolute;
			left:45px;
			top:10px;
			width:60px;
			height:60px;
			border-radius: 60px;
			line-height: 60px;
			text-align: center;
			background: #887ddd;
			color:white;
		}

		.content .project  .item .bottom {
			position: absolute;
			left:45px;
			bottom:10px;
			width:60px;
			height:60px;
			border-radius: 60px;
			line-height: 60px;
			text-align: center;
			background: #887ddd;
			color:white;
		}

		.content .project  .item .line {
			position: absolute;
			top:70px;
			bottom:70px;
			left:74px;
			width:2px;
			background: #887ddd;
		}

		.content .project .item .projectContent {
			letter-spacing: 1px;
		}

		.content .know .knowContent {
			padding:0px 45px;
		}

		.content .assess .assessContent {
			min-height: 400px;
			margin:10px 60px;
			border:1px solid #d1d2d4;
			border-radius: 15px;
			box-shadow: 2px 2px 12px #d1d2d4;
		}
	</style>
</head>
<body v-on:mousemove="sideMouseMove($event)">
<div v-on:mouseout="sideMouseOut($event)" class="side" v-bind:style="sideWidth">
	<div class="imgHead">
		<img src="./semantic/head.jpg"/>
	</div>
	<div class="info">
		<p>张宇洋(ZhangYuYang)</p>
		<p title="路漫漫其修远,吾将上下而求索">路漫漫其修远,吾将上下而求索</p>
	</div>
	<div class="navTitle">
		<ul>
			<li v-on:click="change('detail')"><span>1</span>个人信息</li>
			<li v-on:click="change('education')"><span>2</span>教育经历</li>
			<li v-on:click="change('project')"><span>3</span>项目经验</li>
			<li v-on:click="change('know')"><span>4</span>掌握技术</li>
			<li v-on:click="change('assess')"><span>5</span>自我评价</li>
		</ul>
	</div>
	<span class="fixedName" v-on:click="fixName">{{fixedName}}</span>
</div>
<div class="content" v-bind:style="contentWidth">
	<div class="header">个人简历</div>
	<component :is="currentView" keep-alive></component>
</div>
</body>
<script type="text/javascript" src="./semantic/js/vue.js"></script>
<script type="text/javascript">
	/*自我简介*/
	Vue.component('detail',{
		template:'<div class="detail">'+
		'<div class="title">'+
			'<span>one</span>个人信息'+
		'</div>'+
		'<div class="detailContent">'+
			'<div class="item">'+
				'<div class="key">姓名:</div>'+
				'<div class="value">张宇洋</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">性别:</div>'+
				'<div class="value">女</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">出生日期:</div>'+
				'<div class="value">xxxx-xx-xx</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">籍贯:</div>'+
				'<div class="value">广东省深圳市罗湖区</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">电话:</div>'+
				'<div class="value">137xxxxxxxxx</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">qq:</div>'+
				'<div class="value">************</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">家庭住址:</div>'+
				'<div class="value">************************************************************************************************************************</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">预计薪酬:</div>'+
				'<div class="value">2000~3000</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">人生格言:</div>'+
				'<div class="value">张宇洋是傻逼</div>'+
			'</div>'+
			'<div class="item">'+
				'<div class="key">剩下的:</div>'+
				'<div class="value">张宇洋你自己看着办</div>'+
			'</div>'+
		'</div>'+
	'</div>'
	});
	/*教育经历*/
	Vue.component('education',{
		template:'	<div class="education">'+
		'<div class="title">'+
			'<span>two</span>教育经历'+
		'</div>'+
		'<div class="item">'+
			'<div class="top">200x</div>'+
			'<div class="bottom">200x</div>'+
			'<div class="line"></div>'+
			'<div class="educationContent">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>'+
		'</div>'+
	'</div>'
	});
	/*项目描述*/
	Vue.component('project',{
		template:'<div class="project">'+
		'<div class="title">'+
			'<span>three</span>项目经验'+
		'</div>'+
		'<div class="item">'+
			'<div class="top">200x</div>'+
			'<div class="bottom">200x</div>'+
			'<div class="line"></div>'+
			'<div class="projectContent">'+
				'<p>名称</p>'+
				'<p>具体时间</p>'+
				'<p>小组分工</p>'+
				'<p>项目描述</p>'+
				'<p>达到效果</p>'+
			'</div>'+
		'</div>'+
	'</div>'
	});
	/*掌握技能*/
	Vue.component('know',{
		template:'<div class="know">'+
		'<div class="title">'+
			'<span>four</span>掌握技术'+
		'</div>'+
		'<div class="knowContent">'+
			'<p>1.xxxxxxxxxxxxxxxxxxxxxxx</p>'+
			'<p>2.xxxxxxxxxxxxxxxxxxxxxxx</p>'+
			'<p>3.xxxxxxxxxxxxxxxxxxxxxxx</p>'+
			'<p>4.xxxxxxxxxxxxxxxxxxxxxxx</p>'+
		'</div>'+
	'</div>'
	});
	/*自我评价*/
	Vue.component('assess',{
		template:'<div class="assess">'+
		'<div class="title">'+
			'<span>five</span>自我评价'+
		'</div>'+
		'<div class="assessContent">'+
		'</div>'+
	'</div>'
	});
	new Vue({
		el: 'body',
		data: {
			sideWidth: {
				width : 0 + 'px'
			},
			contentWidth : {
				width : 100+'%'
			},
			sideLock : true,
			currentView : 'detail',
			fixedName : "固定"

		},
		methods : {
			sideMouseMove : function(e) {
				e = e || window.event;
				var self = this;
				if(e.clientX < 68 && self.sideLock) {
					self.sideWidth.width = 20+'%';
					self.contentWidth.width = 80+'%';
				}
			},
			sideMouseOut : function(e) {
				e = window.event || e;
				var name = e.toElement.localName;
				if(this.sideLock && name == "body") {
					this.sideWidth.width = 0 + 'px';
					this.contentWidth.width = 100+'%';
				}
			},
			change : function(name) {
				this.currentView = name;
			},
			fixName : function() {
				if(this.fixedName == "固定") {
					this.fixedName = "取消";
					this.sideLock = false;
				}else {
					this.fixedName = "固定";
					this.sideLock = true;
				}
			}
		}
	});
</script>
</html>