337 lines
8.8 KiB
Vue
337 lines
8.8 KiB
Vue
<template>
|
|
<view class="main">
|
|
<p class="title">{{ item.name }}</p>
|
|
<view v-if="item.value === 1" class="first">
|
|
<view
|
|
v-for="(item, index) in item.list"
|
|
:key="index"
|
|
@click="handleGo(item)"
|
|
class="useListItem"
|
|
>
|
|
<image class="bg" :src="item.bgUrl"></image>
|
|
<view class="iconStart">
|
|
<image :class="index===0?'icon icon_first':index===1?'icon icon_second':index===2?'icon icon_third':''" src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>
|
|
</view>
|
|
<p class="name">{{ item.name }}</p>
|
|
<image class="img" :src="item.imagePath"></image>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.value === 2" class="second">
|
|
<view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGo(item)">
|
|
<view class="img">
|
|
<image :src="item.imagePath"></image>
|
|
</view>
|
|
<span class="name">{{ item.name }}</span>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.value === 3" class="third">
|
|
<view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGo(item)">
|
|
<view v-if="!item.isNotice" class="imgParent">
|
|
<view class="img">
|
|
<image style="width: 100%;height: 100%" :src="item.imagePath"></image>
|
|
</view>
|
|
</view>
|
|
<image v-else class="img_normal" :src="item.imagePath"></image>
|
|
<span class="name">{{ item.name }}</span>
|
|
<span v-if="item.notice!==0" class="notice" :style="{ background: colorList[index] }">{{item.notice}}</span>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.value === 4" class="fourth">
|
|
<view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGo(item)">
|
|
<view v-if="!item.isNotice" class="imgParent">
|
|
<view class="img">
|
|
<image style="width: 100%;height: 100%" :src="item.imagePath"></image>
|
|
</view>
|
|
</view>
|
|
<image v-else class="img_normal" :src="item.imagePath"></image>
|
|
<span class="name">{{ item.name }}</span>
|
|
<span v-if="item.notice!==0 && item.isNotice" class="notice" style="{ background: red }">{{item.notice}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "userList",
|
|
props:{
|
|
item:{
|
|
type:Object,
|
|
default:()=>{}
|
|
},
|
|
lastDay:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
noticeInfo:{
|
|
type:Object,
|
|
default:()=>{}
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
colorList:['#3473FE', '#5B5BFB', '#B55FFB', '#0095FB', '#FB8922', '#EAAB00', '#1CB953', '#149FB3']
|
|
}
|
|
},
|
|
onLoad(){
|
|
console.log(this.colorList,'colorList')
|
|
},
|
|
methods:{
|
|
handleGo(item){
|
|
console.log('item',item)
|
|
if (item.value!==3 && item.value!==4){
|
|
if (item.value===2){
|
|
this.$util.toNextRoute('navigateTo', `${item.homeUrl}?time=${this.lastDay}&Serverpart_ID=372`)
|
|
}else{
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
}
|
|
}else if(item.value === 3 && item.isNotice || item.value ===4 && item.isNotice){
|
|
if (item.name==='基础信息'){
|
|
this.$util.toNextRoute('navigateTo', `${item.homeUrl}?isPicker=${true}&latitude=${this.noticeInfo.latitude}&longitude=${this.noticeInfo.longitude}`)
|
|
}else{
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
}
|
|
} else{
|
|
uni.showToast({title: '暂无权限,请联系管理员', icon: 'none'})
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
.title {
|
|
font-size: 34rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 48rpx;
|
|
margin-bottom: 12px;
|
|
}
|
|
.first {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 28px;
|
|
.useListItem {
|
|
width: calc((100% - 16px)/3);
|
|
height: 72px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 8px 11px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
.bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;left:0;
|
|
z-index:0;
|
|
}
|
|
.iconStart{
|
|
width: 20px;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 11px;top: 27px;
|
|
z-index:2;
|
|
.icon{
|
|
width: 14px;
|
|
height: 14px;
|
|
transform: translateX(30px);
|
|
border-right: 30px solid transparent;
|
|
}
|
|
.icon_first{
|
|
filter: drop-shadow(-30px 0px #9564F6);
|
|
}
|
|
.icon_second{
|
|
filter: drop-shadow(-30px 0px #F5921D);
|
|
}
|
|
.icon_third{
|
|
filter: drop-shadow(-30px 0px #28BAD3);
|
|
}
|
|
}
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #55277d;
|
|
line-height: 40rpx;
|
|
position: absolute;
|
|
top: 8px;left: 11px;
|
|
z-index:2;
|
|
}
|
|
.img {
|
|
width: 32px;
|
|
height: 32px;
|
|
position: absolute;
|
|
bottom: 9px;
|
|
right: 14px;
|
|
}
|
|
}
|
|
//.firstBg_1 {
|
|
// background: url('/static/images/user/firstBg_1.svg');
|
|
//}
|
|
//.firstBg_2 {
|
|
// background: url('/static/images/user/firstBg_2.svg');
|
|
//}
|
|
//.firstBg_3 {
|
|
// background: url('/static/images/user/firstBg_3.svg');
|
|
//}
|
|
}
|
|
.second {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 28px;
|
|
.useListItem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.img {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(22, 0, 2, 0.05);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
image {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.third {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
.useListItem {
|
|
width: 25%;
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.imgParent{
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-bottom: 6px;
|
|
overflow: hidden;
|
|
.img {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-bottom: 6px;
|
|
transform: translateX(30px);
|
|
border-right: 30px solid transparent;
|
|
filter: drop-shadow(-30px 0px #ccc);
|
|
}
|
|
}
|
|
.img_normal{
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
}
|
|
.notice {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 0;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.meng{
|
|
//position: absolute;
|
|
//top: 0;left: 0;
|
|
//width: 100%;
|
|
//height: 100%;
|
|
//background: rgba(0,0,0,0.4);
|
|
}
|
|
}
|
|
.fourth {
|
|
width: 100%;
|
|
display: flex;
|
|
.useListItem {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
.imgParent{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 6px;
|
|
overflow: hidden;
|
|
.img {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 6px;
|
|
transform: translateX(30px);
|
|
border-right: 30px solid transparent;
|
|
filter: drop-shadow(-30px 0px #ccc);
|
|
}
|
|
}
|
|
.img_normal{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #091732;
|
|
line-height: 40rpx;
|
|
}
|
|
.notice {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: red;
|
|
position: absolute;
|
|
right: 20%;
|
|
top: -4px;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|