| | |
| | | import Test3 from '@/assets/img/test_img/t6.jpg'; |
| | | import Test4 from '@/assets/img/test_img/t7.jpg'; |
| | | |
| | | import video1 from '@/assets/video/video1.mp4'; |
| | | import video2 from '@/assets/video/video2.mp4'; |
| | | |
| | | |
| | | import RightTitle from "@/components/right-title"; |
| | | import { ref } from 'vue'; |
| | | |
| | | // 测试视频 |
| | | const testVideo = 'https://www.w3schools.com/html/movie.mp4'; |
| | | const testVideo = ref(''); |
| | | const isShowVideo = ref(false); |
| | | const videoDom = ref(null); |
| | | const selectItems = ref([ |
| | |
| | | itemIndex: 1, |
| | | time: '2023 12-12', |
| | | type: '道路隐患', |
| | | unit: '都江堰市公安局', |
| | | unit: '全国交通安全日', |
| | | rectTime: '2023-13-23', |
| | | state: '抢修中', |
| | | image: Test1, |
| | | video: video1 |
| | | }, |
| | | { |
| | | itemIndex: 2, |
| | | time: '2023 12-12', |
| | | type: '道路隐患', |
| | | unit: '都江堰市公安局', |
| | | unit: '冬季交安宣传忙 营造文明出行好氛围', |
| | | rectTime: '2023-13-23', |
| | | state: '抢修中', |
| | | image: Test2, |
| | | video: video2 |
| | | }, |
| | | { |
| | | itemIndex: 3, |
| | | time: '2023 12-12', |
| | | type: '道路隐患', |
| | | unit: '都江堰市公安局', |
| | | unit: '高速交警强化宣传提示 确保春运交通安全', |
| | | rectTime: '2023-13-23', |
| | | state: '抢修中', |
| | | image: Test3, |
| | | video: video1 |
| | | }, |
| | | { |
| | | itemIndex: 4, |
| | | time: '2023 12-12', |
| | | type: '道路隐患', |
| | | unit: '都江堰市公安局', |
| | | unit: '云哨警示风险自纠', |
| | | rectTime: '2023-13-23', |
| | | state: '抢修中', |
| | | image: Test4, |
| | | video: video2 |
| | | }, |
| | | ]); |
| | | |
| | |
| | | selectItem.isActive = true; |
| | | } |
| | | |
| | | const openVideo = () => { |
| | | const openVideo = (item) => { |
| | | isShowVideo.value = true; |
| | | videoDom.value.play(); |
| | | testVideo.value = item.video; |
| | | setTimeout(() => { |
| | | videoDom.value.play(); |
| | | },500); |
| | | } |
| | | |
| | | const closeVideo = () => { |
| | |
| | | border: 1px solid rgba(47, 91, 157, 0.8); |
| | | flex-shrink: 0; |
| | | color: #5B83BD; |
| | | font-family: 'PingFang SC'; |
| | | } |
| | | |
| | | .select-active { |
| | |
| | | width: 279px; |
| | | flex-shrink: 0; |
| | | cursor: pointer; |
| | | font-family: 'PingFang SC'; |
| | | // margin-bottom: 24px; |
| | | } |
| | | |