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,73 @@
+<template>
+    <div class="three-r-box">
+        <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="4" v-bind="{ step: 0.2 }">
+                        <div class="item-d" v-for="(item, index) in scrollList" :key="index">
+                            <div>体检总人数</div>
+                            <div style="font-weight: bold">18000人</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';
+    const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
+    import { Empty } from 'ant-design-vue';
+    import { ref } from 'vue';
+</script>
+<style lang="less" scoped>
+    .three-r-box {
+        background: rgba(8, 75, 100, 0.2);
+        display: flex;
+        flex-direction: column;
+        .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 {
+                    //background: pink;
+                    height: 40px;
+                    line-height: 40px;
+                    display: flex;
+                    font-size: 14px;
+                    color: #fff;
+                    justify-content: space-between;
+                }
+            }
+        }
+    }
+</style>