cyzh-SoundOfMusic-H5/pages/mine/myMusic.vue

<template>
	<view>
		<view class="bg-img flex align-center" style="background-image: url('/static/personBgImg.png');height: 450upx;"></view>
		<view class="head">
			<view class="cu-avatar avatar round" :style="[{backgroundImage:'url('+ avatar +')'}]"></view>
			<view style="margin: 0 30upx 30upx 70upx;">
				<view class="flex align-center">
					<view class="text-black text-bold text-xl padding-right">{{name}}</view>
					<image src="/static/icon-vip.png" style="width: 30upx;height: 34upx;"></image>
				</view>
				<view class="padding-tb">
					<view class="rank">
						<text class="text-bold padding-right-sm" style="font-style: italic;">NO.{{rank}}</text>
						<text class="text-sm">今日排名</text>
					</view>
				</view>
				<view class="flex align-center">
					<view>
						<text class="text-sm">共获热力</text>
						<text class="cuIcon-hotfill padding-lr-xs"></text>
						<text class="text-lg text-bold">22386</text>
					</view>
					<view style="height: 20upx;border: #dadada 1px solid; margin: 0 30upx;"></view>
					<view>
						<text class="text-sm">总值</text>
						<text class="padding-left-xs">￥</text>
						<text class="text-lg text-bold">1888</text>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top bg-white">
			<view class="padding-sm flex justify-between align-center">
				<view class="margin-left-sm text-lg text-black text-bold">我的作品</view>
				<button class="cu-btn theme-bg-color round text-white margin-right" @click="onTap">添加作品</button>
			</view>
		</view>
		<block v-for="(item, index) in 8" :key="index">
			<view class="flex bg-white" style="padding: 10upx 70upx 30upx 70upx;">
				<image src="/static/musicCover.png" style="width: 120upx;height: 120upx;margin-right: 20upx;"></image>
				<view style="width: 75%;">
					<view class="flex justify-between">
						<view class="music">
							<view class="name">海底（Live）</view>
							<view class="author">凤凰传奇 - 为他而歌</view>
						</view>
						<view>
							<view class="text-black">
								<text class="cuIcon-hotfill padding-right-xs"></text>
								<text class="text-lg text-bold">22386</text>
							</view>
							<view class="music-rank">NO.10</view>
						</view>
					</view>
					<view class="margin-top-sm"><u-line color="#cacaca"></u-line> </view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "Daniel Hua",
				avatar: '/static/avatar2.png',
				rank: 108,
			}
		},
		methods: {
			onTap() {
				uni.navigateTo({
					url: "/pages/activity/signUp",
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		background-color: #ffffff;
		margin-top: -26upx;
		height: 320upx;
		border-radius: 26upx 26upx 0 0;
	}
	.avatar {
		width: 130upx;
		height: 130upx;
		margin: -60upx 0 30upx 80upx;
	}
	.rank {
		display: flex;
		justify-content: center;
		background-color: #583be6;
		width: 40%;
		color: #ffffff;
		border-radius: 16upx;
		line-height: 60upx;
	}
	.music {
		.name {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			padding-bottom: 20upx;
		}
		.author {
			font-size: 14upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9A9A9A;
		}
	}
	.music-rank {
		display: flex;
		margin-top: 18upx;
		line-height: 40upx;
		justify-content: center;
		border: #9d9d9d 1px solid;
		color: #9d9d9d;
		border-radius: 50upx;
		font-style: italic;
	}
</style>