优化

2025-06-26 18:32:17 +08:00 · 2025-06-26 18:32:17 +08:00 · 53f035c022
commit 53f035c022
parent e97b96c17d
5 changed files with 82 additions and 33 deletions
--- a/.gitignore
+++ b/.gitignore
@ -21,6 +21,7 @@ pnpm-debug.log*
 *.sln
 *.sw?
 .history
+dist

 # OS generated files
 .DS_Store
--- a/public/static/bf.gif
+++ b/public/static/bf.gif
--- a/public/static/css/style.css
+++ b/public/static/css/style.css
@ -33,7 +33,7 @@ a {
  -o-box-shadow: 2px 2px 10px #999;
  -webkit-box-shadow: 2px 2px 10px #999; */
  position: relative;
-  height: 84vh;
+  height: 82vh;
 }

 .container-left {
@ -624,6 +624,9 @@ a {

 .main-content-wrapper {
  margin-bottom: 20px;
+  padding: 0px 20px;
+  height: 78vh;
+  overflow: auto;
 }

 .main-content-header,
--- a/public/static/x.png
+++ b/public/static/x.png
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@ -5,6 +5,7 @@
      <div @mouseover="mouseLeft(1)" @mouseout="startHideMenuTimer()" class="container-left">目录</div>
      <div @mouseover="mouseLeft(2)" @mouseout="startHideMenuTimer()" class="container-left">本版</div>
      <div @mouseover="mouseLeft(3)" @mouseout="startHideMenuTimer()" class="container-left">往期</div>
+      <div @click="openVideo()" class="container-left">视频读报</div>
    </div>
    <div v-if="mouseIndex == 1" @mouseover="clearHideMenuTimer()" @mouseout="startHideMenuTimer()"
      style="z-index: 999999;position: absolute;left:15px;border: 1px solid #bfbfbf;width: 205px;padding: 10px;background-color: #ffffff;">
@ -25,7 +26,7 @@
        <span class="triangle triangleBg"></span>
        <div style="padding-left: 16px;font-weight: bold;">{{ data[dataIndex].bm_name }}</div>
        <div class="top_1_div" v-for="news in data[dataIndex].news" :key="news.new_name">
-          <div class="text-ellipsis" @click.prevent="openNews(news)">{{ news.new_name }}</div>
+          <div class="text-ellipsis" @click.prevent="openNews(news,0)">{{ news.new_name }}</div>
          <!-- <a class="pdf" target="_blank" :href="item.bm_pdf"
              :style="{ width: '35px', height: '35px', position: 'absolute', right: '0px', background: `url(${iconPdf}) no-repeat center` }"></a> -->
        </div>
@ -33,6 +34,8 @@
    </div>
    <div v-show="mouseIndex == 3" @mouseover="clearHideMenuTimer()" @mouseout="startHideMenuTimer()"
      style="z-index: 999999;top: 150px;position: absolute;left:15px;border: 1px solid #bfbfbf;padding: 10px;background-color: #ffffff;">
+      <span class="triangle triangleBorder"></span>
+      <span class="triangle triangleBg"></span>
      <div class="main-layout clearfix">
        <div class="layout-calendar fr" id="calendar">
          <div class="calendar-header clearfix">
@ -121,8 +124,8 @@
      <div class="hoverLi" @click.prevent="readMp3()"
        style="width: 40px;height: 50px;border-radius: 0px 6px 6px 0px;display: flex;align-items: center;justify-content: center;">
        <div>
-          <img :src="isPlay ? '/public/static/voice_play.png' : '/public/static/voice.png'"
-            style="width: 30px;display: inline-block;">
+          <img v-if="isPlay" src="/public/static/voice_play.png" style="width: 30px;display: inline-block;">
+          <img v-else src="/public/static/voice.png" style="width: 30px;display: inline-block;">
        </div>
      </div>
    </div>
@ -135,7 +138,7 @@
          <canvas id="coorCanvas" width="408px" height="590px"
            style="position: absolute;top: 15px;left:50%;transform: translateX(-50%); opacity: 1; z-index: 10; pointer-events: none;"></canvas>
          <map name="newbook">
-            <area v-for="area in data[dataIndex].news" :key="area.id" class="paperarea" @click="openNews(area)"
+            <area v-for="area in data[dataIndex].news" :key="area.id" class="paperarea" @click="openNews(area,0)"
              @mouseover="handleMouseOver(area)" @mouseout="handleMouseOut()" :coords="area.coordinate" shape="rect"
              :title="area.new_name">
          </map>
@ -191,7 +194,7 @@
                <li class="news-item" v-for="news in data[dataIndex].news" :key="news.new_name"
                  :class="{ 'news-item-active': hoveredArea && hoveredArea.id === news.id }"
                  @mouseover="handleMouseOver(news)" @mouseout="handleMouseOut()">
-                  <a href="#" @click.prevent="openNews(news)" target="_blank" :alt="news.new_name"
+                  <a href="#" @click.prevent="openNews(news,0)" target="_blank" :alt="news.new_name"
                    :title="news.new_name">{{
                      news.new_name
                    }}</a>
@ -199,13 +202,18 @@
              </ul>
            </div>
          </div>
-          <div v-if="data[dataIndex].bm_video!=''" style="padding-top: 10px;text-align: center;">
-            <video :src="data[dataIndex].bm_video" controls
-              style="width: 95%;margin: 0 auto;height: 410px;"></video>
+          <div v-if="data[dataIndex].bm_video != ''" style="padding-top: 10px;text-align: center;">
+            <video :src="data[dataIndex].bm_video" :poster="data[dataIndex].video_image" controls
+              style="object-fit: cover;width: 95%;margin: 0 auto;height: 410px;"></video>
          </div>
        </div>
-        <div v-if="showInfo" class="main-content-wrapper" id="news_wrapper">
-          <!-- <div class="main-content-header clearfix">
+        <div v-if="showInfo" style="position: relative;">
+          <div v-if="isPlay" style="position: absolute;left: 10px;bottom: 0;">
+            <img v-if="showGif" src="/public/static/bf.gif" style="width: 150px;" />
+            <img @click="showGif = false" src="/public/static/x.png" style="width: 20px;position: absolute;right: 5px;top: 5px;" />
+          </div>
+          <div class="main-content-wrapper" id="news_wrapper">
+            <!-- <div class="main-content-header clearfix">
            <div class="article-ctrls fl">
              <a class="article-ctrl article-ctrl-prev" @click.prevent="openNextNews('top')" href="#">上一篇</a>
              <a class="article-ctrl article-ctrl-next" @click.prevent="openNextNews('bottom')" href="#">下一篇</a>
@ -222,24 +230,26 @@
              </li>
            </ul>
          </div> -->
-          <div style="font-size: 16px;">{{ data[dataIndex].bm_name }}</div>
-          <div style="height: 1px;background-color:#d4d4d4;width: 100%;margin: 10px 0;"></div>
-          <div class="main-content">
-            <h1 style="text-align: center;">
-              {{ targetInfo.new_name }}
-            </h1>
-            <h3 style="text-align: center;">
-              {{ targetInfo.subtitle }}
-            </h3>
-            <h2 style="text-align: center;" class="summary"></h2>
-            <p class="datesource">{{ targetInfo.reporter }}</p>
-            <br>
-            <div class="info">
-              <div :class="'font' + fontSize" v-html="targetInfo.content"></div>
+            <div style="font-size: 16px;">{{ data[dataIndex].bm_name }}</div>
+            <div style="height: 1px;background-color:#d4d4d4;width: 100%;margin: 10px 0;"></div>
+            <div class="main-content">
+              <h1 style="text-align: center;">
+                {{ targetInfo.new_name }}
+              </h1>
+              <h3 style="text-align: center;">
+                {{ targetInfo.subtitle }}
+              </h3>
+              <h2 style="text-align: center;" class="summary"></h2>
+              <p class="datesource">{{ targetInfo.reporter }}</p>
+              <br>
+              <div class="info">
+                <div :class="'font' + fontSize" v-html="targetInfo.content"></div>
+              </div>
            </div>
-          </div>

+          </div>
        </div>
+
        <!-- <div v-if="!showInfo" class="main-layout clearfix">
          <div class="layout-catalogue fl">
            <h2 class="layout-catalogue-title">版面目录</h2>
@ -307,6 +317,7 @@
    <!-- <div class="footer"></div> -->
    <audio ref="audioPlayer" @ended="readEnd" controls :src="'https://jinrigushitwo.gushitv.com/' + targetInfo.mp_url"
      @canplaythrough="onAudioLoaded" style='width:100%;display:none;'></audio>
+
  </div>
 </template>

@ -331,9 +342,12 @@ export default {
      imageScale: 1,
      mouseIndex: 0,
      hideMenuTimer: null,
+      qkData: {},
+      showGif:true,
    };
  },
  mounted() {
+    //sessionStorage.setItem("mp3", 0);
    var index = sessionStorage.getItem("index");
    this.dataIndex = index ? index : 0;
    this.getCurrentDateMaxDay();
@ -351,6 +365,12 @@ export default {
      sessionStorage.setItem("month", initMonth);
      sessionStorage.setItem("day", initDay);
    }
+    console.log(sessionStorage.getItem("mp3"))
+    if (sessionStorage.getItem("mp3") == 1) {
+      setTimeout(() => {
+        this.readMp3();
+      }, 1000)
+    }
    //document.title =this.data.list[this.dataIndex].editionName;
    // var newInfo = sessionStorage.getItem("newInfo");
    // if (newInfo) {
@ -362,18 +382,30 @@ export default {

  },
  methods: {
+    openVideo() {
+      console.log(this.showInfo)
+      if(this.showInfo){
+        this.readMp3();
+      }else{
+        sessionStorage.setItem("mp3", 1);
+        this.openNews(this.data[this.dataIndex].news[0],1);
+      }
+      //新窗口打开
+      //window.open(this.qkData.date_video, '_blank');
+    },
    readMp3() {
      console.log(this.$refs.audioPlayer.error)
-      if (this.$refs.audioPlayer.error != null) {
-        alert('音频生成中，请稍候再试！');
-        return;
-      }
+      // if (this.$refs.audioPlayer.error != null) {
+      //   alert('音频生成中，请稍候再试！');
+      //   return;
+      // }
      if (this.isPlay) {
        this.$refs.audioPlayer.pause();
      } else {
        this.$refs.audioPlayer.play();
      }
      this.isPlay = !this.isPlay;
+      this.showGif=true;
    },
    onAudioLoaded() {
      console.log('Audio has been loaded and is ready to play.');
@ -431,6 +463,7 @@ export default {
      window.location.reload();
    },
    openNextNews(type) {
+      sessionStorage.setItem("mp3", 0);
      if (type == 'top') {
        var id = parseInt(this.targetInfo.id) - 1;
      } else {
@ -466,10 +499,18 @@ export default {
        }
        this.dataIndex = this.dataIndex >= (this.data.length - 1) ? (this.data.length - 1) : parseInt(this.dataIndex) + 1;
      }
+      sessionStorage.setItem("mp3", 0);
      sessionStorage.setItem("index", parseInt(this.dataIndex));
      sessionStorage.removeItem("newInfo");
      this.showInfo = false;
-      window.location.reload();
+      //去掉域名上的&id
+      let url = window.location.href;
+      url = url.replace(/&id=\d+/, '');
+      url = url.replace(/\?id=\d+/, '');
+      window.location.href = url;
+      setTimeout(() => {
+        window.location.reload();
+      }, 100)
    },
    addFontSize(type) {

@ -522,6 +563,7 @@ export default {
        .catch(error => console.error('Error loading the JSON file:', error))
    },
    openBm(d) {
+      sessionStorage.setItem("mp3", 0);
      this.dataIndex = d;
      sessionStorage.setItem("index", d);
      sessionStorage.removeItem("newInfo");
@ -582,6 +624,7 @@ export default {

          sessionStorage.setItem('DateIndex', resIndex);
          $('input[name="activeDate"]').val(response.data.data[resIndex].datetime);
+          this.qkData = response.data.data[resIndex];
          //this.datetime = this.getCurrentDateFormatted(response.data.data[resIndex].datetime);
          //document.title = '《今日固始》电子版-' + this.datetime;
          // if(storageTimeMonth == '' || typeof (storageTimeMonth)=='undefined'){
@ -698,7 +741,8 @@ export default {
        }
      }
    },
-    openNews(area) {
+    openNews(area,type) {
+      sessionStorage.setItem("mp3", type);
      //var info = this.data[this.dataIndex].news;
      //var targetInfo = info.find(item => item.id === area.id);
      //this.targetInfo = targetInfo;
@ -730,10 +774,11 @@ export default {
    },

    goHome() {
+      sessionStorage.setItem("mp3", 0);
      sessionStorage.removeItem("year");
      sessionStorage.removeItem("month");
      sessionStorage.removeItem("day");
-      sessionStorage.removeItem("index");
+      //sessionStorage.removeItem("index");
      sessionStorage.removeItem("newInfo");
      this.showInfo = false;
      let url = window.location.href;