update: 初始化：新疆大屏基础搭建

2025-07-02 13:48:50 +08:00
parent 1cbda373e0
commit ff493d83d9
24 changed files with 1482 additions and 14 deletions
@@ -0,0 +1,97 @@
+<template>
+    <div class="three-l-box">
+        <div class="title">
+            <span>{{ props.title }}</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" :limitScrollNum="5" v-bind="{ step: 0.2 }">
+                        <div class="item-d" v-for="(item, index) in scrollList" :key="index">
+                            <div>张二雷{{ index }}</div>
+                            <div>40岁</div>
+                            <div :style="{ color: props.type == 1 ? '#f24439' : '#f6ff00' }">体重(超重)</div>
+                            <div>2025-10-26 22:29:58</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, onMounted } from 'vue';
+    import pointPng from '/@/assets/indexSun/point.png';
+    import addressPng from '/@/assets/indexSun/address.png';
+    const loading = ref(true);
+    const props = defineProps({
+        title: {
+            type: String,
+            default: '',
+        },
+        type: {
+            type: Number,
+            default: 1,
+        },
+    });
+    const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
+</script>
+<style lang="less" scoped>
+    .three-l-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 {
+                    border-bottom: 1px solid #0076b4;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    color: #ffffff;
+                    justify-content: space-between;
+                    font-size: 14px;
+                    cursor: pointer;
+                    .item-d-img {
+                        img {
+                            display: inline-block;
+                            width: 24px;
+                            height: 24px;
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>