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