falvpingtai/src/components/indexfinduser.vue
2019-11-27 09:38:22 +08:00

93 lines
1.8 KiB
Vue

<template>
<div class="indexfinduser">
<div class="left">
<img src="../assets/ad.png" alt class="photo" />
<div class="userinfo">
<div class="username">
<p>法律小知知</p>
<img src="../assets/renzheng.png" alt class="icon" />
</div>
<p class="desc">律师合伙人</p>
<p class="desc1">399 回答·5 文章·12 关注者</p>
</div>
</div>
<div class="right">
<!-- <div class="add"> -->
<img src="../assets/add.png" alt="" class="add">
<!-- </div> -->
<p>关注</p>
</div>
</div>
</template>
<script>
export default {
name: "indexfinduser"
};
</script>
<style lang="scss">
.indexfinduser {
width: 100%;
height: 200px;
background-color: white;
display: flex;
justify-content: space-between;
.left {
display: flex;
.photo {
width: 120px;
height: 126px;
margin-left: 30px;
margin-top: 30px;
}
.userinfo {
margin-top: 33px;
margin-left: 20px;
color: #333333;
.username {
display: flex;
font-size: 32px;
> p {
margin-right: 10px;
}
.icon {
width: 25px;
height: 25px;
}
}
.desc {
margin-top: 28px;
margin-bottom: 22px;
font-size: 28px;
}
.desc1 {
color: #95998f;
font-size: 24px;
}
}
}
.right {
width: 143px;
height: 62px;
background: rgba(247, 247, 247, 1);
border-radius: 10px;
margin: auto 0;
margin-right: 30px;
// text-align: center;
line-height: 62px;
display: flex;
justify-content: center;
color: #6b9147;
font-size: 28px;
.add {
width: 24px;
height: 24px;
margin-top: 19px;
margin-right: 21px;
}
}
}
</style>