<template>
<div class="page-body">
<div class="page-title flex">
<div class="title-txt">
title随便title
</div>
<div class="title-btn">
<div
class="title-search title-bg"
@click="selectSearch"
></div>
</div>
</div>
<div class="page-waitConduct">
<div class="waitConduct-cont">
<van-row>
<van-col
span="8"
class="wait-col"
>
<div class="wait-cont-num wait-blue">16</div>
<div class="wait-cont-txt">工单待办</div>
</van-col>
<van-col
class="wait-col"
span="8"
>
<div class="wait-cont-num wait-yellow">161</div>
<div class="wait-cont-txt">疫情待办</div>
</van-col>
<van-col
class="wait-col"
span="8"
>
<div class="wait-cont-num wait-red">36</div>
<div class="wait-cont-txt">预警工单</div>
</van-col>
</van-row>
</div>
</div>
<div class="page-box">
<-- 背景图设置偏移使用动态style -->
<div
class="slide-line"
:style="{'background-position': `${bgOffset} 0`}"
></div>
<div
class="box-slide"
ref="boxSlide"
>
<div
class="slide-cont flex"
ref="slideCont"
@scroll="menu"
>
<div
@click="selectSlide(item)"
class="cont-item"
:class="{'bottom-item': (index + 1) % 2 == 0 }"
v-for="(item, index) in slideList"
:key="item.id"
>
<div class="item-img">
<img
:src="item.imgUrl"
alt
/>
</div>
<div
class="bg-stand"
v-if="item.slideName === '考勤打卡'"
>
<img
:src="standBg"
alt
/>
</div>
<div class="item-txt">{{item.slideName}}</div>
</div>
</div>
</div>
<!-- 底部通知栏 -->
<div class="notice-bar">
<van-notice-bar
class="page-notice"
background="#fff"
color="#0089ff"
mode="closeable"
>
开启消息通知,不错过重要新消息
</van-notice-bar>
</div>
</div>
</template>
<script>
export default {
name: "HomePage",
components: {},
data () {
return {
sortMenu: 0,
slideContLeft: 0,
slideContWidth: 0,
boxSlideWidth: 0,
bgOffset: 0,
isLogin: false,
isOutline: false,
show: false,
checked: true,
standBg: require('imgurl'),
slideList: [
{
id: 1,
imgUrl: require('imgurl'),
imgUrl: require('imgurl'),
slideName: '基础数据'
}, {
id: 5,
imgUrl: require('imgurl'),
imgUrl: require('imgurl'),
slideName: '应急工单'
}, {
id: 2,
imgUrl: require('imgurl'),
imgUrl: require('imgurl'),
slideName: '考勤打卡'
}, {
id: 6,
imgUrl: require('imgurl'),
imgUrl: require('imgurl'),
slideName: '疫情管理'
}, {
id: 3,
imgUrl: require('imgurl'),
imgUrl: require('imgurl'),
slideName: '事件工单'
}, {
id: 7,
imgUrl: require('imgurl'),
imgUrl: require('imgurl'),
slideName: '光纤点'
}, {
id: 4,
imgUrl: require('imgurl'),
imgUrl: require('imgurl'),
slideName: '督办工单'
}, {
id: 8,
imgUrl: require('imgurl'),
imgUrl: require('imgurl'),
slideName: '系统管理'
}, {
id: 9,
imgUrl: require('imgurl'),
slideName: '基础数据'
}, {
id: 10,
imgUrl: require('imgurl'),
slideName: '考勤打卡'
},
],
};
},
methods: {
scanningCode(type) {
console.log(type)
},
selectSlide (item) {
console.log(item)
var id = item.id;
if (id == 2){//考勤打卡功能
console.log('-=-=-')
console.log('-=-=-')
}
},
checkBacklog (item) {
console.log('-=-=-')
console.log('-=-=-')
},
selectMore () {
console.log('more, opendialog')
this.show = true
},
selectSearch () {
console.log('-=-=-')
},
// 时间格式的校验
formatDateS (param) {
if (!param) {
return "";
}
let time = new Date(param);
let y = time.getFullYear();
let m = time.getMonth() + 1;
let d = time.getDate();
let h = time.getHours();
let mm = time.getMinutes();
let s = time.getSeconds();
return `${y}-${m}-${d} ${h}:${mm}:${s}`;
},
offset () {
// 获取左右移动的距离
this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
let docElem = document.documentElement;
var body = document.body,
scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
},
menu () {
// 通过移动宽度和总宽度的长度比例进行计算背景图应该移动的距离
this.sortMenu = this.$refs.boxSlide.scrollLeft;
let allWidth = this.slideContWidth - this.boxSlideWidth + this.slideContLeft
this.bgOffset = ((this.sortMenu / allWidth) * 100) + '%'
}
},
mounted: function () {
// 计算当前屏幕宽度以及容器的宽度
window.addEventListener("scroll", this.menu, true);
let boxSlide = document.querySelector('.box-slide')
let slideCont = document.querySelector('.slide-cont')
this.slideContLeft = slideCont.getBoundingClientRect().left
this.slideContWidth = slideCont.offsetWidth
this.boxSlideWidth = boxSlide.offsetWidth
},
};
</script>
<style lang="scss">
// 引入的css样式
@import "../../assets/style/homePage.scss";
</style>