完善首页、我的页面

components/bountyItem.vue

@@ -0,0 +1,138 @@
+<template>
+  <view class="bounty">
+    <view class="head">
+      <image class="image" src="/static/logo.png" mode="scaleToFill" />
+    </view>
+    <view class="middle"></view>
+
+    <view class="main">
+      <view class="top_title">
+        <view class="bounty_title">
+          <view class="text-32 text-500 text-070602 text">
+            这是一条悬赏任务悬赏任务
+          </view>
+          <view class="flex ai_center tips">
+            <view class="tip_item top_color">顶</view>
+            <view class="tip_item quick_color">快审</view>
+            <view class="tip_item hot_color">热</view>
+            <view class="tip_item new_color">新</view>
+          </view>
+        </view>
+        <view class="price text-32 text-600 text-DD3D3D">+3.02元</view>
+      </view>
+      <view class="flex jc_between mgt-16">
+        <view class="flex ai_center text-24 text-400 text-7E7E7E">
+          <view>671已赚</view>
+          <view class="line"></view>
+          <view>剩余21个</view>
+        </view>
+        <view class="text-24 text-400 text-7E7E7E">支持设备：苹果</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  onLoad() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.bounty {
+  width: 100%;
+  height: 160rpx;
+  display: flex;
+  align-items: center;
+  border-bottom: 2rpx solid #F7F7F7;
+
+  .head {
+    display: flex;
+
+    .image {
+      width: 96rpx;
+      height: 96rpx;
+      border-radius: 50%;
+    }
+  }
+  .middle {
+    width: 8rpx;
+    height: 100%;
+  }
+
+  .main {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .top_title {
+      display: flex;
+      align-items: center;
+
+      .bounty_title {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        .text {
+          flex: 1;
+          width: 0;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .tips {
+          width: 210rpx;
+          display: flex;
+          justify-content: space-between;
+
+          .tip_item {
+            display: flex;
+            padding: 4rpx 8rpx;
+            justify-content: center;
+            align-items: center;
+            border-radius: 0 6rpx 6rpx 6rpx;
+            font-size: 24rpx;
+            font-weight: 400;
+            color: #fff;
+          }
+        }
+      }
+
+      .price {
+        margin-left: 30rpx;
+        text-align: end;
+      }
+    }
+  }
+}
+
+.line {
+  height: 80%;
+  width: 1rpx;
+  margin: 0 16rpx;
+  background-color: #dadada;
+}
+
+.top_color {
+  border: 1rpx solid #ffce31;
+  background: #ffce31;
+}
+.quick_color {
+  border: 1rpx solid #6b6df7;
+  background: #6b6df7;
+}
+.hot_color {
+  border: 1rpx solid #e02e24;
+  background: #e02e24;
+}
+.new_color {
+  border: 1rpx solid #fe6505;
+  background: #fe6505;
+}
+</style>

components/messageItem.vue

@@ -0,0 +1,180 @@
+<template>
+  <u-swipe-action>
+    <u-swipe-action-item :options="options" @click="deleteMessage">
+      <view class="message_box" @click="$navTo('/pages/myMessage/chat')">
+        <view class="message">
+          <view class="avatar" v-if="type === 'message'">
+            <image
+              class="w-88 h-88 radio-circle"
+              src="/static/logo.png"
+              mode="scaleToFill"
+            />
+          </view>
+          <view class="right_content">
+            <view class="w flex ai_top">
+              <view class="ellipsis text-32 text-400 text-303030">
+                {{
+                  type === "message"
+                    ? "用户名称用户名称用户名称用户名称用户名称用户名称"
+                    : "消息类型：接单 "
+                }}
+              </view>
+              <view class="text-20 text-500 text-7E7E7E">2025/09/04 20:00</view>
+            </view>
+            <view
+              class="w flex ai_center"
+              :class="type === 'message' ? 'mgt-4' : 'mgt-8'"
+            >
+              <view class="ellipsis text-28 text-400 text-B9B9B9">
+                消息内容：
+                {{
+                  type === "message"
+                    ? "不好意思，您在提交一次不好意思，您在提交一次"
+                    : "YHY "
+                }}
+              </view>
+              <view v-if="type === 'message'" class="num">99+</view>
+              <view v-else>
+                <view class="task_type task_order"> 用户已接单 </view>
+                <!-- <view class="task_type task_check"> 审核已通过 </view>
+                <view class="task_type task_submit"> 用户已提交任务 </view>
+                <view class="task_type task_end"> 距离悬赏任务结束时间还有10分钟 </view>
+                <view class="task_type task_pass"> 订单审核已通过 </view>
+                <view class="task_type task_not_pass"> 订单审核未通过 </view> -->
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </u-swipe-action-item>
+  </u-swipe-action>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "message",
+    },
+  },
+  data() {
+    return {
+      options: [
+        {
+          text: "删除",
+          style: {
+            backgroundColor: "#E02E24",
+            width: "128rpx",
+            marginTop: "1rpx",
+            height: "126rpx",
+            fontSize: "24rpx",
+          },
+        },
+      ],
+    };
+  },
+  onLoad() {},
+  methods: {
+    deleteMessage(e) {
+      this.$emit('delete-msg',e)
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.message_box {
+  width: 100vw;
+  padding: 0 48rpx;
+  background-color: #ffffff;
+  margin-bottom: 16rpx;
+
+  .message {
+    width: 100%;
+    height: 126rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 2rpx solid #f2f2f7;
+    .avatar {
+      width: 88rpx;
+      margin-right: 24rpx;
+    }
+
+    .right_content {
+      height: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .ellipsis {
+        flex: 1;
+        width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .num {
+        display: inline-flex;
+        height: 40rpx;
+        padding: 4rpx 16rpx;
+        justify-content: center;
+        align-items: center;
+        border-radius: 64rpx;
+        background: #e02e24;
+        color: #ffffff;
+        text-align: center;
+        font-family: "Source Han Sans CN";
+        font-size: 20rpx;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.task_type {
+  display: inline-flex;
+  padding: 0 16rpx;
+  justify-content: center;
+  align-items: center;
+  gap: 20rpx;
+  border-radius: 16rpx 0 16rpx 16rpx;
+  font-family: "MiSans VF";
+  font-size: 24rpx;
+  font-weight: 400;
+  line-height: 40rpx;
+}
+
+// 用户已接单
+.task_order {
+  color: #7174f7;
+  background: #7174f71a;
+}
+//审核已通过
+.task_check {
+  color: #fe6505;
+  background: #fe65051a;
+}
+// 用户已提交任务
+.task_submit {
+  color: #4597f7;
+  background: #4597f71a;
+}
+//距离悬赏任务结束
+.task_end {
+  color: #3f9466;
+  background: #3f94661a;
+}
+// 订单审核已通过
+.task_pass {
+  color: #fe6505;
+  background: #fe65051a;
+}
+// 订单审核未通过
+.task_not_pass {
+  color: #e02e24;
+  background: #e02e241a;
+}
+</style>

main.js

@@ -5,18 +5,6 @@ import '@/static/css/fui.css'
 import '@/static/css/flex.css'
 import '@/static/css/uflex.css'
 
-// #ifndef VUE3
-import Vue from 'vue'
-import './uni.promisify.adaptor'
-Vue.config.productionTip = false
-App.mpType = 'app'
-Vue.use(uView)
-const app = new Vue({
-  ...App
-})
-app.$mount()
-// #endif
-
 // 定义全局方法
 const navBack = (delta = 1) => {
   uni.navigateBack({
@@ -46,12 +34,37 @@ const navTo = (url, type = '') => {
   }
 };
 
+const showThoast = (title,icon,duration = 1500) =>{
+	uni.showToast({
+		title,
+		icon:icon?icon:'none',
+		duration
+	})
+}
+
+// #ifndef VUE3
+import Vue from 'vue'
+import './uni.promisify.adaptor'
+Vue.config.productionTip = false
+App.mpType = 'app'
+Vue.use(uView)
+Vue.prototype.$navTo = navTo
+Vue.prototype.$navBack = navBack
+Vue.prototype.$showThoast = showThoast
+
+const app = new Vue({
+  ...App
+})
+app.$mount()
+// #endif
+
 // #ifdef VUE3
 import { createSSRApp } from 'vue'
 export function createApp() {
   const app = createSSRApp(App)
   app.config.globalProperties.navBack = navBack
   app.config.globalProperties.navTo = navTo
+  app.config.globalProperties.showThoast = showThoast
   return {
     app
   }

pages.json

@@ -84,19 +84,19 @@
 		{
 			"path": "pages/personalProfile/index",
 			"style": {
-				"navigationBarTitleText": "个人资料"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/personalProfile/realAuth",
 			"style": {
-				"navigationBarTitleText": "实名认证"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/myMessage/index",
 			"style": {
-				"navigationBarTitleText": "我的消息"
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -144,8 +144,8 @@
 		{
 			"path": "pages/myMessage/chat",
 			"style": {
-				"navigationBarTitleText": "聊天"
-				// "navigationStyle": "custom",
+				// "navigationBarTitleText": "聊天"
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/index/index.vue

@@ -1,162 +1,211 @@
 <template>
-	<view class="content pdx-30">
-		<view @click="toPage('/pages/login/index')">
-			登录
-		</view>
-		<view @click="toPage('/pages/login/register')">
-			注册
-		</view>
-		<view @click="toPage('/pages/login/forget')">
-			忘记密码
-		</view>
-		<view class="w h-80 mgt-100" @click="toPage('/pages/index/search')">
-			<view class="input flex ai_center jc_between">
-				<view>任务标题、用户ID</view>
-				<image class="w-40 h-40" src="/static/logo.png" mode="scaleToFill" />
-			</view>
-		</view>
-
-		<view class="w h-300 mgy-20">
-			<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false"
-				indicatorStyle="right: 20px">
-				<view slot="indicator" class="indicator-num">
-					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
-				</view>
-			</u-swiper>
-		</view>
-
-		<view class="w h-80 flex jc_between ai_center" @click="toPage('/pages/index/notice')">
-			<view class="flex ai_center">
-				<image class="w-40 h-40 mgr-30" src="/static/logo.png" mode="scaleToFill" />
-				<view>我是公告</view>
-			</view>
-			<view>2025.1.1</view>
-		</view>
-
-		<view class="w flex mgt-20 jc_between text-24">
-			<view class="flex fd_c ai_center" v-for="item in menu" :key="item.name" @click="toPage(item.pagePath)">
-				<image class="w-60 h-60" :src="item.icon" mode="scaleToFill" />
-				<view class="mgt-10">{{ item.name }}</view>
-			</view>
-		</view>
-
-		<view class="w h-200 bg-444 text-white mgy-20" @click="toPage('/pages/index/newcomerTasks')">新人任务</view>
-
-		<view class="w">
-			<view>推荐悬赏</view>
-			<view class="w mgt-20">
-				<scroll-view scroll-y>
-					<view class="flex jc_between pdy-10" v-for="item in 5">
-						<image class="w-60 h-60" src="/static/logo.png" mode="scaleToFill" />
-						<view class="flex1 mgl-10">
-							<view class="flex jc_between mgb-10">
-								<view class="flex">
-									<view>这是一条悬赏任务</view>
-									<view class="flex">
-										<view>顶</view>
-										<view>快审</view>
-										<view>热</view>
-										<view>新</view>
-									</view>
-								</view>
-								<view>+3.02元</view>
-							</view>
-							<view class="flex jc_between">
-								<view class="flex">
-									<view>671已赚</view>
-									<view></view>
-									<view>剩余21个</view>
-								</view>
-								<view>支持设备：苹果</view>
-							</view>
-						</view>
-					</view>
-				</scroll-view>
-			</view>
-		</view>
-	</view>
+  <view class="content">
+    <view class="top_bg pdx-32">
+      <view class="w h-88 mgt-88" @click="$navTo('/pages/index/search')">
+        <view class="input_box flex ai_center jc_between">
+          <view class="text-32 text-400 text-C0C0C0">任务标题、用户ID</view>
+          <image class="w-48 h-48" src="/static/logo.png" mode="scaleToFill" />
+        </view>
+      </view>
+    </view>
+
+    <view class="banner">
+      <u-swiper
+        :list="list6"
+        @change="(e) => (currentNum = e.current)"
+        :autoplay="false"
+        indicatorStyle="right: 20px"
+      >
+        <view slot="indicator" class="indicator-num">
+          <text class="indicator-num__text"
+            >{{ currentNum + 1 }}/{{ list6.length }}</text
+          >
+        </view>
+      </u-swiper>
+    </view>
+
+    <view
+      class="w h-88 pdx-32 flex jc_between ai_center mgt-24"
+      @click="$navTo('/pages/index/notice')"
+    >
+      <view class="flex ai_center">
+        <image class="w-48 h-48" src="/static/logo.png" mode="scaleToFill" />
+        <view class="mgl-24 text-32 text-500 text-070602">这是一条公告</view>
+      </view>
+      <view class="text-28 text-400 text-7E7E7E">2025.1.1</view>
+    </view>
+    <view class="affiche"></view>
+
+    <view class="w h-196 pdx-32 flex mgt-24 jc_between ai_center text-24">
+      <view
+        class="flex fd_c ai_center"
+        v-for="item in menu"
+        :key="item.name"
+        @click="$navTo(item.pagePath)"
+      >
+        <image class="w-96 h-96" :src="item.icon" mode="scaleToFill" />
+        <view class="mgt-16 text-26 text-400 text-303030">{{ item.name }}</view>
+      </view>
+    </view>
+
+    <view
+      class="w h-224 pdx-32 text-white mgt-16"
+      @click="$navTo('/pages/index/newcomerTasks')"
+    >
+      <image class="w h radio-24" src="/static/logo.png" mode="scaleToFill" />
+    </view>
+
+    <view class="w flex1 pdx-32 mgt-16">
+      <view class="h-72 text-32 text-500 text-070602 flex ai_center">
+        推荐悬赏
+      </view>
+      <view class="w flex1">
+        <scroll-view scroll-y class="scroll">
+          <view v-for="item in 10" :key="item" class="bounty">
+            <BountyItem class="mgb-10"></BountyItem>
+          </view>
+          <view class="loading">上拉加载更多 ></view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
+import BountyItem from "components/bountyItem.vue";
 export default {
-	data() {
-		return {
-			title: '首页',
-			menu: [
-				{ icon: '/static/logo.png', name: '新手入门', pagePath: '/pages/index/gettingStarted' },
-				{ icon: '/static/logo.png', name: '热门悬赏', pagePath: '/pages/index/popularBounty' },
-				{ icon: '/static/logo.png', name: '最新悬赏', pagePath: '/pages/index/newestBounty' },
-				{ icon: '/static/logo.png', name: '急速快审', pagePath: '/pages/index/quickCheck' },
-				{ icon: '/static/logo.png', name: '邀请赚钱', pagePath: '/pages/index/inviteEarnMoney' },
-			],
-			currentNum: 0,
-			list6: [
-				"https://uviewui.com/swiper/swiper2.png",
-				"https://uviewui.com/swiper/swiper3.png",
-				"https://uviewui.com/swiper/swiper1.png",
-			],
-
-		}
-	},
-	onLoad() {
-
-	},
-	methods: {
-		toPage(url) {
-			uni.navigateTo({ url });
-		}
-	},
-
-}
+  components: { BountyItem },
+  data() {
+    return {
+      title: "首页",
+      menu: [
+        {
+          icon: "/static/logo.png",
+          name: "新手入门",
+          pagePath: "/pages/index/gettingStarted",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "热门悬赏",
+          pagePath: "/pages/index/popularBounty",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "最新悬赏",
+          pagePath: "/pages/index/newestBounty",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "急速快审",
+          pagePath: "/pages/index/quickCheck",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "邀请赚钱",
+          pagePath: "/pages/index/inviteEarnMoney",
+        },
+      ],
+      currentNum: 0,
+      list6: [
+        "https://uviewui.com/swiper/swiper2.png",
+        "https://uviewui.com/swiper/swiper3.png",
+        "https://uviewui.com/swiper/swiper1.png",
+      ],
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
-<style>
+<style lang="scss" scope>
 .content {
-	height: calc(100vh - 120rpx);
-	/* background-color: red; */
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	/* justify-content: center; */
-
-	.input {
-		width: 100%;
-		height: 80rpx;
-		background-color: rgb(233, 233, 233);
-		padding: 10rpx 30rpx;
-		border-radius: 40rpx;
-	}
+  //   height: calc(100vh - 120rpx);
+  /* background-color: red; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: center; */
+
+  .top_bg {
+    width: 100%;
+    height: 358rpx;
+    flex-shrink: 0;
+    /* background: linear-gradient(181deg, #ffffff00 39.21%, #fff 99.52%),
+      linear-gradient(107deg, #fe6505 0%, #ff883d 106.14%); */
+    background: linear-gradient(to bottom, #fe6505, #ffffff);
+
+    .input_box {
+      width: 100%;
+      height: 88rpx;
+      background-color: #fff;
+      padding: 0 32rpx;
+      border-radius: 40rpx;
+    }
+  }
+
+  .banner {
+    margin-top: -158rpx;
+    padding: 0 32rpx;
+    width: 100%;
+    height: 272rpx;
+  }
+}
+.affiche {
+  width: 100%;
+  height: 2rpx;
+  background: linear-gradient(
+    90deg,
+    #fe650500 0%,
+    #fe65051a 46.15%,
+    #fe650500 100%
+  );
+}
+.scroll {
+  flex: 1;
+  //   height: calc(100vh - 1250rpx);
+  //   height: 1010rpx;
+  overflow: hidden;
+}
+
+.loading {
+  text-align: center;
+  margin-top: 50rpx;
+  padding-bottom: 86rpx;
+  font-size: 20rpx;
+  font-weight: 400;
+  color: #c0c0c0;
 }
 
 .indicator {
-	@include flex(row);
-	justify-content: center;
-
-	&__dot {
-		height: 6px;
-		width: 6px;
-		border-radius: 100px;
-		background-color: rgba(255, 255, 255, 0.35);
-		margin: 0 5px;
-		transition: background-color 0.3s;
-
-		&--active {
-			background-color: #ffffff;
-		}
-	}
+  @include flex(row);
+  justify-content: center;
+
+  &__dot {
+    height: 6px;
+    width: 6px;
+    border-radius: 100px;
+    background-color: rgba(255, 255, 255, 0.35);
+    margin: 0 5px;
+    transition: background-color 0.3s;
+
+    &--active {
+      background-color: #ffffff;
+    }
+  }
 }
 
 .indicator-num {
-	padding: 2px 0;
-	background-color: rgba(0, 0, 0, 0.35);
-	border-radius: 100px;
-	width: 35px;
-	display: flex;
-	justify-content: center;
-
-	&__text {
-		color: #ffffff;
-		font-size: 12px;
-	}
+  padding: 2px 0;
+  background-color: rgba(0, 0, 0, 0.35);
+  border-radius: 100px;
+  width: 35px;
+  display: flex;
+  justify-content: center;
+
+  &__text {
+    color: #ffffff;
+    font-size: 12px;
+  }
 }
-</style>
+</style>

pages/my/index.vue

@@ -1,101 +1,253 @@
 <template>
-	<view class="content pdx-30">
-		<view class="w flex ai_center mgt-100">
-			<image class="w-100 h-100" src="/static/logo.png"></image>
-			<view class="text-32">用户名称用户名称</view>
-			<view>V年</view>
-		</view>
-
-		<view class="w flex jc_between mgy-20">
-			<view class="flex">
-				<view>v1</view>
-				<view class="mgl-10">新手上路</view>
-			</view>
-			<view class="flex">
-				<view>等级越高赚钱越多</view>
-				<view class="mgl-10">查看攻略</view>
-			</view>
-		</view>
-		<view></view>
-
-		<view class="w flex jc_center">
-			<view>
-				<view>999.99</view>
-				<view>去提现</view>
-				<view>累计收益</view>
-			</view>
-			<view>
-				<view>999.99</view>
-				<view>悬赏金额</view>
-			</view>
-		</view>
-
-		<view class="w flex jc_between mgy-20">
-			<view v-for="item in tagList" :key="item.name" @click="navTo(item.pagePath)">
-				<image class="w-100 h-100" :src="item.icon" mode="scaleToFill" />
-				<view>{{ item.name }}</view>
-			</view>
-		</view>
-
-		<view class="w flex ai_center">
-			<image src="/static/logo.png" mode="scaleToFill" />
-			<view class="mgl-10">
-				<view>发布悬赏</view>
-				<view>任务要急做？点这里快速发</view>
-			</view>
-		</view>
-
-		<view class="w mgt-20">
-			<view class="flex jc_between ai_center w pdy-10" v-for="item in menuList" :key="item.name"
-				@click="navTo(item.pagePath)">
-				<view class="flex ai_center">
-					<image class="w-40 h-40" :src="item.icon" mode="scaleToFill" />
-					<view class="mgl-10">{{ item.name }}</view>
-				</view>
-				<image class="w-40 h-40" src="/static/logo.png" mode="scaleToFill" />
-			</view>
-		</view>
-
-	</view>
+  <view class="content pdx-32">
+    <view class="top_bg">
+      <view class="head" @click="$navTo('/pages/personalProfile/index')">
+        <view class="flex fd_c">
+          <view class="text-36 text-070202 text-500">用户名称用户名称</view>
+          <image class="vip_icon" src="/static/logo.png"></image>
+        </view>
+        <image class="image" src="/static/logo.png"></image>
+      </view>
+
+      <view class="info">
+        <view class="info_item">
+          <view class="text-40 text-400 text-070202">1322</view>
+          <view class="text-24 text-500 text-C8C9C6 mgt-8">我的接单</view>
+        </view>
+        <view class="line"></view>
+        <view class="info_item">
+          <view class="text-40 text-400 text-070202">322</view>
+          <view class="text-24 text-500 text-C8C9C6 mgt-8">我的悬赏</view>
+        </view>
+        <view class="line"></view>
+        <view class="info_item">
+          <view class="text-40 text-400 text-070202">32</view>
+          <view class="text-24 text-500 text-C8C9C6 mgt-8">开通会员</view>
+        </view>
+        <view class="line"></view>
+        <view class="info_item">
+          <view class="text-40 text-400 text-070202">22</view>
+          <view class="text-24 text-500 text-C8C9C6 mgt-8">邀请好友</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="earn">
+      <view class="earn_item flex">
+        <view>
+          <view class="text-24 text-500 text-7E7E7E">累计收益</view>
+          <view class="text-44 text-400 text-070202 mgt-18">999.99</view>
+        </view>
+        <view class="btn">去提现</view>
+      </view>
+      <view class="earn_item mgl-24">
+        <view class="text-24 text-500 text-7E7E7E">悬赏余额</view>
+        <view class="text-44 text-400 text-070202 mgt-18">999.99</view>
+      </view>
+    </view>
+
+    <image class="radio-16 h-128 w mgt-24" src="/static/logo.png"></image>
+    <image class="radio-16 h-144 w mgt-24" src="/static/logo.png"></image>
+
+    <view class="w mgt-24 pdb-30">
+      <view
+        class="w h-96 flex jc_between ai_center mgt-8 menu_item"
+        v-for="item in menuList"
+        :key="item.name"
+        @click="$navTo(item.pagePath)"
+      >
+        <view class="flex ai_center p-rel">
+          <image class="w-48 h-48" :src="item.icon" mode="scaleToFill" />
+          <view class="mgl-20 text-28 text-400 text-303030">
+            {{ item.name }}
+          </view>
+          <view v-if="item.name === '我的消息'" class="badge">99+</view>
+        </view>
+        <image class="w-48 h-48" src="/static/logo.png" mode="scaleToFill" />
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
 export default {
-	data() {
-		return {
-			title: '我的',
-			tagList: [
-				{ icon: '/static/logo.png', name: '我的接单', pagePath: '/pages/myTakeOrder/index' },
-				{ icon: '/static/logo.png', name: '我的悬赏', pagePath: '/pages/myBounty/index' },
-				{ icon: '/static/logo.png', name: '开通会员', pagePath: '/pages/activateVIP/index' },
-				{ icon: '/static/logo.png', name: '邀请好友', pagePath: '/pages/inviteFriends/index' },
-			],
-			menuList: [
-				{ icon: '/static/logo.png', name: '我的工具包', pagePath: '/pages/myTools/index' },
-				{ icon: '/static/logo.png', name: '我的消息', pagePath: '/pages/myMessage/index' },
-				{ icon: '/static/logo.png', name: '维权', pagePath: '/pages/safeguardRights/index' },
-				{ icon: '/static/logo.png', name: '收益统计', pagePath: '/pages/statisticsEarnings/index' },
-				{ icon: '/static/logo.png', name: '我的店铺', pagePath: '/pages/myShop/index' },
-				{ icon: '/static/logo.png', name: '系统设置', pagePath: '/pages/setting/index' },
-			]
-		}
-	},
-	onLoad() {
-
-	},
-	methods: {
-		navTo(url) {
-			uni.navigateTo({ url });
-		}
-	}
-}
+  data() {
+    return {
+      title: "我的",
+      tagList: [
+        {
+          icon: "/static/logo.png",
+          name: "我的接单",
+          pagePath: "/pages/myTakeOrder/index",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "我的悬赏",
+          pagePath: "/pages/myBounty/index",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "开通会员",
+          pagePath: "/pages/activateVIP/index",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "邀请好友",
+          pagePath: "/pages/inviteFriends/index",
+        },
+      ],
+      menuList: [
+        {
+          icon: "/static/logo.png",
+          name: "我的工具包",
+          pagePath: "/pages/myTools/index",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "我的消息",
+          pagePath: "/pages/myMessage/index",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "维权",
+          pagePath: "/pages/safeguardRights/index",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "收益统计",
+          pagePath: "/pages/statisticsEarnings/index",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "我的店铺",
+          pagePath: "/pages/myShop/index",
+        },
+        {
+          icon: "/static/logo.png",
+          name: "系统设置",
+          pagePath: "/pages/setting/index",
+        },
+      ],
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
-<style>
+<style lang="scss" scope>
 .content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.top_bg {
+  width: 100vw;
+  height: 568rpx;
+  flex-shrink: 0;
+//   background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+  background:  linear-gradient(180deg, #ffd8bf 10%, #fff 65%);
+
+  .head {
+    margin-top: 134rpx;
+    padding: 0 32rpx;
+    height: 144rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .vip_icon {
+      margin-top: 16rpx;
+      width: 112rpx;
+      height: 44rpx;
+    }
+    .image {
+      width: 144rpx;
+      height: 144rpx;
+      border-radius: 50%;
+    }
+  }
+
+  .info {
+    margin-top: 40rpx;
+    padding: 0 32rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .info_item {
+      height: 128rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .line {
+      height: 40rpx;
+      width: 2rpx;
+      background: #efedec;
+    }
+  }
+}
+
+.earn {
+  margin-top: -122rpx;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  .earn_item {
+    padding: 16rpx 16rpx 20rpx 24rpx;
+    flex: 1;
+    height: 148rpx;
+    flex-shrink: 0;
+    border-radius: 16rpx;
+    background: #fff;
+    box-shadow: 0 0 56rpx 0 #0000001a;
+  }
+
+  .btn {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 120rpx;
+    height: 48rpx;
+    flex-shrink: 0;
+    border-radius: 24rpx;
+    background: #fe6505;
+    box-shadow: 0 8rpx 16rpx 0 #fe650533;
+    color: #ffffff;
+    text-align: center;
+    font-family: "Source Han Sans CN";
+    font-size: 24rpx;
+    font-weight: 400;
+  }
+}
+
+.menu_item {
+  border-bottom: 2rpx solid #f2f2f7;
+}
+
+.badge {
+  display: inline-flex;
+  height: 40rpx;
+  padding: 4rpx 12rpx;
+  justify-content: center;
+  align-items: center;
+  border-radius: 64rpx;
+  background: #e02e24;
+  color: #ffffff;
+  text-align: center;
+  font-family: "Source Han Sans CN";
+  font-size: 20rpx;
+  font-weight: 500;
+
+  position: absolute;
+  left: 188rpx;
+  top: -20rpx;
 }
 </style>

pages/myMessage/chat.vue

@@ -1,25 +1,157 @@
 <template>
-	<view class="content">
-		消息页面
-	</view>
+  <view class="content">
+    <view class="w h-88 flex ai_center jc_center mgt-88 p-rel">
+      <image
+        @click="$navBack()"
+        class="w-48 h-48 abs_left"
+        style="left: 32rpx"
+        src="/static/logo.png"
+        mode="scaleToFill"
+      />
+      <view class="text-36 text-500 text-070202">用户昵称123</view>
+    </view>
+
+    <view class="message-box pdx-32">
+      <view class="w flex fd_c ai_center" v-for="item in 5" :key="item">
+        <view class="text-20 text-500 text-B9B9B9 mgt-32 mgb-32">
+          2025/08/8 16：00
+        </view>
+
+        <view class="ims_item w flex ai_center mgb-24">
+          <view class="ims_head">
+            <image
+              class="w-80 h-80 radio-circle"
+              src="/static/logo.png"
+              mode="scaleToFill"
+            />
+          </view>
+          <view class="ims_conten ims_conten_left mgl-16"
+            >这是一条消息内容</view
+          >
+        </view>
+
+        <view class="ims_item w flex ai_center jc_end mgb-24">
+          <view class="ims_conten ims_conten_right mgl-16"
+            >这是一条消息内容</view
+          >
+
+          <view class="ims_head">
+            <image
+              class="w-80 h-80 radio-circle"
+              src="/static/logo.png"
+              mode="scaleToFill"
+            />
+          </view>
+        </view>
+
+        <view class="text-20 text-500 text-B9B9B9 mgt-32 mgb-32"> 16：00 </view>
+
+        <view class="ims_item w flex ai_center mgb-24">
+          <view class="ims_head">
+            <image
+              class="w-80 h-80 radio-circle"
+              src="/static/logo.png"
+              mode="scaleToFill"
+            />
+          </view>
+          <view class="ims_conten ims_conten_left mgl-16"
+            >这是最新一条消息内容</view
+          >
+        </view>
+      </view>
+    </view>
+
+    <view class="input_box">
+      <u--input class="input" placeholder="请输入消息内容">
+        <template slot="suffix">
+          <image
+            class="w-48 h-48 radio-circle"
+            src="/static/logo.png"
+            mode="scaleToFill"
+          />
+        </template>
+      </u--input>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+export default {
+  data() {
+    return {};
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
 <style scoped lang="scss">
-	
+.content {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  .message-box {
+    flex: 1;
+    // background-color: #d2d1d1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    padding-bottom: 800rpx;
+  }
+}
+
+.ims_conten {
+  display: inline-flex;
+  height: 80rpx;
+  padding: 20rpx 24rpx;
+  justify-content: center;
+  align-items: center;
+  gap: 20rpx;
+  flex-shrink: 0;
+  border-radius: 0 24rpx 24rpx 24rpx;
+
+  text-align: center;
+  font-family: "MiSans VF";
+  font-size: 32rpx;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.66rpx;
+}
+
+.ims_conten_left {
+  color: #070202;
+  background: #f3f4f4;
+}
+
+.ims_conten_right {
+  color: #ffffff;
+  background: #fe6505;
+}
+
+.input_box {
+  width: 100vw;
+  padding: 0 32rpx;
+  padding-top: 16rpx;
+  padding-bottom: 84rpx;
+  background-color: #fff;
+  box-shadow: 0 -12rpx 24rpx 0 #0000000a;
+
+  .input {
+    width: 100%;
+    height: 80rpx;
+    flex-shrink: 0;
+    border-radius: 64rpx;
+    background: #f6f6f6;
+    font-family: "MiSans VF";
+    font-size: 28rpx;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 40rpx;
+    letter-spacing: 0.66rpx;
+  }
+}
 </style>

pages/myMessage/index.vue

@@ -1,49 +1,90 @@
 <template>
-	<view class="content">
-		我的消息
-	</view>
+  <view class="content pdx-48">
+    <view class="w h-88 flex ai_center jc_between mgt-88">
+      <image
+        @click="$navBack()"
+        class="w-48 h-48"
+        src="/static/logo.png"
+        mode="scaleToFill"
+      />
+      <view class="text-36 text-500 text-070202">我的消息</view>
+      <view class="text-28 text-400" style="color: #07020280">联系客服</view>
+    </view>
+
+    <view class="mgt-16 mgb-16 w h-96 flex ai_center">
+      <view
+        :class="menuIndex === 0 ? 'checkMenu' : 'menu'"
+        @click="handleMenu(0)"
+      >
+        <view>消息列表</view>
+        <view></view>
+      </view>
+      <view
+        class="mgl-48"
+        :class="menuIndex === 1 ? 'checkMenu' : 'menu'"
+        @click="handleMenu(1)"
+      >
+        <view>任务消息</view>
+        <view></view>
+      </view>
+    </view>
+
+    <view v-if="menuIndex === 0">
+      <view v-for="item in 5" :key="item">
+        <MessageItem type="message" @delete-msg="deleteMessage"></MessageItem>
+      </view>
+    </view>
+
+    <view v-if="menuIndex === 1">
+      <view v-for="item in 5" :key="item + 5">
+        <MessageItem type="taskMsg"></MessageItem>
+      </view>
+    </view>
+
+
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
+import MessageItem from "components/messageItem.vue";
+export default {
+  components: { MessageItem },
+  data() {
+    return {
+      menuIndex: 0,
+    };
+  },
+  onLoad() {},
+  methods: {
+    handleMenu(type) {
+      this.menuIndex = type;
+    },
+	deleteMessage(e) {
+		console.log('删除信息 :===>>', e);
 	}
+  },
+};
 </script>
 
 <style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
+.checkMenu {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #070202;
+  font-family: "MiSans VF";
+}
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+.menu {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #7e7e7e;
+  font-family: "MiSans VF";
+}
 </style>

pages/personalProfile/index.vue

@@ -1,53 +1,136 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-			<!-- <u-button text="月落" type="primary"></u-button> -->
-		</view>
-	</view>
+  <view class="content pdx-48">
+    <view class="w h-88 flex ai_center jc_center mgt-88 p-rel">
+      <image
+        @click="$navBack()"
+        class="w-48 h-48 abs_left"
+        src="/static/logo.png"
+        mode="scaleToFill"
+      />
+      <view class="text-36 text-500 text-070202">个人资料</view>
+    </view>
+
+    <view class="mgt-16 w">
+      <view
+        class="w h-96 flex ai_center jc_between mgb-16 menu_border"
+        v-for="item in menu"
+        :key="item.name"
+      >
+        <view class="text-28 text-400 text-303030">{{ item.title }}</view>
+        <view class="flex ai_center">
+          <image
+            class="w-64 h-64"
+            v-if="item.name === 'avatar'"
+            src="/static/logo.png"
+            mode="scaleToFill"
+          />
+          <view v-else class="text-24 text-600 text-070202">
+            {{ item.value }}
+          </view>
+          <image
+            v-if="item.name === 'avatar' || item.name === 'name'"
+            class="w-48 h-48 mgl-30"
+            src="/static/logo.png"
+            mode="scaleToFill"
+          />
+        </view>
+      </view>
+    </view>
+
+    <view class="w mgt-48">
+      <view class="mgb-16">
+        <view class="text-32 text-600 text-303030">其他</view>
+      </view>
+      <view
+        class="w h-96 flex ai_center jc_between mgb-16 menu_border"
+        v-for="item in otherMenu"
+        :key="item.name"
+        @click="$navTo(item.pagePath)"
+      >
+        <view class="text-28 text-400 text-303030">{{ item.title }}</view>
+        <view class="flex ai_center">
+          <image
+            class="w-64 h-64 mgr-24"
+            v-if="item.name === 'weixin'"
+            src="/static/logo.png"
+            mode="scaleToFill"
+          />
+          <view class="text-24 text-600 text-070202">
+            {{ item.value }}
+          </view>
+          <image
+            class="w-48 h-48 mgl-30"
+            src="/static/logo.png"
+            mode="scaleToFill"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				title: '个人资料'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+export default {
+  data() {
+    return {
+      title: "个人资料",
+      menu: [
+        { title: "我的头像", name: "avatar", value: "", pagePath: "" },
+        { title: "我的昵称", name: "name", value: "czh", pagePath: "" },
+        { title: "用户ID", name: "id", value: "00001", pagePath: "" },
+        {
+          title: "注册时间",
+          name: "time",
+          value: "2025/05/02  18：00",
+          pagePath: "",
+        },
+        { title: "我的邀请人", name: "invite", value: "2555885", pagePath: "" },
+      ],
+      otherMenu: [
+        { title: "微信", name: "weixin", value: "czh", pagePath: "" },
+        { title: "支付宝", name: "aliPay", value: "已绑定", pagePath: "" },
+        {
+          title: "实名认证",
+          name: "realName",
+          value: "未实名",
+          pagePath: "/pages/personalProfile/realAuth",
+        },
+      ],
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
 <style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin-top: 200rpx;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50rpx;
+}
+
+.text-area {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
+
+.menu_border {
+  border-bottom: 2rpx solid #f2f2f7;
+}
 </style>

pages/personalProfile/realAuth.vue

@@ -1,25 +1,91 @@
 <template>
-	<view class="content">
-		实名认证
-	</view>
+  <view class="content pdx-48">
+    <view class="w h-88 flex ai_center jc_center mgt-88 p-rel">
+      <image
+        @click="$navBack()"
+        class="w-48 h-48 abs_left"
+        src="/static/logo.png"
+        mode="scaleToFill"
+      />
+      <view class="text-36 text-500 text-070202">实名认证</view>
+    </view>
+
+    <view class="w mgt-16">
+      <view class="text-32 text-600 text-303030">身份验证</view>
+      <view class="mgt-24 text-26 text-500 text-303030">
+        <view class="mgb-16">
+          根据
+          <text class="text-E02E24">《网络安全法》</text>
+          相关规定，涉及到资金相关操作，
+        </view>
+        必选需要用户实名认证，
+        <text class="text-E02E24">只需认证一次，且无法进行更改</text>
+      </view>
+
+      <view
+        class="w radio-24 mgt-24"
+        style="height: 424rpx; background-color: #ffede2"
+      ></view>
+      <view
+        class="w radio-24 mgt-24"
+        style="height: 424rpx; background-color: #ffede2"
+      ></view>
+
+      <view class="w h-96 flex ai_center jc_between mgt-24 menu_border">
+        <view class="text-28 text-400 text-303030">姓名</view>
+        <view class="flex ai_center">
+          <view class="text-24 text-600 text-070202">陈毛毛</view>
+          <image
+            class="w-48 h-48 mgl-30"
+            src="/static/logo.png"
+            mode="scaleToFill"
+          />
+        </view>
+      </view>
+
+      <view class="w h-96 flex ai_center jc_between mgt-16 menu_border">
+        <view class="text-28 text-400 text-303030">身份证号</view>
+        <view class="flex ai_center">
+          <view class="text-24 text-600 text-070202">35052119950452522</view>
+          <image
+            class="w-48 h-48 mgl-30"
+            src="/static/logo.png"
+            mode="scaleToFill"
+          />
+        </view>
+      </view>
+
+      <button class="btn">提交验证</button>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+export default {
+  data() {
+    return {};
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
 <style scoped lang="scss">
-	
+.menu_border {
+  border-bottom: 2rpx solid #f2f2f7;
+}
+
+.btn {
+  margin-top: 88rpx;
+  width: 100%;
+  height: 96rpx;
+  flex-shrink: 0;
+  border-radius: 64rpx;
+  background: #fe6505;
+  color: #ffffff;
+  text-align: center;
+  font-family: "MiSans VF";
+  font-size: 36rpx;
+  font-weight: 500;
+}
 </style>

static/css/fui.css

@@ -205,6 +205,27 @@ image {
 .text-7E7E7E{
 	color: #7E7E7E;
 }
+.text-C0C0C0{
+	color: #C0C0C0;
+}
+.text-070602{
+	color: #070602;
+}
+.text-070202{
+	color: #070202;
+}
+.text-C8C9C6{
+	color: #C8C9C6;
+}
+.text-E02E24{
+	color: #E02E24;
+}
+.text-B9B9B9{
+	color: #B9B9B9;
+}
+.text-DD3D3D{
+	color: #DD3D3D;
+}
 /* #ifndef APP-PLUS-NVUE */
 .text-color-initial {
 	color: initial;
@@ -1011,6 +1032,9 @@ image {
 .mgl-40 {
 	margin-left: 40rpx;
 }
+.mgl-48 {
+	margin-left: 48rpx;
+}
 .mgl-50{
 	margin-left: 50rpx;
 }
@@ -1251,6 +1275,9 @@ image {
 .mgt-80 {
 	margin-top: 80rpx;
 }
+.mgt-88 {
+	margin-top: 88rpx;
+}
 .mgt-90 {
 	margin-top: 90rpx;
 }
@@ -1305,12 +1332,21 @@ image {
 .mgb-10 {
 	margin-bottom: 10rpx;
 }
+.mgb-16 {
+	margin-bottom: 16rpx;
+}
 .mgb-20 {
 	margin-bottom: 20rpx;
 }
+.mgb-24 {
+	margin-bottom: 24rpx;
+}
 .mgb-30 {
 	margin-bottom: 30rpx;
 }
+.mgb-32 {
+	margin-bottom: 32rpx;
+}
 .mgb-40 {
 	margin-bottom: 40rpx;
 }
@@ -1414,9 +1450,15 @@ image {
 .pdx-30 {
 	padding-left: 30rpx; padding-right: 30rpx;
 }
+.pdx-32 {
+	padding-left: 32rpx; padding-right: 32rpx;
+}
 .pdx-40 {
 	padding-left: 40rpx; padding-right: 40rpx;
 }
+.pdx-48 {
+	padding-left: 48rpx; padding-right: 48rpx;
+}
 .pdx-50 {
 	padding-left: 50rpx; padding-right: 50rpx;
 }
@@ -1808,6 +1850,9 @@ image {
 .w-80 {
 	width: 80rpx;
 }
+.w-88 {
+	width: 88rpx;
+}
 .w-90 {
 	width: 90rpx;
 }
@@ -2091,6 +2136,9 @@ image {
 .h-70 {
 	height: 70rpx;
 }
+.h-72 {
+	height: 72rpx;
+}
 .h-80 {
 	height: 80rpx;
 }
@@ -2127,12 +2175,18 @@ image {
 .h-120 {
 	height: 120rpx;
 }
+.h-128 {
+	height: 128rpx;
+}
 .h-130 {
 	height: 130rpx;
 }
 .h-140 {
 	height: 140rpx;
 }
+.h-144 {
+	height: 144rpx;
+}
 .h-150 {
 	height: 150rpx;
 }
@@ -2148,6 +2202,9 @@ image {
 .h-192 {
 	height: 192rpx;
 }
+.h-196 {
+	height: 196rpx;
+}
 .h-200 {
 	height: 200rpx;
 }
@@ -2157,6 +2214,9 @@ image {
 .h-220 {
 	height: 220rpx;
 }
+.h-224 {
+	height: 224rpx;
+}
 .h-240 {
 	height: 240rpx;
 }
@@ -2481,6 +2541,9 @@ image {
 .radio-22  {
 	border-radius: 22rpx;
 }
+.radio-24  {
+	border-radius: 24rpx;
+}
 .radio-30  {
 	border-radius: 30rpx;
 }