上传首页和动态列表

components/base/navbar.vue

@@ -4,7 +4,7 @@
 			<view class="left">
 				<uv-icon name="arrow-left"
 				v-if="leftClick"
-				@click="leftClick()"
+				@click="$emit('leftClick')"
 				color="#333" size="46rpx"></uv-icon>
 			</view>
 			<view>{{ title }}</view>
@@ -44,7 +44,7 @@
 				default : ''
 			},
 			leftClick : {
-				type : Function,
+				type : Boolean,
 			},
 			moreClick : {
 				type : Function,
@@ -79,15 +79,16 @@
 .navbar{
 	width: 100%;
 	height: 100rpx;
+	padding-top: calc(var(--status-bar-height));
 }
 .title{
 	position: fixed;
 	top: 0;
 	left: 0;
-	padding-top: var(--status-bar-height);
+	padding-top: calc(var(--status-bar-height) + 20rpx);
 	width: 100%;
 	height: 100rpx;
-	background-color: #f7f7f7;
+	background-color: #fff;
 	display: flex;
 	justify-content: center;
 	font-size: 32rpx;

components/base/tabbar.vue

@@ -3,6 +3,7 @@
 		<view
 		 :class="{item : true, active : select == index}"
 		 v-for="(item, index) in list"
+		 :key="index"
 		 @click="toPath(item, index)">
 			<view class="icon">
 				<image :src="select == index ? 

pages.json

@@ -96,6 +96,13 @@
 			{
 				"navigationBarTitleText" : ""
 			}
+		},
+		{
+			"path" : "pages/publish/postList",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -1,7 +1,75 @@
 <template>
 	<view class="content">
 		
+		<view class="top">
+			<view class="title">
+				<view class="">
+					首页
+				</view>
+				<view class="">
+					北京
+					<uv-icon 
+					name="arrow-down" 
+					color="#fff"></uv-icon>
+				</view>
+			</view>
+			
+			<view class="search">
+				<view class="icon">
+					<uv-icon
+					size="40rpx"
+					name="search"></uv-icon>
+				</view>
+				<input type="text" placeholder="请输入搜索关键字..."/>
+				<view class="text">
+					搜索
+				</view>
+			</view>
+			
+			<view class="swipe">
+				<uv-swiper 
+				:list="list"
+				keyName="url"
+				height="320rpx"
+				:autoplay="false"></uv-swiper>
+			</view>
+		</view>
 		
+		<view class="box">
+			<view class="box-line">
+				<view class="title">
+					认证演员
+				</view>
+				<view class="more">
+					查看全部
+					<uv-icon 
+					size="26rpx"
+					name="arrow-right"></uv-icon>
+				</view>
+			</view>
+			<view class="ACTORS">
+				<uv-swiper 
+				:list="ACTORS"
+				keyName="url"
+				height="320rpx"></uv-swiper>
+			</view>
+		</view>
+		
+		<view class="box">
+			<view class="box-line">
+				<view class="title">
+					动态帖子
+				</view>
+				<view class="more" @click="$utils.navigateTo('/publish/postList')">
+					查看全部
+					<uv-icon 
+					size="26rpx"
+					name="arrow-right"></uv-icon>
+				</view>
+			</view>
+			
+			<postList :list="postList"/>
+		</view>
 		
 		<tabber :select="0"/>
 	</view>
@@ -9,12 +77,52 @@
 
 <script>
 	import tabber from '@/components/base/tabbar.vue'
+	import postList from '@/components/post/postList.vue'
 	export default {
 		components : {
-			tabber
+			tabber,
+			postList
 		},
 		data() {
 			return {
+				list : [
+					{
+						url : '/static/image/index/123123.png'
+					}
+				],
+				ACTORS : [
+					{
+						url : '/static/image/index/a1.png'
+					},
+					{
+						url : '/static/image/index/a2.png'
+					},
+					{
+						url : '/static/image/index/a3.png'
+					},
+				],
+				postList : [
+					{
+						title : "这是一条动态",
+						createTime : '2024-08-22 09:00:00',
+						createBy : "小飞",
+					},
+					{
+						title : "这是一条动态",
+						createTime : '2024-08-22 09:00:00',
+						createBy : "小飞",
+					},
+					{
+						title : "这是一条动态",
+						createTime : '2024-08-22 09:00:00',
+						createBy : "小飞",
+					},
+					{
+						title : "这是一条动态",
+						createTime : '2024-08-22 09:00:00',
+						createBy : "小飞",
+					},
+				],
 			}
 		},
 		computed : {
@@ -30,9 +138,68 @@
 
 <style scoped lang="scss">
 	.content{
-		padding: 20px;
-		button{
-			margin-bottom: 10rpx;
+		.top{
+			background-image: $uni-linear-gradient-bg-color;
+			padding: 0 20rpx;
+			padding-top: calc(var(--status-bar-height) + 20rpx);
+			.title{
+				display: flex;
+				color: #fff;
+				justify-content: space-between;
+				&>view{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+			.search{
+				background-color: #fff;
+				height: 70rpx;
+				width: 100%;
+				margin: 20rpx 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 28rpx;
+				border-radius: 10rpx;
+				.icon{
+					margin: 0 20rpx;
+				}
+				input{
+					
+				}
+				.text{
+					margin-left: auto;
+					margin-right: 20rpx;
+				}
+			}
+		}
+		.box{
+			padding: 20rpx;
+			.box-line{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 20rpx;
+				.title{
+					position: relative;
+					&::after{
+						content: '';
+						position: absolute;
+						display: block;
+						bottom: 0;
+						left: 20rpx;
+						width: 20rpx;
+						height: 12rpx;
+						background-color: $uni-linear-gradient-color;
+					}
+				}
+				.more{
+					display: flex;
+					font-size: 24rpx;
+					color: #777;
+				}
+			}
 		}
 	}
 </style>

uni.scss

@@ -17,10 +17,12 @@
 
 
 
-// 渐变主题色
+/* 渐变主题色 */
 $uni-linear-gradient-color : linear-gradient(to right, #99b9f3, #af9cfa);
-// 渐变按钮颜色
+/* 渐变按钮颜色 */
 $uni-linear-gradient-btn-color : linear-gradient(to right, #3c69f1, #5f3bf5);
+/* 渐变背景颜色 */
+$uni-linear-gradient-bg-color : linear-gradient(to bottom, rgb(171, 151, 247), #f7f7f7);