first commit

2026-03-28 23:13:45 +08:00
commit 83623886d3
85 changed files with 137729 additions and 0 deletions
--- a/src/views/screen/components/rightBottom.vue
+++ b/src/views/screen/components/rightBottom.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { vue3ScrollSeamless } from "vue3-scroll-seamless";
+import Api from '@/api/index';
+import { onMounted, reactive, ref } from 'vue'
+
+
+let list = ref([]);
+
+const classOptions = {
+    limitMoveNum: 6,
+};
+
+
+onMounted(() => {
+    init()
+    setInterval(() => {
+        init()
+    }, 10000)
+})
+
+
+function init() {
+    Api('/orderStats/realTimeData').then((res) => {
+        list.value = res
+    })
+}
+
+</script>
+
+<template>
+    <div class="demo">
+        <!-- <vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list"> -->
+        <ul class="ui-wrap">
+            <li class="li-item" v-for="(item, i) in (list.length > 6 ? list.splice(6, 4) : list)" :key="i">
+                <div class="li-item-top">
+                    <div class="li-item-top-yuan"></div>
+                    {{ item.createTime }}
+                </div>
+                <div class="li-item-bottom">
+                    <!-- <div>
+                            {{ item.stationName }}
+                        </div> -->
+                    <div>
+                        {{ item.phone }}
+                    </div>
+                    <div>
+                        {{ item.amount }}元
+                    </div>
+                </div>
+            </li>
+        </ul>
+        <!-- </vue3ScrollSeamless> -->
+    </div>
+</template>
+<style lang="scss">
+.demo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.scroll-wrap {
+    height: 260px;
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+    padding: 0 15px;
+}
+
+.ui-wrap {
+    width: 100%;
+    height: 260px;
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    overflow: hidden;
+}
+
+.li-item {
+    width: 100%;
+    margin-bottom: 3px;
+    
+    .li-item-top {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        font-size: 14px;
+
+        .li-item-top-yuan {
+            margin-right: 10px;
+            width: 10px;
+            height: 10px;
+            border: 1px solid #00FFFF;
+            border-radius: 50%;
+        }
+    }
+
+    .li-item-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #84D1FF;
+        font-size: 13px;
+        padding-left: 20px;
+
+        div:nth-child(2) {
+            color: #1CFFAC;
+        }
+    }
+}
+</style>