|
@@ -0,0 +1,224 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-PurePreview" v-if="curQue">
|
|
|
+ <div
|
|
|
+ class="Big-Book-Single-content"
|
|
|
+ style="margin-left: 20px; margin-top: 20px"
|
|
|
+ >
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <span class="adult-book-lable">标题:</span>
|
|
|
+ <el-input
|
|
|
+ class="adult-book-input"
|
|
|
+ type="textarea"
|
|
|
+ autosize
|
|
|
+ placeholder="请输入标题"
|
|
|
+ v-model="curQue.title"
|
|
|
+ @blur="onBlur(curQue, 'title')"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="Big-Book-main"
|
|
|
+ v-for="(item, index) in curQue.option"
|
|
|
+ :key="item + index"
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ >
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <span class="adult-book-lable">序号:</span>
|
|
|
+ <el-input
|
|
|
+ class="adult-book-input"
|
|
|
+ type="textarea"
|
|
|
+ autosize
|
|
|
+ placeholder="请输入序号"
|
|
|
+ v-model="item.number"
|
|
|
+ @blur="onBlur(item, 'number')"
|
|
|
+ ></el-input>
|
|
|
+ <img
|
|
|
+ @click="deleteOptionOne"
|
|
|
+ class="close"
|
|
|
+ src="../../../assets/adult/del-close.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="NPC-sentence-Segword">
|
|
|
+ <SentenceSegwordChs :curQue="item.detail" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="Big-Book-addrole">
|
|
|
+ <div class="addoption" @click="addOption">添加一个</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Upload from "../common/Upload";
|
|
|
+import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
|
|
|
+export default {
|
|
|
+ name: "PurePreview",
|
|
|
+ props: ["curQue", "fn_data", "changeCurQue", "type"],
|
|
|
+ components: {
|
|
|
+ SentenceSegwordChs,
|
|
|
+ Upload,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkList: [],
|
|
|
+ mp3Number: 1,
|
|
|
+ form: {
|
|
|
+ stem: {
|
|
|
+ con: "",
|
|
|
+ pinyin: "",
|
|
|
+ english: "",
|
|
|
+ highlight: "",
|
|
|
+ underline: "",
|
|
|
+ img_url: [],
|
|
|
+ mp3_url: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data_structure: {
|
|
|
+ type: "text_problem_chs",
|
|
|
+ name: "课文上面的问题",
|
|
|
+ title: "",
|
|
|
+ option: [
|
|
|
+ {
|
|
|
+ mp3_list: [],
|
|
|
+ number: "",
|
|
|
+ detail: {
|
|
|
+ pyPosition: "top", //top 拼音在上面;bottom 拼音在下面
|
|
|
+ sentence: "", //句子
|
|
|
+ segList: [], //分词结果
|
|
|
+ seg_words: "",
|
|
|
+ wordsList: [],
|
|
|
+ },
|
|
|
+ en: "", //英文
|
|
|
+ answer: [""],
|
|
|
+ judge: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ onBlur(item, field) {
|
|
|
+ item[field] = item[field] ? item[field].trim() : "";
|
|
|
+ },
|
|
|
+ // 删除其中一个选项
|
|
|
+ deleteOptionOne(index) {
|
|
|
+ if (this.curQue.option.length <= 1) {
|
|
|
+ this.$message.warning("至少要保留1个选项");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curQue.option.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 新增选项
|
|
|
+ addOption() {
|
|
|
+ let obj;
|
|
|
+ obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
|
|
|
+ this.curQue.option.push(obj);
|
|
|
+ },
|
|
|
+ initcurQue() {
|
|
|
+ let data;
|
|
|
+ data = JSON.parse(JSON.stringify(this.data_structure));
|
|
|
+ this.changeCurQue(data);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {
|
|
|
+ if (!this.curQue) {
|
|
|
+ this.initcurQue();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scope>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.Big-Book-PurePreview {
|
|
|
+ &-content {
|
|
|
+ &.m {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .Big-Book-title {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #000;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .Big-Book-main {
|
|
|
+ > div {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &.Big-Book-pinyin {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .Big-Book-addrole {
|
|
|
+ > div {
|
|
|
+ width: 300px;
|
|
|
+ height: 40px;
|
|
|
+ background: #f3f3f3;
|
|
|
+ border: 1px dashed rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .Big-Book-more {
|
|
|
+ .Big-Book-more-text {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .Big-Book-more-text:before,
|
|
|
+ .Big-Book-more-text:after {
|
|
|
+ position: absolute;
|
|
|
+ background: #ccc;
|
|
|
+ content: "";
|
|
|
+ height: 1px;
|
|
|
+ top: 50%;
|
|
|
+ width: 45%;
|
|
|
+ }
|
|
|
+ .Big-Book-more-text:before {
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ .Big-Book-more-text:after {
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
+ .Big-Book-more-main {
|
|
|
+ display: flex;
|
|
|
+ > :not(:nth-child(1)) {
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .Big-Book-con {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .close{
|
|
|
+ width: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+</style>
|