页面修改
BIN
public/static/backBM.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 3.5 MiB |
BIN
public/static/btn_A.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
@ -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;
|
||||
|
BIN
public/static/home.png
Normal file
After Width: | Height: | Size: 821 B |
@ -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)
|
||||
|
BIN
public/static/next.png
Normal file
After Width: | Height: | Size: 989 B |
BIN
public/static/pdf2.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
public/static/prev.png
Normal file
After Width: | Height: | Size: 977 B |
BIN
public/static/voice.png
Normal file
After Width: | Height: | Size: 5.8 KiB |
BIN
public/static/voice_play.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
@ -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;
|
||||
|