theluyuan/falvpingtai
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'xuebaoxin' of pplokijuhyg/falvpingtai into master

Browse Source
This commit is contained in:
pplokijuhyg 2019-11-26 09:26:42 +08:00
commit 3f9743bcfe
1 changed files with 91 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/IndexList.vue
View File

@ -1,36 +1,38 @@
<template> <template>
<div class="PersonafFollow"> <div class="PersonafFollow">
<div class="center">舆论之于司法利大于弊还是弊大于利？</div> <div class="center">舆论之于司法利大于弊还是弊大于利？</div>
<div class="answer"> <div class="answer">
<div class="content"> <div class="content">
<img src alt srcset /> <img class="img" src alt srcset />
<p> <p>这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明</p>
这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明
</p>
</div> </div>
<div class="operation"> <div class="operation">
<div> <div>
<img src="../assets/share.png" alt="" srcset=""> <img src="../assets/share.png" alt srcset />
分享 分享
</div> </div>
<div> <div>
<img src="../assets/share.png" alt="" srcset=""> <img src="../assets/share.png" alt srcset />
888评论 888评论
</div> </div>
<div> <div class="more" @click="show = !show">
<div></div>
<div></div>
<div></div>
<div class="eject" v-show="show">
<p>举报</p>
<p>没有帮助</p>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.PersonafFollow { .PersonafFollow {
// padding: 0px 0 39px 0; // padding: 0px 0 39px 0;
// border-bottom: 1px solid #dfdfdf; // border-bottom: 1px solid #dfdfdf;
box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4); box-shadow: 0px 2px 2px 0px rgba(237, 237, 237, 0.4);
width: 690px; width: 690px;
padding: 53px 30px 40px 30px; padding: 53px 30px 40px 30px;
background-color: #fff; background-color: #fff;
@ -77,7 +79,7 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
color: #95998f; color: #95998f;
} }
.content { .content {
> img { .img {
width: 690px; width: 690px;
height: 374px; height: 374px;
background-color: #000; background-color: #000;
@ -95,20 +97,76 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
font-size: 26px; font-size: 26px;
} }
} }
.operation{ .operation {
display: flex;
margin-top: 30px;
> div {
margin-right: 60px;
font-size: 22px;
color: #95998f;
> img {
width: 17px;
height: 17px;
margin-right: 11px;
}
}
.more {
display: flex; display: flex;
margin-top: 30px; width: 33px;
>div{ height: 22px;
margin-right: 60px; justify-content: space-between;
align-items: center;
position: relative;
> div {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #95998f;
}
> div:last-child {
border-radius: 4px;
border: 2px solid rgba(223, 223, 223, 1);
width: 130px;
height: 101px;
position: absolute;
top: 55px;
background-color: #FFFFFF;
left: -50px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 20px;
box-sizing: border-box;
>p{
font-size: 22px; font-size: 22px;
color: #95998F; color: #95998F;
>img{
width: 17px; }
height: 17px; &::after {
margin-right: 11px; position: absolute;
top: -10px;
} left: 58px;
content: "";
width: 0;
height: 0;
border-right: 7px solid transparent;
border-bottom: 10px solid #FFFFFF;
border-left: 7px solid transparent;
}
&::before {
position: absolute;
top: -12px;
left: 55px;
content: "";
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 11px solid rgba(223, 223, 223, 1);
border-left: 10px solid transparent;
}
} }
}
} }
} }
} }
@ -117,7 +175,9 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
export default { export default {
name: "PersonafFollow", name: "PersonafFollow",
data() { data() {
return {}; return {
show:false
};
} }
}; };
</script> </script>