--我的页面改成新设计图完成

--地址组件修改默认显示

src/components/AddressList/index.scss

@@ -18,7 +18,7 @@
     margin: 18px auto 0;
     border: 1px solid #ffffff;
   }
-  .address-list:hover{
+  .address-active{
     border: 1px solid #68b4ff;
     box-shadow: 0px 0px 10px 0px rgba(0,122,255,0.27); 
   }

src/components/AddressList/index.tsx

@@ -28,11 +28,13 @@ const AddressList = memo((props:Params)=>{
           data.length>0?
           data.map((item,index)=>{
             return(
-              <View onClick={()=>props.onSelect&&props.onSelect(item,index)} className="address-list">
+              <View onClick={()=>props.onSelect&&props.onSelect(item,index)} className={`address-list ${index==0&&'address-active'}`}>
                 <View className="address-user">
                   XL纺织
-                  <Text className="address-list-default">默认</Text>
+                  {
-                  {/* <Text className="address-list-phone">1656488999</Text> */}
+                    index==0?<Text className="address-list-default">默认</Text>:
+                    <Text className="address-list-phone">1656488999</Text>
+                  }
                 </View>
                 <View className="address-list-bottom">
                   <View className="address-list-info">

src/pages/user/index.module.scss

@@ -2,16 +2,16 @@
   background-color: #F8F8F8;
   height: 100vh;
   .header{
-    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652840455&t=6d2fd53931578ef6e213a929a77d059c);
+    background: #68b4ff;
     background-size: cover;
-    height: 710px;
+    height: 560px;
     position: relative;
     .card-main{
       margin-top: 33%;
     }
   }
   .header-card{
-    position: absolute;left: 50%;bottom: 5%;
+    position: absolute;left: 50%;bottom: -18%;
     transform: translateX(-50%);
   }
   .crad{
@@ -100,14 +100,48 @@
       color: #3c3c3c;
       text-align: center;
       margin-top: 30px;
+      position: relative;
   }
-  .card-main-title-content-item image{
+  .card-main-title-content-item Text{
-      width: 68px;
+    font-size: 56px;
-      height: 68px;
+    color: #3C3C3C;
-      border: 2px solid #cccccc;
+  }
-      margin-bottom: 5px;
+  .card-main-title-content-item-badge{
+    padding: 0 10px;
+    height: 32px;
+    background: #007aff;
+    border: 2px solid #ffffff;
+    border-radius: 32px;
+    box-sizing: border-box;
+    overflow: hidden;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ffffff;
+    display: flex;align-items: center;justify-content: center;
+    position: absolute;top: -10px;right: 0;
   }
   .main-card{
-    margin: 34px auto 0;
+    margin: 131px auto 0;
+  }
+
+  .card-main-list-content-item{
+    display: flex;align-items: center;
+    justify-content: space-between;
+    height: 90px;
+  }
+  .card-main-list-content-item-left{
+    font-size: 26px;
+    font-weight: 400;
+    text-align: left;
+    color: #707070;
+    display: flex;align-items: center;
+  }
+  .card-main-list-content-item-left text{
+    margin-right: 35px;
+    font-size: 56px;
+    color: #707070;
+  }
+  .card-main-list-content-item-right text{
+    font-size: 30px;
   }
 }

src/pages/user/index.tsx

@@ -15,7 +15,9 @@ export default () => {
 
 // 头部 | 订单
 const Header = memo(() => {
-    let menu = [{text: "待配布"},{text: "待付款"},{text: "待发货"},{text: "已发货"},{text: "已发货"}]
+	let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" },
+	 { text: "待发货", icon: "icon-daifahuo" }, { text: "已发货", icon: "icon-yifahuo" },
+	  { text: "退款/售后", icon: "icon-a-tuikuanshouhou" }]
 	return (
 		<View className={styles.header}>
 			<View className={`${styles.crad} ${styles['header-card']}`}>
@@ -50,8 +52,9 @@ const Header = memo(()=>{
 							menu.map((item, index) => {
 								return (
 									<View className={styles['card-main-title-content-item']}>
-                                <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652840455&t=6d2fd53931578ef6e213a929a77d059c"/>
+										<Text className={`iconfont ${item.icon}`}></Text>
 										<View>{item.text}</View>
+										<View className={styles['card-main-title-content-item-badge']}>99+</View>
 									</View>
 								)
 							})
@@ -66,21 +69,24 @@ const Header = memo(()=>{
 
 // 功能
 const Main = memo(() => {
-    let menu = [{text: "我的收藏"},{text: "颜色对比"},{text: "分享推广"},{text: "团队邀请"}]
+	let menu = [{ text: "我的收藏", icon: "icon-shoucang" }, { text: "颜色对比", icon: "icon-yanseduibi" },
+	 { text: "分享推广", icon: "icon-fenxiang" }, { text: "团队邀请", icon: "icon-yaoqingtuandui" }]
 	return (
 		<View className={`${styles.crad} ${styles['main-card']}`}>
 			<View className={styles['card-main']}>
-                <View style={{border: "none"}} className={styles['card-main-title']}>
+				<View className={styles['card-main-list-content']}>
-                    <View>功能</View>
-                </View>
-                <View className={styles['card-main-title-content']}>
 					{
 						menu.map((item, index) => {
 							return (
-                          <View key={index} className={styles['card-main-title-content-item']}>
+								<View key={index} className={styles['card-main-list-content-item']}>
-                              <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652840455&t=6d2fd53931578ef6e213a929a77d059c"/>
+									<View className={styles['card-main-list-content-item-left']}>
+										<Text className={`iconfont ${item.icon}`}></Text>
 										<View>{item.text}</View>
 									</View>
+									<View className={styles['card-main-list-content-item-right']}>
+										<Text className="iconfont icon-a-moreback"></Text>
+									</View>
+								</View>
 							)
 						})
 					}

src/styles/iconfont.scss

@@ -76,6 +76,59 @@
   content: "\e64a";
 }
 
+.icon-qingkong:before {
+  content: "\e64c";
+}
+
+.icon-jia:before {
+  content: "\e64d";
+}
+
+.icon-jian:before {
+  content: "\e64e";
+}
+
+.icon-shoucang-pressed:before {
+  content: "\e64f";
+}
+
+.icon-shoucang:before {
+  content: "\e650";
+}
+
+.icon-phone:before {
+  content: "\e651";
+}
+
+.icon-tick:before {
+  content: "\e653";
+}
+
+.icon-a-moreback:before {
+  content: "\e654";
+}
+
+.icon-fenlei:before {
+  content: "\e657";
+}
+
+.icon-bianji:before {
+  content: "\e658";
+}
+
+.icon-wode:before {
+  content: "\e659";
+}
+
+.icon-sort-up-full:before {
+  content: "\ea4c";
+}
+
+.icon-sort-down-full:before {
+  content: "\ea4d";
+}
+
+
 .icon-qingkong:before {
   content: "\e64c";
 }