服务详情数据

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>