contract/src/views/contant.vue

<template>
	<div class="contant">
		<div class="contant-both">
			<div class="contant-title">
				<h4>合同管理</h4>
				<ul class="title-ul">
					<li v-for="item,bot in lilist" @click="line(bot)" :class="{white:bot==para}">
						{{item}}
            <p v-show="bot==para"></p>
					</li>
				</ul>
			</div>
			<div class="contant-content">
				<div class="contant-top" v-show="bot==para">
				<div class="part" v-for="(it,key) in partone">
					<div class="part-one">
						<p class="onetitle">
							<span>{{it.number}}</span>
							<span v-if="it.state===0" class="red">待签署</span>
							<span v-else-if="it.state===1" class="orange">已签署</span>
							<span v-else class="gray">待修改</span>
						</p>
						<h4>{{it.name}}</h4>
						<p>
							<span>{{it.date}}</span>
							<span>{{it.time}}</span>
						</p>
						<div class="bgdown" @click="change(key)"  :class="{bgup:seen[key]}"></div>
					</div>
					<div class="part-two" v-for="num in it.parttwo" v-show="seen[key]">
						<p>
							<span>{{num.number}}</span>
							<span v-if="num.state==3" class="blue">已生效</span>
							<span v-else>已失效</span>
						</p>
						<h4>{{num.name}}</h4>
						<p>
							<span>{{num.date}}</span>
							<span>{{num.time}}</span>
						</p>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
     data(){
     	 return{
     	 	       seen:[true,false,false],
     	 	       number:'',
     	 	       para:'',
     	 	       bot:'',
     	 	       lilist:['全部','待签署','已签署','待修改','已生效','已失效'],
     	 	       // 待签署：0，已签署：1，待修改：2，已生效：3，已失效：4
     	 	       partone:[
     	 	       {
     	 	       	number:'C00023698',
     	 	       	state:0,
     	 	       	name:'全日制劳动合同',
     	 	       	date:'2017-6-9',
     	 	       	time:'12:12:12',
     	 	       	parttwo:[
     	 	       	{
     	 	       		number:'C00023698',
     	 	       		state:3,
     	 	       		name:'全日制劳动合同',
     	 	       		date:'2017-6-9',
     	 	       		time:'12:12:12'
     	 	       	},
     	 	       	{
     	 	       		number:'C00023698',
     	 	       		state:4,
     	 	       		name:'全日制劳动合同',
     	 	       		date:'2017-6-9',
     	 	       		time:'12:12:12'
     	 	       	}
     	 	       	]
     	 	       },
     	 	       {
     	 	       	number:'C00023698',
     	 	       	state:1,
     	 	       	name:'全日制劳动合同什么租赁合同什么东东',
     	 	       	date:'2017-6-9',
     	 	       	time:'12:12:12',
     	 	       	parttwo:[
     	 	       	{
     	 	       		number:'C00023698',
     	 	       		state:3,
     	 	       		name:'全日制劳动合同',
     	 	       		date:'2017-6-9',
     	 	       		time:'12:12:12'
     	 	       	},
     	 	       	{
     	 	       		number:'C00023698',
     	 	       		state:3,
     	 	       		name:'全日制劳动合同',
     	 	       		date:'2017-6-9',
     	 	       		time:'12:12:12'
     	 	       	}
     	 	       	]
     	 	       },
     	 	       {
     	 	       	number:'C00023698',
     	 	       	state:2,
     	 	       	name:'全日制劳动合同',
     	 	       	date:'2017-6-9',
     	 	       	time:'12:12:12',
     	 	       	parttwo:[
     	 	       	{
     	 	       		number:'C00023698',
     	 	       		state:4,
     	 	       		name:'全日制劳动合同',
     	 	       		date:'2017-6-9',
     	 	       		time:'12:12:12'
     	 	       	},
     	 	       	{
     	 	       		number:'C00023698',
     	 	       		state:4,
     	 	       		name:'全日制劳动合同',
     	 	       		date:'2017-6-9',
     	 	       		time:'12:12:12'
     	 	       	}
     	 	       	]
     	 	       }
     	 	       ]
     	 }
     },
     mounted(){ 
     },

     methods:{
     	line(a){
           this.para = a
     	},
        change(e){	
        	this.$set(this.seen, e,!this.seen[e])
    }
  }
}	
</script>
<style scoped>
	.contant{
		.red{
					color: #f1325f;
				}
				.orange{
					color:#c88411;
				}
				.blue{
					color: #1199c8;
					}
				.gray{
					color:#5da523;
				}
		.contant-both{
			width: 100%;
			.contant-title{
				height: 4.041667rem;
				background: #60c0ff;
				width: 100%;
				h4{
					text-align: center;
					color: #fff;
					font-size: 0.472222rem;
					padding: 0.541667rem 0;
				}
				.title-ul{
					width: 100%;
					font-size: 0.388889rem;
					color: #c6e5fa;
					li{
						float: left;
						width: 16.3%;
						text-align: center;
						p{
							height: 0.055556rem;
							width: 0.416667rem;
							background: #fff;
							margin: 0 auto;
							margin-top: 0.166667rem;
						}
					}
					.white{
						color:#fff; 
					}
				}
			}
			.contant-content{
				background: #fafafa;
				z-index: -10000;
				width: 100%;
				padding: 0 0.3rem;
				height: 100%;
				.contant-top{
					float: left;
					margin-top: -1.111111rem;
					width: 100%;
					padding-bottom: 2rem;
				.part{
					padding: 0.236111rem 0.333333rem;
					width: 9.166667rem;
					background: #fff;
					border-radius: 10px;
					margin: 0 auto;
					box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
					margin-bottom: 0.416667rem;
					p:nth-of-type(1){
             font-size: 0.388889rem;
             color: #808080;		
             overflow: hidden;
						span:nth-of-type(1){
               float: left;
						}
						span:nth-of-type(2){
							float: right;
						}
					}
					h4{
             font-size: 0.444444rem;
					}
					p:nth-of-type(2){
             font-size: 0.33rem;
             color: #808080;
					}
					.part-one{
						.bgdown{
							background: url("../assets/img/drawable-mdpi/down.png");
							background-size: cover;
							width: 100%;
							height: 0.5rem;
							margin-bottom: 0.1rem;
						}
						.bgup{
							background: url("../assets/img/drawable-mdpi/up.png");
							background-size: cover;
							width: 100%;
							height: 0.5rem;
							margin-bottom: 0.1rem;
						}
						h4{
							color: #1491e2;
						}
						.onetitle{
							
						}
					}
					.part-two:nth-of-type(3){
             margin-top: 0.555556rem;
					}				
					
				}
			}
			}
		}
	}
</style>