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

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

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

// info-简介  construction-结构  scene-场景
const curMoudle = ref('')
const curInfoPart = ref({} as any)

const curSelect = ref({} as any)
const curMode = ref({} as any)

const isShowGuide = ref(false)

const goScenefu = () => {
  store.mode = curMode.value;
  store.currentInfoPart = curInfoPart.value;
  console.log(curInfoPart.value)
  router.push({
    path: '/scene',
    query: {
      code: curInfoPart.value.sceneCode
    }
  })
}


const isMobile = ref(false)

const isMobileDevice = () => {
  const mobileRegex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  return mobileRegex.test(navigator.userAgent);
}

const time =ref()


onMounted(() => {
  if (Object.keys(store.currentInfoPart).length != 0) {
    curInfoPart.value = store.currentInfoPart
  }
  curMoudle.value = 'construction'
  curMode.value = store.dataAll.modeList[0]
  isMobile.value = isMobileDevice()

 // 重新获取高度
  // @ts-ignore
  time.current = window.setTimeout(() => {
    // 根元素
    const dom: HTMLDivElement | null = document.querySelector("#app");
    if (dom && document.documentElement.clientWidth < 1000) {
      dom.style.height = document.documentElement.clientHeight + "px";
      dom.style.width = document.documentElement.clientWidth + "px";
    }
  }, 100);
})

</script>

<template>
  <div class='detail-page'
    :style="{ backgroundImage: Object.keys(curMode).length === 0 ? '' : `url(${baseURl}/${curMode.name}/${Object.keys(curSelect).length > 0 ? curSelect.id + '.png' : curMode.mainBody})` }">
    <!-- 功能区 -->
    <div class="logo-welcome" v-if="false">
      <div class="item" @click="curMoudle = 'info'">
        <div>{{ store.dataAll.info.name }}</div>
        <img :style="{ opacity: curMoudle == 'info' ? '1' : '' }" src="@/assets/images/begin-select.png" alt="">
      </div>
      <div class="item" @click="() => { curMoudle = 'construction', curMode = store.dataAll.modeList[0] }">
        <div>结构</div>
        <img :style="{ opacity: curMoudle == 'construction' ? '1' : '' }" src="@/assets/images/begin-select.png" alt="">
      </div>
      <div class="item" @click="() => {
        router.push('/scene')
      }">
        <div>场景</div>
        <img :style="{ opacity: curMoudle == 'scene' ? '1' : '' }" src="@/assets/images/begin-select.png" alt="">
      </div>
    </div>

    <!-- 简介弹框 -->
    <div class="info-box" v-show="curMoudle == 'info'">
      <img src="@/assets/images/close.png" @click="curMoudle = ''" alt="">
      <div class="title">{{ store.dataAll.info.content.title }}</div>
      <div class="disc">{{ store.dataAll.info.content.disc }}</div>
    </div>

    <!-- 结构相关样式 -->
    <div v-show="curMoudle == 'construction'" class="construction-box">
      <!-- 地图 -->
      <img class="img-map" src="@/assets/images/map.png" alt="">
      <!-- 左侧刻度 -->
      <img class="img-left" src="@/assets/images/left.png" alt="">
      <!-- 右侧刻度 -->
      <img class="img-right" src="@/assets/images/right.png" alt="">
      <!-- 底部渐变 -->
      <img class="img-bottom" src="@/assets/images/bottom.png" alt="">

      <!-- 船体列表 -->
      <div class="list-box"
        :style="{ backgroundImage: curSelect.name == '顶甲板' && !isMobile ? `url(${baseURl}/selectEnd.png)` : curSelect.name == '救生艇' && !isMobile ? `url(${baseURl}/selectLast.png)` : '' }">
        <div class="stereoscopic-box"
          @click="() => { curSelect = {}, curMode = store.dataAll.modeList[0], curInfoPart = {}, isShowGuide = false }">
          {{ store.dataAll.modeList[0].title }}
        </div>
        <div class="list-bottom">
          <!-- <img class="topAc" src="@/assets/images/topAc.png" alt="">
          <img class="bottomAc" src="@/assets/images/bottomAc.png" alt=""> -->

          <div class="list-item" :class="{ 'active': item.name == curSelect.name }"
            @click="() => { index === store.dataAll.modeList[1].content.length - 1 ? (curInfoPart = item, goScenefu()) : (curSelect = item, curMode = store.dataAll.modeList[1], curInfoPart = item, isShowGuide = true) }"
            v-for="(item, index) in store.dataAll.modeList[1].content" :key="item.id"
            :style="{ borderBottom: index == store.dataAll.modeList[1].content.length - 1 ? 'none' : '', background: (index == store.dataAll.modeList[1].content.length - 1 || index == 0) && !isMobile ? 'none' : '' }">
            {{ item.number + item.name }}
          </div>
        </div>
        <img v-show="isMobile" class="down-line" src="@/assets/images/down-line.png" alt="">
      </div>
      <!-- 信息框 -->
      <div class="info-box-detail" v-show="Object.keys(curSelect).length > 0 && isShowGuide">
        <img class="close-icon" @click="isShowGuide = false" src="@/assets/images/close.png" alt="">
        <div class="title">{{ curSelect.number + curSelect.name }}</div>
        <div class="line"></div>
        <div class="bottom-content">
          <div v-show="!isMobile">{{ curSelect.info }}</div>
          <img @click="goScenefu()" :src="`${baseURl}/plane/pic${curSelect.id}.png`" alt="">
          <div v-show="isMobile">{{ curSelect.info }}</div>
        </div>
      </div>
      <!-- 指引 -->
      <div class="guide-box" v-if="Object.keys(curSelect).length > 0 && curSelect.name != '救生艇'"
        :style="{ top: curInfoPart.guideP.top, left: curInfoPart.guideP.left }">
        <img v-show="isMobile ? true : isShowGuide" class="hot-icon"
          :style="{ top: curInfoPart.hotP.top, left: curInfoPart.hotP.left }" @click="goScenefu()"
          src="@/assets/images/hot.png" alt="">
        <img v-show="isShowGuide" class="line"
          :style="{ width: curInfoPart.lineP.width, height: curInfoPart.lineP.height, left: curInfoPart.lineP.left }"
          :src="`${baseURl}/plane/line${curSelect.id}.png`" alt="">
      </div>
    </div>
  </div>
</template>

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

  .logo-welcome {
    width: 40vw;
    height: 15vh;
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0vh;
    transform: translateX(-50%);
    cursor: pointer;
    background: url(@/assets/images/begin-bg2.png);
    background-size: 100% 100%;
    color: #FFFFFF;
    letter-spacing: 3px;
    text-shadow: 0px 4px 10px #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    padding-bottom: 15px;
    cursor: pointer;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 18%;
      margin-top: 24px;
      font-size: 0.9em;


      img {
        width: 100%;
        opacity: 0;
      }

    }
  }

  .info-box {
    width: 20vw;
    height: 100%;
    position: fixed;
    background: rgba(27, 27, 28, 0.8);
    box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    padding: 5% 2%;
    box-sizing: border-box;
    right: 0;

    img {
      width: 35px;
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }

    .title {
      text-align: center;
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 1.2em;
    }

    .disc {
      letter-spacing: 2px;
      font-size: 1em;
      text-indent: 2em;
      max-height: 100%;
      overflow: auto;
    }

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

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

  .construction-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;

    .img-map {
      position: absolute;
      left: 5%;
      top: 5%;

      @media screen and (max-width: 1000px) {
        left: 3vw;
        top: 0vh;
        width: 150px;
      }
    }

    .img-left {
      position: absolute;
      left: 26px;
      top: 50%;
      transform: translateY(-50%);

      @media screen and (max-width: 1000px) {
        width: 20px;
        left: 5px;
        height: 100%;
      }
    }

    .img-right {
      position: absolute;
      right: 26px;
      top: 50%;
      transform: translateY(-50%);

      @media screen and (max-width: 1000px) {
        width: 20px;
        right: 5px;
        height: 100%;
      }
    }

    .img-bottom {
      width: 100%;
      position: absolute;
      bottom: 0;
    }

    .list-box {
      width: 15vw;
      height: 62vh;
      background: url(@/assets/images/list-bg.png);
      background-size: 100% 100%;
      position: absolute;
      right: 8%;
      top: 20px;
      z-index: 10px;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 1%;
      box-sizing: border-box;

      @media screen and (max-width: 1000px) {
        width: 25vw;
        height: 98%;
        right: 1vw;
        top: 1%;
        background: url(@/assets/images/list-bg-mo.png);
        background-size: 100% 100%;
      }

      .stereoscopic-box {
        width: 100%;
        height: 10%;
        // background: rgba(0, 128, 0, 0.384);
        margin-top: 7%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1.4em;
        letter-spacing: 2px;
        cursor: pointer;

        @media screen and (max-width: 1000px) {
          font-size: 1.2em;
          margin-top: 4%;
        }
      }

      ::-webkit-scrollbar {
        width: 0;
      }

      .list-bottom {
        width: 100%;
        margin-top: 8%;
        height: 100%;
        // background: rgba(0, 128, 0, 0.384);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 1.4em;
        letter-spacing: 2px;
        position: relative;



        @media screen and (max-width: 1000px) {
          width: 25vw;
          height: 80%;
          overflow: auto;
          margin-bottom: 10%;
          margin-top: 8%;
        }

        .topAc {
          width: 100%;
          position: absolute;
        }

        .bottomAc {
          width: 93%;
          position: absolute;
          bottom: -4%;
        }

        .list-item {
          width: 70%;
          padding: 10px 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid rgba(0, 0, 0, 0.219);
          cursor: pointer;
          flex-basis: 20%;
          font-size: 0.7em;
          position: relative;
          z-index: 2;

          @media screen and (max-width: 1000px) {
            width: 90%;
            text-align: center;
          }
        }

        .active {
          background: #1286AB;
          border-bottom: none;
          width: 96%;
          font-weight: bold;

          @media screen and (max-width: 1000px) {
            width: 90%;
            background: url(@/assets/images/active-bg.png);
            background-size: 100% 100%;
          }
        }

      }

      .down-line {
        position: absolute;
        bottom: 10px;
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
      }
    }

    .info-box-detail {
      width: 20vw;
      // height: 20vh;
      background: rgba(27, 27, 28, 0.6);
      box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.3);
      border-radius: 4px 4px 4px 4px;
      position: absolute;
      top: 10%;
      right: 25%;
      padding: 20px 20px;
      z-index: 2;
      box-sizing: border-box;


      @media screen and (max-width: 1000px) {
        height: 70vh;
        right: 27%;
        top: 16%;
        padding: 0;
        width: 22vw;

      }

      .close-icon {
        width: 35px;
        height: 35px;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;

        @media screen and (max-width: 1000px) {
          width: 20px;
          height: 20px;
        }
      }

      .title {
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.2em;

        @media screen and (max-width: 1000px) {
          font-size: 0.8em;
          margin-top: 5px;
          padding-left: 10px;
          padding-top: 5px;
        }
      }

      .line {
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, rgba(63, 151, 188, 1), rgba(63, 151, 188, 0));
        margin: 10px 0;


      }

      .bottom-content {
        display: flex;
        color: white;

        @media screen and (max-width: 1000px) {
          flex-direction: column;
          padding: 0px 15px;
          overflow: auto;
          height: 50vh;
          // justify-content: center;
          align-items: center;
        }

        img {
          width: 40%;
          object-fit: cover;
          margin-left: 10px;
          cursor: pointer;

          @media screen and (max-width: 1000px) {
            width: 90%;
            height: 20vh;
            margin-left: 0px;
            box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.3);
            margin-bottom: 5px;
          }
        }

        div {
          max-height: 10vh;
          overflow: auto;
          font-size: 0.9em;

          @media screen and (max-width: 1000px) {
            font-size: 0.7em;
            max-height: 25vh;
          }
        }

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

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

    .guide-box {
      position: absolute;

      .hot-icon {
        position: absolute;
        z-index: 2;
        cursor: pointer;

        @media screen and (max-width: 1000px) {
          width: 60px;
        }
      }

      .line {
        position: absolute;

        @media screen and (max-width: 1000px) {
          display: none;
        }
      }
    }
  }
}
</style>