个人页面
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 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
|
||||
@ -1,20 +1,122 @@
|
||||
<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 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>
|
||||
<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>
|
||||
<script>
|
||||
import follow from "./components/PersonafFollow"
|
||||
import answer from "./components/PersonalAnswer"
|
||||
export default {
|
||||
name:"Personal homepage",
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
name: "Personal homepage",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components:{
|
||||
follow,
|
||||
answer
|
||||
}
|
||||
};
|
||||
</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