162 lines
3.7 KiB
Vue
162 lines
3.7 KiB
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/massif' />
|
|
</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>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Myindex from '@/components/return/index.vue';
|
|
import { reactive, ref } from 'vue';
|
|
|
|
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: string)=>{
|
|
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> |