优化

.gitignore

@@ -21,6 +21,7 @@ pnpm-debug.log*
 *.sln
 *.sw?
 .history
+dist
 
 # OS generated files
 .DS_Store

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,

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'"
+          <img v-if="isPlay" src="/public/static/voice_play.png" style="width: 30px;display: inline-block;">
-            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;">
+          <div v-if="data[dataIndex].bm_video != ''" style="padding-top: 10px;text-align: center;">
-            <video :src="data[dataIndex].bm_video" controls
+            <video :src="data[dataIndex].bm_video" :poster="data[dataIndex].video_image" controls
-              style="width: 95%;margin: 0 auto;height: 410px;"></video>
+              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 v-if="showInfo" style="position: relative;">
-          <!-- <div class="main-content-header clearfix">
+          <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="font-size: 16px;">{{ data[dataIndex].bm_name }}</div>
-          <div style="height: 1px;background-color:#d4d4d4;width: 100%;margin: 10px 0;"></div>
+            <div style="height: 1px;background-color:#d4d4d4;width: 100%;margin: 10px 0;"></div>
-          <div class="main-content">
+            <div class="main-content">
-            <h1 style="text-align: center;">
+              <h1 style="text-align: center;">
-              {{ targetInfo.new_name }}
+                {{ targetInfo.new_name }}
-            </h1>
+              </h1>
-            <h3 style="text-align: center;">
+              <h3 style="text-align: center;">
-              {{ targetInfo.subtitle }}
+                {{ targetInfo.subtitle }}
-            </h3>
+              </h3>
-            <h2 style="text-align: center;" class="summary"></h2>
+              <h2 style="text-align: center;" class="summary"></h2>
-            <p class="datesource">{{ targetInfo.reporter }}</p>
+              <p class="datesource">{{ targetInfo.reporter }}</p>
-            <br>
+              <br>
-            <div class="info">
+              <div class="info">
-              <div :class="'font' + fontSize" v-html="targetInfo.content"></div>
+                <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) {
+      // if (this.$refs.audioPlayer.error != null) {
-        alert('音频生成中，请稍候再试！');
+      //   alert('音频生成中，请稍候再试！');
-        return;
+      //   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;