feat: museum

src/router/index.js

@@ -3,7 +3,7 @@ import LoginTemp from '../views/LoginTemp.vue'
 import AboutView from '../views/about/AboutView.vue'
 import HomeView from '../views/HomeView.vue'
 import CityOfXishan from '../views/CityOfXishan.vue'
-import MuseumView from '../views/MuseumView.vue'
+import MuseumView from '../views/MuseumView/MuseumView.vue'
 import CloudSchool from '../views/CloudSchool.vue'
 import SquareView from '../views/SquareView.vue'
 import LoveForest from '../views/LoveForest.vue'

src/views/MuseumView/MuseumView.vue

@@ -0,0 +1,225 @@
+<template>
+  <div
+    ref="museumRef"
+    class="museum-view"
+  >
+    <el-carousel
+      v-if="swiperHeight"
+      ref="swiperRef"
+      class="museum-view-swiper"
+      trigger="click"
+      :height="swiperHeight"
+      arrow="never"
+      indicator-position="none"
+      :autoplay="false"
+    >
+      <el-carousel-item
+        v-for="item in LIST"
+        :key="item.label"
+      >
+        <el-image
+          :src="item.img"
+          fit="cover"
+          draggable="false"
+        />
+      </el-carousel-item>
+    </el-carousel>
+
+    <div class="museum-view-indicator">
+      <div
+        v-for="(item, idx) in LIST"
+        :key="item.label"
+        class="museum-view-indicator__item"
+        :class="{
+          active: idx === activeIndex
+        }"
+        @click="onClickSceneItem(item)"
+        @mouseover="handleSwiper(idx)"
+      >
+        <h3>{{ item.label }}</h3>
+        <p>{{ item.subLabel }}</p>
+        <span :class="item.tagType">{{ item.tag }}</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- <IframeWrap
+    v-if="showIframe"
+    class="iframe-wrap"
+    :url="iframeUrl"
+    :need-back-btn="true"
+    @back="showIframe = false"
+  /> -->
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+// import IframeWrap from '@/components/IframeWrap.vue'
+import Img1 from './images/bg-min.jpg'
+import Img2 from './images/bg02-min.jpg'
+
+const LIST = [
+  {
+    img: Img1,
+    label: '永锡不匮',
+    subLabel: '无锡慈善的传承与创新',
+    tag: '查看详情',
+    tagType: 'blue',
+    url: 'https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:93'
+  },
+  {
+    img: Img2,
+    label: '薪火鸿模',
+    subLabel: '鸿模小学历史文化',
+    tag: '专题展览',
+    tagType: 'yellow',
+    url: 'https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-2e4SwPKzjZz&firstView=pano:16'
+  },
+  {
+    img: Img1,
+    label: '文教春秋',
+    subLabel: '荡口慈善文化与教育',
+    tag: '专题展览',
+    tagType: 'yellow',
+    url: 'https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:670'
+  },
+  {
+    img: Img2,
+    label: '慈·善',
+    subLabel: '从手到心的给予',
+    tag: '主题临展',
+    tagType: 'blue',
+    url: 'https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:465'
+  },
+]
+
+const activeIndex = ref(0)
+const museumRef = ref()
+const swiperRef = ref()
+const swiperHeight = computed(() => museumRef.value ? museumRef.value.clientHeight + 'px' : '')
+
+const handleSwiper = (idx) => {
+  activeIndex.value = idx
+  if (swiperRef.value) {
+    swiperRef.value.setActiveItem(idx)
+  }
+}
+
+// const iframeUrl = ref('')
+// const showIframe = ref(false)
+
+function onClickSceneItem(item) {
+  window.open(item.url)
+  // iframeUrl.value = item.url
+  // showIframe.value = true
+}
+</script>
+
+<style lang="less" scoped>
+.museum-view {
+  position: relative;
+  height: 100%;
+
+  &-swiper {
+    .el-image {
+      width: 100%;
+      height: 100%;
+
+      :deep(img) {
+        object-position: left bottom;
+      }
+    }
+  }
+  &-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    width: 336px;
+    z-index: var(--el-index-top);
+
+    &__item {
+      flex: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 30px;
+      width: 100%;
+      cursor: pointer;
+      color: white;
+      background-color: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(10px);
+      transition: all linear .2s;
+
+      &.active {
+        width: 356px;
+        background: #589498;
+
+        span {
+          line-height: 28px;
+          background: none !important;
+        }
+        span.blue {
+          border: 1px solid #FFFFFF;
+        }
+        span.yellow {
+          color: #FFE794;
+          border: 1px solid #FFE794;
+        }
+      }
+      h3 {
+        font-size: 48px;
+        font-weight: bold;
+        font-family: 'Source Han Serif CN';
+      }
+      p {
+        margin: 10px 0 20px;
+        font-size: 18px;
+        font-weight: bold;
+        font-family: 'Source Han Serif CN';
+      }
+      span {
+        display: block;
+        width: 112px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        font-size: 16px;
+
+        &.blue {
+          background: #589498;
+        }
+        &.yellow {
+          color: #9C6D42;
+          background: #FFE794;
+        }
+      }
+      &:not(:last-child) {
+        border-bottom: 1px solid #D9D9D9;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: url('./images/01-min.png') no-repeat right bottom / cover;
+      }
+      &:nth-child(2)::after {
+        background-image: url('./images/02-min.png');
+      }
+      &:nth-child(3)::after {
+        background-image: url('./images/03-min.png');
+      }
+      &:nth-child(4)::after {
+        background-image: url('./images/04-min.png');
+      }
+    }
+  }
+}
+</style>