policeSecurity/collect_information/src/pages/police/index/index.vue

<template>
  <view>
    <view class="swiperDemo">
      <nut-swiper ref="swiperRef" pagination-visible pagination-color="#e53e31" :auto-play="3000" :init-page="0">
        <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 200px">
          <image :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
        </nut-swiper-item>
      </nut-swiper>
    </view>
    <view class="swiperDemoItem">
      <view class="swiperDemoIndex"></view>
      <view>请选择</view>
    </view>
    <!--九宫格-->
    <view>
      <view class="subModule">
        <view class="subModuleItem" v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.url)">
          <view class="subModuleIndex">
            <image :src="item.icon"></image>
          </view>
          <view style="font-size: 12px; color: #414141; margin-top: 9px">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import icon from '@/assets/images/project.png'
import './index.scss'
const list = ref([process.env.TARO_APP_MINIO_URL + '/police-security/2024/11/5/dunpai.jpg', process.env.TARO_APP_MINIO_URL + '/police-security/2024/11/5/xingqiu.jpg'])
const swiperRef = ref() //轮播图
const subModuleList = ref([
  {
    id: 0,
    icon: icon,
    name: '企事业单位',
    url: '/subPages/police/myEnterprisesUnit/myEnterprisesUnit',
  },
  {
    id: 1,
    icon: icon,
    name: '监督考核',
    url: '/subPages/police/dailyInspection/dailyInspection',
  },
  {
    id: 2,
    icon: icon,
    name: '待定',
    url: '',
  },
])

const subNavigation = async (url: string) => Taro.navigateTo({ url })
</script>