|
|
@@ -317,7 +317,7 @@
|
|
|
</div>
|
|
|
<!-- 移动端-----问答-------------------------------------------------->
|
|
|
<!-- 点击确定之后生成的div图片 -->
|
|
|
- <div class="toPicture" ref="topicDui">
|
|
|
+ <div class="toPicture" ref="topicDui" v-if="toPictureShow">
|
|
|
<div>党史答题记录</div>
|
|
|
<div>共答题10道，正确{{ cunot }}道</div>
|
|
|
<div class="renwu">
|
|
|
@@ -418,12 +418,12 @@
|
|
|
<!-- --------------留言板信息----------------------- -->
|
|
|
<!-- 留言内容 -->
|
|
|
<ul class="moLiuYan" v-if="MoTab3LiuShow">
|
|
|
- <li v-for="i in 15" :key="i">
|
|
|
+ <li v-for="(item,index) in tableData" :key="index">
|
|
|
<div>
|
|
|
- <span class="name">用户</span>
|
|
|
- <span>2021-07-01 15:03</span>
|
|
|
+ <span class="name">{{item.userName}}</span>
|
|
|
+ <span>{{item.updateTime}}</span>
|
|
|
</div>
|
|
|
- <p>快乐的~~~</p>
|
|
|
+ <p>{{item.content}}</p>
|
|
|
</li>
|
|
|
<!-- 我要留言的按钮 -->
|
|
|
<div class="MoTab3Liu" @click="MoTab3LiuShow = false">我要留言</div>
|
|
|
@@ -494,12 +494,13 @@
|
|
|
</div>
|
|
|
<div class="MoinpBtnOk" @touchstart="tab4NameBtnOk">确 定</div>
|
|
|
</div>
|
|
|
- <!-- 生成的二维码 -->
|
|
|
+ <!-- 生成的二维码 -->
|
|
|
<div class="MoqrCode" v-if="qrCodeUrl">
|
|
|
<img :src="qrCodeUrl" alt="" />
|
|
|
</div>
|
|
|
- <a class="MoDownload" :href="base64SUrlTab4" download v-if="qrCodeUrl"
|
|
|
- >点击保存打卡主题</a>
|
|
|
+ <a class="MoDownload" :href="base64SUrlTab4" download v-if="qrCodeUrl"
|
|
|
+ >点击保存打卡主题</a
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 移动端-----分享-------------------------------------------------->
|
|
|
@@ -514,8 +515,8 @@
|
|
|
<p class="biaoti">珠海高新区中共党史教育学习园地</p>
|
|
|
<p class="biaoti">虚拟展厅</p>
|
|
|
<div class="Motab5ER">
|
|
|
- <img src="@/assets/tab/tab5Ma.png" alt="" />
|
|
|
- <p>请使用手机扫描二维码</p>
|
|
|
+ <img src="@/assets/tab/tab5Ma.png" alt="" />
|
|
|
+ <p>请使用手机扫描二维码</p>
|
|
|
<a href="../../assets/tab/tab5Ma.png" download class="tab5Box"
|
|
|
>下 载 二 维 码</a
|
|
|
>
|
|
|
@@ -523,7 +524,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-<!-- PC------------------------------------------------------------------------- -->
|
|
|
+ <!-- PC------------------------------------------------------------------------- -->
|
|
|
<!-- pc --路线 ----------------------->
|
|
|
<div class="pcTab1 myTab" v-if="rightTab[0].isShow">
|
|
|
<div class="conten">
|
|
|
@@ -656,17 +657,19 @@
|
|
|
</div>
|
|
|
<!-- 内容 -->
|
|
|
<ul class="liuyan">
|
|
|
- <li v-for="i in 10" :key="i">
|
|
|
- <div class="name">匿名匿名匿</div>
|
|
|
+ <li v-for="(item,index) in tableData" :key="index">
|
|
|
+ <div class="name">{{item.userName}}</div>
|
|
|
<div class="con">
|
|
|
- 实现中华民族伟大复兴，就是中华民族近代以来最伟大的梦想。
|
|
|
+ {{item.content}}
|
|
|
</div>
|
|
|
- <div class="time">2021-11-10 12:03</div>
|
|
|
+ <div class="time">{{item.updateTime}}</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<!-- 分页器 -->
|
|
|
<div class="pagination">
|
|
|
- <el-pagination layout="prev, pager, next" :total="500">
|
|
|
+ <el-pagination layout="prev, pager, next" :total="total"
|
|
|
+ @current-change="currentChange"
|
|
|
+ >
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
<!-- 文本域 -->
|
|
|
@@ -790,6 +793,7 @@ export default {
|
|
|
//留言板
|
|
|
MoTab3LiuShow: true, //控制留言板信息和输入的切换
|
|
|
//-----------------党史问答数据-----------------
|
|
|
+ toPictureShow:false,//---------------手机端答题成功页面的显示和隐藏
|
|
|
inpName: "",
|
|
|
base64SUrl: "", //党史问答的图片地址
|
|
|
qrCodeUrl: "", //党史问答生成的二维码图片地址
|
|
|
@@ -820,6 +824,8 @@ export default {
|
|
|
{ name: "分  享", img: "tab5.png", isShow: false },
|
|
|
],
|
|
|
//-----------------留言板数据--------------------------------
|
|
|
+ total:0,
|
|
|
+ tableData:[],
|
|
|
textarea: "", //文本域
|
|
|
radio: "1",
|
|
|
myName: "",
|
|
|
@@ -1025,15 +1031,11 @@ export default {
|
|
|
},
|
|
|
//答对了输入名字点击确定
|
|
|
stateTowBtnOk(myBoo) {
|
|
|
- let toPicture = document.querySelector(".toPicture");
|
|
|
if (this.inpName.trim() === "")
|
|
|
return this.$message.warning("名字不能为空");
|
|
|
if (this.inpName.length > 5)
|
|
|
return this.$message.warning("名字不能超过5个字");
|
|
|
- if (myBoo) {
|
|
|
- console.log(999, myBoo);
|
|
|
- toPicture.style.display = "block";
|
|
|
- }
|
|
|
+ if (myBoo) this.toPictureShow=true
|
|
|
this.stateTowInp = false;
|
|
|
this.topicXShow = false;
|
|
|
setTimeout(() => {
|
|
|
@@ -1069,7 +1071,7 @@ export default {
|
|
|
this.$message.success("生成二维码成功");
|
|
|
this.qrCodeUrl = "http://192.168.0.135:8011/" + res.data;
|
|
|
this.topicXShow = true;
|
|
|
- if (toPicture) toPicture.style.display = "none";
|
|
|
+ if (myBoo) this.toPictureShow=false
|
|
|
}
|
|
|
})
|
|
|
.fail((res) => {
|
|
|
@@ -1118,7 +1120,11 @@ export default {
|
|
|
this.tab4NameShow = true;
|
|
|
this.qrCodeUrl = "";
|
|
|
}
|
|
|
- if (index === 2) this.MoTab3LiuShow = true;
|
|
|
+ //点击的是留言板
|
|
|
+ if (index === 2) {
|
|
|
+ this.MoTab3LiuShow = true;
|
|
|
+ this.getList({ pageNum: 1, pageSize: 99999 })
|
|
|
+ }
|
|
|
},
|
|
|
//点击右侧tab栏
|
|
|
open(index) {
|
|
|
@@ -1160,7 +1166,40 @@ export default {
|
|
|
this.tab4NameShow = true;
|
|
|
this.qrCodeUrl = "";
|
|
|
}
|
|
|
+ //点击的留言板
|
|
|
+ if (index === 2) {
|
|
|
+ this.getList({ pageNum: 1, pageSize: 10 })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 分页器方法
|
|
|
+ currentChange (val) {
|
|
|
+ // console.log('当前页改变了', val)
|
|
|
+ this.getList({ pageNum: val, pageSize: 10 })
|
|
|
},
|
|
|
+
|
|
|
+ //封装获取留言信息方法
|
|
|
+ getList(data){
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: "http://192.168.0.135:8011/web/comment/list",
|
|
|
+ data: JSON.stringify(data),
|
|
|
+ dataType: "json",
|
|
|
+ contentType: "application/json;charset=UTF-8",
|
|
|
+ })
|
|
|
+ .done((res) => {
|
|
|
+ console.log('获取留言信息成功', res);
|
|
|
+ this.tableData=res.data.records
|
|
|
+ this.total=res.data.total
|
|
|
+ this.tableData.forEach(v=>{
|
|
|
+ if(v.userName==='') v.userName='匿名'
|
|
|
+ v.updateTime =v.updateTime.slice(0, -3)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .fail((res) => {
|
|
|
+ console.log(111, res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
switchBGM() {
|
|
|
if ($("#volume img")[0].src.indexOf("on.png") > -1) {
|
|
|
window.manage.switchBgmState(true);
|
|
|
@@ -1173,9 +1212,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.toPicture {
|
|
|
- display: none;
|
|
|
-}
|
|
|
+
|
|
|
::-webkit-scrollbar {
|
|
|
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
}
|
|
|
@@ -1941,7 +1978,6 @@ export default {
|
|
|
color: #edd3b0;
|
|
|
background: url("../../assets/tabMo/moTabBac2.png");
|
|
|
background-size: 100% 100%;
|
|
|
- display: none;
|
|
|
z-index: 99999;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
@@ -2239,110 +2275,109 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .MoTab4{
|
|
|
- .MoRWbac{
|
|
|
+ .MoTab4 {
|
|
|
+ .MoRWbac {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- &>img{
|
|
|
+ & > img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .Motitle{
|
|
|
+ .Motitle {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
- .conten{
|
|
|
- .MoinpName{
|
|
|
+ .conten {
|
|
|
+ .MoinpName {
|
|
|
z-index: 999;
|
|
|
position: absolute;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
left: 0;
|
|
|
- bottom:0;
|
|
|
+ bottom: 0;
|
|
|
width: 100%;
|
|
|
height: 84%;
|
|
|
- .shuru{
|
|
|
+ .shuru {
|
|
|
width: 220px;
|
|
|
margin: 50px auto 0;
|
|
|
- /deep/.el-input{
|
|
|
+ /deep/.el-input {
|
|
|
width: 220px;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- .MoinpBtnOk{
|
|
|
- color: #b24340;
|
|
|
- border-radius: 8px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 131px;
|
|
|
- height: 34px;
|
|
|
- background-color: rgba(237, 211, 176, 1);
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
- .tab4Name{
|
|
|
- margin-top: -10px;
|
|
|
- text-align: center;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- .MoqrCode{
|
|
|
- position: absolute;
|
|
|
- left: 5px;
|
|
|
- top: 85px;
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- &>img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
}
|
|
|
- .MoDownload{
|
|
|
+ .MoinpBtnOk {
|
|
|
+ color: #b24340;
|
|
|
border-radius: 8px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- width: 182px;
|
|
|
+ width: 131px;
|
|
|
height: 34px;
|
|
|
- background-color: rgba(237, 211, 176, 0.4);
|
|
|
+ background-color: rgba(237, 211, 176, 1);
|
|
|
position: absolute;
|
|
|
- bottom: 15px;
|
|
|
+ bottom: 20px;
|
|
|
left: 50%;
|
|
|
- transform: translateX(-50%;);
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab4Name {
|
|
|
+ margin-top: -10px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .MoqrCode {
|
|
|
+ position: absolute;
|
|
|
+ left: 5px;
|
|
|
+ top: 85px;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .MoDownload {
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 182px;
|
|
|
+ height: 34px;
|
|
|
+ background-color: rgba(237, 211, 176, 0.4);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%;);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .MoTab5{
|
|
|
- .conten{
|
|
|
- background: url('../../assets/tabMo/moTabBac5.png');
|
|
|
+ .MoTab5 {
|
|
|
+ .conten {
|
|
|
+ background: url("../../assets/tabMo/moTabBac5.png");
|
|
|
background-size: 100% 100%;
|
|
|
- .biaoti{
|
|
|
+ .biaoti {
|
|
|
font-size: 16px;
|
|
|
width: 80%;
|
|
|
margin: 0 auto 0;
|
|
|
text-align: center;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
- .Motab5ER{
|
|
|
+ .Motab5ER {
|
|
|
margin: 20px auto 0;
|
|
|
width: 180px;
|
|
|
height: 300px;
|
|
|
- &>img {
|
|
|
+ & > img {
|
|
|
width: 180px;
|
|
|
height: 180px;
|
|
|
}
|
|
|
- &>p {
|
|
|
+ & > p {
|
|
|
text-align: center;
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
- .tab5Box{
|
|
|
- color: #EDD3B0;
|
|
|
+ .tab5Box {
|
|
|
+ color: #edd3b0;
|
|
|
margin: 0 auto;
|
|
|
border-radius: 8px;
|
|
|
display: flex;
|
