feat(首页)
This commit is contained in:
parent
eec95f90c1
commit
1c4bdd8496
|
@ -1,32 +1,73 @@
|
||||||
<template>
|
<template>
|
||||||
<pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
|
<pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
|
||||||
<view class="dashboard-module ss-p-x-30">
|
<view :style="[{ paddingTop: peach.$platform.navbar + 'px' }]"></view>
|
||||||
<view class="merchant-info">
|
<view class="dashboard-module ss-p-x-30">
|
||||||
<view class="merchant-info__logo ss-m-b-20">
|
<view class="merchant-info flex align-center">
|
||||||
<image :src="state.merchantInfo.logo" mode="aspectFill"></image>
|
|
||||||
</view>
|
<image class="logo" :src="state.merchantInfo.logo" mode="aspectFill"></image>
|
||||||
<view class="merchant-info__name ss-m-b-20">{{ state.merchantInfo.name }}</view>
|
|
||||||
<view class="merchant-info__description">{{ state.merchantInfo.description }}</view>
|
<view class="detail flex flex-column justify-center gap-10">
|
||||||
</view>
|
<view class="name ss-font-26">{{ state.merchantInfo.name }}</view>
|
||||||
|
<view class=" description ss-font-26">{{ state.merchantInfo.description }}</view>
|
||||||
</view>
|
</view>
|
||||||
</pb-layout>
|
</view>
|
||||||
|
|
||||||
|
<view class="statistic">
|
||||||
|
<view class="title ss=font-24">
|
||||||
|
{{ `今日收款金额(成功收款${state.statistic.total})笔` }}
|
||||||
|
</view>
|
||||||
|
<view class="income">
|
||||||
|
<view class="left">
|
||||||
|
<view class="unit">¥</view>
|
||||||
|
<view class="sincome">{{ state.statistic.income }}</view>
|
||||||
|
</view>
|
||||||
|
<button class="right">查看详情</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</pb-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
import peach from '@/peach'
|
||||||
|
|
||||||
|
console.log()
|
||||||
|
|
||||||
const bgStyle = {
|
const bgStyle = {
|
||||||
backgroundImage:
|
backgroundImage:
|
||||||
'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
|
'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
|
||||||
backgroundColor: '#fff',
|
backgroundColor: '#fff',
|
||||||
description: '',
|
description: '',
|
||||||
}
|
}
|
||||||
|
|
||||||
const state = ref({
|
const state = ref({
|
||||||
merchantInfo: {
|
merchantInfo: {
|
||||||
name: '测试商家',
|
name: '测试商家',
|
||||||
logo: 'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
|
logo: '/static/logo.png',
|
||||||
description: '测试商家描述',
|
description: '测试商家描述',
|
||||||
},
|
},
|
||||||
|
statistic: {
|
||||||
|
total: 100
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dashboard-module {
|
||||||
|
.merchant-info {
|
||||||
|
.logo {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistic {
|
||||||
|
height: 284rpx;
|
||||||
|
background-color: #fffefe;
|
||||||
|
border-radius: 26rpx;
|
||||||
|
padding: 31rpx 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -7,6 +7,17 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==================
|
||||||
|
|
||||||
|
flex gap
|
||||||
|
|
||||||
|
==================== */
|
||||||
|
@for $i from 0 through 100 {
|
||||||
|
.ss-gap-#{$i} {
|
||||||
|
gap: $i + rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ==================
|
/* ==================
|
||||||
flex布局
|
flex布局
|
||||||
==================== */
|
==================== */
|
||||||
|
|
Loading…
Reference in New Issue