评论
This commit is contained in:
parent
a07d6df078
commit
5503e81bb3
@ -14,10 +14,57 @@
|
|||||||
|
|
||||||
<articles></articles>
|
<articles></articles>
|
||||||
|
|
||||||
<p class="title">热门推荐</p>
|
<p class="title" @click="show = true">热门推荐</p>
|
||||||
<privatets></privatets>
|
<privatets></privatets>
|
||||||
<articles></articles>
|
<articles></articles>
|
||||||
<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="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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</van-popup>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -27,23 +74,126 @@ 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 Emotion from './components/Emotion/index'
|
||||||
export default {
|
export default {
|
||||||
name: "IndexArticleDetail",
|
name: "IndexArticleDetail",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
show: false,
|
||||||
|
content:"",
|
||||||
|
biaoqing:false
|
||||||
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
follow,
|
follow,
|
||||||
privates,
|
privates,
|
||||||
articles,
|
articles,
|
||||||
privatets,
|
privatets,
|
||||||
heads
|
heads,
|
||||||
|
comment,
|
||||||
|
Emotion
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleEmotion (i) {
|
||||||
|
this.content += i
|
||||||
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
.linshi {
|
||||||
|
z-index: 999999 !important;
|
||||||
|
.top {
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 98px;
|
||||||
|
border-bottom: #f6f6f6 solid 1px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.tiao {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 31px;
|
||||||
|
}
|
||||||
|
.qie {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #95998f;
|
||||||
|
margin-left: 208px;
|
||||||
|
padding-right: 28px;
|
||||||
|
border-right: #f6f6f6 solid 2px;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.qiehuan {
|
||||||
|
width: 26px;
|
||||||
|
height: 22px;
|
||||||
|
display: block;
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.quit {
|
||||||
|
width: 28px;
|
||||||
|
height: 29px;
|
||||||
|
font-size: 29px;
|
||||||
|
margin-left: 34px;
|
||||||
|
display: flex;
|
||||||
|
> img {
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
|
}
|
||||||
|
// background-image: url("./assets/quit.png")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bodys {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// background-color: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 98px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.reply {
|
||||||
|
width: 100%;
|
||||||
|
height: 98px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>img{
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
|
margin-left: 30px
|
||||||
|
}
|
||||||
|
>textarea{
|
||||||
|
margin-left: 21px;
|
||||||
|
border: none;
|
||||||
|
font-size: 30px;
|
||||||
|
height: 35px;
|
||||||
|
width: 550px;
|
||||||
|
// word-break: break-all;
|
||||||
|
// text-align: center;
|
||||||
|
}
|
||||||
|
>p{
|
||||||
|
margin-left: 30px;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #6B9147;
|
||||||
|
}
|
||||||
|
>div{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 98px;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.line {
|
.line {
|
||||||
height: 0.2rem;
|
height: 0.2rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
BIN
src/assets/baoqing.png
Normal file
BIN
src/assets/baoqing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/qiehuan.png
Normal file
BIN
src/assets/qiehuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 481 B |
BIN
src/assets/quit.png
Normal file
BIN
src/assets/quit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
30
src/components/Emotion/Emotion.vue
Normal file
30
src/components/Emotion/Emotion.vue
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ly-emotion" >
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ly-emotion',
|
||||||
|
mounted () {
|
||||||
|
const name = this.$el.innerHTML
|
||||||
|
const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
|
||||||
|
let index = list.indexOf(name)
|
||||||
|
let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$el.innerHTML = imgHTML
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.ly-emotion {
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
.ly-static-emotion {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
68
src/components/Emotion/index.vue
Normal file
68
src/components/Emotion/index.vue
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="emotion-box" :style="{height: height + 'rem' }" >
|
||||||
|
<div class="emotion-box-line" v-for="(line, i) in list" :key="i" >
|
||||||
|
<emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)" >{{item}}</emotion>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Emotion from './Emotion'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: 200,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
list: [
|
||||||
|
['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
|
||||||
|
['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过'],
|
||||||
|
['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
|
||||||
|
['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
|
||||||
|
['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
|
||||||
|
['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
|
||||||
|
['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
|
||||||
|
['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰',],
|
||||||
|
['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
|
||||||
|
['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
|
||||||
|
['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
|
||||||
|
['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
|
||||||
|
['磕头', '回头', '跳绳', '挥手', '激动', '街舞', '左太极', '右太极'],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clickHandler (i) {
|
||||||
|
let emotion = `#${i};`
|
||||||
|
this.$emit('emotion', emotion)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Emotion
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.emotion-box {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #b4b4b4;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.emotion-box-line {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.emotion-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
50
src/components/indexcomment.vue
Normal file
50
src/components/indexcomment.vue
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="user">
|
||||||
|
<img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt="">
|
||||||
|
<p>啦啦啦</p>
|
||||||
|
</div>
|
||||||
|
<div class="centers">
|
||||||
|
大一法学生瑟瑟发抖但感触良多
|
||||||
|
</div>
|
||||||
|
<div class="zan">
|
||||||
|
赞 439 · 回复 · 更多 · 1 年前
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
width: 690px;
|
||||||
|
margin: 0 30px;
|
||||||
|
padding: 24px 0 30px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: #f6f6f6 solid 1px;
|
||||||
|
.user{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>img{
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.centers{
|
||||||
|
font-size: 28px;
|
||||||
|
color: #000;
|
||||||
|
margin-top: 29px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.zan{
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 33px;
|
||||||
|
color: #95998F;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "indexcomment"
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user