✨ feat(我的): 新增我的页面UI

src/components/iconCard/index.module.scss

@@ -3,4 +3,9 @@
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
+  &-name{
+    font-size: 28px;
+    color: #333;
+    margin-top: 16px;
+  }
 }

src/components/iconCard/index.tsx

@@ -19,7 +19,7 @@ const IconCard: FC<PropsType> = (props) => {
   return (
     <View className={styles.iconCard} onClick={handleClick}>
       <IconFont name={iconName} size={72}></IconFont>
-      <View>{title}</View>
+      <View className={styles['iconCard-name']}>{title}</View>
     </View>
   )
 }

src/components/layoutBlock/index.tsx

@@ -11,6 +11,7 @@ interface PropsType {
   circle?: boolean
   children?: ReactNode
   customStyle?: React.CSSProperties
+
 }
 
 const LayoutBlock: FC<PropsType> = (props) => {
@@ -24,6 +25,10 @@ const LayoutBlock: FC<PropsType> = (props) => {
     return classObject
   }
 
-  return <View className={classnames(styles.layoutBlock, getClassName())}>{children}</View>
+  return <View className={classnames(styles.layoutBlock, getClassName())}>
+    
+    {children}
+    
+  </View>
 }
 export default LayoutBlock

src/components/tag/index.module.scss

@@ -16,7 +16,7 @@
     height: 30px;
   }
   &--circle{
-    border-radius: 8PX;
+    border-radius: 10px;
   }
   &--danger {
     background-color: $color_danger;

src/pages/user/index.module.scss

@@ -1,14 +1,12 @@
 .main {
-  width: 100%;
-  min-height: 100vh;
   background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%);
   padding: 24px;
   box-sizing: border-box;
 }
 .userAvatar {
   position: relative;
-  width: 124px;
-  height: 124px;
+  width: 122px;
+  height: 122px;
   border-radius: 50%;
   background-color: #fff;
   overflow: hidden;
@@ -18,13 +16,14 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    height: 30px;
+    height: 31px;
     color: #fff;
     text-align: center;
-    line-height: 30px;
-    font-size: 22px;
+    line-height: 31px;
+    font-size: 20px;
     background-color: rgba($color: #000000, $alpha: 0.33);
   }
+  
 }
 .topBar {
   display: flex;
@@ -44,7 +43,7 @@
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  border-radius: 10px;
+  border-radius: 16px;
   background-color: #f6f6f6;
   margin-top: 20px;
   padding: 15px;
@@ -65,3 +64,27 @@
   font-size: $font_size_medium;
   margin-left: 20px;
 }
+.grid-container{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-column-gap: 32px;
+  grid-row-gap: 32px;
+}
+.layoutTabBar {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.layoutTitle {
+  font-size: 32px;
+  font-weight: 600;
+  color: #333;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  margin-bottom: 20px;
+
+}
+.layoutDescription {
+  font-size: 24px;
+  color: $color_main;
+}

src/pages/user/index.tsx

@@ -8,6 +8,14 @@ import Tag from '@/components/tag'
 import Divider from '@/components/Divider'
 import LayoutBlock from '@/components/layoutBlock'
 import IconCard from '@/components/iconCard'
+import IconFont from '@/components/iconfont'
+
+type IconfontName = Parameters<typeof IconFont>['0']['name']
+type IconCardType = {
+  iconName: IconfontName,
+  name: string,
+  path: string
+}
 
 // 用户信息
 const UserInfo: FC = () => {
@@ -17,7 +25,8 @@ const UserInfo: FC = () => {
     userno: '',
   })
   
-  const feature = [
+
+  const feature: IconCardType[] = [
     {
       iconName: 'icon-lingquseka',
       name: '领取色卡',
@@ -55,7 +64,7 @@ const UserInfo: FC = () => {
     },
   ]
 
-  const fabric = [
+  const fabric: IconCardType[] = [
     {
       iconName: 'icon-yansequyang',
       name: '颜色取样',
@@ -73,7 +82,7 @@ const UserInfo: FC = () => {
     },
   ]
 
-  const statisticAnalysis = [
+  const statisticAnalysis: IconCardType[] = [
     {
       iconName: 'icon-xiaoshou',
       name: '销售',
@@ -124,7 +133,35 @@ const UserInfo: FC = () => {
         </View>
       </LayoutBlock>
       <LayoutBlock circle>
-        {/* <IconCard iconName="" title=""></IconCard> */}
+        <View className={styles.layoutTitle}>功能特色</View>
+        <View className={styles['grid-container']}>
+          {feature.map((item) => {
+            return <IconCard iconName={item.iconName} title={item.name}></IconCard>
+          })}
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle>
+        <View className={styles.layoutTitle}>布料取色</View>
+        <View className={styles['grid-container']}>
+          {fabric.map((item) => {
+            return <IconCard iconName={item.iconName} title={item.name}></IconCard>
+          })}
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle>
+        <View className={styles.layoutTitle}>统计分析</View>
+        <View className={styles['grid-container']}>
+          {statisticAnalysis.map((item) => {
+            return <IconCard iconName={item.iconName} title={item.name}></IconCard>
+          })}
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle>
+        <View className={styles.layoutTabBar}>
+          <View className={styles.layoutTitle}>客户列表</View>
+          <View className={styles.layoutDescription}>查看全部客户 ▶</View>
+        </View>
+        asdfasdfasdfas 
       </LayoutBlock>
     </>
   )

src/styles/common.scss

@@ -41,3 +41,4 @@ $customTabBarHeight: 100px;
   width: 100%;
   height: 100%;
 }
+