首页
This commit is contained in:
parent
7d9a179671
commit
2d2ebda95b
123
src/components/IndexList.vue
Normal file
123
src/components/IndexList.vue
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div class="PersonafFollow">
|
||||||
|
|
||||||
|
<div class="center">舆论之于司法利大于弊还是弊大于利？</div>
|
||||||
|
<div class="answer">
|
||||||
|
|
||||||
|
<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: 0px 0 39px 0;
|
||||||
|
// border-bottom: 1px solid #dfdfdf;
|
||||||
|
box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
|
||||||
|
width: 690px;
|
||||||
|
padding: 53px 30px 40px 30px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #95998f;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #000;
|
||||||
|
line-height: 46px;
|
||||||
|
}
|
||||||
|
.answer {
|
||||||
|
.user {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
> img {
|
||||||
|
width: 58px;
|
||||||
|
height: 58px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
> p:last-child {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.agree {
|
||||||
|
margin-top: 29px;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #95998f;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
> img {
|
||||||
|
width: 690px;
|
||||||
|
height: 374px;
|
||||||
|
background-color: #000;
|
||||||
|
display: block;
|
||||||
|
margin-top: 39px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.operation{
|
||||||
|
display: flex;
|
||||||
|
margin-top: 30px;
|
||||||
|
>div{
|
||||||
|
margin-right: 60px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #95998F;
|
||||||
|
>img{
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
margin-right: 11px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "PersonafFollow",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="box">
|
<div class="box">
|
||||||
<van-popup v-model="show" position="top" :style="{ height: '2.82rem' }" >
|
<van-popup v-model="show" position="top" :style="{ height: '2.82rem' }" >
|
||||||
<div style="height:0.88rem"></div>
|
<div style="height:0.88rem"></div>
|
||||||
<div class="list">
|
<div class="mnuelist">
|
||||||
<div>首页</div>
|
<div>首页</div>
|
||||||
<div>我的主页</div>
|
<div>我的主页</div>
|
||||||
<div>退出登录</div>
|
<div>退出登录</div>
|
||||||
@ -12,7 +12,7 @@
|
|||||||
<img class="logo" src alt srcset />
|
<img class="logo" src alt srcset />
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<img src alt />
|
<img src alt />
|
||||||
<input type="text" />
|
<input type="text" placeholder="搜索" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mnue" @click="isshow">
|
<div class="mnue" @click="isshow">
|
||||||
<div></div>
|
<div></div>
|
||||||
@ -20,6 +20,12 @@
|
|||||||
<div></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<list></list>
|
||||||
|
<list></list>
|
||||||
|
<list></list>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -83,7 +89,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.list{
|
.mnuelist{
|
||||||
padding:26px;
|
padding:26px;
|
||||||
height: 194px;
|
height: 194px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -93,9 +99,14 @@
|
|||||||
color: #333;
|
color: #333;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
.list{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import list from "./components/IndexList"
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
data() {
|
data() {
|
||||||
@ -107,6 +118,9 @@ export default {
|
|||||||
isshow(){
|
isshow(){
|
||||||
this.show = !this.show
|
this.show = !this.show
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components:{
|
||||||
|
list
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user