<template>
|
<view class="content">
|
<view class="content-title">
|
<view class="daohang-title">智慧工会</view>
|
</view>
|
<view class="text-area">
|
<swiper @change="changeSwiper" class="swiper" easing-function="easeOutCubic" previous-margin="30rpx"
|
next-margin="30rpx" :circular="circular" :indicator-dots="indicatorDots"
|
indicator-color="rgba(255,78,0,0.2)" indicator-active-color="rgba(255,78,0,1)" :autoplay="autoplay"
|
:interval="interval" :duration="duration">
|
<swiper-item v-for="(item,index) in imgList" :key="index"
|
:animation="index == currentIndex ? animationData : animationData2">
|
<view class="swiper-item uni-bg-red">
|
<image class="swiper-item-img" :src="item.image" mode="widthFix"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
<view class="tongji-box">
|
<view class="zhidu-num-box" v-for="(item,index) in tongjiList" :key="index">
|
<view class="zhidu-content">
|
<font class="teshu-big">{{item.num}}</font>篇
|
</view>
|
<view class="zhidu-content">{{item.title}}</view>
|
</view>
|
</view>
|
<view class="dongtai-gengxin-box">
|
<text class="dengxin-title">动态更新</text>
|
<view class="dongtai-genxin-main">
|
<view class="dongtai-genxin-block">
|
<image class="zhidu-img" src="../../static/img/xuexiziliao.png" mode="aspectFill"></image>
|
<view class="zhidu-main">
|
<view class="zhidu-main-block">
|
<text class="zhidu-wenzi">1.新增文章《员工手册》1.新增文章《员工手册》</text>
|
<text class="zhidu-data">2020.02.22</text>
|
</view>
|
<view class="zhidu-main-block">
|
<text class="zhidu-wenzi">1.新增文章《员工手册》1.新增文章《员工手册》</text>
|
<text class="zhidu-data">2020.02.22</text>
|
</view>
|
<view class="zhidu-main-block">
|
<text class="zhidu-wenzi">1.新增文章《员工手册》1.新增文章《员工手册》</text>
|
<text class="zhidu-data">2020.02.22</text>
|
</view>
|
</view>
|
</view>
|
<view class="dongtai-genxin-block">
|
<image class="zhidu-img" src="../../static/img/huiyuanbiandong.png" mode="aspectFill"></image>
|
<view class="zhidu-main">
|
<view class="zhidu-main-block">
|
<text class="zhidu-wenzi">1.新增文章《员工手册》1.新增文章《员工手册》</text>
|
<text class="zhidu-data">2020.02.22</text>
|
</view>
|
<view class="zhidu-main-block">
|
<text class="zhidu-wenzi">1.新增文章《员工手册》1.新增文章《员工手册》</text>
|
<text class="zhidu-data">2020.02.22</text>
|
</view>
|
<view class="zhidu-main-block">
|
<text class="zhidu-wenzi">1.新增文章《员工手册》1.新增文章《员工手册》</text>
|
<text class="zhidu-data">2020.02.22</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
title: 'Hello',
|
indicatorDots: true,
|
autoplay: true,
|
interval: 4000,
|
duration: 500,
|
circular: true, //头尾衔接滑动
|
imgList: [ //bannerList
|
{
|
image: '../static/img/banner1.png'
|
},
|
{
|
image: '../static/img/banner2.png'
|
},
|
{
|
image: '../static/img/banner3.png'
|
}
|
],
|
currentIndex: 0,
|
animationData: {},
|
animationData2: {},
|
tongjiList: [ //统计区域
|
{
|
num: 220,
|
title: '规章制度篇目'
|
},
|
{
|
num: 180,
|
title: '学习资料篇目'
|
},
|
{
|
num: 220,
|
title: '学习课时统计'
|
}
|
]
|
}
|
},
|
onLoad() {
|
|
},
|
methods: {
|
changeSwiper(e) {
|
console.log('e------', e)
|
this.currentIndex = e.detail.current
|
}
|
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
image {
|
will-change: transform
|
}
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
background-color: #fff;
|
}
|
|
.content-title {
|
/* padding: 60rpx 0 40rpx 0;
|
background: linear-gradient(#ff6620, #fe8d4b); */
|
background: $header-title-bj;
|
background-size: 100% 100%;
|
width: 100%;
|
height: 267rpx;
|
padding-top: 40rpx;
|
|
.daohang-title {
|
text-align: center;
|
color: #fff;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 40rpx;
|
}
|
}
|
|
.text-area,
|
.swiper {
|
width: 100%;
|
}
|
|
.logo {
|
height: 200rpx;
|
width: 200rpx;
|
margin-top: 200rpx;
|
margin-left: auto;
|
margin-right: auto;
|
margin-bottom: 50rpx;
|
}
|
|
.text-area {
|
display: flex;
|
justify-content: center;
|
margin-top: -160rpx;
|
}
|
|
.title {
|
font-size: 36rpx;
|
color: #8f8f94;
|
}
|
|
.swiper-item {
|
// width: calc(100% - 60rpx);
|
// padding: 0 40rpx;
|
margin: 0 30rpx;
|
width: 97%;
|
margin: 0 auto;
|
}
|
|
.swiper-item-img {
|
width: 100%;
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
}
|
|
.tongji-box {
|
width: 100%;
|
display: flex;
|
|
.zhidu-num-box {
|
display: flex;
|
flex: 1;
|
flex-direction: column;
|
align-items: center;
|
margin: 20rpx 0;
|
|
.zhidu-content {
|
font-size: 30rpx;
|
color: #333333;
|
display: flex;
|
align-items: flex-end;
|
|
.teshu-big {
|
font-size: 60rpx;
|
color: #ff4e00;
|
font-weight: 550;
|
}
|
}
|
}
|
}
|
|
.ECharts-box {
|
width: 100%;
|
height: 420rpx;
|
background: red;
|
}
|
|
.dongtai-gengxin-box {
|
width: 100%;
|
margin: 40rpx 0;
|
|
.dengxin-title {
|
font-size: 30rpx;
|
text-align: center;
|
color: #33404d;
|
line-height: 2.5;
|
position: relative;
|
display: block;
|
|
&:after {
|
content: '';
|
width: 30rpx;
|
height: 6rpx;
|
border-radius: 30rpx;
|
background-color: #33404d;
|
position: absolute;
|
bottom: 8rpx;
|
left: calc(50% - 15rpx);
|
}
|
}
|
|
.dongtai-genxin-main {
|
width: 100%;
|
padding: 0 36rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
|
.dongtai-genxin-block {
|
display: flex;
|
margin-top: 30rpx;
|
|
.zhidu-img {
|
width: 190rpx;
|
height: 162rpx;
|
}
|
|
.zhidu-main {
|
margin-left: 12rpx;
|
background-color: rgba(51, 64, 77, 0.08);
|
width: calc(100% - 12rpx - 190rpx);
|
height: 162rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
|
.zhidu-main-block {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.zhidu-wenzi {
|
font-size: 24rpx;
|
color: #ff4e00;
|
width: 200rpx;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
line-height: 1.8;
|
}
|
|
.zhidu-data {
|
font-size: 24rpx;
|
color: #ff4e00;
|
line-height: 1.8;
|
}
|
}
|
}
|
|
|
}
|
}
|
</style>
|
