VberAdminPlus/UI/VAP.APP/src/pages/work/index.vue

<script setup lang="ts">
import TabBar from "@/components/tab-bar/tab-bar.vue"
const swiperOpts = reactive({
  current: 0,
  swiperDotIndex: 0,
  data: [
    {
      image: "/static/images/banner/001.jpg",
    },
    {
      image: "/static/images/banner/002.jpg",
    },
  ],
})
function clickBannerItem(item: any) {
  console.info(item)
}
function changeSwiper(e: any) {
  swiperOpts.current = e.detail.current
}
function changeGrid() {
  message.msg("模块建设中~")
}
</script>

<template>
  <view>
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="swiperOpts.data" :current="swiperOpts.current" field="content">
      <swiper :current="swiperOpts.swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, i) in swiperOpts.data" :key="i">
          <view class="h-100 w-100" @click="clickBannerItem(item)">
            <image class="h-100 w-100" :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件 -->
    <uni-section title="系统管理" type="line"></uni-section>
    <view class="">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text">用户管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="staff-filled" size="30"></uni-icons>
            <text class="text">角色管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">菜单管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="settings-filled" size="30"></uni-icons>
            <text class="text">部门管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="heart-filled" size="30"></uni-icons>
            <text class="text">岗位管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="bars" size="30"></uni-icons>
            <text class="text">字典管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="gear-filled" size="30"></uni-icons>
            <text class="text">参数设置</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="chat-filled" size="30"></uni-icons>
            <text class="text">通知公告</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="d-fc flex-column h-100">
            <uni-icons type="wallet-filled" size="30"></uni-icons>
            <text class="text">日志管理</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
    <TabBar></TabBar>
  </view>
</template>