112 lines
2.3 KiB
Vue
112 lines
2.3 KiB
Vue
<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>
|