lillillli
3 years ago
25 changed files with 18702 additions and 11830 deletions
@ -0,0 +1,3 @@ |
|||
> 1% |
|||
last 2 versions |
|||
not dead |
|||
File diff suppressed because it is too large
@ -1,44 +1,25 @@ |
|||
{ |
|||
"name": "vue-tv-focusable", |
|||
"version": "0.1.0", |
|||
"name": "vue-tv-focusable-demo", |
|||
"version": "0.1.1", |
|||
"private": true, |
|||
"scripts": { |
|||
"serve": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"lint": "vue-cli-service lint" |
|||
"build": "vue-cli-service build" |
|||
}, |
|||
"dependencies": { |
|||
"core-js": "^3.8.3", |
|||
"vue": "^2.6.14", |
|||
"vue-tv-focusable": "^1.0.8" |
|||
"axios": "^0.26.1", |
|||
"core-js": "^3.6.5", |
|||
"swiper": "^8.0.7", |
|||
"vue": "^2.6.11", |
|||
"vue-router": "^3.2.0", |
|||
"vue-tv-focusable": "^1.0.7" |
|||
}, |
|||
"devDependencies": { |
|||
"@babel/core": "^7.12.16", |
|||
"@babel/eslint-parser": "^7.12.16", |
|||
"@vue/cli-plugin-babel": "~5.0.0", |
|||
"@vue/cli-plugin-eslint": "~5.0.0", |
|||
"@vue/cli-service": "~5.0.0", |
|||
"eslint": "^7.32.0", |
|||
"eslint-plugin-vue": "^8.0.3", |
|||
"vue-template-compiler": "^2.6.14" |
|||
}, |
|||
"eslintConfig": { |
|||
"root": true, |
|||
"env": { |
|||
"node": true |
|||
}, |
|||
"extends": [ |
|||
"plugin:vue/essential", |
|||
"eslint:recommended" |
|||
], |
|||
"parserOptions": { |
|||
"parser": "@babel/eslint-parser" |
|||
}, |
|||
"rules": {} |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not dead" |
|||
] |
|||
"@vue/cli-plugin-babel": "^4.5.0", |
|||
"@vue/cli-service": "^4.5.0", |
|||
"less": "^3.0.4", |
|||
"less-loader": "^5.0.0", |
|||
"vue-loader": "^14.2.4", |
|||
"vue-template-compiler": "^2.6.11" |
|||
} |
|||
} |
|||
|
|||
@ -1,28 +1,37 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<img alt="Vue logo" src="./assets/logo.png"> |
|||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|||
<router-view /> |
|||
<Home /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HelloWorld from './components/HelloWorld.vue' |
|||
// import Home from "./views/home.vue"; |
|||
|
|||
export default { |
|||
name: 'App', |
|||
components: { |
|||
HelloWorld |
|||
} |
|||
} |
|||
name: "App", |
|||
|
|||
|
|||
created() {}, |
|||
methods: { |
|||
// go(path) { |
|||
// this.$router.push({ path: path }); |
|||
// setTimeout(() => { |
|||
// location.reload(); |
|||
// }, 100); |
|||
// }, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
<style lang="less"> |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
margin: auto; |
|||
} |
|||
#app { |
|||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
text-align: center; |
|||
color: #2c3e50; |
|||
margin-top: 60px; |
|||
width: 1280px; |
|||
height: 720px; |
|||
} |
|||
</style> |
|||
|
|||
|
After Width: | Height: | Size: 645 B |
|
After Width: | Height: | Size: 862 B |
|
After Width: | Height: | Size: 896 B |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 376 B |
|
After Width: | Height: | Size: 386 B |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
@ -1,58 +1,15 @@ |
|||
<template> |
|||
<div class="hello"> |
|||
<h1>{{ msg }}</h1> |
|||
<p> |
|||
For a guide and recipes on how to configure / customize this project,<br> |
|||
check out the |
|||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|||
</p> |
|||
<h3>Installed CLI Plugins</h3> |
|||
<ul> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|||
</ul> |
|||
<h3>Essential Links</h3> |
|||
<ul> |
|||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|||
</ul> |
|||
<h3>Ecosystem</h3> |
|||
<ul> |
|||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|||
</ul> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HelloWorld', |
|||
props: { |
|||
msg: String |
|||
} |
|||
name: 'Title', |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
list-style-type: none; |
|||
padding: 0; |
|||
} |
|||
li { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
<style scoped lang="less"> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<div |
|||
style="display: flex; width: 410px; align-items: center; line-hegin: 1.8" |
|||
> |
|||
<p style="font-size: 44px; width: 110px; padding-right: 25px"> |
|||
{{ nowDate }} |
|||
</p> |
|||
<div |
|||
style=" |
|||
width: 95px; |
|||
text-align: center; |
|||
border-left: solid; |
|||
border-right: solid; |
|||
padding: 0 21px; |
|||
" |
|||
> |
|||
<p>{{ time }}</p> |
|||
<p style="margin-left: 30px">{{ nowWeek }}</p> |
|||
</div> |
|||
<div style="display: flex; width: 140px"> |
|||
<img src="../assets/img/1.png" alt="" /> |
|||
<div> |
|||
<p>{{ high }}-{{ low }}</p> |
|||
<div style="display: flex"> |
|||
<p style="flex: 1">剑阁</p> |
|||
<p>{{ currentWeather.type }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "TimeComponent", |
|||
data() { |
|||
return { |
|||
nowDate: "", // 当前日期 |
|||
time: "", // 年月日 |
|||
nowWeek: "", |
|||
currentWeather: {}, //当前天气 |
|||
high: "", |
|||
low: "", |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.currentTime(); |
|||
}, |
|||
|
|||
created() { |
|||
return this.$axios |
|||
.get("http://wthrcdn.etouch.cn/weather_mini?city=剑阁") |
|||
.then((response) => { |
|||
// console.log(response.data.data); |
|||
this.currentWeather = response.data.data.yesterday; |
|||
this.high = this.currentWeather.high.slice(3); |
|||
this.low = this.currentWeather.low.slice(3); |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
}, |
|||
methods: { |
|||
currentTime() { |
|||
setInterval(this.formatDate, 500); |
|||
}, |
|||
formatDate() { |
|||
let date = new Date(); |
|||
let year = date.getFullYear(); // 年 |
|||
let month = date.getMonth() + 1; // 月 |
|||
let day = date.getDate(); // 日 |
|||
let week = date.getDay(); // 星期 |
|||
let weekArr = [ |
|||
"星期日", |
|||
"星期一", |
|||
"星期二", |
|||
"星期三", |
|||
"星期四", |
|||
"星期五", |
|||
"星期六", |
|||
]; |
|||
let hour = date.getHours(); // 时 |
|||
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零 |
|||
let minute = date.getMinutes(); // 分 |
|||
minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零 |
|||
let second = date.getSeconds(); // 秒 |
|||
second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零 |
|||
this.nowDate = ` ${hour}:${minute}`; |
|||
this.time = `${year}-${month}-${day}`; |
|||
this.nowWeek = weekArr[week]; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped lang="less"> |
|||
</style> |
|||
@ -1,9 +1,32 @@ |
|||
import Vue from 'vue' |
|||
import App from './App.vue' |
|||
import focusable from 'vue-tv-focusable'; |
|||
import router from './router' |
|||
import axios from "axios" |
|||
import focusable from 'vue-tv-focusable' |
|||
Vue.use(focusable); |
|||
import TimeComponent from "@/components/TimeComponent.vue"; |
|||
|
|||
|
|||
|
|||
Vue.config.productionTip = false |
|||
Vue.prototype.$axios = axios |
|||
Vue.component("TimeComponent", TimeComponent); //注册组件
|
|||
|
|||
|
|||
// 全局配置，可写可不写，不做配置的情况下就使用vue-tv-focusable默认的配置
|
|||
const vm = new Vue(); |
|||
|
|||
vm.$tv.init({ |
|||
KEYS: { |
|||
KEY_LEFT: [37], // ←
|
|||
KEY_UP: [38], // ↑
|
|||
KEY_RIGHT: [39], // →
|
|||
KEY_DOWN: [40], // ↓
|
|||
KEY_ENTER: [83, 13], // 83: s键 13：enter键
|
|||
}, |
|||
|
|||
}); |
|||
new Vue({ |
|||
render: h => h(App), |
|||
router, |
|||
render: h => h(App) |
|||
}).$mount('#app') |
|||
|
|||
@ -0,0 +1,83 @@ |
|||
import Vue from 'vue' |
|||
import VueRouter from 'vue-router' |
|||
|
|||
Vue.use(VueRouter) |
|||
|
|||
const routes = [ |
|||
{ |
|||
path: '/', |
|||
name: 'Home', |
|||
component: () => import(/* webpackChunkName: "about" */ '../views/home.vue') |
|||
}, |
|||
{ |
|||
path: '/HomeInfo', |
|||
name: 'HomeInfo', |
|||
component: () => import(/* webpackChunkName: "about" */ '../views/homeInfo.vue') |
|||
}, |
|||
// {
|
|||
// path: '/Example1',
|
|||
// name: 'Example1',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example1.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example2',
|
|||
// name: 'Example2',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example2.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example3',
|
|||
// name: 'Example3',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example3.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example4',
|
|||
// name: 'Example4',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example4.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example5',
|
|||
// name: 'Example5',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example5.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example6',
|
|||
// name: 'Example6',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example6.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example8',
|
|||
// name: 'Example8',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example8.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/tv-detail8',
|
|||
// name: 'tvDetail8',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example8-detail.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example9',
|
|||
// name: 'Example9',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example9.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example10',
|
|||
// name: 'Example10',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example10.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example11',
|
|||
// name: 'Example11',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example11.vue')
|
|||
// },
|
|||
// {
|
|||
// path: '/Example12',
|
|||
// name: 'Example12',
|
|||
// component: () => import(/* webpackChunkName: "about" */ '../views/example12.vue')
|
|||
// },
|
|||
] |
|||
|
|||
const router = new VueRouter({ |
|||
routes |
|||
}) |
|||
|
|||
export default router |
|||
@ -0,0 +1,43 @@ |
|||
// 获取IE版本
|
|||
export const IEVersion = () => { |
|||
// 取得浏览器的userAgent字符串
|
|||
const userAgent = navigator.userAgent; |
|||
// 判断是否为小于IE11的浏览器
|
|||
const isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; |
|||
// 判断是否为IE的Edge浏览器
|
|||
const isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11; |
|||
// 判断是否为IE11浏览器
|
|||
const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1; |
|||
if (isLessIE11) { |
|||
const IEReg = new RegExp('MSIE (\\d+\\.\\d+);'); |
|||
// 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！
|
|||
IEReg.test(userAgent); |
|||
// 取正则表达式中第一个小括号里匹配到的值
|
|||
const IEVersionNum = parseFloat(RegExp['$1']); |
|||
if (IEVersionNum === 7) { |
|||
// IE7
|
|||
return 7 |
|||
} else if (IEVersionNum === 8) { |
|||
// IE8
|
|||
return 8 |
|||
} else if (IEVersionNum === 9) { |
|||
// IE9
|
|||
return 9 |
|||
} else if (IEVersionNum === 10) { |
|||
// IE10
|
|||
return 10 |
|||
} else { |
|||
// IE版本<7
|
|||
return 6 |
|||
} |
|||
} else if (isEdge) { |
|||
// edge
|
|||
return 'edge' |
|||
} else if (isIE11) { |
|||
// IE11
|
|||
return 11 |
|||
} else { |
|||
// 不是ie浏览器
|
|||
return -1 |
|||
} |
|||
} |
|||
@ -0,0 +1,370 @@ |
|||
|
|||
<template> |
|||
<div class="ancestor"> |
|||
<!-- header --> |
|||
<div style="color: #ffffff; display: flex; height: 92px"> |
|||
<div style="width: 50%; flex: 1"> |
|||
<img src="../assets/img/title.png" alt="" /> |
|||
</div> |
|||
<TimeComponent /> |
|||
</div> |
|||
<!-- 导航栏 --> |
|||
<nav style="width: 100%; height: 70px"> |
|||
<ul> |
|||
<li |
|||
v-for="(item, index) in navData" |
|||
:class="{ nav_li: active === index }" |
|||
:key="index" |
|||
> |
|||
{{ item.name }} |
|||
</li> |
|||
</ul> |
|||
</nav> |
|||
|
|||
<article 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> |
|||
<div class="home_inform"> |
|||
<div |
|||
class="home_informOverall" |
|||
style=" |
|||
background: linear-gradient(180deg, #32b3c5 0%, #2f948e 100%); |
|||
" |
|||
> |
|||
<img src="../assets/img/Frame01.png" alt="" /> |
|||
<p style="width: 138px">通知信息</p> |
|||
</div> |
|||
<div |
|||
class="home_informOverall" |
|||
style=" |
|||
background: linear-gradient(180deg, #367fc4 0%, #1c52ad 100%); |
|||
" |
|||
> |
|||
<img src="../assets/img/Frame02.png" alt="" /> |
|||
<p style="width: 138px">雪亮工程</p> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section style="width: 304px" class="border"> |
|||
<div class="scenic"> |
|||
<p class="_overall" style="background-color: rgb(0 0 0 / 46%)"> |
|||
文化宣传 |
|||
</p> |
|||
</div> |
|||
<div class="publicity"> |
|||
<p class="_overall" style="background-color: rgb(0 0 0 / 53%)"> |
|||
景区风采 |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="box_section" @down="menuDown(item, $event)"> |
|||
<div |
|||
class="information" |
|||
v-focusable |
|||
v-for="(item, index) in infoData" |
|||
:key="index" |
|||
> |
|||
<p |
|||
style=" |
|||
width: 164px; |
|||
height: 51px; |
|||
margin-right: 8px; |
|||
font-size: 12px; |
|||
color: #ffffff; |
|||
" |
|||
> |
|||
{{ item.info }} |
|||
</p> |
|||
<img :src="item.print" alt="" style="width: 96px; height: 66px" /> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section style="width: 356px" class="border"> |
|||
<div style="display: flex"> |
|||
<div style="text-align: center; margin-right: 20px"> |
|||
<figure |
|||
style=" |
|||
background: linear-gradient(180deg, #e3b233 0%, #e17e22 100%); |
|||
" |
|||
> |
|||
<img src="../assets/img/Vector01.png" /> |
|||
<figcaption style="color: #ffffff">疫情防控</figcaption> |
|||
</figure> |
|||
|
|||
<figure |
|||
style=" |
|||
background: linear-gradient(180deg, #3db542 0%, #178636 100%); |
|||
margin-top: 20px; |
|||
" |
|||
> |
|||
<img src="../assets/img/Vector02.png" /> |
|||
<figcaption style="color: #ffffff">我的村组</figcaption> |
|||
</figure> |
|||
</div> |
|||
<div |
|||
style=" |
|||
width: 218px; |
|||
height: 364px; |
|||
border: solid red; |
|||
border-radius: 10px; |
|||
" |
|||
></div> |
|||
</div> |
|||
<div class="right_section"> |
|||
<div class="right_sectionBox"> |
|||
<div class="right_sectionNest"> |
|||
<p>剑阁县推广大豆＋玉米兼容发展 “一地双丰收”模式</p> |
|||
<p style="color: #798190">2022年03月11日 11:35</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</article> |
|||
</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: "我的服务" }, |
|||
], |
|||
infoData: [ |
|||
{ |
|||
info: "近日，剑阁县龙源镇纪委联合镇疫情防控领导专班深入场镇干单位、村（社区）开展疫...", |
|||
print: require("../assets/img/Rectangle2221.png"), |
|||
}, |
|||
{ |
|||
info: "近日，剑阁县龙源镇纪委联合镇疫情防控领导专班深入场镇干单位、村（社区）开展疫...", |
|||
print: require("../assets/img/Rectangle2221.png"), |
|||
}, |
|||
{ |
|||
info: "近日，剑阁县龙源镇纪委联合镇疫情防控领导专班深入场镇干单位、村（社区）开展疫...", |
|||
print: require("../assets/img/Rectangle2221.png"), |
|||
}, |
|||
], |
|||
swiperList: [ |
|||
{ url: require("../assets/img/bg.png") }, |
|||
{ url: require("../assets/img/bg.png") }, |
|||
{ url: require("../assets/img/bg.png") }, |
|||
], |
|||
}; |
|||
}, |
|||
// 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); |
|||
}); |
|||
}, |
|||
|
|||
destroyed() { |
|||
// 由于设置的全局的init，为了不影响别的界面交互，销毁的时候，init里面的数据重置成全局的数据 |
|||
this.$tv.resetScrollEl(); |
|||
// this.$tv.distanceToCenter = false; |
|||
}, |
|||
|
|||
methods: { |
|||
menuDown(item) { |
|||
// console.log(item,event); |
|||
//在最下面一个menu按下，焦点不动，避免右边内容item自动聚焦 |
|||
// if (item == 10) { |
|||
// this.$tv.requestFocus(event.target); |
|||
// } |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="less"> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
|
|||
.ancestor { |
|||
background: url("../assets/img/bg.png"); |
|||
width: 1280px; |
|||
height: 720px; |
|||
padding: 0px 32px 32px 32px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.home_article { |
|||
width: 100%; |
|||
height: 511px; |
|||
margin-top: 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
// 轮播图 |
|||
.home_slideshow { |
|||
width: 520px; |
|||
height: 390px; |
|||
border: solid red; |
|||
border-radius: 10px; |
|||
} |
|||
// 通知信息 |
|||
.home_inform { |
|||
width: 520px; |
|||
color: #ffffff; |
|||
font-size: 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 20px; |
|||
justify-content: space-between; |
|||
} |
|||
.home_informOverall { |
|||
width: 250px; |
|||
height: 99px; |
|||
display: flex; |
|||
align-items: center; |
|||
border-radius: 10px; |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
ul { |
|||
line-height: 70px; |
|||
color: #798190; |
|||
font-size: 18px; |
|||
display: flex; |
|||
} |
|||
li { |
|||
width: 148px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.nav_li { |
|||
background: url("../assets/img/ray.png"); |
|||
color: #fff; |
|||
width: 148px; |
|||
height: 73px; |
|||
text-align: center; |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.border { |
|||
margin: 0; |
|||
height: 511px; |
|||
} |
|||
.information { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 67px; |
|||
margin-bottom: 16px; |
|||
} |
|||
.scenic { |
|||
position: relative; |
|||
width: 300px; |
|||
height: 128px; |
|||
border-radius: 10px; |
|||
background: url("../assets/img/Mask01.png"); |
|||
} |
|||
.publicity { |
|||
position: relative; |
|||
width: 300px; |
|||
height: 128px; |
|||
border-radius: 10px; |
|||
margin-top: 18px; |
|||
margin-bottom: 20px; |
|||
background: url("../assets/img/Mask02.png"); |
|||
} |
|||
// 文化宣传 |
|||
._overall { |
|||
color: aliceblue; |
|||
background-color: rgb(0 0 0 / 41%); |
|||
height: 40px; |
|||
width: 294px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
text-align: center; |
|||
line-height: 40px; |
|||
position: absolute; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
.box_section { |
|||
overflow: hidden; |
|||
width: 300px; |
|||
height: 221px; |
|||
box-sizing: border-box; |
|||
padding: 16px; |
|||
overflow-y: hidden; |
|||
border-radius: 10px; |
|||
background: linear-gradient(180deg, #163d7e 0%, #1d3256 100%); |
|||
} |
|||
figure { |
|||
width: 118px; |
|||
height: 172px; |
|||
line-height: 3; |
|||
padding-top: 35px; |
|||
box-sizing: border-box; |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.right_section { |
|||
width: 356px; |
|||
height: 125px; |
|||
border-radius: 10px; |
|||
margin-top: 20px; |
|||
background: url("../assets/img/Mask02.png"); |
|||
|
|||
//最后一个模块 |
|||
.right_sectionBox { |
|||
width: 100%; |
|||
height: 128px; |
|||
color: #ffffff; |
|||
background: linear-gradient( |
|||
270deg, |
|||
#163d7e 45%, |
|||
rgba(196, 196, 196, 0) 120.18% |
|||
); |
|||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
.right_sectionNest { |
|||
padding-left: 170px; |
|||
width: 154px; |
|||
height: 85px; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,260 @@ |
|||
<template> |
|||
<div class="ancestor"> |
|||
<div style="color: #ffffff; display: flex; height: 92px"> |
|||
<div style="width: 50%; flex: 1"> |
|||
<h1 style="font-size: 26px; font-weight: 400; margin-left: 53px"> |
|||
双旗村摄像头 |
|||
</h1> |
|||
</div> |
|||
<TimeComponent /> |
|||
</div> |
|||
|
|||
<div class="demo"> |
|||
<div class="menu"> |
|||
<!-- onFocus:聚焦 up:上 down:下 right:右 v-focusable--> |
|||
<div |
|||
@onFocus="menuFocus(i)" |
|||
@up="menuUp(i, $event)" |
|||
@down="menuDown(i, $event)" |
|||
@right="menuRight" |
|||
v-focusable |
|||
class="item" |
|||
v-for="i in list" |
|||
:key="i" |
|||
> |
|||
<div |
|||
style=" |
|||
display: flex; |
|||
height: 72px; |
|||
align-items: center; |
|||
color: #ffffff; |
|||
" |
|||
> |
|||
<div |
|||
style=" |
|||
font-size: 12px; |
|||
border: 1px solid; |
|||
width: 38px; |
|||
height: 19px; |
|||
margin-left: 46px; |
|||
margin-right: 24px; |
|||
" |
|||
> |
|||
{{ i.state == 0 ? "离线" : "在线" }} |
|||
</div> |
|||
<p style="margin-left: 0">{{ i.name }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-focusable class="content" v-for="index in contentCount" :key="index" @down="contentDown(index, $event)"> |
|||
<div |
|||
@onFocus="contentFocus" |
|||
@up="contentUp(index, $event)" |
|||
@down="contentDown(index, $event)" |
|||
@left="contentLeft(index)" |
|||
class="item" |
|||
v-focusable |
|||
> |
|||
<img |
|||
src="../assets/img/bg01.png" |
|||
alt="" |
|||
style="width: 865px; height: 480px;" |
|||
/> |
|||
</div> |
|||
<div class="contentInfo"> |
|||
{{ currentMenu }} |
|||
摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Example6", |
|||
data() { |
|||
return { |
|||
currentMenu: 0, |
|||
contentCount: 1, |
|||
list: [ |
|||
{ |
|||
id: 1, |
|||
name: "摄像头1", |
|||
state: 1, |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: "摄像头1", |
|||
state: 1, |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: "摄像头1", |
|||
state: 1, |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: "摄像头1", |
|||
state: 1, |
|||
}, |
|||
], |
|||
state: 0, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.$nextTick(() => { |
|||
this.$tv.requestFocus( |
|||
this.$tv.getElementByPath( |
|||
'//div[@class="demo"]/div[@class="menu"]/div[1]' |
|||
) |
|||
); |
|||
}); |
|||
}, |
|||
destroyed() { |
|||
// 为了不影响别的界面交互，销毁的时候，如果有全局的配置属性就重置成全局配置，没有全局配置的属性就重置成系统默认的配置 |
|||
this.$tv.reset(); |
|||
}, |
|||
methods: { |
|||
menuFocus(i) { |
|||
//切换滚动元素到menu |
|||
this.currentMenu = i; |
|||
this.$tv.setScrollEl(this.$tv.getElementByPath("//div[@class='menu']")); |
|||
}, |
|||
|
|||
contentFocus() { |
|||
//切换滚动元素到内容 |
|||
this.$tv.setScrollEl( |
|||
this.$tv.getElementByPath("//div[@class='content']") |
|||
); |
|||
}, |
|||
|
|||
menuUp(i, event) { |
|||
//在第一个menu按上，焦点不动 |
|||
if (i == 1) { |
|||
this.$tv.requestFocus(event.target); |
|||
} |
|||
}, |
|||
|
|||
menuDown(i, event) { |
|||
//在最下面一个menu按下，焦点不动，避免右边内容item自动聚焦 |
|||
if (i == 10) { |
|||
this.$tv.requestFocus(event.target); |
|||
} |
|||
}, |
|||
|
|||
menuRight() { |
|||
//从menu到内容时固定到内容的第一个元素 |
|||
this.$tv.requestFocus( |
|||
this.$tv.getElementByPath("//div[@class='content']/div[1]"), |
|||
false |
|||
); |
|||
}, |
|||
|
|||
contentDown(index, event) { |
|||
if (this.contentCount - index < 3) { |
|||
//如果是最后一行的内容,按下焦点不许动 |
|||
this.$tv.requestFocus(event.target); |
|||
} |
|||
console.log(event); |
|||
}, |
|||
|
|||
contentLeft(i) { |
|||
if (i % 3 == 1) { |
|||
//在第一列的内容上按左时，让当前menu的item聚焦 |
|||
this.$tv.requestFocus( |
|||
this.$tv.getElementByPath( |
|||
`//div[@class='menu']/div[${this.currentMenu}]` |
|||
), |
|||
false |
|||
); |
|||
} |
|||
}, |
|||
contentUp(index, event) { |
|||
if (index <= 3) { |
|||
this.$tv.requestFocus(event.target); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style lang="less" scoped> |
|||
.ancestor { |
|||
background: url("../assets/img/bg01.png"); |
|||
width: 1280px; |
|||
height: 720px; |
|||
padding: 0px 32px 32px 0px; |
|||
box-sizing: border-box; |
|||
} |
|||
.demo { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
flex-direction: row; |
|||
|
|||
.content { |
|||
width: 870px; |
|||
height: 600px; |
|||
// overflow: auto; |
|||
margin-left: 59px; |
|||
// background-color: bisque; |
|||
|
|||
.item { |
|||
width: 870px; |
|||
height: 488px; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
vertical-align: top; |
|||
border: solid red; |
|||
border-radius: 10px; |
|||
margin-bottom: 16px; |
|||
color: aliceblue; |
|||
} |
|||
|
|||
.contentInfo { |
|||
width: 870px; |
|||
height: 92px; |
|||
background: #ffffff12; |
|||
border-radius: 5.7px; |
|||
overflow: auto; |
|||
text-align: justify; |
|||
color: aliceblue; |
|||
padding: 16px 24px; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
|
|||
.menu { |
|||
width: 331px; |
|||
height: 580px; |
|||
overflow: hidden; |
|||
padding: 20px; |
|||
padding-top: 0px; |
|||
margin: 0px; |
|||
border-right: 1px solid #ffffff63; |
|||
padding-right: 0; |
|||
|
|||
.item { |
|||
width: 100%; |
|||
height: 72px; |
|||
box-sizing: border-box; |
|||
display: inline-block; |
|||
// background: rgba(255, 255, 255, 0.08); |
|||
// color: rgb(255, 165, 100); |
|||
margin-bottom: 8px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.focus { |
|||
// transform: scale(1); |
|||
font-size: 28px; |
|||
div, |
|||
p { |
|||
color: #ffa564; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,4 +1,12 @@ |
|||
const { defineConfig } = require('@vue/cli-service') |
|||
module.exports = defineConfig({ |
|||
transpileDependencies: true |
|||
}) |
|||
|
|||
module.exports = { |
|||
publicPath: "./", |
|||
configureWebpack: { |
|||
externals: { |
|||
'vue': 'Vue', |
|||
// 'element-ui': 'ELEMENT',
|
|||
// 'ant-design-vue':'antd',
|
|||
'moment': 'moment' |
|||
} |
|||
}, |
|||
} |
|||
Loading…
Reference in new issue