universal-wechat-uniapp-241007/pages/index/index.vue

<template>
	<view class="page">

		<!-- 瑶都万能墙 -->
		<view class="Headbackground">
			<view class="top">
				<view class=" profilePicture">

				</view>
				<view class="UniversalWall">
					<view class="dynamic">
						瑶都万能墙
					</view>

					<view class="dynamics">
						13542动态|23212江华人
					</view>
				</view>

				<view class="join">
					加入
				</view>
			</view>
		</view>

		<view class="life">
			<view class="mouse"
			v-for="(item, index) in 4">
				<view class="RentingAhouseimg">
				</view>
				<view class="RentingAhouse">
					租房
				</view>
			</view>
		</view>

		<view class="LabelOptions">
			<uv-tabs :list="list" @click="click"></uv-tabs>
		</view>
		
		<view class="works"
		v-for="(item, index) in 10">
			<view class="box">
				<view class="headPortraitimg">
				</view>
				<view class="YaoduUniversalWall">
					<view class="heide">
						<view class="qing">
							瑶都万能墙
						</view>
						<view class="inde">
							男性
						</view>
						<view class="inde">
							99年
						</view>
						<view class="inde">
							大路铺镇
						</view>
						<view class="authentication">
							官方认证
						</view>
					</view>
					
					<view class="Times">
						<view class="TimeMonth">
							10-08
						</view>
						<view class="Month">
							12:34发布
						</view>
					</view>
				</view>
			</view>
			<view class="dynamics">
				漫时光蛋糕店私人蛋糕订制
				漫时光蛋糕店私人蛋糕订制
				漫时光蛋糕店私人蛋糕订制
				漫时光蛋糕店私人蛋糕订制
				漫时光蛋糕店私人蛋糕订制
			</view>
			<view class="">
				
			</view>
			<view class="Artworkimages">
				<view class="wrokimg"
				v-for="(img, i) in 10">
					<image src="https://img2.baidu.com/it/u=731471589,1077533873&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" alt="" />
				</view>
			</view>
			<view class="bottom">
				<view class="browse">
					6789浏览
				</view>
				<view class="browse">
					231条评论
				</view>
				<view class="Leavingamessage">
					<uv-icon
					size="30rpx"
					name="chat"></uv-icon>
				</view>
			</view>
		</view>

		<PrivacyAgreementPoup />
		<tabber select="0" />
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import tabber from '@/components/base/tabbar.vue'
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins: [mixinsList],
		components: {
			tabber,
			PrivacyAgreementPoup,
		},
		data() {
			return {
				list: [{
					name: '圈子动态',
				}, {
					name: '二手集市',
				}, {
					name: '游戏组局'
				}, {
					name: '求租求购'
				}, {
					name: '婚恋交友'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}]
			}
		},
		computed: {},
		methods: {
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style scoped lang="scss">
	.Headbackground {
		display: flex;
		align-items: center;
		height: 400rpx;

		background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));

		.top {
			display: flex;
			color: white;
			padding: 35rpx;


			.profilePicture {
				width: 100rpx;
				height: 100rpx;
				background-color: greenyellow;
				border-radius: 15rpx;

			}

			.UniversalWall {
				padding: 0rpx 45rpx;

				.dynamic {
					font-size: 40rpx;
					letter-spacing: 5rpx;
				}

				.dynamics {
					margin-top: 20rpx;
					font-size: 25rpx;
				}

			}

			.join {
				width: 125rpx;
				height: 50rpx;
				background-color: #1671ff;
				margin-top: 50rpx;
				margin-left: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
			}

		}
	}

	.life {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;

		.mouse {

			.RentingAhouseimg {
				margin-bottom: 15rpx;
				width: 125rpx;
				height: 85rpx;
				background-color: #ffffff;
			}
		}

		
	}
	.works {
		margin: 24rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 6rpx 6rpx #00000011;
		.box {
			display: flex;
			.headPortraitimg {
				width: 100rpx;
				height: 100rpx;
				background-color: greenyellow;
				border-radius: 15rpx;
			}
			.YaoduUniversalWall{
				padding: 0rpx 10rpx;
				.heide{
					display: flex;
					justify-content: center;
					align-items: center;
					
					
				}
				.inde{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 10rpx;
					margin: 0rpx 5rpx;
				    font-size: 20rpx;
					height: 30rpx;	
					color: white;
					background-color:rgb(124,136,242); 
					border-radius: 7rpx;
					
				}
				.authentication{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 10rpx;
					margin: 0rpx 5rpx;
					font-size: 20rpx;
					height: 34rpx;
					padding: 0rpx 10rpx;
					color: white;
					background-color:#ffd036;
					border-radius: 7rpx;
				}
				
				.Times{
					display: flex;
					padding: 5rpx 0rpx;
					font-size: 20rpx;
					
					.Month{
						margin: 0rpx 15rpx;
				
					}
					
				}
				
			}
		}
		.personalInformation{
				display: flex;
				.inde{
					font-size: 25rpx;
					padding: 0rpx 8rpx;
				}
				.authentication{
					font-size: 25rpx;
				}
			}
			.dynamics{
				margin-top: 20rpx;
				font-size: 20rpx;
				font-weight: bold;
				line-height: 35rpx;
				letter-spacing: 5rpx;
			}
			.Artworkimages{
				display: flex;
				flex-wrap: wrap;
				.wrokimg{
					margin: 10rpx;
					image{
						height: 190rpx;
						width: 190rpx;
						border-radius: 20rpx;
						
					}
				}
			}
			.bottom{
				display: flex;
				
				font-size: 20rpx;
				.browse{
					margin: 0rpx 30rpx;
					color: rgb(132,132,132);
				}
				.Leavingamessage{
					height: 20rpx;
					width: 20rpx;
					margin-left: auto;
				}
			}
	}
</style>