novelAD/pages/index/index.vue

<template>
	<view class="content">
		<view class="p-rel">
			<image class="h-350 bg-999 mgb-20 w" mode="scaleToFill"
			src="/static/image/index_banner.jpg"></image>
			<view class="p-abs left-40 bottom-100 text-52 text-b text-2283ee">发现无限可能</view>
			<view class="p-abs left-40 bottom-60 text-20">尽在功能广场 享受更多可能性</view>
		</view>
		<view class="fnBox" v-for="(item,index) in funtions">
			<view class="title">
				{{ item.title }}
			</view>
			<view class="itemBox">
				<view class="item" 
				:style="{ background:`linear-gradient(to bottom, ${items.bg}, #fff)`, }"
				v-for="(items,indexs) in item.list">
					<view class="icon">
						
					</view>
					<view class="name"
					:style="{ color:`${items.color}`, }">
						{{ items.name }}
					</view>
					<view class="btn flex" @click="goPage(items.path)"
					:style="{ background:`${items.color}`, }"
					>
						立即使用<text style="transform: scale(0.6);">▶</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted } from "vue";
	const title = ref('Hello33')
	const funtions = reactive([
		{
			title:'基础功能',
			list:[
				{name:'一键省电',icon:'',bg:'#cfffcd',color:'#60b956',path:'yiJianShengDian'},
				{name:'声波除尘',icon:'',bg:'#ffd8db',color:'#fb5e53',path:'shengBoChuChen'},
				{name:'网络信息',icon:'',bg:'#ccccfe',color:'#8370ee',path:'wangLuoXinXi'},
				{name:'手机测距',icon:'',bg:'#80fafb',color:'#02cfdf',path:'shouJiCeJu'},
				{name:'WiFi管理',icon:'',bg:'#9ed1fe',color:'#3d9aee',path:'wifiGuanLi'},
				{name:'手机清理',icon:'',bg:'#fad2ec',color:'#ff4bb9',path:'shouJiQingLi'},
				{name:'精选壁纸',icon:'',bg:'#fec2f8',color:'#c95884',path:'jingXuanBiZhi'},
			],
		},
		{
			title:'趣味测评',
			list:[
				{name:'趣味测评',icon:'',bg:'#e8ffc4',color:'#98ec05',path:'quWeiCePing'},
			],
		},
		{
			title:'知识课堂',
			list:[
				{name:'养生课堂',icon:'',bg:'#fdd1c0',color:'#fc7f43',path:'yangShengKeTang'},
				{name:'运动计步',icon:'',bg:'#9ce4fd',color:'#3d9afb',path:'yunDongJiBu'},
				{name:'字体大小',icon:'',bg:'#edcbfd',color:'#d617d1',path:'ziTiDaXiao'},
			],
		}
	])
	const goPage = ((url)=>{
		uni.navigateTo({
			url:'/pages/tools/' + url
		})
	})
</script>

<style lang="scss" scoped>
	.fnBox{
		padding: 20rpx;
		.title{
			font-size: 32rpx;
			margin: 0rpx 0 30rpx 0;
			font-weight: 500;
		}
		.itemBox{
			display: flex;
			white-space: pre-wrap;
			flex-wrap: wrap;
			gap: 20rpx 40rpx;
			.item{
				width: 330rpx;
				height: 200rpx;
				border: 1rpx solid #eee;
				border-radius: 20rpx;
				position: relative;
				.icon{
					
				}
				.name{
					position: absolute;
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 2rpx;
					right: 50rpx;
					top: 40rpx;
				}
				.btn{
					position: absolute;
					background-color: skyblue;
					cursor: pointer;
					padding: 8rpx 10rpx;
					border-radius: 30rpx;
					color: #fff;
					font-size: 24rpx;
					right: 40rpx;
					bottom: 30rpx;
				}
			}
		}
	}
</style>