优化
This commit is contained in:
parent
e97b96c17d
commit
53f035c022
1
.gitignore
vendored
1
.gitignore
vendored
@ -21,6 +21,7 @@ pnpm-debug.log*
|
||||
*.sln
|
||||
*.sw?
|
||||
.history
|
||||
dist
|
||||
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
|
||||
BIN
public/static/bf.gif
Normal file
BIN
public/static/bf.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 MiB |
@ -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,
|
||||
|
||||
BIN
public/static/x.png
Normal file
BIN
public/static/x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user