|
|
@@ -0,0 +1,660 @@
|
|
|
+<template>
|
|
|
+ <div class="none_writeTable writeTable printTable" v-if="dataConfig">
|
|
|
+ <div class="none_word_main_table" v-for="(data, indexT) in dataConfig" :key="indexT">
|
|
|
+ <div class="writeTop" :class="[data.left.fileList ? 'writeTop-nopadding' : '']">
|
|
|
+ <div class="left" :class="[data.left.fileList.length === 0 ? 'left-big' : '']">
|
|
|
+ <div class="item-image" v-if="data.left.fileList.length > 0">
|
|
|
+ <el-image
|
|
|
+ style="width: 536px; height: 536px"
|
|
|
+ :src="data.left.fileList[0].fileUrl"
|
|
|
+ :preview-src-list="[data.left.fileList[0].fileUrl]"
|
|
|
+ fit="contain"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <h2 :class="['con-preview', data.left.fileList.length === 0 ? 'con-preview-big' : '']">
|
|
|
+ {{ data.left.con }}
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="right right-preview">
|
|
|
+ <div class="hz-box">
|
|
|
+ <div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
|
|
|
+ <p>{{ data.right.pinyin[indexh] ? data.right.pinyin[indexh] : '' }}</p>
|
|
|
+ <Strockplay
|
|
|
+ className="adult-strockplay"
|
|
|
+ :Book_text="itemh.con"
|
|
|
+ :playStorkes="true"
|
|
|
+ :strokePlayColor="'#D65353'"
|
|
|
+ :strokeColor="'#000000'"
|
|
|
+ :palyWidth="'18px'"
|
|
|
+ :BoxbgType="'0'"
|
|
|
+ :curItem="itemh.hzDetail.hz_json"
|
|
|
+ :targetDiv="'writeTops-item-' + '-' + indexh + '-' + itemh.con"
|
|
|
+ :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
|
|
|
+ class="writeTop-item"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <AudioPlay :file-id="data.right.audio_file" v-if="data.right.audio_file" />
|
|
|
+ <div class="definition-box">
|
|
|
+ <div v-if="data.right.definition">
|
|
|
+ <label>释义：</label>
|
|
|
+ <p>{{ data.right.definition }}</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.right.collocation">
|
|
|
+ <label>搭配：</label>
|
|
|
+ <p>{{ data.right.collocation }}</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.right.exampleSent">
|
|
|
+ <label>例句：</label>
|
|
|
+ <p>{{ data.right.exampleSent }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="writeBottom">
|
|
|
+ <span>BLCUP 全球国际中文教学云平台</span>
|
|
|
+ <b>{{ indexT + 1 + '/' + dataConfig.result.length }}</b>
|
|
|
+ <a>www.chinesedu.com</a>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+import StrockplayredlineTable from '../../components/corpus/StrockplayredlineTable.vue';
|
|
|
+import Strockplay from '../../components/corpus/Strockplay.vue';
|
|
|
+import Strockred from '../../components/corpus/Strockred.vue';
|
|
|
+import FreewriteLettle from '../../components/corpus/FreewriteLettle.vue';
|
|
|
+import UploadDrag from './UploadDrag.vue';
|
|
|
+import AudioPlay from './AudioPlay.vue';
|
|
|
+const HanziWriter = require('hanzi-writer');
|
|
|
+import { getLogin } from '@/api/api';
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {
|
|
|
+ StrockplayredlineTable,
|
|
|
+ Strockplay,
|
|
|
+ Strockred,
|
|
|
+ FreewriteLettle,
|
|
|
+ UploadDrag,
|
|
|
+ AudioPlay,
|
|
|
+ },
|
|
|
+ //props: ["dataConfig", "data", "indexT", "totalNumber", "type", "none"],
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ ifFreeShow: false,
|
|
|
+ activeIndex: null,
|
|
|
+ activeColIndex: null,
|
|
|
+ dataConfig: null,
|
|
|
+ loading: false,
|
|
|
+ userID: this.$route.query.userID ? this.$route.query.userID : '',
|
|
|
+ id: this.$route.query.id ? this.$route.query.id : '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ download2() {
|
|
|
+ document.getElementsByClassName('printTable')[0].style.zoom = 2;
|
|
|
+ //执行window.print打印功能
|
|
|
+ window.print();
|
|
|
+ this.$message({
|
|
|
+ message: '操作成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.$router.replace({
|
|
|
+ path: '/wordcard/cread',
|
|
|
+ query: { cachesType: 'push', userID: this.userID, id: this.id },
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ changePraShow() {
|
|
|
+ this.ifFreeShow = false;
|
|
|
+ },
|
|
|
+ closeifFreeShow(data, rowIndex, colIndex) {
|
|
|
+ this.ifFreeShow = false;
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ freeWrite(item, row, col) {
|
|
|
+ this.ifFreeShow = true;
|
|
|
+ this.activeIndex = row;
|
|
|
+ this.activeColIndex = col;
|
|
|
+ // this.currentHz = this.curQue.option[indexs].rightOption[rightindex].con;
|
|
|
+ if (item) {
|
|
|
+ this.currenHzData = item;
|
|
|
+ } else {
|
|
|
+ this.currenHzData = {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ExerciseChangeCurQue(answer, rowIndex, colIndex) {
|
|
|
+ if (answer) {
|
|
|
+ this.data[rowIndex][colIndex].strokes_image_url = answer.strokes_image_url;
|
|
|
+ this.data[rowIndex][colIndex].history = answer.history;
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeFillId(file, fileList) {
|
|
|
+ let obj = {
|
|
|
+ name: file.name,
|
|
|
+ fileId: file.file_id,
|
|
|
+ fileUrl: file.file_url_open,
|
|
|
+ };
|
|
|
+ this.data.fileList.push(obj);
|
|
|
+ },
|
|
|
+ handleDeleteImg() {
|
|
|
+ this.data.fileList = [];
|
|
|
+ },
|
|
|
+ initHanziwrite() {
|
|
|
+ let _this = this;
|
|
|
+ this.dataConfig.result.forEach((item, pageNumber) => {
|
|
|
+ if (item.hz_info && item.hz_info.length === 1) {
|
|
|
+ let node = document.getElementById(`character-target-info-div` + pageNumber);
|
|
|
+ if (node && node.children.length > 1) {
|
|
|
+ node.removeChild(node.children[1]);
|
|
|
+ }
|
|
|
+ //var ren = require("hanzi-writer-data/国");
|
|
|
+ _this.writer = HanziWriter.default.create(`character-target-info-div` + pageNumber, item.hz_info[0].con, {
|
|
|
+ width: 22,
|
|
|
+ height: 22,
|
|
|
+ padding: 0,
|
|
|
+ radicalColor: '#000000',
|
|
|
+ strokeColor: '#fff',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ let _this = this;
|
|
|
+ let writeTableData = localStorage.getItem('newEditTable');
|
|
|
+ if (writeTableData) {
|
|
|
+ _this.dataConfig = JSON.parse(writeTableData);
|
|
|
+ if (_this.dataConfig) {
|
|
|
+ _this.dataConfig.forEach((item) => {
|
|
|
+ if (item.left.con.trim()) {
|
|
|
+ let MethodName = 'tool-TextToVoiceFile';
|
|
|
+ let datas = {
|
|
|
+ text: item.left.con.trim(),
|
|
|
+ };
|
|
|
+ getLogin(MethodName, datas)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ item.right.audio_file = res.file_id;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // _this.$nextTick(() => {
|
|
|
+ // _this.initHanziwrite();
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.download2();
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.none_writeTable {
|
|
|
+ width: 540px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-top: 10px;
|
|
|
+ .writeTop {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.writeTable {
|
|
|
+ background: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .writeTop {
|
|
|
+ height: 783px;
|
|
|
+ .writeTop-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .writeTop-item {
|
|
|
+ border: 1px solid #de4444;
|
|
|
+ &.writeTop-item-noLeft {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .writeTop {
|
|
|
+ height: auto;
|
|
|
+ .left,
|
|
|
+ .right {
|
|
|
+ width: 600px;
|
|
|
+ height: 783px;
|
|
|
+ padding: 32px;
|
|
|
+ border-radius: 24px;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .left-big {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .del-btn {
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #f56767;
|
|
|
+ padding: 8px;
|
|
|
+ position: absolute;
|
|
|
+ right: 24px;
|
|
|
+ bottom: 24px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .overturn-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 24px;
|
|
|
+ bottom: 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #e0e0e0;
|
|
|
+ padding: 8px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 1;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-flow: wrap;
|
|
|
+ padding: 120px 86px;
|
|
|
+ row-gap: 8px;
|
|
|
+
|
|
|
+ label {
|
|
|
+ width: 100%;
|
|
|
+ color: #4e5969;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ :deep .el-textarea {
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-preview {
|
|
|
+ padding: 72px;
|
|
|
+ display: block;
|
|
|
+ .hz-box {
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ .hz-item {
|
|
|
+ text-align: center;
|
|
|
+ :deep .strockplayInner {
|
|
|
+ width: 98px;
|
|
|
+ height: 98px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ color: #de4444;
|
|
|
+ font-feature-settings: 'cv01' on;
|
|
|
+ font-family: League;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 120%;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep .audio-wrapper {
|
|
|
+ margin: 24px auto;
|
|
|
+ border-radius: 40px;
|
|
|
+ background: #f3f3f3;
|
|
|
+ padding: 16px;
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+ .voice-play {
|
|
|
+ width: 24px;
|
|
|
+ height: 24pxs;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .definition-box {
|
|
|
+ white-space: pre;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ label,
|
|
|
+ p {
|
|
|
+ width: 40px;
|
|
|
+ color: #000;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 150%;
|
|
|
+ }
|
|
|
+ label {
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-preview-rota {
|
|
|
+ transform: rotateY(-180deg);
|
|
|
+ }
|
|
|
+ .item-image {
|
|
|
+ position: relative;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ .item-image-del {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ display: block;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #ee3232;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-con {
|
|
|
+ margin-top: 74px;
|
|
|
+ :deep .el-input__inner {
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ text-align: center;
|
|
|
+ font-size: 80px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 100%;
|
|
|
+ height: 80px;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con-preview {
|
|
|
+ margin-top: 74px;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ font-size: 80px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 100%;
|
|
|
+ &-big {
|
|
|
+ font-size: 144px;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .writeTop-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 46px 8px 46px;
|
|
|
+ column-gap: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &-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 {
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ column-gap: 4px;
|
|
|
+ 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 {
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-info-half,
|
|
|
+ .item-info-all {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ 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 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .tian {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flipped {
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ }
|
|
|
+ .flipped-back {
|
|
|
+ transform: rotateY(0deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.item-info {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ padding: 16px 46px;
|
|
|
+ column-gap: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &-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 {
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ column-gap: 4px;
|
|
|
+ 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 {
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-info-half,
|
|
|
+ .item-info-all {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ .item-info-all {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.hz-box {
|
|
|
+ display: flex;
|
|
|
+ width: max-content;
|
|
|
+}
|
|
|
+.writeTop-item {
|
|
|
+ border: 1px solid #de4444;
|
|
|
+}
|
|
|
+.punctuation-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .character-target-div {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ .svg-icon {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ font-family: FZJCGFKTK;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha