novelAD/pages/toolsMall/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 p-rel" 
				:style="{ background:`linear-gradient(to bottom, ${items.bg}, #fff)`, }"
				v-for="(items,indexs) in item.list">
					<view class="icon">
						<!-- <image class="w-100 h-100 p-abs left-20 radio-10"
						style="top: -14rpx;" src="../../static/logo.png"></image> -->
						 <i :class="`fas ${items.icon} p-abs left-20 radio-10`" 
						 :style="`font-size: 46px;color:${ items.color };top:-7px;`"></i>
					</view>
					<view class="shadow p-abs bottom-90 left-10 w-60"
						:style="`box-shadow: 15px 15px 15px 2px ${items.color}90;height: 2px;border-radius: 30rpx;`"
					>
					</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:'fa-battery',bg:'#cfffcd',color:'#60b956',path:'yiJianShengDian'},
				{name:'声波除尘',icon:'fa-volume-control-phone',bg:'#ffd8db',color:'#fb5e53',path:'shengBoChuChen'},
				{name:'网络信息',icon:'fa-rss-square',bg:'#ccccfe',color:'#8370ee',path:'wangLuoXinXi'},
				{name:'手机测距',icon:'fa-hard-of-hearing',bg:'#80fafb',color:'#02cfdf',path:'shouJiCeJu'},
				{name:'WiFi管理',icon:'fa-wifi',bg:'#9ed1fe',color:'#3d9aee',path:'wifiGuanLi'},
				{name:'手机清理',icon:'fa-rocket',bg:'#fad2ec',color:'#ff4bb9',path:'shouJiQingLi'},
				{name:'精选壁纸',icon:'fa-image',bg:'#fec2f8',color:'#c95884',path:'jingXuanBiZhi'},
			],
		},
		{
			title:'趣味测评',
			list:[
				{name:'趣味测评',icon:'fa-search',bg:'#e8ffc4',color:'#98ec05',path:'quWeiCePing'},
			],
		},
		{
			title:'知识课堂',
			list:[
				{name:'养生课堂',icon:'fa-wheelchair',bg:'#fdd1c0',color:'#fc7f43',path:'yangShengKeTang'},
				{name:'运动计步',icon:'fa-wheelchair-alt',bg:'#9ce4fd',color:'#3d9afb',path:'yunDongJiBu'},
				{name:'字体大小',icon:'fa-text-width',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>