chenzimin2
/
ZHZRZYJ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="./vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-plus"></script>
  <title>珠海市自然资源局倾斜建筑展示</title>

  <style>
    body {
      margin: 0;
    }

    * {
      box-sizing: border-box;
      margin: 0;

      padding: 0;
    }

    #app {
      min-width: 100vw;
      height: 100vh;
      box-sizing: border-box;
      overflow: hidden;
    }

    #bg-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

    #bg-audio {
      position: absolute;
      top: 0;
      left: 0;
    }

    .welcome-btn {
      padding: 15px 40px;
      background: url(./img/beginBg.png);
      background-size: 100% 100%;
      position: absolute;
      bottom: 15vh;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2em;
      letter-spacing: 5px;
      cursor: pointer;
      color: #cbb18e;
    }

    .page2-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    .page2-box>.info-box {
      max-width: 250px;
      /* min-width: 12vw; */
      position: absolute;
      top: 10px;
      left: 10px;
    }

    .info-title-box {
      max-width: 250px;
      /* min-width: 12vw; */
      padding: 10px;
      background: url(./img/info-title-bg.png);
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      cursor: pointer;

    }

    .info-title-box>.text {
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      max-width: 55%;
    }

    .info-title-box>.text>.scroll-wrap {
      max-width: 100%;
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      white-space: nowrap;
    }

    .info-title-box>.text>.scroll-wrap>.scroll-item {
      animation: scroll linear 7s alternate infinite;
      float: left;

    }

    @keyframes scroll {
      0% {
        margin-left: 0;
        transform: translateX(0);
      }

      10% {
        margin-left: 0;
        transform: translateX(0);
      }

      90% {
        margin-left: 100%;
        transform: translateX(-100%);
      }

      100% {
        margin-left: 100%;
        transform: translateX(-100%);
      }
    }

    .info-title-box>.line {
      width: 1px;
      height: 20px;
      margin: auto 20px;
      background: white;
    }

    .info-title-box>img {
      width: 20px;
      /* height: 25px; */
    }

    .info-desc-box {
      width: 100%;
      max-height: 70vh;
      overflow-y: auto;
      background: rgba(94, 27, 19, .6431372549019608);
      backdrop-filter: blur(10px);
      border-radius: 10px 10px;
      color: white;
      padding: 30px;
      text-indent: 2em;
      letter-spacing: 2px;
      transition: opacity 1s ease;
      margin-top: 10px;
      opacity: 0;
    }
    .info-desc-box::-webkit-scrollbar {
      width: 8px;
      background-color: transparent;
    }
    .info-desc-box::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #911212;
    }
    .info-desc-box::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      background-color: transparent;
    }

    .options-box {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      bottom: 30px;
      left: 0;
      padding: 0 20px;
      z-index: 2;
    }

    /* .guide-options-box>img{
      opacity: 0.5;
    } */
    .guide-options-box>.left-box>.option-item>img {
      opacity: 0.4;
    }

    .guide-options-box>.left-box>.option-item>.el-image {
      opacity: 0.4;
    }

    .guide-options-box>.right-box>.option-item>img {
      opacity: 0.4;
    }

    .options-box>.left-box>.option-item {
      cursor: pointer;
      position: relative;
    }

    .options-box>.right-box>.option-item {
      cursor: pointer;
      position: relative;

    }

    .options-box>.left-box>.option-item>.tip-box {
      background: url(./img/tip-bg.png);
      background-size: 100% 100%;
      pointer-events: none;
      transition: all .5s;
      opacity: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -40px;
      width: 80px;
      height: 37px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #fff;
    }

    .options-box>.left-box>.option-item>.guide-tip-box {
      position: absolute;
      bottom: 55px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      white-space: nowrap;
      z-index: 70;
      color: #cbb18e;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .options-box>.left-box>.option-item>.guide-tip-box>.play-text {
      transform: translateX(25%);
    }

    .options-box>.left-box>.option-item>.guide-tip-box>.guide-cicle {
      width: 20px !important;
      height: 20px !important;
    }

    .options-box>.left-box>.option-item>.guide-tip-box>.guide-line {
      width: 5px !important;
    }

    .options-box>.right-box>.option-item>.guide-tip-box {
      position: absolute;
      bottom: 55px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      white-space: nowrap;
      z-index: 70;
      color: #cbb18e;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .options-box>.right-box>.option-item>.guide-tip-box>.play-text {
      transform: translateX(25%);
    }

    .options-box>.right-box>.option-item>.guide-tip-box>.guide-cicle {
      width: 20px !important;
      height: 20px !important;
    }

    .options-box>.right-box>.option-item>.guide-tip-box>.guide-line {
      width: 5px !important;
    }

    .options-box>.right-box>.option-item>.tip-box {
      background: url(./img/tip-bg.png);
      background-size: 100% 100%;
      pointer-events: none;
      transition: all .5s;
      opacity: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -40px;
      width: 80px;
      height: 37px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #fff;
    }

    .options-box>.right-box>.option-item {
      cursor: pointer;
    }

    .options-box>.left-box>.option-item>img {
      width: 45px;
    }

    .options-box>.left-box>.option-item>.el-image {
      width: 45px;
    }

    .options-box>.right-box>.option-item>img {
      width: 45px;
    }

    .options-box>.left-box {
      display: flex;
    }

    .options-box>.right-box {
      display: flex;
    }

    .el-image-viewer__img {
      /* transform: scale(0.8) rotate(0deg) !important; */
      height: 75vh;
    }

    .guide-box {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.7);
      color: #ffe794;
    }

    .guide-box>.begin-btn {
      padding: 15px 40px;
      background: url(./img/beginBg.png);
      background-size: 100% 100%;
      position: absolute;
      bottom: 15vh;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2em;
      letter-spacing: 5px;
      cursor: pointer;
      color: #cbb18e;
    }

    .progress-bar {
      width: 100%;
      height: 20px;
      background: #911212;
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .progress-bar>.content-box {
      width: 100%;
      height: 5px;
      background: white;
    }

    .progress-bar>.content-box>.progress-bar-passed {
      background: #d6b970;
      height: 5px;
      transition: width 0.1s ease;
      position: relative;
    }

    .progress-bar>.content-box>.progress-bar-passed>.cicle-box {
      width: 15px;
      height: 15px;
      border-radius: 50px;
      border: 1px #d6b970 solid;
      background: white;
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(50%, -25%);
      cursor: pointer;
    }

    @media screen and (max-width: 768px) {
      .page2-box>.info-box {
        max-width: 250px;
        /* min-width: 12vw; */
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
      }

      .options-box>.left-box {
        flex-direction: column;
      }

      .options-box {
        align-items: end;
      }

      .options-box>.left-box>.option-item {
        width: 35px;
      }

      .options-box>.left-box>.option-item>img {
        width: 35px;
      }

      .options-box>.left-box>.option-item>.el-image {
        width: 35px;
        margin-top: 10px;
      }

      .options-box>.right-box>.option-item>img {
        width: 35px;
      }

      .options-box>.left-box>.option-item>.tip-box {
        display: none !important;
      }

      .options-box>.right-box>.option-item>.tip-box {
        display: none !important;
      }

      .el-image-viewer__img {
        /* transform: scale(0.8) rotate(0deg) !important; */
        height: auto;
      }

      .guide-box>.begin-btn {
        bottom: 50vh;
      }

      .options-box>.left-box>.option-item>.guide-tip-box {
        bottom: 50%;
        transform: translateY(50%);
        left: 110%;
        flex-direction: row-reverse;
      }

      .options-box>.left-box>.option-item>.guide-tip-box>.guide-line {
        height: auto !important;
        transform: rotate(90deg);
        margin: 0 10px;
      }

      .options-box>.left-box>.option-item>.guide-tip-box>.guide-line {
        width: 10px !important;
      }

      .options-box>.right-box>.option-item>.guide-tip-box {
        bottom: 50%;
        transform: translate(-110%, 50%);
        left: 0;
        flex-direction: row;
      }

      .options-box>.right-box>.option-item>.guide-tip-box>.guide-line {
        height: auto !important;
        transform: rotate(90deg);
        margin: 0 10px;
      }

      .options-box>.right-box>.option-item>.guide-tip-box>.guide-line {
        width: 10px !important;
      }

    }

    .preview-page{
      position: fixed;
      text-align: center;
      color:#fff;
      left: 50%;
      bottom:80px;
      height:30px;
      padding: 0 23px;
      border-radius:15px;
      line-height:30px;
      transform: translateX(-50%);
      z-index: 9999;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 视频背景 -->
    <video @timeupdate="timeUpdate" id="bg-video" :src="`${baseUrl}/video/${curModel.name}.mp4`" muted loop
      x5-playsinline="true"
      playsinline="true"
      webkit-playsinline="true"
      x-webkit-airplay="true"
      x5-video-player-type="h5-page"
      preload="metadata"
    ></video>
    <audio id="bg-audio" :src="`${baseUrl}/audio/${curModel.name}.mp3`" loop></audio>
    <!-- 开始探索 -->
    <div @click="goCurIndex2" class="welcome-btn" v-if="curPage == 1">开始探索</div>
    <!-- 左侧简介 -->
    <div class="page2-box" v-else>
      <div class="info-box" v-show="!isClearing">
        <div class="info-title-box" @click="isShowDescBox = !isShowDescBox">
          <div class="text">
            <div class="scroll-wrap">
              <div class="scroll-item">
                {{curModel.name}}
              </div>
            </div>
          </div>
          <div class="line"></div><img src="./img/icon-down.png" alt="">
        </div>
        <div class="info-desc-box" :style="{opacity: isShowDescBox ? 1:0}">{{curModel.desc}}</div>
      </div>
      <!-- 下面功能按钮去 -->
      <div class="options-box " :class="{'guide-options-box': isGuideOpen}">
        <div class="left-box">
          <div class="option-item" @mousemove="hoverIndex = 1" @mouseleave="hoverIndex = -1"
            :style="{opacity: !isClearing ? 1:0,marginRight: '20px'}" @click="videoPlayChange()">
            <div class="tip-box" :style="{opacity: hoverIndex == 1 && !isGuideOpen ?1:0}">{{isPlayingVideo ?'暂停':'播放'}}
            </div>
            <div class="guide-tip-box" v-if="isGuideOpen && guideStep == 1">
              <div>播放/暂停</div>
              <img class="guide-line" style="height: 8vh" src="./img/guide-line.png" alt="" />
              <img class="guide-cicle" src="./img/guide-cicle.png" alt="" />
            </div>
            <img v-if="!isPlayingVideo" src="./img/icon-manyou-1.png" alt=""><img v-else src="./img/icon-manyou.png"
              alt="">
          </div>
          <div class="option-item" @mousemove="hoverIndex = 2 " @mouseleave="hoverIndex = -1"
            :style="{opacity: !isClearing ? 1:0}">
            <div class="tip-box" :style="{opacity: hoverIndex == 2 && !isGuideOpen ?1:0}">图片预览</div>
            <div class="guide-tip-box" v-if="isGuideOpen && guideStep == 1">
              <div>点击查看图片</div>
              <img class="guide-line" style="height: 4vh" src="./img/guide-line.png" alt="" />
              <img class="guide-cicle" src="./img/guide-cicle.png" alt="" />
            </div>

            <el-image @wheel="handleWheel" src="./img/icon-images.png" @click="openViewer"
              :preview-src-list="imagesList" :initial-zoom-num="0.5" alt="" @switch="onSwitch"
              @close="closePreview">
              <template #viewer>
                <div class="preview-page">{{imgCur}}/{{imagesList.length}}</div>
              </template>
            </el-image>
          </div>
        </div>
        <div class="right-box">
          <div class="option-item" @mousemove="hoverIndex = 3" @mouseleave="hoverIndex = -1" @click="clearingChange()">
            <div class="tip-box" :style="{opacity: hoverIndex == 3 && !isGuideOpen?1:0}">{{isClearing ? '取消':'清屏'}}
            </div>
            <div class="guide-tip-box" v-if="isGuideOpen && guideStep == 2">
              <div>点击清屏</div>
              <img class="guide-line" style="height: 8vh" src="./img/guide-line.png" alt="" />
              <img class="guide-cicle" src="./img/guide-cicle.png" alt="" />
            </div>
            <img v-if="!isClearing" src="./img/icon-qingping.png" alt=""><img v-else src="./img/icon-qingping-1.png"
              alt="">
          </div>
        </div>
      </div>
      <!-- 提示指引 -->
      <div v-show="isGuideOpen" class="guide-box">
        <div class="begin-btn" @click="guideStep == 2 ? (isGuideOpen = false) : (guideStep ++) ">
          {{ guideStep != 2 ? "下一步" : "我知道了" }}
        </div>
      </div>
      <!-- 进度条 -->
      <div class="progress-bar">
        <div class="content-box" id="progress-track">
          <!-- <div class="progress-bar-passed" :style="{width: `${curModel.progress}%`}"></div>" ></div> -->
          <div class="progress-bar-passed" :style="{width:`${curProgressValue}%`}">
            <div class="cicle-box" id="progress-thumb" @mousedown="startDrag" @touchstart="startDrag"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="./staticData/data.js"></script>
  <script>
    var app = Vue.createApp({
      data() {
        return {
          dataAll: dataAll,
          baseUrl: './staticData/data',
          curModel: null,
          curPage: 1,
          isShowDescBox: false,
          isPlayingVideo: true,
          isClearing: false,
          imagesList: [],
          hoverIndex: 0,
          guideStep: 1,
          isGuideOpen: true,
          curProgressValue: 0, // 当前进度值
          dragPosition: '', // 拖动位置（百分比）
          isDragging: false, // 是否正在拖动
          imgCur: 1,
        };
      },
      mounted() {
        const m = this.handleQueryParams().m
        const res = this.dataAll.list.filter((item) => {
          return item.id == m || item.name == m
        })
        this.curModel = res[0]
        // 初始化大图列表
        this.imagesList = res[0].images.map((item) => {
          return `${this.baseUrl}/images/${res[0].name}/${item}`
        })
        if (localStorage.getItem("isGuided") == "true") {
          this.isGuideOpen = false;
          this.guideStep = null;
        } else {
          this.isGuideOpen = true;
          this.guideStep = 1;
          localStorage.setItem("isGuided", "true");
        }

        document.addEventListener('WeixinJSBridgeReady', function () {
          const video = document.getElementById('bg-video');
          video.play();
          video.pause();
        }, false);
      },
      created() { },
      beforeDestroy() {

      },
      watch: {
      },
      methods: {
        onSwitch(idx) {
          this.imgCur = idx + 1
        },
        closePreview() {
          this.imgCur = 1
        },
        handleQueryParams() {
          var queryParams = {};
          console.log(window.location.href)
          if (!window.location.href.includes('?')) {
            alert('请输入参数')
            return {}
          }
          window.location.href.split('?')[1].split('&').forEach(function (item) {
            var parts = item.split('=');
            queryParams[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
          });

          return queryParams;
        },
        goCurIndex2() {
          this.curPage = 2;
          const audioDom = document.getElementById('bg-audio');
          const videoDom = document.getElementById('bg-video');
          if (audioDom && videoDom) {
            audioDom.play()
            videoDom.play()
          }
          setTimeout(() => {
            this.isShowDescBox = true
            setTimeout(() => {
              this.isShowDescBox = false
            }, 3000)
          }, 200)
        },
        videoPlayChange() {
          const videoDom = document.getElementById('bg-video')
          const audioDom = document.getElementById('bg-audio')
          if (!videoDom.paused && !videoDom.ended && videoDom.readyState > 2) {
            videoDom.pause()
            audioDom.pause()
            this.isPlayingVideo = false
          } else {
            videoDom.play()
            audioDom.play()
            this.isPlayingVideo = true
          }
        },
        clearingChange() {
          this.isClearing = !this.isClearing
        },
        openViewer() {
        },
        handleWheel() {

        },
        timeUpdate(event) {
          this.curProgressValue = event.target.currentTime / event.target.duration * 100
        },
        getRelativePosition(event) {
          // const track = document.querySelector('#progress-track');
          // console.log('有没有',track)
          const trackRect = document.querySelector('#progress-track').getBoundingClientRect();
          let pos;
          if (event.type.includes('touch')) {
            pos = event.touches[0].clientX - trackRect.left;
          } else {
            pos = event.clientX - trackRect.left;
          }
          return Math.min(Math.max(pos / trackRect.width * 100, 0), 100);
        },
        startDrag(event) {
          console.log('被拖动了')
          this.isDragging = true
          this.curProgressValue = this.getRelativePosition(event);
          document.addEventListener('mousemove', this.moveDrag);
          document.addEventListener('touchmove', this.moveDrag);
          document.addEventListener('mouseup', this.stopDrag);
          document.addEventListener('touchend', this.stopDrag);
        },
        moveDrag(event) {
          if (!this.isDragging) return;
          this.curProgressValue = this.getRelativePosition(event);
          this.updateProgress();
        },
        stopDrag() {
          this.isDragging = false;
          document.removeEventListener('mousemove', this.moveDrag);
          document.removeEventListener('touchmove', this.moveDrag);
          document.removeEventListener('mouseup', this.stopDrag);
          document.removeEventListener('touchend', this.stopDrag);
        },
        updateProgress() {
          this.curProgressValue = Math.round(this.curProgressValue)
          const videoDom = document.getElementById('bg-video')
          // const audioDom = document.getElementById('bg-audio')
          // videoDom.pause()
          // audioDom.pause()
          // this.isPlayingVideo = false
          const progressTrack = document.getElementById('progress-track')
          if (videoDom && progressTrack) {
            let clickProgress = this.curProgressValue / 100
            videoDom.currentTime = videoDom.duration * clickProgress;
          }
        }
      },
    }).use(ElementPlus).mount('#app');
  </script>
</body>

</html>