lookcommon_course/components/toolA.vue

<template>
	<view class="column" style="position: relative">
		<view class="top-content">
			<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="top-title">首页</view>
		</view>
	
		<view class="index-body" :style="{ marginTop: statusBarHeight+64 + 'px' }">
			<swiper
				:autoplay="swiper.autoplay"
				:circular="true"
				class="swipr-box"
				:duration="swiper.duration"
				:easingFunction="swiper.easing"
				:indicatorActiveColor="swiper.activeColor"
				:indicatorColor="swiper.color"
				:indicatorDots="swiper.indicatorDots"
				:interval="swiper.interval"
				:nextMargin="swiper.lrmargin"
				:previousMargin="swiper.lrmargin">
				<swiper-item class="seiper-smbox" v-for="(item, index) in imgUrls" :key="index">
					<navigator hoverClass="none" openType="navigate" :url="item.openpath">
						<image class="slide-image" :src="item.img"></image>
					</navigator>
				</swiper-item>
			</swiper>
			<view class="newlist">
				<view v-for="(item, idx) in grid9.slice(0, 1)" :key="idx" 
						@tap="handleNav(item.openpath)" class="first-list">
					<view class="ml40 pt40">
						<view class="justify-start align-center">
							<image class="w90 h90" :src="item.img" mode="aspectFill"></image>
							<view class="colorf ml12">{{ item.text }}</view>
						</view>
						<view class="colorf mt12">{{item.desc}}</view>
					</view>
					<view class="box-shi">点击使用</view>
				</view>
				<view class="mt40 column justify-between">
					<view v-for="(item, idx) in grid9.slice(1, 3)" :key="idx" 
						@tap="handleNav(item.openpath)" class="second-list justify-start align-center ml20 bgf p12 radius20 ">
						<view class="">
							<image class="w90 h90" :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="colorf ml20">
							<view class="base-color-3">{{ item.text }}</view>
							<view class="base-color-6">{{ item.desc }}</view>
						</view>
					</view>
				</view>
			</view>
			<view >
				<view class=" justify-between wrap " style="width: calc(100% - 40rpx);padding: 0 10rpx;" >
					<view v-for="(item, idx) in grid9.slice(3, 7)" :key="idx"  style="width: calc(50% - 40rpx);height: 180rpx;"
						@tap="handleNav(item.openpath)" class=" justify-start align-center mt20 bgf ml20 pl20 radius20 ">
						<view class="">
							<image class="w90 h90" :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="colorf ml20">
							<view class="base-color-3">{{ item.text }}</view>
							<view class="base-color-6">{{ item.desc }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="h90"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'tools',
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			swiper: {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 1000,
				lrmargin: '40rpx',
				easing: 'easeInOutCubic',
				activeColor: '#fff',
				color: 'rgba(255, 255, 255, .3)'
			},
			imgUrls: [
				{
					img: 'https://zkzh-2025.oss-cn-beijing.aliyuncs.com/fs/20250901/55d56de7b34d4450bb39464a16fc591c.jpg',
					openpath: ''
				}
			],
			recommend: [
				{
					img: '/static/images/toolIcon/weather.png',
					openpath: '../../pages/weather/weather',
					text: '天气'
				},
				{
					img: '/static/images/toolIcon/qrcode.png',
					openpath: '../../pages/qrcode/index',
					text: '生成二维码'
				},
				{
					img: '/static/images/toolIcon/hl.png',
					openpath: '../../pages/cand/index',
					text: '程序员黄历'
				}
			],
			server: [
				{
					img: '/static/images/toolIcon/sdm.png',
					openpath: '/pages_tool/pages/christmasHat/index/index',
					text: '圣诞帽',
					desc:'合成节日氛围图片'
				},
				{
					img: '/static/images/toolIcon/weather.png',
					openpath: '/pages_tool/pages/wxyj/index',
					text: '五险一金计算',
					desc:'计算薪资个税'
				},
				{
					img: '/static/images/toolIcon/gz.png',
					openpath: '/pages_tool/pages/game/game',
					text: '摇骰子',
					desc:'娱乐工具，模拟六面骰子'
				},
				{
					img: '/static/images/toolIcon/cha.png',
					openpath: '/pages_tool/pages/pinyin/index',
					text: '查拼音',
					desc:"查询生僻汉字的拼音"
				},
				{
					img: '/static/images/toolIcon/clac.png',
					openpath: '/pages_tool/pages/calc/index',
					text: '计算器',
					desc:'日常使用计算器'
				},
				{
					img: '/static/images/toolIcon/wsyt.png',
					openpath: '/pages_tool/pages/gojuuonn/gojuuonn',
					text: '五十音图'
				},
				{
					img: '/static/images/toolIcon/sc.png',
					openpath: '/pages_tool/pages/figure/figure',
					text: '身材计算',
					desc:'身体质量指数'
				},
				
				{
					img: '/static/images/toolIcon/qrcode.png',
					openpath: '/pages_tool/pages/qrcode/index',
					text: '生成二维码',
					desc:'生成网页地址二维码'
				},
				{
					img: '/static/images/toolIcon/historyToday.png',
					openpath: '/pages_tool/pages/historyToday/historyToday',
					text: '历史今天',
					desc:'历史使用工具'
				}
			]
		};
	},
computed: {
    grid9() {
        return Array.isArray(this.server) ? this.server.slice(0, 9) : [];
    }
},
	methods: {
		handleNav(url) {
			if (!url) return;
			const finalUrl = url.startsWith('/') ? url : `/${url.replace(/^\/+/, '')}`;
			try {
				uni.navigateTo({ url: finalUrl });
			} catch (e) {
				console.error('navigateTo failed:', e, finalUrl);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.newlist{
		width: calc(100% - 40rpx);
		display: flex;
		padding: 20rpx;
		.first-list{
			width: 50%;
			height: 420rpx;
			background: linear-gradient(180deg,#2E7DF6 ,#80B0F8);
			border-radius: 20rpx;
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.box-shi{
				border: 2rpx solid #fff;
				color: #fff;
				border-radius: 20rpx;
				padding: 20rpx 40rpx;
				margin: 40rpx 40rpx;
				text-align: center;
			}
		}
		.second-list{
			height: 168rpx;
		}
	}
	
.top-content {
	width: 100%;
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #ffffff;
	.top-title {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 42rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #222222;
		padding-left: 41rpx;
		background-color: #ffffff;
	}
}

.swipr-box {
	width: 100%;
	height: 280rpx;
	padding: 20rpx 0rpx;
	background-color: #fff;
	box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
}

.seiper-smbox {
	padding: 0rpx 0rpx;
	box-sizing: border-box;
	width: 100%;
}

.slide-image {
	display: inline-block;
	width: 100%;
	height: 280rpx;
	border-radius: 10rpx;
}

.recommend-box {
	margin: 20rpx 0rpx;
	padding: 0rpx 30rpx;
}

.recommend-box,
.recommend-smbox {
	width: 100%;
	box-sizing: border-box;
}

.recommend-smbox {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx 0rpx;
	display: flex;
	justify-content: space-around;
	box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
}
</style>
<style lang="scss" scoped>
.empty-box {
    width: 100%;
    padding: 60rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.empty-text {
    color: #9ca3af;
    font-size: 28rpx;
}
</style>