play-video-app/pages/index/index.vue

<template>
	<view class="main">
		<view class="search">
			<text>亚太视频</text>
			<u-search height="30" bgColor="#FFF" :showAction="false" placeholder="请输入剧名" searchIconColor="#000"></u-search>
		</view>
		<view class="playlets">
			<view class="ranks">
				<u-tabs :list="tabs" @click="click" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-right: 15px; height: 34px;"></u-tabs>		
			</view>
			<view class="rank_list">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="cover">
						<image class="cover_img" src=""></image>
						<view :class="`grade${index}`" class="grade">{{index+1}}</view>
						<view class="hot">
							<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '24rpx'}"></pv-icon>
							<text>12.8W</text>
						</view>
					</view>
					<view class="names">
						<text>大夏第一赘婿</text>
						<text>陈晓童瑶首搭守护小日子</text>
					</view>
				</view>
			</view>
		</view>
		<view class="play_types">
			<view class="type_item" v-for="(item,index) in typeLists" :key="index">
				<view class="title">{{item.name}}</view>
				<view class="watches">
					<view class="watch-item" v-for="(wai,ind) in item.list" :key="ind">
						<view class="cover">
							<image class="cover_img" src=""></image>
							<view class="uphot">
								<text>更新至12集</text>
								<view class="hot">
									<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '26rpx'}"></pv-icon>
									<text>12.8W</text>
								</view>
							</view>
						</view>
						<view class="names">
							<text>小日子</text>
							<text>陈晓童瑶首搭守护小日子</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{ name: '热剧榜' },
					{ name: '男生榜' },
					{ name: '女生榜' },
				],
				list:[
					{
						name:'大夏第一赘婿'
					},
					{
						name:'永安梦'
					},
					{
						name:'分手后回寒门'
					},
				],
				typeLists:[
					{
						name:'都市逆袭',
						list:[
							{name:'小日子'},
							{name:'永安梦'},
							{name:'烈焰'},
							{name:'目中无人'},
						]
					},
					{
						name:'现代言情',
						list:[
							{name:'小日子'},
							{name:'永安梦'},
							{name:'烈焰'},
							{name:'目中无人'},
						]
					},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background: #3C7FFC;
		padding-bottom: var(--window-bottom);
		.search{
			height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			text{
				color: #fff;
				font-weight: bold;
				margin-right: 44rpx;
			}
		}
		.playlets{
			background: linear-gradient( 180deg, #FFF6DE 0%, #FFFFFF 100%);
			border-radius: 24rpx 24rpx 0 0;
			padding: 22rpx 36rpx;
			.ranks{
				margin-bottom: 20rpx;
			}
			.rank_list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.list-item{
					width: 216rpx;
					.cover{
						position: relative;
						.cover_img{
							width: 100%;
							height: 276rpx;
							border-radius: 16rpx;
							background: #3C7FFC;
						}
						.grade{
							text-align: center;
							line-height: 32rpx;
							width: 28rpx;
							height: 32rpx;
							border-radius: 8rpx;
							position: absolute;
							color: #713B03;
							font-size: 24rpx;
							font-weight: bold;
							top: 0;
							right: 0;
						}
						.grade0{
							background: linear-gradient( 90deg, #FFBB3E 0%, #FFCE1C 100%);
						}
						.grade1{
							background: linear-gradient( 90deg, #FFF2DA 0%, #FFDC5E 100%);
						}
						.grade2{
							background: linear-gradient( 90deg, #FFEBC6 0%, #FFF4CE 100%);
						}
						.hot{
							position: absolute;
							left: 12rpx;
							bottom: 8rpx;
							
							text {
								font-size: 24rpx;
								color: #fff;
								margin-left: 8rpx;
							}
						}
					}
					.names{
						margin-top: 40rpx;
						display: flex;
						flex-direction: column;
						text:nth-child(1){
							color: #2A2D32;
							font-size: 28rpx;
							font-weight: 500;
						}
						text:nth-child(2){
							color: #636267;
							font-size: 24rpx;
							font-weight: 400;
						}
					}
				}
			}
		}
		.play_types{
			background: #fff;
			padding: 32rpx 36rpx 0;
			.type_item{
				.title{
					font-weight: bold;
					font-size: 36rpx;
					color: #2A2D32;
					margin-bottom: 28rpx;
				}
				.watches{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.watch-item{
						width: 336rpx;
						margin-bottom: 40rpx;
						.cover{
							position: relative;
							.cover_img{
								width: 100%;
								height: 216rpx;
								border-radius: 16rpx;
								background: #3C7FFC;
							}
							.uphot{
								padding: 12rpx;
								width: 100%;
								position: absolute;
								bottom: 0;
								left: 0;
								display: flex;
								justify-content: space-between;
								font-size: 24rpx;
								color: #FFFFFF;
								text{

								}
								.hot{

								}
							}
						}
						.names{
							margin-top: 20rpx;
							display: flex;
							flex-direction: column;
							text:nth-child(1){
								color: #2A2D32;
								font-size: 28rpx;
								font-weight: 500;
							}
							text:nth-child(2){
								color: #636267;
								font-size: 24rpx;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}
</style>