13 changed files with 305 additions and 114 deletions
Binary file not shown.
@ -1,20 +1,160 @@ |
|||||
<template> |
<template> |
||||
<div class=''></div> |
<div> |
||||
|
<div class='card' style="height: 292px;"> |
||||
|
<screen-title> |
||||
|
<div slot="left" class="screen-title-left">移风简介</div> |
||||
|
</screen-title> |
||||
|
<!-- --> |
||||
|
<div class="card-item-yfjj"> |
||||
|
<!-- <transition name="slide-transform"> --> |
||||
|
<!-- <section v-if="currentIndex == 0"> --> |
||||
|
<img src="@/assets/images/kyll/garden.png" alt=""> |
||||
|
<p>移风店镇位于即墨区西北部、青岛市版图的中心位置，地处威海、烟台、潍坊2小时经济圈内。距机场18公里、高铁站21公里，毗邻沈海、济青和青新高速，交通优势明显。 |
||||
|
</p> |
||||
|
<p> 青岛(移风)国际蔬菜花卉种子产业园、即墨农业高新技术开发区均落于境内，将打造全国重要的蔬菜花卉种子研发和繁育中心，成为全国种业“男广州，北青岛”格局承载地。 |
||||
|
</p> |
||||
|
<!-- </section> --> |
||||
|
|
||||
|
<!-- <video v-if="currentIndex == 1" :src="videoUrl" style="width: 100%; height: 100%;" |
||||
|
:controls="true" width="100%" height="100%" @play="handelVideoPlay" |
||||
|
@pause="handelVideoPause"></video> --> |
||||
|
<!-- </transition> --> |
||||
|
<!-- <transition name="slide-transform"> |
||||
|
|
||||
|
</transition> --> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<div class='card' style="margin-top: 8px;height: 266px;"> |
||||
|
<screen-title> |
||||
|
<div slot="left" class="screen-title-left">红色移风</div> |
||||
|
</screen-title> |
||||
|
<!-- <div class="card-item-hsyf"> |
||||
|
<div class="item"> |
||||
|
<img src="@/assets/images/index/yfys1.png" alt=""> |
||||
|
<div class="right"> |
||||
|
<div class="top">战略优势</div> |
||||
|
<div class="center yellow"><span class="num">3</span> 年</div> |
||||
|
<div class="bot">中央1号文件</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@/assets/images/index/yfys2.png" alt=""> |
||||
|
<div class="right"> |
||||
|
<div class="top">自然优势</div> |
||||
|
<div class="center green">北纬 <span class="num">36°</span></div> |
||||
|
<div class="bot">黄金育种地带</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@/assets/images/index/yfys3.png" alt=""> |
||||
|
<div class="right"> |
||||
|
<div class="top">区位优势</div> |
||||
|
<div class="center violet"><span class="num">1</span> 小时</div> |
||||
|
<div class="bot">交通辐射圈</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@/assets/images/index/yfys4.png" alt=""> |
||||
|
<div class="right"> |
||||
|
<div class="top">产业优势</div> |
||||
|
<div class="center blue"><span class="num">5.2</span> 亿元</div> |
||||
|
<div class="bot">种子年销售额</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
<div class='card m-top12' style="height: 318px;"> |
||||
|
<screen-title> |
||||
|
<div slot="left" class="screen-title-left">种都移风</div> |
||||
|
</screen-title> |
||||
|
<div class="card-item-zdyf"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return {}; |
return { |
||||
|
videoUrl: process.env.VUE_APP_VIDEO_URL + '1.mp4', |
||||
|
videoStatus: '', |
||||
|
intervalId: null, |
||||
|
currentIndex: 0 |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.intervalId = setInterval(() => { |
||||
|
this.switchBox(); |
||||
|
}, 3000); // 切换间隔为2秒 |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
clearInterval(this.intervalId); // 清除定时器，防止内存泄漏 |
||||
|
}, |
||||
|
methods: { |
||||
|
switchBox() { |
||||
|
if (this.currentIndex === 0) { |
||||
|
this.currentIndex = 1; |
||||
|
} else if (this.currentIndex === 1 && this.videoStatus != 'play') { |
||||
|
this.currentIndex = 0; |
||||
|
} |
||||
|
}, |
||||
|
handelVideoPlay() { |
||||
|
this.videoStatus = 'play' |
||||
}, |
}, |
||||
created() {}, |
handelVideoPause() { |
||||
methods: {}, |
this.videoStatus = 'pause' |
||||
components:{}, |
} |
||||
computed:{}, |
}, |
||||
|
components: {}, |
||||
|
computed: {}, |
||||
watch: {}, |
watch: {}, |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
&-item-yfjj { |
||||
|
padding: 0 15px 15px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
flex: 1; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
p { |
||||
|
text-indent: 2rem; |
||||
|
margin-top: 0px; |
||||
|
color: #BDCEEA; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
float: right; |
||||
|
shape-outside: inherit; |
||||
|
margin: 0 0 0 13px; |
||||
|
width: 200px; |
||||
|
height: 126px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
background-color: lightblue; |
||||
|
margin: 10px; |
||||
|
display: inline-block; |
||||
|
transition: transform 0.5s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
transform: scale(1.2); |
||||
|
/* 放大效果，可根据需求调整 */ |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue