|
|
@@ -0,0 +1,604 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="NNPE-ArticleView" v-if="articleInfo">
|
|
|
+ <template v-if="resArr&&resArr.wordsList&&resArr.wordsList[0]&&resArr.wordsList[0][0]&&resArr.wordsList[0][0].hasOwnProperty('pno')&&resArr.wordsList[0][0].pno===0">
|
|
|
+ <h2 :class="['NNPE-words',]">
|
|
|
+ <span v-for="(itemR,indexR) in resArr.wordsList[0]" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700'}"
|
|
|
+ :class="[
|
|
|
+ itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':''
|
|
|
+ ]">
|
|
|
+ <template v-if="itemR.isShow">
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':''
|
|
|
+ ]"
|
|
|
+ >{{ itemR.tokens[2] }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="NNPE-chs NNPE-chs-both"
|
|
|
+ v-if="resArr.wordsList[0][indexR + 1] &&
|
|
|
+ resArr.wordsList[0][indexR + 1].tokens[2] &&
|
|
|
+ enFhList.indexOf(resArr.wordsList[0][indexR + 1].tokens[2]) > -1"
|
|
|
+ :class="[
|
|
|
+ resArr.wordsList[0][indexR + 1].type,resArr.wordsList[0][indexR + 1].tokens[9]===' '?'marginRight':'',resArr.wordsList[0][indexR + 1].highIndex?'fontWeight':'',resArr.wordsList[0][indexR + 1].marginRight?'marginSingleRight':''
|
|
|
+ ]"
|
|
|
+ >{{ resArr.wordsList[0][indexR + 1].tokens[2] }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <!-- {{itemR.tokens[2]}} -->
|
|
|
+ </span>
|
|
|
+ </h2>
|
|
|
+ </template>
|
|
|
+ <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
|
|
|
+ {{articleInfo.art_author+' · '+articleInfo.study_phase_name+'版 · 第 '+articleInfo.iss_no+' 期 · '+articleInfo.release_date+' · '+articleInfo.chn_item+(articleInfo.page_no_in_pub?' · P'+articleInfo.page_no_in_pub:'')}}
|
|
|
+ </h6>
|
|
|
+ <div class="audio-box">
|
|
|
+ <div
|
|
|
+ class="aduioLine-content aduioLine-box"
|
|
|
+ v-if="
|
|
|
+ articleInfo.art_sound_url
|
|
|
+ " :style="{background:colorObj.audiobg,borderColor:colorObj.audioBorder}"
|
|
|
+ >
|
|
|
+ <AudioLine
|
|
|
+ audioId="artNormalAudio"
|
|
|
+ :mp3="articleInfo.art_sound_url"
|
|
|
+ :getCurTime="getCurTime"
|
|
|
+ ref="audioLine"
|
|
|
+ :mp3Source="'mp3'"
|
|
|
+ />
|
|
|
+ <svg-icon icon-class="icon-wrapper" class="wrapper"></svg-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="resArr.wordsList&&resArr.wordsList.length > 0">
|
|
|
+ <div class="table-box" :class="['table-box-'+colorObj.type]">
|
|
|
+ <div
|
|
|
+ :class="['NNPE-detail']"
|
|
|
+ v-for="(item, index) in resArr.wordsList"
|
|
|
+ :key="'detail' + index"
|
|
|
+ >
|
|
|
+ <b class="para-index" :style="{fontSize:wordFontsize + 'px',color:resArr.timeList[index] && resArr.timeList[index] && curTime >= resArr.timeList[index].s && curTime <= resArr.timeList[index].e ? colorObj.type==='white'?'#2F3742':colorObj.type==='darkGreen'?'#299772':colorObj.type==='armyGreen'?'#30A47D':'#5373E7':colorObj.type==='white'?'#D0D3D9':colorObj.type==='darkGreen'?'#7A8983':colorObj.type==='armyGreen'?'#6B7C74':'#737781'}">{{index+1}}</b>
|
|
|
+ <div class="wordsList-box">
|
|
|
+ <div class="nnpe-sentence-box">
|
|
|
+ <div v-for="(pItem, pIndex) in item" :key="'wordsList' + pIndex">
|
|
|
+ <template v-if="pItem.isShow">
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'NNPE-words',
|
|
|
+ isPlaying &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ curTime >= resArr.timeList[index].s &&
|
|
|
+ curTime <= resArr.timeList[index].e
|
|
|
+ ? 'sentActive'
|
|
|
+ : '',
|
|
|
+ pItem.pno == paraIndex && pItem.sno == sentIndex
|
|
|
+ ? 'overActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ @click="
|
|
|
+ handleChangeTime(
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index].s
|
|
|
+ )
|
|
|
+ "
|
|
|
+ @mouseover="handleMouseover(pItem)"
|
|
|
+ @mouseleave="handleMouseleave"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ isPlaying &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index].e &&
|
|
|
+ resArr.timeList[index].tokens &&
|
|
|
+ resArr.timeList[index].tokens[pItem.wIndex]&&
|
|
|
+ curTime >=
|
|
|
+ resArr.timeList[index].tokens[pItem.wIndex].s &&
|
|
|
+ curTime <= resArr.timeList[index].e
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':''
|
|
|
+ ]"
|
|
|
+ :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index].tokens[pItem.wIndex]&&
|
|
|
+ curTime >=
|
|
|
+ resArr.timeList[index].tokens[pItem.wIndex].s &&
|
|
|
+ curTime <= resArr.timeList[index].tokens[pItem.wIndex].e?colorObj.statisticValue:
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ curTime >= resArr.timeList[index].s &&
|
|
|
+ curTime <= resArr.timeList[index].e?colorObj.contentColor:colorObj.type==='white'?'#D0D3D9':colorObj.type==='darkGreen'?'#7A8983':colorObj.type==='darkBlue'?'#737781':'#6B7C74'}"
|
|
|
+ >{{ pItem.tokens[2] }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="NNPE-chs NNPE-chs-both"
|
|
|
+ v-if="item[pIndex + 1] &&
|
|
|
+ item[pIndex + 1].tokens[2] &&
|
|
|
+ enFhList.indexOf(item[pIndex + 1].tokens[2]) > -1"
|
|
|
+ :class="[
|
|
|
+ isPlaying &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index].tokens[pItem.wIndex]&&
|
|
|
+ curTime >=
|
|
|
+ resArr.timeList[index].tokens[pItem.wIndex].s &&
|
|
|
+ curTime <= resArr.timeList[index].e
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ item[pIndex + 1].tokens[9]===' '?'marginRight':'',item[pIndex + 1].marginRight?'marginSingleRight':''
|
|
|
+ ]"
|
|
|
+ :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index].tokens[pItem.wIndex]&&
|
|
|
+ curTime >=
|
|
|
+ resArr.timeList[index].tokens[pItem.wIndex].s &&
|
|
|
+ curTime <= resArr.timeList[index].tokens[pItem.wIndex].e?colorObj.statisticValue:resArr.timeList[index] &&
|
|
|
+ resArr.timeList[index] &&
|
|
|
+ curTime >= resArr.timeList[index].s &&
|
|
|
+ curTime <= resArr.timeList[index].e?colorObj.contentColor:colorObj.type==='white'?'#D0D3D9':colorObj.type==='darkGreen'?'#7A8983':colorObj.type==='darkBlue'?'#737781':'#6B7C74'}"
|
|
|
+ >{{ item[pIndex + 1].tokens[2] }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operate-box" :style="{background:colorObj.contentBg}">
|
|
|
+ <div class="operate-box-inner" :style="{background:colorObj.contentInnerBg}">
|
|
|
+ <div class="operate-box-inner-content">
|
|
|
+ <div class="operate-item">
|
|
|
+ <svg-icon icon-class="Go-start" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
|
|
|
+ <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">上一句</span>
|
|
|
+ </div>
|
|
|
+ <div class="operate-item">
|
|
|
+ <svg-icon icon-class="Type-drive" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
|
|
|
+ <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">听对比</span>
|
|
|
+ </div>
|
|
|
+ <div class="operate-item">
|
|
|
+ <b class="luyin-btn">
|
|
|
+ <svg-icon icon-class="Voice-luyin" :style="{color:'#fff'}"></svg-icon>
|
|
|
+ </b>
|
|
|
+ </div>
|
|
|
+ <div class="operate-item">
|
|
|
+ <svg-icon icon-class="Headphone-sound" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
|
|
|
+ <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">我读的</span>
|
|
|
+ </div>
|
|
|
+ <div class="operate-item">
|
|
|
+ <svg-icon icon-class="Go-start" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
|
|
|
+ <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">下一句</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
|
|
|
+ <div class="clear-box">
|
|
|
+ <h5>词汇标记设置</h5>
|
|
|
+ <div class="item">
|
|
|
+ <span>跟读</span>
|
|
|
+ <el-switch
|
|
|
+ v-model="repeatAfter"
|
|
|
+ active-color="#175DFF"
|
|
|
+ inactive-color="#D0D3D9"
|
|
|
+ key="sent-repeatAfter">
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <span>单句模式</span>
|
|
|
+ <el-switch
|
|
|
+ v-model="singleModel"
|
|
|
+ active-color="#175DFF"
|
|
|
+ inactive-color="#D0D3D9"
|
|
|
+ key="sent-singleModel"
|
|
|
+ @change="mutualExclusive('singleModel','autoNextSent')">
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <span>自动下一句</span>
|
|
|
+ <el-switch
|
|
|
+ v-model="autoNextSent"
|
|
|
+ active-color="#175DFF"
|
|
|
+ inactive-color="#D0D3D9"
|
|
|
+ key="sent-autoNextSent"
|
|
|
+ @change="mutualExclusive('autoNextSent','singleModel')">
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import AudioLine from "@/components/common/AudioLine.vue"
|
|
|
+export default {
|
|
|
+ name: "ArticleView",
|
|
|
+ props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
|
|
|
+ components: {
|
|
|
+ AudioLine,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ resArr: [],
|
|
|
+ curTime: 0, //单位s
|
|
|
+ enFhList: [
|
|
|
+ ",",
|
|
|
+ ".",
|
|
|
+ ";",
|
|
|
+ "?",
|
|
|
+ "!",
|
|
|
+ ":",
|
|
|
+ ">",
|
|
|
+ "<",
|
|
|
+ "'",
|
|
|
+ "’",
|
|
|
+ "n't",
|
|
|
+ "n’t",
|
|
|
+ "n’ts",
|
|
|
+ "n‘t",
|
|
|
+ "'t",
|
|
|
+ "’t",
|
|
|
+ "‘t",
|
|
|
+ "'s",
|
|
|
+ "’s",
|
|
|
+ "‘s",
|
|
|
+ "'m",
|
|
|
+ "’m",
|
|
|
+ "‘m",
|
|
|
+ "'re",
|
|
|
+ "’re",
|
|
|
+ "‘re",
|
|
|
+ "'d",
|
|
|
+ "’d",
|
|
|
+ "‘d",
|
|
|
+ "'ve",
|
|
|
+ "’ve",
|
|
|
+ "‘ve",
|
|
|
+ ")",
|
|
|
+ "'ll",
|
|
|
+ "’ll",
|
|
|
+ "‘ll",
|
|
|
+ "”",
|
|
|
+ ],
|
|
|
+ articleImg: {}, // 文章图片
|
|
|
+ paraIndex: -1, //段落索引
|
|
|
+ sentIndex: -1, // 句子索引
|
|
|
+ repeatAfter: false,
|
|
|
+ singleModel: false,
|
|
|
+ autoNextSent: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isPlaying: function () {
|
|
|
+ let playing = false;
|
|
|
+ if (this.$refs.audioLine) {
|
|
|
+ playing = this.$refs.audioLine.audio.isPlaying;
|
|
|
+ }
|
|
|
+ return playing;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ getCurTime(curTime) {
|
|
|
+ this.curTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ handleData() {
|
|
|
+ let resArr = {
|
|
|
+ wordsList: [],
|
|
|
+ timeList: [],
|
|
|
+ };
|
|
|
+ let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
|
|
|
+ articleInfo.art_corpus_data.sentList.forEach((item,index) => {
|
|
|
+ let wordlist = []
|
|
|
+ item.tokens.forEach((items,indexs)=>{
|
|
|
+ let obj = {
|
|
|
+ sent_id:item.id,
|
|
|
+ sno: item.sno-1,
|
|
|
+ pno: item.pno,
|
|
|
+ text: item.text,
|
|
|
+ tokens: items,
|
|
|
+ wIndex: indexs,
|
|
|
+ isShow: this.enFhList.indexOf(items[2])==-1,
|
|
|
+ marginRight: indexs===item.tokens.length-1
|
|
|
+ }
|
|
|
+ wordlist.push(obj)
|
|
|
+ })
|
|
|
+ resArr.wordsList.push(wordlist)
|
|
|
+ resArr.timeList.push(articleInfo.art_sound_srt_data.sents[index])
|
|
|
+ });
|
|
|
+ this.resArr = resArr;
|
|
|
+ },
|
|
|
+ handleChangeTime(time) {
|
|
|
+ if (time>=0) {
|
|
|
+ this.curTime = time;
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //经过每个词，高亮句子
|
|
|
+ handleMouseover(pItem) {
|
|
|
+ this.paraIndex = pItem.pno;
|
|
|
+ this.sentIndex = pItem.sno;
|
|
|
+ },
|
|
|
+ handleMouseleave() {
|
|
|
+ this.paraIndex = -1;
|
|
|
+ this.sentIndex = -1;
|
|
|
+ },
|
|
|
+ mutualExclusive(val,val1){
|
|
|
+ if(this[val]){
|
|
|
+ this[val1] = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ if (this.articleInfo) {
|
|
|
+ this.handleData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.NNPE-ArticleView {
|
|
|
+ width: 100%;
|
|
|
+ .nnpe-article-author{
|
|
|
+ margin: 24px 0;
|
|
|
+ }
|
|
|
+ h2{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ &.sentActive {
|
|
|
+ background: rgba(24, 144, 255, 0.1);
|
|
|
+ }
|
|
|
+ &.overActive {
|
|
|
+ background: rgba(0, 0, 0, 0.06);
|
|
|
+ }
|
|
|
+ .wordActive {
|
|
|
+ color: #175DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-box {
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 64px;
|
|
|
+ // background: #f7f7f7;
|
|
|
+ // border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ :last-child {
|
|
|
+ :last-child.wordsList-box {
|
|
|
+ padding-bottom: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wordsList-box {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20px 0;
|
|
|
+ .nnpe-sentence-box {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ max-width: 50%;
|
|
|
+ display: block;
|
|
|
+ padding: 16px 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .NNPE-detail {
|
|
|
+ clear: both;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ .para-index{
|
|
|
+ color:#D0D3D9;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 26px;
|
|
|
+ padding-top: 20px;
|
|
|
+ width: 40px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ &-active{
|
|
|
+ color: #2F3742;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .NNPE-words {
|
|
|
+ float: left;
|
|
|
+ padding: 0;
|
|
|
+ &.noPadding{
|
|
|
+ padding:0;
|
|
|
+ }
|
|
|
+ &.sentActive {
|
|
|
+ background: rgba(24, 144, 255, 0.1);
|
|
|
+ }
|
|
|
+ &.overActive {
|
|
|
+ background: rgba(0, 0, 0, 0.06);
|
|
|
+ }
|
|
|
+ &.textLeft {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.textCenter {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ float: left;
|
|
|
+ cursor: pointer;
|
|
|
+ &.NNPE-chs {
|
|
|
+ // font-size: 24px;
|
|
|
+ font-family: 'Smartisan';
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ &.wordActive {
|
|
|
+ color: #175DFF;
|
|
|
+ }
|
|
|
+ &.marginRight{
|
|
|
+ padding: 0 3px;
|
|
|
+ }
|
|
|
+ &.marginSingleRight{
|
|
|
+ padding: 0 3px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.padding {
|
|
|
+ padding: 0 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operate-box{
|
|
|
+ position: fixed;
|
|
|
+ border-top: 1px solid #EBEBEB;
|
|
|
+ height: 192px;
|
|
|
+ width: 1000px;
|
|
|
+ background: #F2F3F5;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 0;
|
|
|
+ margin-left: -500px;
|
|
|
+ padding-bottom: 24px;
|
|
|
+ &-inner{
|
|
|
+ padding-top: 40px;
|
|
|
+ height: 144px;
|
|
|
+ &-content{
|
|
|
+ width: 680px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .operate-item{
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .luyin-btn{
|
|
|
+ display: block;
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 60px;
|
|
|
+ background: #F2555A;
|
|
|
+ box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+ .svg-icon{
|
|
|
+ display: block;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: #929CA8;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-box-white{
|
|
|
+ .wordActive {
|
|
|
+ color: #3459D2 !important;
|
|
|
+ }
|
|
|
+ .sentActive {
|
|
|
+ background: #D9E2FC !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-box-darkGreen{
|
|
|
+ .wordActive {
|
|
|
+ color: #299772 !important;
|
|
|
+ }
|
|
|
+ .sentActive {
|
|
|
+ background: #ECEFED !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-box-darkBlue{
|
|
|
+ .wordActive {
|
|
|
+ color: #5373E7 !important;
|
|
|
+ }
|
|
|
+ .sentActive {
|
|
|
+ background:#1C2129 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-box-armyGreen{
|
|
|
+ .wordActive {
|
|
|
+ color: #30A47D !important;
|
|
|
+ }
|
|
|
+ .sentActive {
|
|
|
+ background: #2A2F2C !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.audio-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.aduioLine-box{
|
|
|
+ width: 516px;
|
|
|
+ height: 48px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #EBEBEB;
|
|
|
+ border-radius: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 24px;
|
|
|
+ .wrapper{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: #175DFF;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ .Audio{
|
|
|
+ width: 430px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.clear-box{
|
|
|
+ right: calc((100% - 1000px)/2);
|
|
|
+ position: fixed;
|
|
|
+ top: 150px;
|
|
|
+ width: 270px;
|
|
|
+ overflow: auto;
|
|
|
+ width: 176px;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #EBEBEB;
|
|
|
+ background: #FFF;
|
|
|
+ box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px 1px rgba(0, 0, 0, 0.06), 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
|
|
|
+ margin-top: 24px;
|
|
|
+ h5{
|
|
|
+ margin: 0;
|
|
|
+ color: rgba(0, 0, 0, 0.40);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background:#F2F3F5;
|
|
|
+ padding: 4px 8px;
|
|
|
+ color: #2F3742;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.red-item{
|
|
|
+ color: #F53F3F;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
