|
|
@@ -1,12 +1,16 @@
|
|
|
<template>
|
|
|
- <div class='My'>
|
|
|
+ <div class="My">
|
|
|
<!-- 输入框 -->
|
|
|
<div class="inputBox" @keydown.enter="searchFu()">
|
|
|
<div class="searInco">
|
|
|
<van-icon name="search" />
|
|
|
</div>
|
|
|
<div class="searBtn" @click="searchFu()">搜索</div>
|
|
|
- <van-field maxlength="10" v-model="txt" placeholder="请输入要搜索的内容" />
|
|
|
+ <van-field
|
|
|
+ maxlength="10"
|
|
|
+ v-model="txt"
|
|
|
+ placeholder="请输入要搜索的内容"
|
|
|
+ />
|
|
|
</div>
|
|
|
<!-- 精彩必体验 -->
|
|
|
<div class="titleTit">精彩必体验</div>
|
|
|
@@ -16,7 +20,7 @@
|
|
|
<!-- 主体内容 -->
|
|
|
<div class="mainBox">
|
|
|
<div class="row" v-for="item in spotData" :key="item.id">
|
|
|
- <img :src="require(`@/assets/img/interact/row${item.id}.png`)" alt="">
|
|
|
+ <img :src="require(`@/assets/img/interact/row${item.id}.png`)" alt="" />
|
|
|
<div class="name">{{ item.name }}</div>
|
|
|
<div class="author">
|
|
|
<div class="author_ll">
|
|
|
@@ -24,61 +28,63 @@
|
|
|
<span>{{ item.author }}</span>
|
|
|
</div>
|
|
|
<div class="author_rr">{{ item.time }}</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- +号 -->
|
|
|
<div class="issue">
|
|
|
- <img src="../../assets/img/interact/issue.png" alt="" @click="$router.push('/layout/interact/issue')"/>
|
|
|
+ <img
|
|
|
+ src="../../assets/img/interact/issue.png"
|
|
|
+ alt=""
|
|
|
+ @click="$router.push('/layout/interact/issue')"
|
|
|
+ />
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- txt: '',
|
|
|
+ txt: "",
|
|
|
bsData: [
|
|
|
- { id: 1, name: '梦幻游乐王国' },
|
|
|
- { id: 2, name: '古建筑' },
|
|
|
- { id: 3, name: '美食' },
|
|
|
- { id: 4, name: '周边风景游玩' },
|
|
|
- { id: 5, name: '美景' },
|
|
|
+ { id: 1, name: "梦幻游乐王国" },
|
|
|
+ { id: 2, name: "古建筑" },
|
|
|
+ { id: 3, name: "美食" },
|
|
|
+ { id: 4, name: "周边风景游玩" },
|
|
|
+ { id: 5, name: "美景" },
|
|
|
],
|
|
|
spotData: [
|
|
|
- { id: 1, name: '方特梦幻王国万圣夜', author: '王大锤', time: '2022-11-16' },
|
|
|
- { id: 2, name: '芜湖老海关', author: '王大锤', time: '2022-11-16' },
|
|
|
- { id: 3, name: '中江塔', author: '王大锤', time: '2022-11-16' },
|
|
|
- { id: 4, name: '鸠兹古镇', author: '王大锤', time: '2022-11-16' },
|
|
|
- ]
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "方特梦幻王国万圣夜",
|
|
|
+ author: "王大锤",
|
|
|
+ time: "2022-11-16",
|
|
|
+ },
|
|
|
+ { id: 2, name: "芜湖老海关", author: "王大锤", time: "2022-11-16" },
|
|
|
+ { id: 3, name: "中江塔", author: "王大锤", time: "2022-11-16" },
|
|
|
+ { id: 4, name: "鸠兹古镇", author: "王大锤", time: "2022-11-16" },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
methods: {
|
|
|
searchFu() {
|
|
|
- console.log('---------');
|
|
|
- }
|
|
|
+ console.log("---------");
|
|
|
+ },
|
|
|
},
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
- beforeCreate() { }, //生命周期 - 创建之前
|
|
|
- beforeMount() { }, //生命周期 - 挂载之前
|
|
|
- beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
- updated() { }, //生命周期 - 更新之后
|
|
|
- beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
- destroyed() { }, //生命周期 - 销毁完成
|
|
|
- activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
-}
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
.My {
|
|
|
@@ -87,10 +93,10 @@ export default {
|
|
|
overflow-y: auto;
|
|
|
padding: 20px 15px;
|
|
|
position: relative;
|
|
|
- .issue{
|
|
|
+ .issue {
|
|
|
margin: 20px 0;
|
|
|
text-align: center;
|
|
|
- &>img{
|
|
|
+ & > img {
|
|
|
width: 40px;
|
|
|
}
|
|
|
}
|
|
|
@@ -108,7 +114,7 @@ export default {
|
|
|
height: 30px;
|
|
|
border-radius: 3px;
|
|
|
z-index: 2;
|
|
|
- background-color: #FE6E69;
|
|
|
+ background-color: #fe6e69;
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
line-height: 30px;
|
|
|
@@ -116,7 +122,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.searInco {
|
|
|
- color: #A0A0A0;
|
|
|
+ color: #a0a0a0;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
@@ -134,7 +140,7 @@ export default {
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
padding: 0px 0 0px 36px;
|
|
|
- background-color: #F4F4F4;
|
|
|
+ background-color: #f4f4f4;
|
|
|
border-radius: 15px;
|
|
|
}
|
|
|
}
|
|
|
@@ -150,14 +156,14 @@ export default {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
- &>div {
|
|
|
+ & > div {
|
|
|
text-align: center;
|
|
|
min-width: 60px;
|
|
|
padding: 0 5px;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
border-radius: 2px;
|
|
|
- background-color: #F4F4F4;
|
|
|
+ background-color: #f4f4f4;
|
|
|
margin: 0 15px 15px 0;
|
|
|
font-size: 12px;
|
|
|
color: #333333;
|
|
|
@@ -174,7 +180,7 @@ export default {
|
|
|
overflow: hidden;
|
|
|
width: 48%;
|
|
|
height: 260px;
|
|
|
- background-color: #F7F8FA;
|
|
|
+ background-color: #f7f8fa;
|
|
|
border-radius: 4px;
|
|
|
color: #333333;
|
|
|
|
|
|
@@ -182,7 +188,7 @@ export default {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
|
|
|
- &>img {
|
|
|
+ & > img {
|
|
|
width: 100%;
|
|
|
height: 180px;
|
|
|
object-fit: cover;
|
|
|
@@ -205,7 +211,7 @@ export default {
|
|
|
.author_ll {
|
|
|
vertical-align: middle;
|
|
|
|
|
|
- &>img {
|
|
|
+ & > img {
|
|
|
margin-right: 5px;
|
|
|
width: 12px;
|
|
|
height: 12px;
|
