geer-builder 1.2.830 → 1.2.832
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="news-announcement">
|
|
3
|
+
<div class="news-announcement__grid" v-if="user_info">
|
|
4
|
+
<div class="news-announcement__grid-item" v-for="(item, i) in table_data" :key="i" @click="viewAnnouncement(item)" >
|
|
5
|
+
<div class="item-image">
|
|
6
|
+
<img :src="item.image" alt="">
|
|
7
|
+
</div>
|
|
8
|
+
<div class="item-body">
|
|
9
|
+
<div class="body-date">{{formatted_date(item.created_date)}}</div>
|
|
10
|
+
<div class="body-title">{{ item.title }}</div>
|
|
11
|
+
<div class="body-desc">{{ item.content + "asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd"}}</div>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
<q-dialog v-model="view_dialog" class="pool-dialog">
|
|
16
|
+
<q-card class="news-announcement__dialog">
|
|
17
|
+
<div class="news-announcement__dialog-title">
|
|
18
|
+
<div class="title-header">{{ row.title }}</div>
|
|
19
|
+
<q-space />
|
|
20
|
+
<q-btn dense flat icon="close" v-close-popup>
|
|
21
|
+
<q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
|
|
22
|
+
</q-btn>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="news-announcement__dialog-body">
|
|
25
|
+
<div class="body-image">
|
|
26
|
+
<img :src="row.image" alt="">
|
|
27
|
+
</div>
|
|
28
|
+
<div class="body-content">
|
|
29
|
+
<div class="content-date">{{ formatted_date(row.created_date) }}</div>
|
|
30
|
+
<div class="content-text">{{ row.content }}</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</q-card>
|
|
34
|
+
</q-dialog>
|
|
35
|
+
</div>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<script>
|
|
39
|
+
import GlobalMixins from '../../mixins/global_mixins';
|
|
40
|
+
import DB_ANNOUNCEMENT from '../../models/DB_ANNOUNCEMENT';
|
|
41
|
+
import {formatDate} from '../../utilities/DateUtils';
|
|
42
|
+
|
|
43
|
+
export default
|
|
44
|
+
{
|
|
45
|
+
mixins: [GlobalMixins],
|
|
46
|
+
components: { },
|
|
47
|
+
props:{
|
|
48
|
+
content_type: String
|
|
49
|
+
},
|
|
50
|
+
data:() =>
|
|
51
|
+
({
|
|
52
|
+
loading_table: true,
|
|
53
|
+
table_data: [],
|
|
54
|
+
view_dialog : false,
|
|
55
|
+
row:{
|
|
56
|
+
|
|
57
|
+
},
|
|
58
|
+
}),
|
|
59
|
+
mounted()
|
|
60
|
+
{
|
|
61
|
+
this.getList()
|
|
62
|
+
},
|
|
63
|
+
computed:
|
|
64
|
+
{
|
|
65
|
+
},
|
|
66
|
+
methods:
|
|
67
|
+
{
|
|
68
|
+
formatted_date(date)
|
|
69
|
+
{
|
|
70
|
+
return formatDate(date)
|
|
71
|
+
},
|
|
72
|
+
async getList()
|
|
73
|
+
{
|
|
74
|
+
this.loading_table = true;
|
|
75
|
+
await this.$bind("table_data", new DB_ANNOUNCEMENT().collection().where('archive',"==",false).orderBy('created_date', 'desc'));
|
|
76
|
+
this.loading_table = false;
|
|
77
|
+
|
|
78
|
+
},
|
|
79
|
+
viewAnnouncement(row)
|
|
80
|
+
{
|
|
81
|
+
this.row = row;
|
|
82
|
+
this.view_dialog = true
|
|
83
|
+
console.log(row)
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
}
|
|
87
|
+
</script>
|
|
88
|
+
|
|
89
|
+
<style lang="scss">
|
|
90
|
+
.news-announcement
|
|
91
|
+
{
|
|
92
|
+
&__grid
|
|
93
|
+
{
|
|
94
|
+
display: grid;
|
|
95
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
96
|
+
gap: 5px;
|
|
97
|
+
&-item
|
|
98
|
+
{
|
|
99
|
+
border: 1px solid #e9e9e9;
|
|
100
|
+
padding: 5px;
|
|
101
|
+
border-radius: 5px;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: start;
|
|
104
|
+
.item-image
|
|
105
|
+
{
|
|
106
|
+
max-width: 120px;
|
|
107
|
+
object-fit: contain;
|
|
108
|
+
img
|
|
109
|
+
{
|
|
110
|
+
width: 100%;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.item-body
|
|
115
|
+
{
|
|
116
|
+
text-align: left;
|
|
117
|
+
padding-left: 5px;
|
|
118
|
+
.body-title
|
|
119
|
+
{
|
|
120
|
+
font-weight: bold;
|
|
121
|
+
font-size: 15px;
|
|
122
|
+
color:#24A9EB;
|
|
123
|
+
}
|
|
124
|
+
.body-date
|
|
125
|
+
{
|
|
126
|
+
font-size: 11px;
|
|
127
|
+
}
|
|
128
|
+
.body-desc
|
|
129
|
+
{
|
|
130
|
+
white-space: nowrap; /* Prevent text wrapping */
|
|
131
|
+
overflow: hidden; /* Hide overflow */
|
|
132
|
+
text-overflow: ellipsis; /* Add ellipsis for long text */
|
|
133
|
+
max-width: 180px;
|
|
134
|
+
font-size: 13px;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@media only screen and (max-width: 768px) {
|
|
140
|
+
grid-template-columns: 1fr;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&__dialog
|
|
145
|
+
{
|
|
146
|
+
width: 800px;
|
|
147
|
+
|
|
148
|
+
&-title
|
|
149
|
+
{
|
|
150
|
+
display: flex;
|
|
151
|
+
align-items: center;
|
|
152
|
+
padding: 10px;
|
|
153
|
+
border-bottom: 1px solid #e9e9e9;
|
|
154
|
+
.title-header
|
|
155
|
+
{
|
|
156
|
+
font-weight: bold;
|
|
157
|
+
font-size: 15px;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
&-body
|
|
161
|
+
{
|
|
162
|
+
display: flex;
|
|
163
|
+
flex-wrap: wrap;
|
|
164
|
+
justify-content: center;
|
|
165
|
+
padding: 10px;
|
|
166
|
+
border-bottom: 1px solid #e9e9e9;
|
|
167
|
+
.body-image
|
|
168
|
+
{
|
|
169
|
+
max-width: 300px;
|
|
170
|
+
object-fit: contain;
|
|
171
|
+
img
|
|
172
|
+
{
|
|
173
|
+
width: 100%;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
.body-content
|
|
177
|
+
{
|
|
178
|
+
width: 100%;
|
|
179
|
+
text-align: left;
|
|
180
|
+
padding-left: 5px;
|
|
181
|
+
.body-title
|
|
182
|
+
{
|
|
183
|
+
font-weight: bold;
|
|
184
|
+
font-size: 15px;
|
|
185
|
+
color:#24A9EB;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.content-date
|
|
189
|
+
{
|
|
190
|
+
font-weight: 600;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.content-text
|
|
194
|
+
{
|
|
195
|
+
|
|
196
|
+
font-size: 13px;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@media only screen and (max-width: 768px) {
|
|
202
|
+
width:100%;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
</style>
|