Browse Source

Merge branch 'master' of http://221.216.211.14:3000/GCLS/GCLS_Page_Book_Component_NPC

# Conflicts:
#	src/components/Adult/Preview.vue
guanchunjie 3 years ago
parent
commit
8f6d412176

+ 206 - 0
src/components/Adult/inputModules/CourseStart.vue

@@ -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>

+ 114 - 0
src/components/Adult/inputModules/RecordControl.vue

@@ -0,0 +1,114 @@
+<!--  -->
+<template>
+  <div class="Big-Book-Record">
+    <div class="adult-book-input-item">
+      <span class="adult-book-lable">音频控件:</span>
+      <img
+        v-if="type == 'record_control_mini'"
+        src="../../../assets/adult/mini.png"
+        alt=""
+      />
+      <img
+        v-if="type == 'record_control_normal'"
+        src="../../../assets/adult/normal.png"
+        alt=""
+      />
+      <img
+        v-if="type == 'record_control_pro'"
+        src="../../../assets/adult/pro.png"
+        alt=""
+      />
+      <img
+        v-if="type == 'record_control_promax'"
+        src="../../../assets/adult/pro-max.png"
+        alt=""
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["curQue", "fn_data", "type", "changeCurQue"],
+  data() {
+    return {
+      data_structure: {
+        type: "record_control_mini",
+        name: "录音控件-mini",
+      },
+      data_structure2: {
+        type: "record_control_normal",
+        name: "录音控件-normal",
+      },
+      data_structure3: {
+        type: "record_control_pro",
+        name: "录音控件-pro",
+      },
+      data_structure4: {
+        type: "record_control_promax",
+        name: "录音控件-promax",
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成(可以访问当前this实例)
+  created() {
+    if (!this.curQue) {
+      if (this.type == "record_control_mini") {
+        this.changeCurQue(this.data_structure);
+      } else if (this.type == "record_control_normal") {
+        this.changeCurQue(this.data_structure2);
+      } else if (this.type == "record_control_pro") {
+        this.changeCurQue(this.data_structure3);
+      } else if (this.type == "record_control_promax") {
+        this.changeCurQue(this.data_structure4);
+      }
+    }
+  },
+  //生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.Big-Book-Record {
+  &-icon {
+    width: 48px;
+    height: 48px;
+  }
+  .Big-Book-hanzi-option {
+    margin-top: 20px;
+  }
+  .addoption {
+    width: 148px;
+    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;
+    font-size: 14px;
+    color: #000000;
+  }
+  .Big-Book-con {
+    display: flex;
+    align-items: center;
+    span {
+      width: 60px;
+    }
+  }
+}
+</style>

+ 78 - 0
src/components/Adult/preview/RecordModule.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="NPC-RecordModule">
+      <Soundrecord @handleWav="handleWav" :type="curQue.type?typeList[curQue.type]:'normal'" class="luyin-box" :class="[curQue.type]"/>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
+//例如:import 《组件名称》from ‘《组件路径》';
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+      Soundrecord
+  },
+  props: ["curQue"],
+  data() {
+    //这里存放数据
+    return {
+        typeList:{
+            'record_control_mini':'mini',
+            'record_control_normal':'normal',
+            'record_control_pro':'pro',
+            'record_control_promax':'promax'
+        }
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+      handleWav(data) {
+        
+      },
+  },
+  //生命周期 - 创建完成(可以访问当前this实例)
+  created() {},
+  //生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能,这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.NPC-RecordModule{
+    width: 100%;
+    .luyin-box{
+        padding:0 12px;
+    }
+    .record_control_mini{
+        width: 64px;
+    }
+    .record_control_normal{
+        width:129px;
+    }
+    .record_control_pro{
+        width:200px;
+    }
+    .record_control_promax{
+        width:280px;
+    }
+}
+</style>