You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.6 KiB
Vue
88 lines
1.6 KiB
Vue
11 months ago
|
<script setup lang="ts">
|
||
|
|
import ElectronicCase from "./compontents/ElectronicCase/index.vue";
|
||
|
|
import { ref } from "vue";
|
||
|
|
const activedIndex = ref(0);
|
||
|
|
const navList = ref([
|
||
|
|
{
|
||
|
|
name: "电子病历"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "临床问诊"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "临床诊断"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "诊断依据"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "处置计划"
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="editCase main-table">
|
||
|
|
<div class="editCase_nav">
|
||
|
|
<div
|
||
|
|
class="editCase_nav_item"
|
||
|
|
:class="[activedIndex === index ? 'actived' : '']"
|
||
|
|
v-for="(item, index) in navList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<div class="line" />
|
||
|
|
<span>{{ item.name }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ElectronicCase v-if="activedIndex === 0" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.editCase {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row !important;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
.editCase_nav {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
width: 168px;
|
||
|
|
// justify-content: center;
|
||
|
|
height: 100%;
|
||
|
|
padding-top: 24px;
|
||
|
|
border-right: 1px solid #d9d9d9;
|
||
|
|
|
||
|
|
.editCase_nav_item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 120px;
|
||
|
|
height: 53px;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #999;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 8px;
|
||
|
|
|
||
|
|
.line {
|
||
|
|
width: 4px;
|
||
|
|
height: 17px;
|
||
|
|
margin-right: 12px;
|
||
|
|
background: #999;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.actived {
|
||
|
|
color: #4287ff;
|
||
|
|
background: linear-gradient(90deg, rgb(66 135 255 / 10%) 0%, #fff 100%);
|
||
|
|
|
||
|
|
.line {
|
||
|
|
background: #4287ff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|