|
|
@@ -4,33 +4,36 @@
|
|
|
<image class="bt-box" src="/static/bt.png" mode=""></image>
|
|
|
<view class="top-box">
|
|
|
<view class="top-left">
|
|
|
- <view class="fc-f fs-7 mr-6">
|
|
|
+ <view class="fc-f fs-40 mr-32">
|
|
|
17:52:00
|
|
|
</view>
|
|
|
- <view class="fc-f fs-7 mr-6">
|
|
|
+ <view class="fc-f fs-40 mr-32">
|
|
|
2021-12-09
|
|
|
</view>
|
|
|
- <view class="fc-f fs-7">
|
|
|
+ <view class="fc-f fs-40">
|
|
|
星期四
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="top-left">
|
|
|
- <view class="fc-f fs-7">
|
|
|
+ <view class="fc-f fs-40">
|
|
|
26°C
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+
|
|
|
<view class="data-box">
|
|
|
+ <!-- 左 -->
|
|
|
<view class="left-box flex-1">
|
|
|
- <view class="top-left mb-10">
|
|
|
+ <view class="top-left mb-56">
|
|
|
<view class="amount-box flex-1">
|
|
|
<image class="amount-img" src="/static/k1.png" mode=""></image>
|
|
|
<image class="amount-img-two z-3" src="/static/zje.png" mode=""></image>
|
|
|
<view class="z-3">
|
|
|
- <view class="fc-00D5FF fw-b fs-13">
|
|
|
+ <view class="fc-00D5FF fw-b fs-48">
|
|
|
￥89000.00
|
|
|
</view>
|
|
|
- <view class="fc-f fs-5">
|
|
|
+ <view class="fc-f fs-14">
|
|
|
收款总金额
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -39,10 +42,10 @@
|
|
|
<image class="amount-img" src="/static/k1.png" mode=""></image>
|
|
|
<image class="amount-img-two z-3" src="/static/zbs.png" mode=""></image>
|
|
|
<view class="z-3">
|
|
|
- <view class="fc-00D5FF fw-b fs-13">
|
|
|
+ <view class="fc-00D5FF fw-b fs-48">
|
|
|
16
|
|
|
</view>
|
|
|
- <view class="fc-f fs-5">
|
|
|
+ <view class="fc-f fs-14">
|
|
|
收款总笔数
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -51,68 +54,71 @@
|
|
|
<image class="amount-img" src="/static/k1.png" mode=""></image>
|
|
|
<image class="amount-img-two z-3" src="/static/zrs.png" mode=""></image>
|
|
|
<view class="z-3">
|
|
|
- <view class="fc-00D5FF fw-b fs-13">
|
|
|
+ <view class="fc-00D5FF fw-b fs-48">
|
|
|
32
|
|
|
</view>
|
|
|
- <view class="fc-f fs-5">
|
|
|
+ <view class="fc-f fs-14">
|
|
|
消费总人数
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
<view class="flex-1 list-box">
|
|
|
<image class="list-img" src="/static/k3.png" mode=""></image>
|
|
|
- <view class="title-box mb-5">
|
|
|
+ <view class="title-box mb-26">
|
|
|
<image class="title-img" src="/static/xfmx.png" mode=""></image>
|
|
|
</view>
|
|
|
- <!-- 滚动列表 -->
|
|
|
- <scroll-view class="scroll-view-css z-3" scroll-x="true">
|
|
|
- <view class="item-box" v-for="(item,index) in 15">
|
|
|
- <view class="user-box">
|
|
|
- <image class="user-img" src="/static/k1.png" mode=""></image>
|
|
|
- <view class="">
|
|
|
- <view class="fs-6 fc-f">
|
|
|
- Darrell Steward
|
|
|
- </view>
|
|
|
- <view class="fs-5 fc-B2D6FF">
|
|
|
- 消费者
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <!-- 滚动列表 -->
|
|
|
+ <scroll-view class="scroll-view-css z-3" scroll-y="true" :scroll-top="scrollTop">
|
|
|
+ <view class="item-box" v-for="(item,i) in 15" :key="i">
|
|
|
+ <view class="user-box">
|
|
|
+ <image class="user-img" src="/static/k1.png" mode=""></image>
|
|
|
<view class="">
|
|
|
- <view class="fs-6 fc-f">
|
|
|
- 振合网实体店
|
|
|
+ <view class="fs-32 fc-f">
|
|
|
+ Darrell Steward
|
|
|
</view>
|
|
|
- <view class="fs-5 fc-B2D6FF">
|
|
|
- 消费门店
|
|
|
+ <view class="fs-28 fc-B2D6FF">
|
|
|
+ 消费者
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
- <view class="fs-6 fc-f">
|
|
|
- ￥779.58
|
|
|
- </view>
|
|
|
- <view class="fs-5 fc-B2D6FF">
|
|
|
- 消费金额
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <view class="fs-32 fc-f">
|
|
|
+ 振合网实体店{{i+1}}
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
- <view class="fs-6 fc-f">
|
|
|
- 2025-03-24 12:32:24
|
|
|
- </view>
|
|
|
- <view class="fs-5 fc-B2D6FF text-align-right">
|
|
|
- 消费时间
|
|
|
- </view>
|
|
|
+ <view class="fs-28 fc-B2D6FF">
|
|
|
+ 消费门店
|
|
|
</view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
+ <view class="">
|
|
|
+ <view class="fs-32 fc-f">
|
|
|
+ ￥779.58
|
|
|
+ </view>
|
|
|
+ <view class="fs-28 fc-B2D6FF">
|
|
|
+ 消费金额
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <view class="fs-32 fc-f">
|
|
|
+ 2025-03-24 12:32:24
|
|
|
+ </view>
|
|
|
+ <view class="fs-28 fc-B2D6FF text-align-right">
|
|
|
+ 消费时间
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 右 -->
|
|
|
<view class="right-box flex-1">
|
|
|
<view class="flex-1 chart-box">
|
|
|
<image class="chart-bg" src="/static/k2.png" mode=""></image>
|
|
|
<view class="title-box">
|
|
|
<image class="title-img" src="/static/xfdb.png" mode=""></image>
|
|
|
- <view class="fc-f fs-5 title-right">
|
|
|
+ <view class="fc-f fs-28 title-right">
|
|
|
单位（元）
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -190,14 +196,26 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ scrollTop:0,
|
|
|
+ timer:'',//定时器
|
|
|
listData: []
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
-
|
|
|
+ mounted() {
|
|
|
+ this.startAutoScroll();
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ startAutoScroll() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.scrollTop += 84;
|
|
|
+ // console.log(this.scrollTop);
|
|
|
+ // console.log(10 * 84);
|
|
|
+ // 到底
|
|
|
+ if (this.scrollTop >= (10 * 84)) {
|
|
|
+ this.scrollTop = 0;
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -227,15 +245,16 @@
|
|
|
top: 0;
|
|
|
z-index: 1;
|
|
|
width: 100%;
|
|
|
- height: 39rpx;
|
|
|
+ height: 200rpx;
|
|
|
}
|
|
|
|
|
|
.top-box {
|
|
|
+ height: 200rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- padding: 15rpx 15rpx 12rpx 16rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
+ padding: 0 86rpx;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
@@ -268,23 +287,40 @@
|
|
|
.fs-13 {
|
|
|
font-size: 13rpx;
|
|
|
}
|
|
|
+ .fs-48 {
|
|
|
+ font-size: 48rpx;
|
|
|
+ }
|
|
|
|
|
|
.fs-10 {
|
|
|
font-size: 10rpx;
|
|
|
}
|
|
|
-
|
|
|
+ .fs-40{
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ .fs-32{
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .fs-28{
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
.fs-7 {
|
|
|
font-size: 7rpx;
|
|
|
}
|
|
|
|
|
|
- .fs-6 {
|
|
|
- font-size: 6rpx;
|
|
|
+ .fs-16 {
|
|
|
+ font-size: 16rpx;
|
|
|
}
|
|
|
|
|
|
.fs-5 {
|
|
|
font-size: 5rpx;
|
|
|
}
|
|
|
-
|
|
|
+ .fs-14 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mr-32{
|
|
|
+ margin-right: 32rpx;
|
|
|
+ }
|
|
|
.mr-6 {
|
|
|
margin-right: 6rpx;
|
|
|
}
|
|
|
@@ -304,7 +340,12 @@
|
|
|
.mb-5 {
|
|
|
margin-bottom: 5rpx;
|
|
|
}
|
|
|
-
|
|
|
+ .mb-26 {
|
|
|
+ margin-bottom: 26rpx;
|
|
|
+ }
|
|
|
+ .mb-56{
|
|
|
+ margin-bottom: 56rpx;
|
|
|
+ }
|
|
|
.mrl-12 {
|
|
|
margin: 0 12rpx;
|
|
|
}
|
|
|
@@ -327,24 +368,26 @@
|
|
|
}
|
|
|
|
|
|
.left-box {
|
|
|
- margin-right: 12rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.data-box {
|
|
|
- padding: 0 23rpx 23.05rpx 23rpx;
|
|
|
+ padding: 0 112rpx 56rpx 112rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.amount-box {
|
|
|
- height: 39rpx;
|
|
|
+ width: 620rpx;
|
|
|
+ height: 204rpx;
|
|
|
position: relative;
|
|
|
- padding: 3rpx 9rpx;
|
|
|
+ padding: 20rpx 50rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ margin-right: 62rpx;
|
|
|
}
|
|
|
|
|
|
.amount-img {
|
|
|
@@ -357,17 +400,18 @@
|
|
|
}
|
|
|
|
|
|
.amount-img-two {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 7rpx;
|
|
|
+ width: 168rpx;
|
|
|
+ height: 168rpx;
|
|
|
+ margin-right:40rpx;
|
|
|
}
|
|
|
|
|
|
.list-box {
|
|
|
position: relative;
|
|
|
- padding: 12rpx 7rpx;
|
|
|
+ padding: 60rpx 40rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ margin-right: 62rpx;
|
|
|
}
|
|
|
|
|
|
.list-img {
|
|
|
@@ -386,7 +430,7 @@
|
|
|
|
|
|
.chart-box {
|
|
|
position: relative;
|
|
|
- padding: 7rpx;
|
|
|
+ padding: 40rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -403,23 +447,23 @@
|
|
|
|
|
|
.title-box {
|
|
|
position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 15rpx;
|
|
|
+ width: 1404rpx;
|
|
|
+ height: 78rpx;
|
|
|
}
|
|
|
|
|
|
.title-img {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
- width: 274rpx;
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
.title-right {
|
|
|
text-align: right;
|
|
|
- line-height: 15rpx;
|
|
|
position: relative;
|
|
|
+ top: 20rpx;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
@@ -502,17 +546,20 @@
|
|
|
|
|
|
.scroll-view-css {
|
|
|
width: 100%;
|
|
|
- flex: 1;
|
|
|
+ height: 1060rpx;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
+ .scroll-view-css ::-webkit-scrollbar{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
.item-box {
|
|
|
width: 100%;
|
|
|
- height: 26rpx;
|
|
|
+ height: 136rpx;
|
|
|
background: rgba(0, 161, 255, 0.05);
|
|
|
- border-radius: 9rpx;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- padding: 5rpx 9rpx;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ padding: 28rpx 48rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -525,9 +572,9 @@
|
|
|
}
|
|
|
|
|
|
.user-img {
|
|
|
- width: 15rpx;
|
|
|
- height: 15rpx;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
border-radius: 50%;
|
|
|
- margin-right: 3rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
}
|
|
|
</style>
|
