feat(首页)

pages/index/index.vue

@@ -1,12 +1,28 @@
 <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">
-                <view class="merchant-info__logo ss-m-b-20">
-                    <image :src="state.merchantInfo.logo" mode="aspectFill"></image>
+      <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 class="merchant-info__name ss-m-b-20">{{ state.merchantInfo.name }}</view>
-                <view class="merchant-info__description">{{ state.merchantInfo.description }}</view>
       </view>
     </view>
   </pb-layout>
@@ -14,6 +30,9 @@
 
 <script setup>
 import { ref } from 'vue'
+import peach from '@/peach'
+
+console.log()
 
 const bgStyle = {
   backgroundImage:
@@ -25,8 +44,30 @@ const bgStyle = {
 const state = ref({
   merchantInfo: {
     name: '测试商家',
-        logo: 'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
+    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>

peach/scss/_tools.scss

@@ -7,6 +7,17 @@
   color: #fff;
 }
 
+/* ==================
+
+    flex gap
+	
+ ==================== */
+@for $i from 0 through 100 {
+  .ss-gap-#{$i} {
+    gap: $i + rpx;
+  }
+}
+
 /* ==================
           flex布局
  ==================== */