syy

iconfont.wxss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3264694 */
-  src: url('//at.alicdn.com/t/c/font_3264694_vvd9ofl6l5.woff2?t=1669682527309') format('woff2'),
-       url('//at.alicdn.com/t/c/font_3264694_vvd9ofl6l5.woff?t=1669682527309') format('woff'),
-       url('//at.alicdn.com/t/c/font_3264694_vvd9ofl6l5.ttf?t=1669682527309') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_3264694_gxhod5vh9pc.woff2?t=1672883976549') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3264694_gxhod5vh9pc.woff?t=1672883976549') format('woff'),
+       url('//at.alicdn.com/t/c/font_3264694_gxhod5vh9pc.ttf?t=1672883976549') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-yunongtongqingchuhuancun:before {
+  content: "\e638";
+}
+
+.icon-tongxunlu:before {
+  content: "\e670";
+}
+
+.icon-guanyuwomen:before {
+  content: "\e69a";
+}
+
+.icon-wnt_qingchuhuancun:before {
+  content: "\e644";
+}
+
 .icon-wodetijiao:before {
   content: "\e6d3";
 }

pages/me/me.wxml

@@ -1,15 +1,46 @@
 <view class="container_c">
-
-
+<view class="top_con">
   <image src="{{userInfo.avatarUrl}}" class="wd_img"></image>
-
-  <div type="userNickName" lang="zh_CN" class="wd_txt">
+  <view class="top_txt">
+    <!-- <div type="userNickName" lang="zh_CN" class="wd_txt">
     {{userInfo.nickName}}
-  </div>
-
-
-  <button wx:if="{{!isBindSuccess}}" bindtap="init_userInfo" class="wd_btn">绑定账号</button>
-  <label wx:if="{{isBindSuccess}}">账号绑定成功</label>
+  </div> -->
+  <text class="name">账号的名字</text>
+  <text>技术部</text>
+  </view>
+  <image src="../images/me.png" class="me_bg"/>
+</view>
+<view class="me_tit">
+  <view class="tit_two">
+    <image src="../images/metit.png" class="metit" />
+      <view class="meline">
+        <i class="iconfont icon-tongxunlu"></i>
+        <text>通讯录</text>
+        <i class="iconfont icon-xiangyou"></i>
+      </view>
+      <view class="meline">
+        <i class="iconfont icon-yunongtongqingchuhuancun"></i>
+        <text>清除缓存</text>
+        <i class="iconfont icon-xiangyou"></i>
+      </view>
+  </view>
+  <view class="tit_one">
+    <image src="../images/metit1.png" class="metit" />
+    <view class="meline">
+    <i class="iconfont icon-guanyuwomen"></i>
+        <text>关于我们</text>
+        <i class="iconfont icon-xiangyou"></i>
+      </view>
+  </view>
+</view>
+
+ 
+
+  
+
+
+  <!-- <button wx:if="{{!isBindSuccess}}" bindtap="init_userInfo" class="wd_btn">绑定账号</button>
+  <label wx:if="{{isBindSuccess}}">账号绑定成功</label> -->
 
 
 

pages/me/me.wxss

@@ -4,19 +4,34 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding-top: 5rem;
+}
+.top_con{
+  display: flex;
+  flex-direction: row;
+  padding: 6% 8%;
+  width: 84%;
+  align-items: center;
+  background-color: #f94b0e;
+  position: relative;
+}
+.me_bg{
+  position: absolute;
+  bottom: -90rpx;
+  width: 100%;
+  left: 0px;
+  height: 100rpx;
 }
 .wd_img{
-  width: 200rpx;
-  height: 200rpx;
+  width: 160rpx;
+  height: 160rpx;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 12rpx solid #f6f6f6c7;
+  border: 8rpx solid #f6f6f6c7;
   background: rgb(255, 201, 164);
-  margin-bottom: 20rpx;
+ margin-right: 30rpx;
 }
 .wd_img img{
   display: flex;
@@ -45,4 +60,76 @@
   height: 100rpx;
   line-height: 100rpx;
   padding-left: 20rpx;
+}
+.top_txt{
+  display: flex;
+  flex-direction: column;
+}
+.top_txt{
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  font-size: 32rpx;
+}
+.top_txt .name{
+  font-size: 38rpx;
+  font-weight: 500;
+  padding-bottom: 15rpx;
+}
+.me_tit{
+  margin-top: 40rpx;
+  margin:150rpx 30rpx 0rpx 30rpx;
+  
+  width: 92%;
+  display: flex;
+  flex-direction: column;
+}
+.tit_two{
+  position: relative;
+  width: 100%;
+  height: 240rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.tit_two .metit{
+  width: 100%;
+  height: 240rpx;
+  display: block;
+  position: absolute;
+  z-index: -1;
+}
+.meline{
+  height: 120rpx;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  padding: 0px 30rpx;
+  font-size: 32rpx;
+  color: rgb(88, 88, 88);
+  font-weight: 500;
+}
+.meline .iconfont{
+  font-size: 50rpx;
+  color: #f94b0e;
+  margin-right: 20rpx;
+}
+.meline .icon-xiangyou{
+  margin-left: auto;
+  color:rgb(207, 207, 207);
+    font-size: 40rpx;
+}
+.tit_one{
+  position: relative;
+  width: 100%;
+  height: 120rpx;
+  justify-content: center;
+  margin-top: 30rpx;
+}
+.tit_one .metit{
+  width: 100%;
+  height: 120rpx;
+  display: block;
+  position: absolute;
+  z-index: -1;
 }