JianjianStreet-aplet/pages/index/icone.vue

<template>
	<view class="container">
		
		<view :class="{'icon-active': show}" class="ant-center-icon" @click="show=true"/>
		
		<view v-show="show" class="ant-bottom-modal" @click="show=false"/>
		<view :class="{'active': show}" class="ant-bottom-card">
			<view class="me-div" @click="pushHouse">
				<view class="me-icon"></view>
				<view class="me-texts">
					<view class="me-title">发布房源</view>
					<view class="">转租 整租</view>
				</view>
			</view>
			<!-- <view class="me-div" @click="pushArticle">
				<view class="me-icon"></view>
				<view class="me-texts">
					<view class="me-title">发布帖子</view>
					<view class="">找合租 找室友 转租 非转租</view>
				</view>
			</view> -->
			<view :class="{'me-icon-active': show}" class="me-x" @click="show=false"/>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			console.log('icon')
		}
	}
</script>

<style lang="scss">
	
	.container{
		background-color: #fff !important;
		
		.ant-center-icon{
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			background-color: #4996f5;
			position: absolute;
			left: calc(50vw - 100rpx);
			top: calc(45vh - 100rpx);
			box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, .2);
			transition: all .3s ease-in-out; 
		}
		
		.icon-active{
			transform: rotate(45deg);
			transition: all .3s ease-in-out; 
		}
		
		.ant-center-icon::after{
			content: "";
			width: 120rpx;
			height: 12rpx;
			border-radius: 6rpx;
			background: #fff;
			position: absolute;
			top: 94rpx;
			left: 40rpx;
		}
		
		.ant-center-icon::before{
			content: "";
			width: 12rpx;
			height: 120rpx;
			border-radius: 6rpx;
			background: #fff;
			position: absolute;
			top: 40rpx;
			left: 94rpx;
		}
		
	}
	
	.ant-bottom-modal{
		content: "";
		top: 0;
		left: 0;
		position: absolute;
		z-index: 1;
		background: rgba(0, 0, 0, .6);
		filter: blur(5rpx);
		width: 100vw;
		height: 100vh;
	}
	
	.active{
		bottom: 0 !important;
		transition: all .3s ease-in-out; 
	}
	
	.ant-bottom-card{
		position: fixed;
		z-index: 4;
		background: #FFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		box-shadow: 5rpx -10rpx 40rpx rgba(0, 0, 0, .2);
		width: calc(100vw - 400rpx);
		height: 428rpx;
		bottom: -540rpx;
		left: 0;
		padding: 70rpx 200rpx;
		transition: all .2s ease-in-out; 
		
		.me-div{
			
			display: flex;
			margin-bottom: 40rpx;
			
			.me-icon{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 1rpx dashed #333;
			}
			
			.me-texts{
				width: 190rpx;
				padding: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #8c979d;
				line-height: 37.6rpx;
				
				.me-title{
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}
			}
			
		}
		
		.me-x{
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			left: calc(50vw - 22rpx);
			bottom: 120rpx;
			transition: all .2s ease-in-out; 
			
			&::after{
				content: "";
				width: 44rpx;
				height: 4rpx;
				border-radius: 2rpx;
				background: #888;
				position: absolute;
				top: 20rpx;
				left: 0rpx;
			}
			
			&::before{
				content: "";
				width: 4rpx;
				height: 44rpx;
				border-radius: 2rpx;
				background: #888;
				position: absolute;
				top: 0rpx;
				left: 20rpx;
			}
		}
		
		.me-icon-active{
			transform: rotate(45deg);
			transition: all .1s ease-in-out; 
		}
		
	}
	
</style>






<script>
	export default {
		data() {
			return {
				show: false,
			}
		},
		onReachBottom() {
			console.log("reach bottom")
		},
		methods: {
			pushHouse(){
				uni.navigateTo({
					url: '/pages/pusher/housea'
				})
			},
			pushArticle(){
				uni.navigateTo({
					url: '/pages/pusher/article'
				})
			}
		}
	}
</script>