yunzerwebsiteallinone/uniapp/pages/features/features.vue

<template>

	<view class="page">

		<view class="page-header">

			<text class="page-title">功能中心</text>

			<text class="page-desc">探索更多精彩功能</text>

		</view>



		<view class="main-scroll">

			<view class="feature-banner" @tap="onBannerTap">

				<view class="banner-content">

					<text class="banner-title">新功能上线</text>

					<text class="banner-desc">AI 智能助手，效率翻倍</text>

				</view>

				<view class="banner-btn">立即体验</view>

			</view>



			<view class="category" v-for="cat in categories" :key="cat.title">

				<text class="category-title">{{ cat.title }}</text>

				<view class="feature-grid">

					<view

						class="feature-card"

						v-for="item in cat.items"

						:key="item.name"

						@tap="onFeatureTap(item)"

					>

						<view class="feature-icon">

							<FaIcon :name="item.icon" color="#3c9cff" :size="22" />

						</view>

						<text class="feature-name">{{ item.name }}</text>

						<text class="feature-desc">{{ item.desc }}</text>

					</view>

				</view>

			</view>



			<view class="bottom-space" />

		</view>



		<AppTabbar current="features" />

	</view>

</template>



<script setup>

import { ref, onMounted } from 'vue'

import { isLoggedIn } from '@/utils/auth.js'

import AppTabbar from '@/components/AppTabbar.vue'



const categories = ref([

	{

		title: '常用工具',

		items: [

			{ name: '扫一扫', desc: '快速识别', icon: 'qrcode' },

			{ name: '收付款', desc: '便捷支付', icon: 'coins' },

			{ name: '卡包', desc: '优惠券', icon: 'ticket' },

			{ name: '出行', desc: '交通服务', icon: 'car' }

		]

	},

	{

		title: '生活服务',

		items: [

			{ name: '外卖', desc: '美食到家', icon: 'bag-shopping' },

			{ name: '电影', desc: '在线购票', icon: 'film' },

			{ name: '酒店', desc: '预订住宿', icon: 'hotel' },

			{ name: '更多', desc: '发现更多', icon: 'ellipsis' }

		]

	},

	{

		title: '办公效率',

		items: [

			{ name: '文档', desc: '在线协作', icon: 'file-lines' },

			{ name: '日历', desc: '日程管理', icon: 'calendar-days' },

			{ name: '云盘', desc: '文件存储', icon: 'folder' },

			{ name: '会议', desc: '视频会议', icon: 'video' }

		]

	}

])



onMounted(() => {

	if (!isLoggedIn()) {

		uni.reLaunch({ url: '/pages/login/login' })

	}

})



function onBannerTap() {

	uni.showToast({ title: 'AI 智能助手', icon: 'none' })

}



function onFeatureTap(item) {

	uni.showToast({ title: item.name, icon: 'none' })

}

</script>



<style lang="scss" scoped>

.page {

	height: 100vh;

	background: #ffffff;

	display: flex;

	flex-direction: column;

	overflow: hidden;

}



.page-header {

	flex-shrink: 0;

	padding: calc(var(--status-bar-height, 44px) + 24rpx) 40rpx 24rpx;

}



.page-title {

	display: block;

	font-size: 40rpx;

	font-weight: 600;

	color: $u-primary;

}



.page-desc {

	display: block;

	font-size: 26rpx;

	color: $u-primary-disabled;

	margin-top: 6rpx;

}



.main-scroll {

	flex: 1;

	min-height: 0;

	overflow-y: auto;

	-webkit-overflow-scrolling: touch;

	padding: 0 40rpx;

}



.feature-banner {

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	border-radius: 16rpx;

	padding: 32rpx 28rpx;

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 48rpx;



	&:active {

		border-color: $u-primary-disabled;

	}

}



.banner-title {

	display: block;

	font-size: 30rpx;

	font-weight: 600;

	color: $u-primary;

}



.banner-desc {

	display: block;

	font-size: 24rpx;

	color: $u-primary-disabled;

	margin-top: 8rpx;

}



.banner-btn {

	padding: 14rpx 28rpx;

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	border-radius: 16rpx;

	font-size: 24rpx;

	color: $u-primary;

	font-weight: 500;

}



.category {

	margin-bottom: 48rpx;

}



.category-title {

	display: block;

	font-size: 30rpx;

	font-weight: 600;

	color: $u-primary;

	margin-bottom: 24rpx;

}



.feature-grid {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 20rpx;

}



.feature-card {

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	border-radius: 16rpx;

	padding: 28rpx;



	&:active {

		border-color: $u-primary-disabled;

	}

}



.feature-icon {

	width: 80rpx;

	height: 80rpx;

	border-radius: 20rpx;

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	display: flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 16rpx;

}



.feature-name {

	display: block;

	font-size: 28rpx;

	font-weight: 600;

	color: $u-primary;

}



.feature-desc {

	display: block;

	font-size: 22rpx;

	color: $u-primary-disabled;

	margin-top: 4rpx;

}



.bottom-space {

	height: 40rpx;

}

</style>