初始化

src/view/index.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="title_top">
+        <div class="left_top">
+            <el-tabs v-model="activeName" @tab-click="handleClick" >
+                <el-tab-pane label="绿色通道" name="first">
+                    <greenChannel></greenChannel>
+                </el-tab-pane>
+                <el-tab-pane label="急诊录入" name="second">
+                    <emergencyInput></emergencyInput>
+                </el-tab-pane>
+                <el-tab-pane label="绿色通道记录" name="third">
+                <greenRecord :activeName="activeName"></greenRecord>
+            </el-tab-pane>
+            </el-tabs>
+        </div>
+
+        <div class="right_top">
+            <el-tabs @tab-click="logOut">
+                <el-tab-pane label="退出登录" name="out" ></el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+
+</template>
+<script>
+import greenChannel from '@/view/green-channel.vue'
+import emergencyInput from '@/view/emergency-input.vue'
+import greenRecord from '@/view/green_record.vue'
+export default {
+  name: 'IndexPage',
+    components: {
+        greenChannel,
+        emergencyInput,
+        greenRecord
+    },
+    data() {
+        return {
+            activeName:'first',
+        }
+    },
+    methods: {
+        handleClick(){
+
+        },
+        logOut(){
+            this.$confirm('确定要退出登录吗？', '退出登录', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$message.success('退出登录成功');
+                localStorage.setItem('info',{})
+                this.$router.replace('/login')
+            }).catch(() => {
+                // 取消退出
+                // console.log('用户取消退出登录');
+            });
+        }
+    }
+}
+</script>
+
+
+
+<style scoped>
+.title_top {
+    padding:0 20px ;
+    display: flex;
+    justify-content: space-between;
+    ::v-deep .el-tabs__nav {
+        line-height: 50px;
+    }
+    .left_top {
+        flex: 1;
+    }
+    .right_top {
+        display: flex;
+        justify-content: end;
+        ::v-deep .el-tabs__active-bar  {
+            width: 0 !important;
+        }
+        ::v-deep .el-tabs__item:hover {
+            color: #303133;
+        }
+        ::v-deep .el-tabs__item.is-active {
+            color: #303133;
+        }
+    }
+}
+
+</style>