QTApp_800/pages/work/index.uvue

<template>
<!-- #ifdef APP -->
 <scroll-view style="flex:1">
 <!-- #endif -->
  <view class="my-page">
    <!-- 轮播图 -->
      <swiper class="swiper-box my-swiper" :current="swiperDotIndex" :indicator-dots="true" @change="changeSwiper">
        <swiper-item v-for="item in data"  >
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image class="my-image" :src="item.image" mode="aspectFill"  />
          </view>
		  </swiper-item>
		  </swiper>

    <!-- 标题栏 -->
	<view class=" uni-section">
		<view class=" uni-section-header">
		<view class=" uni-section-header__decoration line"/>	
			<view class=" uni-section-header__content">
			  <text style="font-size:14px;color:#333" class="distraction">系统管理</text>
			</view>
		</view>
	</view>
	<!-- 宫格 -->
    <view class="grid-body">
	  <view class="grid uni-row">
	        <view class="grid-item" v-for="(item, index) in items" :key="index" @click="enterItem(item)" >
	          <!-- 您的网格项内容 -->
	          <uni-icons class="my-icon" :type="item.iconType" size="40" :color="item.colorClass" ></uni-icons>
	          <text class="text">{{ item.text }}</text> 
	        </view>
	      </view>
    </view>
  </view>
  <!-- #ifdef APP -->
    </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
  type ImageItem={
  	 image:string
  }
  type Item={
  	  colorClass:string,
  	  iconType:string,
  	  path:string,		   
  	  text:string
  }	
  export default {
    data() { 
      return {
		items: [
		      {colorClass: 'blue', iconType: "person-filled", text: "用户管理",path:"" },
			  {colorClass: 'blue', iconType: "download", text: "数据下载",path:"/pages/work/download/DownloadList" },
			  {colorClass: 'blue', iconType: "list", text: "任务管理",path:"/pages/work/task/TaskList" },
			  {colorClass: 'orange', iconType: "mic", text: "声像记录", path:"/pages/work/record/RecordList"},
			  {colorClass: 'orange', iconType: "calendar", text: "检验记录",path:"/pages/work/report/InspectionList" },
			  {colorClass: 'orange', iconType: "gear-filled", text: "关键工序",path:"/pages/work/process/ProcessList" },
			  {colorClass: 'green', iconType: "folder-add-filled", text: "文档查阅",path:"" },
			  {colorClass: 'green', iconType: "cloud-upload", text: "数据上传",path:"" },
			  {colorClass: 'green', iconType: "wallet-filled", text: "日志管理",path:"" }
		] as Item[],
        current: 0 as number,
        swiperDotIndex: 0 as number,
        data: [{
            image: '/static/images/banner/banner01.jpg'
          },
          {
            image: '/static/images/banner/banner02.jpg'
          },
          {
            image: '/static/images/banner/banner03.jpg'
          }
        ] as ImageItem[]
      }
    },
    methods: {
      clickBannerItem(item:ImageItem) {
        console.info(item)
      },
      changeSwiper(e:UniSwiperChangeEvent) {
        this.current = e.detail.current
      },
      enterItem(e:Item) {
		  if (e.path != null && e.path != "") {
		  	uni.navigateTo({
		  		url: e.path as string
		  	});
		  } else {
		  uni.showToast({
		        title: '模块建设中~',
		        icon: 'none'
		      });
		}	  
      }
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  .my-page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
	/* #ifndef APP-ANDROID */
	min-height: 100%;
	/* #endif */
    height: 100%;
  }

	/* #ifndef APP-ANDROID */
	  view {
		font-size: 14px;
		line-height: inherit;
	  }
	/* #endif */
  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

 
  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .my-image {
      width: 100%;
    }
  }
  .grid-body {
	/* #ifndef APP-NVUE */  
  	 display: flex;
	/* #endif */
  	flex-wrap: wrap;
  	justify-content: space-between;
  	margin-top: 40rpx;
  }
  
  .grid-item {
    width: 32%;
    padding: 18px 15px;
	margin-bottom: 40rpx;
	border-radius: 20rpx;
	box-shadow: 0 8rpx 20rpx rgba(24, 144, 255, 0.15);
	display: flex;
	flex-direction: column;
	.my-icon{
		text-align: center;
		border-radius: 20rpx;
	}
  }
  .purple {color:#6366f1;}
  .blue {color:#2563eb; }
  .orange {color:#d97706;}
  .green {color:#059669;}
  .yellow {color:yellow;}
  
  $uni-primary: #2979ff !default;
  
  .uni-section {
  	background-color: #fff;
  .uni-section-header {
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    padding: 12px 10px;
    font-weight: normal;
  
    &__decoration{
      margin-right: 6px;
      background-color: $uni-primary;
      &.line {
        width: 4px;
        height: 12px;
        border-radius: 10px;
      }
  
      &.circle {
        width: 8px;
        height: 8px;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
      }
  
      &.square {
        width: 8px;
        height: 8px;
      }
    }
  
    &__content {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      flex: 1;
      color: #333;
  
      .distraction {
        flex-direction: row;
        align-items: center;
      }
      &-sub {
        margin-top: 2px;
      }
    }
  }
  }
</style>