|
|
@@ -0,0 +1,485 @@
|
|
|
+<template>
|
|
|
+ <div class="bookStore" :style="{background:bgColorList[activeIndex].contentBg}" v-loading="loading" v-if="peruseDetail">
|
|
|
+ <Header :LoginNavIndex="1"/>
|
|
|
+ <div class="navBar" :class="['navBar-'+bgColorList[activeIndex].type]" :style="{background:bgColorList[activeIndex].navBg}">
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ <ul class="article-color" :style="{borderColor:bgColorList[activeIndex].boxBorder}">
|
|
|
+ <li :class="['color-item',activeIndex===indexC?'active':'']" v-for="(itemC,indexC) in bgColorList" :key="indexC" @click="handleChangeBgColor(indexC)" :style="{borderColor:activeIndex===indexC?itemC.border_active:''}">
|
|
|
+ <a :style="{background:itemC.border,borderColor:activeIndex===indexC?itemC.borderColor:''}"></a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="article-box">
|
|
|
+ <div class="article-top">
|
|
|
+ <span class="preparation">导读</span>
|
|
|
+ <h3>{{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>
|
|
|
+ <p>{{peruseDetail.introduction}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="article-content">
|
|
|
+ <div v-for="(item,index) in peruseDetail.content.article" :key="item.sectionId">
|
|
|
+ <div class="article-en" :class="[index===0?'article-en-title':'']" v-html="item.enArticle"></div>
|
|
|
+ <div class="article-cn" :class="[index===0?'article-cn-title':'']" v-if="translateFlag">{{item.chArticle}}</div>
|
|
|
+ <div class="voice-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Header from "../../components/Header.vue";
|
|
|
+import NavBar from "../../components/common/NavBar.vue"
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
+export default {
|
|
|
+ name: 'articleDetail',
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Header,
|
|
|
+ NavBar
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ wordFontsize: 18, // 文章文字大小
|
|
|
+ bgColorList:[
|
|
|
+ {
|
|
|
+ type:'white',
|
|
|
+ contentBg:'#F2F3F5',
|
|
|
+ contentInnerBg:'#FFFFFF',
|
|
|
+ navBg:'#FFFFFF',
|
|
|
+ border:'#E5E6EB',
|
|
|
+ bg:'#FFFFFF',
|
|
|
+ border_active:'#3459D2',
|
|
|
+ boxBorder:'#E5E6EB',
|
|
|
+ titleColor:'#1F2C5C',
|
|
|
+ sourceColor:'#929CA8',
|
|
|
+ contentColor:'#2F3742',
|
|
|
+ btnColor:'#3459D2',
|
|
|
+ glossaryTitle:'#2F3742',
|
|
|
+ glossarySubtitle:'#4E5969',
|
|
|
+ glossaryBg:'#F7F8FA',
|
|
|
+ newWordColor:'#175DFF',
|
|
|
+ newWordOtherColor:'#667180',
|
|
|
+ newWordStar:'#FFB224',
|
|
|
+ newWordType:{
|
|
|
+ 'daochu':{
|
|
|
+ text:'导出',
|
|
|
+ color:'#F5319D',
|
|
|
+ bg:'#FFE8F1'
|
|
|
+ },
|
|
|
+ 'xuanbi':{
|
|
|
+ text:'选必',
|
|
|
+ color:'#175DFF',
|
|
|
+ bg:'#D9E2FC'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ phraseColor:'#ED5F00',
|
|
|
+ phraseOhterColor:'#2F3742',
|
|
|
+ annotationTitle:'#4E5969',
|
|
|
+ annotationOhter:'#667180',
|
|
|
+ statisticTitle:'#2F3742',
|
|
|
+ statisticValue:'#3459D2',
|
|
|
+ menuBg:'#EEF3FF',
|
|
|
+ audiobg:'#FFFFFF',
|
|
|
+ audioBorder:'#EBEBEB'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:'darkGreen',
|
|
|
+ contentBg:'#C2C9C6',
|
|
|
+ contentInnerBg:'#DFE4E2',
|
|
|
+ navBg:'#236E55',
|
|
|
+ border:'#5BB99A',
|
|
|
+ bg:'#FFFFFF',
|
|
|
+ border_active:'#FFFFFF',
|
|
|
+ boxBorder:'#1B5441',
|
|
|
+ titleColor:'#1F2C5C',
|
|
|
+ sourceColor:'#929CA8',
|
|
|
+ contentColor:'#2F3742',
|
|
|
+ btnColor:'#3459D2',
|
|
|
+ glossaryTitle:'#393F3C',
|
|
|
+ glossarySubtitle:'#66736D',
|
|
|
+ glossaryBg:'#D7DCDA',
|
|
|
+ newWordColor:'#175DFF',
|
|
|
+ newWordOtherColor:'#667180',
|
|
|
+ newWordStar:'#FFB224',
|
|
|
+ newWordType:{
|
|
|
+ 'daochu':{
|
|
|
+ text:'导出',
|
|
|
+ color:'#F5319D',
|
|
|
+ bg:'#FFE8F1'
|
|
|
+ },
|
|
|
+ 'xuanbi':{
|
|
|
+ text:'选必',
|
|
|
+ color:'#175DFF',
|
|
|
+ bg:'#D9E2FC'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ phraseColor:'#ED5F00',
|
|
|
+ phraseOhterColor:'#2F3742',
|
|
|
+ statisticTitle:'#393F3C',
|
|
|
+ statisticValue:'#299772',
|
|
|
+ menuBg:'#E9F7F2',
|
|
|
+ audiobg:'#ECEFED',
|
|
|
+ audioBorder:'#DFE4E2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:'darkBlue',
|
|
|
+ contentBg:'#1C2129',
|
|
|
+ contentInnerBg:'#2F3742',
|
|
|
+ navBg:'#2F3742',
|
|
|
+ border:'#1F2C5C',
|
|
|
+ bg:'#1F2C5C',
|
|
|
+ border_active:'#FFFFFF',
|
|
|
+ boxBorder:'#1C2129',
|
|
|
+ titleColor:'#5373E7',
|
|
|
+ sourceColor:'#929CA8',
|
|
|
+ contentColor:'#C1C5CD',
|
|
|
+ btnColor:'#5373E7',
|
|
|
+ glossaryTitle:'#929CA8',
|
|
|
+ glossarySubtitle:'#929CA8',
|
|
|
+ glossaryBg:'#3E4855',
|
|
|
+ newWordColor:'#8DA4EF',
|
|
|
+ newWordOtherColor:'#929CA8',
|
|
|
+ newWordStar:'#816C00',
|
|
|
+ newWordType:{
|
|
|
+ 'daochu':{
|
|
|
+ text:'导出',
|
|
|
+ color:'#801D45',
|
|
|
+ bg:'#F04F88'
|
|
|
+ },
|
|
|
+ 'xuanbi':{
|
|
|
+ text:'选必',
|
|
|
+ color:'#0A2E81',
|
|
|
+ bg:'#5E89EF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ phraseColor:'#ED5F00',
|
|
|
+ phraseOhterColor:'#929CA8',
|
|
|
+ statisticTitle:'#D0D3D9',
|
|
|
+ statisticValue:'#5373E7',
|
|
|
+ menuBg:'#EEF3FF',
|
|
|
+ audiobg:'#3E4855',
|
|
|
+ audioBorder:'#2F3742'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:'armyGreen',
|
|
|
+ contentBg:'#2A2F2C',
|
|
|
+ contentInnerBg:'#393F3C',
|
|
|
+ navBg:'#393F3C',
|
|
|
+ border:'#13392E',
|
|
|
+ bg:'#13392E',
|
|
|
+ border_active:'#FFFFFF',
|
|
|
+ boxBorder:'#2A2F2C',
|
|
|
+ titleColor:'#30A47D',
|
|
|
+ sourceColor:'#99A29E',
|
|
|
+ contentColor:'#C1C5CD',
|
|
|
+ btnColor:'#30A47D',
|
|
|
+ glossaryTitle:'#99A29E',
|
|
|
+ glossarySubtitle:'#99A29E',
|
|
|
+ glossaryBg:'#4A524E',
|
|
|
+ newWordColor:'#8DA4EF',
|
|
|
+ newWordOtherColor:'#99A29E',
|
|
|
+ newWordStar:'#816C00',
|
|
|
+ newWordType:{
|
|
|
+ 'daochu':{
|
|
|
+ text:'导出',
|
|
|
+ color:'#801D45',
|
|
|
+ bg:'#F04F88'
|
|
|
+ },
|
|
|
+ 'xuanbi':{
|
|
|
+ text:'选必',
|
|
|
+ color:'#0A2E81',
|
|
|
+ bg:'#5E89EF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ phraseColor:'#ED5F00',
|
|
|
+ phraseOhterColor:'#99A29E',
|
|
|
+ statisticTitle:'#D0D3D9',
|
|
|
+ statisticValue:'#30A47D',
|
|
|
+ menuBg:'#EEF3FF',
|
|
|
+ audiobg:'#4A524E',
|
|
|
+ audioBorder:'#393F3C'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activeIndex:0, // 选择主题色的索引
|
|
|
+ peruseId: this.$route.query.peruseId?this.$route.query.peruseId:'',
|
|
|
+ peruseDetail: null,
|
|
|
+ loading: false,
|
|
|
+ tagBg:['#C9EBFF','#FFFAC9','#D7C9FF'], // 标签背景色
|
|
|
+ tagColor:['#006DAA','#AA8500','#7849C4'], // 标签字体颜色
|
|
|
+ translateFlag: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 切换主题颜色
|
|
|
+ handleChangeBgColor(index){
|
|
|
+ this.activeIndex = index
|
|
|
+ this.inityuan()
|
|
|
+ },
|
|
|
+ // 获取精读详情
|
|
|
+ getPeruseDetail(){
|
|
|
+ this.loading = true
|
|
|
+ let MethodName = "/PaperServer/Client/Iread/GetIreadDetail";
|
|
|
+ let data = {
|
|
|
+ id: this.peruseId
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ this.peruseDetail = res.data
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ if(this.peruseId){
|
|
|
+ this.getPeruseDetail()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bookStore{
|
|
|
+ min-height: calc(100vh - 64px);
|
|
|
+ .navBar-right{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .article-color{
|
|
|
+ display: flex;
|
|
|
+ width: 132px;
|
|
|
+ height: 32px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ border-radius: 40px;
|
|
|
+ margin-left: 12px;
|
|
|
+ padding: 4px;
|
|
|
+ .color-item{
|
|
|
+ padding: 2px;
|
|
|
+ border: 2px solid transparent;
|
|
|
+ border-radius: 50%;
|
|
|
+ a{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: block;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .article-box{
|
|
|
+ width: 1000px;
|
|
|
+ margin: 90px auto;
|
|
|
+ background: #fff;
|
|
|
+ .article-top{
|
|
|
+ padding: 16px 24px 24px;
|
|
|
+ .preparation{
|
|
|
+ color:#929CA8;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ h3{
|
|
|
+ color:#2F3742;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 8px 0;
|
|
|
+ }
|
|
|
+ label{
|
|
|
+ margin: 0 8px 8px 0;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 0 8px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ color:#929CA8;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ margin: 0;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .article-content{
|
|
|
+ border-top: 1px dashed #E5E6EB;
|
|
|
+ padding: 80px 120px 40px 120px;
|
|
|
+ .article-en,.article-cn{
|
|
|
+ color:#2F3742;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ word-break: break-word;
|
|
|
+ text-indent: 2em;
|
|
|
+ &.active{
|
|
|
+ color: #5E89EF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .article-en-title{
|
|
|
+ color:rgba(0, 0, 0, 0.88);
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ text-indent: 0;
|
|
|
+ }
|
|
|
+ .article-cn-title{
|
|
|
+ color:rgba(0, 0, 0, 0.48);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ text-indent: 0;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .voice-box{
|
|
|
+ padding: 4px 16px 4px 4px;
|
|
|
+ border-radius: 40px;
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ background:#F2F3F5;
|
|
|
+ width: 191px;
|
|
|
+ margin: 24px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.article-fontsize{
|
|
|
+ width: 144px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 30px;
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ border-radius: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ .el-input{
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .el-input-number__decrease, .el-input-number__increase{
|
|
|
+ height: 30px;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ color: #D9E2FC;
|
|
|
+ }
|
|
|
+ .el-input-number__decrease{
|
|
|
+ border-right: 1px solid #1B5441;
|
|
|
+ }
|
|
|
+ .el-input-number__increase{
|
|
|
+ border-left: 1px solid #1B5441;
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ height: 30px;
|
|
|
+ border: none;
|
|
|
+ line-height: 30px;
|
|
|
+ background: transparent;
|
|
|
+ color: #D9E2FC;
|
|
|
+ }
|
|
|
+}
|
|
|
+.navBar{
|
|
|
+ border-color: transparent;
|
|
|
+ &-white{
|
|
|
+ border-color: #EBEBEB;
|
|
|
+ .el-input-number__decrease, .el-input-number__increase,.el-input__inner{
|
|
|
+ color: #1C2129;
|
|
|
+ }
|
|
|
+ .el-input-number__decrease{
|
|
|
+ border-right: 1px solid #E5E6EB;
|
|
|
+ }
|
|
|
+ .el-input-number__increase{
|
|
|
+ border-left: 1px solid #E5E6EB;
|
|
|
+ }
|
|
|
+ .goback{
|
|
|
+ color: #1D2129;
|
|
|
+ }
|
|
|
+ .border{
|
|
|
+ background: #E5E6EB;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+ .article-title{
|
|
|
+ color: #86909C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-darkGreen{
|
|
|
+ .el-input-number__decrease{
|
|
|
+ border-right: 1px solid #1B5441;
|
|
|
+ }
|
|
|
+ .el-input-number__increase{
|
|
|
+ border-left: 1px solid #1B5441;
|
|
|
+ }
|
|
|
+ .goback{
|
|
|
+ color: #E9F7F2;
|
|
|
+ }
|
|
|
+ .border{
|
|
|
+ background: #1B5441;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+ .article-title{
|
|
|
+ color: #CCEBE1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-darkBlue{
|
|
|
+ .el-input-number__decrease{
|
|
|
+ border-right: 1px solid #1C2129;
|
|
|
+ }
|
|
|
+ .el-input-number__increase{
|
|
|
+ border-left: 1px solid #1C2129;
|
|
|
+ }
|
|
|
+ .goback{
|
|
|
+ color: #E9F7F2;
|
|
|
+ }
|
|
|
+ .border{
|
|
|
+ background: #667180;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+ .article-title{
|
|
|
+ color: #D9E2FC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-armyGreen{
|
|
|
+ .el-input-number__decrease{
|
|
|
+ border-right: 1px solid #2A2F2C;
|
|
|
+ }
|
|
|
+ .el-input-number__increase{
|
|
|
+ border-left: 1px solid #2A2F2C;
|
|
|
+ }
|
|
|
+ .goback{
|
|
|
+ color: #E9F7F2;
|
|
|
+ }
|
|
|
+ .border{
|
|
|
+ background: #99A29E;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+ .article-title{
|
|
|
+ color: #D9E2FC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
