cyzh-SoundOfMusic-H5/pages/activityList/activity/songRank.vue

<template>
	<view>
		<view class="bg-img flex justify-center align-center" style="background-image: url('/static/songRank/songRankBgImg.png');height: 402upx;">
			<view class="title">歌曲排行榜</view>
		</view>
		<view class="flex justify-center align-center padding-bottom">
			<view class="search">
				<text class="cuIcon-search padding-right-xs"></text>
				{{searValue}}
			</view>
		</view>
		<u-sticky h5-nav-height="0">
			<u-tabs :list="list" active-color="#5c40e8" :bold="false" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="flex align-center padding-left" style="margin-top: 40upx;">
			<image src="/static/songRank/medal.png" style="width: 32upx;height: 40upx"></image>
			<view style="font-size: 36upx;font-weight: 800;color: #000000;padding-left: 20upx;">提名歌曲</view>
		</view>
		<block v-for="(item, index) in songList" :key="index">
			<block v-if="index == 0 || index == 1 || index == 2">
				<view class="margin-sm flex align-center" :class="index == 0 ? 'first' : index == 1 ? 'second' : index == 2 ? 'third' : '' ">
					<u-image width="200" height="200" :src="item.coverImg"></u-image>
					<view class="flex justify-between container" :style="{width: (index == 0 ? '70%': index == 1 ? '69%' : index == 2 ? '68%' : '60%')}">
						<view class="left"  style="width: 65%;">
							<view class="name text-cut">{{item.name}}</view>
							<view class="padding-tb-sm text-sm">{{item.singer}}</view>
							<view class="hot-value">热力值 {{item.hotVaule}}</view>
						</view>
						<view class="right">
							<view class="rank" :style="{coloar: (index == 0 ? '#ECDA47': index == 1 ? '#C1D4DA' : index == 2 ? '#C1D4DA' : '')}">
								NO.{{index + 1}}
							</view>
							<view>
								<button class="cu-btn round theme-bg-color sm text-white">
									<text class="cuIcon-hotfill"></text>
									<text class="padding-left-xs">打榜</text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="flex" style="padding: 10upx 30upx 30upx 40upx;">
					<view class="flex justify-center align-center text-bold text-lg padding-right">{{index + 1}}</view>
					<image :src="item.coverImg" style="width: 120upx;height: 120upx;margin-right: 20upx;"></image>
					<view style="width: 70%;">
						<view class="flex justify-between">
							<view class="music" style="width: 75%;">
								<view class="name text-cut">{{item.name}}</view>
								<view class="author">{{item.singer}}</view>
								<view class="hot-vaule">热力值 {{item.hotVaule}}</view>
							</view>
							<view class="flex align-end">
								<button class="cu-btn round lines-purple sm" style="width: 110upx;">打榜</button>
							</view>
						</view>
						<view class="margin-top-xs"><u-line color="#cacaca"></u-line> </view>
					</view>
				</view>
			</block>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list: [{
					name: '全部'
				}, {
					name: '男歌手榜'
				}, {
					name: '女歌手榜'
				}, {
					name: '组合榜'
				}],
				searValue: '不存在的关系 - XMASwu',
				songList: [
					{coverImg: '/static/songRank/fm1.png', name: '巴赫旧约', singer: '沈以诚', hotVaule: '3.5w'},
					{coverImg: '/static/songRank/fm2.png', name: '1987我不知会遇见你', singer: '孟慧圆/邓见超', hotVaule: '3.5w'},
					{coverImg: '/static/songRank/fm3.png', name: '孤影', singer: 'C-BLOCK', hotVaule: '3.5w'},
					{coverImg: '/static/musicCover.png', name: '海底（live）', singer: '凤凰传奇', hotVaule: '3.5w'},
					{coverImg: '/static/songRank/fm4.png', name: '一次就好', singer: '理迎趣', hotVaule: '3.5w'},
					{coverImg: '/static/songRank/fm1.png', name: '巴赫旧约', singer: '沈以诚', hotVaule: '3.5w'},
					{coverImg: '/static/songRank/fm2.png', name: '1987我不知会遇见你', singer: '孟慧圆/邓见超', hotVaule: '3.5w'},
					{coverImg: '/static/songRank/fm3.png', name: '孤影', singer: 'C-BLOCK', hotVaule: '3.5w'},
					{coverImg: '/static/musicCover.png', name: '海底（live）', singer: '凤凰传奇', hotVaule: '3.5w'},
					{coverImg: '/static/songRank/fm4.png', name: '一次就好', singer: '理迎趣', hotVaule: '3.5w'}
				]
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		margin-top: -40upx;
		width: 80%;
		border-radius: 50upx;
		line-height: 60upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9D9D9D;
		font-size: 20upx;
		box-shadow: 10upx 20upx 60upx #d8d8d8;
	}
	.title {
		font-size: 56upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}
	.first {
		background-color: #fbf8e5;
		border-radius: 20upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
	}
	.second {
		background-color: #f0f5f9;
		border-radius: 20upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
		margin: 0 30upx;
	}
	.third {
		background-color: #fef0ef;
		border-radius: 20upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
		margin: 20upx 40upx;
	}
	.container {
		.left {
			padding-left: 20upx;
			.name {
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
			}
			.hot-value {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3F372A;
			}
		}
		.right {
			text-align: center;
			padding-right: 10upx;
			.rank {
				height: 70%;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 800;
				font-style: italic;
			}
		}
	}
	.music {
		.name {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}
		.author {
			font-size: 14upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9A9A9A;
		}
		.hot-vaule {
			margin-top: 10upx;
			font-size: 14upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #3F372A;
		}
	}
	.lines-purple::after {
		border-color: #5a3ee8;
	}
	.lines-purple {
		color: #5a3ee8;
	}
</style>