change
This commit is contained in:
@@ -2,9 +2,169 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #f3f6fa;
|
||||
}
|
||||
|
||||
.profile-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f3f6fa;
|
||||
color: #15243a;
|
||||
}
|
||||
|
||||
.profile-detail-hero {
|
||||
position: relative;
|
||||
height: 154px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 26px;
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%);
|
||||
}
|
||||
|
||||
.profile-detail-nav,
|
||||
.profile-detail-nav .van-nav-bar {
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%) !important;
|
||||
}
|
||||
|
||||
.profile-detail-nav .van-nav-bar__title,
|
||||
.profile-detail-nav .van-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.profile-detail-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.profile-detail-avatar-wrap {
|
||||
position: relative;
|
||||
flex: 0 0 58px;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.profile-detail-avatar {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgba(255, 255, 255, 0.96);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.profile-detail-online {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: 2px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #3dd0a0;
|
||||
}
|
||||
|
||||
.profile-detail-user-text {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.profile-detail-user-text strong {
|
||||
overflow: hidden;
|
||||
max-width: 240px;
|
||||
margin-bottom: 1px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-detail-body {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 184px);
|
||||
box-sizing: border-box;
|
||||
margin-top: -16px;
|
||||
padding: 24px 16px 40px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: #f3f6fa;
|
||||
}
|
||||
|
||||
.mine-profile-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.mine-detail-card {
|
||||
padding: 15px 16px 3px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(31, 72, 113, 0.06);
|
||||
}
|
||||
|
||||
.mine-detail-card h2 {
|
||||
height: 29px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #e3ebf5;
|
||||
color: #18263a;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.mine-detail-row {
|
||||
display: flex;
|
||||
min-height: 42px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e3ebf5;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.mine-detail-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.mine-detail-row span {
|
||||
flex: 0 0 82px;
|
||||
color: #718198;
|
||||
}
|
||||
|
||||
.mine-detail-row strong {
|
||||
overflow-wrap: anywhere;
|
||||
color: #1c2b41;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="个人信息" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
<member-info :user-id="userId" ref="memberInfoRef"></member-info>
|
||||
<div class="profile-detail-page">
|
||||
<van-nav-bar title="个人信息" class="profile-detail-nav" left-arrow @click-left="historyBack"
|
||||
placeholder fixed :border="false"></van-nav-bar>
|
||||
<header class="profile-detail-hero">
|
||||
<div class="profile-detail-user">
|
||||
<div class="profile-detail-avatar-wrap">
|
||||
<van-image :src="avatar" round width="58" height="58" class="profile-detail-avatar">
|
||||
<van-loading slot="loading" type="spinner" size="18"></van-loading>
|
||||
</van-image>
|
||||
<i class="profile-detail-online"></i>
|
||||
</div>
|
||||
<div class="profile-detail-user-text">
|
||||
<strong>{{ user.username || '-' }}</strong>
|
||||
<span>工号：{{ user.loginname || '-' }}</span>
|
||||
<span>性别：{{ user.sex || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="profile-detail-body">
|
||||
<member-info :user-id="userId" :profile-mode="true" ref="memberInfoRef"></member-info>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("/platform/zhghh5/staffmanage/member/common/mobileMemberInfo.js"){}#-->
|
||||
@@ -16,12 +176,23 @@ layout("/layouts/platform_h5.html"){
|
||||
userId: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user || {}
|
||||
},
|
||||
avatar() {
|
||||
if (this.user.sex === "男" || !this.user.sex) {
|
||||
return "/assets/platform/img/home/avatar_boy.png"
|
||||
}
|
||||
return "/assets/platform/img/home/avatar_girl.png"
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"member-info": MOBILE_MEMBER_INFO
|
||||
},
|
||||
methods: {
|
||||
viewInfo() {
|
||||
this.userId = this.$store.state.user.id
|
||||
this.userId = this.user.id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
Reference in New Issue
Block a user