pay-video-applet-uniapp-24-8-22/pages/index/index.vue

<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"
				@click="$utils.navigateTo('/publish/actorList')">
					查看全部
					<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>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import postList from '@/components/post/postList.vue'
	export default {
		components : {
			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 : {
			locale(){
				return this.$t('pages.index.index')
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding-bottom: 150rpx;
		.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>