lookcommon_course/components/tools1.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="featured-section" :style="{ marginTop: statusBarHeight+64 + 'px' }">
					<view class="section-title">
						<span>常用工具</span>
						<!-- <span class="see-all">查看全部 <i class="material-icons">></i></span> -->
					</view>
					
					<view class="featured-tools">
						<view class="featured-tool animate-fade" @click="goToNav('../../pages_tool/pages/qrcode/index')">
							<view class="featured-icon">
								<image style="width: 35px;height:35px" src="/static/images/toolIcon/qrcode.png"></image>
							</view>
							<view class="featured-info">
								<view class="featured-name">生成二维码</view>
								<view class="featured-desc">快速生成各种二维码，支持文本、网址等多种格式</view>
								<!-- <view class="usage-count">
									<i class="material-icons" style="font-size: 16px; margin-right: 5px;">trending_up</i>
									12.8万使用
								</view> -->
							</view>
						</view>
						<!-- 
						<view class="featured-tool animate-fade delay-1" @click="goToNav('../../pages_tool/pages/figure/figure')">
							<view class="featured-icon">
								<image style="width: 35px;height:35px" class="img" src="/static/images/toolIcon/sc.png"></image>
							</view>
							<view class="featured-info">
								<view class="featured-name">身材计算</view>
								<view class="featured-desc">快速计算BMI指数，了解身体健康状况</view>
								<view class="usage-count">
									<i class="material-icons" style="font-size: 16px; margin-right: 5px;">trending_up</i>
									9.5万使用
								</view>
							</view>
						</view> -->
					</view>
				</view>
				
				<!-- 工具网格 -->
				<view class="section-title">所有工具</view>
				<view class="tools-grid" >
					<!-- 循环生成工具卡片 -->
					<view class="tool-card animate-fade" v-for="(item, index) in server" :key="index"  @click="goToNav(item.openpath)">
						<view class="tool-icon">
							<image class="img" :src="item.img"></image>
						</view>
						<view class="tool-name">{{ item.text }}</view>
						<view class="tool-badge" v-if="index%4==0">Hot</view>
					</view>
				</view>
				
				<view style="height:60px"></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/sc.png',
				// 	openpath: '../../pages_tool/pages/figure/figure',
				// 	text: '身材计算'
				// },
				{
					img: '/static/images/toolIcon/wsyt.png',
					openpath: '../../pages_tool/pages/gojuuonn/gojuuonn',
					text: '五十音图'
				},
				// {
				// 	img: '/static/images/toolIcon/qrcode.png',
				// 	openpath: '../../pages_tool/pages/qrcode/index',
				// 	text: '生成二维码'
				// },
				// {
				// 	img: '/static/images/toolIcon/cha.png',
				// 	openpath: '../../pages_tool/pages/pinyin/index',
				// 	text: '查拼音'
				// },
				// {
				// 	img: '/static/images/toolIcon/hl.png',
				// 	openpath: '../../pages_tool/pages/cand/index',
				// 	text: '程序员黄历'
				// },
				{
					img: '/static/images/toolIcon/clac.png',
					openpath: '../../pages_tool/pages/calc/index',
					text: '计算器'
				},
				{
					img: '/static/images/toolIcon/gz.png',
					openpath: '../../pages_tool/pages/game/game',
					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: '历史今天'
				}
			]
		};
	},
	methods: {
		goToNav(url){
			uni.navigateTo({
				url:url
			});
		}
	}
};
</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;
}

</style>


<style lang="scss" scoped>
	 /* 工具网格布局 */
	 .tools-grid {
		 display: grid;
		 grid-template-columns: repeat(3, 1fr);
		 gap: 15px;
		 padding: 10px 0;
	 }
	 
	 .tool-card {
		 background: white;
		 border-radius: 16px;
		 padding: 20px 15px;
		 text-align: center;
		 box-shadow: 0 4px 12px rgba(0,0,0,0.05);
		 transition: all 0.3s ease;
		 cursor: pointer;
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		 position: relative;
	 }
	 
	 .tool-card:hover {
		 transform: translateY(-5px);
		 box-shadow: 0 8px 20px rgba(0,0,0,0.1);
	 }
	 
	 .tool-card:active {
		 transform: translateY(0);
	 }
	 
	 .tool-badge {
		 position: absolute;
		 top: -8px;
		 right: -8px;
		 background: #ff4757;
		 color: white;
		 border-radius: 50%;
		 width: 22px;
		 height: 22px;
		 font-size: 12px;
		 display: flex;
		 align-items: center;
		 justify-content: center;
	 }
	 
	 .tool-icon {
		 width: 50px;
		 height: 50px;
		 border-radius: 50%;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 background: #f8f9ff;
	 }
	 
	 .tool-icon .img {
		 width: 30px;
		 height: 30px;
	 }
	 
	 .tool-name {
		 font-size: 14px;
		 color: #333;
		 font-weight: 500;
		 margin-top: 5px;
	 }
	 
	 /* 推荐区域 */
	 .featured-section {
		 margin: 30px 0;
	 }
	 
	 .section-title {
		 font-size: 20px;
		 font-weight: 600;
		 margin-bottom: 20rpx;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 padding-left: 5px;
	 }
	 
	 .see-all {
		 font-size: 14px;
		 color: #6e8efb;
		 display: flex;
		 align-items: center;
	 }
	 
	 .featured-tools {
		 display: grid;
		 grid-template-columns: 1fr;
		 gap: 15px;
	 }
	 
	 .featured-tool {
		 background: white;
		 border-radius: 16px;
		 overflow: hidden;
		 box-shadow: 0 4px 12px rgba(0,0,0,0.05);
		 display: flex;
		 transition: all 0.3s ease;
	 }
	 
	 .featured-tool:hover {
		 transform: translateY(-3px);
		 box-shadow: 0 8px 20px rgba(0,0,0,0.1);
	 }
	 
	 .featured-icon {
		 width: 80px;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 background: #f8f9ff;
	 }
	 
	 .featured-icon .img {
		 width: 35px;
		 height: 35px;
	 }
	 
	 .featured-info {
		 padding: 20px;
		 flex: 1;
	 }
	 
	 .featured-name {
		 font-size: 18px;
		 font-weight: 500;
		 margin-bottom: 8px;
	 }
	 
	 .featured-desc {
		 font-size: 14px;
		 color: #666;
		 margin-bottom: 12px;
		 line-height: 1.4;
	 }
	 
	 .usage-count {
		 font-size: 13px;
		 color: #888;
		 display: flex;
		 align-items: center;
	 }
	 

	 .nav-icon {
		 font-size: 24px;
		 margin-bottom: 4px;
	 }
	 
	 /* 响应式调整 */
	// @media (max-width: 480px) {
		 .tools-grid {
			 grid-template-columns: repeat(2, 1fr);
		 }
		 
		 .tool-card {
			 padding: 15px 10px;
		 }
		 
		 .tool-icon {
			 width: 45px;
			 height: 45px;
		 }
		 
		 .tool-icon .img {
			 width: 35px;
			 height: 35px;
		 }
		 
		 .featured-icon {
			 width: 70px;
		 }
		 
		 .featured-info {
			 padding: 15px;
		 }
	 //}
	 
	 /* 动画效果 */
	 @keyframes fadeIn {
		 from { opacity: 0; transform: translateY(20px); }
		 to { opacity: 1; transform: translateY(0); }
	 }
	 
	 .animate-fade {
		 animation: fadeIn 0.5s ease forwards;
	 }
	 
	 .delay-1 { animation-delay: 0.1s; }
	 .delay-2 { animation-delay: 0.2s; }
	 .delay-3 { animation-delay: 0.3s; }
</style>