|
|
@@ -0,0 +1,182 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-prev-Textdes Textproblem" v-if="curQue">
|
|
|
+ <h2 v-if="curQue.title">{{curQue.title}}</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,index) in curQue.option" :key="index">
|
|
|
+ <b v-if="item.number">{{item.number}}.</b>
|
|
|
+ <div class="content-right">
|
|
|
+ <template v-if="item.detail.wordsList.length>0">
|
|
|
+ <div class="con-box">
|
|
|
+ <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in item.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
|
|
|
+ <template v-if="item.detail.wordsList[indexCon + 1] && item.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(item.detail.wordsList[indexCon + 1].chs) > -1">
|
|
|
+ <div class="synthesis-box">
|
|
|
+ <div>
|
|
|
+ <span class="pinyin" v-if="item.detail.pyPosition=='top'">{{itemCon.pinyin}}</span>
|
|
|
+ <span class="hanzi content-con">{{itemCon.chs}}</span>
|
|
|
+ <span class="pinyin" v-if="item.detail.pyPosition=='bottom'">{{itemCon.pinyin}}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left">
|
|
|
+ <span class="pinyin" v-if="item.detail.pyPosition=='top'">{{item.detail.wordsList[indexCon + 1].pinyin}}</span>
|
|
|
+ <span class="hanzi content-con">{{item.detail.wordsList[indexCon + 1].chs}}</span>
|
|
|
+ <span class="pinyin" v-if="item.detail.pyPosition=='bottom'">{{item.detail.wordsList[indexCon + 1].pinyin}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span class="pinyin" v-if="item.detail.pyPosition=='top'">{{itemCon.pinyin}}</span>
|
|
|
+ <span class="hanzi content-con">{{itemCon.chs}}</span>
|
|
|
+ <span class="pinyin" v-if="item.detail.pyPosition=='bottom'">{{itemCon.pinyin}}</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <p class="hanzi content-con">
|
|
|
+ {{item.detail.sentence}}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <span class="english" v-if="item.en">{{item.en}}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: ["curQue"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 处理数据
|
|
|
+ handleData(){
|
|
|
+ let _this = this
|
|
|
+ let curQue = JSON.parse(JSON.stringify(this.curQue));
|
|
|
+ curQue.option.forEach((dItem, dIndex) => {
|
|
|
+ let paraArr = []
|
|
|
+ dItem.detail.wordsList.forEach((sItem, sIndex) => {
|
|
|
+ this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
|
|
|
+ let obj = {
|
|
|
+ pinyin: sItem.pinyin,
|
|
|
+ chs: sItem.chs,
|
|
|
+ isShow: sItem.isShow,
|
|
|
+ };
|
|
|
+ paraArr.push(obj);
|
|
|
+ })
|
|
|
+ this.$set(_this.curQue.option[dIndex].detail,'resArr',paraArr)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //词和标点合一起
|
|
|
+ mergeWordSymbol(sItem, wItem, curIndex) {
|
|
|
+ let leg = sItem.length;
|
|
|
+ if (curIndex < leg - 1) {
|
|
|
+ if (this.chsFhList.indexOf(wItem.chs) > -1) {
|
|
|
+ wItem.isShow = false;
|
|
|
+ } else {
|
|
|
+ wItem.isShow = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.handleData()
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.Textproblem{
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 24px;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ h2{
|
|
|
+ margin: 16px 0 0;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ padding-top: 16px;
|
|
|
+ li{
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ b{
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ margin-right: 4px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .content-right{
|
|
|
+ flex: 1;
|
|
|
+ .content-con{
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000000;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ margin: 0;
|
|
|
+ &.content-con-small{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con-box{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ .con-item{
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 1px;
|
|
|
+ &.con-item-0{
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .pinyin{
|
|
|
+ font-family: 'GB-PINYINOK-B';
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #000000;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ .synthesis-box{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .english{
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 150%;
|
|
|
+ font-family: 'robot';
|
|
|
+ display: block;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
