|
|
|
@ -31,11 +31,16 @@ |
|
|
|
</screen-title> |
|
|
|
<div class="card-item-hsyf"> |
|
|
|
<div class="item" v-for="(item, index) in list" :key="index"> |
|
|
|
<img :src="item.img" alt="" /> |
|
|
|
<div class="right"> |
|
|
|
<div class="num">{{ item.num }}</div> |
|
|
|
<div class="bot">{{ item.name }}</div> |
|
|
|
<div class="item-box"> |
|
|
|
<div class="item-image"> |
|
|
|
<div></div> |
|
|
|
<img :src="item.img" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<div class="num">{{ item.num }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="bot">{{ item.name }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -60,32 +65,32 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
videoUrl: process.env.VUE_APP_VIDEO_URL + '1.mp4', |
|
|
|
videoStatus: '', |
|
|
|
videoUrl: process.env.VUE_APP_VIDEO_URL + "1.mp4", |
|
|
|
videoStatus: "", |
|
|
|
intervalId: null, |
|
|
|
currentIndex: 0, |
|
|
|
list: [ |
|
|
|
{ |
|
|
|
name: '新村党委', |
|
|
|
num: '10', |
|
|
|
img: require('@/assets/images/icon/xcdw.png') |
|
|
|
name: "新村党委", |
|
|
|
num: "10", |
|
|
|
img: require("@/assets/images/icon/xcdw.png"), |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '自然村党支部', |
|
|
|
num: '97', |
|
|
|
img: require('@/assets/images/icon/zrcdzb.png') |
|
|
|
name: "自然村党支部", |
|
|
|
num: "97", |
|
|
|
img: require("@/assets/images/icon/zrcdzb.png"), |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '两新党组织', |
|
|
|
num: '22', |
|
|
|
img: require('@/assets/images/icon/lxdzz.png') |
|
|
|
name: "非公和社会组织", |
|
|
|
num: "22", |
|
|
|
img: require("@/assets/images/icon/fghshzz.png"), |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '网格党小组', |
|
|
|
num: '235', |
|
|
|
img: require('@/assets/images/icon/wgdxz.png') |
|
|
|
name: "网格党小组", |
|
|
|
num: "235", |
|
|
|
img: require("@/assets/images/icon/wgdxz.png"), |
|
|
|
}, |
|
|
|
// { |
|
|
|
// name: '党员中心户', |
|
|
|
@ -93,44 +98,72 @@ export default { |
|
|
|
// img: require('@/assets/images/icon/dyzxh.png') |
|
|
|
// }, |
|
|
|
{ |
|
|
|
name: '党员人数', |
|
|
|
num: '3496', |
|
|
|
img: require('@/assets/images/icon/dy.png') |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
name: "党员人数", |
|
|
|
num: "3496", |
|
|
|
img: require("@/assets/images/icon/dbry2.png"), |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
created () {}, |
|
|
|
mounted () { |
|
|
|
created() {}, |
|
|
|
mounted() { |
|
|
|
this.intervalId = setInterval(() => { |
|
|
|
this.switchBox() |
|
|
|
}, 3000) // 切换间隔为2秒 |
|
|
|
this.switchBox(); |
|
|
|
}, 3000); // 切换间隔为2秒 |
|
|
|
}, |
|
|
|
beforeDestroy () { |
|
|
|
clearInterval(this.intervalId) // 清除定时器，防止内存泄漏 |
|
|
|
beforeDestroy() { |
|
|
|
clearInterval(this.intervalId); // 清除定时器，防止内存泄漏 |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
switchBox () { |
|
|
|
switchBox() { |
|
|
|
if (this.currentIndex === 0) { |
|
|
|
this.currentIndex = 1 |
|
|
|
} else if (this.currentIndex === 1 && this.videoStatus != 'play') { |
|
|
|
this.currentIndex = 0 |
|
|
|
this.currentIndex = 1; |
|
|
|
} else if (this.currentIndex === 1 && this.videoStatus != "play") { |
|
|
|
this.currentIndex = 0; |
|
|
|
} |
|
|
|
}, |
|
|
|
handelVideoPlay () { |
|
|
|
this.videoStatus = 'play' |
|
|
|
handelVideoPlay() { |
|
|
|
this.videoStatus = "play"; |
|
|
|
}, |
|
|
|
handelVideoPause() { |
|
|
|
this.videoStatus = "pause"; |
|
|
|
}, |
|
|
|
handelVideoPause () { |
|
|
|
this.videoStatus = 'pause' |
|
|
|
} |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
computed: {}, |
|
|
|
watch: {} |
|
|
|
} |
|
|
|
watch: {}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
/* 定义动画关键帧 */ |
|
|
|
@keyframes rotate { |
|
|
|
0% { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: rotate(360deg); |
|
|
|
} /* 旋转360度回到初始位置 */ |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes rotate { |
|
|
|
from { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
to { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
} |
|
|
|
/* 定义动画关键帧 */ |
|
|
|
@keyframes rotateBackground { |
|
|
|
from { |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
to { |
|
|
|
background-position: center calc(100% - 28px); /* 调整这里的数值以匹配你的元素大小，使得背景像是绕中心点旋转了一圈 */ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
@ -157,21 +190,49 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
&-item-hsyf { |
|
|
|
padding: 16px; |
|
|
|
// padding: 16px; |
|
|
|
width: 100%; |
|
|
|
flex: 1; |
|
|
|
box-sizing: border-box; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
padding: 27px 45px; |
|
|
|
.item { |
|
|
|
width: 33.3%; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
&-box { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
&-image { |
|
|
|
width: 56px; |
|
|
|
height: 56px; |
|
|
|
position: relative; |
|
|
|
div { |
|
|
|
width: 56px; |
|
|
|
height: 56px; |
|
|
|
background: url("~@/assets/images/icon/homeHsyfBg.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-size: cover; |
|
|
|
background-position: center; |
|
|
|
background-attachment: fixed; |
|
|
|
animation: rotate 4s linear infinite; /* 动画名称为rotateBackground，持续时间4秒，线性速度，无限循环 */ |
|
|
|
} |
|
|
|
img { |
|
|
|
position: relative; |
|
|
|
top: -42px; |
|
|
|
left: 14px; |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
// margin: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
padding-left: 6px; |
|
|
|
@include flex(column); |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
@ -179,19 +240,33 @@ export default { |
|
|
|
font-size: 20px; |
|
|
|
font-family: pangmenzhengdao; |
|
|
|
} |
|
|
|
|
|
|
|
.bot { |
|
|
|
color: #bcd0f0; |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
width: 56px; |
|
|
|
height: 56px; |
|
|
|
margin-right: 5px; |
|
|
|
.bot { |
|
|
|
margin-top: 6px; |
|
|
|
color: #bcd0f0; |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
} |
|
|
|
.item:nth-child(4), |
|
|
|
.item:nth-child(5) { |
|
|
|
.item-image { |
|
|
|
div { |
|
|
|
width: 56px; |
|
|
|
height: 56px; |
|
|
|
background: url("~@/assets/images/icon/homeHsyfBg1.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-size: cover; |
|
|
|
background-position: center; |
|
|
|
background-attachment: fixed; |
|
|
|
animation: rotate 4s linear infinite; /* 动画名称为rotateBackground，持续时间4秒，线性速度，无限循环 */ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// .item:nth-child(5) { |
|
|
|
// .item-image { |
|
|
|
// background: url("~@/assets/images/icon/homeHsyfBg1.png") no-repeat; |
|
|
|
// } |
|
|
|
// } |
|
|
|
} |
|
|
|
&-item-zdyf { |
|
|
|
padding: 16px; |
|
|
|
|
