JianjianStreet-aplet/pages/details/housed.vue

<template>
	<view class="container">
		
		<view class="ant-banner-box ">
			<image class="ant-banner" mode="aspectFill" src=""/>
			<view  class="ant-banner-card ">
				<image class="ant-banner-header" mode="aspectFill" src="https://img0.baidu.com/it/u=1429435380,946942033&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
				<view  class="ant-banner-panl">
					<view class="ant-banner-name">和平发展</view>
					<view class="ant-banner-tag">成长值857</view>
				</view>
			</view>
			<view class="ant-card">
				<view class="ant-art-font">SVIP</view>
				<view class="ant-art-span">开团 VIP 会员享受超多便捷服务</view>
				<view class="ant-art-more">查看更多</view>
			</view>
		</view>
		
		<view class="ant-home-content">
			<view class="ant-menu-card">
				<view class="ant-flex-line">
					<view class="ant-icon-menu">
						<view class="ant-icon-menu-box">
							<view class="ant-icon"></view>
							<view class="ant-text">足迹</view>
						</view>
					</view>
					<view class="ant-icon-menu">
						<view class="ant-icon-menu-box">
							<view class="ant-icon"></view>
							<view class="ant-text">收藏</view>
						</view>
					</view>
					<view class="ant-icon-menu">
						<view class="ant-icon-menu-box">
							<view class="ant-icon"></view>
							<view class="ant-text">关注</view>
						</view>
					</view>
					<view class="ant-icon-menu">
						<view class="ant-icon-menu-box">
							<view class="ant-icon"></view>
							<view class="ant-text">在聊</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="ant-pand-item-box">
				<view class="ant-flex-line" v-for="i in 5">
					<view class="ant-icon-image"></view>
					<view class="ant-pand-item">
						我的足迹
					</view>
				</view>
			</view>
			
		</view>
		
		
		<!-- <view class="content-end">
			<view class="line"/>
			<view class="center">瀚海黎明技术支持</view>
		</view> -->
		
	</view>
</template>

<style lang="scss">
	
	.ant-menu-card{
		top: -40rpx;
		z-index: 1;
		margin: 0 24rpx;
		width: calc(100vw - 96rpx);
		border-radius: 16rpx;
		min-height: 100rpx;
		padding: 24rpx;
		
		.ant-icon-menu{
			width: 150rpx;
			flex: 1;
			
			.ant-icon-menu-box{
				width: 100rpx;
				height: 100rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				margin: 10rpx auto;
				background: linear-gradient(180deg, #f7f7fc -10%, #ffffff);
				box-shadow: 8rpx 8rpx 20rpx rgba(134, 136, 136, 0.2);
				
				.ant-icon{
					width: 60rpx;
					height: 60rpx;
					margin: 8rpx auto;
					border-radius: 12rpx;
					border: 1rpx dashed #ccc;
				}
				
				.ant-text{
					width: 100%;
					font-size: 24rpx;
					color: #222;
					font-weight: bolder;
					line-height: 42rpx;
					text-align: center;
				}
			}
		}
	}
	
	.ant-banner-box{
		position: fixed;
		top: 0;
		left: 0;
		
		.ant-banner{
			width: 100vw;
			height: 480rpx;
			background: radial-gradient(circle farthest-side at top left,
			 rgb(65,117,255) 0, rgb(92,221,224) 20%, 
			 rgb(65,117,255) 60%, rgb(61,221,209) 100%)
		}
		
		.ant-banner-card{
			position: fixed;
			top: 140rpx;
			left: 42rpx;
			display: flex;
			
			.ant-banner-header{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 1rpx solid #FFF;
			}
			
			.ant-banner-panl{
				padding: 10rpx 30rpx;
				
				.ant-banner-name{
					font-weight: bolder;
					color: #FFF;
					font-size: 34rpx;
					margin-bottom: 20rpx;
				}
				
				.ant-banner-tag{
					background-color: rgba(255, 255, 255, .4);
					width: 120rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 40rpx;
					color: #FFF;
					font-size: 22rpx;
					padding: 5rpx 20rpx;
				}
			}
			
		}
		
		
		
		.ant-card{
			padding: 24rpx;
			width: calc(100vw - 72rpx - 48rpx);
			height: 160rpx;
			background: linear-gradient(155deg, 
				rgb(22,24,184), rgb(77, 78, 255), rgb(26,83,204));
			border-top-left-radius: 42rpx;
			border-top-right-radius: 42rpx;
			position: absolute; 
			bottom: -20rpx;
			left: 36rpx; 
		}
		
		.ant-art-font{
			font-size: 48rpx;
			font-weight: bolder;
			padding: 25rpx 20rpx 0;
		}
		.ant-art-span{
			font-size: 24rpx;
			padding: 10rpx 20rpx 10rpx;
		}
		.ant-art-more{
			font-size: 24rpx;
			padding: 10rpx 20rpx 10rpx;
			position: absolute;
			top: 50rpx;
			right: 40rpx;
		}
		.ant-art-more::after{
			content: "";
			position: absolute;
			top: 17.5rpx;
			right: 6rpx;
			width: 10rpx;
			height: 10rpx;
			border-bottom: 1rpx solid #FFF;
			border-right: 1rpx solid #FFF;
			transform: rotate(-45deg);
		}
	}
	
	.ant-home-content{
		width: 100vw;
		min-height: calc(100vh - 460rpx);
		background: linear-gradient(0deg, rgb(255,255,255), rgb(224,224,250), rgb(249, 249, 252));
		position: absolute;
		top: 460rpx;
		margin-bottom: 100rpx;
		
		.ant-pand-item-box{
			width: calc(100vw - 186rpx);
			min-height: 400rpx;
			background: #fff; 
			border-radius: 18rpx;
			margin: 10rpx auto;
			padding: 36rpx;
			color: #000;
			font-weight: bolder;
			
			.ant-flex-line{
				height: 120rpx;
				line-height: 120rpx;
				border-bottom: 1rpx solid #eee;
				position: relative;

				.ant-icon-image{
					width: 60rpx;
					height: 60rpx;
					border-radius: 12rpx;
					border: 1rpx dashed #ccc;
					margin-right: 24rpx;
				}
				
			}
			
			.ant-flex-line:last-of-type{
				border-bottom: 0 !important;
			 }
			
			.ant-flex-line::after{
					content: "";
					position: absolute;
					top: 62rpx;
					right: 15rpx;
					
					width: 12rpx;
					height: 12rpx;
					border-bottom: 2rpx solid;
					border-right: 2rpx solid;
					transform: rotate(-45deg);
				}
			
			
		}
	}
	
	.ant-home-content::after{
		content: " ";
		position: absolute;
		top: -1rpx;
		left: calc(50vw - 25rpx);
		width: 50rpx;
		height: 25rpx;
		background-color: #454ff7;
		clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
		-webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
	}

</style>






<script>
	export default {
		data() {
			return {
				banner: {url:''},
				information: [],
				id: ''
			}
		},
		onReachBottom() {
			console.log("reach bottom")
		},
		methods: {
			toUri(uri) {
				uni.navigateTo({url: uri})
			},
			getImageUrl(uri){
				return baseUrl + "/" + uri;
			},
			getDayString(str){
				return str.substr(0, 16)
			},
		}
	}
</script>