-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontent.html
159 lines (155 loc) · 9.44 KB
/
content.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容页</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- import iview -->
<link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
<script src="https://unpkg.com/iview/dist/iview.min.js"></script>
<script src="js/jquery3.3.1.min.js"></script>
<script src="js/component.js"></script>
</head>
<body>
<div id="app">
<m-header></m-header>
<div class="content-bg">
<div class="content-div">
<h2 class="content-title">{{title}}</h2>
<div v-for="i in contents">
<p v-bind:class="{'content-body':!i.bold,'content-body-bold':i.bold}"
v-show="i.text && i.text.trim().length > 0">
{{i.text}}
</p>
<img style="margin: 20px 0" :src="i.img" v-show="i.img && i.img.trim().length > 0" />
</div>
</div>
</div>
<div class="section-header" style="margin-top:30px">
<p class="section-title">评论专区</p>
</div>
<div style="display: flex; align-items:center; justify-content:center; ">
<div>
<i-input style="width:800px;" v-model="comment" type="textarea" placeholder="请输入您的评论" />
</div>
<div>
<button style="width:100px; height:30px;margin-left: 50px" @click="publishComment"
:disabled="comment.trim().length <= 0">发布</button>
</div>
</div>
<div style="max-width: 80%;margin: 20px auto">
<div v-for="i in comments" style="border-top: 1px #704D33 solid; padding: 20px;">
<div style="padding: 0 10px;">
<!-- <span>{{i.nickname}}</span> -->
<span>{{i.time}}</span>
</div>
<p class="content-body">{{i.text}}</p>
</div>
</div>
<div class="footer">
<h5>红楼社区</h5>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
comment: '',
// 标题
title: '端午',
// 每一个花括号括起来是一个段落
// 如果不需要加粗就复制text，需要加粗就加上bold，需要图片就用img
// text里面的字符串不要换行，不要出现英文双引号，如果有英文双引号可以换成中文引号。
contents: [{
text: "端午是个大节，后面炎炎夏日都要平淡得过。端在古代汉语里是初的意思， 五月的前五天被称为“端五“。然后按照天干地支的纪年方式，五月即是午月，然后五又和午通用， 这样一来二去，就约定俗成得成了端午节。「端午避五毒 挂艾蒲佩香饰」端午在初夏季节，这个时候各种蚊蝇爬虫都出动了。古时候没有电蚊香，雷达这种杀虫剂，所有都靠天然有机的东西来驱虫。所以端午有避五毒之说。在第三十一回《撕扇子作千金一笑 因麒麟伏白首双星》里提到，端午正日子蒲艾簪门，虎符系臂。蒲是菖蒲， 菖蒲的叶子似剑，民间称之为“水剑”，说它可“斩千邪”。艾是艾草，它自带香气可以驱蚊虫。把它们用红绳寄在一起，放在门口，能辟邪。等叶子干了后，把它们点燃，是可以杀蚊虫的，这种全屋艾灸的作用相当好。",
}, {
text: "「端午避五毒 挂艾蒲佩香饰」",
bold: true
}, {
text: "端午在初夏季节，这个时候各种蚊蝇爬虫都出动了。古时候没有电蚊香，雷达这种杀虫剂，所有都靠天然有机的东西来驱虫。所以端午有避五毒之说。在第三十一回《撕扇子作千金一笑 因麒麟伏白首双星》里提到，端午正日子蒲艾簪门，虎符系臂。蒲是菖蒲， 菖蒲的叶子似剑，民间称之为“水剑”，说它可“斩千邪”。艾是艾草，它自带香气可以驱蚊虫。把它们用红绳寄在一起，放在门口，能辟邪。等叶子干了后，把它们点燃，是可以杀蚊虫的，这种全屋艾灸的作用相当好。"
}, {
img: "img/duanwu/dw1.png",
}, {
text: "「虎符系臂」",
bold: true
}, {
text: "虎符系臂是说做成小老虎一样的香包挂在孩子身上，同样起到驱邪的作用。老虎是百兽之王， 威风凌凌，给孩子带能驱虫又好玩。有的地方是用雄黄在孩子额头上画“王”字，也是同样的意思，把娃一个个都扮成小老虎，各个自带辟邪功能。"
}, {
img: "img/duanwu/dw2.png"
}, {
text: "「红麝香珠」",
bold: true
}, {
text: " 除了这以外，大人们也要佩戴香包。前面元妃派送的节礼里就有香袋，贾宝玉和薛宝钗的更高级是红麝香珠。香手串是清朝流行的饰品，红色的也符合端午辟邪的作用，而且芳香饰品也适合夏季。"
}, {
text: "宝姐姐生的丰盈，肌肤丰泽，红串珠配着雪白一段酥臂，不觉让宝玉动了羡慕之心，还暗暗想道：“这个膀子要长在林妹妹身上，或者还得摸一摸，偏生长在她身上。”也是只恨没福消受。"
}, {
img: 'img/duanwu/dw3.png'
}, {
img: 'img/duanwu/dw4.png'
}, {
text: "「端午备家宴 粽子赏午最应季」",
bold: true
}, {
text: "过节怎能没好吃的， 中国人的节日一定要有应季的吃食。 粽子是必备品，但其实除此之外， 端午节可吃的东西还有很多。"
}, {
img: "img/duanwu/dw5.png",
}, {
text: "书中端午当天王夫人治了酒席，请薛家母女等赏午。赏午，就是庆赏端午，怎么庆呢，自然是边吃边庆。清朝时期的《燕京岁时记·端阳》中就有记载：“每届端阳以前，府第朱门皆以粽子相馈饴，并副以樱桃、桑椹、荸荠、桃、杏及五毒饼、玫瑰饼等物。”看到了吧，除了粽子，家宴上要有这么多东西。还应该喝点雄黄酒， 就是白娘娘喝了一秒钟显出原形的那酒，据说是喝一点辟邪避暑。"
}, {
img: "img/duanwu/dw6.png",
}, {
text: "「端午斗百草 放假赏花好玩耍」",
bold: true
}, {
text: "斗草分为武斗和文斗两种。武斗就是每人找一根草， 然后角力看看谁的草坚韧。文斗就是大家报花草名，看谁对得上。红楼梦里写的是文斗。"
}, {
text: "午间宴席散后，香菱和小螺、芳官、蕊官、藕官、荳官等四五个小丫头，采了花草坐在草地上斗草。观音柳对罗汉松，君子竹对美人蕉，星星翠对月月红；《牡丹亭》上的牡丹花对《琵琶记》里的枇杷果。这几个小丫头有些是贾府里家养的小戏子，所以对戏文格外熟悉。从这也可见曹公写作功底深厚，每个人物的背景和她的言语行动都极其相符。 用如今流行的说法是“人设到位”。"
}, {
img: "img/duanwu/dw7.png",
}],
comments: [],
baseUrl: 'https://service-08a66ddb-1252411630.ap-beijing.apigateway.myqcloud.com/test/red-mansion-comment'
},
methods: {
publishComment() {
var vm = this;
var data = "text=" + this.comment + "&" + "time=" + new Date().toLocaleString();
console.log(this.baseUrl + "?" + data);
$.ajax({
url: this.baseUrl + "?" + data,
type: 'GET',
success: function (msg) {
msg = JSON.parse(msg);
alert('发布成功');
console.log(msg);
vm.comments = msg;
}
})
},
listComment() {
var vm = this;
$.ajax({
url: this.baseUrl,
success: function (msg) {
msg = JSON.parse(msg);
console.log('listFinish', msg);
vm.comments = msg;
},
error: function (xhr, status, error) {
// alert('error' + status);
console.log(xhr, status, error);
}
})
}
},
mounted() {
this.listComment();
}
})
// console.log(jQuery);
</script>
</script>
</body>
</html>