✨ feat(store):店铺静态页面

src/pages.json

@@ -30,7 +30,8 @@
     {
       "path": "pages/tabbar/mine/index",
       "style": {
-        "navigationBarTitleText": "我的"
+        "navigationBarTitleText": "我的",
+        "navigationStyle": "custom"
       }
     }
   ],

src/pages/tabbar/mine/index.vue

@@ -1,9 +1,19 @@
+<!--
+ * @Author: yizhiyang
+ * @Date: 2023-11-30 09:40:24
+ * @Description: 
+-->
 <template>
-  <div>我的</div>
+  <view class="my"> 222222222222222</view>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="scss" scoped>
+.my {
+  background-color: $uni-bg-color-primary;
+  height: 200px;
+}
+</style>

src/pages/tabbar/store/index.vue

@@ -1,9 +1,197 @@
+<!--
+ * @Author: yizhiyang
+ * @Date: 2023-11-30 09:40:24
+ * @Description: 
+-->
 <template>
-  <div>店铺</div>
+  <view class="shop">
+    <view class="shop__data">
+      <view class="shop__data--left">
+        <view class="text-title">店铺分</view>
+        <view class="text-num">90</view>
+      </view>
+      <view class="shop__data--right">
+        <view>
+          <view class="text-title">今日收入（元）</view>
+          <view class="text-num">500</view>
+        </view>
+        <view class="line"></view>
+        <view>
+          <view class="text-title">今日订单（单）</view>
+          <view class="text-num">30</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="shop__note">
+      <u-notice-bar :text="text1"></u-notice-bar>
+    </view>
+
+    <view class="shop__tools">
+      <u-grid :border="false" col="5">
+        <u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
+          <image src="@/static/tools.jpg" />
+          <text class="grid-text">{{ listItem.title }}</text>
+        </u-grid-item>
+      </u-grid>
+    </view>
+
+    <view class="shop__note" style="background-color: #fff">
+      <u-cell-group>
+        <u-cell title="规制中心" isLink url=""></u-cell>
+      </u-cell-group>
+    </view>
+
+    <view>
+      <u-tabs
+        :list="list1"
+        lineWidth="40"
+        lineColor="$uni-bg-color-primary"
+        :activeStyle="{
+          color: '#000',
+          fontWeight: 'bold',
+          fontSize: '32rpx',
+          transform: 'scale(1.05)',
+          marginBottom: '15rpx',
+        }"
+        :inactiveStyle="{
+          color: '#333',
+          fontSize: '30rpx',
+          transform: 'scale(1)',
+          marginBottom: '15rpx',
+        }"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+      ></u-tabs>
+
+      <view style="background-color: #fff; height: 400rpx; margin-top: 20rpx">
+        1111111111
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      text1:
+        'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
+
+      list1: [
+        {
+          name: '商家社区',
+        },
+        {
+          name: '活动中心',
+        },
+        {
+          name: '商品优惠',
+        },
+      ],
+
+      list: [
+        {
+          title: '店铺管理',
+        },
+        {
+          title: '顾客评价',
+        },
+        {
+          title: '商品核销',
+        },
+        {
+          title: '商品优惠',
+        },
+        {
+          title: '经营数据',
+        },
+        {
+          title: '我的团队',
+        },
+        {
+          title: '活动中心',
+        },
+        {
+          title: '当前佣金',
+        },
+        {
+          title: '商家社区',
+        },
+        {
+          title: '全部',
+        },
+      ],
+    };
+  },
+};
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="scss" scoped>
+.text-title {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.text-num {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: $uni-bg-color-primary;
+}
+
+.shop {
+  height: 100vh;
+  background-color: $uni-bg-color-page;
+  padding: $uni-bg-padding-sm;
+  &__data {
+    display: flex;
+    text-align: center;
+
+    &--left {
+      flex: 1;
+      padding: 30rpx 20rpx;
+      background-color: $uni-bg-color;
+      margin-right: 20rpx;
+      border-radius: $uni-border-radius-base;
+    }
+
+    &--right {
+      flex: 3;
+      display: flex;
+      justify-content: space-around;
+      padding: 30rpx 20rpx;
+      background-color: $uni-bg-color;
+      border-radius: $uni-border-radius-base;
+      .line {
+        width: 2rpx;
+        height: 65%;
+        margin-top: 35rpx;
+        background-color: #f5f5f5;
+      }
+    }
+  }
+
+  &__note {
+    margin: 30rpx 0;
+  }
+
+  /* 工具 */
+  &__tools {
+    padding: 20rpx 10rpx;
+    background-color: $uni-bg-color;
+    border-radius: $uni-border-radius-base;
+    image {
+      width: 100rpx;
+      height: 100rpx;
+      display: block;
+      margin: 15rpx 0 25rpx 0;
+    }
+  }
+}
+
+::v-deep .u-cell__title-text {
+  border: 0;
+  font-weight: bold;
+  font-size: 36rpx;
+}
+</style>

src/uni.scss

@@ -15,7 +15,7 @@
 /* 颜色变量 */
 
 /* 行为相关颜色 */
-$uni-color-primary: #007aff;
+$uni-color-primary: #5992bb;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
@@ -29,15 +29,26 @@ $uni-text-color-disable: #c0c0c0;
 
 /* 背景颜色 */
 $uni-bg-color: #fff;
+$uni-bg-color-page: #f5f5f5;
+$uni-bg-color-primary: #5992bb;
 $uni-bg-color-grey: #f8f8f8;
 $uni-bg-color-hover: #f1f1f1; // 点击状态颜色
 $uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
 
+/* 内间距 */
+$uni-bg-padding-sm: 20rpx;
+$uni-bg-padding-base: 30rpx;
+$uni-bg-padding-lg: 40rpx;
+
+/* Border Radius */
+$uni-border-radius-sm: 10rpx;
+$uni-border-radius-base: 20rpx;
+$uni-border-radius-lg: 30rpx;
+$uni-border-radius-circle: 50%;
+
 /* 边框颜色 */
 $uni-border-color: #c8c7cc;
 
-/* 尺寸变量 */
-
 /* 文字尺寸 */
 $uni-font-size-sm: 12px;
 $uni-font-size-base: 14px;
@@ -48,12 +59,6 @@ $uni-img-size-sm: 20px;
 $uni-img-size-base: 26px;
 $uni-img-size-lg: 40px;
 
-/* Border Radius */
-$uni-border-radius-sm: 2px;
-$uni-border-radius-base: 3px;
-$uni-border-radius-lg: 6px;
-$uni-border-radius-circle: 50%;
-
 /* 水平间距 */
 $uni-spacing-row-sm: 5px;
 $uni-spacing-row-base: 10px;