服务详情数据

package.json

@@ -16,7 +16,6 @@
     "path": "^0.12.7",
     "prettier": "^3.1.0",
     "vue": "^3.3.4",
-    "vue-seamless-scroll": "^1.1.23",
     "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {

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

@@ -1,109 +1,115 @@
 <template>
-  <div>
+    <div>
-    <public-title title="服务详情数据"/>
+        <public-title title="服务详情数据" />
-    <div class="inner">
+        <div class="inner">
-      <div class="type-time">
+            <div class="type-time">
                 <span
                     v-for="(item, index) in typeTime"
                     :key="index"
                     :class="selectIndex === index ? 'select' : 'unSelect'"
-                    @click="handleSelect(index)"
+                    @click="handleSelect(index, item.value)"
-                >{{ item.name }}</span
+                    >{{ item.name }}</span
                 >
-      </div>
+            </div>
-      <div class="server-container">
+            <div class="server-container">
-        <div v-for="(item, index) in dataLists" :key="index" class="server-item">
+                <div v-for="(item, index) in dataLists" :key="index" class="server-item">
-          <span>{{ item.title }}</span>
+                    <span>{{ item.title }}</span>
-          <span>{{ item.iphone }}</span>
+                    <span>{{ item.iphone }}</span>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 <script setup lang="ts">
-import {onMounted, ref} from 'vue';
+    import { onMounted, ref } from 'vue';
-import PublicTitle from '../publicTitle.vue';
+    import PublicTitle from '../publicTitle.vue';
-import {list} from './left.api';
+    import { list } from './left.api';
 
-const typeTime = ref([
+    const typeTime = ref([
-  {
+        {
-    name: '全部',
+            name: '全部',
-    value: 'all',
+            value: '1',
-  },
+        },
-  {
+        {
-    name: '本年',
+            name: '本年',
-    value: 'year',
+            value: '2',
-  },
+        },
-  {
+        {
-    name: '本月',
+            name: '本月',
-    value: 'month',
+            value: '3',
-  },
+        },
-  {
+        {
-    name: '本周',
+            name: '本周',
-    value: 'week',
+            value: '4',
-  },
+        },
-]);
+    ]);
-const dataLists = ref([
+    const dataLists = ref([
-  {
+        {
-    title: '最新呼入电话',
+            title: '最新呼入电话',
-    iphone: '18394578789',
+            iphone: '18394578789',
-  },
+        },
-  {
+        {
-    title: '最新呼入电话',
+            title: '最新呼入电话',
-    iphone: '18394578789',
+            iphone: '18394578789',
-  },
+        },
-  {
+        {
-    title: '最新呼入电话',
+            title: '最新呼入电话',
-    iphone: '18394578789',
+            iphone: '18394578789',
-  },
+        },
-  {
+        {
-    title: '最新呼入电话',
+            title: '最新呼入电话',
-    iphone: '18394578789',
+            iphone: '18394578789',
-  },
+        },
-]);
+    ]);
-const selectIndex = ref(0);
+    const selectIndex = ref(0);
-onMounted(() => {
+    const selectVal = ref('1');
-  list({
+    onMounted(() => {
-    condition: '',
+        getList();
-  }).then(() => {
+    });
 
-  });
+    function getList() {
-});
+        list({
+            condition: selectVal.value,
+        }).then(() => {});
+    }
 
-function handleSelect(index: number) {
+    function handleSelect(index: number, value: string) {
-  selectIndex.value = index;
+        selectIndex.value = index;
-}
+        selectVal.value = value;
+        console.log(selectVal.value, value);
+        getList();
+    }
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
-  height: calc(100% - 40px);
+        height: calc(100% - 40px);
 
-  .server-container {
+        .server-container {
-    color: #a3a4a4;
+            color: #a3a4a4;
-    padding-top: 4%;
+            padding-top: 4%;
-    height: 88%;
+            height: 88%;
-    display: grid;
+            display: grid;
-    align-items: start;
+            align-items: start;
 
-    .server-item {
+            .server-item {
-      font-size: 16px;
+                font-size: 16px;
 
-      span {
+                span {
-        display: inline-block;
+                    display: inline-block;
-        width: 50%;
+                    width: 50%;
-        font-weight: bold;
+                    font-weight: bold;
-      }
+                }
 
-      span:nth-child(1) {
+                span:nth-child(1) {
-        text-align: left;
+                    text-align: left;
-        padding-left: 5%;
+                    padding-left: 5%;
-      }
+                }
 
-      span:nth-child(2) {
+                span:nth-child(2) {
-        text-align: right;
+                    text-align: right;
-        padding-right: 6%;
+                    padding-right: 6%;
-      }
+                }
+            }
+        }
     }
-  }
-}
 </style>