162 lines
3.5 KiB
Vue
162 lines
3.5 KiB
Vue
<template>
|
|
<view class="container">
|
|
<image src="/static/banner.jpg" mode="widthFix" style="width:100%"></image>
|
|
<uni-section :title="welTitle" type="circle" titleFontSize="15px" titleColor="#0000CD"
|
|
@click="goUserInfo">
|
|
<template v-slot:right>
|
|
<span style="color:gray">{{currentDate}}</span>
|
|
</template>
|
|
</uni-section>
|
|
<uni-section title="功能入口" type="line">
|
|
<uni-grid :column="4" :show-border="false" :square="false" @change="change">
|
|
<uni-grid-item v-for="(item ,index) in moduleList" :index="index" :key="index">
|
|
<view class="grid-item-box">
|
|
<image class="image" :src="item.url" mode="aspectFill" />
|
|
<text class="text">{{item.text}}</text>
|
|
<view v-if="item.badge" class="grid-dot">
|
|
<uni-badge :text="item.badge" :type="item.type" />
|
|
</view>
|
|
</view>
|
|
</uni-grid-item>
|
|
</uni-grid>
|
|
</uni-section>
|
|
<view style="height: 12rpx;"></view>
|
|
<uni-row :gutter="12">
|
|
<uni-col :span="12">
|
|
<navigator style="padding: 28rpx;background-color: white;display: flex;justify-content : space-between;" url="../wf/index?category=duty">
|
|
<span>待办</span>
|
|
<span style="color: #2979ff;font-size: 36rpx; font-weight: bold;">3</span>
|
|
</navigator>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<navigator style="padding: 28rpx;background-color: white;display: flex;justify-content : space-between;" url="../wf/index?category=owner">
|
|
<span>我的</span>
|
|
<span style="color: #2979ff;font-size: 36rpx; font-weight: bold;">3</span>
|
|
</navigator>
|
|
</uni-col>
|
|
</uni-row>
|
|
<view style="height: 12rpx;"></view>
|
|
<uni-section title="列表信息" type="line">
|
|
<uni-list>
|
|
<uni-list-item v-for="(item ,index) in moduleList" :index="index" :key="index" :title="item.text">
|
|
|
|
</uni-list-item>
|
|
</uni-list>
|
|
</uni-section>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tool from "../../utils/tools.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
welTitle: "",
|
|
currentDate: tool.getTodayDate(),
|
|
moduleList: [{
|
|
url: '/static/c1.png',
|
|
text: 'Grid 1',
|
|
badge: '0',
|
|
type: "primary"
|
|
},
|
|
{
|
|
url: '/static/c2.png',
|
|
text: 'Grid 2',
|
|
badge: '1',
|
|
type: "success"
|
|
},
|
|
{
|
|
url: '/static/c3.png',
|
|
text: 'Grid 3',
|
|
badge: '99',
|
|
type: "warning"
|
|
},
|
|
{
|
|
url: '/static/c4.png',
|
|
text: 'Grid 4',
|
|
badge: '2',
|
|
type: "error"
|
|
},
|
|
{
|
|
url: '/static/c5.png',
|
|
text: 'Grid 5'
|
|
},
|
|
{
|
|
url: '/static/c6.png',
|
|
text: '全部'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initWelTitle();
|
|
|
|
},
|
|
onShow() {
|
|
// #ifdef MP-WEIXIN
|
|
uni.hideHomeButton()
|
|
// #endif
|
|
},
|
|
methods: {
|
|
initWelTitle() {
|
|
let userInfo = uni.getStorageSync("userInfo")
|
|
let name = userInfo.name;
|
|
this.welTitle = `欢迎您, ${name}!`
|
|
},
|
|
goUserInfo() {
|
|
uni.navigateTo({
|
|
url: "/pages/system/userInfo"
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.image {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.grid-item-box {
|
|
flex: 1;
|
|
// position: relative;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.grid-dot {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 15px;
|
|
}
|
|
|
|
.swiper {
|
|
height: 420px;
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
@media screen and (min-width: 768px) and (max-width: 1425px) {
|
|
.swiper {
|
|
height: 630px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1425px) {
|
|
.swiper {
|
|
height: 830px;
|
|
}
|
|
}
|
|
|
|
/* #endif */
|
|
</style>
|