tuanwei-uniapp/pages/gxmu/tzb-database.vue

<template>
	<view class="page">
		<scroll-view scroll-y class="page-scroll">
			<common-hero title="创新竞赛历史项目数据库" :use-image-bg="true"></common-hero>
			<view class="hero-card">
				<view class="hero-title">项目库与人才库</view>
				<view class="hero-desc">
					沉淀挑战杯历史项目案例、获奖信息与参赛人才画像，支持按项目和人才两个维度快速检索与复用。
				</view>
<!--				<view class="hero-actions">-->
<!--					<view class="hero-action" @tap="openPage('/pages/gxmu/tzb-project-list')">进入项目库</view>-->
<!--					<view class="hero-action hero-action&#45;&#45;secondary" @tap="openPage('/pages/gxmu/tzb-talent-list')">进入人才库</view>-->
<!--				</view>-->
			</view>

			<view class="entry-list">
				<view class="entry-card" @tap="openPage('/pages/gxmu/tzb-project-list')">
					<view class="entry-top">
						<view class="entry-icon">项</view>
						<view class="entry-tag">项目库</view>
					</view>
					<view class="entry-title">挑战杯项目库</view>
					<view class="entry-desc">查看历届项目名称、学校、奖项、比赛级别、届次与详情链接。</view>
					<view class="entry-foot">适合做选题借鉴、对标分析与历史案例复盘</view>
				</view>

				<view class="entry-card" @tap="openPage('/pages/gxmu/tzb-talent-list')">
					<view class="entry-top">
						<view class="entry-icon entry-icon--green">才</view>
						<view class="entry-tag entry-tag--green">人才库</view>
					</view>
					<view class="entry-title">挑战杯人才库</view>
					<view class="entry-desc">查看参赛人才、学校、人才类型、参赛项目、获奖情况与原始详情链接。</view>
					<view class="entry-foot">适合做导师联络、队伍画像和成果人才线索挖掘</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import CommonHero from '../../components/common-hero/common-hero.vue'
	export default {
		components: {
			CommonHero
		},
		methods: {
			openPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background:
			radial-gradient(circle at top left, rgba(20, 150, 242, 0.14), transparent 30%),
			linear-gradient(180deg, #f5fbff 0%, #eef7ff 100%);
	}

	.page-scroll {
		height: 100vh;
		padding: 28rpx 24rpx 40rpx;
		box-sizing: border-box;
	}

	.hero-card {
		padding: 34rpx 36rpx;
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.5);
		box-shadow: 0 4rpx 12rpx 0 rgba(174, 174, 174, 0.4);
		backdrop-filter: blur(24rpx);
		-webkit-backdrop-filter: blur(24rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.5);
	}

	.hero-badge {
		display: inline-flex;
		padding: 10rpx 18rpx;
		border-radius: 999rpx;
		background: rgba(20,150,242,.1);
		font-size: 22rpx;
		color: #1496f2;
		letter-spacing: 1rpx;
	}

	.hero-title {
		margin-top: 8rpx;
		padding-left: 10rpx;
		font-size: 30rpx;
		line-height: 1.35;
		font-weight: 700;
		color: #18a0f7;
		border-left: 5px solid #0f94ef;
	}

	.hero-desc {
		margin-top: 20rpx;
		font-size: 24rpx;
		line-height: 1.8;
		color: #7f7f7f;
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-top: 24rpx;
	}

	.hero-action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 14rpx 24rpx;
		border-radius: 999rpx;
		background: rgba(20,150,242,.12);
		font-size: 24rpx;
		font-weight: 600;
		color: #1496f2;
	}

	.hero-action--secondary {
		background: rgba(31,35,41,.08);
		color: #5f6b76;
	}

	.entry-list {
		display: flex;
		flex-direction: column;
		gap: 18rpx;
		margin-top: 24rpx;
	}

	.entry-card {
		padding: 28rpx;
		border-radius: 30rpx;
		background:
			linear-gradient(180deg, rgba(240, 247, 255, 0.95) 0%, #ffffff 44%),
			#ffffff;
		border: 1rpx solid rgba(21, 84, 173, 0.08);
		box-shadow: 0 10rpx 28rpx rgba(76, 49, 35, 0.08);
	}

	.entry-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.entry-icon {
		width: 76rpx;
		height: 76rpx;
		border-radius: 24rpx;
		background: linear-gradient(135deg, #1496f2 0%, #4bb7ff 100%);
		color: #fff;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 76rpx;
		text-align: center;
	}

	.entry-icon--green {
		background: linear-gradient(135deg, #12b981 0%, #57d5a4 100%);
	}

	.entry-tag {
		padding: 10rpx 18rpx;
		border-radius: 999rpx;
		background: #edf5ff;
		color: #1554ad;
		font-size: 22rpx;
		font-weight: 600;
	}

	.entry-tag--green {
		background: #e9fbf5;
		color: #0f9f71;
	}

	.entry-title {
		margin-top: 22rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1f2329;
	}

	.entry-desc {
		margin-top: 14rpx;
		font-size: 24rpx;
		line-height: 1.7;
		color: #5f6b7a;
	}

	.entry-foot {
		margin-top: 18rpx;
		font-size: 22rpx;
		line-height: 1.6;
		color: #8b827d;
	}
</style>