|
|
@@ -5,15 +5,23 @@
|
|
|
<div class="swImg">
|
|
|
<div class="swiper-container">
|
|
|
<div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide" v-for="i in 5" :key="i">
|
|
|
- <img src="@/assets/img/cCj/1.png" alt="" />
|
|
|
+ <div
|
|
|
+ class="swiper-slide"
|
|
|
+ v-for="item in data"
|
|
|
+ :key="item.id"
|
|
|
+ @click="$emit('daka', [item.id, item.ind])"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="`${textUrl}/local/4dkk/${item.id}/wwwroot/images/images${item.id}/thumbSmallImg.jpg?0.3393463684591038`"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<!-- 底部文字 -->
|
|
|
<div class="swTxt">
|
|
|
- <h4>开平碉楼</h4>
|
|
|
- <p>2022.04.13</p>
|
|
|
+ <h4>{{ item.name }}</h4>
|
|
|
+ <p>访问量：20</p>
|
|
|
</div>
|
|
|
<!-- 已打卡标记 -->
|
|
|
- <div class="playCard" v-if="i===2"></div>
|
|
|
+ <div class="playCard" v-if="item.done"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -32,7 +40,64 @@ export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ // 测试url
|
|
|
+ // textUrl: "http://192.168.20.48:8080/", //本地
|
|
|
+ textUrl: "/SWKK", //打包
|
|
|
+
|
|
|
+ // 打卡相关匹配数据
|
|
|
+ dakaData: {
|
|
|
+ 1: [
|
|
|
+ { id: "KJ-rDI8nxEzY7", name: "图书馆", ind: 0 },
|
|
|
+ { id: "KJ-l6umbreveh", name: "住宅", ind: 1 },
|
|
|
+ ],
|
|
|
+ 2: [
|
|
|
+ { id: "KJ-DGrs9gsN5f", name: "罗氏大宗祠", ind: 0 },
|
|
|
+ { id: "KJ-TlLriX28UR", name: "五部堂", ind: 1 },
|
|
|
+ ],
|
|
|
+ 3: [
|
|
|
+ { id: "KJ-XOBeWcv7zo", name: "名官家廟", ind: 0 },
|
|
|
+ { id: "KJ-ASW6c4Dn2c", name: "毅斋卢公祠", ind: 1 },
|
|
|
+ ],
|
|
|
+ 4: [
|
|
|
+ { id: "KK-mJd0HnVE0e", name: "祠堂", ind: 0 },
|
|
|
+ { id: "KK-uptTQv9BYC", name: "四新楼", ind: 1 },
|
|
|
+ ],
|
|
|
+ 5: [
|
|
|
+ { id: "KJ-OQtw9EMLaP", name: "仓东村秉文谢", ind: 0 },
|
|
|
+ { id: "KJ-uce7ck7XWB", name: "仓东村-侯成谢公祠", ind: 1 },
|
|
|
+ ],
|
|
|
+ 6: [
|
|
|
+ { id: "KJ-AZ11Fpmquy", name: "霄南村-尧階", ind: 0 },
|
|
|
+ { id: "KJ-DyMG5hLNEs", name: "霄南村-樂隐源公祠", ind: 1 },
|
|
|
+ ],
|
|
|
+ 7: [
|
|
|
+ { id: "KJ-O8r726fnie", name: "振韬祖祠", ind: 0 },
|
|
|
+ { id: "KJ-BQFE4jJMyU", name: "缉熙堂祠堂", ind: 1 },
|
|
|
+ ],
|
|
|
+ 8: [
|
|
|
+ { id: "KJ-q2pOJb3igE", name: "碉楼", ind: 0 },
|
|
|
+ { id: "KJ-qvIOZguVBQ", name: "澜生居庐", ind: 1 },
|
|
|
+ ],
|
|
|
+ 9: [
|
|
|
+ { id: "KJ-qKWxTrHUMd", name: "骏庐", ind: 0 },
|
|
|
+ { id: "KJ-e6wGbcLwtP", name: "林庐", ind: 1 },
|
|
|
+ ],
|
|
|
+ 10: [
|
|
|
+ { id: "KK-qO3teGzkJK", name: "南津赵公祠", ind: 0 },
|
|
|
+ { id: "KJ-JgLPL8Y1Ue", name: "凌云阁", ind: 1 },
|
|
|
+ ],
|
|
|
+ 11: [
|
|
|
+ { id: "KJ-fqXrFPJYOg", name: "贤安庐", ind: 0 },
|
|
|
+ { id: "KJ-eh6NxoBf9l", name: "民居", ind: 1 },
|
|
|
+ ],
|
|
|
+ 12: [
|
|
|
+ { id: "KJ-Dx5YGcSZlx", name: "礼仪书室", ind: 0 },
|
|
|
+ { id: "KJ-qGS7oKvuZa", name: "胡氏别墅", ind: 1 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ };
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
@@ -41,12 +106,26 @@ export default {
|
|
|
//方法集合
|
|
|
methods: {},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
+ created() {
|
|
|
+ let id = Number(this.$route.params.id);
|
|
|
+
|
|
|
+ // 筛选打卡的数据
|
|
|
+ this.data = this.dakaData[id];
|
|
|
+ // 存在本地
|
|
|
+ let temp = localStorage.getItem("JMData_daka") || [];
|
|
|
+ if (temp.length > 0) {
|
|
|
+ temp = JSON.parse(temp);
|
|
|
+ }
|
|
|
+ temp.forEach((v) => {
|
|
|
+ if (v.name == this.data[0].id) this.data[0].done = true;
|
|
|
+ if (v.name == this.data[1].id) this.data[1].done = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
new Swiper(".card .swiper-container", {
|
|
|
- slidesPerView: 1.4,
|
|
|
+ slidesPerView: 1.2,
|
|
|
spaceBetween: 20,
|
|
|
});
|
|
|
});
|
|
|
@@ -101,34 +180,34 @@ export default {
|
|
|
width: calc(100% - 24px);
|
|
|
margin: 0 auto;
|
|
|
height: 100%;
|
|
|
- .swiper-slide{
|
|
|
+ .swiper-slide {
|
|
|
position: relative;
|
|
|
padding: 8px 12px;
|
|
|
- background: url('../../../assets/img/btn_record.png');
|
|
|
+ background: url("../../../assets/img/btn_record.png");
|
|
|
background-size: 100% 100%;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 66px);
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
- .swTxt{
|
|
|
+ .swTxt {
|
|
|
padding-top: 10px;
|
|
|
height: 50px;
|
|
|
- color: #887B67;
|
|
|
+ color: #887b67;
|
|
|
font-size: 16px;
|
|
|
- h4{
|
|
|
+ h4 {
|
|
|
margin-bottom: 3px;
|
|
|
- font-family: 'SYST';
|
|
|
+ font-family: "SYST";
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
}
|
|
|
- .playCard{
|
|
|
+ .playCard {
|
|
|
position: absolute;
|
|
|
bottom: 20px;
|
|
|
right: 15px;
|
|
|
width: 135px;
|
|
|
height: 90px;
|
|
|
- background: url('../../../assets/img/playCard.png');
|
|
|
+ background: url("../../../assets/img/playCard.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
