|
|
@@ -0,0 +1,629 @@
|
|
|
+<template>
|
|
|
+ <div :class="['writeTable']" v-if="data">
|
|
|
+ <div class="writeTop">
|
|
|
+ <template v-if="editCardflag">
|
|
|
+ <div class="left">
|
|
|
+ <UploadDrag
|
|
|
+ :fileList="data.left.fileList"
|
|
|
+ @changeFillId="changeFillId"
|
|
|
+ v-if="data.left.fileList.length === 0"
|
|
|
+ :disabled="is_preview"
|
|
|
+ ></UploadDrag>
|
|
|
+ <div class="item-image" v-else>
|
|
|
+ <el-image
|
|
|
+ style="width: 536px; height: 536px"
|
|
|
+ :src="data.left.fileList[0].fileUrl"
|
|
|
+ :preview-src-list="[data.left.fileList[0].fileUrl]"
|
|
|
+ fit="contain"
|
|
|
+ />
|
|
|
+ <span v-if="!is_preview" class="item-image-del" @click="handleDeleteImg"
|
|
|
+ ><i class="el-icon-delete"></i
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <el-input class="item-con" v-model="data.left.con" placeholder="输入" @blur="handleBlurCon"></el-input>
|
|
|
+ <a class="del-btn" @click="handleDelItem"><i class="el-icon-delete"></i></a>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <label>释义</label>
|
|
|
+ <el-input type="textarea" :rows="6" v-model="data.right.definition" placeholder="请输入"></el-input>
|
|
|
+ <label>搭配</label>
|
|
|
+ <el-input type="textarea" :rows="6" v-model="data.right.collocation" placeholder="请输入"></el-input>
|
|
|
+ <label>例句</label>
|
|
|
+ <el-input type="textarea" :rows="6" v-model="data.right.exampleSent" placeholder="请输入"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <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-' + pageNumber + '-' + 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>
|
|
|
+ </template>
|
|
|
+ </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, getHZChineseInfo } from '@/api/api';
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {
|
|
|
+ StrockplayredlineTable,
|
|
|
+ Strockplay,
|
|
|
+ Strockred,
|
|
|
+ FreewriteLettle,
|
|
|
+ UploadDrag,
|
|
|
+ AudioPlay,
|
|
|
+ },
|
|
|
+ props: ['dataConfig', 'data', 'pageNumber', 'totalNumber', 'editCardflag', 'none', 'is_preview', 'infoObj'],
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ ifFreeShow: false,
|
|
|
+ activeIndex: null,
|
|
|
+ activeColIndex: null,
|
|
|
+ fileList: [],
|
|
|
+ info: {
|
|
|
+ definition: '',
|
|
|
+ collocation: '',
|
|
|
+ exampleSent: '',
|
|
|
+ },
|
|
|
+ writer: null,
|
|
|
+ audio_file: '',
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {
|
|
|
+ pageNumber: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ if (val != oldVal) {
|
|
|
+ this.initHanziwrite();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ 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.list[rowIndex][colIndex].strokes_image_url = answer.strokes_image_url;
|
|
|
+ this.data.list[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.left.fileList.push(obj);
|
|
|
+ },
|
|
|
+ handleDeleteImg() {
|
|
|
+ this.data.left.fileList = [];
|
|
|
+ },
|
|
|
+ initHanziwrite() {
|
|
|
+ if (this.data.left.con.trim()) {
|
|
|
+ this.loading = true;
|
|
|
+ let MethodName = 'tool-TextToVoiceFile';
|
|
|
+ let datas = {
|
|
|
+ text: this.data.left.con.trim(),
|
|
|
+ };
|
|
|
+ getLogin(MethodName, datas)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.data.right.audio_file = res.file_id;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleDelItem() {
|
|
|
+ this.$emit('handleDelItem', this.pageNumber - 1);
|
|
|
+ },
|
|
|
+ // 获取数据
|
|
|
+ handleBlurCon() {
|
|
|
+ this.loading = true;
|
|
|
+ let con = this.data.left.con.trim();
|
|
|
+ let MethodName = 'hz_resource_manager-GetMultHZStrokesContent';
|
|
|
+ let data = {
|
|
|
+ hz_str: con,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ for (let key in res) {
|
|
|
+ if (key != 'status' && key != ',' && res[key]) {
|
|
|
+ res[key] = JSON.parse(res[key]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let hzDetailList = res;
|
|
|
+ let hz_list = [];
|
|
|
+ con.split('').forEach((items) => {
|
|
|
+ let res = JSON.parse(JSON.stringify(hzDetailList[items]));
|
|
|
+ let obj = {
|
|
|
+ con: items,
|
|
|
+ hzDetail: {
|
|
|
+ hz_json: res,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ hz_list.push(obj);
|
|
|
+ });
|
|
|
+ this.data.right.hz_info = hz_list;
|
|
|
+ this.data.right.pinyin = cnchar.spell(con, 'array', 'low', 'tone');
|
|
|
+ let MethodName = 'tool-TextToVoiceFile';
|
|
|
+ let datas = {
|
|
|
+ text: con,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, datas).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.data.right.audio_file = res.file_id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(this.data);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.initHanziwrite();
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ // let _this = this;
|
|
|
+ // _this.$nextTick(() => {
|
|
|
+ // if (_this.data.hz_info && _this.data.hz_info.length === 1) {
|
|
|
+ // _this.initHanziwrite();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.writeTable {
|
|
|
+ width: 1208px;
|
|
|
+ margin: 0 auto 8px auto;
|
|
|
+ // height: 842px;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ .writeTop {
|
|
|
+ height: 800px;
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ .left,
|
|
|
+ .right {
|
|
|
+ width: 600px;
|
|
|
+ height: 100%;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .writeTop-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .writeTop-nopadding {
|
|
|
+ padding-top: 0;
|
|
|
+ height: 842px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .writeBottom {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 38px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ span {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #000000;
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ b {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #000000;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -30px;
|
|
|
+ top: 0px;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #000000;
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tian-div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .tian {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .practiceBox {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100100;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0, 0, 0, 0.19);
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ &.practiceBoxStrock {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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