cultivationApp/pages/index/manager.vue

<template>
  <view style="position: relative;">
    <view class="top">
      <view class="" style="height:var(--status-bar-height) ;">
      </view>
      <view class="nav-con">
        <view class="left"></view>
        <view class="title">
          牲畜管理
        </view>
        <view class="btn" style="margin-top: -5rpx;">
          <Myindex url='/pages/index/index' />
        </view>
      </view>
    </view>
    <view class="" style="height:var(--status-bar-height) ;">
    </view>
    <view class="nav-con">
    </view>

    <view class="card-list">
      <block v-for="(item, index) in list" :key="index">
        <view class="card-box" @click="navTo(item.url)" :style="{backgroundImage: `url(${item.bg})`, color: item.color}">
          <view class="box-top">
            <view class="title">{{item.name}}</view>
            <view class="btn" :style="{border: `2rpx solid ${item.color}`}">点击进入</view>
          </view>
          <view class="box-bottom">
            {{item.tips}}
          </view>
        </view>
      </block>
    </view>
    <MyTabbar></MyTabbar>
  </view>
</template>

<script setup>
  import Myindex from '@/components/return/index.vue';
  import MyTabbar from "@/components/customTabbar/tabbar.vue"
  import { reactive, ref } from 'vue';
  import { onLoad } from "@dcloudio/uni-app";
  
  onLoad(()=>{
    uni.hideTabBar()
  })

  const list = reactive([
    {
      name: '栏舍设置',
      tips: '栏舍新增/详情喂养、记录',
      bg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/be364202312191601547849.png',
      color: '#cc841f',
      url: '/pages/plantAdmin/house'
    },
    {
      name: '档案管理',
      tips: '档案新增、档案详情/编辑',
      bg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/8d37b202312251151062137.png',
      color: '#1f84cc',
      url: '/pages/record/record'
    },
    {
      name: '转栏记录',
      tips: '转入/转出舍栏、转栏时间',
      bg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/cee51202312191634095436.png',
      color: '#c36136',
      url: '/pages/jump/jump'
    },
    {
      name: '离栏记录',
      tips: '离舍类型/原因、离舍时间',
      bg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/3246c202312191633441356.png',
      color: '#366ecf',
      url: '/pages/leave/leave'
    },
  ])
  
const navTo = (url)=>{
  if(url) uni.navigateTo({
    url: url
  })
  else uni.showToast({
    title: '暂未开放',
    icon: 'none'
  })
}
</script>

<style lang="scss">
  page {
    background-color: $theme-bg-color;
  }

  .top {
    background-color: #feb048;
    position: fixed;
    z-index: 999999;
    width: 750rpx;

  }

  .nav-con {
    width: 100vw;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
    padding-bottom: 10rpx;
    color: #fff;
    .left{
      flex: 1;
    }
    .title{
      flex: 1;
      text-align: center;
    }
    .btn {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }

  .card-list {
    padding: 28rpx;

    .card-box {
      height: 170rpx;
      width: 694rpx;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 40rpx;
      margin-bottom: 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 28rpx;

      .box-top {
        display: flex;

        .title {
          font-size: 33rpx;
          font-weight: bold;
        }

        .btn {
          height: 50rpx;
          width: 160rpx;
          margin-left: 30rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 2rpx solid #cc841f;
          border-radius: 50rpx;
        }
      }

      .box-bottom {
        width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>