个人页面
This commit is contained in:
parent
9f87f69b1a
commit
4eb31ea11f
4
public/normalize.css
vendored
4
public/normalize.css
vendored
@ -12,7 +12,9 @@ html {
|
|||||||
line-height: 1; /* 1 */
|
line-height: 1; /* 1 */
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
}
|
}
|
||||||
|
p{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
/* Sections
|
/* Sections
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
|
|||||||
@ -1,20 +1,122 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
|
<div class="header">
|
||||||
|
<img class="portrait" src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt />
|
||||||
|
<div class="introduce">
|
||||||
|
<p class="name">啦啦啦</p>
|
||||||
|
<div class="follow">
|
||||||
|
<p>
|
||||||
|
<span>0</span>
|
||||||
|
关注我的
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>0</span>
|
||||||
|
我关注的
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="classification">
|
||||||
|
<div class="page">
|
||||||
|
<div class="select">动态</div>
|
||||||
|
<div>回答</div>
|
||||||
|
<div>文章</div>
|
||||||
|
<div>提问</div>
|
||||||
|
<div>收藏</div>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<follow></follow>
|
||||||
|
<answer></answer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box{
|
.box {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
min-height: 100vh;
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.27rem;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0.51rem 0.3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
.portrait {
|
||||||
|
width: 1.26rem;
|
||||||
|
height: 1.26rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 0.31rem;
|
||||||
|
}
|
||||||
|
.introduce {
|
||||||
|
height: 0.9rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.36rem;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 0.29rem;
|
||||||
|
}
|
||||||
|
.follow {
|
||||||
|
display: flex;
|
||||||
|
color: #999;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
|
||||||
|
> p {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 0.69rem;
|
||||||
|
> span {
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
min-width: 0.23rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.classification {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
// min-height: 3rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0.3rem 0.3rem;
|
||||||
|
.page {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
height: 0.62rem;
|
||||||
|
border-bottom: 0.01rem solid #dfdfdf;
|
||||||
|
> div {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.select{
|
||||||
|
border-bottom: 0.04rem solid #6B9147;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import follow from "./components/PersonafFollow"
|
||||||
|
import answer from "./components/PersonalAnswer"
|
||||||
export default {
|
export default {
|
||||||
name:"Personal homepage",
|
name: "Personal homepage",
|
||||||
data(){
|
data() {
|
||||||
return {
|
return {};
|
||||||
|
},
|
||||||
}
|
components:{
|
||||||
}
|
follow,
|
||||||
}
|
answer
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
BIN
src/assets/share.png
Normal file
BIN
src/assets/share.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 490 B |
129
src/components/PersonafFollow.vue
Normal file
129
src/components/PersonafFollow.vue
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<div class="PersonafFollow">
|
||||||
|
<div class="title">
|
||||||
|
<p>收藏了该回答</p>
|
||||||
|
<p>3天前</p>
|
||||||
|
</div>
|
||||||
|
<div class="center">舆论之于司法利大于弊还是弊大于利？</div>
|
||||||
|
<div class="answer">
|
||||||
|
<div class="user">
|
||||||
|
<img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt srcset />
|
||||||
|
<div>
|
||||||
|
<p>啦啦啦</p>
|
||||||
|
<p>律师</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="agree">1345人赞同了该回答</div>
|
||||||
|
<div class="content">
|
||||||
|
<img src alt srcset />
|
||||||
|
<p>
|
||||||
|
这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="operation">
|
||||||
|
<div>
|
||||||
|
<img src="../assets/share.png" alt="" srcset="">
|
||||||
|
分享
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="../assets/share.png" alt="" srcset="">
|
||||||
|
888评论
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.PersonafFollow {
|
||||||
|
padding: 0.49rem 0 0.39rem 0;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.26rem;
|
||||||
|
color: #95998f;
|
||||||
|
margin-bottom: 0.28rem;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
font-size: 0.3rem;
|
||||||
|
color: #000;
|
||||||
|
line-height: 0.46rem;
|
||||||
|
}
|
||||||
|
.answer {
|
||||||
|
.user {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.34rem;
|
||||||
|
> img {
|
||||||
|
width: 0.58rem;
|
||||||
|
height: 0.58rem;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> p {
|
||||||
|
font-size: 0.24rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
> p:last-child {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.agree {
|
||||||
|
margin-top: 0.29rem;
|
||||||
|
font-size: 0.26rem;
|
||||||
|
color: #95998f;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
> img {
|
||||||
|
width: 6.9rem;
|
||||||
|
height: 3.74rem;
|
||||||
|
background-color: #000;
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.39rem;
|
||||||
|
margin-bottom: 0.32rem;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
font-size: 0.26rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.operation{
|
||||||
|
display: flex;
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
>div{
|
||||||
|
margin-right: 0.6rem;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
color: #95998F;
|
||||||
|
>img{
|
||||||
|
width: 0.17rem;
|
||||||
|
height: 0.17rem;
|
||||||
|
margin-right: 0.11rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "PersonafFollow",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
38
src/components/PersonalAnswer.vue
Normal file
38
src/components/PersonalAnswer.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="PersonalAnswer">
|
||||||
|
<div class="title">
|
||||||
|
<p>关注了该问题</p>
|
||||||
|
<p>3天前</p>
|
||||||
|
</div>
|
||||||
|
<div class="center">
|
||||||
|
如何看待正当防卫争议：丽江醉酒男午夜持刀砸门
|
||||||
|
90后女子带刀“反杀”?
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.PersonalAnswer {
|
||||||
|
padding: 0.49rem 0 0.39rem 0;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.26rem;
|
||||||
|
color: #95998f;
|
||||||
|
margin-bottom: 0.28rem;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
font-size: 0.3rem;
|
||||||
|
color: #000;
|
||||||
|
line-height: 0.46rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "PersonalAnswer",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user