index.vue
3.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
<van-popup
v-model:show="show"
:close-on-click-overlay="false"
round
position="bottom"
:style="{ height: '70%' }"
>
<div class="van-hairline--bottom">
<van-row>
<van-col span="4" @click="refreshBtn">
<div style="padding: 1rem; text-align: center;">
<van-icon :name="icon_x" size="1.25rem" />
</div>
</van-col>
<van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
<span>12条回复</span>
</van-col>
<van-col span="4" @click="closeBtn">
<div style="padding: 1rem;">
<van-icon :name="icon_y" size="1.25rem" />
</div>
</van-col>
</van-row>
</div>
<div class="comment-wrapper">
<van-row style="font-size: 0.9rem;">
<van-col span="4">
<van-image round width="3rem" height="3rem" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
</van-col>
<van-col span="16">
<p>是妮妮吖～</p>
<p>杨浦民办科技幼稚园</p>
</van-col>
<van-col span="4" style="text-align: center;">
<p style="color: #333333;">回复</p>
<p>2-25</p>
</van-col>
</van-row>
<van-row>
<van-col offset="4">
<span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span>
</van-col>
</van-row>
</div>
<div class="comment-wrapper" style="background-color: #F7F7F7;">
<van-row style="font-size: 0.9rem;">
<van-col span="4">
<van-image round width="3rem" height="3rem" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
</van-col>
<van-col span="16">
<p>是妮妮吖～</p>
<p>杨浦民办科技幼稚园</p>
</van-col>
<van-col span="4" style="text-align: center;">
<p style="color: #333333;">回复</p>
<p>2-25</p>
</van-col>
</van-row>
<van-row>
<van-col offset="4">
<span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span>
</van-col>
</van-row>
</div>
</van-popup>
</template>
<script setup>
import icon_x from '@images/x.png'
import icon_y from '@images/y.png'
import { ref, reactive, onMounted } from 'vue'
// const props = defineProps({
// showPopup: Boolean
// })
onMounted(() => {
})
</script>
<script>
export default {
props: ['showPopup'],
data () {
return {
show: false
}
},
mounted () {
},
watch: {
showPopup (value, pre) {
if (value) {
this.show = value;
}
}
},
methods: {
onClose () {
this.show = false;
},
refreshBtn () {},
closeBtn () {
this.$emit('on-close', false)
this.show = false;
}
}
}
</script>
<style lang="less" scoped>
.comment-wrapper {
color: #999999;
padding: 1rem;
line-height: 1.75;
.reply-wrapper {
background: #F7F7F7;
border-radius: 10px;
padding: 0.5rem;
margin-top: 0.5rem;
color: #0B3A72;
.content {
color: #222222;
}
}
}
</style>