|
|
@@ -1,12 +1,16 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="Big-Book-prev-Textdes SelectYinjie" v-if="curQue">
|
|
|
- <div class="item-box" v-for="(item,index) in curQue.option" :key="index">
|
|
|
+ <div class="item-box" v-for="(item,index) in curQue" :key="index">
|
|
|
<Audio
|
|
|
- :mp3="
|
|
|
- item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
|
|
|
+ :mp3="item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
|
|
|
class="audio-play"
|
|
|
/>
|
|
|
+ <b v-if="item.number">{{item.number}}</b>
|
|
|
+ <div class="zijie-box">
|
|
|
+ <p :class="[userList[index].indexOf(indexs)>-1?'active':'']" v-for="(items,indexs) in item.option" :key="indexs" @click="handleClick(index,indexs)">{{items.pinyin}}</p>
|
|
|
+ </div>
|
|
|
+ <a :class="['clear-btn',userList[index].length>0?'active':'']" @click="handleClear(index)"></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -18,17 +22,33 @@ export default {
|
|
|
props: ["curQue"],
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ userList:[]
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
-
|
|
|
+ handleData(){
|
|
|
+ let _this = this
|
|
|
+ this.curQue.forEach(item => {
|
|
|
+ _this.userList.push([])
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClick(index,indexs){
|
|
|
+ if (this.userList[index].indexOf(indexs) > -1) {
|
|
|
+ this.userList[index].splice(this.userList[index].indexOf(indexs), 1)
|
|
|
+ } else {
|
|
|
+ this.userList[index].push(indexs)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClear(index){
|
|
|
+ this.$set(this.userList,index,[])
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
+ this.handleData()
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {},
|
|
|
@@ -43,5 +63,71 @@ export default {
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
//@import url(); 引入公共css类
|
|
|
+.SelectYinjie{
|
|
|
+ width: 100%;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 24px;
|
|
|
+ .item-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .audio-play{
|
|
|
+ width: 24px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ b{
|
|
|
+ background: #DE4444;
|
|
|
+ text-align: center;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: 'robot';
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ .zijie-box{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 4px;
|
|
|
+ flex-flow: wrap;
|
|
|
+ p{
|
|
|
+ margin: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ min-width: 56px;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ font-family: 'GB-PINYINOK-B';
|
|
|
+ &.active{
|
|
|
+ background: #DE4444;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .clear-btn{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: url('../../../assets/icon/Undofill-16-disable-Black.png') center no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ &.active{
|
|
|
+ background: url('../../../assets/icon/Undofill-16-normal-Black.png') center no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
</style>
|
natasha