157 lines
4.2 KiB
Vue
157 lines
4.2 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<wangeditor style="height:300px;width:40%;margin-left:40%" ref="editor" />
|
||
|
|
<el-timeline style="width:25%">
|
||
|
|
<el-timeline-item v-for="(item, index) in timelinelist" :key="index"
|
||
|
|
:color="listindex == index ? '#409EFF' : ''">
|
||
|
|
<div class="top" @click="topclickevent(index)">
|
||
|
|
<div class="toptop">
|
||
|
|
<el-select v-model="value" style="width:90px">
|
||
|
|
<el-option label="出院后" value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
<el-input v-model="input" style="width: 60px;"></el-input>
|
||
|
|
<span>天</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<i class="el-icon-delete"></i>
|
||
|
|
<i class="el-icon-circle-plus-outline"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-card v-for="(uitem, uindex) in item.list" :key="uitem.id"
|
||
|
|
@click.native='bottomclickevent(index, uindex)'
|
||
|
|
:class="listindex == index && itemindex == uindex ? 'cards' : ''">
|
||
|
|
<h4>{{ uitem.title }}</h4>
|
||
|
|
<p>{{ uitem.text }}</p>
|
||
|
|
</el-card>
|
||
|
|
</el-timeline-item>
|
||
|
|
</el-timeline>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import wangeditor from '../components/wangEditor.vue'
|
||
|
|
export default {
|
||
|
|
components: { wangeditor },
|
||
|
|
name: "specialDiseaseNode",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
itemindex: 0,
|
||
|
|
listindex: 0,
|
||
|
|
timelinelist: [{
|
||
|
|
title: '选项1',
|
||
|
|
text: '黄金糕',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
title: '选项1',
|
||
|
|
text: '黄金糕',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '选项1',
|
||
|
|
text: '黄金糕',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}, {
|
||
|
|
title: '选项2',
|
||
|
|
text: '双皮奶',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
title: '选项1',
|
||
|
|
text: '黄金糕',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}, {
|
||
|
|
title: '选项3',
|
||
|
|
text: '蚵仔煎',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
title: '选项1',
|
||
|
|
text: '黄金糕',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '选项1',
|
||
|
|
text: '黄金糕',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}, {
|
||
|
|
title: '选项4',
|
||
|
|
text: '龙须面'
|
||
|
|
}, {
|
||
|
|
title: '选项5',
|
||
|
|
text: '北京烤鸭',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
title: '选项1',
|
||
|
|
text: '黄金糕',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '选项1',
|
||
|
|
text: '黄金糕',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}],
|
||
|
|
value: '',
|
||
|
|
input: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
console.log(this.$refs.editor.html)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
topclickevent(index) {
|
||
|
|
this.listindex = index
|
||
|
|
this.itemindex = 0
|
||
|
|
},
|
||
|
|
bottomclickevent(index, uindex) {
|
||
|
|
this.listindex = index
|
||
|
|
this.itemindex = uindex
|
||
|
|
},
|
||
|
|
handleStep() {
|
||
|
|
this.active = 2
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.cards {
|
||
|
|
border: 1px solid #409EFF;
|
||
|
|
border-left: 5px solid #409EFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.toptop {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
i {
|
||
|
|
padding-left: 12px;
|
||
|
|
font-size: 17px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-timeline-item__timestamp {
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-timeline-item__content {
|
||
|
|
transform: translateY(-2%);
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-card {
|
||
|
|
margin-top: 20px !important;
|
||
|
|
}
|
||
|
|
</style>
|