|
|
@@ -5,7 +5,7 @@
|
|
|
<div class="navBar-left">
|
|
|
<a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i> 第 {{peruseDetail.batch}} 期</a>
|
|
|
<div class="border"></div>
|
|
|
- <p class="article-title">{{peruseDetail.en_title}}</p>
|
|
|
+ <p class="article-title">{{peruseDetail.cn_title}}</p>
|
|
|
</div>
|
|
|
<div class="navBar-right">
|
|
|
<el-input-number class="article-fontsize" v-model="wordFontsize" :step="2" step-strictly :min="12" :max="24" :style="{borderColor:bgColorList[activeIndex].boxBorder}"></el-input-number>
|
|
|
@@ -21,7 +21,7 @@
|
|
|
<div class="article-top">
|
|
|
<span class="preparation" :style="{color:bgColorList[activeIndex].sourceColor}">导读</span>
|
|
|
<h3 :style="{color:bgColorList[activeIndex].contentColor}">{{peruseDetail.en_title+' '+peruseDetail.cn_title}}</h3>
|
|
|
- <label v-if="peruseDetail.label" :style="{background:tagBg[Math.floor(Math.random() * 3)],color:tagColor[Math.floor(Math.random() * 3)]}">{{ '# ' + peruseDetail.label}}</label>
|
|
|
+ <label v-if="peruseDetail.label" :style="{background:tagBg[0],color:tagColor[0]}">{{ '# ' + peruseDetail.label}}</label>
|
|
|
<p :style="{color:bgColorList[activeIndex].sourceColor}">{{peruseDetail.introduction}}</p>
|
|
|
</div>
|
|
|
<div class="article-content" :style="{borderColor:bgColorList[activeIndex].boxBorder}">
|
|
|
@@ -34,11 +34,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="article-bottom">
|
|
|
-
|
|
|
+ <div class="left">
|
|
|
+ <span :class="['support',support?'active':'']" @click="changeStatus('support')"><svg-icon icon-class="support"></svg-icon>2847</span>
|
|
|
+ <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span>
|
|
|
+ </div>
|
|
|
+ <div class="center">
|
|
|
+ <el-button type="text" class="btn-left" @click="handlePage('-')"><svg-icon icon-class="arrow-left-line"></svg-icon>上一篇</el-button>
|
|
|
+ <el-button type="text" class="btn-right" @click="handlePage('+')">下一篇<svg-icon icon-class="arrow-right-line"></svg-icon></el-button>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <template v-if="noRead">
|
|
|
+ <span class="support" @click="changeStatus('noRead')"><svg-icon icon-class="no-read"></svg-icon>标记为已读</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span class="support readed" @click="changeStatus('noRead')"><svg-icon icon-class="readed"></svg-icon>已读</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <a class="translate" :class="[translateFlag?'active':'']"><svg-icon icon-class="translate" class="wrapper"></svg-icon></a>
|
|
|
+ <a class="translate" :class="[translateFlag?'active':'']" @click="translateFlag=!translateFlag"><svg-icon icon-class="translate" class="wrapper"></svg-icon></a>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -222,9 +237,12 @@ export default {
|
|
|
peruseId: this.$route.query.peruseId?this.$route.query.peruseId:'',
|
|
|
peruseDetail: null,
|
|
|
loading: false,
|
|
|
- tagBg:['#C9EBFF','#FFFAC9','#D7C9FF'], // 标签背景色
|
|
|
- tagColor:['#006DAA','#AA8500','#7849C4'], // 标签字体颜色
|
|
|
- translateFlag: true
|
|
|
+ tagBg:['#C9EBFF'], // 标签背景色
|
|
|
+ tagColor:['#006DAA'], // 标签字体颜色
|
|
|
+ translateFlag: false,
|
|
|
+ noRead: true, // 未读
|
|
|
+ support: false, // 点赞
|
|
|
+ oppose: false, // 不支持
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -249,6 +267,16 @@ export default {
|
|
|
.catch(() => {
|
|
|
this.loading = false
|
|
|
});
|
|
|
+ },
|
|
|
+ handlePage(type){
|
|
|
+ if(type==='-'){
|
|
|
+
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeStatus(flag){
|
|
|
+ this[flag] = !this[flag]
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
@@ -376,11 +404,97 @@ export default {
|
|
|
.article-bottom{
|
|
|
padding: 16px;
|
|
|
background: #F7F8FA;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .right{
|
|
|
+ width: 145px;
|
|
|
+ margin-right: -8px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .support{
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: #E5E6EB;
|
|
|
+ margin-right: 8px;
|
|
|
+ color:rgba(0, 0, 0, 0.88);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ .svg-icon{
|
|
|
+ margin-right: 8px;
|
|
|
+ color: rgba(23, 93, 255, 1);
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ background: rgba(48, 110, 255, 1);
|
|
|
+ color: #fff;
|
|
|
+ .svg-icon{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .oppose{
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: #E5E6EB;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ .svg-icon{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ background: rgba(48, 110, 255, 1);
|
|
|
+ .svg-icon{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-left,.btn-right{
|
|
|
+ color: #3459D2;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 0;
|
|
|
+ .svg-icon{
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-right{
|
|
|
+ .svg-icon{
|
|
|
+ margin-right: 0;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .readed{
|
|
|
+ background: rgba(231, 238, 255, 1);
|
|
|
+ color: rgba(23, 93, 255, 1);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.translate{
|
|
|
position: fixed;
|
|
|
+ z-index: 1;
|
|
|
+ bottom: 200px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: 400px;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #4F4F4F;
|
|
|
+ box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
|
|
|
+ .svg-icon{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ background: #175DFF;
|
|
|
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
natasha
