|  | @@ -0,0 +1,206 @@
 | 
	
		
			
				|  |  | +<!--  -->
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="Big-Book-sentence" 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-radio-group v-model="curQue.titleType">
 | 
	
		
			
				|  |  | +          <el-radio label="cn">中文</el-radio>
 | 
	
		
			
				|  |  | +          <el-radio label="en">英文</el-radio>
 | 
	
		
			
				|  |  | +        </el-radio-group>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div class="adult-book-input-item" v-if="curQue.titleType">
 | 
	
		
			
				|  |  | +        <span class="adult-book-lable">标题:</span>
 | 
	
		
			
				|  |  | +        <el-input
 | 
	
		
			
				|  |  | +          class="adult-book-input"
 | 
	
		
			
				|  |  | +          type="textarea"
 | 
	
		
			
				|  |  | +          :autosize="{ minRows: 2 }"
 | 
	
		
			
				|  |  | +          placeholder="请输入标题"
 | 
	
		
			
				|  |  | +          v-model="curQue.title"
 | 
	
		
			
				|  |  | +          @blur="onBlur(curQue, 'title')"
 | 
	
		
			
				|  |  | +        ></el-input>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div>
 | 
	
		
			
				|  |  | +        <SentenceSegwordChs :curQue="curQue.detail" />
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div class="adult-book-input-item">
 | 
	
		
			
				|  |  | +        <span class="adult-book-lable">英文:</span>
 | 
	
		
			
				|  |  | +        <el-input
 | 
	
		
			
				|  |  | +          class="adult-book-input"
 | 
	
		
			
				|  |  | +          type="textarea"
 | 
	
		
			
				|  |  | +          :autosize="{ minRows: 2 }"
 | 
	
		
			
				|  |  | +          placeholder="请输入英文"
 | 
	
		
			
				|  |  | +          v-model="curQue.en"
 | 
	
		
			
				|  |  | +          @blur="onBlur(curQue, 'en')"
 | 
	
		
			
				|  |  | +        ></el-input>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div class="adult-book-input-item">
 | 
	
		
			
				|  |  | +        <span class="adult-book-lable">内容:</span>
 | 
	
		
			
				|  |  | +        <el-input
 | 
	
		
			
				|  |  | +          class="adult-book-input"
 | 
	
		
			
				|  |  | +          type="textarea"
 | 
	
		
			
				|  |  | +          :autosize="{ minRows: 2 }"
 | 
	
		
			
				|  |  | +          placeholder="请输入内容"
 | 
	
		
			
				|  |  | +          v-model="curQue.con"
 | 
	
		
			
				|  |  | +          @blur="onBlur(curQue, 'con')"
 | 
	
		
			
				|  |  | +        ></el-input>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import Upload from "../common/Upload";
 | 
	
		
			
				|  |  | +import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: "Single",
 | 
	
		
			
				|  |  | +  props: ["curQue", "fn_data", "changeCurQue", "type"],
 | 
	
		
			
				|  |  | +  components: {
 | 
	
		
			
				|  |  | +    Upload,
 | 
	
		
			
				|  |  | +    SentenceSegwordChs,
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      data_structure: {
 | 
	
		
			
				|  |  | +        type: "CourseStart_chs",
 | 
	
		
			
				|  |  | +        name: "封面",
 | 
	
		
			
				|  |  | +        title: "",
 | 
	
		
			
				|  |  | +        titleType: "",
 | 
	
		
			
				|  |  | +        en: "",
 | 
	
		
			
				|  |  | +        con: "",
 | 
	
		
			
				|  |  | +        detail: {
 | 
	
		
			
				|  |  | +          type: "detail",
 | 
	
		
			
				|  |  | +          pyPosition: "top", //top 拼音在上面;bottom 拼音在下面
 | 
	
		
			
				|  |  | +          sentence: "", //句子
 | 
	
		
			
				|  |  | +          segList: [], //分词结果
 | 
	
		
			
				|  |  | +          seg_words: "",
 | 
	
		
			
				|  |  | +          wordsList: [],
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  computed: {},
 | 
	
		
			
				|  |  | +  watch: {},
 | 
	
		
			
				|  |  | +  //方法集合
 | 
	
		
			
				|  |  | +  methods: {},
 | 
	
		
			
				|  |  | +  //生命周期 - 创建完成(可以访问当前this实例)
 | 
	
		
			
				|  |  | +  created() {
 | 
	
		
			
				|  |  | +    if (!this.curQue) {
 | 
	
		
			
				|  |  | +      this.changeCurQue(this.data_structure);
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  //生命周期 - 挂载完成(可以访问DOM元素)
 | 
	
		
			
				|  |  | +  mounted() {},
 | 
	
		
			
				|  |  | +  beforeCreate() {}, //生命周期 - 创建之前
 | 
	
		
			
				|  |  | +  beforeMount() {}, //生命周期 - 挂载之前
 | 
	
		
			
				|  |  | +  beforeUpdate() {}, //生命周期 - 更新之前
 | 
	
		
			
				|  |  | +  updated() {}, //生命周期 - 更新之后
 | 
	
		
			
				|  |  | +  beforeDestroy() {}, //生命周期 - 销毁之前
 | 
	
		
			
				|  |  | +  destroyed() {}, //生命周期 - 销毁完成
 | 
	
		
			
				|  |  | +  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style lang='scss' scope>
 | 
	
		
			
				|  |  | +//@import url(); 引入公共css类
 | 
	
		
			
				|  |  | +.Big-Book-sentence {
 | 
	
		
			
				|  |  | +  &-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;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.lrc-box {
 | 
	
		
			
				|  |  | +  display: flex;
 | 
	
		
			
				|  |  | +  justify-content: flex-start;
 | 
	
		
			
				|  |  | +  align-items: center;
 | 
	
		
			
				|  |  | +  > span {
 | 
	
		
			
				|  |  | +    font-size: 14px;
 | 
	
		
			
				|  |  | +    margin-right: 16px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.close {
 | 
	
		
			
				|  |  | +  width: 24px;
 | 
	
		
			
				|  |  | +  cursor: pointer;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.addoption {
 | 
	
		
			
				|  |  | +  width: 200px;
 | 
	
		
			
				|  |  | +  height: 40px;
 | 
	
		
			
				|  |  | +  margin-bottom: 15px;
 | 
	
		
			
				|  |  | +  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;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 | 
	
		
			
				|  |  | +<style lang="scss">
 | 
	
		
			
				|  |  | +</style>
 |