页面修改

public/static/css/style.css

@@ -24,7 +24,7 @@ a {
 }
 
 .container {
-  width: 1040px;
+  width: 1280px;
   margin: 20px auto;
   background-color: #fff;
   padding: 20px;
@@ -63,9 +63,9 @@ a {
 /* 版面图片 */
 .pic-box {
   position: relative;
-  width: 410px;
+  width: 510px;
   max-height: 760px;
-  padding: 16px 0px;
+  /* padding: 16px 0px; */
   border: 1px solid #bbb;
 }
 
@@ -117,7 +117,7 @@ a {
 
 /* 主体 */
 .main-box {
-  margin-left: 435px;
+  margin-left: 535px;
 }
 
 .main-header {
@@ -200,6 +200,39 @@ a {
   box-shadow: none;
 }
 
+.hoverLi {
+  background: #777777;
+  width: 40px;
+  writing-mode: vertical-lr;
+  margin-bottom: 12px;
+  text-align: center;
+  border-bottom-left-radius: 6px;
+  border-top-left-radius: 6px;
+  font-size: 15px;
+  cursor: pointer;
+  letter-spacing: 4px;
+  display: inline-block;
+  color: #fff;
+}
+
+.hoverLi:hover {
+  background: #f3200f;
+}
+
+.pdfIn {
+  cursor: pointer;
+  margin-bottom: 12px;
+  background-color: #777777;
+  width: 40px;
+  height: 44px;
+  border-radius: 0px 6px 6px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pdfIn:hover {
+  background: #f3200f;
+}
 .main-layout {
   overflow: hidden;
 }
@@ -850,7 +883,7 @@ a {
   margin: 0px !important;
 }
 
-.top_1_div{
+.top_1_div {
   height: 30px;
   line-height: 30px;
   padding-left: 16px;
@@ -862,9 +895,10 @@ a {
   width: 100%;
 
 }
+
 .top_1_div:hover {
   background: #c1343b;
-  color: #fff!important;
+  color: #fff !important;
 }
 
 .triangle {
@@ -889,6 +923,7 @@ a {
   left: -14px;
   top: 21px;
 }
+
 .text-ellipsis {
   white-space: nowrap;
   -o-text-overflow: ellipsis;

public/static/js/Canvas_range.js

@@ -8,12 +8,12 @@ $(function () {
 
 	//$("#MapLeave").append('<div id="mapLeaveMask" style="width: 100%;height: 100%;position: absolute;top: 0;background: transparent;z-index:9999999999999;"></div>');
     var bantu = $('#Bantu')[0] || {}
-    $('#Bantu').css({ opacity: 0, position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: '16px', zIndex: 9 });
+    $('#Bantu').css({ opacity: 0, position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: '0', zIndex: 9 });
 	var timer=setInterval(function(){
 		if(bantu.offsetHeight){
             clearInterval(timer)
 			$('#Bantu').before('<img id="BantuTop" src="'+$('#Bantu').attr("src")+'" style="width:'+bantu.offsetWidth+'px;height:'+bantu.offsetHeight+'px;" />')
-			$('#Bantu').after('<canvas id="coorCanvas" width="'+bantu.offsetWidth+'px" height="'+bantu.offsetHeight+'px" style="position: absolute;top: 15px;left:50%;transform: translateX(-50%); opacity: 1;"></canvas>');
+			$('#Bantu').after('<canvas id="coorCanvas" width="'+bantu.offsetWidth+'px" height="'+bantu.offsetHeight+'px" style="position: absolute;top: 0;left:50%;transform: translateX(-50%); opacity: 1;"></canvas>');
 
 		}
 	},100)

src/view/home/index.vue

@@ -70,6 +70,62 @@
         </div>
       </div>
     </div>
+    <div style="position: absolute;bottom: 0px;left: -40px;">
+      <div class="hoverLi" style="height: 90px;display: flex;align-items: center;justify-content: center;">
+        <div>
+          <img src="/public/static/home.png" style="width: 16px;display: inline-block;">
+        </div>
+        <div style="padding-top: 10px;">首页</div>
+      </div>
+    </div>
+    <div style="position: absolute;bottom: 0px;right: -40px;bottom: 80px;display: flex;flex-direction: column;">
+      <div class="hoverLi" @click.prevent="openNext('top')"
+        style="width: 40px;height: 110px;border-radius: 0px 6px 6px 0px;display: flex;align-items: center;justify-content: center;">
+        <div>
+          <img src="/public/static/prev.png" style="width: 100%;display: inline-block;">
+        </div>
+        <div style="padding-top: 10px;">上一版</div>
+      </div>
+      <div class="hoverLi" @click.prevent="openNext('bottom')"
+        style="width: 40px;height: 110px;border-radius: 0px 6px 6px 0px;display: flex;align-items: center;justify-content: center;">
+        <div>下一版</div>
+        <div style="padding-top: 10px;">
+          <img src="/public/static/next.png" style="width: 100%;display: inline-block;">
+        </div>
+
+      </div>
+    </div>
+    <div style="position: absolute;bottom: 5px;right: -40px;">
+      <div class="pdfIn">
+        <div>
+          <a v-if="data[dataIndex]" :href="data[dataIndex].bm_pdf" target="_blank">
+            <img src="/public/static/pdf2.png" style="width: 100%;">
+          </a>
+        </div>
+      </div>
+    </div>
+    <div v-if="showInfo" style="position: absolute;right: -40px;;display: flex;flex-direction: column;">
+      <div class="hoverLi" @click="addFontSize('da')"
+        style="margin-bottom: 20px;width: 40px;height: 110px;border-radius: 0px 6px 6px 0px;display: flex;align-items: center;justify-content: center;">
+        <div>
+          <img src="/public/static/btn_A.png" style="width: 100%;display: inline-block;">
+        </div>
+        <div style="padding-top: 10px;">放大</div>
+      </div>
+      <div class="hoverLi" @click.prevent="goHome()"
+        style="margin-bottom: 20px;width: 40px;height: 50px;border-radius: 0px 6px 6px 0px;display: flex;align-items: center;justify-content: center;">
+        <div>
+          <img src="/public/static/backBM.png" style="width: 30px;display: inline-block;">
+        </div>
+      </div>
+      <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;">
+        </div>
+      </div>
+    </div>
     <div class="page-main clearfix" v-if="data != ''">
       <!-- 版面预览 -->
       <div class="fl">
@@ -129,7 +185,7 @@
           </div>
         </div> -->
         <div v-if="!showInfo">
-          <div class="main-news">
+          <div class="main-news" style="height: 300px;overflow-y: scroll;">
             <div class="main-news-main">
               <ul class="news-list">
                 <li class="news-item" v-for="news in data[dataIndex].news" :key="news.new_name"
@@ -143,6 +199,10 @@
               </ul>
             </div>
           </div>
+          <div style="padding-top: 18px;">
+            <video src="https://jinrigushitwo.gushitv.com/static/video/20250625/1719466566566.mp4" controls
+              style="width: 100%;"></video>
+          </div>
         </div>
         <div v-if="showInfo" class="main-content-wrapper" id="news_wrapper">
           <!-- <div class="main-content-header clearfix">
@@ -175,8 +235,6 @@
             <p class="datesource">{{ targetInfo.reporter }}</p>
             <br>
             <div class="info">
-              <div>
-              </div>
               <div :class="'font' + fontSize" v-html="targetInfo.content"></div>
             </div>
           </div>
@@ -247,6 +305,8 @@
       </div>
     </div>
     <!-- <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>
 
@@ -257,6 +317,7 @@ import $ from 'jquery';
 export default {
   data() {
     return {
+      isPlay: false,
       iconPdf: "/dist/public/static/icon_pdf.png",
       data: '',
       dataIndex: 0,
@@ -301,6 +362,25 @@ export default {
 
   },
   methods: {
+    readMp3() {
+      console.log(this.$refs.audioPlayer.error)
+      if (this.$refs.audioPlayer.error != null) {
+        alert('音频生成中，请稍候再试！');
+        return;
+      }
+      if (this.isPlay) {
+        this.$refs.audioPlayer.pause();
+      } else {
+        this.$refs.audioPlayer.play();
+      }
+      this.isPlay = !this.isPlay;
+    },
+    onAudioLoaded() {
+      console.log('Audio has been loaded and is ready to play.');
+    },
+    readEnd() {
+      this.isPlay = false;
+    },
     mouseLeft(index) {
       this.clearHideMenuTimer();
       this.mouseIndex = index;
@@ -395,6 +475,7 @@ export default {
 
       if (type == 'da') {
         if (this.fontSize == 29) {
+          this.fontSize = 14
           return;
         }
         this.fontSize += 3;