4 changed files with 126 additions and 0 deletions
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 612 B |
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,126 @@ |
|||||
|
<template> |
||||
|
<div class='pages'> |
||||
|
<div class="heard"> |
||||
|
<div class="my_top"></div> |
||||
|
<!-- <van-avatar size="large" src="../../../assets/logo.png"></van-avatar> --> |
||||
|
|
||||
|
<div class="my_info"> |
||||
|
<div class="my_left"> |
||||
|
<img src="@/assets/images/logo.png" class="my_img"> |
||||
|
</div> |
||||
|
<div class="my_right"> |
||||
|
<div class="mmm"> |
||||
|
<div class="my_name">李某</div> |
||||
|
<div class="intro">|某某社区</div> |
||||
|
</div> |
||||
|
<div class="details">表堕书、朕津单位-忆跌科技、获建单位-亿联星、社区白组织-志硕生修队</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="my_card"> |
||||
|
<div class="my_zzz"> |
||||
|
<div class="z_left"><img src="@/assets/images/icon/password.png" class="z_img"> |
||||
|
修改密码</div> |
||||
|
<div class="z_right"><img src="@/assets/images/icon/right.png" class="z_img"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
created() { }, |
||||
|
methods: { |
||||
|
}, |
||||
|
components: {}, |
||||
|
computed: {}, |
||||
|
watch: {} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='less'> |
||||
|
.pages { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
background-color: #f7f7f7; |
||||
|
}.heard { |
||||
|
width: 100%; |
||||
|
height: 35vh; |
||||
|
background: linear-gradient(to bottom, |
||||
|
#87BBFF 0%, |
||||
|
rgb(255, 255, 255) 100%); |
||||
|
} |
||||
|
|
||||
|
.my_top { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding-top: 30px; |
||||
|
} |
||||
|
.my_img{ |
||||
|
width:60px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.my_info{ |
||||
|
display: flex; |
||||
|
margin: 20px 10px 0; |
||||
|
} |
||||
|
.my_right{ |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.mmm{ |
||||
|
display: flex; |
||||
|
|
||||
|
} |
||||
|
.my_name{ |
||||
|
font-size: 18px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
.intro{ |
||||
|
opacity: 80%; |
||||
|
// margin-top: 14px; |
||||
|
} |
||||
|
.details{ |
||||
|
margin-top: 8px; |
||||
|
font-size: 13px; |
||||
|
opacity: 50%; |
||||
|
} |
||||
|
|
||||
|
.my_card{ |
||||
|
background: #ffffff; |
||||
|
width: 95%; |
||||
|
height: 50px; |
||||
|
border-radius: 10px; |
||||
|
margin: 20px 10px 0; |
||||
|
} |
||||
|
.my_zzz{ |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.z_img{ |
||||
|
width: 20px; |
||||
|
margin-right: 10px; |
||||
|
|
||||
|
} |
||||
|
.z_left { |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
align-items: center; |
||||
|
margin-left: 10px; |
||||
|
|
||||
|
} |
||||
|
.z_right{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-left: auto; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue