update: 新疆大屏

2025-07-06 15:04:39 +08:00
parent 22c5b89f90
commit 86ed8341e2
30 changed files with 984 additions and 151 deletions
@@ -0,0 +1,87 @@
+<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>
+                                克拉玛依市中西医结合医院(市人民医院)
+                            </div>
+                            <div>23人</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 { ref } from 'vue';
+    import hospitalPng from '/@/assets/indexSun/hospital.png';
+    const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
+</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;
+                    .item-d-img {
+                        img {
+                            display: inline-block;
+                            width: 32px;
+                            height: 32px;
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>