95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="menuTrainListOut" :style="{top: offset-5 +'px'}">
|
||
|
|
<div v-if="drawer" class="menuTrainListContent">
|
||
|
|
<div>
|
||
|
|
<div v-for="(item, index) in questionList" :key="index">
|
||
|
|
<div style="text-align: center;font-size: 16px;">{{ item.name }}</div>
|
||
|
|
<div style="text-align: left;font-size: 14px;margin-top: 5px;">{{ '描述:'+item.description }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menuTrainListBtn1In" style=";position: absolute; top: 98%;left:150px;z-index: 2;" @click="clickBtn">
|
||
|
|
<i class="el-icon-more" style="font-size: 20px;transform-origin: 50% 50%;" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="menuTrainListBtn1" @click="clickBtn">
|
||
|
|
<div class="menuTrainListBtn1In">
|
||
|
|
<i class="el-icon-more" style="font-size: 20px;transform-origin: 50% 50%;" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'JsQuestion',
|
||
|
|
props: {
|
||
|
|
offset: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
questionList: {
|
||
|
|
type: Array,
|
||
|
|
default() {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
drawer: true
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
clickBtn() {
|
||
|
|
this.drawer = !this.drawer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.menuTrainListBtn1In{
|
||
|
|
width: 40px;
|
||
|
|
height: 20px;
|
||
|
|
background: #fff;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 0 0 6px 6px;
|
||
|
|
cursor:pointer;
|
||
|
|
/*border: 1px #adadad solid;*/
|
||
|
|
}
|
||
|
|
.menuTrainListBtn1{
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.menuTrainListContent{
|
||
|
|
background: #fff;
|
||
|
|
text-align: center;
|
||
|
|
border-radius:0 0 6px 6px;
|
||
|
|
padding: 10px;
|
||
|
|
position: absolute;
|
||
|
|
width: 350px;
|
||
|
|
left: -150px;
|
||
|
|
z-index: 3;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
.menuTrainListOut{
|
||
|
|
position: absolute;
|
||
|
|
right: 30%;
|
||
|
|
height: 70%;
|
||
|
|
}
|
||
|
|
.menuTrainList{
|
||
|
|
width: 400px;
|
||
|
|
height:100%;
|
||
|
|
border-radius: 10px 0px 0px 10px;
|
||
|
|
// padding: 5px;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.topTrainListInfo,.bottomTrainListInfo{
|
||
|
|
padding: 10px 10px;
|
||
|
|
background: #cde2ef;
|
||
|
|
font-size: 13px;
|
||
|
|
border-radius: 5px 0px 0px 0px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|