feat: 更新样式和配置

- 在App.vue中添加全局字体和自定义字体样式。
- 修改uni.scss中的主颜色和背景色以提升视觉效果。
- 更新用户页面(my.vue)的布局和样式，优化用户信息展示和钱包信息显示。
- 在.gitignore中添加designHtml以排除不必要的文件。

.gitignore

@@ -11,4 +11,5 @@ node_modules/
 .hbuilderx/launch.json
 .project.config.json
 .project.private.config.json
+designHtml
 

App.vue

@@ -225,7 +225,13 @@ import {
 
 <style lang="scss">
 	@import "uview-ui/index.scss";
-
+	*{
+		font-family: PingFangSC-Medium;
+	}
+	@font-face{
+		font-family: DINCond-Bold;
+		src: url('/fonts/DIN-Condensed-Bold-2.ttf')
+	}
 	// -------适配底部安全区  苹果x系列刘海屏
 
 	// #ifdef MP-WEIXIN
@@ -251,4 +257,5 @@ import {
 	.flex1 {
 		flex: 1; //必须父级设置flex
 	}
+	
 </style>

pages/mine/deposit/index.vue

@@ -124,7 +124,7 @@ export default {
 
 <style lang="scss" scoped>
 .green {
-    color: $aider-color-green !important;
+    color: #28d094 !important;
   }
   .view-item {
     padding: 32rpx;

pages/tabbar/user/my.vue

@@ -1,77 +1,39 @@
 <template>
-  <view class="user">
+  <view class="user" :style="{ 'padding-top': statusBarHeight }">
-    <!-- 个人信息 -->
+    <!--  -->
-    <view class="status_bar">
+    <u-navbar title-color="#333" :border-bottom="false" immersive :is-back="false" title="个人中心"
-      <!-- 这里是状态栏 -->
+      :background="background"></u-navbar>
-    </view>
+    <div class="wrapper background" :style="{ 'padding-top': '61px' }">
-    <view class="header"  @click="userDetail">
+      <div class="flex flex-a-c flex-j-sb">
-      <view class="head-1">
+        <!-- 会员信息 -->
-        <image :src="userInfo.face || userImage"></image>
+        <div class="flex flex-a-c">
-      </view>
+          <div>
-      <view class="head-2" v-if="userInfo.id">
+            <u-image :src="userInfo.face || '/static/missing-face.png'" shape="circle" width="108"
-        <view class="user-name">{{ userInfo.nickName }}</view>
+              height="108"></u-image>
-      </view>
-      <view class="head-2" v-else>
-        <view class="user-name">登录/注册</view>
-      </view>
-      <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
-    </view>
-    <!-- 积分，优惠券，关注， -->
-    <div class="pointBox box">
-      <u-row text-align="center" gutter="16" class="point">
-        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
-          <view>预存款</view>
-          <view class="money">{{ walletNum | unitPrice }}</view>
-        </u-col>
-
-        <u-col text-align="center" span="4" @click="navigateTo('/pages/cart/coupon/myCoupon')">
-          <view>优惠券</view>
-          <view>{{ couponNum || 0 }}</view>
-        </u-col>
-
-        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/myTracks')">
-          <view>足迹</view>
-          <view>{{ footNum || 0 }}</view>
-        </u-col>
-      </u-row>
-      <!-- 我的订单，代付款 -->
-      <view class="order">
-        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
-          <div class="bag bag2">
-            <u-icon name="bag-fill" size="35" color="#fff"></u-icon>
           </div>
-          <view>待付款</view>
+          <div class="user-info">
-        </view>
+            <div>
-        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
+              {{ userInfo && userInfo.id ? userInfo.nickName : '登录/注册' }}
-          <div class="bag bag3">
+            </div>
-            <u-icon name="car-fill" size="35" color="#fff"></u-icon>
+            <div class="info-tag">
+              个人主页
+            </div>
           </div>
-          <view>待收货</view>
+        </div>
-        </view>
+        <!-- 右侧会员权益 -->
-        <view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
+        <div>
-          <div class="bag bag4">
+          <u-image :src="'/static/feature/vip.png'" width="240" height="68" />
-            <u-icon name="star-fill" size="35" color="#fff"></u-icon>
+        </div>
-          </div>
+      </div>
-          <view>待评价</view>
+      <!-- 钱包栏 -->
-        </view>
+      <div class="wallet-info">
-        <view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
+        <div>
-          <div class="bag bag5">
+          <div class="wallet-info_label">198</div>
-            <u-icon name="server-fill" size="35" color="#fff"></u-icon>
+        </div>
-          </div>
+      </div>
-          <view>售后</view>
-        </view>
-        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
-          <div class="bag bag1">
-            <u-icon name="order" size="35" color="#fff"></u-icon>
-          </div>
-          <view>我的订单</view>
-        </view>
-      </view>
     </div>
-    <!-- 常用工具 -->
 
     <tool />
-
   </view>
 </template>
 <script>
@@ -79,6 +41,7 @@ import tool from "@/pages/tabbar/user/utils/tool.vue";
 import { getCouponsNum, getFootprintNum } from "@/api/members.js";
 import { getUserWallet } from "@/api/members";
 import configs from '@/config/config'
+let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
 export default {
   components: {
     tool,
@@ -86,14 +49,15 @@ export default {
   data() {
     return {
       configs,
-      userImage:configs.defaultUserPhoto,
+      userImage: configs.defaultUserPhoto,
-      coverTransform: "translateY(0px)",
-      coverTransition: "0s",
-      moving: false,
       userInfo: {},
       couponNum: "",
       footNum: "",
       walletNum: "",
+      background: {
+        backgroundColor: "transparent",
+      },
+
     };
   },
   onLoad() { },
@@ -153,164 +117,52 @@ export default {
 };
 </script>
 
+
 <style lang="scss" scoped>
-html,
+.background {
-body {
+  background-image: url('/static/feature/bg.png');
-  overflow: auto;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 100%;
 }
 
-.money {
+.info-tag {
-  overflow: hidden;
+  background-image: linear-gradient(135deg, #FAFAFA 0%, #F8E2F1 49%, #ECEFF6 100%);
-
+  border-radius: 8rpx;
-  text-overflow: ellipsis;
+  font-family: PingFangSC-Medium;
-  white-space: nowrap;
+  font-size: 24rpx;
+  color: #333333;
+  letter-spacing: 0;
+  font-weight: 500;
 }
 
-.user {
+.wrapper {
-  .header {
+  height: 396rpx;
-    max-width: 100%;
+}
-    padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
-    height: calc(var(--status-bar-height) + 360rpx);
-    background-size: cover;
-    border-bottom-left-radius: 30rpx;
-    border-bottom-right-radius: 30rpx;
-    background-image: url("/static/img/main-bg.png");
-    background-position: bottom;
-    background-repeat: no-repeat;
-    color: #ffffff;
-    display: flex;
-    justify-content: space-between;
 
-    .head-1 {
+.wrapper,
-      text-align: center;
+.wallet-info {
-      width: 152rpx;
+  padding: 0 44rpx;
-      position: relative;
+  width: calc(100% - 88rpx);
-      display: flex;
+}
-      align-items: center;
 
-      image {
+.user-info {
-        width: 152rpx;
+  padding-left: 20rpx;
-        height: 144rpx;
+}
-        border-radius: 50%;
-        margin-bottom: 30rpx;
-        border: 3px solid #fff;
-      }
 
-      .edti-head {
+.wallet-info {
-        position: absolute;
+  height: 168rpx;
-        width: 40rpx;
+  background: #fff;
-        height: 40rpx;
+  border-radius: 16rpx;
-        border-radius: 50%;
+  margin-top: 36rpx;
-        background-color: rgba(255, 255, 255, 0.3);
-        top: 100rpx;
-        right: 0;
 
-        image {
+  &_label {
-          width: 100%;
+    font-family: DINCond-Bold;
-          height: 100%;
+    font-size: 40rpx;
-        }
+    color: #333333;
-      }
+    letter-spacing: 0;
-    }
+    font-weight: 700;
-
-    .head-2 {
-      flex: 1;
-      margin-left: 30rpx;
-      margin-top: 100rpx;
-      line-height: 1;
-    }
-
-    ::v-deep .u-icon,
-    .u-icon {
-      margin-top: 106rpx;
-    }
   }
-
-  .pointBox {
-    width: 94%;
-    margin: 0 3%;
-    background: #fff;
-    border-radius: 20rpx;
-    box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
-  }
-
-  .point {
-    text-align: center;
-    height: 160rpx;
-
-    font-size: $font-sm;
-    // #ifdef MP-WEIXIN
-    padding: 24rpx;
-
-    // #endif
-    .u-col {
-      view {
-        color: $u-main-color;
-        font-size: 28rpx;
-      }
-
-      view:last-child {
-        margin-top: 8rpx;
-        color: $main-color;
-        font-size: $font-lg;
-      }
-    }
-  }
-
-  .order {
-    height: 140rpx;
-    text-align: center;
-    font-size: $font-sm;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    padding: 0 3%;
-    color: #999;
-
-    .order-item {
-      position: relative;
-      line-height: 2em;
-      width: 96rpx;
-
-      :first-child {
-        font-size: 48rpx;
-        margin-bottom: 10rpx;
-      }
-    }
-  }
-}
-
-.box {
-  transform: translateY(-30rpx);
-}
-
-.user-name {
-  font-size: 34rpx;
-}
-
-.bag {
-  width: 56rpx;
-  height: 56rpx;
-  border-radius: 50%;
-  margin: 0 auto;
-}
-
-.bag1 {
-  background: #ff4a48;
-}
-
-.bag2 {
-  background: #ff992f;
-}
-
-.bag3 {
-  background: #009ee0;
-}
-
-.bag4 {
-  background: #00d5d5;
-}
-
-.bag5 {
-  background: #28ccb0;
 }
 </style>

uni.scss

@@ -29,7 +29,7 @@ $uni-color-error: #dd524d;
 /**微信登录按钮颜色 */
 $weChat-color:#00a327;
 /**主颜色*/
-$main-color: #ff3c2a;
+$main-color: #E22418;
 /*用于金钱等颜色 */
 $price-color: #ff3c2a;
 /*主题高亮颜色*/
@@ -37,26 +37,13 @@ $light-color: #ff6b35;
 /*辅助高亮颜色*/
 $aider-light-color: #ff9f28;
 
-/*主题高亮背景颜色*/
-$main-light-color: #edfcf7;
 /*价格红高亮背景颜色*/
 $price-light-color: #fcedeb;
 
-/*辅助色*/
-$aider-color-red: #ff6262;
-$aider-color-yellow: #ffc71c;
-$aider-color-green: #28d094;
-$aider-color-blue: #1e9ff2;
-// 中性色
-$neutral-color: #333333;
 //背景色
-$bg-color: #f9f9f9;
+$bg-color: #f5f6f8;
+
 
-// 字体
-$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-weight-b: 500;
-$font-weight: 400;
 .light-color {
 	color: $light-color;
 }
@@ -130,17 +117,10 @@ $font-weight: 400;
 	border-top: 1px solid $border-color-light;
 	border-bottom: 1px solid $border-color-light;
 }
-.mt-30 {
+
-	margin-top: 30rpx;
-}
 .border-top {
 	border-top: 1px solid $border-color-light;
 }
-.describe {
-	color: $font-color-light;
-	font-size: $font-sm;
-	padding: 30rpx;
-}
 .flex-center {
 	display: flex;
 	align-items: center;