novelAD/pages/tools/jingXuanBiZhi.vue

<template>
	<view class="content">
		<view  :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="flex scroll-x ai_end mgt-20" style="gap: 50rpx;">
				<view class="text-28 text-999 cursor" :class="active == tab.id?'active':''"
				 v-for="(tab,index) in category" @click="chooseTab(tab)">
					{{ tab.name }}
				</view>
			</view>
			<view class="flex mgt-40">
				<image  class="w-220 h-120 radio-20 mgr-20"
				 @click="navTo('/pages/tools/liuXingBiZhi')"
				 src="/static/image/source/pop_bz.jpg"></image>
				<image  class="w-220 h-120 radio-20 mgr-20"
				 @click="navTo('/pages/tools/zuiXinBiZhi')"
				 src="/static/image/source/new_bz.jpg"></image>
			</view>
			<view class="imgs mgt-40 flex fw_wrap" style="gap: 14rpx;">
				<image class="w-220 h-280 radio-16" mode="aspectFill"
				v-for="img in category[active-1].list" :src="img">
				</image>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
var statusBarHeight = uni.getStorageSync('statusBarHeight')
const category = ref([
	{ name:'风景',list:[
		'https://img2.baidu.com/it/u=643390968,3821598343&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
		'https://img2.baidu.com/it/u=1207164141,4244022854&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
		'https://img2.baidu.com/it/u=2122730436,3330551883&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
		'https://img2.baidu.com/it/u=1934414271,796431517&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
		'https://img2.baidu.com/it/u=2843793126,682473204&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
		'https://img1.baidu.com/it/u=1292485292,902063151&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083',
		'https://img0.baidu.com/it/u=15396030,1143539239&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
		'https://img2.baidu.com/it/u=1320672626,288218548&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
		'https://img0.baidu.com/it/u=1652113119,3226642753&fm=253&app=138&f=JPEG?w=1423&h=800',
		'https://img0.baidu.com/it/u=3087392912,2682394042&fm=253&app=138&f=JPEG?w=1423&h=800',
		'https://img1.baidu.com/it/u=3631027001,3666368042&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
		'https://img1.baidu.com/it/u=3637490291,2814538424&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
		'https://img2.baidu.com/it/u=2114786151,2275385596&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
	],id:1 },
	{ name:'设计',list:[],id:2 },
	{ name:'物语',list:[],id:3 },
	{ name:'城市',list:[],id:4 },
])
const active = ref(1)
const navTo = (url)=>{
	uni.navigateTo({
		url
	})
}
const chooseTab = (tab) =>{
	active.value = tab.id
}
onMounted(()=>{
	
})
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		padding: 28rpx;
		background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
	}
	.active{
		color: #000;
		font-weight: 500;
		font-size: 30rpx;
	}
</style>