WuxiCharityMuseum/src/views/HomeView.vue

<template>
  <div
    class="home"
  >
    <div class="left">
      <div class="title">
        <h2>其他遗存</h2>
        <div class="deco-line-1" />
        <div class="deco-line-2" />
      </div>
      <ul>
        <li
          v-for="item in otherRelicList"
          :key="item.id"
          @click="activeOtherRelicData = item, isShowOtherRelicDetail = true"
        >
          <img
            class=""
            :src="`${$env.VUE_APP_DEPLOY_ORIGIN}${item.thumb}`"
            alt=""
            draggable="false"
          >
          <div class="right">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="desc">
              {{ item.description }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div
      ref="centerRef"
      class="center"
    >
      <div
        class="img-list-wrap"
        :style="{
          width: imgWrapSize + 'px',
          height: imgWrapSize + 'px',
        }"
      >
        <img
          v-for="(item, idx) in hotRelicList"
          v-show="activeAreaIdx === -1 || areaList[activeAreaIdx] === item.belongArea"
          :key="item.name + '-pos-in-map'"
          class="pos-in-map"
          :class="{
            active: activeHotRelicIdx === idx,
          }"
          :src="activeHotRelicIdx !== idx ? require('@/assets/images/icon_pos_in_map.png') : require('@/assets/images/icon_pos_in_map-active.png')"
          alt=""
          draggable="false"
          :style="{
            left: item.xInMap,
            top: item.yInMap,
          }"
          @click="activeHotRelicIdx = idx"
        >
        <img
          v-for="(item, idx) in hotRelicList"
          v-show="(activeAreaIdx === -1 || areaList[activeAreaIdx] === item.belongArea) && (idx !== activeHotRelicIdx)"
          :key="item.name + '-no-color'"
          class="no-color"
          :src="require(`@/assets/images/relic-drawings/${item.imgName}.png`)"
          alt=""
          draggable="false"
          :style="{
            left: `${(item.x + item.widthNoColor / 2) / 734 * 100}%`,
            top: `${(item.y + item.heightNoColor / 2) / 734 * 100}%`,
            width: `${item.widthNoColor / 734 * 100}%`,
            height: `${item.heightNoColor / 734 * 100}%`,
          }"
          @click="activeHotRelicIdx = idx"
        >
        <img
          v-for="(item, idx) in hotRelicList"
          v-show="(activeAreaIdx === -1 || areaList[activeAreaIdx] === item.belongArea) && (idx === activeHotRelicIdx)"
          :key="item.name + 'colorful'"
          class="colorful"
          :src="require(`@/assets/images/relic-drawings/${item.imgName}上色.png`)"
          alt=""
          draggable="false"
          :style="{
            left: `${(item.x + item.widthNoColor / 2) / 734 * 100}%`,
            top: `${(item.y + item.heightNoColor / 2) / 734 * 100}%`,
            width: `${item.widthColorful / 734 * 100}%`,
            height: `${item.heightColorful / 734 * 100}%`,
          }"
        >
      </div>
    </div>
    <div class="right">
      <div
        class="relic-detail"
      >
        <div class="top-bar">
          <h3 :title="activeHotRelicDetail?.name">
            {{ activeHotRelicDetail?.name }}
          </h3>
          <div class="btn-wrap">
            <!-- <button class="pano"/> -->
            <button
              class="vr"
              @click="onClickHotRelicSceneEntry"
            />
          </div>
        </div>
        <div class="splitter" />
        <div class="text">
          {{ activeHotRelicDetail?.description }}
        </div>
        <img
          class=""
          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}${activeHotRelicDetail?.thumb}`"
          alt=""
          draggable="false"
        >
      </div>
      <div class="relic-detail-shadow" />
      <menu
        class="area-list"
        :class="{
          hide: !isShowAreaList
        }"
      >
        <button
          v-for="(item, idx) in areaList"
          :key="idx"
          :class="{
            active: idx === activeAreaIdx,
          }"
          @click="onClickArea(idx)"
        >
          {{ item }}
        </button>
      </menu>
      <button
        class="area-list-switch"
        :class="{
          active: isShowAreaList
        }"
        @click="isShowAreaList = !isShowAreaList"
      >
        分类
        <img
          class=""
          src="@/assets/images/icon_arrow-half.png"
          alt=""
          draggable="false"
        >
      </button>
      <button
        class="search"
        @click="isShowRelicSearch = true"
      >
        搜索
        <img
          class=""
          src="@/assets/images/icon_search.png"
          alt=""
          draggable="false"
        >
      </button>
    </div>
    <img
      class="decoration-bottom"
      src="@/assets/images/home-bottom-bg.png"
      alt=""
      draggable="false"
    >
    <button
      class="arrow-down"
      @click="router.push({
        name: 'CityOfXishan',
      })"
    />

    <OtherRelicDetail
      v-if="isShowOtherRelicDetail"
      :data="activeOtherRelicData"
      @close="isShowOtherRelicDetail = false, activeOtherRelicData = {}"
    />

    <RelicSearch
      v-if="isShowRelicSearch"
      @close="onSearchViewClose"
    />

    <IframeWrap
      v-if="isShowIframeWrap"
      :url="iframeUrl"
      @back="isShowIframeWrap = false, iframeUrl = ''"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, watchEffect, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { useElementSize } from '@vueuse/core'
import OtherRelicDetail from '@/components/OtherRelicDetail.vue'
import RelicSearch from '@/components/RelicSearch.vue'
import IframeWrap from '@/components/IframeWrap.vue'
import { getRelicList } from '@/api.js'

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

// 运营埋点
store.dispatch('recordPageVisitIfNeeded', {
  pageId: 1,
})

const otherRelicList = ref([])
getRelicList().then((res) => {
  otherRelicList.value = res
})
const isShowOtherRelicDetail = ref(false)
const activeOtherRelicData = ref({})


const centerRef = ref(null)
const { width: centerWidth, height: centerHeight } = useElementSize(centerRef)
const imgWrapSize = ref(0)
watchEffect(() => {
  if (centerHeight.value - window.innerHeight * 0.1 < 0) {
    return
  }
  if (centerWidth.value > (centerHeight.value - window.innerHeight * 0.1)) {
    imgWrapSize.value = centerHeight.value - window.innerHeight * 0.1
  } else {
    imgWrapSize.value = centerWidth.value
  }
})

const hotRelicList = ref([
  {
    x: 634,
    y: 305,
    widthNoColor: 129,
    heightNoColor: 81,
    widthColorful: 169,
    heightColorful: 101,
    imgName: '6竺西书院',
    photoName: '6竺西书院.jpg',
    xInMap: '45.7%',
    yInMap: '55%',
    belongArea: '宜兴市',
    name: '竺西书院',
  },
  {
    x: 651,
    y: 391,
    widthNoColor: 84,
    heightNoColor: 48,
    widthColorful: 84,
    heightColorful: 48,
    imgName: '14宝界桥',
    photoName: '14宝界桥.webp',
    xInMap: '58.5%',
    yInMap: '47%',
    belongArea: '滨湖区',
    name: '宝界桥',
  },
  {
    x: 619,
    y: 428,
    widthNoColor: 52,
    heightNoColor: 72,
    widthColorful: 52,
    heightColorful: 72,
    imgName: '9祝大椿故居',
    photoName: '9祝大椿故居.webp',
    xInMap: '62%',
    yInMap: '47%',
    belongArea: '梁溪区',
    name: '祝大椿故居',
  },
  {
    x: 620,
    y: 516,
    widthNoColor: 90,
    heightNoColor: 36,
    widthColorful: 94,
    heightColorful: 64,
    imgName: '3尚仁初级商科职业学校',
    photoName: '3尚仁初级商科职业学校.webp',
    xInMap: '60.5%',
    yInMap: '27.5%',
    belongArea: '江阴市',
    name: '尚仁初级商科职业学校',
  },
  {
    x: 562,
    y: 540,
    widthNoColor: 78,
    heightNoColor: 66,
    widthColorful: 82,
    heightColorful: 66,
    imgName: '23怀海义庄',
    photoName: '23怀海义庄上色.webp',
    xInMap: '71%',
    yInMap: '50%',
    belongArea: '新吴区',
    name: '怀海义庄',
  },
  {
    x: 504,
    y: 587,
    widthNoColor: 48,
    heightNoColor: 87,
    widthColorful: 63,
    heightColorful: 87,
    imgName: '7坎宫救熄会',
    photoName: '7坎宫救熄会.jpg',
    xInMap: '61%',
    yInMap: '47.5%',
    belongArea: '梁溪区',
    name: '坎宫救熄会',
  },
  {
    x: 397,
    y: 644,
    widthNoColor: 88,
    heightNoColor: 54,
    widthColorful: 97,
    heightColorful: 54,
    imgName: '13大公图书馆',
    photoName: '13大公图书馆.jpg',
    xInMap: '57.5%',
    yInMap: '45%',
    belongArea: '滨湖区',
    name: '大公图书馆',
  },
  {
    x: 314,
    y: 630,
    widthNoColor: 65,
    heightNoColor: 83,
    widthColorful: 66,
    heightColorful: 86,
    imgName: '11惠山古镇',
    photoName: '11惠山古镇.png',
    xInMap: '60%',
    yInMap: '43.5%',
    belongArea: '梁溪区',
    name: '慈善大讲堂（惠山古镇）',
  },
  {
    x: 211,
    y: 636,
    widthNoColor: 87,
    heightNoColor: 49,
    widthColorful: 112,
    heightColorful: 73,
    imgName: '4善卷洞',
    photoName: '4善卷洞.webp',
    xInMap: '27.5%',
    yInMap: '63%',
    belongArea: '宜兴市',
    name: '善卷洞',
  },
  {
    x: 140,
    y: 597,
    widthNoColor: 52,
    heightNoColor: 68,
    widthColorful: 54,
    heightColorful: 70,
    imgName: '19徐氏义庄（查桥）',
    photoName: '19徐氏义庄（查桥）.jpg',
    xInMap: '65.5%',
    yInMap: '43%',
    belongArea: '锡山区',
    name: '徐氏义庄（查桥）',
  },
  {
    x: 27,
    y: 547,
    widthNoColor: 109,
    heightNoColor: 53,
    widthColorful: 109,
    heightColorful: 72,
    imgName: '16华氏老义庄',
    photoName: '16华氏老义庄.webp',
    xInMap: '75.5%',
    yInMap: '48%',
    belongArea: '锡山区',
    name: '华氏老义庄',
  },
  {
    x: 47,
    y: 473,
    widthNoColor: 50,
    heightNoColor: 68,
    widthColorful: 79,
    heightColorful: 88,
    imgName: '21李金镛故居',
    photoName: '21李金镛故居.webp',
    xInMap: '58.5%',
    yInMap: '39%',
    belongArea: '惠山区',
    name: '李金镛故居',
  },
  {
    x: -9,
    y: 385,
    widthNoColor: 97,
    heightNoColor: 75,
    widthColorful: 99,
    heightColorful: 78,
    imgName: '8公花园',
    photoName: '8公花园.jpg',
    xInMap: '60.5%',
    yInMap: '45%',
    belongArea: '梁溪区',
    name: '公花园',
  },
  {
    x: -32,
    y: 334,
    widthNoColor: 129,
    heightNoColor: 37,
    widthColorful: 133,
    heightColorful: 73,
    imgName: '20唐氏花厅',
    photoName: '20唐氏花厅.png',
    xInMap: '73%',
    yInMap: '42%',
    belongArea: '锡山区',
    name: '唐氏花厅',
  },
  {
    x: 8,
    y: 248,
    widthNoColor: 85,
    heightNoColor: 61,
    widthColorful: 85,
    heightColorful: 61,
    imgName: '12市慈善总会',
    photoName: '12市慈善总会.jpg',
    xInMap: '59%',
    yInMap: '43.5%',
    belongArea: '梁溪区',
    name: '慈善展示馆（市慈善总会）',
  },
  {
    x: 59,
    y: 204,
    widthNoColor: 56,
    heightNoColor: 49,
    widthColorful: 68,
    heightColorful: 60,
    imgName: '5洑溪徐氏宗祠（现名：徐大宗祠）',
    photoName: '5洑溪徐氏宗祠（现名：徐大宗祠）.png',
    xInMap: '32%',
    yInMap: '60%',
    belongArea: '宜兴区',
    name: '洑溪徐氏宗祠（现名：徐大宗祠）',
  },
  {
    x: 65,
    y: 136,
    widthNoColor: 95,
    heightNoColor: 47,
    widthColorful: 95,
    heightColorful: 52,
    imgName: '110匡村中学旧址',
    photoName: '110匡村中学旧址.png',
    xInMap: '53%',
    yInMap: '40%',
    belongArea: '惠山区',
    name: '匡园（匡村中学旧址）',
  },
  {
    x: 141,
    y: 83,
    widthNoColor: 74,
    heightNoColor: 56,
    widthColorful: 91,
    heightColorful: 70,
    imgName: '15钱伟长旧居',
    photoName: '15钱伟长旧居.jpg',
    xInMap: '74.5%',
    yInMap: '47%',
    belongArea: '锡山区',
    name: '钱伟长旧居',
  },
  {
    x: 202,
    y: 54,
    widthNoColor: 72,
    heightNoColor: 42,
    widthColorful: 72,
    heightColorful: 53,
    imgName: '18徐义庄（荡口）',
    photoName: '18徐义庄（荡口）.jpg',
    xInMap: '74%',
    yInMap: '46.5%',
    belongArea: '锡山区',
    name: '徐义庄（荡口）',
  },
  {
    x: 282,
    y: 27,
    widthNoColor: 51,
    heightNoColor: 57,
    widthColorful: 68,
    heightColorful: 61,
    imgName: '109景云楼',
    photoName: '109景云楼.png',
    xInMap: '71%',
    yInMap: '26%',
    belongArea: '江阴市',
    name: '景云楼',
  },
  {
    x: 343,
    y: 49,
    widthNoColor: 67,
    heightNoColor: 40,
    widthColorful: 67,
    heightColorful: 41,
    imgName: '108炎黄陈列馆',
    photoName: '108炎黄陈列馆上色.webp',
    xInMap: '68%',
    yInMap: '32%',
    belongArea: '江阴市',
    name: '炎黄陈列馆',
  },
  {
    x: 427,
    y: 36,
    widthNoColor: 60,
    heightNoColor: 61,
    widthColorful: 61,
    heightColorful: 61,
    imgName: '22村前公立蒙学堂',
    photoName: '22村前公立蒙学堂.png',
    xInMap: '60%',
    yInMap: '36.5%',
    belongArea: '惠山区',
    name: '村前公立蒙学堂',
  },
  {
    x: 492,
    y: 80,
    widthNoColor: 86,
    heightNoColor: 86,
    widthColorful: 86,
    heightColorful: 86,
    imgName: '24周新镇',
    photoName: '24周新镇.jpg',
    xInMap: '60.5%',
    yInMap: '50%',
    belongArea: '经开区',
    name: '周新镇',
  },
  {
    x: 553,
    y: 137,
    widthNoColor: 109,
    heightNoColor: 40,
    widthColorful: 109,
    heightColorful: 72,
    imgName: '17襄义庄',
    photoName: '17襄义庄.jpg',
    xInMap: '74%',
    yInMap: '49%',
    belongArea: '锡山区',
    name: '襄义庄',
  },
  {
    x: 603,
    y: 186,
    widthNoColor: 53,
    heightNoColor: 68,
    widthColorful: 56,
    heightColorful: 71,
    imgName: '10施子祠',
    photoName: '10施子祠.webp',
    xInMap: '59%',
    yInMap: '43.5%',
    belongArea: '梁溪区',
    name: '慈善展示馆（惠山古镇施子祠）',
  },
  {
    x: 655,
    y: 238,
    widthNoColor: 80,
    heightNoColor: 56,
    widthColorful: 80,
    heightColorful: 56,
    imgName: '1缪氏义庄',
    photoName: '1缪氏义庄.jpg',
    xInMap: '71%',
    yInMap: '31%',
    belongArea: '江阴市',
    name: '缪氏义庄',
  },
])
const activeHotRelicIdx = ref(0)
const activeHotRelicDetail = ref(null)
watch(activeHotRelicIdx, (v) => {
  getRelicList(hotRelicList.value[v].name).then((res) => {
    activeHotRelicDetail.value = res[0]
  })
}, {
  immediate: true,
})
function onClickHotRelicSceneEntry() {
  // 运营埋点
  store.dispatch('recordPageVisitIfNeeded', {
    pageId: activeHotRelicDetail.value.id,
  })
  iframeUrl.value = activeHotRelicDetail.value?.link, isShowIframeWrap.value = true
}

const isShowAreaList = ref(true)
const areaList = ref([
  '江阴市',
  '宜兴市',
  '梁溪区',
  '锡山区',
  '惠山区',
  '滨湖区',
  '新吴区',
  '经开区'
])
const activeAreaIdx = ref(-1)
function onClickArea(idx) {
  if (activeAreaIdx.value === idx) {
    activeAreaIdx.value = -1
  } else {
    activeAreaIdx.value = idx
    if (activeHotRelicDetail.value.region !== areaList.value[activeAreaIdx.value]) {
      activeHotRelicIdx.value = hotRelicList.value.findIndex((item) => {
        return item.belongArea === areaList.value[activeAreaIdx.value]
      })
    }
  }
}

const isShowRelicSearch = ref(false)
function onSearchViewClose(relicData) {
  isShowRelicSearch.value = false
  if (relicData) {
    activeOtherRelicData.value = relicData
    isShowOtherRelicDetail.value = true
  }
}

const isShowIframeWrap = ref(false)
const iframeUrl = ref('')
</script>

<style lang="less" scoped>
.home {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  >.left{
    flex: 0 0 auto;
    width: 370px;
    display: flex;
    flex-direction: column;
    padding-top: 5vh;
    padding-bottom: 11vh;
    position: relative;
    z-index: 1;
    >.title{
      flex: 0 0 auto;
      margin-bottom: 22px;
      >h2{
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 24px;
        color: #589498;
        line-height: 28px;
        margin-bottom: 4px;
      }
      >.deco-line-1{
        height: 2px;
        width: 67px;
        background: #589498;
      }
      >.deco-line-2{
        height: 2px;
        background: linear-gradient( 90deg, #589498 0%, rgba(88,148,152,0) 100%);
      }
    }
    >ul{
      flex: 1 0 1px;
      overflow: auto;
      padding-right: 22px;
      &::-webkit-scrollbar { background: transparent; width: 2px; height: 0; }
      &::-webkit-scrollbar-thumb { background: #589498; opacity: 0.5; }
      >li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 29px;
        cursor: pointer;
        >img{
          flex: 0 0 auto;
          width: 39px;
          height: 39px;
          box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.25);
          border-radius: 50%;
          border: 2px solid #FFFFFF;
          margin-right: 13px;
        }
        >.right{
          flex: 0 0 auto;
          width: 300px;
          >.name{
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 16px;
            color: #589498;
            line-height: 19px;
            overflow: hidden;
            white-space: pre;
            text-overflow: ellipsis;
          }
          >.desc{
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #589498;
            line-height: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  >.center{
    flex: 1 1 auto;
    min-width: 300px;
    max-width: 800px;
    padding-bottom: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    >.img-list-wrap{
      background-image: url(@/assets/images/home-center-img-wrap-bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: relative;
      >img.pos-in-map{
        position: absolute;
        transform: translate(-50%, -50%);
        width: calc(15 / 734 * 100%);
        height: calc(22 / 734 * 100%);
        transform-origin: center bottom;
        cursor: pointer;
        &.active{
          transform: translate(-50%, -50%) scale(1.5);
          z-index: 1;
        }
      }
      >img.no-color{
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        transform: translate(-50%, -50%);
        cursor: pointer;
      }
      >img.colorful{
        position: absolute;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
      }
    }
  }
  >.right{
    flex: 0 0 auto;
    width: 420px;
    padding-top: 5vh;
    padding-bottom: 18vh;
    position: relative;
    z-index: 1;
    >.relic-detail{
      position: relative;
      width: 406px;
      height: 375px;
      background: #ddebe9;
      border-radius: 10px 0 10px 0;
      z-index: 1;
      padding: 18px 26px 16px 26px;
      margin-bottom: 5vh;
      >.top-bar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        >h3{
          width: calc(100% - 80px);
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: bold;
          font-size: 20px;
          color: #589498;
          line-height: 23px;
          overflow: hidden;
          white-space: pre;
          text-overflow: ellipsis;
        }
        >.btn-wrap{
          >button.pano{
            width: 33px;
            height: 33px;
            margin-right: 11px;
            background-image: url(@/assets/images/icon_panorama.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
          }
          >button.vr{
            width: 33px;
            height: 33px;
            background-image: url(@/assets/images/icon_vr.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
          }
        }
      }
      >.splitter{
        margin-top: 13px;
        margin-bottom: 13px;
        border-bottom: 1px dashed #589498;
      }
      >.text{
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #589498;
        line-height: 20px;
        text-indent: 2em;
        height: 91px;
        overflow: auto;
        padding-right: 0.5em;
        margin-bottom: 10px;
        &::-webkit-scrollbar { background: transparent; width: 2px; height: 0; }
        &::-webkit-scrollbar-thumb { background: #589498; opacity: 0.5; }
      }
      >img{
        width: 351px;
        height: 175px;
        object-fit: cover;
      }
    }
    >.relic-detail-shadow{
      position: absolute;
      top: calc(5vh + 12px);
      left: 12px;
      width: 406px;
      height: 375px;
      border-radius: 10px 0 10px 0;
      border: 1px solid #FFFFFF;
      z-index: 0;
    }
    >menu.area-list{
      margin-bottom: 2vh;
      width: 384px;
      margin-left: auto;
      &.hide{
        opacity: 0;
        pointer-events: none;
      }
      >button{
        margin-left: 10px;
        margin-bottom: 10px;
        width: 86px;
        height: 39px;
        border-radius: 53px 53px 53px 53px;
        border: 1px solid #589498;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #589498;
        line-height: 16px;
        &.active{
          color: #fff;
          background-color: #589498;
        }
      }
    }
    >button.search, button.area-list-switch{
      display: block;
      width: 375px;
      height: 67px;
      margin-left: auto;
      margin-bottom: 2vh;
      border: 1px solid;
      border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(88, 148, 152, 1)) 1 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 20px;
      color: #589498;
      line-height: 23px;
      &.active{
        background: linear-gradient( 90deg, rgba(88,148,152,0) 0%, #589498 100%);
        border: none;
        font-weight: bold;
        color: #FFFFFF;
      }
      >img{
        width: 20px;
        margin-left: 12px;
        margin-right: 24px;
      }
    }
  }
  >.decoration-bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 26%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
  }
  >.arrow-down{
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translate(-50%, 0);
    width: 50px;
    height: 50px;
    background-image: url(@/assets/images/icon_arrow-down.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 5;
  }
}
</style>