评论
This commit is contained in:
parent
a07d6df078
commit
5503e81bb3
@ -14,10 +14,57 @@
|
||||
|
||||
<articles></articles>
|
||||
|
||||
<p class="title">热门推荐</p>
|
||||
<p class="title" @click="show = true">热门推荐</p>
|
||||
<privatets></privatets>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -27,23 +74,126 @@ import privates from "./components/indexprivate";
|
||||
import articles from "./components/indexarticle";
|
||||
import privatets from "./components/indexprivatet";
|
||||
import heads from "./components/indexhead";
|
||||
|
||||
import comment from "./components/indexcomment";
|
||||
import Emotion from './components/Emotion/index'
|
||||
export default {
|
||||
name: "IndexArticleDetail",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
show: false,
|
||||
content:"",
|
||||
biaoqing:false
|
||||
};
|
||||
},
|
||||
components: {
|
||||
follow,
|
||||
privates,
|
||||
articles,
|
||||
privatets,
|
||||
heads
|
||||
heads,
|
||||
comment,
|
||||
Emotion
|
||||
},
|
||||
methods:{
|
||||
handleEmotion (i) {
|
||||
this.content += i
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
height: 0.2rem;
|
||||
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