Files
2024-10-31 14:34:57 +08:00

87 lines
1.6 KiB
Vue

<template>
<div class="userInfo">
<div class="user-info">
<img src="./img/user-img.png" alt="" class="user-img">
<div class="user-name">
<h3>卓作旺<img src="./img/ic-man@2x.png" alt=""></h3>
<p>出差ing</p>
</div>
</div>
<div class="btn">添加联系人为好友</div>
<div class="btn bg-fff">发消息</div>
</div>
</template>
<script>
export default {
name: "userInfo",
data() {
return {
};
},
onShow() {
document.title = '个人信息'
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.userInfo {
height: 100vh;
background-color: #F5F5F5;
.user-info {
display: flex;
padding: 40px 32px;
background-color: #fff;
margin-bottom: 40px;
.user-img {
width: 120px;
height: 120px;
margin-right: 24px;
}
.user-name {
margin-top: 6px;
h3 {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 36px;
color: #333;
line-height: 50px;
margin-bottom: 18px;
img {
width: 24px;
height: 24px;
margin-left: 8px;
}
}
p {
font-family: PingFangSC-Regular;
font-size: 28px;
color: #999;
line-height: 40px;
}
}
}
.btn {
width: calc(100% - 64px);
margin: 0 0 32px 32px;
height: 112px;
line-height: 112px;
text-align: center;
background: #3975C6;
border-radius: 8px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 32px;
color: #FFF;
}
.bg-fff {
background-color: #fff;
color: #000;
}
}
</style>