mall-app-t/pages/index/index.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">
        <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>

<script setup>
import { ref } from 'vue'
import peach from '@/peach'

console.log()

const bgStyle = {
  backgroundImage:
    'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
  backgroundColor: '#fff',
  description: '',
}

const state = ref({
  merchantInfo: {
    name: '测试商家',
    logo: '/static/logo.png',
    description: '测试商家描述',
  },
  statistic: {
    total: 100
  }
})
</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>