完成
This commit is contained in:
parent
1b00733af6
commit
4ad9b00142
@ -2,67 +2,67 @@
|
||||
<div style="padding-top:0.88rem">
|
||||
<heads></heads>
|
||||
<div class="line"></div>
|
||||
<p class="question">有哪些击中你内心阴暗处的句子？</p>
|
||||
<div class="line"></div>
|
||||
<follow :indexs="0"></follow>
|
||||
<div class="line"></div>
|
||||
<follow :indexs="1"></follow>
|
||||
<p class="question">{{list.data.title}}</p>
|
||||
<div v-for="(item,index) in huida" :key="index">
|
||||
<div class="line"></div>
|
||||
<follow
|
||||
@pinglu="pinglu"
|
||||
: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>
|
||||
<p class="title">相关推荐</p>
|
||||
<privates></privates>
|
||||
<articles></articles>
|
||||
<!-- <privates></privates> -->
|
||||
<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>
|
||||
<privatets></privatets>
|
||||
<articles></articles>
|
||||
<articles></articles>
|
||||
<!-- <privatets></privatets> -->
|
||||
<privates
|
||||
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">
|
||||
<div class="top">
|
||||
<p class="tiao">389条评论</p>
|
||||
<p class="tiao">{{plist.length}}条评论</p>
|
||||
<p class="qie">
|
||||
<img class="qiehuan" src="./assets/qiehuan.png" alt srcset /> 切换为时间排序
|
||||
</p>
|
||||
<img class="quit" src="./assets/quit.png" alt @click="show = !show" />
|
||||
</div>
|
||||
<div class="bodys">
|
||||
<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></comment>
|
||||
<comment v-for="(item,index) in plist" :key="index"></comment>
|
||||
|
||||
</div>
|
||||
<div class="reply">
|
||||
<img @click="biaoqing = !biaoqing" src="./assets/baoqing.png" alt srcset />
|
||||
<textarea placeholder="写下你的评论..." v-model="content"></textarea>
|
||||
<p>发布</p>
|
||||
<div v-show="biaoqing"><Emotion @emotion="handleEmotion" :height="4" ></Emotion></div>
|
||||
<p @click="pfb">发布</p>
|
||||
<div v-show="biaoqing">
|
||||
<Emotion @emotion="handleEmotion" :height="4"></Emotion>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
@ -72,32 +72,90 @@
|
||||
import follow from "./components/indexFollow";
|
||||
import privates from "./components/indexprivate";
|
||||
import articles from "./components/indexarticle";
|
||||
import privatets from "./components/indexprivatet";
|
||||
// import privatets from "./components/indexprivatet";
|
||||
import heads from "./components/indexhead";
|
||||
import comment from "./components/indexcomment";
|
||||
import Emotion from './components/Emotion/index'
|
||||
import Emotion from "./components/Emotion/index";
|
||||
export default {
|
||||
name: "IndexArticleDetail",
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
content:"",
|
||||
biaoqing:false
|
||||
content: "",
|
||||
biaoqing: false,
|
||||
list: {},
|
||||
huida: [],
|
||||
plist:[],
|
||||
pid:0
|
||||
};
|
||||
},
|
||||
components: {
|
||||
follow,
|
||||
privates,
|
||||
articles,
|
||||
privatets,
|
||||
// privatets,
|
||||
heads,
|
||||
comment,
|
||||
Emotion
|
||||
},
|
||||
methods:{
|
||||
handleEmotion (i) {
|
||||
this.content += i
|
||||
methods: {
|
||||
pfb(){
|
||||
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>
|
||||
@ -167,12 +225,12 @@ export default {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
> img {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
margin-left: 30px
|
||||
margin-left: 30px;
|
||||
}
|
||||
>textarea{
|
||||
> textarea {
|
||||
margin-left: 21px;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
@ -181,12 +239,12 @@ export default {
|
||||
// word-break: break-all;
|
||||
// text-align: center;
|
||||
}
|
||||
>p{
|
||||
> p {
|
||||
margin-left: 30px;
|
||||
font-size: 30px;
|
||||
color: #6B9147;
|
||||
color: #6b9147;
|
||||
}
|
||||
>div{
|
||||
> div {
|
||||
position: absolute;
|
||||
bottom: 98px;
|
||||
background-color: #fff;
|
||||
@ -200,12 +258,14 @@ export default {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.question {
|
||||
height: 1rem;
|
||||
// height: 1rem;
|
||||
width: 100%;
|
||||
color: #333333;
|
||||
font-size: 0.36rem;
|
||||
text-indent: 0.3rem;
|
||||
line-height: 1rem;
|
||||
line-height: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
}
|
||||
.title {
|
||||
|
||||
@ -2,26 +2,26 @@
|
||||
<div class="PersonafFollow">
|
||||
<div class="answer">
|
||||
<div class="user">
|
||||
<img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt srcset />
|
||||
<img :src="userimg" alt srcset />
|
||||
<div>
|
||||
<p>啦啦啦</p>
|
||||
<p>律师</p>
|
||||
<p>{{nickname}}</p>
|
||||
<p>{{role}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agree">1345人赞同了该回答</div>
|
||||
<div class="agree">{{num}}人赞同了该回答</div>
|
||||
|
||||
<div class="content" style="max-height: 6.1rem;">
|
||||
<img src alt srcset />
|
||||
<p>这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明</p>
|
||||
<div v-show="show" @click="shows">展开阅读全文</div>
|
||||
<div v-html="text"></div>
|
||||
<div class="gengduo" v-show="show" @click="shows">展开阅读全文</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<img src="../assets/share.png" alt srcset />
|
||||
分享
|
||||
</div>
|
||||
<div>
|
||||
<div @click="pinglun">
|
||||
<img src="../assets/share.png" alt srcset />
|
||||
888评论
|
||||
{{comment}}评论
|
||||
</div>
|
||||
<div v-show="!show && lang" @click="hadd">收起</div>
|
||||
</div>
|
||||
@ -76,21 +76,21 @@
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
line-height: 40px;
|
||||
font-size: 26px;
|
||||
overflow: hidden;
|
||||
> img {
|
||||
width: 690px;
|
||||
height: 374px;
|
||||
background-color: #000;
|
||||
img {
|
||||
max-width: 690px;
|
||||
// height: 374px;
|
||||
// background-color: #000;
|
||||
display: block;
|
||||
margin-top: 39px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
> p {
|
||||
line-height: 40px;
|
||||
font-size: 26px;
|
||||
}
|
||||
> div {
|
||||
// p {
|
||||
|
||||
// }
|
||||
.gengduo {
|
||||
position: absolute;
|
||||
width: 750px;
|
||||
height: 45px;
|
||||
@ -131,13 +131,20 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
lang:true
|
||||
lang: true
|
||||
};
|
||||
},
|
||||
props: {
|
||||
indexs: {
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
userimg: {},
|
||||
nickname: {},
|
||||
role: {},
|
||||
num: {},
|
||||
comment: {},
|
||||
text: {},
|
||||
sid:{}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -150,11 +157,14 @@ export default {
|
||||
var a = window.document.getElementsByClassName("content")[this.indexs];
|
||||
a.style.setProperty("max-height", "6.1rem", "important");
|
||||
this.show = true;
|
||||
},
|
||||
pinglun(){
|
||||
this.$emit("pinglu",this.sid)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
window.console.log(122)
|
||||
window.console.log(122);
|
||||
var a = window.document.getElementsByClassName("content")[this.indexs];
|
||||
|
||||
var rem = parseFloat(
|
||||
@ -163,8 +173,8 @@ export default {
|
||||
window.console.log(a.offsetHeight, 5.9 * rem);
|
||||
if (a.offsetHeight > 5.9 * rem) {
|
||||
this.show = true;
|
||||
}else{
|
||||
this.lang=false
|
||||
} else {
|
||||
this.lang = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="recommend">
|
||||
<div>
|
||||
<p class="articlename">阅读时间有限，还要把精力花在摘抄上吗？</p>
|
||||
<p class="articlename">{{title}}</p>
|
||||
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
||||
<div class="author">汉王的文章 · 556 赞同</div>
|
||||
<div class="author"></div>
|
||||
</div>
|
||||
<img src="../assets/tuijian.png" alt class="pic" />
|
||||
<img :src="img" alt class="pic" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@ -33,6 +33,7 @@
|
||||
.author {
|
||||
color: #999999;
|
||||
font-size: 0.22rem;
|
||||
height: 0.22rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.14rem;
|
||||
margin-bottom: 0.35rem;
|
||||
@ -59,6 +60,7 @@ export default {
|
||||
name: "indexarticel",
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
props:['title','img']
|
||||
};
|
||||
</script>
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="user">
|
||||
<img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt="">
|
||||
<p>啦啦啦</p>
|
||||
<img :src="img" alt="">
|
||||
<p>{{name}}</p>
|
||||
</div>
|
||||
<div class="centers">
|
||||
大一法学生瑟瑟发抖但感触良多
|
||||
{{text}}
|
||||
</div>
|
||||
<div class="zan">
|
||||
<!-- <div class="zan">
|
||||
赞 439 · 回复 · 更多 · 1 年前
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@ -45,6 +45,7 @@
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: "indexcomment"
|
||||
name: "indexcomment",
|
||||
props:['name','img','text']
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="recommend">
|
||||
<div>
|
||||
<p class="articlename">丧后即燃：李松蔚认知升级 16 讲</p>
|
||||
<p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p>
|
||||
<div class="author">李松蔚的私家课 · 共18</div>
|
||||
<p class="articlename" style="width:100%">{{title}}</p>
|
||||
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
||||
<div class="author"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -32,6 +32,7 @@
|
||||
.author {
|
||||
color: #999999;
|
||||
font-size: 0.22rem;
|
||||
height: 0.02rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.14rem;
|
||||
margin-bottom: 0.35rem;
|
||||
@ -60,6 +61,7 @@ export default {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
props:['title']
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user