ZDKKC/zdkkc/src/views/Detail/detailPage.vue

<script setup lang='ts'>
import { useStore } from '@/stores';
import { baseURl } from '@/utils/https';

const store = useStore();
// stereoscopic-立体图  plane-平面图
const mode = ref(store.dataAll.modeList[0])

const curInfoPart = ref({} as any)
const router = useRouter()

const goScenefu = () => {
  if (curInfoPart.value.name != '救生艇') {
    store.mode = mode.value;
    store.currentInfoPart = curInfoPart.value;
  }

  router.push({
    path: '/scene',
    query: {
      code: curInfoPart.value.sceneCode
    }
  })
}

const onSelectfu = (item: any) => {
  mode.value = store.dataAll.modeList[1]
  curInfoPart.value = item
  item.name === '救生艇' ? goScenefu() : ''
}

onMounted(() => {
  if (Object.keys(store.mode).length != 0) {
    mode.value = store.mode
  }
  if (Object.keys(store.currentInfoPart).length != 0) {
    curInfoPart.value = store.currentInfoPart
  }
})

</script>

<template>
  <div class='detail'>
    <img class="logo-icon" src="@/assets/images/logoS.png" alt="">
    <div class="menu-box">
      <img src="@/assets/images/menu.png" alt="">
      <div class="title" v-for="item in store.dataAll.modeList" :key="item.name"
        :class="{ 'stereoscopic': item.name == 'stereoscopic', 'activeTitle': mode.name == item.name }"
        @click="() => { mode = item, curInfoPart = {} as any }">{{ item.title }}</div>
      <div class="plane-list" :class="{ 'activePlane': mode.name == 'plane' }">
        <div class="plane-left">
          <div :class="{ 'active': curInfoPart.name == item.name }" v-for="item in store.dataAll.modeList[1].content"
            :key="item.name" @click="onSelectfu(item)">{{
              item.number }}</div>
        </div>
        <div class="plane-right">
          <div :class="{ 'active': curInfoPart.name == item.name }" v-for="item in store.dataAll.modeList[1].content"
            :key="item.name" @click="onSelectfu(item)">
            {{
              item.name }}</div>
        </div>
      </div>
    </div>
    <div class="main">

      <img class="img3d" v-show="Object.keys(curInfoPart).length == 0" :src="`${baseURl}/${mode.name}/${mode.mainBody}`"
        alt="">
      <div class="main-box" v-show="Object.keys(curInfoPart).length > 0"
        :style="{ backgroundImage: `url(${baseURl}/${mode.name}/${curInfoPart.mainBody})`, backgroundSize: '100% 100%' }">
        <img :style="{ position: 'absolute' }" v-show="Object.keys(curInfoPart).length > 0 && curInfoPart.name != '救生艇'"
          :src="`${baseURl}/${mode.name}/${curInfoPart.heilight}`" alt="">

        <!-- 介绍框 -->
        <div class="info-box" v-if="Object.keys(curInfoPart).length > 0 && curInfoPart.name != '救生艇'">
          <div class="title">
            {{ curInfoPart.number + curInfoPart.name }}
          </div>
          <div class="bottom-part">
            <img style="cursor: pointer;" @click="goScenefu()" :src="`${baseURl}/${mode.name}/pic${curInfoPart.id}.png`"
              alt="">
            <div class="disc">{{ curInfoPart.info }}</div>
          </div>
        </div>
      </div>
      <!-- <img v-show="Object.keys(curInfoPart).length > 0" :src="`${baseURl}/${mode.name}/${curInfoPart.mainBody}`" alt=""> -->


      <!-- 指引 -->
      <div class="guide" :style="{ top: curInfoPart.guideP.top, left: curInfoPart.guideP.left }"
        v-if="Object.keys(curInfoPart).length > 0 && curInfoPart.name != '救生艇'">
        <img class="hot" :style="{ top: curInfoPart.hotP.top, left: curInfoPart.hotP.left }" @click="goScenefu()"
          src="@/assets/images/hot.png" alt="">
        <img class="line"
          :style="{ width: curInfoPart.lineP.width, height: curInfoPart.lineP.height, left: curInfoPart.lineP.left }"
          :src="`${baseURl}/${mode.name}/line${curInfoPart.id}.png`" alt="">
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.detail {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/images/bg.png);
  background-size: 100% 100%;

  .logo-icon {
    position: absolute;
    left: 4%;
    top: 12%;
    width: 22vw;
  }

  .menu-box {
    position: fixed;
    right: 2vw;
    z-index: 2;
    width: 15vw;
    height: 70vh;

    @media screen and (max-width: 1560px) {
      width: 20vw;
    }

    img {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .stereoscopic {
      top: 8.5vh !important;
    }

    .activeTitle {
      color: #FFEFDA !important;
      text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);

      div {
        color: white;
      }
    }

    .title {
      width: 100%;
      text-align: center;
      padding-left: 8%;
      color: #351301;
      font-family: 'REEJI-DuoguanGB-free-Flash';
      font-size: 1.6em;
      position: absolute;
      white-space: nowrap;
      // left: 50%;
      // transform: translateX(120%);
      top: 20vh;
      cursor: pointer;
    }

    .plane-list {
      width: 100%;
      position: absolute;
      top: 26vh;
      color: #CECECE;
      font-size: 1em;
      letter-spacing: 2px;
      transform: translateX(7%);
      white-space: nowrap;
      line-height: 40px;
      display: flex;
      justify-content: center;

      .plane-left {
        text-align: right;

        .active {
          color: #E7C395;
          background: #911212;
        }

        div {
          cursor: pointer;
          padding-right: 5px;
        }
      }

      .plane-right {
        text-align: left;

        .active {
          color: #E7C395;
          background: #911212;
        }


        div {
          cursor: pointer;
        }
      }
    }

    .activePlane {
      color: white;
    }
  }

  .main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .img3d {
      margin-left: -10%;
      width: 80%;

      @media screen and (max-width: 1560px) {
        width: 75%;
      }
    }

    .main-box {
      width: 70%;
      height: 75%;
      position: relative;
      top: 50px;
      margin-left: -10%;

      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }




    .info-box {
      width: 20vw;
      height: 15vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: url(@/assets/images/infobg.png);
      background-size: 100% 100%;
      position: absolute;
      top: -2vh;
      right: 10%;
      z-index: 2;

      .title {
        width: 70%;
        height: 8%;
        background: url(@/assets/images/title-bg.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #E8B478;
        font-family: 'SourceHanSansCN-Bold';
        font-size: 1em;
        margin-bottom: 10px;

      }

      .bottom-part {
        width: 90%;
        height: 70%;
        display: flex;
        align-items: center;

        img {
          width: 45%;
          object-fit: contain;
          // height: 100%;
        }

        .disc {
          color: rgba(255, 255, 255, 0.842);
          letter-spacing: 2px;
          font-size: 0.9em;
          // line-height: 28px;
          max-height: 90%;
          overflow: auto;
          margin-left: 10px;
          margin-top: 10px;
        }

        ::-webkit-scrollbar {
          width: 5px;
          /* 设置滚动条宽度 */
          height: 5px;
          /* 对于垂直滚动条的高度，也可以使用此属性 */
          background-color: #f5f5f531;
          /* 背景颜色 */
          border-radius: 5px;
          /* 边角圆角 */
        }

        /* 定义滚动条拖动柄（滑块）样式 */
        ::-webkit-scrollbar-thumb {
          background-color: #E8B478;
          /* 滑块的颜色 */
          border-radius: 5px;
          /* 可选，给滑块添加边框 */
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          /* 可选，给滑块添加阴影效果 */
        }
      }

    }

    .guide {
      position: absolute;
      // top: 20%;
      // left: 40%;

      .hot {
        width: 100px;
        position: absolute;
        z-index: 2;
        cursor: pointer;
      }

      .line {
        position: absolute;
        // width: 20vw;
        // margin-left: -20%;
      }
    }
  }
}
</style>