服务详情数据

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;
+  }
+}

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>

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>

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 {

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')

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";