diff --git a/components/money-view/money-view.vue b/components/money-view/money-view.vue
new file mode 100644
index 0000000..bdf9bae
--- /dev/null
+++ b/components/money-view/money-view.vue
@@ -0,0 +1,99 @@
+<template>
+  <view v-if="hidden"
+        class="money-format-view money-hidden"
+        :style="{fontSize: size + 'rpx', color: color}"
+  >
+    <span class="character-span" v-if="character">{{ character }}</span> {{ hiddenValue }}
+  </view>
+  <view v-else
+        class="money-format-view money-show"
+        :style="{fontSize: size + 'rpx', color: color}"
+  >
+    <span class="character-span" v-if="character">{{ character }}</span> {{ moneyValue }}
+  </view>
+</template>
+<script>
+export default {
+  name: "MoneyView",
+  props: {
+    character: {
+      type: String,
+      default: undefined
+    },
+    color:{
+      type: String,
+      default: '#FFF'
+    },
+    size: {
+      type: Number,
+      default: 24
+    },
+    value: {
+      type: Number,
+      default: 0.00
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      moneyValue: '0.00',
+      hiddenValue: '******',
+    }
+  },
+  methods: {
+    thousandFormat(num) {
+      const len = num.length
+      return len <= 3 ? num : this.thousandFormat(num.substr(0, len - 3)) + split + num.substr(len - 3, 3)
+    },
+    moneyFormat(num, decimal = 2, split = ',') {
+      /*
+        parameter：
+        num：格式化目标数字
+        decimal：保留几位小数，默认2位
+        split：千分位分隔符，默认为,
+        moneyFormat(123456789.87654321, 2, ',') // 123,456,789.88
+      */
+      if (isFinite(num)) { // num是数字
+        if (num === 0) { // 为0
+          return "0.00"
+        } else { // 非0
+          let res = 0;
+          const dotIndex = String(num).indexOf('.');
+          if (dotIndex === -1) { // 整数
+            res = this.thousandFormat(String(num)) + '.' + '0'.repeat(decimal)
+          } else { // 非整数
+            // js四舍五入 Math.round()：正数时4舍5入，负数时5舍6入
+            // Math.round(1.5) = 2
+            // Math.round(-1.5) = -1
+            // Math.round(-1.6) = -2
+            // 保留decimals位小数
+            const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入，然后固定保留2位小数
+            const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小数位
+            res = this.thousandFormat(numStr.slice(0, dotIndex)) + decimals
+          }
+          return res
+        }
+      } else {
+        return '0.00'
+      }
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.moneyValue = this.moneyFormat(newValue, 2, ',')
+    },
+
+  }
+}
+</script>
+<style scoped lang="scss">
+  .money-format-view {
+    min-width: 80rpx;
+  }
+  .money-hidden {
+
+  }
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 99e9545..2829c6c 100644
--- a/pages.json
+++ b/pages.json
@@ -13,7 +13,8 @@
 			"path": "pages/profit/profit",
 			"style": {
 				"navigationBarTitleText": "收益",
-				"enablePullDownRefresh": true
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -222,7 +223,7 @@
 	//底部跳转tab
 	"tabBar": {
 		"color": "#FFFFFF",
-		"selectedColor": "#30a9c0",
+		"selectedColor": "#0b6375",
 		"borderStyle": "black",
 		"backgroundColor": "#141b29",
 		"fontSize": "12px",
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 947ce6b..d783972 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -62,7 +62,7 @@
           backgroundColor: 'rgba(255, 255, 255, .5)',
           border: '1px rgba(0, 0, 0, .3) solid',
           color: '#fff',
-          selectedBackgroundColor: 'rgba(255, 255, 255, .9)',
+          selectedBackgroundColor: 'rgba(11, 99, 117, .9)',
           selectedBorder: '1px rgba(0, 0, 0, .9) solid',
           bottom: 50
         },
@@ -291,7 +291,7 @@
         height: calc(20vh - 30rpx);
         margin: 0 auto;
         background: #1d2734;
-        border-radius: 40rpx;
+        border-radius: 20rpx;
 
         display: flex;
         flex-wrap: wrap;
@@ -331,7 +331,7 @@
         height: 100%;
         margin: 0 auto;
         background: #1d2734;
-        border-radius: 40rpx;
+        border-radius: 20rpx;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
diff --git a/pages/login/login.vue b/pages/login/login.vue
index d77444e..d80187c 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -186,7 +186,7 @@
 	.logo-div {
 		width: 86rpx;
 		height: 86rpx;
-		background: linear-gradient(180.00deg, #30a9c0 0%, #30a9c0 100%);
+		background: linear-gradient(180.00deg, #0b6375 0%, #0b6375 100%);
 		border-radius: 24rpx;
 		margin-top: 154rpx;
     text-align: center;
diff --git a/pages/profit/profit.vue b/pages/profit/profit.vue
index 1ac6e06..52d277e 100644
--- a/pages/profit/profit.vue
+++ b/pages/profit/profit.vue
@@ -1,151 +1,146 @@
 <template>
   <view class="container">
     <view class="top">
-      <uni-notice-bar
+<!--      <image class="left-background-img" :src="incomeBackground" />-->
+      <image class="top-background-img" :src="incomeBackground" />
+      <view class="accumulate-income">
+        <view>
+          <div class="accumulate-income-title">累计收益</div>
+          <div class="income-num">
+            <MoneyView :character="'￥'" :value="profitInfo.totalProfit" :size="60" :hidden="hidden"/>
+            <div class="income-hidden-but" @click="clickHidden">
+              <uni-icons v-if="hidden" type="eye" :size="24" :color="'#909399'" />
+              <uni-icons v-else type="eye-slash" :size="24" :color="'#909399'" />
+            </div>
+          </div>
+          <div class="income-history">
+            <view>上月收入：</view><MoneyView :value="profitInfo.lastMonthProfit" :hidden="hidden"/>
+            <view :style="{width: '2rpx', marginLeft: '10rpx', marginRight: '10rpx'}"></view>
+            <view>当月收入：</view><MoneyView :value="profitInfo.thisMonthProfit" :hidden="hidden"/>
+          </div>
+        </view>
+      </view>
+    </view>
+    <uni-notice-bar
         show-get-more
         show-icon
+        background-color="#1d2734"
+        color="#909399"
+        moreColor="#909399"
+        :scrollable="true"
         more-text="查看更多"
         :text="noticeList[0].content"
         @getmore="getMore"
-      />
-      <view class="back">
-        <view class="back-top"></view>
-        <view class="uni-radius back-con uni-shadow-sm">
-          <view class="">
-            <view class="back-con-top"> 昨日收益 </view>
-            <view class="back-con-mid">
-              <view class="back-con-mid-left">
-                广告收益
-                <view class="top-text">
-                  ¥ {{ profitInfo.yesterdayAdProfit }}
-                </view>
-              </view>
-              <view class="border"></view>
-              <view class="back-con-mid-right">
-                邀请收益
-                <view class="top-text">
-                  ¥ {{ profitInfo.yesterdayInviteProfit }}
-                </view>
-              </view>
+    />
+    <view class="meddle">
+      <view class="income-categories">
+        <view class="yesterday-income-title">
+          昨日收益
+        </view>
+        <view class="yesterday-income">
+          <view class="income-category-item">
+            <view class="left-icon">
+              <image class="" :src="advertIcon" />
             </view>
-          </view>
-          <view class="back-con-bot uni-radius uni-shadow-sm">
-            <view class="back-con-bot-left">
-              累计
-              <view class="top-text size14">
-                ¥ {{ profitInfo.totalProfit }}
+            <view class="right-income-info">
+              <view>广告收益</view>
+              <view class="yesterday-income-num">
+                <MoneyView :character="'￥'" :value="profitInfo.yesterdayAdProfit" :size="32" :hidden="hidden"/>
               </view>
             </view>
-            <view class="border"></view>
-            <view class="back-con-bot-mid">
-              上月
-              <view class="top-text size14">
-                ¥ {{ profitInfo.lastMonthProfit }}
-              </view>
+          </view>
+          <view class="income-category-item">
+            <view class="left-icon">
+              <image class="" :src="inviteIcon" />
             </view>
-            <view class="border"></view>
-            <view class="back-con-bot-right">
-              当月
-              <view class="top-text size14">
-                ¥ {{ profitInfo.thisMonthProfit }}
+            <view class="right-income-info">
+              <view>邀请收益</view>
+              <view class="yesterday-income-num">
+                <MoneyView :character="'￥'" :value="profitInfo.yesterdayInviteProfit" :size="32" :hidden="hidden"/>
               </view>
             </view>
           </view>
         </view>
       </view>
-      <view class="back2">
-        <view class="uni-radius back-con2 uni-shadow-sm">
-          <view class="" style="width: 100%">
-            <view class="back-con-top"> 收益明细 </view>
-            <view class="segmented">
-              <view v-for="(item, index) in items" :key="index">
-                <view
-                  @click="segActive(index)"
-                  v-if="item != ''"
-                  :class="[
-                    'segmented-con',
-                    index == active ? 'activecolor' : '',
-                  ]"
-                >
-                  {{ item }}
-                  <image
-                    :class="['img1', index == active ? 'show' : '']"
-                    src="/static/active.png"
-                  ></image>
-                </view>
-                <image v-else class="img" src="/static/right.png"></image>
-              </view>
-            </view>
-            <!-- 即将入账 -->
-            <view v-show="active == 0">
-              <view class="adver">
-                <view class="adver-top">
-                  <view class="circular"></view>
-                  <view class="adver-top-text"> 广告: </view>
-                </view>
-                <view class="adver-mid">
-                  抖音/快手/微信均为次日结算前日ECPM价格
-                </view>
-              </view>
-              <uni-list>
-                <uni-list-item title="曝光" link @click="linkTo(0,0)">
-                  <template v-slot:footer>
-                    <view class="blue"> {{downloadAndInviteCountInfo.creatorProfitDownloadCount[0].downloadNum || 0}}次 </view>
-                  </template>
-                </uni-list-item>
-                <uni-list-item title="邀请" link @click="linkTo(1,0)">
-                  <template v-slot:footer>
-                    <view class="blue"> [{{downloadAndInviteCountInfo.creatorProfitInviteCount[0].createTime || ''}}] {{downloadAndInviteCountInfo.creatorProfitInviteCount[0].inviteDownloadNum || 0}}次 </view>
-                  </template>
-                </uni-list-item>
-              </uni-list>
-            </view>
-            <!-- 已入账 -->
-            <view v-show="active == 2">
-              <view class="adver">
-                <view class="adver-top">
-                  <view class="circular"></view>
-                  <view class="adver-top-text"> 广告: </view>
-                </view>
-                <!-- <view class="adver-mid"> 2022.06.05 至 2022.07.20 </view> -->
-              </view>
-              <uni-list>
-                <uni-list-item title="曝光" link @click="linkTo(0,1)">
-                  <template v-slot:footer>
-                    <view class="blue"> ¥{{inProfitInfo.profit || 0}} </view>
-                  </template>
-                </uni-list-item>
-                <uni-list-item title="邀请" link @click="linkTo(1,1)">
-                  <template v-slot:footer>
-                    <view class="blue"> ¥{{inProfitInfo.inviteProfit || 0}} </view>
-                  </template>
-                </uni-list-item>
-              </uni-list>
-            </view>
-            <!-- 已转入钱包 -->
-            <view v-show="active == 4">
-              <view class="adver">
-                <view class="adver-top">
-                  <view class="circular"></view>
-                  <view class="adver-top-text"> 广告: </view>
-                </view>
-              </view>
-              <uni-list>
-                <uni-list-item title="曝光" link @click="linkTo(0,2)">
-                  <template v-slot:footer>
-                    <view class="blue"> ¥{{endProfitInfo.profit || 0}} </view>
-                  </template>
-                </uni-list-item>
-                <uni-list-item title="邀请" link @click="linkTo(1,2)">
-                  <template v-slot:footer>
-                    <view class="blue"> ¥{{endProfitInfo.inviteProfit || 0}} </view>
-                  </template>
-                </uni-list-item>
-              </uni-list>
-            </view>
+    </view>
+    <view class="foot">
+      <view class="income-detail-selector">
+        <view class="details-select-item" v-for="(item, index) in items" :key="index">
+          <view
+              @click="segActive(index)"
+              v-if="item !== ''"
+              :class="[
+                  'segmented-con',
+                  index === active ? 'active-color' : '',
+                ]"
+          >
+            {{ item }}
+          </view>
+        </view>
+      </view>
+
+      <!-- 即将入账 -->
+      <view v-show="active == 0">
+        <view class="adver">
+          <view class="adver-top">
+            <view class="circular"></view>
+            <view class="adver-top-text"> 广告: </view>
+          </view>
+          <view class="adver-mid">
+            抖音/快手/微信均为次日结算前日ECPM价格
+          </view>
+        </view>
+        <view class="detail-categories-item" @click="linkTo(0,0)">
+          <div class="title">曝光</div>
+          <div class="text uni-white">{{downloadAndInviteCountInfo.creatorProfitDownloadCount[0].downloadNum || 0}}次 </div>
+          <uni-icons type="right" size="12" color="#ffffff" />
+        </view>
+        <view class="detail-categories-item" @click="linkTo(1,0)">
+          <div class="title">邀请</div>
+          <div class="text uni-white">[{{downloadAndInviteCountInfo.creatorProfitInviteCount[0].createTime || ''}}] {{downloadAndInviteCountInfo.creatorProfitInviteCount[0].inviteDownloadNum || 0}}次 </div>
+          <uni-icons type="right" size="12" color="#ffffff" />
+        </view>
+      </view>
+      <!-- 已入账 -->
+      <view v-show="active == 1">
+        <view class="adver">
+          <view class="adver-top">
+            <view class="circular"></view>
+            <view class="adver-top-text"> 广告: </view>
           </view>
+          <!-- <view class="adver-mid"> 2022.06.05 至 2022.07.20 </view> -->
+        </view>
+        <view class="detail-categories-item" @click="linkTo(0,1)">
+          <div class="title">曝光</div>
+          <div class="text uni-white"><MoneyView :character="'￥'" :value="inProfitInfo.profit || 0" :hidden="hidden"/></div>
+          <uni-icons type="right" size="12" color="#ffffff" />
+        </view>
+        <view class="detail-categories-item" @click="linkTo(1,1)">
+          <div class="title">邀请</div>
+          <div class="text uni-white"><MoneyView :character="'￥'" :value="inProfitInfo.inviteProfit || 0" :hidden="hidden"/></div>
+          <uni-icons type="right" size="12" color="#ffffff" />
         </view>
       </view>
+      <!-- 已转入钱包 -->
+      <view v-show="active == 2">
+        <view class="adver">
+          <view class="adver-top">
+            <view class="circular"></view>
+            <view class="adver-top-text"> 广告: </view>
+          </view>
+        </view>
+        <view class="detail-categories-item" @click="linkTo(0,2)">
+          <div class="title">曝光</div>
+          <div class="text uni-white"><MoneyView :character="'￥'" :value="endProfitInfo.profit || 0" :hidden="hidden"/></div>
+          <uni-icons type="right" size="12" color="#ffffff" />
+        </view>
+        <view class="detail-categories-item" @click="linkTo(1,2)">
+          <div class="title">邀请</div>
+          <div class="text uni-white"><MoneyView :character="'￥'" :value="endProfitInfo.inviteProfit || 0" :hidden="hidden"/></div>
+          <uni-icons type="right" size="12" color="#ffffff" />
+        </view>
+      </view>
+
     </view>
   </view>
 </template>
@@ -158,7 +153,11 @@ import {
   queryFrontInOrOutAmt, //查询指定艺术家已入账/转入钱包累计收益
 } from "@/api/profit.js";
 import { getNoticeList } from "@/api/userInfo.js";
+import MoneyView from "@/components/money-view/money-view.vue"
 export default {
+  components: {
+    MoneyView
+  },
   data() {
     return {
       nvueWidth: 730,
@@ -171,7 +170,7 @@ export default {
       },
       downloadAndInviteCountInfo: {},
       profitList: [],
-      items: ["即将入账", "", "已入账", "", "已转入钱包"],
+      items: ["即将入账", "已入账", "已转入钱包"],
       current: 0,
       activeColor: "#007aff",
       styleType: "text",
@@ -182,6 +181,10 @@ export default {
       pageSize: 10,
       pageNum: 1,
       active: 0,
+      hidden: false,
+      incomeBackground: '/static/income-background.png',
+      advertIcon: "/static/advertIcon.png",
+      inviteIcon: "/static/inviteIcon.png",
     };
   },
   // 下拉刷新
@@ -347,6 +350,9 @@ export default {
     segActive(index) {
       this.active = index;
     },
+    clickHidden() {
+      this.hidden = !this.hidden;
+    }
   },
 };
 </script>
@@ -354,193 +360,209 @@ export default {
 <style lang="scss" scoped>
 .container {
   font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
+  min-height: 100vh;
+  background: #141b29;
+  color: #FFFFFF !important;
+
 }
-.back {
-  width: 100%;
-  height: 320px;
+
+.top {
+  width: 750rpx;
+  height: 30vh;
+  background: #0b6375;
   position: relative;
-}
-.back2 {
-  width: 100%;
-  // height: 320px;
-  // position: relative;
-  // top: -60px;
-}
-.back-top {
-  width: 100%;
-  position: absolute;
-  height: 120px;
-  background: #416bdc;
-}
-.back-con {
-  width: 95%;
-  left: 50%;
-  top: 42%;
-  transform: translate(-50%, -50%);
-  background-color: white;
-  position: absolute;
-  height: 220px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-}
-.back-con2 {
-  width: 95%;
-  padding: 0 16px;
-  box-sizing: border-box;
-  left: 50%;
-  top: 460px;
-  transform: translate(-50%, -50%);
-  background-color: white;
-  position: absolute;
-  height: 290px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-.back-bot {
-  width: 100%;
-  position: absolute;
-  top: 80px;
-}
-.back-con-top {
-  font-size: 20px;
-  font-weight: 600;
-  margin: 20px 0 15px 0;
-  display: flex;
-  justify-content: center;
-}
-.back-con-mid {
-  display: flex;
-  align-items: center;
-}
-.border {
-  width: 1px;
-  height: 30px;
-  background-color: rgb(165, 165, 165);
-}
-.back-con-mid-left {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: rgb(165, 165, 165);
-  padding-right: 40px;
-  // border-right: 1px solid #ccc;
-}
-.back-con-mid-right {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: rgb(165, 165, 165);
-  padding-left: 40px;
-}
 
-.back-con-bot {
-  width: 100%;
-  height: 150rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
+  .left-background-img {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 200rpx;
+    height: 150rpx;
+    opacity: 0.2;
+  }
 
-.back-con-bot-left {
-  width: 33.33%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #a5a5a5;
-}
-.back-con-bot-mid {
-  width: 33.33%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #a5a5a5;
-}
-.back-con-bot-right {
-  width: 33.33%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #a5a5a5;
-}
-.uni-padding-wrap {
-  // width: 750rpx;
-  padding: 0px 30px;
-}
+  .top-background-img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+  }
 
-.uni-common-mt {
-  margin-top: 30px;
-}
-.segmented {
-  display: flex;
-  justify-content: center;
-  // align-items: center;
-}
-.segmented-con {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #a5a5a5;
-}
-.img1 {
-  width: 15px;
-  height: 10px;
-  margin-top: 7px;
-  visibility: hidden;
-}
-.img {
-  width: 18px;
-  height: 15px;
-  margin: 0 20px;
-}
-.top-text {
-  font-size: 20px;
-  margin-top: 12px;
-  color: red;
-}
-.size14 {
-  font-size: 16px;
-}
-.show {
-  visibility: visible;
-}
-.activecolor {
-  color: #4d6cff;
-}
-.circular {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #4d6cff;
-  margin-right: 10px;
-}
-.adver {
-  margin-top: 6px;
-  margin-bottom: 10px;
-}
-.adver-top {
-  display: flex;
-  align-items: center;
-  margin-top: 12px;
-}
-.adver-top-text {
-  font-size: 18px;
-  font-weight: bold;
+  .accumulate-income {
+    width: calc(100% - 80rpx);
+    height: calc(100% - 80rpx);
+    padding: 40rpx;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: flex-end;
+
+    .accumulate-income-title {
+      font-size: 28rpx;
+
+    }
+
+    .income-num {
+      width: 100%;
+      line-height: 90rpx;
+      display: flex;
+      justify-content: space-between;
+
+      .income-hidden-but {
+        margin-left: 30rpx;
+      }
+
+    }
+
+    .income-history {
+      font-size: 24rpx;
+      line-height: 24rpx;
+      display: flex;
+
+    }
+
+  }
 }
-.adver-mid {
-  font-size: 12px;
-  color: #ccc;
-  // margin-top: ;
-  margin-bottom: 8px;
+
+.meddle {
+  width: 670rpx;
+  margin: 40rpx auto;
+  background: #1d2734;
+  border-radius: 20rpx;
+  overflow: hidden;
+
+  .income-categories{
+
+    .yesterday-income-title {
+      height: 32rpx;
+      font-size: 32rpx;
+      line-height: 32rpx;
+      background: #0a6375;
+      padding: 20rpx 40rpx;
+    }
+
+    .yesterday-income {
+      display: flex;
+      padding: 40rpx;
+
+      .income-category-item {
+        width: 295rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left-icon {
+          width: 100rpx;
+          height: 100rpx;
+
+          ::v-deep image {
+            width: 100rpx;
+            height: 100rpx;
+          }
+
+        }
+
+        .right-income-info {
+          width: 170rpx;
+          font-size: 24rpx;
+          line-height: 60rpx;
+
+        }
+
+      }
+
+    }
+
+  }
+
 }
-.blue {
-  color: #4d6cff;
+
+.foot {
+  width: 670rpx;
+  margin: 40rpx auto;
+
+  .income-detail-selector {
+    display: flex;
+    justify-content: space-between;
+
+    .details-select-item {
+      width: 200rpx;
+
+      .segmented-con {
+        width: 100%;
+        height: 72rpx;
+        font-size: 32rpx;
+        line-height: 72rpx;
+        text-align: center;
+        background: #1d2734;
+        border-radius: 20rpx;
+      }
+
+      .active-color {
+        background: #0a6375;
+      }
+
+    }
+
+  }
+
+  .adver {
+    width: 100%;
+    padding: 20rpx 0;
+
+    .adver-top {
+      display: flex;
+      align-items: center;
+
+      .circular {
+        width: 20rpx;
+        height: 20rpx;
+        border-radius: 100%;
+        background: #0a6375;
+        margin-right: 20rpx;
+      }
+
+      .adver-top-text {
+        font-size: 32rpx;
+      }
+
+    }
+
+    .adver-mid {
+      font-size: 24rpx;
+      color: #909399;
+    }
+
+  }
+
+  .detail-categories-item {
+    width: calc(100% - 40rpx);
+    background: #1d2734;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 60rpx;
+
+    .title {
+      font-size: 28rpx;
+    }
+
+    .text{
+      font-size: 24rpx;
+      line-height: 40rpx;
+      width: 500rpx;
+      text-align: right;
+    }
+
+  }
+
 }
+
 </style>
diff --git a/pages/userInfo/userInfo.vue b/pages/userInfo/userInfo.vue
index 6ea0f0c..8d8f9db 100644
--- a/pages/userInfo/userInfo.vue
+++ b/pages/userInfo/userInfo.vue
@@ -155,7 +155,7 @@
 
   .top {
     width: 100vw;
-    height: 25vh;
+    height: 30vh;
     position: relative;
 
     .background-image-dim {
@@ -266,7 +266,7 @@
       border-radius: 20rpx;
       overflow: hidden;
       backdrop-filter: blur(25rpx);
-      background-image: linear-gradient(45deg, #243949 0%, #30a9c0 100%);
+      background-image: linear-gradient(45deg, #243949 0%, #0b6375 100%);
 
 
       .middle-btn-item {
diff --git a/static/advertIcon.png b/static/advertIcon.png
new file mode 100644
index 0000000..11474ea
Binary files /dev/null and b/static/advertIcon.png differ
diff --git a/static/income-background.png b/static/income-background.png
new file mode 100644
index 0000000..3e70899
Binary files /dev/null and b/static/income-background.png differ
diff --git a/static/inviteIcon.png b/static/inviteIcon.png
new file mode 100644
index 0000000..64351c5
Binary files /dev/null and b/static/inviteIcon.png differ
diff --git a/static/material.png b/static/material.png
index f00a4ba..bb508c7 100644
Binary files a/static/material.png and b/static/material.png differ
diff --git a/static/upload.png b/static/upload.png
index 7bc791c..a428216 100644
Binary files a/static/upload.png and b/static/upload.png differ