|
|
@@ -94,6 +94,52 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <template v-if="printForm.range.indexOf('vocab')>-1">
|
|
|
+ <h5>词表</h5>
|
|
|
+ <ul class="newwordlist">
|
|
|
+ <li v-for="(itemW,indexW) in wordLit" :key="indexW" :class="['li-'+colorObj.type]">
|
|
|
+ <div class="word-info">
|
|
|
+ <div class="word-info-top">
|
|
|
+ <b class="word" :style="{color:colorObj.newWordColor}">{{itemW.word}}</b>
|
|
|
+ <span class="symbol" :style="{color:colorObj.newWordOtherColor}">{{itemW.symbol}}</span>
|
|
|
+ <label class="word-type" :style="{color:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].color:'',background:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].bg:''}">{{itemW.typeCn}}</label>
|
|
|
+ <span class="star" v-if="itemW.rate">
|
|
|
+ <svg-icon icon-class="star-filled" v-for="(itemS,indexS) in itemW.rate" :key="indexS" :style="{color:colorObj.newWordStar}"></svg-icon>
|
|
|
+ </span>
|
|
|
+ <div class="para-list">
|
|
|
+ <div class="para" v-for="(itemP,indexP) in itemW.paraList" :key="indexP">
|
|
|
+ <span class="cixing" :style="{color:colorObj.newWordOtherColor}">{{itemP.cixing}}</span>
|
|
|
+ <span class="shiyi" :style="{color:colorObj.newWordOtherColor}">{{itemP.para}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <h5 v-if="articleInfo.art_phrase_data.length>0">短语</h5>
|
|
|
+ <ul class="phraselist" v-if="articleInfo.art_phrase_data.length>0">
|
|
|
+ <li v-for="(itemW,indexW) in phraseList" :key="indexW">
|
|
|
+ <div class="word-info">
|
|
|
+ <div class="word-info-top">
|
|
|
+ <b class="phrase" :style="{color:colorObj.phraseColor}" @click="showItem(itemW,indexW)">{{itemW.exp_title}}</b>
|
|
|
+ <div class="para-list">
|
|
|
+ <div class="para">
|
|
|
+ <span class="shiyi" :style="{color:colorObj.phraseOhterColor}">{{itemW.exp_content}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <h5 v-if="articleInfo.art_explain_data.length>0">注释</h5>
|
|
|
+ <ul class="explainlist">
|
|
|
+ <li v-for="(itemW,indexW) in articleInfo.art_explain_data" :key="indexW">
|
|
|
+ <b class="prefix" :style="{color:colorObj.phraseOhterColor}">{{itemW.exp_title}}</b>
|
|
|
+ <div class="para-list" :style="{color:colorObj.newWordOtherColor}" v-html="itemW.exp_content"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </template>
|
|
|
+
|
|
|
</div>
|
|
|
<footer class="print-footer">
|
|
|
<span>{{printForm.school}}</span>
|
|
|
@@ -365,6 +411,12 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
item.exp_content = paraStr
|
|
|
+ item.word = item.word_name
|
|
|
+ item.symbol = item.word_explain.ph?item.word_explain.ph:''
|
|
|
+ item.paraList = item.word_explain.word_para_list
|
|
|
+ item.type = item.word_explain.vl_level?item.word_explain.vl_level:''
|
|
|
+ item.typeCn = item.word_explain.vl_level_name?item.word_explain.vl_level_name:''
|
|
|
+ item.rate = item.word_explain.star?item.word_explain.star:null
|
|
|
})
|
|
|
this.phraseList.forEach(item=>{
|
|
|
item.type='phrase'
|
|
|
@@ -628,6 +680,123 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ h5{
|
|
|
+ color: #000;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 44px;
|
|
|
+ margin: 24px 0;
|
|
|
+ }
|
|
|
+ .newwordlist,.phraselist{
|
|
|
+ li{
|
|
|
+ padding: 4px;
|
|
|
+ display: flex;
|
|
|
+ margin: 1px 0;
|
|
|
+ border-radius: 4px;
|
|
|
+ .word-info{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .sentence{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2F3742;
|
|
|
+ }
|
|
|
+ .word-type{
|
|
|
+ padding: 0px 8px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin: 4px 8px 0 0;
|
|
|
+ }
|
|
|
+ .el-icon-arrow-right{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ color: #929CA8;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .word-info-top{
|
|
|
+ display: flex;
|
|
|
+ .word{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #175DFF;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-family: 'Arial';
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .phrase{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #ED5F00;
|
|
|
+ }
|
|
|
+ .symbol{
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #667180;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-family: 'Arial';
|
|
|
+ }
|
|
|
+ .star{
|
|
|
+ margin-right: 8px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .para-list{
|
|
|
+ flex: 1;
|
|
|
+ .para{
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #1C2129;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ .cixing{
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .word-info-bottom{
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #929CA8;
|
|
|
+ margin: 4px 8px 0 0;
|
|
|
+ span{
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .phraselist{
|
|
|
+ .para{
|
|
|
+ line-height: 32px !important;
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .explainlist{
|
|
|
+ li{
|
|
|
+ padding: 8px;
|
|
|
+ margin: 4px 0;
|
|
|
+ .prefix{
|
|
|
+ color: #151515;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ .para-list{
|
|
|
+ color: #2F3742;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
&-right{
|
|
|
width: 360px;
|
natasha