175 lines
5.0 KiB
Vue
175 lines
5.0 KiB
Vue
<template>
|
|
<pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
|
|
<view :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
|
|
<view class="dashboard-module ss-p-x-30">
|
|
<view class="merchant-info flex align-center">
|
|
<image class="logo" :src="state.merchantInfo.logo" mode="aspectFill"></image>
|
|
|
|
<view class="detail flex flex-column justify-center gap-10">
|
|
<view class="name ss-font-26">{{ state.merchantInfo.name }}</view>
|
|
<view class="description ss-font-26">{{ state.merchantInfo.description }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="statistic ss-m-t-24">
|
|
<view class="title ss-font-24 ss-m-b-20">
|
|
{{ `今日收款金额（成功收款${state.statistic.total}笔）` }}
|
|
</view>
|
|
<view class="income flex justify-between align-center">
|
|
<view class="left flex align-center">
|
|
<view class="unit self-start">￥</view>
|
|
<view class="sincome ss-font-60">{{ state.statistic.income }}</view>
|
|
</view>
|
|
<button class="right-btn ss-reset-button">查看详情</button>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="more ss-m-t-70">
|
|
<view class="title ss-m-b-30">基础数据</view>
|
|
<view class="items">
|
|
<view class="item" v-for="item in state.more">
|
|
<view class="label">{{ item.name }}</view>
|
|
<view class="value">{{ item.value }}</view>
|
|
<view class="last">昨日 {{ item.last }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</pb-layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import peach from '@/peach'
|
|
import bg from '@/static/bg-page.png'
|
|
|
|
const bgStyle = {
|
|
backgroundImage: bg,
|
|
imageType: 'local',
|
|
backgroundColor: '#fff',
|
|
description: '',
|
|
}
|
|
|
|
const state = ref({
|
|
merchantInfo: {
|
|
name: '测试商家',
|
|
logo: '/static/logo.png',
|
|
description: '测试商家描述',
|
|
},
|
|
statistic: {
|
|
total: 100,
|
|
income: 2222222222,
|
|
},
|
|
more: [
|
|
{
|
|
name: '支付金额',
|
|
value: 10000000,
|
|
last: 100000000,
|
|
},
|
|
{
|
|
name: '访客数',
|
|
value: 100000,
|
|
last: 100000,
|
|
},
|
|
{
|
|
name: '订单数',
|
|
value: 100000,
|
|
last: 10000,
|
|
},
|
|
{
|
|
name: '客单价',
|
|
value: 10000,
|
|
last: 100,
|
|
},
|
|
{
|
|
name: '支付买家数',
|
|
value: 100,
|
|
last: 100,
|
|
},
|
|
],
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dashboard-module {
|
|
.merchant-info {
|
|
.logo {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.detail {
|
|
.name {
|
|
color: #fff;
|
|
}
|
|
.description {
|
|
color: #fff;
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.statistic {
|
|
height: 200rpx;
|
|
background-color: #fffefe;
|
|
opacity: 0.9;
|
|
border-radius: 26rpx;
|
|
padding: 31rpx 40rpx;
|
|
.title {
|
|
font-weight: 500;
|
|
color: var(--ui-TC);
|
|
}
|
|
.income {
|
|
.left {
|
|
font-weight: 600;
|
|
flex: 1;
|
|
color: var(--ui-BG-Main);
|
|
.unit {
|
|
position: relative;
|
|
top: 4px;
|
|
}
|
|
}
|
|
.right-btn {
|
|
width: 161rpx;
|
|
height: 63rpx;
|
|
background-color: var(--ui-BG-Main);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.more {
|
|
.title {
|
|
font-weight: 600;
|
|
}
|
|
.items {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30rpx 30rpx;
|
|
.item {
|
|
background: linear-gradient(90deg, #ffebeb 0%, #ffffff 100%);
|
|
border-radius: 18rpx;
|
|
padding: 19rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 170rpx;
|
|
.name {
|
|
font-weight: 600;
|
|
color: var(--ui-TC);
|
|
}
|
|
.value {
|
|
font-weight: 600;
|
|
font-size: 31rpx;
|
|
color: var(--ui-TC);
|
|
}
|
|
.last {
|
|
font-weight: 400;
|
|
color: var(--ui-TC-2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|