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", |
"name": "vue-tv-focusable-demo", |
||||
"version": "0.1.0", |
"version": "0.1.1", |
||||
"private": true, |
"private": true, |
||||
"scripts": { |
"scripts": { |
||||
"serve": "vue-cli-service serve", |
"serve": "vue-cli-service serve", |
||||
"build": "vue-cli-service build", |
"build": "vue-cli-service build" |
||||
"lint": "vue-cli-service lint" |
|
||||
}, |
}, |
||||
"dependencies": { |
"dependencies": { |
||||
"core-js": "^3.8.3", |
"axios": "^0.26.1", |
||||
"vue": "^2.6.14", |
"core-js": "^3.6.5", |
||||
"vue-tv-focusable": "^1.0.8" |
"swiper": "^8.0.7", |
||||
|
"vue": "^2.6.11", |
||||
|
"vue-router": "^3.2.0", |
||||
|
"vue-tv-focusable": "^1.0.7" |
||||
}, |
}, |
||||
"devDependencies": { |
"devDependencies": { |
||||
"@babel/core": "^7.12.16", |
"@vue/cli-plugin-babel": "^4.5.0", |
||||
"@babel/eslint-parser": "^7.12.16", |
"@vue/cli-service": "^4.5.0", |
||||
"@vue/cli-plugin-babel": "~5.0.0", |
"less": "^3.0.4", |
||||
"@vue/cli-plugin-eslint": "~5.0.0", |
"less-loader": "^5.0.0", |
||||
"@vue/cli-service": "~5.0.0", |
"vue-loader": "^14.2.4", |
||||
"eslint": "^7.32.0", |
"vue-template-compiler": "^2.6.11" |
||||
"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" |
|
||||
] |
|
||||
} |
} |
||||
|
|||||
@ -1,28 +1,37 @@ |
|||||
<template> |
<template> |
||||
<div id="app"> |
<div id="app"> |
||||
<img alt="Vue logo" src="./assets/logo.png"> |
<router-view /> |
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
<Home /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import HelloWorld from './components/HelloWorld.vue' |
// import Home from "./views/home.vue"; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'App', |
name: "App", |
||||
components: { |
|
||||
HelloWorld |
|
||||
} |
created() {}, |
||||
} |
methods: { |
||||
|
// go(path) { |
||||
|
// this.$router.push({ path: path }); |
||||
|
// setTimeout(() => { |
||||
|
// location.reload(); |
||||
|
// }, 100); |
||||
|
// }, |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style lang="less"> |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style: none; |
||||
|
margin: auto; |
||||
|
} |
||||
#app { |
#app { |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
width: 1280px; |
||||
-webkit-font-smoothing: antialiased; |
height: 720px; |
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
text-align: center; |
|
||||
color: #2c3e50; |
|
||||
margin-top: 60px; |
|
||||
} |
} |
||||
</style> |
</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> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: 'HelloWorld', |
name: 'Title', |
||||
props: { |
|
||||
msg: String |
|
||||
} |
|
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||
<style scoped> |
<style scoped lang="less"> |
||||
h3 { |
|
||||
margin: 40px 0 0; |
|
||||
} |
|
||||
ul { |
|
||||
list-style-type: none; |
|
||||
padding: 0; |
|
||||
} |
|
||||
li { |
|
||||
display: inline-block; |
|
||||
margin: 0 10px; |
|
||||
} |
|
||||
a { |
|
||||
color: #42b983; |
|
||||
} |
|
||||
</style> |
</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 Vue from 'vue' |
||||
import App from './App.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); |
Vue.use(focusable); |
||||
|
import TimeComponent from "@/components/TimeComponent.vue"; |
||||
|
|
||||
|
|
||||
|
|
||||
Vue.config.productionTip = false |
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({ |
new Vue({ |
||||
render: h => h(App), |
router, |
||||
|
render: h => h(App) |
||||
}).$mount('#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({ |
module.exports = { |
||||
transpileDependencies: true |
publicPath: "./", |
||||
}) |
configureWebpack: { |
||||
|
externals: { |
||||
|
'vue': 'Vue', |
||||
|
// 'element-ui': 'ELEMENT',
|
||||
|
// 'ant-design-vue':'antd',
|
||||
|
'moment': 'moment' |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
Loading…
Reference in new issue