init

1.初始化项目

src/App.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import index from './views/index.vue'
+</script>
+
+<template>
+    <index/>
+</template>
+
+<style lang="less" scoped>
+</style>

src/components/body-d-left/oneL.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <public-title title="服务详情数据"/>
+        <div class="inner">
+
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+import PublicTitle from "../publicTitle.vue";
+</script>
+<style scoped lang="less">
+.inner {
+    height: calc(100% - 40px);
+
+}
+</style>

src/components/body-d-left/threeL.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <public-title title="体检数据"/>
+        <div class="inner">
+
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+import PublicTitle from "../publicTitle.vue";
+</script>
+<style scoped lang="less">
+.inner {
+    height: calc(100% - 40px);
+
+}
+</style>

src/components/body-d-left/twoL.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <public-title title="主诉分类"/>
+        <div class="inner">
+
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+import PublicTitle from "../publicTitle.vue";
+</script>
+<style scoped lang="less">
+.inner {
+    height: calc(100% - 40px);
+
+}
+</style>

src/components/body-d-right/oneR.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <public-title title="健康终端报警"/>
+        <div class="inner">
+
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+import PublicTitle from "../publicTitle.vue";
+</script>
+<style scoped lang="less">
+.inner {
+    height: calc(100% - 40px);
+
+}
+</style>

src/components/body-d-right/threeR.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <public-title title="基层医疗点远程会诊"/>
+        <div class="inner">
+
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+import PublicTitle from "../publicTitle.vue";
+</script>
+<style scoped lang="less">
+.inner {
+    height: calc(100% - 40px);
+
+}
+</style>

src/components/body-d-right/twoR.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <public-title title="健康状况/慢病"/>
+        <div class="inner">
+
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+import PublicTitle from "../publicTitle.vue";
+</script>
+<style scoped lang="less">
+.inner {
+    height: calc(100% - 40px);
+
+}
+</style>

src/components/publicTitle.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="title-d">{{ props.title }}</div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    title: {
+        type: String,
+        default: () => ''
+    }
+})
+</script>
+<style scoped lang="less">
+.title-d {
+    padding-left: 17px;
+    position: relative;
+    text-align: left;
+    height: 40px;
+    line-height: 40px;
+    background: linear-gradient(270deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%);
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(270deg, rgba(217.0000022649765, 231.00000143051147, 255, 0.5), rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1;
+    color: #ffffff;
+    font-size: 20px;
+    font-weight: 700;
+
+    &:before {
+        position: absolute;
+        content: '';
+        width: 7px;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: #45A2FF;
+    }
+}
+</style>

src/main.ts

@@ -0,0 +1,4 @@
+import {createApp} from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/views/index.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+
+import OneL from "../components/body-d-left/oneL.vue";
+import TwoL from "../components/body-d-left/twoL.vue";
+import OneR from "../components/body-d-right/oneR.vue";
+import TwoR from "../components/body-d-right/twoR.vue";
+import ThreeR from "../components/body-d-right/threeR.vue";
+</script>
+
+<template>
+    <div class="outer">
+        <div class="title-d">
+            <div class="title-d-left">
+                left
+            </div>
+            <div class="title-d-middle">
+            </div>
+            <div class="title-d-right">
+                right
+            </div>
+        </div>
+        <div class="body-d">
+            <div class="body-d-left">
+                <one-l/>
+                <two-l/>
+                <two-l/>
+            </div>
+            <div class="body-d-middle">
+                <div></div>
+            </div>
+            <div class="body-d-right">
+                <one-r/>
+                <two-r/>
+                <three-r/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.outer {
+    height: 100%;
+    box-sizing: border-box;
+    background: url("../assets/bg.png") no-repeat;
+    background-size: 100% 100%;
+}
+
+.title-d {
+    height: 80px;
+    line-height: 80px;
+    display: flex;
+    padding-bottom: 9px;
+    border-bottom: 1px dashed #e6e6e6;
+    background: url("../assets/top-title.png") no-repeat;
+    background-size: 100% 100%;
+
+    .title-d-left, .title-d-middle, .title-d-right {
+        width: calc(100% / 3);
+        text-align: center;
+        border-right: 1px solid red;
+    }
+
+}
+
+.body-d {
+    display: flex;
+    height: calc(100% - 80px);
+    padding-top: 10px;
+
+    > :nth-child(1) {
+        width: 25%;
+    }
+
+    > :nth-child(2) {
+        width: 50%;
+    }
+
+    > :nth-child(3) {
+        width: 25%;
+    }
+
+    .body-d-left, .body-d-middle, .body-d-right {
+        text-align: center;
+    }
+
+    .body-d-left, .body-d-right {
+
+        > :nth-child(n) {
+            width: 100%;
+            height: calc(100% / 3);
+            border: 1px solid red;
+            padding: 10px;
+        }
+    }
+}
+</style>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />