Ci2Order.vue/App/components/z-collapse/z-collapse.vue

<template>
	<view class="z-collapse">
		<view class="z-collapse-title flex-n fac fjb" @click="show=show?false:true">
			<view class="z-collapse-text">{{title}}</view>
			<view class="iconfont iconfanhui" :class="show?'z-collapse-top':'z-collapse-down'"></view>
		</view>
		<view :class="show?'z-collapse-area':'z-collapse-area-hide'">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:String
		},
		data() {
			return {
				show:false,
			};
		}
	}
</script>

<style scoped lang="scss">
.z-collapse{
	.z-collapse-title{
		   line-height: 80rpx;
		   padding: 0 50rpx;
		   border-bottom: 1px solid #f1f1f1;
	}
	.z-collapse-text{
		color: #999999;
	font-size:28rpx;
	}
	.z-collapse-top{
		transform: rotate(90deg);
		color: #333333;
		font-size:28rpx;
	}
	.z-collapse-down{
		font-size:28rpx;
		color: #333333;
		transform: rotate(-90deg);
	}
	.z-collapse-area{
		animation: show .5s;
		animation-fill-mode:forwards;
	}
	.z-collapse-area-hide{
		animation: hide .5s;
		animation-fill-mode:forwards;
	}
}
@keyframes show{
	0%{
		height: 0;
		padding: 0;
		overflow:visible;
	}
	100%{
		padding: 20rpx 0;
		height: 100%;
	}
}
@keyframes hide{
	0%{
		padding: 20rpx 0;
		height: 100%;
	}
	100%{
		height: 0;
		padding: 0;
		overflow:hidden;
	}
}
</style>