|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="service" id="service-first-page">
|
|
|
<div class="banner">
|
|
|
<div class="search-wrap">
|
|
|
- <img class="icon" src="" alt="" draggable="false">
|
|
|
+ <img class="icon" src="@/assets/img/service/search.png" alt="" draggable="false">
|
|
|
<input
|
|
|
v-model.trim="searchKeyword"
|
|
|
maxlength="30"
|
|
|
@@ -20,41 +20,42 @@
|
|
|
</div>
|
|
|
|
|
|
<menu>
|
|
|
- <router-link to="">
|
|
|
- <img src="" alt="" draggable="false">
|
|
|
- 推荐路线
|
|
|
+ <router-link class="entry" to="/">
|
|
|
+ <img src="@/assets/img/service/路线.png" alt="" draggable="false">
|
|
|
+ <div>推荐路线</div>
|
|
|
</router-link>
|
|
|
- <router-link to="">
|
|
|
- <img src="" alt="" draggable="false">
|
|
|
- 必玩景点
|
|
|
+ <router-link class="entry" to="/">
|
|
|
+ <img src="@/assets/img/service/景点.png" alt="" draggable="false">
|
|
|
+ <div>必玩景点</div>
|
|
|
</router-link>
|
|
|
- <router-link to="">
|
|
|
- <img src="" alt="" draggable="false">
|
|
|
- 美食
|
|
|
+ <router-link class="entry" to="/">
|
|
|
+ <img src="@/assets/img/service/美食.png" alt="" draggable="false">
|
|
|
+ <div>美食</div>
|
|
|
</router-link>
|
|
|
- <router-link to="">
|
|
|
- <img src="" alt="" draggable="false">
|
|
|
- 出行
|
|
|
+ <router-link class="entry" to="/">
|
|
|
+ <img src="@/assets/img/service/出行.png" alt="" draggable="false">
|
|
|
+ <div>出行</div>
|
|
|
</router-link>
|
|
|
- <router-link to="">
|
|
|
- <img src="" alt="" draggable="false">
|
|
|
- 酒店住宿
|
|
|
+ <router-link class="entry" to="/">
|
|
|
+ <img src="@/assets/img/service/酒店住宿.png" alt="" draggable="false">
|
|
|
+ <div>酒店住宿</div>
|
|
|
</router-link>
|
|
|
</menu>
|
|
|
|
|
|
<div class="travel-route-1">
|
|
|
- <router-link>一日游推荐路线</router-link>
|
|
|
+ <router-link class="entry" to="/">一日游推荐路线</router-link>
|
|
|
</div>
|
|
|
|
|
|
<div class="travel-route-2">
|
|
|
<h3>推荐路线</h3>
|
|
|
- <router-link>更多 》</router-link>
|
|
|
- <!-- todo -->
|
|
|
+ <router-link class="more" to="/">更多 》</router-link>
|
|
|
+ <div class="grid-wrap">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="travel-plague">
|
|
|
<h3>出游防疫</h3>
|
|
|
- <router-link>更多 》</router-link>
|
|
|
+ <router-link class="more" to="/">更多 》</router-link>
|
|
|
<!-- todo tab -->
|
|
|
<div class="swiper">
|
|
|
<!-- todo -->
|
|
|
@@ -64,7 +65,7 @@
|
|
|
|
|
|
<div class="help-center">
|
|
|
<h3>帮助中心</h3>
|
|
|
- <router-link>更多 》</router-link>
|
|
|
+ <router-link class="more" to="/">更多 》</router-link>
|
|
|
<!-- todo tab -->
|
|
|
<ul class="questions">
|
|
|
<li v-for="n in 10" :key="n">
|
|
|
@@ -82,7 +83,9 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
- <BackTop class="back-top" :targetId="'service-first-page'"></BackTop>
|
|
|
+ <BackTop class="back-top" :targetId="'service-first-page'">
|
|
|
+ <img src="@/assets/img/service/back-top.png" alt="" draggable="false">
|
|
|
+ </BackTop>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -101,7 +104,9 @@ data() {
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
methods: {
|
|
|
+ onClickSearch() {
|
|
|
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
|
|
|
@@ -122,5 +127,166 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
<style lang='less' scoped>
|
|
|
.service {
|
|
|
background-color: #f0f0f0;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow: auto;
|
|
|
+ .banner {
|
|
|
+ height: 31.9vw;
|
|
|
+ background-image: url(~@/assets/img/service/banner.png);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 3.3vw;
|
|
|
+ .search-wrap {
|
|
|
+ margin: 6.1vw 4.4vw 0 4.4vw;
|
|
|
+ background: #F4F4F4;
|
|
|
+ height: 6.9vw;
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 2.7vw;
|
|
|
+ > img.icon {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ width: 2.8vw;
|
|
|
+ height: 2.8vw;
|
|
|
+ margin-left: 2.1vw;
|
|
|
+ }
|
|
|
+ > input {
|
|
|
+ flex: 1 0 1px;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 2.1vw;
|
|
|
+ }
|
|
|
+ > button.search {
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(0deg, #FE6E69 0%, #FF7C6E 100%);
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ padding-left: 1.9vw;
|
|
|
+ padding-right: 1.9vw;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > menu {
|
|
|
+ margin: 0 0.8vw 4vw 0.8vw;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 23.5vw;
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ > .entry {
|
|
|
+ width: 12.1vw;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 2.9vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #535353;
|
|
|
+ line-height: 1.1em;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 2.7vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .travel-route-1 {
|
|
|
+ margin: 0 0 4vw 0;
|
|
|
+ height: 41.5vw;
|
|
|
+ background-image: url(~@/assets/img/service/travel-route-bg.png);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .entry {
|
|
|
+ position: absolute;
|
|
|
+ top: 1.5vw;
|
|
|
+ right: 0.7vw;
|
|
|
+ padding: 3.1vw 1.5vw;
|
|
|
+ background: rgba(15, 5, 9, 0.39);
|
|
|
+ font-size: 3.5vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFAFA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .travel-route-2 {
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ margin: 0 0.7vw 4vw 0.7vw;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ padding: 1.9vw 3.5vw 4.5vw;
|
|
|
+ background: #fff;
|
|
|
+ > h3 {
|
|
|
+ font-size: 3.5vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ position: absolute;
|
|
|
+ top: 2.7vw;
|
|
|
+ right: 3.6vw;
|
|
|
+ font-size: 2.7vw;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .travel-plague {
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ margin: 0 0.7vw 4vw 0.7vw;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ padding: 1.9vw 3.5vw 4.5vw;
|
|
|
+ background: #fff;
|
|
|
+ > h3 {
|
|
|
+ font-size: 3.5vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ position: absolute;
|
|
|
+ top: 2.7vw;
|
|
|
+ right: 3.6vw;
|
|
|
+ font-size: 2.7vw;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .help-center {
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ margin: 0 0.7vw 4vw 0.7vw;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ padding: 1.9vw 3.5vw 4.5vw;
|
|
|
+ background: #fff;
|
|
|
+ > h3 {
|
|
|
+ font-size: 3.5vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ position: absolute;
|
|
|
+ top: 2.7vw;
|
|
|
+ right: 3.6vw;
|
|
|
+ font-size: 2.7vw;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .back-top {
|
|
|
+ position: fixed;
|
|
|
+ bottom: calc(1.7vw + 40px);
|
|
|
+ right: 1.7vw;
|
|
|
+ width: 9.3vw;
|
|
|
+ height: 9.3vw;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
