'我的'UI

weapp/images/avatar.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1673618443252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2117" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512.3 106c-223.6 0-406.7 183-406.7 406.7s183 406.6 406.7 406.6 406.6-183 406.6-406.7C919 289 736 106 512.3 106z m10.2 122c155 0 155 116.9 155 183s-61 188.1-155 190.6c-91.5 0-155-122-155-190.6 0-66.1 0-183 155-183z m-10.2 668.4c-116.9 0-223.7-53.4-294.8-137.2 10.2-25.4 22.9-53.4 40.7-68.6 38.1-30.5 152.5-81.3 152.5-81.3l71.2 137.2 12.7-33-20.4-40.7 40.7-40.7 40.7 40.7-17.9 43.2 10.2 33.1 73.7-134.7s114.4 50.8 152.5 81.3c17.8 12.7 30.5 35.6 38.1 55.9-68.6 88.9-177.9 144.8-299.9 144.8z m0 0" p-id="2118" fill="#707070"></path></svg>

weapp/images/email.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#1873EB" d="M10 0A10 10 0 1 0 10 20A10 10 0 1 0 10 0Z"/>
+    <path d="M7.99662269,0 L2.00337731,0 C0.898739927,0 0,0.831268484 0,1.85327198 L0,6.14663667 C0,7.16873152 0.898838679,8 2.00337731,8 L7.99652394,8 C9.10126007,8 10,7.16873152 10,6.14672802 L10,1.85336333 C10,0.831268484 9.10135882,0 7.99662269,0 Z M6.92200585,3.37540678 L9.02680123,1.28252852 C9.13572444,1.45006109 9.20218439,1.64390194 9.20218439,1.85336333 L9.20218439,5.31664706 L6.92200585,3.37540678 Z M7.99662269,0.738093335 C8.14317033,0.738093335 8.28191657,0.765954531 8.41197267,0.810441098 L4.99990125,4.20302134 L1.58812609,0.810441098 C1.71818218,0.765954531 1.85692842,0.738093335 2.00337731,0.738093335 L7.99662269,0.738093335 Z M0.973297519,1.28252852 L3.07799415,3.37540678 L0.797914362,5.31664706 L0.797914362,1.85336333 C0.797914362,1.64399329 0.864374309,1.45006109 0.973297519,1.28252852 L0.973297519,1.28252852 Z M7.99662269,7.26190666 L2.00337731,7.26190666 C1.39714015,7.26190666 0.899036183,6.84453681 0.815097172,6.30476038 L3.62122768,3.91563995 L4.9998025,5.28650216 L6.37857481,3.91563995 L9.18490283,6.30476038 C9.10096382,6.84453681 8.6027611,7.26190666 7.99662269,7.26190666 Z" transform="translate(5 6)" fill="#FFF" fill-rule="nonzero"/>
+  </g>
+</svg>

weapp/images/phone.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#1873EB" d="M10 0A10 10 0 1 0 10 20A10 10 0 1 0 10 0Z"/>
+    <path d="M6.66666667,0 C7.40303031,0 8,0.738749995 8,1.65000001 L8,10.35 C8,11.26125 7.40303031,12 6.66666667,12 L1.33333333,12 C0.596969693,12 0,11.26125 0,10.35 L0,1.65000001 C0,0.738750009 0.596969693,0 1.33333333,0 L6.66666667,0 Z M5.59090909,10 L3.40909091,10 C3.18315624,10 3,10.2238576 3,10.5 C3,10.7761424 3.18315624,11 3.40909091,11 L5.59090909,11 C5.81684376,11 6,10.7761424 6,10.5 C6,10.2238576 5.81684376,10 5.59090909,10 Z M6.44444445,1 L1.55555555,1 C1.40821306,1 1.26690533,1.08428547 1.16271845,1.23431458 C1.05853157,1.38434368 1,1.58782682 1,1.80000001 L1,9 L7,9 L7,1.80000001 C7,1.58782682 6.94146843,1.38434368 6.83728155,1.23431458 C6.73309467,1.08428547 6.59178694,1 6.44444445,1 L6.44444445,1 Z" transform="translate(6 4)" fill="#FFF" fill-rule="nonzero"/>
+  </g>
+</svg>

weapp/package/basic/basic.wxml

@@ -1,7 +1,7 @@
 <!--package/basic/basic.wxml-->
 <view class="page">
   <view class='header-item-container'>
-    <image class='logo' src='../../images/avatar.svg' />
+    <image class='logo' src='../../images/avatar.png' />
     <view>
       <text class='userName'>{{userInfo.name || '--'}}</text>
     </view>

weapp/pages/index/index.js

@@ -32,7 +32,7 @@ Page({
         callout: {
           content: `${p.name}\n今日巡检：${todayCount}次`,
           padding: 10,
-          display: this.data.isShowCallout ? 'ALWAYS' : 'ALWAYS',
+          display: this.data.isShowCallout ? 'ALWAYS' : 'BYCLICK',
           borderColor: '#1684FF',
           borderWidth: 1,
         },

weapp/pages/myInfo/myInfo.wxml

@@ -1,25 +1,51 @@
 <!-- pages/myInfo/myInfo.wxml -->
+<view class="bg"></view>
 <view class='box'>
-  <view class='header-item-container'>
+  <view class='header-item-container' style="background-image: url('/images/card_bg.png')">
-    <image class='logo' src='../../images/avatar.svg' />
+    <view class="info-box">
-    <view>
+      <image class='avatar' src='../../images/avatar.png' />
-      <text class='userName'>{{userInfo.name}}</text>
+      <view class="info">
+        <view class='userName over-ellipsis'>
+          {{userInfo.name}}
+        </view>
+        <view class='contact'>
+          <image class='icon' src='../../images/phone.svg' />
+          <view class="text over-ellipsis">
+            {{userInfo.phone}}
+          </view>
+        </view>
+        <view class='contact'>
+          <image class='icon' src='../../images/email.svg' />
+          <view class="text over-ellipsis">
+            {{userInfo.email || '--'}}
+          </view>
+        </view>
+      </view>
+      <view class="post over-ellipsis">
+        {{userInfo.post || '--'}}
+      </view>
+    </view>
+    <view class="dept-box">
+      <view class='dept'>
+        {{userInfo.deptName}}
+      </view>
     </view>
   </view>
-
   <view class='body-container'>
     <view class='body-item' bindtap="bindClick">
-      <view class='body-info'>基本信息</view>
+      <view class='body-info'>
+        基本信息
+      </view>
       <image class="right" src="/images/right.svg"></image>
     </view>
-
     <!-- <view class='body-item'>
       <view class='body-info'>通知消息</view>
       <image class="right" src="/images/right.svg"></image>
     </view> -->
   </view>
-
   <view class='foot-container'>
-    <view class='foot-item' bindtap='logout'>退出登录</view>
+    <view class='foot-item' bindtap='logout'>
+      退出登录
+    </view>
   </view>
 </view>

weapp/pages/myInfo/myInfo.wxss

@@ -4,6 +4,24 @@ page {
   background-color: #F7F7FA;
 }
 
+.over-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  white-space: nowrap;
+}
+
+.bg {
+  width: 100%;
+  height: 160px;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  background-image: linear-gradient(180deg, #1979ff 0%, #4E87FF 100%);
+  border-radius: 0 0 50% 50%;
+  z-index: -1;
+}
+
 /* 容器 */
 .box {
   padding: 30rpx;
@@ -12,19 +30,33 @@ page {
 
 .header-item-container {
   width: 100%;
-  height: 180rpx;
+  height: 165px;
-  background: rgb(255, 255, 255);
   border-radius: 10rpx;
-  flex-direction: row;
+  background-size: 100% 165px;
+}
+
+.info-box {
+  width: 100%;
+  height: 127px;
   display: flex;
-  justify-content: start;
+  justify-content: space-between;
-  align-items: center;
 }
 
-.logo {
+.avatar {
-  width: 120rpx;
+  width: 54px;
-  height: 120rpx;
+  min-width: 54px;
-  padding: 30rpx;
+  height: 54px;
+  padding: 16px;
+  margin-bottom: 30px;
+}
+
+.info {
+  height: 100%;
+  min-width: 55%;
+  max-width: 60%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
 }
 
 .userName {
@@ -32,6 +64,51 @@ page {
   font-weight: 600;
 }
 
+.contact {
+  display: flex;
+  align-items: center;
+  min-width: 190px;
+}
+
+.contact .icon {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+}
+
+.contact .text {
+  min-width: 170px;
+  margin-left: 8px;
+  font-size: 14px;
+  color: #00000080;
+}
+
+.post {
+  border: 1px solid #006BE3;
+  border-radius: 100px 0 0 100px;
+  min-width: 30px;
+  max-width: 60px;
+  height: 25px;
+  line-height: 25px;
+  color: #006BE3;
+  font-size: 14px;
+  padding: 0 7px;
+  margin-top: 20px;
+}
+
+.dept-box {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.dept-box .dept {
+  font-size: 14px;
+  color: #FFFFFF;
+  margin-right: 10px;
+}
+
 .company {
   font-size: 28rpx;
   font-family: "PingFang SC";
@@ -72,23 +149,20 @@ page {
 }
 
 .foot-container {
-  width: 100%;
+  position: absolute;
-  background: rgb(255, 255, 255);
+  bottom: 50px;
-  border-radius: 10rpx;
+  width: 343px;
-  flex-direction: column;
+  height: 42px;
-  display: flex;
+  border: 1px solid #006BE3;
-  border: 1px #FFFFFF;
+  border-radius: 24px;
 }
 
 .foot-item {
-  color: rgb(0, 0, 0);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 30rpx;
-  font-size: 32rpx;
-  font-family: "PingFang SC";
   font-weight: 600;
+  font-size: 16px;
+  color: #006BE3;
+  text-align: center;
+  line-height: 42px;
 }
 
 .right {