|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
- <div :class="['writeTable', editCardflag ? '' : 'writeTable-preview writeTable-preview-' + totalNumber]" v-if="data">
|
|
|
- <div class="writeTop" v-bind:class="{ flipped: isFlipped }">
|
|
|
+ <div v-if="data" :class="['writeTable', editCardflag ? '' : 'writeTable-preview writeTable-preview-' + totalNumber]">
|
|
|
+ <div class="writeTop" :class="{ flipped: isFlipped }">
|
|
|
<div
|
|
|
+ v-if="(isPreview && showLeft) || !isPreview"
|
|
|
class="left left-preview"
|
|
|
:class="[data.file_list[0] ? '' : 'left-big']"
|
|
|
- v-if="(isPreview && showLeft) || !isPreview"
|
|
|
:style="{
|
|
|
borderColor: attrib && attrib.topic_color ? attrib.topic_color : '',
|
|
|
padding:
|
|
|
@@ -21,7 +21,7 @@
|
|
|
data.label
|
|
|
}}</label>
|
|
|
</div>
|
|
|
- <div class="item-image" v-if="data.file_list[0]">
|
|
|
+ <div v-if="data.file_list[0]" class="item-image">
|
|
|
<el-image
|
|
|
:style="{
|
|
|
width: '568px',
|
|
|
@@ -37,16 +37,16 @@
|
|
|
fit="contain"
|
|
|
/>
|
|
|
</div>
|
|
|
- <h2 :class="['con-preview', data.file_list[0] ? '' : 'con-preview-big']" v-if="data.new_word">
|
|
|
+ <h2 v-if="data.new_word" :class="['con-preview', data.file_list[0] ? '' : 'con-preview-big']">
|
|
|
{{ data.new_word }}
|
|
|
</h2>
|
|
|
|
|
|
- <a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
|
|
|
+ <a v-if="isPreview" class="overturn-btn" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
|
|
|
</div>
|
|
|
<div
|
|
|
+ v-if="(isPreview && !showLeft) || !isPreview"
|
|
|
class="right right-preview left-preview"
|
|
|
:class="[isPreview ? 'right-preview-rota' : '']"
|
|
|
- v-if="(isPreview && !showLeft) || !isPreview"
|
|
|
:style="{
|
|
|
borderColor: attrib && attrib.topic_color ? attrib.topic_color : '',
|
|
|
paddingTop: data.collocation || data.liju_list || data.definition_list ? '' : '80px',
|
|
|
@@ -65,7 +65,7 @@
|
|
|
columnGap: '16px',
|
|
|
}"
|
|
|
>
|
|
|
- <div style="width: max-content" v-if="data.hz_info.length > 0">
|
|
|
+ <div v-if="data.hz_info.length > 0" style="width: max-content">
|
|
|
<AudioPlay
|
|
|
v-if="data.mp3_list"
|
|
|
:style="{
|
|
|
@@ -105,30 +105,30 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<p
|
|
|
- :style="{ color: attrib && attrib.topic_color ? attrib.topic_color : '' }"
|
|
|
v-if="data.pinyin && data.pinyin.split(' ').length === 1"
|
|
|
+ :style="{ color: attrib && attrib.topic_color ? attrib.topic_color : '' }"
|
|
|
class="pinyin-box"
|
|
|
>
|
|
|
{{ data.pinyin }}
|
|
|
</p>
|
|
|
<div class="hz-box">
|
|
|
- <div class="hz-item" v-for="(itemh, indexh) in data.hz_info" :key="indexh">
|
|
|
+ <div v-for="(itemh, indexh) in data.hz_info" :key="indexh" class="hz-item">
|
|
|
<p
|
|
|
- :style="{ color: attrib && attrib.topic_color ? attrib.topic_color : '' }"
|
|
|
v-if="data.pinyin && data.pinyin.split(' ').length > 1"
|
|
|
+ :style="{ color: attrib && attrib.topic_color ? attrib.topic_color : '' }"
|
|
|
>
|
|
|
{{ data.pinyin.split(' ')[indexh] ? data.pinyin.split(' ')[indexh] : '' }}
|
|
|
</p>
|
|
|
<Strockplay
|
|
|
- className="adult-strockplay"
|
|
|
+ class-name="adult-strockplay"
|
|
|
:Book_text="itemh.con"
|
|
|
- :playStorkes="true"
|
|
|
- :strokePlayColor="attrib && attrib.topic_color ? attrib.topic_color : '#f44444'"
|
|
|
- :strokeColor="'#000000'"
|
|
|
- :palyWidth="'24px'"
|
|
|
+ :play-storkes="true"
|
|
|
+ :stroke-play-color="attrib && attrib.topic_color ? attrib.topic_color : '#f44444'"
|
|
|
+ :stroke-color="'#000000'"
|
|
|
+ :paly-width="'24px'"
|
|
|
:BoxbgType="'0'"
|
|
|
- :curItem="itemh.hzDetail.hz_json"
|
|
|
- :targetDiv="'writeTops-item-zoom-' + pageNumber + '-' + indexh + '-' + itemh.con + '-' + totalNumber"
|
|
|
+ :cur-item="itemh.hzDetail.hz_json"
|
|
|
+ :target-div="'writeTops-item-zoom-' + pageNumber + '-' + indexh + '-' + itemh.con + '-' + totalNumber"
|
|
|
:class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
|
|
|
class="writeTop-item"
|
|
|
:style="{ borderColor: attrib && attrib.topic_color ? attrib.topic_color : '#f44444' }"
|
|
|
@@ -138,8 +138,8 @@
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
- class="definition-box"
|
|
|
v-if="(data.collocation || data.liju_list) && data.new_word.length < 4"
|
|
|
+ class="definition-box"
|
|
|
:style="{
|
|
|
flex: '1',
|
|
|
marginTop: data.mp3_list ? '104px' : '36px',
|
|
|
@@ -156,13 +156,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
+ v-if="data.collocation || data.liju_list || data.definition_list || data.cixing"
|
|
|
class="definition-box"
|
|
|
:style="{
|
|
|
width:
|
|
|
!(data.collocation || data.liju_list) && data.new_word.length < 4 ? data.hz_info.length * 98 + 'px' : '',
|
|
|
margin: !(data.collocation || data.liju_list) && data.new_word.length < 4 ? '16px auto 0 auto' : '',
|
|
|
}"
|
|
|
- v-if="data.collocation || data.liju_list || data.definition_list || data.cixing"
|
|
|
>
|
|
|
<template v-if="!(data.collocation || data.liju_list) || data.new_word.length >= 4">
|
|
|
<div v-if="data.cixing">
|
|
|
@@ -183,7 +183,7 @@
|
|
|
<p v-html="data.liju_list"></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
|
|
|
+ <a v-if="isPreview" class="overturn-btn" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="url" class="aduioLine-box" style="height: 0; margin: 0; overflow: hidden">
|
|
|
@@ -202,13 +202,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
import AudioPlay from './AudioPlay.vue';
|
|
|
import Strockplay from './Strockplay.vue';
|
|
|
import AudioLine from '../../voice_matrix/components/AudioLine.vue';
|
|
|
|
|
|
export default {
|
|
|
- //import引入的组件需要注入到对象中才能使用
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
components: {
|
|
|
Strockplay,
|
|
|
AudioPlay,
|
|
|
@@ -226,7 +226,7 @@ export default {
|
|
|
'url',
|
|
|
],
|
|
|
data() {
|
|
|
- //这里存放数据
|
|
|
+ // 这里存放数据
|
|
|
return {
|
|
|
loading: false,
|
|
|
isFlipped: false,
|
|
|
@@ -235,12 +235,12 @@ export default {
|
|
|
stopAudioS: false,
|
|
|
};
|
|
|
},
|
|
|
- //计算属性 类似于data概念
|
|
|
+ // 计算属性 类似于data概念
|
|
|
computed: {},
|
|
|
- //监控data中数据变化
|
|
|
+ // 监控data中数据变化
|
|
|
watch: {
|
|
|
editCardflag: {
|
|
|
- handler: function (val, oldVal) {
|
|
|
+ handler(val, oldVal) {
|
|
|
if (val != oldVal) {
|
|
|
this.showLeft = true;
|
|
|
this.isFlipped = false;
|
|
|
@@ -249,14 +249,24 @@ export default {
|
|
|
deep: true,
|
|
|
},
|
|
|
filtCardflag: {
|
|
|
- handler: function (val, oldVal) {
|
|
|
+ handler(val, oldVal) {
|
|
|
this.showLeft = true;
|
|
|
this.isFlipped = false;
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
},
|
|
|
- //方法集合
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ // 生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ // 生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+ // 方法集合
|
|
|
methods: {
|
|
|
// 翻面
|
|
|
changeShowLeft() {
|
|
|
@@ -277,24 +287,14 @@ export default {
|
|
|
this.curTime = curTime * 1000;
|
|
|
},
|
|
|
},
|
|
|
- //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
- //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {},
|
|
|
- //生命周期-创建之前
|
|
|
+ // 生命周期-创建之前
|
|
|
beforeCreated() {},
|
|
|
- //生命周期-挂载之前
|
|
|
- beforeMount() {},
|
|
|
- //生命周期-更新之前
|
|
|
+ // 生命周期-更新之前
|
|
|
beforUpdate() {},
|
|
|
- //生命周期-更新之后
|
|
|
- updated() {},
|
|
|
- //生命周期-销毁之前
|
|
|
+ // 生命周期-销毁之前
|
|
|
beforeDestory() {},
|
|
|
- //生命周期-销毁完成
|
|
|
+ // 生命周期-销毁完成
|
|
|
destoryed() {},
|
|
|
- //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
- activated() {},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
