flex add icon

src/app.js

@@ -31,7 +31,7 @@ class App extends Component {
     })
     Taro.loadFontFace({
       family: 'iconfont',
-      source: 'url("//at.alicdn.com/t/font_3429358_r17zty6kva.ttf?t=1653534540687")',
+      source: 'url("//at.alicdn.com/t/font_3429358_afs07k49tq.ttf?t=1653537640226")',
       success () {
         console.log('eeeeeeeeee');
 

src/components/ViewIcon/style.less

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3429358 */
-  src: url("//at.alicdn.com/t/font_3429358_r17zty6kva.ttf?t=1653534540687")
+  src: url("//at.alicdn.com/t/font_3429358_afs07k49tq.ttf?t=1653537640226")
     format("truetype");
 }
 
@@ -12,6 +12,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bianji:before {
+  content: "\e8ac";
+}
+
+.icon-morentouxiang:before {
+  content: "\e65d";
+}
+
 .icon-tongzhigonggao:before {
   content: "\e634";
 }

src/pages/main/index.jsx

@@ -11,25 +11,38 @@ export default (props) => {
   const goDogList = () => {
     console.log('e',);
   }
+  const goSetUser = (e) => {
+    Taro.navigateTo({
+      url: '/pages/setUser/index'
+    })
+  }
   return (
     <View className='user-box'>
 
       <View className='user-box-Card'>
-        <Image />
+        <View className='user-box-Card-useImage'>
+          <ViewIcon icon='morentouxiang' size={50} color='#FBD804' />
+        </View>
+
+        <View className='user-box-Card-NameCard'>
+          <View>姓名：王王王</View>
+          <View>文明养狗，遵纪守法</View>
+        </View>
+        <View className='user-box-Card-right' onClick={goSetUser}>
+          <ViewIcon icon='bianji' size={19} color='#2f2f2f' />
+
+          修改信息
+        </View>
       </View>
 
       <mp-cells ext-class='my-cells' >
         <mp-cell link hover>
           <View className='iconCell'>
-            <ViewIcon icon='dingdan' size={25} />
+            <ViewIcon icon='dingdan' size={22} />
             {/* <Image slot='icon' src={listImage} style='margin-right: 16px;vertical-align: middle;width:28px; height: 30px;' /> */}
-
             <View onClick={goDogList} style='padding-left:5px;width:80%'>申请列表</View>
-
           </View>
-
         </mp-cell>
-
       </mp-cells>
     </View >
   )

src/pages/main/style.less

@@ -1,4 +1,35 @@
 .user-box {
+  width: 100vw;
+  &-Card {
+    width: 100%;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 5px 15px;
+    &-NameCard {
+      margin-left: 20px;
+      > View:nth-child(1) {
+        font-size: 30px;
+        font-weight: 600;
+      }
+      > View:nth-child(2) {
+        color: rgb(175, 175, 175);
+        font-size: 25px;
+      }
+    }
+    &-right {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      font-size: 28px;
+      position: relative;
+      left: 30vw;
+    }
+  }
+  .weui-cell {
+    height: 25px;
+    font-size: 30px;
+  }
   .iconCell {
     display: flex;
     align-items: center;