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动态<text>|</text>23212江华人
					</view>
				</view>

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

		<view class="life">
			<view class="mouse" @click="menuClick(index)" 
			:key="index" 
			v-for="(item, index) in menu">
				<view class="RentingAhouseimg">
					<image 
					:src="`../../static/image/home/${index}.png`" 
					style="width: 90rpx;height: 90rpx;" mode=""></image>
				</view>
				<view class="RentingAhouse">
					{{ item.name }}
				</view>
			</view>
		</view>

		<view class="LabelOptions">
			<uv-tabs :list="list" 
			:activeStyle="{color : '#000', fontWeight : 900}"
			lineColor="#00f"
			lineHeight="8rpx"
			lineWidth="50rpx"
			@click="tabsClick"></uv-tabs>
		</view>

		<view class="works" :key="index" v-for="(item, index) in 10">
			<view class="box">
				<view class="headPortraitimg">
				</view>
				<view class="YaoduUniversalWall">
					<view class="heide">
						<view class="username text-ellipsis">
							瑶都万能墙
						</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" 
				:key="i"
				v-for="(img, i) in 3">
					<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>
		
		<view class="createDetail"
		@click="$refs.createDetailPopup.open('bottom')">
			<uv-icon
			size="40rpx"
			color="#fff"
			name="plus"></uv-icon>
		</view>
		
		<uv-popup ref="createDetailPopup" :round="30">
			<view class="createDetailPopup">
				<view class=""
				:key="index"
				@click="$utils.navigateTo(item.path)"
				v-for="(item, index) in createDetail">
					<image
					:src="`../../static/image/home/${index}.png`" 
					style="width: 90rpx;height: 90rpx;" mode=""></image>
					
					<view class="info">
						<view class="title">
							{{ item.name }}
						</view>
						<view class="desc">
							{{ item.desc }}
						</view>
					</view>
					<view class="icon">
						<uv-icon
						size="30rpx"
						name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
		</uv-popup>

		<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: '手工'
					},
				],
				menu : [
					{
						name : '租房',
					},
					{
						name : '工作',
					},
					{
						name : '活动',
					},
					{
						name : '美食',
					},
				],
				createDetail : [
					{
						name : '圈子动态',
						desc : '发布动态（请发布到合适的分区）',
						path : '/pages_order/post/addPost',
					},
					// {
					// 	name : '房屋出租',
					// 	desc : '发布房屋出租',
					// 	path : '/pages_order/renting/addRenting',
					// },
					// {
					// 	name : '工作',
					// 	desc : '发布工作',
					// 	path : '/pages_order/recruit/addRecruit',
					// },
				],
			}
		},
		computed: {},
		methods: {
			tabsClick(item) {
				console.log('item', item);
			},
			menuClick(index) {
				console.log(index);
				// 跳转页面
				if (index == 0) {
					uni.navigateTo({
						url: '/pages_order/renting/rentingList'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages_order/recruit/recruitList'
					})
				} else if (index == 2) {
					uni.reLaunch({
						url: '/pages/index/activity'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
	.Headbackground {
		padding-top: 200rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));

		.top {
			display: flex;
			color: white;
			padding: 35rpx;
			align-items: center;

			.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;

					text {
						margin: 0 20rpx;
					}
				}
			}

			.join {
				width: 125rpx;
				height: 50rpx;
				background-color: $uni-color-primary;
				margin-left: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
			}

		}
	}

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

		.mouse {
			.RentingAhouseimg {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 15rpx;
				width: 130rpx;
				height: 100rpx;
				background-color: #ffffff;
				border-top-left-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				border-bottom-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
		}
	}

	.works {
		margin: 40rpx 24rpx;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 6rpx 6rpx #00000011;

		.box {
			display: flex;
			align-items: center;

			.headPortraitimg {
				width: 100rpx;
				height: 100rpx;
				background-color: greenyellow;
				border-radius: 15rpx;
				overflow: hidden;
			}

			.YaoduUniversalWall {
				padding: 0rpx 10rpx;
				.username{
					max-width: 200rpx;
				}

				.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;
					flex-shrink: 0;
				}

				.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;
					flex-shrink: 0;
				}

				.Times {
					display: flex;
					padding: 5rpx 0rpx;
					font-size: 20rpx;
					margin-top: 10rpx;

					.Month {
						margin: 0rpx 15rpx;
					}
				}

			}
		}

		.personalInformation {
			display: flex;

			.inde {
				font-size: 25rpx;
				padding: 0rpx 8rpx;
			}

			.authentication {
				font-size: 25rpx;
			}
		}

		.dynamics {
			margin-top: 20rpx;
			font-size: 28rpx;
			// font-weight: bold;
			// line-height: 35rpx;
			letter-spacing: 3rpx;
		}

		.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;
			}
		}
	}
	
	.createDetail{
		position: fixed;
		top: 50vh;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: $uni-color-primary;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx 10rpx rgba(#000, 0.1);
	}
	.createDetailPopup{
		padding: 20rpx;
		background-color: #ffffff;
		&>view{
			display: flex;
			align-items: center;
			padding: 24rpx;
			background-color: #f7f7f7;
			margin: 20rpx;
			border-radius: 20rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}
			.info{
				.title{
					font-size: 30rpx;
				}
				.desc{
					font-size: 24rpx;
				}
			}
			.icon{
				margin-left: auto;
			}
		}
	}
</style>