fix:修改柱状图提示框样式

ZhangXianQiang

2024-03-08 2aa1d87680e9351bf027bab73f61290b7f00efe4

 src/views/daoAnOffice/right/publicize/index.vue

@@ -43,11 +43,20 @@
<script setup>
import { require } from '@/utils/require.js';

import Test1 from '@/assets/img/test_img/t4.jpg';
import Test2 from '@/assets/img/test_img/t5.jpg';
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([
@@ -60,37 +69,41 @@
    itemIndex: 1,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    unit: '全国交通安全日',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: require('@/assets/img/test_img/t4.jpg'),
    image: Test1,
    video: video1
  },
  {
    itemIndex: 2,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    unit: '冬季交安宣传忙 营造文明出行好氛围',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: require('@/assets/img/test_img/t5.jpg'),
    image: Test2,
    video: video2
  },
  {
    itemIndex: 3,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    unit: '高速交警强化宣传提示 确保春运交通安全',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: require('@/assets/img/test_img/t6.jpg'),
    image: Test3,
    video: video1
  },
  {
    itemIndex: 4,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    unit: '云哨警示风险自纠',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: require('@/assets/img/test_img/t7.jpg'),
    image: Test4,
    video: video2
  },
]);

@@ -99,9 +112,12 @@
  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 = () => {
@@ -125,6 +141,7 @@
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
  font-family: 'PingFang SC';
}

.select-active {
@@ -149,6 +166,7 @@
  width: 279px;
  flex-shrink: 0;
  cursor: pointer;
  font-family: 'PingFang SC';
  // margin-bottom: 24px;
}