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

<template>
	<view>
		<view class="bg-img flex align-center" style="background-image: url('/static/userBgImg.png');height: 450upx;"></view>
		<view class="container" style="margin: -60upx 20upx 20upx 20upx;">
			<view class="text-center">
				<view class="cu-avatar avatar round" :style="[{backgroundImage:'url('+ avatar +')'}]"></view>
				<view class="padding-tb-xs" style="font-size: 38upx;font-family: PingFang SC;font-weight: 800;color: #222222;">易烊千玺</view>
				<view class="flex justify-center align-center">
					<view class="padding-right-sm" style="font-size: 30upx;font-family: PingFang SC;font-weight: 800;color: #222222;">184056</view>
					<view class="tag">
						<image src="/static/crown.png" style="width: 22upx;height: 19upx;margin-right: 10upx;"></image>
						<view class="text-sm text-white">热力榜第1</view>
					</view>
				</view>
			</view>
			<view style="padding: 0 60upx;">
				<view>歌手简介：易烊千玺，2000年11月28日生于湖南省怀化市，中国内地男演员、歌手、舞者，演唱组合TFBOYS成员，就读于中央戏剧学院。</view>
			</view>
			<view class="flex justify-around padding">
				<button class="theme-bg-color text-white round cu-btn" style="width: 200upx;height: 70upx;">转发好友</button>
				<button class="theme-bg-color text-white round cu-btn" style="width: 200upx;height: 70upx;">生成海报</button>
			</view>
		</view>
		<view class="container margin-sm">
			<block v-for="(item, index) in boostList" :key="index">
				<view class="flex align-center justify-between padding-lr-sm">
					<view class="flex align-center" style="width: 40%;">
						<view class="padding-sm">
							<u-avatar :src="item.image" size="82"></u-avatar>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="text-sm" style="color: #757575;">{{item.type}}</view>
					<view class="name padding-right flex justify-end" style="width: 180upx;">{{item.hotValue}}热力值</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '/static/avatar.png',
				boostList: [
					{image: '/static/avatar.png', name: '易烊千玺', time: '2021-6-7 10:28:46', type: '打榜', hotValue: '12'},
					{image: '/static/avatar2.png', name: '许嵩', time: '2021-6-7 10:28:46', type: '礼物', hotValue: '13'},
					{image: '/static/avatar.png', name: '林俊杰', time: '2021-6-7 10:28:46', type: '打榜', hotValue: '188'},
					{image: '/static/avatar2.png', name: '沈以诚', time: '2021-6-7 10:28:46', type: '打榜', hotValue: '88'},
					{image: '/static/avatar.png', name: '颜人中', time: '2021-6-7 10:28:46', type: '礼物', hotValue: '13'},
					{image: '/static/avatar.png', name: '毛不易', time: '2021-6-7 10:28:46', type: '转发', hotValue: '1'},
					{image: '/static/avatar2.png', name: '陈奕迅', time: '2021-6-7 10:28:46', type: '打榜', hotValue: '5'}
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		border-radius: 30upx;
		box-shadow: 10upx 10upx 60upx #d0d0d0;
	}
	.avatar {
		width: 145upx;
		height: 145upx;
		margin-top: -60upx;
	}
	.tag {
		padding: 0 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, #7355F4 0%, #573BE5 100%);
		margin-top: 8upx;
		border-radius: 30upx;
	}
	.name {
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}
</style>