13 changed files with 305 additions and 114 deletions
Binary file not shown.
@ -1,20 +1,160 @@ |
|||
<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> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
export default { |
|||
data() { |
|||
return { |
|||
videoUrl: process.env.VUE_APP_VIDEO_URL + '1.mp4', |
|||
videoStatus: '', |
|||
intervalId: null, |
|||
currentIndex: 0 |
|||
}; |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.intervalId = setInterval(() => { |
|||
this.switchBox(); |
|||
}, 3000); // 切换间隔为2秒 |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
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' |
|||
}, |
|||
handelVideoPause() { |
|||
this.videoStatus = 'pause' |
|||
} |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<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> |
|||
|
|||
Loading…
Reference in new issue