|
|
@@ -1,67 +1,123 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="Big-Book-prev-Textdes" v-if="curQue">
|
|
|
- <h2 v-if="curQue.title">{{curQue.title}}</h2>
|
|
|
- {{dataType}}
|
|
|
+ <h2 v-if="curQue.title">{{ curQue.title }}</h2>
|
|
|
<ul>
|
|
|
<li v-for="(items, indexs) in curQue.option" :key="indexs">
|
|
|
- <b v-if="items.number">{{ items.number }}</b>
|
|
|
- <p :class="[oldsrc==items.mp3_list[0].url?palyClass:'']" @click="handlePlayVoice(items.mp3_list[0].url)" v-if="items.mp3_list&&items.mp3_list.length>0">
|
|
|
- </p>
|
|
|
- <!-- 句子内容 -->
|
|
|
- <div class="item-content">
|
|
|
- <!-- 如果不是填空题 不替换 -->
|
|
|
- <template v-if="dataType.indexOf('sentence_input_chs')==-1">
|
|
|
- <template v-if="items.detail.wordsList.length==0">
|
|
|
- <p :class="['content-con']" v-if="items.detail.sentence">{{items.detail.sentence}}</p>
|
|
|
+ <b v-if="items.number">{{ items.number }}</b>
|
|
|
+ <p
|
|
|
+ :class="[oldsrc == items.mp3_list[0].id ? palyClass : '']"
|
|
|
+ @click="handlePlayVoice(items.mp3_list[0].id)"
|
|
|
+ v-if="items.mp3_list && items.mp3_list.length > 0"
|
|
|
+ ></p>
|
|
|
+ <!-- 句子内容 -->
|
|
|
+ <div class="item-content">
|
|
|
+ <!-- 如果不是填空题 不替换 -->
|
|
|
+ <template v-if="dataType.indexOf('sentence_input_chs') == -1">
|
|
|
+ <template v-if="items.detail.wordsList.length == 0">
|
|
|
+ <p :class="['content-con']" v-if="items.detail.sentence">
|
|
|
+ {{ items.detail.sentence }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="con-box">
|
|
|
+ <div
|
|
|
+ :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
|
|
|
+ v-for="(itemCon, indexCon) in items.detail.resArr"
|
|
|
+ :key="indexCon"
|
|
|
+ v-show="itemCon.isShow"
|
|
|
+ >
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ items.detail.wordsList[indexCon + 1] &&
|
|
|
+ items.detail.wordsList[indexCon + 1].chs &&
|
|
|
+ chsFhList.indexOf(
|
|
|
+ items.detail.wordsList[indexCon + 1].chs
|
|
|
+ ) > -1
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="synthesis-box">
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="pinyin"
|
|
|
+ :class="[
|
|
|
+ noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ >{{ itemCon.pinyin }}</span
|
|
|
+ >
|
|
|
+ <span class="hanzi content-con">{{ itemCon.chs }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left">
|
|
|
+ <span
|
|
|
+ class="pinyin"
|
|
|
+ :class="[
|
|
|
+ noFont.indexOf(
|
|
|
+ items.detail.wordsList[indexCon + 1].pinyin
|
|
|
+ ) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ >{{
|
|
|
+ items.detail.wordsList[indexCon + 1].pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span class="hanzi content-con">{{
|
|
|
+ items.detail.wordsList[indexCon + 1].chs
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <div class="con-box">
|
|
|
- <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in items.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
|
|
|
- <template v-if="items.detail.wordsList[indexCon + 1] && items.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(items.detail.wordsList[indexCon + 1].chs) > -1">
|
|
|
- <div class="synthesis-box">
|
|
|
- <div>
|
|
|
- <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']">{{itemCon.pinyin}}</span>
|
|
|
- <span class="hanzi content-con">{{itemCon.chs}}</span>
|
|
|
- </div>
|
|
|
- <div style="text-align: left">
|
|
|
- <span class="pinyin" :class="[noFont.indexOf(items.detail.wordsList[indexCon + 1].pinyin)>-1?'noFont':'']">{{items.detail.wordsList[indexCon + 1].pinyin}}</span>
|
|
|
- <span class="hanzi content-con">{{items.detail.wordsList[indexCon + 1].chs}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']">{{itemCon.pinyin}}</span>
|
|
|
- <span class="hanzi content-con">{{itemCon.chs}}</span>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <span
|
|
|
+ class="pinyin"
|
|
|
+ :class="[
|
|
|
+ noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ >{{ itemCon.pinyin }}</span
|
|
|
+ >
|
|
|
+ <span class="hanzi content-con">{{ itemCon.chs }}</span>
|
|
|
</template>
|
|
|
- <b class="content-en" v-if="items.en">{{items.en}}</b>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
-
|
|
|
-
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <template v-if="dataType.indexOf('sentence_answer_chs')>-1">
|
|
|
- <input
|
|
|
- @input="handleInput"
|
|
|
- :class="['item-input']"
|
|
|
- v-model="curQue.Bookanswer[indexs]"
|
|
|
- placeholder="输入"
|
|
|
- >
|
|
|
- </template>
|
|
|
- <template v-if="dataType.indexOf('sentence_judge_chs')>-1">
|
|
|
- <div class="judge-box">
|
|
|
- <a :class="['right-btn',curQue.Bookanswer[indexs]=='right'?'active':'']" @click="handleSelectJudge('right',indexs)"></a>
|
|
|
- <a :class="['error-btn',curQue.Bookanswer[indexs]=='error'?'active':'']" @click="handleSelectJudge('error',indexs)"></a>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="dataType.indexOf('sentence_record_chs')>-1">
|
|
|
- <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box" v-if="items.IsRecord"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <b class="content-en" v-if="items.en">{{ items.en }}</b>
|
|
|
</template>
|
|
|
+ <template v-else> </template>
|
|
|
+ </div>
|
|
|
+ <template v-if="dataType.indexOf('sentence_answer_chs') > -1">
|
|
|
+ <input
|
|
|
+ @input="handleInput"
|
|
|
+ :class="['item-input']"
|
|
|
+ v-model="curQue.Bookanswer[indexs]"
|
|
|
+ placeholder="输入"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="dataType.indexOf('sentence_judge_chs') > -1">
|
|
|
+ <div class="judge-box">
|
|
|
+ <a
|
|
|
+ :class="[
|
|
|
+ 'right-btn',
|
|
|
+ curQue.Bookanswer[indexs] == 'right' ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ @click="handleSelectJudge('right', indexs)"
|
|
|
+ ></a>
|
|
|
+ <a
|
|
|
+ :class="[
|
|
|
+ 'error-btn',
|
|
|
+ curQue.Bookanswer[indexs] == 'error' ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ @click="handleSelectJudge('error', indexs)"
|
|
|
+ ></a>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="dataType.indexOf('sentence_record_chs') > -1">
|
|
|
+ <Soundrecord
|
|
|
+ @handleWav="handleWav"
|
|
|
+ type="mini"
|
|
|
+ class="luyin-box"
|
|
|
+ v-if="items.IsRecord"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -70,122 +126,120 @@
|
|
|
<script>
|
|
|
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
|
|
|
export default {
|
|
|
- components: {Soundrecord},
|
|
|
+ components: { Soundrecord },
|
|
|
props: ["curQue"],
|
|
|
data() {
|
|
|
return {
|
|
|
- audio: new Audio(),
|
|
|
- oldsrc: '', // 存储播放音频的src 用来比对是否点击的是同一个音频
|
|
|
- palyClass: '',
|
|
|
- dataType: [], // 题型
|
|
|
- chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
|
|
|
- noFont: ['~','!','@','#','$','%','^','&','*','(',')'], // 对应不要拼音字体
|
|
|
+ audio: new Audio(),
|
|
|
+ oldsrc: "", // 存储播放音频的src 用来比对是否点击的是同一个音频
|
|
|
+ palyClass: "",
|
|
|
+ dataType: [], // 题型
|
|
|
+ chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
|
|
|
+ noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- // input 输入时
|
|
|
- handleInput (e) {
|
|
|
- e.target.value = e.target.value ? e.target.value.trim() : '';
|
|
|
- },
|
|
|
- handlePlayVoice(url) {
|
|
|
- let _this = this;
|
|
|
- if (!url) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (!this.audio.paused && this.oldsrc == url) {
|
|
|
- this.audio.pause();
|
|
|
- }else if(this.audio.paused && this.oldsrc == url){
|
|
|
- this.audio.play();
|
|
|
- } else {
|
|
|
- _this.audio.pause();
|
|
|
- _this.audio.load();
|
|
|
- _this.audio.src = url;
|
|
|
- _this.oldsrc = url
|
|
|
- _this.audio.loop = false;
|
|
|
- _this.audio.play();
|
|
|
- }
|
|
|
- },
|
|
|
- // 处理数据
|
|
|
- handleData(){
|
|
|
- let _this = this
|
|
|
- this.dataType = []
|
|
|
- if(!this.curQue.Bookanswer){
|
|
|
- let curCorrect = [];
|
|
|
- this.curQue.option.forEach(item => {
|
|
|
- curCorrect.push('')
|
|
|
- });
|
|
|
- this.$set(this.curQue, "Bookanswer", curCorrect);
|
|
|
- }
|
|
|
- this.curQue.fn_list.forEach(item=>{
|
|
|
- if(item.isFn){
|
|
|
- _this.dataType.push(item.type)
|
|
|
- }
|
|
|
- })
|
|
|
- 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)
|
|
|
- if(paraArr.length==0){
|
|
|
- let str = '就那天___'
|
|
|
- let arrs = str.split(/_{2,}/g)
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //词和标点合一起
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 判断题选择
|
|
|
- handleSelectJudge(obj,index){
|
|
|
- this.$set(this.curQue.Bookanswer, index, obj);
|
|
|
- },
|
|
|
- handleWav(data) {
|
|
|
-
|
|
|
- },
|
|
|
- handleDatas (str, type) {
|
|
|
- str = str.trim();
|
|
|
- str = str.replace(/_{2,}/g, "^ ");
|
|
|
- str =
|
|
|
- type == "hanzi" ? str.replace(/\s+/g, "") : str.replace(/\s+/g, " ");
|
|
|
- let resArr = type == "hanzi" ? str.split("") : str.split(/\s+/);
|
|
|
- return resArr;
|
|
|
- },
|
|
|
+ // input 输入时
|
|
|
+ handleInput(e) {
|
|
|
+ e.target.value = e.target.value ? e.target.value.trim() : "";
|
|
|
+ },
|
|
|
+ handlePlayVoice(url) {
|
|
|
+ let _this = this;
|
|
|
+ if (!url) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.audio.paused && this.oldsrc == url) {
|
|
|
+ this.audio.pause();
|
|
|
+ } else if (this.audio.paused && this.oldsrc == url) {
|
|
|
+ this.audio.play();
|
|
|
+ } else {
|
|
|
+ _this.audio.pause();
|
|
|
+ _this.audio.load();
|
|
|
+ _this.audio.src = url;
|
|
|
+ _this.oldsrc = url;
|
|
|
+ _this.audio.loop = false;
|
|
|
+ _this.audio.play();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理数据
|
|
|
+ handleData() {
|
|
|
+ let _this = this;
|
|
|
+ this.dataType = [];
|
|
|
+ if (!this.curQue.Bookanswer) {
|
|
|
+ let curCorrect = [];
|
|
|
+ this.curQue.option.forEach((item) => {
|
|
|
+ curCorrect.push("");
|
|
|
+ });
|
|
|
+ this.$set(this.curQue, "Bookanswer", curCorrect);
|
|
|
+ }
|
|
|
+ this.curQue.fn_list.forEach((item) => {
|
|
|
+ if (item.isFn) {
|
|
|
+ _this.dataType.push(item.type);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ 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);
|
|
|
+ console.log();
|
|
|
+ if (paraArr.length == 0) {
|
|
|
+ let str = "就那天___";
|
|
|
+ let arrs = str.split(/_{2,}/g);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //词和标点合一起
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 判断题选择
|
|
|
+ handleSelectJudge(obj, index) {
|
|
|
+ this.$set(this.curQue.Bookanswer, index, obj);
|
|
|
+ },
|
|
|
+ handleWav(data) {},
|
|
|
+ handleDatas(str, type) {
|
|
|
+ str = str.trim();
|
|
|
+ str = str.replace(/_{2,}/g, "^ ");
|
|
|
+ str =
|
|
|
+ type == "hanzi" ? str.replace(/\s+/g, "") : str.replace(/\s+/g, " ");
|
|
|
+ let resArr = type == "hanzi" ? str.split("") : str.split(/\s+/);
|
|
|
+ return resArr;
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
- this.handleData()
|
|
|
+ this.handleData();
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
let _this = this;
|
|
|
_this.audio.addEventListener("play", function () {
|
|
|
- _this.palyClass = 'active'
|
|
|
+ _this.palyClass = "active";
|
|
|
});
|
|
|
_this.audio.addEventListener("pause", function () {
|
|
|
- _this.palyClass = ''
|
|
|
+ _this.palyClass = "";
|
|
|
});
|
|
|
_this.audio.addEventListener("ended", function () {
|
|
|
- _this.palyClass = ''
|
|
|
+ _this.palyClass = "";
|
|
|
});
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
@@ -199,145 +253,151 @@ export default {
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
//@import url(); 引入公共css类
|
|
|
-.Big-Book-prev-Textdes{
|
|
|
- width: 100%;
|
|
|
- h2{
|
|
|
- font-weight: normal;
|
|
|
+.Big-Book-prev-Textdes {
|
|
|
+ width: 100%;
|
|
|
+ h2 {
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ margin: 0 2px 8px 2px;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ justify-content: start;
|
|
|
+ list-style: none;
|
|
|
+ li {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ > b {
|
|
|
+ width: 24px;
|
|
|
+ line-height: 24px;
|
|
|
font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-weight: 400;
|
|
|
color: #000000;
|
|
|
- margin: 0 2px 8px 2px;
|
|
|
- }
|
|
|
- ul{
|
|
|
- display: flex;
|
|
|
- flex-flow: wrap;
|
|
|
- justify-content: start;
|
|
|
- list-style: none;
|
|
|
- li{
|
|
|
- width: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 8px 12px;
|
|
|
- margin-bottom: 8px;
|
|
|
- >b{
|
|
|
- width: 24px;
|
|
|
- line-height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- text-align: right;
|
|
|
- margin-right: 8px;
|
|
|
- font-weight: 400;
|
|
|
- color: #000000;
|
|
|
- // margin-top: 4px;
|
|
|
- font-family: 'FZJCGFKTK';
|
|
|
- }
|
|
|
- >p{
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- cursor: pointer;
|
|
|
- background: url('../../../assets/newImage/common/icon-voice.png') left center no-repeat;
|
|
|
- background-size: 24px;
|
|
|
- margin: 0px 8px 0 0;
|
|
|
- &.active{
|
|
|
- background: url('../../../assets/newImage/common/icon-voice-play-zise.png') left center no-repeat;
|
|
|
- background-size: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- .item-content{
|
|
|
- flex: 1;
|
|
|
- .content-con{
|
|
|
- font-size: 20px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- font-family: 'FZJCGFKTK';
|
|
|
- margin: 0;
|
|
|
- &.content-con-small{
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- .content-en{
|
|
|
- font-weight: normal;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- font-family: 'robot';
|
|
|
- }
|
|
|
- .con-box{
|
|
|
- display: flex;
|
|
|
- flex-flow: wrap;
|
|
|
- .con-item{
|
|
|
- text-align: center;
|
|
|
- padding: 0 3px;
|
|
|
- &.con-item-0{
|
|
|
- text-align: left;
|
|
|
- padding-left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- span{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .pinyin{
|
|
|
- font-family: 'GB-PINYINOK-B';
|
|
|
- font-size: 14px;
|
|
|
- line-height: 130%;
|
|
|
- color: #000000;
|
|
|
- height: 18px;
|
|
|
- &.noFont{
|
|
|
- font-family: initial;
|
|
|
- }
|
|
|
- }
|
|
|
- .synthesis-box{
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- input{
|
|
|
- width: 68px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
- outline: none;
|
|
|
- height: 32px;
|
|
|
- padding: 4px 8px;
|
|
|
- color: #000000;
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- }
|
|
|
- .judge-box{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- a{
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- background: #fff url('../../../assets/newImage/common/right-btn.png') center no-repeat;
|
|
|
- background-size: 24px;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- &:hover,&.active{
|
|
|
- background-color: #E5FFF0;
|
|
|
- border-color: #00C850;
|
|
|
- }
|
|
|
- }
|
|
|
- a.error-btn{
|
|
|
- background: #fff url('../../../assets/newImage/common/error-btn.png') center no-repeat;
|
|
|
- background-size: 24px;
|
|
|
- margin-left: 4px;
|
|
|
- &:hover,&.active{
|
|
|
- background-color: #FFE5E5;
|
|
|
- border-color: #DE4444;
|
|
|
- }
|
|
|
- }
|
|
|
+ // margin-top: 4px;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: url("../../../assets/newImage/common/icon-voice.png") left
|
|
|
+ center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ margin: 0px 8px 0 0;
|
|
|
+ &.active {
|
|
|
+ background: url("../../../assets/newImage/common/icon-voice-play-zise.png")
|
|
|
+ left center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-content {
|
|
|
+ flex: 1;
|
|
|
+ .content-con {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ margin: 0;
|
|
|
+ &.content-con-small {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-en {
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ font-family: "robot";
|
|
|
+ }
|
|
|
+ .con-box {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ .con-item {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 3px;
|
|
|
+ &.con-item-0 {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 0;
|
|
|
}
|
|
|
- .luyin-box{
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 8px;
|
|
|
- width: 64px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .pinyin {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 130%;
|
|
|
+ color: #000000;
|
|
|
+ height: 18px;
|
|
|
+ &.noFont {
|
|
|
+ font-family: initial;
|
|
|
}
|
|
|
+ }
|
|
|
+ .synthesis-box {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ width: 68px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ outline: none;
|
|
|
+ height: 32px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ color: #000000;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ }
|
|
|
+ .judge-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ a {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ background: #fff url("../../../assets/newImage/common/right-btn.png")
|
|
|
+ center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ background-color: #e5fff0;
|
|
|
+ border-color: #00c850;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a.error-btn {
|
|
|
+ background: #fff url("../../../assets/newImage/common/error-btn.png")
|
|
|
+ center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ margin-left: 4px;
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ background-color: #ffe5e5;
|
|
|
+ border-color: #de4444;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ .luyin-box {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 64px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
guanchunjie