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

完成

Browse Source
This commit is contained in:
pplokijuhyg 2019-11-29 16:28:30 +08:00
parent 1b00733af6
commit 4ad9b00142
5 changed files with 173 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/IndexArticleDetail.vue
View File

@ -2,67 +2,67 @@
<div style="padding-top:0.88rem"> <div style="padding-top:0.88rem">
<heads></heads> <heads></heads>
<div class="line"></div> <div class="line"></div>
<p class="question">有哪些击中你内心阴暗处的句子？</p> <p class="question">{{list.data.title}}</p>
<div v-for="(item,index) in huida" :key="index">
<div class="line"></div> <div class="line"></div>
<follow :indexs="0"></follow> <follow
<div class="line"></div> @pinglu="pinglu"
<follow :indexs="1"></follow> :sid="item.id"
:indexs="index"
:userimg="'http://lawpro.earnest.pro' + item.avatar"
:nickname="item.nickname"
:text="item.articlecontent"
:comment="item.comment"
:num="item.islike"
></follow>
</div>
<!-- <div class="line"></div>
<follow :indexs="1"></follow>-->
<div class="line"></div> <div class="line"></div>
<p class="title">相关推荐</p> <p class="title">相关推荐</p>
<privates></privates> <!-- <privates></privates> -->
<articles></articles> <articles
v-for="(item,index) in list.correlation"
:key="index"
:title="item.title"
:img="'http://lawpro.earnest.pro' +item.img"
:sid="item.id"
></articles>
<articles></articles> <!-- <articles></articles> -->
<p class="title" @click="show = true">热门推荐</p> <p class="title" @click="show = true">热门推荐</p>
<privatets></privatets> <!-- <privatets></privatets> -->
<articles></articles> <privates
<articles></articles> v-for="(item,index) in list.correlation"
:key="index"
:title="item.title"
:sid="item.id"
></privates>
<!-- <articles></articles> -->
<!-- <articles></articles> -->
<van-popup v-model="show" position="bottom" :style="{ height: '100%' }" class="linshi"> <van-popup v-model="show" position="bottom" :style="{ height: '100%' }" class="linshi">
<div class="top"> <div class="top">
<p class="tiao">389条评论</p> <p class="tiao">{{plist.length}}条评论</p>
<p class="qie"> <p class="qie">
<img class="qiehuan" src="./assets/qiehuan.png" alt srcset /> 切换为时间排序 <img class="qiehuan" src="./assets/qiehuan.png" alt srcset /> 切换为时间排序
</p> </p>
<img class="quit" src="./assets/quit.png" alt @click="show = !show" /> <img class="quit" src="./assets/quit.png" alt @click="show = !show" />
</div> </div>
<div class="bodys"> <div class="bodys">
<comment></comment> <comment v-for="(item,index) in plist" :key="index"></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
<comment></comment>
</div> </div>
<div class="reply"> <div class="reply">
<img @click="biaoqing = !biaoqing" src="./assets/baoqing.png" alt srcset /> <img @click="biaoqing = !biaoqing" src="./assets/baoqing.png" alt srcset />
<textarea placeholder="写下你的评论..." v-model="content"></textarea> <textarea placeholder="写下你的评论..." v-model="content"></textarea>
<p>发布</p> <p @click="pfb">发布</p>
<div v-show="biaoqing"><Emotion @emotion="handleEmotion" :height="4" ></Emotion></div> <div v-show="biaoqing">
<Emotion @emotion="handleEmotion" :height="4"></Emotion>
</div>
</div> </div>
</van-popup> </van-popup>
</div> </div>
@ -72,32 +72,90 @@
import follow from "./components/indexFollow"; import follow from "./components/indexFollow";
import privates from "./components/indexprivate"; import privates from "./components/indexprivate";
import articles from "./components/indexarticle"; import articles from "./components/indexarticle";
import privatets from "./components/indexprivatet"; // import privatets from "./components/indexprivatet";
import heads from "./components/indexhead"; import heads from "./components/indexhead";
import comment from "./components/indexcomment"; import comment from "./components/indexcomment";
import Emotion from './components/Emotion/index' import Emotion from "./components/Emotion/index";
export default { export default {
name: "IndexArticleDetail", name: "IndexArticleDetail",
data() { data() {
return { return {
show: false, show: false,
content:"", content: "",
biaoqing:false biaoqing: false,
list: {},
huida: [],
plist:[],
pid:0
}; };
}, },
components: { components: {
follow, follow,
privates, privates,
articles, articles,
privatets, // privatets,
heads, heads,
comment, comment,
Emotion Emotion
}, },
methods:{ methods: {
handleEmotion (i) { pfb(){
this.content += i window.console.log(this.content)
this.axios.post("http://lawpro.earnest.pro/api/login_main/appendComment",{
text:this.content,
token:localStorage.getItem('token'),
type_id:this.pid,
type:3
}).then((res)=>{
if(res.data.code == 200){
this.pinglu(this.pid);
this.content = ""
}
})
}, },
handleEmotion(i) {
this.content += i;
},
pinglu(id) {
this.pid= id
this.axios
.post("http://lawpro.earnest.pro/api/login_main/CommentList", {
token: localStorage.getItem("token"),
type: 2,
type_id: id
})
.then(res => {
window.console.log(res)
this.plist = res.data.data.data
// this.list = res.data.data;
this.show = true
});
}
},
mounted() {
this.axios
.post("http://lawpro.earnest.pro/api/login_main/mainDetails", {
token: localStorage.getItem("token"),
type: 2,
id: 17
})
.then(res => {
// window.console.log(res)
this.list = res.data.data;
});
this.axios
.post("http://lawpro.earnest.pro/api/login_main/answerList", {
token: localStorage.getItem("token"),
page: 1,
article_id: 17
})
.then(res => {
window.console.log(res);
this.huida = res.data.data;
// this.list= res.data.data
});
} }
}; };
</script> </script>
@ -167,12 +225,12 @@ export default {
background-color: #fff; background-color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
>img{ > img {
width: 33px; width: 33px;
height: 33px; height: 33px;
margin-left: 30px margin-left: 30px;
} }
>textarea{ > textarea {
margin-left: 21px; margin-left: 21px;
border: none; border: none;
font-size: 30px; font-size: 30px;
@ -181,12 +239,12 @@ export default {
// word-break: break-all; // word-break: break-all;
// text-align: center; // text-align: center;
} }
>p{ > p {
margin-left: 30px; margin-left: 30px;
font-size: 30px; font-size: 30px;
color: #6B9147; color: #6b9147;
} }
>div{ > div {
position: absolute; position: absolute;
bottom: 98px; bottom: 98px;
background-color: #fff; background-color: #fff;
@ -200,12 +258,14 @@ export default {
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.question { .question {
height: 1rem; // height: 1rem;
width: 100%; width: 100%;
color: #333333; color: #333333;
font-size: 0.36rem; font-size: 0.36rem;
text-indent: 0.3rem; text-indent: 0.3rem;
line-height: 1rem; line-height: 0.5rem;
padding: 0.25rem;
box-sizing: border-box;
font-weight: 500; font-weight: 500;
} }
.title { .title {

58
src/components/indexFollow.vue
View File

@ -2,26 +2,26 @@
<div class="PersonafFollow"> <div class="PersonafFollow">
<div class="answer"> <div class="answer">
<div class="user"> <div class="user">
<img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt srcset /> <img :src="userimg" alt srcset />
<div> <div>
<p>啦啦啦</p> <p>{{nickname}}</p>
<p>律师</p> <p>{{role}}</p>
</div> </div>
</div> </div>
<div class="agree">1345人赞同了该回答</div> <div class="agree">{{num}}人赞同了该回答</div>
<div class="content" style="max-height: 6.1rem;"> <div class="content" style="max-height: 6.1rem;">
<img src alt srcset /> <div v-html="text"></div>
<p>这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明</p> <div class="gengduo" v-show="show" @click="shows">展开阅读全文</div>
<div v-show="show" @click="shows">展开阅读全文</div>
</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 @click="pinglun">
<img src="../assets/share.png" alt srcset /> <img src="../assets/share.png" alt srcset />
888评论 {{comment}}评论
</div> </div>
<div v-show="!show && lang" @click="hadd">收起</div> <div v-show="!show && lang" @click="hadd">收起</div>
</div> </div>
@ -76,21 +76,21 @@
} }
.content { .content {
position: relative; position: relative;
line-height: 40px;
font-size: 26px;
overflow: hidden; overflow: hidden;
> img { img {
width: 690px; max-width: 690px;
height: 374px; // height: 374px;
background-color: #000; // background-color: #000;
display: block; display: block;
margin-top: 39px; margin-top: 39px;
margin-bottom: 32px; margin-bottom: 32px;
} }
> p { // p {
line-height: 40px;
font-size: 26px; // }
} .gengduo {
> div {
position: absolute; position: absolute;
width: 750px; width: 750px;
height: 45px; height: 45px;
@ -131,13 +131,20 @@ export default {
data() { data() {
return { return {
show: false, show: false,
lang:true lang: true
}; };
}, },
props: { props: {
indexs: { indexs: {
default: 0 default: 0
} },
userimg: {},
nickname: {},
role: {},
num: {},
comment: {},
text: {},
sid:{}
}, },
methods: { methods: {
@ -150,11 +157,14 @@ export default {
var a = window.document.getElementsByClassName("content")[this.indexs]; var a = window.document.getElementsByClassName("content")[this.indexs];
a.style.setProperty("max-height", "6.1rem", "important"); a.style.setProperty("max-height", "6.1rem", "important");
this.show = true; this.show = true;
},
pinglun(){
this.$emit("pinglu",this.sid)
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
window.console.log(122) window.console.log(122);
var a = window.document.getElementsByClassName("content")[this.indexs]; var a = window.document.getElementsByClassName("content")[this.indexs];
var rem = parseFloat( var rem = parseFloat(
@ -163,8 +173,8 @@ export default {
window.console.log(a.offsetHeight, 5.9 * rem); window.console.log(a.offsetHeight, 5.9 * rem);
if (a.offsetHeight > 5.9 * rem) { if (a.offsetHeight > 5.9 * rem) {
this.show = true; this.show = true;
}else{ } else {
this.lang=false this.lang = false;
} }
}); });
} }

10
src/components/indexarticle.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="recommend"> <div class="recommend">
<div> <div>
<p class="articlename">阅读时间有限，还要把精力花在摘抄上吗？</p> <p class="articlename">{{title}}</p>
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> --> <!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
<div class="author">汉王的文章 · 556 赞同</div> <div class="author"></div>
</div> </div>
<img src="../assets/tuijian.png" alt class="pic" /> <img :src="img" alt class="pic" />
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -33,6 +33,7 @@
.author { .author {
color: #999999; color: #999999;
font-size: 0.22rem; font-size: 0.22rem;
height: 0.22rem;
margin: 0 auto; margin: 0 auto;
margin-top: 0.14rem; margin-top: 0.14rem;
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
@ -59,6 +60,7 @@ export default {
name: "indexarticel", name: "indexarticel",
data() { data() {
return {}; return {};
} },
props:['title','img']
}; };
</script> </script>

13
src/components/indexcomment.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="box"> <div class="box">
<div class="user"> <div class="user">
<img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt=""> <img :src="img" alt="">
<p>啦啦啦</p> <p>{{name}}</p>
</div> </div>
<div class="centers"> <div class="centers">
大一法学生瑟瑟发抖但感触良多 {{text}}
</div> </div>
<div class="zan"> <!-- <div class="zan">
赞 439 · 回复 · 更多 · 1 年前 赞 439 · 回复 · 更多 · 1 年前
</div> </div> -->
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -45,6 +45,7 @@
</style> </style>
<script> <script>
export default { export default {
name: "indexcomment" name: "indexcomment",
props:['name','img','text']
}; };
</script> </script>

10
src/components/indexprivate.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="recommend"> <div class="recommend">
<div> <div>
<p class="articlename">丧后即燃：李松蔚认知升级 16 讲</p> <p class="articlename" style="width:100%">{{title}}</p>
<p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> <!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
<div class="author">李松蔚的私家课 · 共18</div> <div class="author"></div>
</div> </div>
</div> </div>
</template> </template>
@ -32,6 +32,7 @@
.author { .author {
color: #999999; color: #999999;
font-size: 0.22rem; font-size: 0.22rem;
height: 0.02rem;
margin: 0 auto; margin: 0 auto;
margin-top: 0.14rem; margin-top: 0.14rem;
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
@ -60,6 +61,7 @@ export default {
return { return {
} }
} },
props:['title']
}; };
</script> </script>