|
|
@@ -0,0 +1,287 @@
|
|
|
+<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>
|