|
|
|
@ -9,48 +9,57 @@ |
|
|
|
<TimeComponent /> |
|
|
|
</div> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<nav style="width: 100%; height: 70px"> |
|
|
|
<div style="width: 100%; height: 70px" class="home_nav"> |
|
|
|
<ul> |
|
|
|
<li |
|
|
|
v-for="(item, index) in navData" |
|
|
|
:class="{ nav_li: active === index }" |
|
|
|
:key="index" |
|
|
|
v-for="item in navData" |
|
|
|
:class="[active === item.index && 'nav_li', `tab_nav_${item.index}`]" |
|
|
|
:key="item.index" |
|
|
|
@onFocus="navFocus(item.index)" |
|
|
|
@right="navRight(item.index, $event)" |
|
|
|
@left="navLeft(item.index, $event)" |
|
|
|
@down="navDown(item.index, $event)" |
|
|
|
v-focusable |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</nav> |
|
|
|
</div> |
|
|
|
|
|
|
|
<article class="home_article"> |
|
|
|
<article v-if="active === 0" class="home_article"> |
|
|
|
<section style="width: 520px" class="border"> |
|
|
|
<div class="home_slideshow"> |
|
|
|
<swiper> |
|
|
|
<!-- <swiper-slide v-for="(item, index) in swiperList" :key="index"> |
|
|
|
<div class="swiper-item"> |
|
|
|
<img |
|
|
|
class="swiper-image" |
|
|
|
:src="item.url" |
|
|
|
style="cursor: pointer; width: 520px; height: 393px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</swiper-slide> --> |
|
|
|
</swiper> |
|
|
|
<!-- 轮播图 --> |
|
|
|
<div |
|
|
|
class="home_slideshow box_0" |
|
|
|
@down="moveToIndex(1)" |
|
|
|
@right="moveToIndex(3)" |
|
|
|
@up="moveToTop" |
|
|
|
v-focusable |
|
|
|
> |
|
|
|
<img src="../assets/img/Group1618.png" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="home_inform"> |
|
|
|
<div |
|
|
|
class="home_informOverall" |
|
|
|
class="home_informOverall box_1" |
|
|
|
style=" |
|
|
|
background: linear-gradient(180deg, #32b3c5 0%, #2f948e 100%); |
|
|
|
" |
|
|
|
@top="moveToIndex(0)" |
|
|
|
@right="moveToIndex(2)" |
|
|
|
v-focusable |
|
|
|
> |
|
|
|
<img src="../assets/img/Frame01.png" alt="" /> |
|
|
|
<p style="width: 138px">通知信息</p> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="home_informOverall" |
|
|
|
class="home_informOverall box_2" |
|
|
|
style=" |
|
|
|
background: linear-gradient(180deg, #367fc4 0%, #1c52ad 100%); |
|
|
|
" |
|
|
|
@click="skip()" |
|
|
|
@top="moveToIndex(0)" |
|
|
|
@left="moveToIndex(1)" |
|
|
|
v-focusable |
|
|
|
> |
|
|
|
<img src="../assets/img/Frame02.png" alt="" /> |
|
|
|
<p style="width: 138px">雪亮工程</p> |
|
|
|
@ -59,21 +68,20 @@ |
|
|
|
</section> |
|
|
|
|
|
|
|
<section style="width: 304px" class="border"> |
|
|
|
<div class="scenic"> |
|
|
|
<div class="scenic box_3" v-focusable @up="moveToTop"> |
|
|
|
<p class="_overall" style="background-color: rgb(0 0 0 / 46%)"> |
|
|
|
文化宣传 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="publicity"> |
|
|
|
<div class="publicity box_4" v-focusable> |
|
|
|
<p class="_overall" style="background-color: rgb(0 0 0 / 53%)"> |
|
|
|
景区风采 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="box_section" @down="menuDown(item, $event)"> |
|
|
|
<div class="box_section box_5" v-focusable> |
|
|
|
<div |
|
|
|
class="information" |
|
|
|
v-focusable |
|
|
|
v-for="(item, index) in infoData" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
@ -97,15 +105,20 @@ |
|
|
|
<div style="display: flex"> |
|
|
|
<div style="text-align: center; margin-right: 20px"> |
|
|
|
<figure |
|
|
|
class="box_6" |
|
|
|
style=" |
|
|
|
background: linear-gradient(180deg, #e3b233 0%, #e17e22 100%); |
|
|
|
" |
|
|
|
v-focusable |
|
|
|
@up="moveToTop" |
|
|
|
> |
|
|
|
<img src="../assets/img/Vector01.png" /> |
|
|
|
<figcaption style="color: #ffffff">疫情防控</figcaption> |
|
|
|
</figure> |
|
|
|
|
|
|
|
<figure |
|
|
|
class="box_7" |
|
|
|
v-focusable |
|
|
|
style=" |
|
|
|
background: linear-gradient(180deg, #3db542 0%, #178636 100%); |
|
|
|
margin-top: 20px; |
|
|
|
@ -116,15 +129,15 @@ |
|
|
|
</figure> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
width: 218px; |
|
|
|
height: 364px; |
|
|
|
border: solid red; |
|
|
|
border-radius: 10px; |
|
|
|
" |
|
|
|
></div> |
|
|
|
style="width: 218px; height: 364px; border-radius: 10px" |
|
|
|
class="right_rotation box_8" |
|
|
|
v-focusable |
|
|
|
@up="moveToTop" |
|
|
|
> |
|
|
|
<img src="../assets/img/01.png" alt="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right_section"> |
|
|
|
<div class="right_section box_9" v-focusable> |
|
|
|
<div class="right_sectionBox"> |
|
|
|
<div class="right_sectionNest"> |
|
|
|
<p>剑阁县推广大豆＋玉米兼容发展 “一地双丰收”模式</p> |
|
|
|
@ -134,27 +147,27 @@ |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</article> |
|
|
|
|
|
|
|
<div v-if="active === 1">111</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
// import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"; |
|
|
|
// import "swiper/css/swiper.css"; |
|
|
|
export default { |
|
|
|
name: "Home", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
active: 0, |
|
|
|
navData: [ |
|
|
|
{ name: "首页" }, |
|
|
|
{ name: "农民夜校" }, |
|
|
|
{ name: "慢直播" }, |
|
|
|
{ name: "党建引领" }, |
|
|
|
{ name: "资讯服务" }, |
|
|
|
{ name: "办事指南" }, |
|
|
|
{ name: "我的服务" }, |
|
|
|
{ name: "首页", index: 0 }, |
|
|
|
{ name: "农民夜校", index: 1 }, |
|
|
|
{ name: "慢直播", index: 2 }, |
|
|
|
{ name: "党建引领", index: 3 }, |
|
|
|
{ name: "资讯服务", index: 4 }, |
|
|
|
{ name: "办事指南", index: 5 }, |
|
|
|
{ name: "我的服务", index: 6 }, |
|
|
|
], |
|
|
|
infoData: [ |
|
|
|
{ |
|
|
|
@ -177,34 +190,71 @@ export default { |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
// components: { |
|
|
|
// Swiper, |
|
|
|
// SwiperSlide, |
|
|
|
// directive, |
|
|
|
// }, |
|
|
|
|
|
|
|
created() { |
|
|
|
this.$nextTick(() => { |
|
|
|
console.log(this.$tv); |
|
|
|
this.$tv.reset(); |
|
|
|
this.$tv.setScrollEl(document.querySelector(".box_section")); |
|
|
|
// this.$tv.setScrollEl(this.$tv.getElementByPath('//div[@class="demo"]')); |
|
|
|
// this.$tv.requestFocus(this.$refs.fo5); |
|
|
|
this.$tv.focusClassName = "box_focusable"; // 选中的class |
|
|
|
// this.$tv.init({ distanceToCenter: true }); // 焦点居中 |
|
|
|
// this.$tv.setScrollEl(document.querySelector(".home_nav")); // 设置滚动的div |
|
|
|
// this.$tv.setScrollEl(this.$tv.getElementByPath('//div[@class="nav_li"]')); // 初始化div聚焦 |
|
|
|
}); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$tv.requestFocus(document.querySelector(`.tab_nav_0`)); |
|
|
|
}, |
|
|
|
|
|
|
|
destroyed() { |
|
|
|
// 由于设置的全局的init，为了不影响别的界面交互，销毁的时候，init里面的数据重置成全局的数据 |
|
|
|
this.$tv.resetScrollEl(); |
|
|
|
// this.$tv.distanceToCenter = false; |
|
|
|
// 组件销毁，重置distanceToCenter的默认值，默认：false |
|
|
|
this.$tv.init({ distanceToCenter: false }); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
menuDown(item) { |
|
|
|
// console.log(item,event); |
|
|
|
//在最下面一个menu按下，焦点不动，避免右边内容item自动聚焦 |
|
|
|
// if (item == 10) { |
|
|
|
// this.$tv.requestFocus(event.target); |
|
|
|
// } |
|
|
|
// 点击跳转 |
|
|
|
skip() { |
|
|
|
this.$router.push({ path: "/homeInfo" }); |
|
|
|
}, |
|
|
|
|
|
|
|
navFocus(index) { |
|
|
|
// console.log(index); |
|
|
|
this.active = index; |
|
|
|
}, |
|
|
|
|
|
|
|
navRight(index, event) { |
|
|
|
console.log(index, event); |
|
|
|
if (index == this.navData.length - 1) { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.active = index; |
|
|
|
this.$tv.requestFocus(document.querySelector(`.tab_nav_${index + 1}`)); |
|
|
|
// console.log(this.active); |
|
|
|
}, |
|
|
|
|
|
|
|
navLeft(index) { |
|
|
|
if (index <= 0) { |
|
|
|
return; |
|
|
|
} else { |
|
|
|
this.active = index; |
|
|
|
this.$tv.requestFocus(document.querySelector(`.tab_nav_${index - 1}`)); |
|
|
|
} |
|
|
|
// console.log(event.target, "left"); |
|
|
|
console.log(this.active); |
|
|
|
}, |
|
|
|
|
|
|
|
navDown() { |
|
|
|
this.$tv.requestFocus(document.querySelector(`.box_0`)); |
|
|
|
}, |
|
|
|
|
|
|
|
// 拿到对应calss |
|
|
|
moveToIndex(index) { |
|
|
|
this.$tv.requestFocus(document.querySelector(`.box_${index}`)); |
|
|
|
}, |
|
|
|
|
|
|
|
moveToTop() { |
|
|
|
this.$tv.requestFocus( |
|
|
|
this.$tv.requestFocus(document.querySelector(`.tab_nav_0`)), |
|
|
|
false |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
@ -231,11 +281,18 @@ p { |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
// 边框样式 |
|
|
|
.box_focusable { |
|
|
|
transform: scale(1.04); |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
border: solid #FFA564; |
|
|
|
} |
|
|
|
|
|
|
|
// 轮播图 |
|
|
|
.home_slideshow { |
|
|
|
width: 520px; |
|
|
|
height: 390px; |
|
|
|
border: solid red; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
// 通知信息 |
|
|
|
@ -366,5 +423,12 @@ figure { |
|
|
|
font-size: 14px; |
|
|
|
line-height: 1.6; |
|
|
|
} |
|
|
|
|
|
|
|
.focus { |
|
|
|
transform: scale(1.2); |
|
|
|
border: 2px solid red; |
|
|
|
box-shadow: 0 0 20px red; |
|
|
|
font-size: 28px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
lillillli
3 years ago
