Sfoglia il codice sorgente

我的页面样式

yanghao 3 settimane fa
parent
commit
b2b7a31063

+ 1 - 1
locale/zh-Hans.json

@@ -163,7 +163,7 @@
   "user.modifyPhoneAndPassword": "修改手机和密码",
   "user.aboutUs": "关于我们",
   "user.currentVersion": "当前版本",
-  "user.logout": "退出",
+  "user.logout": "退出登录",
   "user.userInfo": "用户信息",
   "user.updatePassword": "修改密码",
   "user.oldPassword": "旧密码",

+ 1 - 1
locale/zh-Hant.json

@@ -107,7 +107,7 @@
   "user.modifyPhoneAndPassword": "修改手机和密码",
   "user.aboutUs": "关于我们",
   "user.currentVersion": "当前版本",
-  "user.logout": "退出",
+  "user.logout": "退出登录",
   "user.userInfo": "用户信息",
   "user.updatePassword": "修改密码",
   "user.oldPassword": "旧密码",

+ 12 - 3
pages/entry/index.vue

@@ -8,7 +8,17 @@
 
         <view class="profile-row">
           <view class="avatar-wrap">
-            <text class="avatar-text">{{ avatarText }}</text>
+            <image
+              style="
+                width: 50px;
+                height: 50px;
+                background-color: transparent;
+                border-radius: 50%;
+              "
+              :src="
+                userInfo?.avatar ? userInfo?.avatar : '/static/user/avatar.png'
+              "
+            ></image>
           </view>
           <view class="profile-main">
             <view class="greeting">{{ greetingText }},{{ displayName }}</view>
@@ -498,8 +508,7 @@ onShow(() => {
   width: 82rpx;
   height: 82rpx;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.3);
-  border: 2rpx solid rgba(255, 255, 255, 0.7);
+
   display: flex;
   align-items: center;
   justify-content: center;

+ 75 - 18
pages/user/index.vue

@@ -5,30 +5,63 @@
       <view class="nav-title">
         {{ $t("app.user") }}
       </view>
+
+      <view class="nav-icon" style="position: absolute; right: 20px">
+        <uni-icons type="gear" size="24" color="#fff"></uni-icons>
+      </view>
     </view>
     <view class="content-section">
       <!--顶部个人信息栏-->
       <view class="user-info flex-col">
-        <view class="flex-row">
+        <view class="flex-row" style="padding-bottom: 10px">
           <image
             class="avatar"
             :src="
-              userInfo?.avatar ? userInfo?.avatar : '/static/common/avata.gif'
+              userInfo?.avatar ? userInfo?.avatar : '/static/user/avatar.png'
             "
           ></image>
           <view class="info flex-col align-center justify-start">
-            <view class="text flex-row">
-              <span class="span">{{ $t("user.username") }}:</span
-              >{{ userInfo?.nickname }}
+            <view class="text flex-row" style="align-items: center; gap: 10px">
+              <text class="nickname">{{ userInfo?.nickname }}</text>
+              <text
+                style="
+                  background-color: #e6f2fd;
+                  padding: 2px 10px;
+                  color: #1755dc;
+                  border-radius: 20px;
+                "
+                >{{ userInfo.username }}</text
+              >
+            </view>
+            <view
+              class="text flex-row"
+              style="
+                margin-top: 10px;
+                display: flex;
+                align-items: center;
+                gap: 5px;
+              "
+            >
+              <uni-icons type="phone-filled" size="16" color="#656f85" />
+              <text>{{ userInfo?.mobile }}</text>
             </view>
-            <view class="text flex-row">
-              <span class="span">{{ $t("user.phone") }}:</span
-              >{{ userInfo?.mobile }}
+            <!-- 项目部 -->
+            <view
+              class="text flex-row"
+              style="
+                margin-top: 10px;
+                display: flex;
+                align-items: center;
+                gap: 5px;
+              "
+            >
+              <uni-icons type="staff" size="16" color="#656f85" />
+              <text>{{ userInfo?.dept.name }}</text>
             </view>
           </view>
         </view>
 
-        <view class="info-list flex-row w-full justify-between items-center">
+        <!-- <view class="info-list flex-row w-full justify-between items-center">
           <view class="flex-col justify-center items-center list-item">
             <text class="info-text">6</text>
             <text class="info-tip">待处理</text>
@@ -43,7 +76,7 @@
             <text class="info-text">6</text>
             <text class="info-tip">导出报表</text>
           </view>
-        </view>
+        </view> -->
       </view>
       <!-- 菜单 -->
       <view class="menu-list">
@@ -83,7 +116,7 @@
           </view>
         </view>
 
-        <view
+        <!-- <view
           class="card-cell flex-row align-center justify-between"
           @click="logout"
         >
@@ -96,8 +129,27 @@
             </view>
             <uni-icons type="right" :color="'#CACCCF'" size="15" />
           </view>
-        </view>
+        </view> -->
       </view>
+      <button
+        type="warn"
+        plain="true"
+        @click="logout"
+        style="
+          background-color: #fff;
+          border: 0.5px solid #f2f4f7;
+          margin-top: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        "
+      >
+        <image
+          style="width: 22px; height: 22px; padding-right: 8px"
+          src="/static/user/logout.png"
+        ></image>
+        <text>{{ $t("user.logout") }}</text>
+      </button>
     </view>
   </view>
 </template>
@@ -154,9 +206,9 @@ const logout = () => {
 const userInfo = ref({});
 const version = ref("");
 onMounted(async () => {
+  userInfo.value = (await getLoginUserInfo()).data;
   const wgtInfo = await getCurrentWgtInfo();
   version.value = wgtInfo?.version || "";
-  userInfo.value = (await getLoginUserInfo()).data;
 
   uni.$once("updateUserInfo", async () => {
     userInfo.value = (await getLoginUserInfo()).data;
@@ -178,7 +230,7 @@ onMounted(async () => {
 }
 
 .page-back {
-  background-image: url("/static/user/bg.png");
+  background-image: url("/static/entry/bg.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   position: fixed;
@@ -221,7 +273,7 @@ onMounted(async () => {
 
 .user-info {
   width: 100%;
-  height: 180px;
+  height: 120px;
   padding: 14px 20px;
   box-sizing: border-box;
   background: #ffffff;
@@ -230,8 +282,8 @@ onMounted(async () => {
   color: #333333;
 
   .avatar {
-    width: 52px;
-    height: 52px;
+    width: 72px;
+    height: 72px;
     border-radius: 50%;
     margin-right: 18px;
   }
@@ -242,7 +294,7 @@ onMounted(async () => {
 }
 
 .info-list {
-  margin-top: 50rpx;
+  // margin-top: 50rpx;
   border-top: 1px solid #e2e6ee;
   padding-top: 10px;
   padding-right: 20px;
@@ -277,6 +329,11 @@ onMounted(async () => {
   }
 }
 
+.nickname {
+  font-size: 20px;
+  font-weight: bold;
+}
+
 .menu-list {
   height: 274px;
   background: #ffffff;

BIN
static/user/avatar.png


BIN
static/user/logout.png