|
|
@@ -0,0 +1,876 @@
|
|
|
+<template>
|
|
|
+ <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']"
|
|
|
+ :style="{
|
|
|
+ borderColor: attrib && attrib.topic_color ? attrib.topic_color : '',
|
|
|
+ padding:
|
|
|
+ data.new_word && (data.header_con || data.label)
|
|
|
+ ? ''
|
|
|
+ : !data.new_word && (data.header_con || data.label)
|
|
|
+ ? '40px 12px 0 12px'
|
|
|
+ : '12px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="header-info-preview">
|
|
|
+ <h5 :style="{ textAlign: 'left' }">{{ data.header_con }}</h5>
|
|
|
+ <label :style="{ background: attrib && attrib.topic_color ? attrib.topic_color : '' }">{{
|
|
|
+ data.label
|
|
|
+ }}</label>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.file_list[0]" class="item-image">
|
|
|
+ <el-image
|
|
|
+ :style="{
|
|
|
+ width: '568px',
|
|
|
+ height:
|
|
|
+ data.new_word && (data.header_con || data.label)
|
|
|
+ ? '340px'
|
|
|
+ : !data.new_word || data.header_con || data.label
|
|
|
+ ? '382px'
|
|
|
+ : '410px',
|
|
|
+ }"
|
|
|
+ :src="data.pic_url"
|
|
|
+ :preview-src-list="[data.pic_url]"
|
|
|
+ fit="contain"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <h2 v-if="data.new_word" :class="['con-preview', data.file_list[0] ? '' : 'con-preview-big']">
|
|
|
+ {{ data.new_word }}
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ <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' : '']"
|
|
|
+ :style="{
|
|
|
+ borderColor: attrib && attrib.topic_color ? attrib.topic_color : '',
|
|
|
+ paddingTop: data.collocation || data.liju_list || data.definition_list ? '' : '80px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="header-info-preview">
|
|
|
+ <h5 :style="{ textAlign: 'left' }">{{ data.header_con }}</h5>
|
|
|
+ <label :style="{ background: attrib && attrib.topic_color ? attrib.topic_color : '' }">{{
|
|
|
+ data.label
|
|
|
+ }}</label>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ display: 'flex',
|
|
|
+ justifyContent: !(data.collocation && data.liju_list) && data.new_word.length < 4 ? 'center' : 'auto',
|
|
|
+ columnGap: '16px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div v-if="data.hz_info.length > 0" style="width: max-content">
|
|
|
+ <AudioPlay
|
|
|
+ v-if="data.mp3_list"
|
|
|
+ :style="{
|
|
|
+ background: attrib && attrib.topic_color ? attrib.topic_color : '',
|
|
|
+ }"
|
|
|
+ :file-id="data.mp3_list_url"
|
|
|
+ />
|
|
|
+ <template v-else-if="data.bg || data.ed">
|
|
|
+ <div
|
|
|
+ class="audio-wrapper"
|
|
|
+ :style="{
|
|
|
+ background: attrib && attrib.topic_color ? attrib.topic_color : '',
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ }"
|
|
|
+ @click="handleChangeTime(data.bg, data.ed)"
|
|
|
+ >
|
|
|
+ <SvgIcon
|
|
|
+ v-if="curTime >= data.bg && curTime < data.ed && stopAudioS"
|
|
|
+ icon-class="animated"
|
|
|
+ size="30"
|
|
|
+ :style="{
|
|
|
+ color: '#fff',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ <SvgIcon
|
|
|
+ v-else
|
|
|
+ icon-class="play-btn"
|
|
|
+ size="30"
|
|
|
+ :style="{
|
|
|
+ color: '#fff',
|
|
|
+ width: '30px',
|
|
|
+ height: '30px',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <p
|
|
|
+ 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 v-for="(itemh, indexh) in data.hz_info" :key="indexh" class="hz-item">
|
|
|
+ <p
|
|
|
+ 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
|
|
|
+ class-name="adult-strockplay"
|
|
|
+ :Book_text="itemh.con"
|
|
|
+ :play-storkes="true"
|
|
|
+ :stroke-play-color="attrib && attrib.topic_color ? attrib.topic_color : '#f44444'"
|
|
|
+ :stroke-color="'#000000'"
|
|
|
+ :paly-width="'24px'"
|
|
|
+ :BoxbgType="'0'"
|
|
|
+ :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' }"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="(data.collocation || data.liju_list) && data.new_word.length < 4"
|
|
|
+ class="definition-box"
|
|
|
+ :style="{
|
|
|
+ flex: '1',
|
|
|
+ marginTop: data.mp3_list ? '104px' : '36px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div v-if="data.cixing">
|
|
|
+ <label class="card-label">词性：</label>
|
|
|
+ <p v-html="data.cixing"></p>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.definition_list">
|
|
|
+ <label class="card-label">释义：</label>
|
|
|
+ <p v-html="data.definition_list"></p>
|
|
|
+ </div>
|
|
|
+ </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' : '',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template v-if="!(data.collocation || data.liju_list) || data.new_word.length >= 4">
|
|
|
+ <div v-if="data.cixing">
|
|
|
+ <label class="card-label">词性：</label>
|
|
|
+ <p v-html="data.cixing"></p>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.definition_list">
|
|
|
+ <label class="card-label">释义：</label>
|
|
|
+ <p v-html="data.definition_list"></p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-if="data.collocation">
|
|
|
+ <label class="card-label">搭配：</label>
|
|
|
+ <p v-html="data.collocation"></p>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.liju_list">
|
|
|
+ <label class="card-label">例句：</label>
|
|
|
+ <p v-html="data.liju_list"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <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">
|
|
|
+ <AudioLine
|
|
|
+ ref="audioLine"
|
|
|
+ :audio-id="'newWordAudioZoom'"
|
|
|
+ :mp3="url"
|
|
|
+ :get-cur-time="getCurTime"
|
|
|
+ :ed="ed"
|
|
|
+ type="audioLine"
|
|
|
+ :attrib="attrib"
|
|
|
+ @handleListenRead="handleListenRead"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+import AudioPlay from './AudioPlay.vue';
|
|
|
+import Strockplay from './Strockplay.vue';
|
|
|
+import AudioLine from '../../voice_matrix/components/AudioLine.vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {
|
|
|
+ Strockplay,
|
|
|
+ AudioPlay,
|
|
|
+ AudioLine,
|
|
|
+ },
|
|
|
+ props: [
|
|
|
+ 'isPreview',
|
|
|
+ 'data',
|
|
|
+ 'pageNumber',
|
|
|
+ 'totalNumber',
|
|
|
+ 'editCardflag',
|
|
|
+ 'is_preview',
|
|
|
+ 'filtCardflag',
|
|
|
+ 'attrib',
|
|
|
+ 'url',
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ isFlipped: false,
|
|
|
+ showLeft: true,
|
|
|
+ curTime: 0,
|
|
|
+ stopAudioS: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 计算属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中数据变化
|
|
|
+ watch: {
|
|
|
+ editCardflag: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ if (val != oldVal) {
|
|
|
+ this.showLeft = true;
|
|
|
+ this.isFlipped = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ filtCardflag: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ this.showLeft = true;
|
|
|
+ this.isFlipped = false;
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ // 生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ // 生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 翻面
|
|
|
+ changeShowLeft() {
|
|
|
+ this.showLeft = !this.showLeft;
|
|
|
+ this.isFlipped = !this.isFlipped;
|
|
|
+ },
|
|
|
+ // 点击播放某个句子
|
|
|
+ handleChangeTime(time, edTime) {
|
|
|
+ this.curTime = time;
|
|
|
+ this.stopAudioS = true;
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
|
|
|
+ this.ed = edTime;
|
|
|
+ },
|
|
|
+ handleListenRead(playFlag) {
|
|
|
+ this.stopAudioS = playFlag;
|
|
|
+ },
|
|
|
+ getCurTime(curTime) {
|
|
|
+ this.curTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ // 生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ // 生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ // 生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.writeTable {
|
|
|
+ // height: 842px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 1208px;
|
|
|
+ margin: 40px auto 19px;
|
|
|
+ perspective: 1000px;
|
|
|
+
|
|
|
+ &-preview {
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .writeTop {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ min-height: 450px;
|
|
|
+ transition: 0.6s;
|
|
|
+ perspective: 1000px;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+
|
|
|
+ .left,
|
|
|
+ .right {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 270px;
|
|
|
+ padding: 8px 12px 18px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ border: 4px solid #fff;
|
|
|
+ border-radius: 24px;
|
|
|
+
|
|
|
+ .header-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ :deep .el-input__inner {
|
|
|
+ height: 24px;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 100%;
|
|
|
+ color: rgba(0, 0, 0, 100%);
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ :deep .el-input__inner {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-preview {
|
|
|
+ padding-top: 40px;
|
|
|
+
|
|
|
+ // padding-bottom: 32px;
|
|
|
+ // position: absolute;
|
|
|
+ backface-visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-info-preview {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ h5 {
|
|
|
+ padding: 0 12px;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ label {
|
|
|
+ position: absolute;
|
|
|
+ top: -4px;
|
|
|
+ right: -4px;
|
|
|
+ padding: 0 16px 0 8px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #fff;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-big {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .del-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 8px;
|
|
|
+ bottom: 8px;
|
|
|
+ padding: 5px 8px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #f56767;
|
|
|
+ border-radius: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .overturn-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 8px;
|
|
|
+ bottom: 8px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ padding: 8px;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 1;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #e0e0e0;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-zoom-in,
|
|
|
+ .filt-check {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 8px;
|
|
|
+ left: 8px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ :deep .el-checkbox__inner {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-checkbox__inner::after {
|
|
|
+ left: 8px;
|
|
|
+ width: 6px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ row-gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16px 24px 26px;
|
|
|
+
|
|
|
+ .card-label {
|
|
|
+ width: 100%;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-textarea {
|
|
|
+ height: 64px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .config-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-color-picker {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-color-picker__trigger {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-radio {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-radio-group {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-radio__input.is-checked .el-radio__inner {
|
|
|
+ background: #000;
|
|
|
+ border-color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-radio__input.is-checked + .el-radio__label {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-preview {
|
|
|
+ display: block;
|
|
|
+ padding: 36px;
|
|
|
+
|
|
|
+ .pinyin-box {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-family: 'League';
|
|
|
+ font-size: 22px;
|
|
|
+ font-feature-settings: 'cv01' on;
|
|
|
+ line-height: 120%;
|
|
|
+ color: #de4444;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hz-box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .hz-item {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ :deep .strockplayInner {
|
|
|
+ width: 98px;
|
|
|
+ height: 98px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-family: 'League';
|
|
|
+ font-size: 22px;
|
|
|
+ font-feature-settings: 'cv01' on;
|
|
|
+ line-height: 120%;
|
|
|
+ color: #de4444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .audio-wrapper {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ padding: 18px;
|
|
|
+ margin: 0 auto 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #f3f3f3;
|
|
|
+ border-radius: 40px;
|
|
|
+
|
|
|
+ .voice-play {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .definition-box {
|
|
|
+ margin-top: 16px;
|
|
|
+ white-space: pre;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ label,
|
|
|
+ p {
|
|
|
+ width: 40px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ label {
|
|
|
+ width: 54px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ flex: 1;
|
|
|
+ word-break: break-word;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep p {
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ span,
|
|
|
+ b,
|
|
|
+ p {
|
|
|
+ text-align: left !important; // 有的富文本里设置了居中对齐
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-preview-rota {
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-image {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 0;
|
|
|
+
|
|
|
+ // background: #f2f3f5;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .item-image-del {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ display: block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ padding: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ee3232;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 25%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-con {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 50%;
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ label {
|
|
|
+ width: 44px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-input__inner {
|
|
|
+ width: 235px;
|
|
|
+ height: 32px;
|
|
|
+ font-family: '楷体';
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border: none;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pinyin {
|
|
|
+ :deep .el-input__inner {
|
|
|
+ font-family: 'League';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .con-preview {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-family: '楷体';
|
|
|
+ font-size: 46px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 100%;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &-big {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 86px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .writeTop-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .writeTop-nopadding {
|
|
|
+ height: 842px;
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ column-gap: 16px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 46px 8px;
|
|
|
+
|
|
|
+ &-left {
|
|
|
+ .writeTop-item {
|
|
|
+ width: 98px;
|
|
|
+ height: 98px;
|
|
|
+
|
|
|
+ :deep .strock-play-box {
|
|
|
+ width: 18px !important;
|
|
|
+ height: 18px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .playStorkes-btn {
|
|
|
+ width: 18px !important;
|
|
|
+ height: 18px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-small {
|
|
|
+ width: 62px;
|
|
|
+ height: 62px;
|
|
|
+
|
|
|
+ :deep .strock-play-box {
|
|
|
+ width: 11px !important;
|
|
|
+ height: 11px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .playStorkes-btn {
|
|
|
+ width: 11px !important;
|
|
|
+ height: 11px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-long {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-right {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-textarea__inner {
|
|
|
+ resize: none;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .voice-box {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 4px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: 'League';
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #de4444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info-row {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 11px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+
|
|
|
+ :deep .el-input__inner {
|
|
|
+ height: 32px;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info-half,
|
|
|
+ .item-info-all {
|
|
|
+ display: flex;
|
|
|
+ width: 50%;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info-all {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hz-box {
|
|
|
+ display: flex;
|
|
|
+ width: max-content;
|
|
|
+ }
|
|
|
+
|
|
|
+ .writeTop-item {
|
|
|
+ border: 1px solid #de4444;
|
|
|
+ }
|
|
|
+
|
|
|
+ .writeTop-item-noLeft {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tian-div {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .tian {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flipped {
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .flipped-back {
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.writeTable {
|
|
|
+ input::placeholder {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ input::input-placeholder {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ input::placeholder {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:placeholder {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:input-placeholder {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-info {
|
|
|
+ input::placeholder {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input::input-placeholder {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input::placeholder {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:placeholder {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:input-placeholder {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
