From 086f03d3f6e80f2997a7920a3a0b72451f30f838 Mon Sep 17 00:00:00 2001
From: zhaotiantian <18710962446@163.com>
Date: Tue, 21 Nov 2023 18:25:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E8=AF=A6=E6=83=85=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/less/index.less              |  28 +++++++++
 src/assets/{切图 8@2x.png => light.png} | Bin
 src/components/body-d-left/oneL.vue     |  74 +++++++++++++++++++++++-
 src/components/body-d-left/threeL.vue   |  28 ++++++++-
 src/components/body-d-left/twoL.vue     |  19 +++++-
 src/main.ts                             |   2 +-
 src/views/index.vue                     |   3 +-
 7 files changed, 144 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/less/index.less
 rename src/assets/{切图 8@2x.png => light.png} (100%)

diff --git a/src/assets/less/index.less b/src/assets/less/index.less
new file mode 100644
index 0000000..d2cf259
--- /dev/null
+++ b/src/assets/less/index.less
@@ -0,0 +1,28 @@
+.type-time{
+  text-align: right;
+  padding-right: 4%;
+  padding-top: 5%;
+  font-size: 18px;
+  span{
+    padding: 0 2%;
+    cursor: pointer;
+  }
+  .select{
+    color: #45A2FF;
+    position: relative;
+    &:after{
+      content: '';
+      position: absolute;
+      display: block;
+      width: 70%;
+      left: 10px;
+      bottom: -14px;
+      height: 8px;
+      background: url("../../assets/light.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .unSelect{
+    color: #A3A4A4;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/切图 8@2x.png b/src/assets/light.png
similarity index 100%
rename from src/assets/切图 8@2x.png
rename to src/assets/light.png
diff --git a/src/components/body-d-left/oneL.vue b/src/components/body-d-left/oneL.vue
index f360bd8..27dca79 100644
--- a/src/components/body-d-left/oneL.vue
+++ b/src/components/body-d-left/oneL.vue
@@ -2,17 +2,85 @@
     <div>
         <public-title title="服务详情数据"/>
         <div class="inner">
-
+          <div class="type-time">
+              <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
+          </div>
+          <div class="server-container">
+            <div class="server-item" v-for="(item,index) in dataLists" :key="index">
+              <span>{{item.title}}</span>
+              <span>{{item.iphone}}</span>
+            </div>
+          </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-
+import { ref } from 'vue';
 import PublicTitle from "../publicTitle.vue";
+const typeTime = ref([
+    {
+      name:'全部',
+      value:'all',
+    },{
+      name:'本年',
+      value:'year',
+    },
+    {
+      name:'本月',
+      value:'month',
+    },
+    {
+      name:'本周',
+      value:'week',
+    }
+  ])
+const dataLists = ref([
+  {
+    title:'最新呼入电话',
+    iphone:'18394578789'
+  },
+  {
+    title:'最新呼入电话',
+    iphone:'18394578789'
+  },
+  {
+    title:'最新呼入电话',
+    iphone:'18394578789'
+  },
+  {
+    title:'最新呼入电话',
+    iphone:'18394578789'
+  },
+])
+const selectIndex = ref(0)
+
+function handleSelect(index:number){
+  selectIndex.value = index;
+}
 </script>
 <style scoped lang="less">
 .inner {
     height: calc(100% - 40px);
-
+    .server-container{
+      color: #A3A4A4;
+      padding-top: 4%;
+      .server-item{
+        padding: 3.5% 0;
+        font-size: 20px;
+        span{
+          display: inline-block;
+          width: 50%;
+          font-weight: bold;
+        }
+        span:nth-child(1){
+          text-align: left;
+          padding-left: 5%;
+        }
+        span:nth-child(2){
+          text-align: right;
+          padding-right: 6%;
+        }
+      }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/body-d-left/threeL.vue b/src/components/body-d-left/threeL.vue
index d52990b..a22fff9 100644
--- a/src/components/body-d-left/threeL.vue
+++ b/src/components/body-d-left/threeL.vue
@@ -2,17 +2,39 @@
     <div>
         <public-title title="体检数据"/>
         <div class="inner">
-
+          <div class="type-time">
+            <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
+          </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-
+import { ref } from 'vue';
 import PublicTitle from "../publicTitle.vue";
+const typeTime = ref([
+  {
+    name:'全部',
+    value:'all',
+  },{
+    name:'本年',
+    value:'year',
+  },
+  {
+    name:'本月',
+    value:'month',
+  },
+  {
+    name:'本周',
+    value:'week',
+  }
+])
+const selectIndex = ref(0)
+function handleSelect(index:number){
+  selectIndex.value = index;
+}
 </script>
 <style scoped lang="less">
 .inner {
     height: calc(100% - 40px);
-
 }
 </style>
\ No newline at end of file
diff --git a/src/components/body-d-left/twoL.vue b/src/components/body-d-left/twoL.vue
index f7bf8bf..1ed247e 100644
--- a/src/components/body-d-left/twoL.vue
+++ b/src/components/body-d-left/twoL.vue
@@ -2,13 +2,28 @@
     <div>
         <public-title title="主诉分类"/>
         <div class="inner">
-
+          <div class="">
+            <div class="type-time">
+              <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
+            </div>
+            <div>全部数据</div>
+          </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-
+import { ref } from 'vue';
 import PublicTitle from "../publicTitle.vue";
+const typeTime = ref([
+  {
+    name:'男',
+    value:'man',
+  },{
+    name:'女',
+    value:'women',
+  },
+])
+const selectIndex = ref(0)
 </script>
 <style scoped lang="less">
 .inner {
diff --git a/src/main.ts b/src/main.ts
index e57db59..0778459 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
 import {createApp} from 'vue'
 import App from './App.vue'
-
+import './assets/less/index.less';
 createApp(App).mount('#app')
diff --git a/src/views/index.vue b/src/views/index.vue
index 40aa852..7693043 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -14,7 +14,7 @@
             <div class="body-d-left">
                 <one-l/>
                 <two-l/>
-                <two-l/>
+                <three-l/>
             </div>
             <div class="body-d-middle">
                 <china-map />
@@ -31,6 +31,7 @@
 
 import OneL from "../components/body-d-left/oneL.vue";
 import TwoL from "../components/body-d-left/twoL.vue";
+import ThreeL from "../components/body-d-left/threeL.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";