renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

服务详情数据

Browse Source
This commit is contained in:
zhaotiantian
2023-12-04 13:59:16 +08:00
parent fc4153534c
commit a5d6f4d573
2 changed files with 94 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/body-d-left/oneL.vue
+94 -88
View File
@@ -1,109 +1,115 @@
<template>
<div>
<public-title title="服务详情数据"/>
<div class="inner">
<div class="type-time">
<div>
<public-title title="服务详情数据" />
<div class="inner">
<div class="type-time">
<span
v-for="(item, index) in typeTime"
:key="index"
:class="selectIndex === index ? 'select' : 'unSelect'"
@click="handleSelect(index)"
>{{ item.name }}</span
@click="handleSelect(index, item.value)"
>{{ item.name }}</span
>
</div>
<div class="server-container">
<div v-for="(item, index) in dataLists" :key="index" class="server-item">
<span>{{ item.title }}</span>
<span>{{ item.iphone }}</span>
</div>
<div class="server-container">
<div v-for="(item, index) in dataLists" :key="index" class="server-item">
<span>{{ item.title }}</span>
<span>{{ item.iphone }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue';
import PublicTitle from '../publicTitle.vue';
import {list} from './left.api';
import { onMounted, ref } from 'vue';
import PublicTitle from '../publicTitle.vue';
import { list } from './left.api';
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);
onMounted(() => {
list({
condition: '',
}).then(() => {
const typeTime = ref([
{
name: '全部',
value: '1',
},
{
name: '本年',
value: '2',
},
{
name: '本月',
value: '3',
},
{
name: '本周',
value: '4',
},
]);
const dataLists = ref([
{
title: '最新呼入电话',
iphone: '18394578789',
},
{
title: '最新呼入电话',
iphone: '18394578789',
},
{
title: '最新呼入电话',
iphone: '18394578789',
},
{
title: '最新呼入电话',
iphone: '18394578789',
},
]);
const selectIndex = ref(0);
const selectVal = ref('1');
onMounted(() => {
getList();
});
});
});
function getList() {
list({
condition: selectVal.value,
}).then(() => {});
}
function handleSelect(index: number) {
selectIndex.value = index;
}
function handleSelect(index: number, value: string) {
selectIndex.value = index;
selectVal.value = value;
console.log(selectVal.value, value);
getList();
}
</script>
<style scoped lang="less">
.inner {
height: calc(100% - 40px);
.inner {
height: calc(100% - 40px);
.server-container {
color: #a3a4a4;
padding-top: 4%;
height: 88%;
display: grid;
align-items: start;
.server-container {
color: #a3a4a4;
padding-top: 4%;
height: 88%;
display: grid;
align-items: start;
.server-item {
font-size: 16px;
.server-item {
font-size: 16px;
span {
display: inline-block;
width: 50%;
font-weight: bold;
}
span {
display: inline-block;
width: 50%;
font-weight: bold;
}
span:nth-child(1) {
text-align: left;
padding-left: 5%;
}
span:nth-child(1) {
text-align: left;
padding-left: 5%;
}
span:nth-child(2) {
text-align: right;
padding-right: 6%;
}
span:nth-child(2) {
text-align: right;
padding-right: 6%;
}
}
}
}
}
}
</style>
</style>