From 1c4bdd8496aa9f97d3c22aa40369b6ce9d40b1a6 Mon Sep 17 00:00:00 2001
From: unknown <staryou@126.com>
Date: Thu, 23 May 2024 23:42:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A6=96=E9=A1=B5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue  | 79 ++++++++++++++++++++++++++++++++----------
 peach/scss/_tools.scss | 11 ++++++
 2 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 74136be..1dca059 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,32 +1,73 @@
 <template>
-    <pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
-        <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>
-                <view class="merchant-info__name ss-m-b-20">{{ state.merchantInfo.name }}</view>
-                <view class="merchant-info__description">{{ state.merchantInfo.description }}</view>
-            </view>
+  <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>
-    </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>
 
 <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: '',
+  backgroundImage:
+    'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
+  backgroundColor: '#fff',
+  description: '',
 }
 
 const state = ref({
-    merchantInfo: {
-        name: '测试商家',
-        logo: 'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
-        description: '测试商家描述',
-    },
+  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>
diff --git a/peach/scss/_tools.scss b/peach/scss/_tools.scss
index 75ea3f4..a1702e5 100644
--- a/peach/scss/_tools.scss
+++ b/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布局
  ==================== */