From d4af4c2e1e2e8251327ef19541c4f124637715c1 Mon Sep 17 00:00:00 2001
From: Bobi <2166145077@qq.com>
Date: Thu, 24 Oct 2024 15:40:56 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=92=8C=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json             |  12 +-
 pages/index/center.vue | 375 +++++++++++++++++++------------------------------
 pages/index/index.vue  | 322 ++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 460 insertions(+), 249 deletions(-)

diff --git a/pages.json b/pages.json
index bf341ff..fae0e40 100644
--- a/pages.json
+++ b/pages.json
@@ -89,5 +89,15 @@
 		"backgroundColor": "#F8F8F8",
 		"navigationStyle": "custom"
 	},
-	"uniIdRouter": {}
+	"uniIdRouter": {},
+	"condition" : { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [
+			{
+				"name": "", //模式名称
+				"path": "", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到
+			}
+		]
+	}
 }
\ No newline at end of file
diff --git a/pages/index/center.vue b/pages/index/center.vue
index 6242ebf..28fcb8c 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -1,7 +1,70 @@
 <template>
 	<view class="page">
-
-
+		<view class="beijin">
+
+			<view class=" profile">
+				<view class="o">
+					<view class="headImage">
+						<!-- <img src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg"
+							alt="" /> -->
+						<image
+							src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg"
+							mode="aspectFill"></image>
+					</view>
+
+					<view class="setUp">
+						设置
+					</view>
+				</view>
+
+				<view class="account">
+					<view class="number">
+						狐友1712378974678376
+					</view>
+					<view class="gender">
+						<uv-icon name="man" size="34rpx" color="rgb(127 200 239)"></uv-icon>
+					</view>
+
+					<view class="authentication">
+						未认证
+					</view>
+				</view>
+				<view class="Days">
+					你已经成为狐友133天啦~
+				</view>
+
+				<view class="box">
+					<view class="followWithnterest">
+						<view class="digit">
+							2
+						</view>
+						<view class="close">
+							关注
+						</view>
+
+					</view>
+					<view class="shut">
+
+						|
+					</view>
+					<view class="fenst">
+						<view class="digit">
+							0
+						</view>
+						<view class="fans">
+							粉丝
+						</view>
+					</view>
+
+				</view>
+
+			</view>
+		</view>
+
+		<view class="Content">
+			<uv-tabs :list="list" @click="click" lineColor="black" lineWidth="35" lineHeight="5" ></uv-tabs>
+
+		</view>
 
 		<tabber select="3" />
 	</view>
@@ -9,274 +72,118 @@
 
 <script>
 	import tabber from '@/components/base/tabbar.vue'
-	import {
-		mapGetters
-	} from 'vuex'
-	import userShopCommission from '@/components/userShop/userShopCommission.vue'
 	export default {
 		components: {
 			tabber,
-			userShopCommission,
-		},
-		computed: {
-			...mapGetters(['userShop']),
-			customStyle1() {
-				return {
-					height: '60rpx',
-					background: '#FFF',
-					color: '#000000',
-					fontSize: '36rpx',
-					borderRadius: '40rpx', //圆角
-
-					// nvue中必须是下方的写法
-					'border-top-right-radius': '40rpx',
-					'border-bottom-left-radius': '40rpx',
-					'border-bottom-right-radius': '40rpx',
-					'width': '150rpx',
-				}
-			},
-			customStyle2() {
-				return {
-					height: '60rpx',
-					background: '#fd5100',
-					color: '#FFF',
-					fontSize: '34px',
-					borderRadius: '40rpx', //圆角
-					// nvue中必须是下方的写法
-					'border-top-right-radius': '40rpx',
-					'border-bottom-left-radius': '40rpx',
-					'border-bottom-right-radius': '40rpx',
-					'width': '150rpx',
-				}
-			}
 		},
+		computed: {},
 		data() {
 			return {
-				show: false,
+				list: [{
+					name: '关注',
+				}, {
+					name: '评论',
+				}]
 			}
 		},
 		methods: {
-
-
-			headBtn() {
-				let self = this
-				uni.showModal({
-					title: '演示切换角色之后的效果',
-					success(res) {
-						if (res.confirm) {
-							self.$store.state.shop = !self.$store.state.shop
-						}
-					}
-				})
-			},
-
-			// 联系客服按钮回调
-			contactUs() {
-				this.show = true
-			},
-			confirm() {
-				this.show = false
-			},
-
-			cancle() {
-				this.show = false
-			},
-
+			click(item) {
+				console.log('item', item);
+			}
 
 		}
 	}
+	
 </script>
 
 <style scoped lang="scss">
 	.page {
+		.beijin {
+			background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));
+			background-color: black;
+			color: white;
 
-		.warp {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: 100%;
-
-		}
-
-		.rect {
-			width: 600rpx;
-			height: 300rpx;
-			background-color: #fff;
-			border-radius: 20rpx;
-			overflow: hidden;
-
-			.title {
-				padding: 10rpx 0 0 15rpx;
-				background-color: #fd5100;
-				color: #FFF;
-				text-align: left;
-				width: 100%;
-				height: 18%;
-				font-size: 36rpx;
-			}
-
-			.center {
-				height: 40%;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				font-size: 36rpx;
-			}
-
-			.bottom {
-				display: flex;
-				justify-content: center;
-				gap: 50rpx;
-			}
-		}
-	}
-
+			.profile {
+				padding: 40rpx;
+				padding-top: 160rpx;
 
+				.box {
+					padding: 5rpx 10rpx;
+					display: flex;
+					align-items: center;
+					text-align: center;
 
-	image {
-		width: 100%;
-		height: 100%;
-	}
+					.followWithnterest {
+						.digit {
+							padding: 20rpx;
+						}
 
-	.head {
-		display: flex;
-		background-color: #fff;
-		padding: 40rpx 20rpx;
-		align-items: center;
-		position: relative;
-
-		.headImage {
-			width: 120rpx;
-			height: 120rpx;
-			background-image: url(/static/image/center/3.png);
-			background-size: 100% 100%;
-			overflow: hidden;
-			border-radius: 50%;
-			margin-right: 40rpx;
-		}
+						.close {
+						}
 
-		.info {
-			font-size: 28rpx;
-
-			.vip {
-				background-color: #FCCC92;
-				color: #FA6239;
-				width: 100rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				height: 40rpx;
-				border-radius: 20rpx;
-				margin-top: 20rpx;
-			}
+					}
+					
+					.shut{
+						margin: 0rpx 20rpx;
+						
+					}
+					
+					.fenst {
+						.digit {
+							padding: 20rpx;
+						}
+					
+						.fans {
+						}
+					}
+				}
 
-			.name {
-				font-size: 32rpx;
-			}
+				.account {
+					display: flex;
+					align-items: center;
 
-			.tips {
-				font-size: 26rpx;
-				color: #ABABAB;
-			}
-		}
+					.number {
+						letter-spacing: 2rpx;
+						margin-top: 10rpx;
+					}
 
-		.headBtn {
-			margin-left: auto;
-			padding: 15rpx 20rpx;
-			background-color: $uni-color;
-			color: #fff;
-			border-radius: 20rpx;
-			margin-top: 50rpx;
-		}
+					.gender {
 
-		.setting {
-			position: absolute;
-			right: 50rpx;
-			top: 50rpx;
-		}
-	}
+						margin: 20rpx 10rpx;
 
-	.userShop {
-		.userList {
-			.title {
-				font-size: 32rpx;
-				font-weight: 900;
-				padding: 20rpx;
-			}
+					}
 
-			.list {
-				display: flex;
-				flex-wrap: wrap;
+					.authentication {
+						font-size: 20rpx;
 
-				.item {
-					width: 270rpx;
-					margin: 20rpx;
-					display: flex;
-					flex-direction: column;
-					padding: 40rpx 30rpx;
-					background-color: #fff;
-					border-radius: 30rpx;
-					line-height: 60rpx;
-
-					.name {}
-
-					.num {
-						color: $uni-color;
-						font-weight: 600;
-						font-size: 28rpx;
 					}
 				}
-			}
-		}
-	}
 
-	.user {
-		.line {
-			display: flex;
-			background-color: #fff;
-			margin-top: 20rpx;
-			padding: 20rpx 0;
-
-			.item {
-				flex: 1;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				padding: 20rpx 0;
-
-				&:nth-child(1) {
-					border-right: 1px solid #00000013;
+				.Days {
+					margin-top: 15rpx;
+					font-size: 22rpx;
+					letter-spacing: 2rpx;
 				}
 
-				.image {
-					width: 100rpx;
-					height: 70rpx;
-					margin-right: 20rpx;
+				.o {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					.headImage {
+						image {
+							height: 100px;
+							width: 100px;
+							border-radius: 50%;
+						}
+					}
+
+					.setUp {
+					}
 				}
 			}
 		}
 
-		.grid {
-			flex-direction: column;
-			font-size: 26rpx;
-			padding: 20rpx;
-
-			.title {
-				margin-bottom: 30rpx;
-				font-size: 28rpx;
-				font-weight: 600;
-			}
-
-			.image {
-				width: 70rpx;
-				height: 70rpx;
-				margin-bottom: 10rpx;
-			}
-
-			text {
-				text-align: center;
-				width: 120rpx;
-			}
-		}
+		.Content {}
 	}
 </style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 7b1cee2..78d21f0 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,13 +1,110 @@
 <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>
 		
-		<image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" 
-		style="w100p"
-		mode="widthFix"></image>
-		
-		<PrivacyAgreementPoup/>
-		
-		<tabber select="0"/>
+		<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>
 
@@ -16,23 +113,220 @@
 	import tabber from '@/components/base/tabbar.vue'
 	import mixinsList from '@/mixins/list.js'
 	export default {
-		mixins : [mixinsList],
-		components : {
+		mixins: [mixinsList],
+		components: {
 			tabber,
 			PrivacyAgreementPoup,
 		},
 		data() {
 			return {
+				list: [{
+					name: '圈子动态',
+				}, {
+					name: '二手集市',
+				}, {
+					name: '游戏组局'
+				}, {
+					name: '求租求购'
+				}, {
+					name: '婚恋交友'
+				}, {
+					name: '美食'
+				}, {
+					name: '文化'
+				}, {
+					name: '财经'
+				}, {
+					name: '手工'
+				}]
 			}
 		},
-		computed : {
-		},
+		computed: {},
 		methods: {
+			click(item) {
+				console.log('item', item);
+			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	
-	
-</style>
+	.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>
\ No newline at end of file