|
|
@@ -0,0 +1,202 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-prev-Textdes" v-if="curQue">
|
|
|
+ <div class="left-con">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,index) in curQue.option" :key="index" :class="[selectCon.indexOf(index)>-1?'active':'']" @click="handleClick(item,index)">
|
|
|
+ {{item.con}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <a :class="['sureBtn',selectCon.length>0?'active':'']" @click="handleSure">确认</a>
|
|
|
+ </div>
|
|
|
+ <div class="right-con">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,index) in rightList" :key="index">
|
|
|
+ <span v-for="(items,indexs) in item" :key="indexs">
|
|
|
+ {{items}}
|
|
|
+ </span>
|
|
|
+ <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <a :class="['clearBtn']" @click="handleClean" v-if="rightList.length>0">清空</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
|
|
|
+export default {
|
|
|
+ components: {Soundrecord},
|
|
|
+ props: ["curQue"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rightList: [],
|
|
|
+ selectConIndex: [], // 选择内容的索引
|
|
|
+ selectCon: [], // 选择内容
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ handleWav(data) {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 点击字
|
|
|
+ handleClick (word,index) {
|
|
|
+ if (this.selectConIndex.indexOf(index) > -1) {
|
|
|
+ this.selectConIndex.splice(this.selectConIndex.indexOf(index), 1)
|
|
|
+ this.selectCon.splice(this.selectConIndex.indexOf(index), 1)
|
|
|
+ } else {
|
|
|
+ this.selectConIndex.push(index)
|
|
|
+ this.selectCon.push(index)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击确定按钮
|
|
|
+ handleSure(){
|
|
|
+ let flag = false
|
|
|
+ this.rightList.forEach((item, index) => {
|
|
|
+ if (item.toString() == this.selectCon.toString()) {
|
|
|
+ flag = true
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (flag) {
|
|
|
+ this.$message.warning('已选择过相同选项');
|
|
|
+ }else{
|
|
|
+ this.rightList.push(this.selectCon)
|
|
|
+ }
|
|
|
+ this.selectConIndex = []
|
|
|
+ this.selectCon = []
|
|
|
+ },
|
|
|
+ // 清空
|
|
|
+ handleClean(){
|
|
|
+ this.rightList = []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.Big-Book-prev-Textdes{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: stretch;
|
|
|
+ .left-con{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px 25px 72px 25px;
|
|
|
+ position: relative;
|
|
|
+ width: 324px;
|
|
|
+ margin-right: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ ul{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ li{
|
|
|
+ padding: 8px;
|
|
|
+ min-width: 52px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ margin: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active{
|
|
|
+ background: #F7F7F7;
|
|
|
+ border: 1px solid #00C84B;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sureBtn{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 24px;
|
|
|
+ right: 34px;
|
|
|
+ width: 64px;
|
|
|
+ height: 32px;
|
|
|
+ background: #D8D8D8;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &.active{
|
|
|
+ background: #3EC65C;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-con{
|
|
|
+ background: #F8F8F8;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: relative;
|
|
|
+ width: 440px;
|
|
|
+ ul{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ padding: 16px 15px 72px 15px;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 7px 8px 15px;
|
|
|
+ margin: 8px;
|
|
|
+ span{
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ }
|
|
|
+ .luyin-box{
|
|
|
+ width: 68px;
|
|
|
+ height: 32px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .clearBtn{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 24px;
|
|
|
+ right: 34px;
|
|
|
+ width: 64px;
|
|
|
+ height: 32px;
|
|
|
+ background: #32A5D8;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha