|
@@ -143,7 +143,7 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div class="refresh">
|
|
|
+ <div class="refresh" @click="handleRefresh">
|
|
|
<img src="../../assets/teacherdev/refresh.png" alt="" />
|
|
|
</div>
|
|
|
<template v-if="patternIndex == 0">
|
|
@@ -187,18 +187,14 @@
|
|
|
<div class="top">
|
|
|
<div
|
|
|
class="number"
|
|
|
- :style="{
|
|
|
- marginBottom: sizeIndex == 2 ? '0' : '5px',
|
|
|
- }"
|
|
|
+ :class="['number-' + sizeIndex + '-' + pinyinShow]"
|
|
|
>
|
|
|
{{ item.number }}.
|
|
|
</div>
|
|
|
<img
|
|
|
- :style="{
|
|
|
- marginBottom: sizeIndex == 2 ? '0' : '5px',
|
|
|
- }"
|
|
|
src="../../assets/teacherdev/speaker-one.png"
|
|
|
alt=""
|
|
|
+ :class="['speaker-' + sizeIndex + '-' + pinyinShow]"
|
|
|
/>
|
|
|
<div class="words">
|
|
|
<div
|
|
@@ -210,6 +206,7 @@
|
|
|
:style="{
|
|
|
fontSize: pinyinSize + 'px',
|
|
|
}"
|
|
|
+ v-if="pinyinShow"
|
|
|
>
|
|
|
{{ items.pinyin }}
|
|
|
</div>
|
|
@@ -217,15 +214,15 @@
|
|
|
class="con"
|
|
|
:style="{
|
|
|
fontSize: conSize + 'px',
|
|
|
+ lineHeight: conSize + 8 + 'px',
|
|
|
}"
|
|
|
v-html="items.con"
|
|
|
></div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="shiyi"
|
|
|
- :style="{
|
|
|
- marginBottom: sizeIndex == 2 ? '0' : '5px',
|
|
|
- }"
|
|
|
+ :class="['shiyi-' + sizeIndex]"
|
|
|
+ v-if="shiyiShow"
|
|
|
>
|
|
|
({{ item.shiyi }})
|
|
|
</div>
|
|
@@ -307,6 +304,8 @@
|
|
|
borderBottom:
|
|
|
i == rightList.length - 1 ? 'none' : '1px solid #eeeeee',
|
|
|
}"
|
|
|
+ @mouseover="gaolangbzt(i, 'shanxing_main')"
|
|
|
+ @mouseout="closegaolangbzt(i, 'shanxing_main')"
|
|
|
>
|
|
|
<div>
|
|
|
<span></span>
|
|
@@ -363,8 +362,8 @@ export default {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
page: 1,
|
|
|
- shiyiShow: false,
|
|
|
- pinyinShow: false,
|
|
|
+ shiyiShow: true,
|
|
|
+ pinyinShow: true,
|
|
|
JFIndex: 0,
|
|
|
hzData: [],
|
|
|
ShowHzData: [],
|
|
@@ -732,7 +731,7 @@ export default {
|
|
|
KWICData: [
|
|
|
{
|
|
|
number: 1,
|
|
|
- laiyuan: "轻松学中文1大撒大撒大苏打撒旦阿斯顿阿斯顿安生安生",
|
|
|
+ laiyuan: "《轻松学中文1》 Unit 1 课文一 P16",
|
|
|
resArr: [
|
|
|
["你"],
|
|
|
[
|
|
@@ -906,6 +905,24 @@ export default {
|
|
|
};
|
|
|
option && myChart.setOption(option);
|
|
|
},
|
|
|
+ // 鼠标进入
|
|
|
+ gaolangbzt(index, id) {
|
|
|
+ var compareChart = echarts.getInstanceByDom(document.getElementById(id));
|
|
|
+ compareChart.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: index,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 鼠标移出
|
|
|
+ closegaolangbzt(index, id) {
|
|
|
+ var compareChart = echarts.getInstanceByDom(document.getElementById(id));
|
|
|
+ compareChart.dispatchAction({
|
|
|
+ type: "downplay",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: index,
|
|
|
+ });
|
|
|
+ },
|
|
|
changehzdata() {
|
|
|
this.hzData = [];
|
|
|
let arr = this.$route.query.keyword.split("");
|
|
@@ -926,6 +943,13 @@ export default {
|
|
|
});
|
|
|
this.gethzJSON();
|
|
|
},
|
|
|
+ handleRefresh() {
|
|
|
+ this.pinyinShow = true;
|
|
|
+ this.shiyiShow = true;
|
|
|
+ this.sizeIndex = 1;
|
|
|
+ this.sort = "down";
|
|
|
+ this.KWIC_sortIndex = 0;
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
@@ -1222,25 +1246,61 @@ export default {
|
|
|
margin-bottom: 8px;
|
|
|
.top {
|
|
|
display: flex;
|
|
|
- align-items: flex-end;
|
|
|
+ align-items: flex-start;
|
|
|
flex-flow: wrap;
|
|
|
+ width: 100%;
|
|
|
.number {
|
|
|
width: 22px;
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
+ line-height: 21px;
|
|
|
text-align: right;
|
|
|
color: rgba(0, 0, 0, 0.3);
|
|
|
margin-right: 8px;
|
|
|
+ margin-top: 19px;
|
|
|
+ &-1-false {
|
|
|
+ margin-top: 3px;
|
|
|
+ }
|
|
|
+ &-0-true {
|
|
|
+ margin-top: 21px;
|
|
|
+ }
|
|
|
+ &-0-false {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ &-2-true {
|
|
|
+ margin-top: 17px;
|
|
|
+ }
|
|
|
+ &-2-false {
|
|
|
+ margin-top: 1px;
|
|
|
+ }
|
|
|
}
|
|
|
img {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
cursor: pointer;
|
|
|
margin-right: 8px;
|
|
|
+ margin-top: 22px;
|
|
|
+ &.speaker-1-false {
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ &.speaker-0-true {
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+ &.speaker-0-false {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ &.speaker-2-true {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ &.speaker-2-false {
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
.words {
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
+ flex: 1;
|
|
|
+ flex-flow: wrap;
|
|
|
> div {
|
|
|
.pinyin {
|
|
|
font-family: "GB-PINYINOK-B";
|
|
@@ -1248,6 +1308,7 @@ export default {
|
|
|
font-size: 12px;
|
|
|
color: rgba(0, 0, 0, 0.5);
|
|
|
text-align: center;
|
|
|
+ margin-bottom: 2px;
|
|
|
}
|
|
|
.con {
|
|
|
font-family: "FZJCGFKTK";
|
|
@@ -1262,6 +1323,13 @@ export default {
|
|
|
font-weight: 400;
|
|
|
font-size: 12px;
|
|
|
color: #48a3e6;
|
|
|
+ line-height: 24px;
|
|
|
+ &-0 {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ &-1 {
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.bottom {
|