MoeNovaClient/pages/my/creativeExpert.vue

<template>
	<view class="creative-expert-page">
		<!-- 等级进度 -->
		<view class="level-progress-section">
			<view class="current-level">
				<image class="level-icon" src="/static/creative/level1.png" />
				<text class="level-text">Lv.1</text>
			</view>
			<view class="exp-bar-wrap">
				<view class="exp-bar-bg">
					<view class="exp-bar" :style="{ width: '20%' }"></view>
				</view>
				<view class="exp-info">
					升级到下个等级还需
					<text class="exp-num">280</text>点经验
				</view>
			</view>
			<view class="level-labels">
				<text class="level-label">Lv.1</text>
				<text class="level-label next">Lv.2</text>
			</view>
			<view class="join-btn">会员加速中</view>
		</view>

		<!-- 创意达人值说明 -->
		<view class="section-title">创意达人值说明</view>
		<view class="desc-block">
			创意达人值是萌创星球给用户提供的一个创意设计等级认证说明，代表着用户运营型社团创作能力的直观体现。
			<view class="desc-tip">在达标属于摸索力和创造力的环节上，每一个闪光的方案都值得被看见，每一次大胆的尝试都值得被徽章收藏。</view>
			星球的星灵们会根据您的作品数量、作品点赞数、作品评论数、未展示及在作一作品的数量等多维度作为创意达人值的考核标准。
			创意达人值越高，创意达人等级也会越高，不同的创意达人等级会获得专属徽标和权益。每个等级都有自己的专属徽标和权益。
		</view>

		<!-- 等级表格 -->
		<view class="section-title">创意达人等级专属徽标&等级</view>
		<view class="level-table">
			<view class="table-header">
				<view class="th">对应展示</view>
				<view class="th">等级</view>
				<view class="th">活跃值</view>
			</view>
			<view class="table-row" v-for="row in levelRows" :key="row.level">
				<view class="td">
					<image :src="row.icon" class="level-table-icon" />
				</view>
				<view class="td">{{ row.level }}</view>
				<view class="td">{{ row.active }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				levelRows: [
					{ icon: '/static/creative/level1.png', level: 'Lv.1', active: '未解锁' },
					{ icon: '/static/creative/level2.png', level: 'Lv.2', active: '未解锁' },
					{ icon: '/static/creative/level3.png', level: 'Lv.3', active: '未解锁' },
					{ icon: '/static/creative/level4.png', level: 'Lv.4', active: '未解锁' },
					{ icon: '/static/creative/level5.png', level: 'Lv.5', active: '未解锁' },
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.creative-expert-page {
	background: #181a1f;
	min-height: 100vh;
	color: #fff;
	padding-bottom: 40rpx;
}
.level-progress-section {
	background: #23242a;
	border-radius: 0 0 32rpx 32rpx;
	padding: 48rpx 32rpx 32rpx 32rpx;
	text-align: center;
	position: relative;
}
.current-level {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
}
.level-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 12rpx;
}
.level-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffb86c;
}
.exp-bar-wrap {
	margin: 24rpx 0 8rpx 0;
}
.exp-bar-bg {
	width: 100%;
	height: 16rpx;
	background: #2d2e36;
	border-radius: 8rpx;
	overflow: hidden;
}
.exp-bar {
	height: 100%;
	background: linear-gradient(90deg, #ffb86c 0%, #ffe7b2 100%);
	border-radius: 8rpx;
}
.exp-info {
	font-size: 24rpx;
	color: #fff;
	margin-top: 8rpx;
}
.exp-num {
	color: #ffb86c;
	font-weight: bold;
}
.level-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 8rpx;
}
.level-label {
	font-size: 24rpx;
	color: #ffb86c;
}
.level-label.next {
	color: #fff;
}
.join-btn {
	margin: 24rpx auto 0 auto;
	width: 320rpx;
	height: 56rpx;
	background: linear-gradient(90deg, #ffb86c 0%, #ffe7b2 100%);
	color: #23242a;
	border-radius: 32rpx;
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}
.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #ffb86c;
	margin: 40rpx 0 16rpx 32rpx;
}
.desc-block {
	background: #23242a;
	border-radius: 24rpx;
	margin: 0 32rpx;
	padding: 32rpx 24rpx;
	font-size: 26rpx;
	color: #fff;
	line-height: 1.8;
}
.desc-tip {
	color: #ffe7b2;
	margin: 16rpx 0;
	font-size: 26rpx;
}
.level-table {
	background: #23242a;
	border-radius: 24rpx;
	margin: 0 32rpx;
	margin-top: 24rpx;
	padding: 24rpx 0;
}
.table-header, .table-row {
	display: flex;
	align-items: center;
	padding: 0 24rpx;
}
.table-header {
	font-size: 26rpx;
	color: #ffe7b2;
	font-weight: bold;
	border-bottom: 2rpx solid #2d2e36;
	height: 60rpx;
}
.th, .td {
	flex: 1;
	text-align: center;
}
.level-table-icon {
	width: 56rpx;
	height: 56rpx;
	vertical-align: middle;
}
.table-row {
	font-size: 26rpx;
	color: #fff;
	height: 72rpx;
	border-bottom: 1rpx solid #23242a;
}
</style>