摘要：
--底部通知栏--˃启用消息通知，并且不会错过重要的新消息exportdefault｛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，
<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="http://t.zoukankan.com/item.imgUrl"
alt
/>
</div>
<div
class="bg-stand"
v-if="item.slideName === '考勤打卡'"
>
<img
:src="http://t.zoukankan.com/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>
css部分代码
.page-body {
color: #2a2a2f;
100%;
background-size: 100% 100%;
background-color: #3296fa;
}
.page-box {
position: relative;
padding-bottom: 98px;
.slide-line{
background: url('../../assets/img/homePage/轮播条2@2x.png') no-repeat;
position: absolute;
top: 340px;
left: 50%;
transform: translateX(-50%);
80px;
height: 4px;
background-color:rgba(216,216,216,1);
border-radius: 2px;
}
.box-slide {
100%;
height: 372px;
background: #fff;
border-radius: 20px 20px 0px 0px;
padding: 40px 40px 20px;
overflow-x: scroll;
.slide-cont {
// 900px;
height: 300px;
flex-direction: column;
flex-wrap: wrap;
.bottom-item{
margin-top: 40px
}
.cont-item{
position: relative;
text-align: center;
height: 114px;
114px;
color: #2A2A2F;
.bg-stand{
position: absolute;
top: -20px;
right: -10px;
68px;
height: 36px;
img{
100%;
}
}
.item-img{
margin: 0 auto;
72px;
height: 72px;
margin-bottom: 12px;
img{
100%;
}
}
.item-txt{
font-size: 28px;
}
}
}
}
.backlog-bg-line {
background-color: #f8f8f8;
100%;
height: 20px;
}
.box-backlog {
background: #fff;
padding: 32px 40px 100px;
.backlog-title {
font-weight: 600;
color: #2a2a2f;
font-size: 36px;
line-height: 50px;
}
.backlog-section {
margin-top: 12px;
padding: 20px 0;
.section-img {
display: flex;
align-items: center;
40px;
margin-right: 24px;
img {
100%;
}
}
.backlog-cont-title {
font-weight: 400;
font-size: 32px;
}
.backlog-cont-time {
position: relative;
font-size: 24px;
padding-top: 16px;
color: #999;
.backlog-pub-time {
color: #b1b1b1;
margin-left: 32px;
}
.backlog-pub-time:before {
position: absolute;
bottom: 0;
top: 20px;
left: 120px;
2px; /* 严格意义上：最好写上；避免文字多的时候线条被拉宽 */
height: 16px;
content: "";
background-color: #ccc;
}
}
}
.nodata-img {
316px;
height: 220px;
margin: 30px auto;
img {
100%;
}
}
.img-txt {
text-align: center;
font-size: 24px;
color: #b1b1b1;
}
}
}
::-webkit-scrollbar {
display: none;/*隐藏滚轮*/
}