lookcommon_course/components/tools.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="server-box">
				<view id="tips" class="tips">圣诞帽/五险一金查询最新发布欢迎使用</view>
				<view class="server-smbox">
					<view class="server-name">
						<view class="server-text fc3d fs30">实用工具</view>
					</view>
					<view class="tools-grid">
						<view
							v-for="(item, idx) in grid9"
							class="tool-card"
							@tap="handleNav(item.openpath)">
							<view class="card-bg"></view>
							<view class="card-content" :class="{ 'card-content1': idx === 1 }">
								<view class="icon-wrap">
									<image class="icon" :src="item.img" mode="aspectFill"></image>
								</view>
								<view class="label">{{ item.text }}</view>
							</view>
						</view>
						<view v-if="!grid9 || grid9.length === 0" class="empty-box">
							<view class="empty-text">暂无工具</view>
						</view>
					</view>
					<view class="clear"></view>
				</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/IP.png',
				// 	openpath: '../../pages/IP/IP',
				// 	text: 'IP地址查询'
				// },
				{
					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: '圣诞帽'
				},
				// {
				// 	img: '/static/images/toolIcon/qrcode.png',
				// 	openpath: '../../pages_tool/pages/cloudNote/index/index',
				// 	text: '云笔记'
				// },
				{
					img: '/static/images/toolIcon/weather.png',
					openpath: '/pages_tool/pages/wxyj/index',
					text: '五险一金计算'
				},
				{
					img: '/static/images/toolIcon/gz.png',
					openpath: '/pages_tool/pages/game/game',
					text: '摇骰子'
				},
				{
					img: '/static/images/toolIcon/cha.png',
					openpath: '/pages_tool/pages/pinyin/index',
					text: '查拼音'
				},
				// {
				// 	img: '/static/images/toolIcon/clac.png',
				// 	openpath: '/pages_tool/pages/calc/index',
				// 	text: '计算器'
				// },
				// {
				// 	img: '/static/images/toolIcon/hl.png',
				// 	openpath: '../../pages_tool/pages/cand/index',
				// 	text: '程序员黄历'
				// },
				
				{
					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: '身材计算'
				},
				
				{
					img: '/static/images/toolIcon/qrcode.png',
					openpath: '/pages_tool/pages/qrcode/index',
					text: '生成二维码'
				},
				
				
				// {
				// 	img: '/static/images/toolIcon/weather.png',
				// 	openpath: '../../pages_tool/pages/weather/weather',
				// 	text: '天气'
				// },
				// {
				// 	img: '/static/images/toolIcon/IP.png',
				// 	openpath: '../../pages_tool/pages/IP/IP',
				// 	text: 'IP地址查询'
				// },
				{
					img: '/static/images/toolIcon/MobileHome.png',
					openpath: '/pages_tool/pages/MobileHome/MobileHome',
					text: '手机归属地'
				},
				// {
				// 	img: '/static/images/toolIcon/codePars.png',
				// 	openpath: '/pages_tool/pages/codePars/codePars',
				// 	text: '电码查询'
				// },
				{
					img: '/static/images/toolIcon/historyToday.png',
					openpath: '/pages_tool/pages/historyToday/historyToday',
					text: '历史今天'
				}
			]
		};
	},
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>
.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);
}

.col-1 {
	width: 25%;
}

.ad-index {
	width: 100%;
	box-sizing: border-box;
	padding: 0rpx 30rpx;
}

.ad-df {
	border-radius: 10rpx;
	overflow: hidden;
	box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
}

.server-box {
	width: 100%;
	padding: 0rpx 30rpx;
	box-sizing: border-box;
	margin: 20rpx 0rpx;
	margin-top: 17vh;
}

.tips{
	background-color: #ff5500;
	color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 10rpx;
	padding-left: 20rpx;
}



.server-smbox {
	width: 100%;
	background-color: transparent;
	border-radius: 10rpx;
	padding-bottom: 15rpx;
	box-shadow: inset 0 0 0 1rpx rgba(255,255,255,0.06), 0 16rpx 40rpx rgba(0, 0, 0, 0.18);
	margin-top: 20rpx;
}

.server-t {
	text-align: center;
}

.server-name {
	padding: 15rpx 20rpx;
}

.server-text {
	border-bottom: 1rpx solid #f6f6f6;
	font-weight: 700;
	height: 40rpx;
	line-height: 40rpx;
	padding-bottom: 15rpx;
	margin-top: 60rpx;
	font-size: 42rpx;
	margin-left: 40rpx;
}

.list-server,
.listbox {
	box-sizing: border-box;
}

.listbox {
	width: 25%;
	text-align: center;
	float: left;
	padding: 15rpx 0rpx;
}

.listimg {
	width: 100rpx;
	height: 100rpx;
}

.inm {
	margin-bottom: 60rpx;
}

.bottomLine {
	padding: 50rpx 0rpx;
	font-size: 24rpx;
	text-align: center;
	color: #8b8b8b;
}

/* 科技感九宫格布局与卡片样式 */
.tools-grid {
    /* 九宫格：3列，顶部/底部保留 10% 视口高度 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    height: 60vh;
    margin-top: 0vh;
    
    padding: 0 24rpx;
    box-sizing: border-box;
}

.tool-card {
    position: relative;
    margin: 0;
    border-radius: 20rpx;
    overflow: hidden;
    //background: linear-gradient(135deg, #0b1220 0%, #0e1b2e 100%);
    //box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.28), inset 0 0 0 1rpx rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.span-1 { flex: 0 0 33.33%; }
.span-2 { flex: 0 0 66.66%; }

.card-bg {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.04) 0rpx,
			rgba(255, 255, 255, 0.04) 1rpx,
			transparent 1rpx,
			transparent 20rpx
		),
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.04) 0rpx,
			rgba(255, 255, 255, 0.04) 1rpx,
			transparent 1rpx,
			transparent 20rpx
		);
	opacity: 0.75;
}

.card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24rpx;
}


.card-content1 {
    padding: 0rpx;
}

/* 高亮第二项的内容块（可按需修改效果） */
.content1 {
    filter: brightness(1.08);
}


.icon-wrap {
	width: 96rpx;
	height: 96rpx;
	border-radius: 18rpx;
	background: linear-gradient(180deg, rgba(59,130,246,0.18), rgba(59,130,246,0.06));
	border: 1rpx solid rgba(59,130,246,0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 28rpx rgba(59,130,246,0.35);
}

.icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 14rpx;
}

.label {
    margin-left: 0;
    margin-top: 16rpx;
    font-size: 30rpx;
    letter-spacing: 1rpx;
    color: #333;
    text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.35);
    text-align: center;
}

.tool-card:active .card-bg {
    filter: brightness(1.08);
    transform: scale(1.01);
    transition: all 120ms linear;
}
</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>