113 lines
3.8 KiB
Vue
113 lines
3.8 KiB
Vue
<template>
|
|
<div class="three-new-l">
|
|
<div class="title">
|
|
<span>体检人数统计</span>
|
|
<!-- <span class="look-view">查看详情</span>-->
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-item">
|
|
<template v-if="scrollList.length > 0">
|
|
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :copyNum="3" :limitScrollNum="5" v-bind="{ step: 0.2 }">
|
|
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
|
<div style="display: flex; align-items: center">
|
|
<div style="margin-right: 10px">
|
|
<img :src="hospitalPng" alt="" />
|
|
</div>
|
|
{{ item.hospitalName ? item.hospitalName : '-' }}
|
|
</div>
|
|
<div>{{ item.checkedCount ? item.checkedCount : '--' }}人</div>
|
|
</div>
|
|
</vue3-seamless-scroll>
|
|
</template>
|
|
<template v-else>
|
|
<div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
|
|
<Empty :description="'暂无数据'" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
|
import { Empty } from 'ant-design-vue';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import hospitalPng from '/@/assets/indexSun/hospital.png';
|
|
import { threeLApi } from '/@/views/indexSun/indexSun.api.ts';
|
|
const scrollList = ref<any[]>([]);
|
|
const props = defineProps({
|
|
bKey: {
|
|
type: Number,
|
|
default: () => 0,
|
|
},
|
|
});
|
|
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
|
|
watch(props, () => {
|
|
getList();
|
|
});
|
|
function getList() {
|
|
threeLApi({})
|
|
.then((res: any) => {
|
|
if (res.code == 200) {
|
|
console.log(res.result);
|
|
scrollList.value = res.result;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.three-new-l {
|
|
background: rgba(8, 75, 100, 0.2);
|
|
.title {
|
|
height: 40px;
|
|
border-radius: 14px 14px 0 0;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
letter-spacing: 2px;
|
|
color: #ffffff;
|
|
line-height: 40px;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
|
.look-view {
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.content {
|
|
padding: 10px 20px;
|
|
height: calc(100% - 40px);
|
|
.content-item {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
.item-d {
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
letter-spacing: 0;
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
img {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|