feat:点击查看图片

ZhangXianQiang

2024-02-29 b0a100049a8b54463519c53c06c6a10e64de95ab

feat:点击查看图片

 package-lock.json

@@ -19,6 +19,7 @@
        "mockjs": "^1.1.0",
        "pinia": "^2.1.6",
        "swiper": "^11.0.7",
        "viewerjs": "^1.11.6",
        "vue": "^3.3.4",
        "vue-echarts": "^6.6.1",
        "vue-router": "^4.2.5"
@@ -3562,6 +3563,11 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
    "node_modules/viewerjs": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.6.tgz",
      "integrity": "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw=="
    },
    "node_modules/vite": {
      "version": "4.4.11",
      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",

 package.json

@@ -21,6 +21,7 @@
    "mockjs": "^1.1.0",
    "pinia": "^2.1.6",
    "swiper": "^11.0.7",
    "viewerjs": "^1.11.6",
    "vue": "^3.3.4",
    "vue-echarts": "^6.6.1",
    "vue-router": "^4.2.5"

 src/main.ts

@@ -7,6 +7,7 @@
import '@/assets/css/main.scss'
import '@/assets/css/tailwind.css'
import 'swiper/swiper-bundle.css';
import 'viewerjs/dist/viewer.css';

import {registerEcharts} from "@/plugins/echarts"
//不使用mock 请注释掉

 src/views/daoAnOffice/right/danger/imageSwiper.vue

@@ -2,9 +2,9 @@
  <div class="swiper_button mr-1" @click="prevSwiper">
    <img :src="leftIcon" class="">
  </div>
  <Swiper :slides-per-view="3" :space-between="18" class="image_swiper" @swiper="setSwiper">
    <SwiperSlide v-for="(slide, index) in imageList" :key="index" class="image_slide">
      <img :src="slide" class="item_img">
  <Swiper :slides-per-view="3" :space-between="18" class="image_swiper" @swiper="setSwiper" >
    <SwiperSlide v-for="(slide, index) in imageList" :key="index" class="image_slide" >
      <img :src="slide" class="item_img" @click="imageClick">
    </SwiperSlide>
  </Swiper>

@@ -14,12 +14,14 @@
</template>

<script setup>
import Viewer from 'viewerjs';
import { Swiper, SwiperSlide } from 'swiper/vue';
import leftIcon from '@/assets/img/icon/arrow_left.png';
import rightIcon from '@/assets/img/icon/arrow_right.png';

import { defineProps,ref } from 'vue';

const imgView = null;
const swiperRef = ref(null);
const props = defineProps({
  imageList: {
@@ -36,6 +38,10 @@

 const nextSwiper = () => {
  swiperRef.value.slideNext();
 }

 const imageClick = (event) => {
  new Viewer(event.target);
 }

</script>
@@ -55,6 +61,7 @@
  display: block;
  height: 100%;
  object-fit: fill;
  cursor: pointer;
}

.swiper_button {

 src/views/index/index.vue

@@ -10,7 +10,7 @@
import RightTop1 from "./right-top2.vue";

import RightCenter from "./right-center.vue";

import RightBottom from "./right-bottom.vue";

import chart2 from "./chart2.vue";

// import chart2 from "./chart2.vue";

import BorderBox13 from "@/components/datav/border-box-13";

const config = {

  header: ['<span style="color:#42C3E8;font-size: 16px">排名</span>', '<span style="color:#42C3E8;font-size: 16px">行政区划</span>','<span style="color:#42C3E8;font-size: 16px">数值</span>'],