|
|
@@ -1,54 +1,50 @@
|
|
|
<template>
|
|
|
<div class="service" id="service-first-page">
|
|
|
- <div class="banner">
|
|
|
- <SearchBar class="search-bar" @search="onSearch"></SearchBar>
|
|
|
+ <div class="banner" @click="onClickBanner">
|
|
|
+ <SearchBar class="search-bar" @search="onSearch" @click.stop></SearchBar>
|
|
|
</div>
|
|
|
|
|
|
<menu>
|
|
|
- <router-link class="entry" :to="{name: 'RecommendedPath'}">
|
|
|
- <img src="@/assets/img/service/路线.png" alt="" draggable="false">
|
|
|
- <div>推荐路线</div>
|
|
|
- </router-link>
|
|
|
- <router-link class="entry" :to="{name: 'DontMiss'}">
|
|
|
- <img src="@/assets/img/service/景点.png" alt="" draggable="false">
|
|
|
- <div>必玩景点</div>
|
|
|
+ <router-link class="entry" :to="{name: ''}">
|
|
|
+ <img src="@/assets/img/service/booking.png" alt="" draggable="false">
|
|
|
+ <div>预约</div>
|
|
|
</router-link>
|
|
|
- <router-link class="entry" to="/">
|
|
|
+ <router-link class="entry" :to="{name: 'FoodList'}">
|
|
|
<img src="@/assets/img/service/美食.png" alt="" draggable="false">
|
|
|
<div>美食</div>
|
|
|
</router-link>
|
|
|
- <router-link class="entry" to="/">
|
|
|
- <img src="@/assets/img/service/出行.png" alt="" draggable="false">
|
|
|
- <div>出行</div>
|
|
|
- </router-link>
|
|
|
<router-link class="entry" :to="{name: 'HotelList'}">
|
|
|
<img src="@/assets/img/service/酒店住宿.png" alt="" draggable="false">
|
|
|
<div>酒店住宿</div>
|
|
|
</router-link>
|
|
|
+ <router-link class="entry" :to="{name: ''}">
|
|
|
+ <img src="@/assets/img/service/路线.png" alt="" draggable="false">
|
|
|
+ <div>导航</div>
|
|
|
+ </router-link>
|
|
|
</menu>
|
|
|
|
|
|
- <div class="travel-route-1">
|
|
|
+ <!-- <div class="travel-route-1">
|
|
|
<router-link class="entry" to="/">一日游推荐路线</router-link>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<div class="travel-route-2">
|
|
|
<h3>推荐路线</h3>
|
|
|
<router-link class="more" :to="{name: 'RecommendedPath'}">更多 》</router-link>
|
|
|
<div class="grid-wrap">
|
|
|
- <div class="left-wrap card">
|
|
|
+ <div class="left-wrap card" @click="onClickPathItem">
|
|
|
<img src="@/assets/img/service/一日游.png" alt="" draggable="false">
|
|
|
<h4>一日游</h4>
|
|
|
</div>
|
|
|
<div class="right-wrap">
|
|
|
- <div class="card">
|
|
|
+ <div class="card" @click="onClickPathItem">
|
|
|
<img src="@/assets/img/service/【快速浏览】.png" alt="" draggable="false">
|
|
|
<h4>【快速浏览】</h4>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
+ <div class="card" @click="onClickPathItem">
|
|
|
<img src="@/assets/img/service/【西洋建筑】.png" alt="" draggable="false">
|
|
|
<h4>【西洋建筑】</h4>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
+ <div class="card" @click="onClickPathItem">
|
|
|
<img src="@/assets/img/service/【古建筑】.png" alt="" draggable="false">
|
|
|
<h4>【古建筑】</h4>
|
|
|
</div>
|
|
|
@@ -56,7 +52,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="travel-plague">
|
|
|
+ <!-- <div class="travel-plague">
|
|
|
<h3>出游防疫</h3>
|
|
|
<router-link class="more" :to="{name: 'TravelPlague'}">更多 》</router-link>
|
|
|
<TabbarSmall :tabList="['景点开放', '出行政策']" @change="onTravelPlageTabbarChange"></TabbarSmall>
|
|
|
@@ -108,9 +104,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <div class="help-center">
|
|
|
+ <!-- <div class="help-center">
|
|
|
<h3>帮助中心</h3>
|
|
|
<router-link class="more" :to="{name: 'HelpCenter'}">更多 》</router-link>
|
|
|
<TabbarSmall :tabList="['常见问题', '服务电话']" @change="onHelpCenterTabbarChange"></TabbarSmall>
|
|
|
@@ -128,6 +124,50 @@
|
|
|
<span class="time">2022-10-10</span>
|
|
|
</div>
|
|
|
</ul>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="public-service">
|
|
|
+ <h3>公共服务</h3>
|
|
|
+ <router-link class="more" :to="{name: ''}">更多 》</router-link>
|
|
|
+ <menu>
|
|
|
+ <router-link class="entry" :to="{name: ''}">
|
|
|
+ <img src="@/assets/img/service/景区舒适区.png" alt="" draggable="false">
|
|
|
+ <div>景区舒适区</div>
|
|
|
+ </router-link>
|
|
|
+ <router-link class="entry" :to="{name: ''}">
|
|
|
+ <img src="@/assets/img/service/找厕所.png" alt="" draggable="false">
|
|
|
+ <div>找厕所</div>
|
|
|
+ </router-link>
|
|
|
+ <router-link class="entry" :to="{name: ''}">
|
|
|
+ <img src="@/assets/img/service/停车场.png" alt="" draggable="false">
|
|
|
+ <div>停车场</div>
|
|
|
+ </router-link>
|
|
|
+ <router-link class="entry" :to="{name: ''}">
|
|
|
+ <img src="@/assets/img/service/12348.png" alt="" draggable="false">
|
|
|
+ <div>12348</div>
|
|
|
+ </router-link>
|
|
|
+ </menu>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="wen-chuang-zuo-pin">
|
|
|
+ <h3>文创作品</h3>
|
|
|
+ <router-link class="more" :to="{name: ''}">更多 》</router-link>
|
|
|
+ <div class="card-list">
|
|
|
+ <div
|
|
|
+ class="card"
|
|
|
+ v-for="(item, index) in wenChuangZuoPinList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <img class="photo" :src="item.img" alt="" draggable="false">
|
|
|
+ <h3>{{item.title}}</h3>
|
|
|
+ <div class="bottom-bar">
|
|
|
+ <div class="price">
|
|
|
+ ￥ {{item.price}} 元
|
|
|
+ </div>
|
|
|
+ <img class="icon" src="@/assets/img/service/购物车.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<BackTop class="back-top" :targetId="'service-first-page'">
|
|
|
@@ -151,8 +191,29 @@ components: {
|
|
|
data() {
|
|
|
return {
|
|
|
searchKeyword: '',
|
|
|
- travelPlagueActiveIdx: '',
|
|
|
- helpCenterActiveIdx: '',
|
|
|
+ // travelPlagueActiveIdx: '',
|
|
|
+ wenChuangZuoPinList: [
|
|
|
+ {
|
|
|
+ img: require('@/assets/img/service/goods1.png'),
|
|
|
+ title: '文创作品名称',
|
|
|
+ price: '35',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('@/assets/img/service/goods2.png'),
|
|
|
+ title: '文创作品名称',
|
|
|
+ price: '35',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('@/assets/img/service/goods3.png'),
|
|
|
+ title: '文创作品名称',
|
|
|
+ price: '35',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('@/assets/img/service/goods4.png'),
|
|
|
+ title: '文创作品名称',
|
|
|
+ price: '35',
|
|
|
+ },
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
@@ -161,18 +222,20 @@ methods: {
|
|
|
onSearch(v) {
|
|
|
console.log('search: ', v);
|
|
|
},
|
|
|
- onTravelPlageTabbarChange(idx) {
|
|
|
- this.travelPlagueActiveIdx = idx
|
|
|
- this.$nextTick(() => {
|
|
|
- new Swiper(".swiper-container", {
|
|
|
- slidesPerView: 1.4,
|
|
|
- spaceBetween: 15,
|
|
|
- centeredSlides: true,
|
|
|
- })
|
|
|
- })
|
|
|
+ // onTravelPlageTabbarChange(idx) {
|
|
|
+ // this.travelPlagueActiveIdx = idx
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // new Swiper(".swiper-container", {
|
|
|
+ // slidesPerView: 1.4,
|
|
|
+ // spaceBetween: 15,
|
|
|
+ // centeredSlides: true,
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ onClickBanner() {
|
|
|
},
|
|
|
- onHelpCenterTabbarChange(idx) {
|
|
|
- this.helpCenterActiveIdx = idx
|
|
|
+ onClickPathItem() {
|
|
|
+ this.$router.push({name: 'RecommendedPathDetail'})
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -197,13 +260,14 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
height: calc(100% - 80px);
|
|
|
overflow: auto;
|
|
|
.banner {
|
|
|
- height: 31.9vw;
|
|
|
+ height: 57.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;
|
|
|
+ text-align: center;
|
|
|
.search-bar {
|
|
|
margin: 6.1vw 4.4vw 0 4.4vw;
|
|
|
}
|
|
|
@@ -218,7 +282,8 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
height: 23.5vw;
|
|
|
border-radius: 1.1vw;
|
|
|
> .entry {
|
|
|
- width: 12.1vw;
|
|
|
+ width: 12.2vw;
|
|
|
+ height: 12.2vw;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
@@ -228,40 +293,40 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
color: #535353;
|
|
|
line-height: 1.1em;
|
|
|
> img {
|
|
|
- width: 100%;
|
|
|
+ width: 6.4vw;
|
|
|
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-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;
|
|
|
+ padding: 3.7vw 3.5vw 4.5vw;
|
|
|
background: #fff;
|
|
|
> h3 {
|
|
|
font-size: 3.5vw;
|
|
|
@@ -270,13 +335,13 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
}
|
|
|
.more {
|
|
|
position: absolute;
|
|
|
- top: 2.7vw;
|
|
|
+ top: 4vw;
|
|
|
right: 3.6vw;
|
|
|
font-size: 2.7vw;
|
|
|
color: #333333;
|
|
|
}
|
|
|
.grid-wrap {
|
|
|
- margin-top: 3.1rem;
|
|
|
+ margin-top: 3.1vw;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.left-wrap {
|
|
|
@@ -341,13 +406,124 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- > .travel-plague {
|
|
|
+ // > .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;
|
|
|
+ // }
|
|
|
+ // .open-status {
|
|
|
+ // margin-top: 6vw;
|
|
|
+ // .swiper-slide {
|
|
|
+ // width: 75.5vw;
|
|
|
+ // height: 31.2vw;
|
|
|
+ // > img {
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0;
|
|
|
+ // top: 0;
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ // }
|
|
|
+ // > .title-wrap {
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0;
|
|
|
+ // bottom: 0;
|
|
|
+ // width: 100%;
|
|
|
+ // height: 8.5vw;
|
|
|
+ // background-color: rgba(15, 5, 9, 0.54);
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // > h4 {
|
|
|
+ // font-size: 3.2vw;
|
|
|
+ // font-weight: 600;
|
|
|
+ // color: #FFFFFF;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // > .help-center {
|
|
|
+ // border-radius: 1.1vw;
|
|
|
+ // margin: 0 0.7vw 4vw 0.7vw;
|
|
|
+ // position: relative;
|
|
|
+ // padding: 1.9vw 3.5vw 4.5vw;
|
|
|
+ // background: #fff;
|
|
|
+ // // 滚动条整体部分，其中的属性有width,height,background,border等。
|
|
|
+ // ::-webkit-scrollbar { width: 1.3vw; height: 1.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
|
|
|
+ // // 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，改变颜色。
|
|
|
+ // ::-webkit-scrollbar-button { display: none; }
|
|
|
+ // // 滑动轨道。可以用display:none让其不显示，也可以添加背景图片，改变颜色。另外还有::webkit-scrollbar-track-piece这个是内层轨道？有吗？
|
|
|
+ // ::-webkit-scrollbar-track { background: rgba(84, 84, 84, 0.11); border-radius: 0.5vw; }
|
|
|
+ // // 滑块
|
|
|
+ // ::-webkit-scrollbar-thumb { background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%); border-radius: 0.5vw; }
|
|
|
+ // // 横竖滚动条轨道交汇处
|
|
|
+ // ::-webkit-scrollbar-corner { display: none; }
|
|
|
+ // ::-webkit-scrollbar-resizer { display: none; }
|
|
|
+ // > 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;
|
|
|
+ // }
|
|
|
+ // > ul {
|
|
|
+ // margin-top: 6vw;
|
|
|
+ // height: 42vw;
|
|
|
+ // overflow: auto;
|
|
|
+ // > div {
|
|
|
+ // border-bottom: 1px solid #E5E5E5;
|
|
|
+ // margin-bottom: 7.1vw;
|
|
|
+ // &:last-of-type {
|
|
|
+ // border-bottom: initial;
|
|
|
+ // margin-bottom: initial;
|
|
|
+ // }
|
|
|
+ // > h4 {
|
|
|
+ // font-size: 3.2vw;
|
|
|
+ // font-weight: bold;
|
|
|
+ // color: #000000;
|
|
|
+ // overflow: hidden;
|
|
|
+ // white-space: pre;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ // margin-bottom: 3.9vw;
|
|
|
+ // }
|
|
|
+ // > span {
|
|
|
+ // display: inline-block;
|
|
|
+ // margin-right: 2em;
|
|
|
+ // margin-bottom: 1.5vw;
|
|
|
+ // font-size: 3.2vw;
|
|
|
+ // color: #DCDCDC;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ > .public-service {
|
|
|
+ margin: 0 0.8vw 6.5vw 0.8vw;
|
|
|
+ background: #fff;
|
|
|
border-radius: 1.1vw;
|
|
|
- margin: 0 0.7vw 4vw 0.7vw;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
- padding: 1.9vw 3.5vw 4.5vw;
|
|
|
- background: #fff;
|
|
|
+ padding: 3.7vw 3.5vw 2vw;
|
|
|
> h3 {
|
|
|
font-size: 3.5vw;
|
|
|
font-weight: bold;
|
|
|
@@ -355,98 +531,96 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
}
|
|
|
.more {
|
|
|
position: absolute;
|
|
|
- top: 2.7vw;
|
|
|
+ top: 4vw;
|
|
|
right: 3.6vw;
|
|
|
font-size: 2.7vw;
|
|
|
color: #333333;
|
|
|
}
|
|
|
- .open-status {
|
|
|
- margin-top: 6vw;
|
|
|
- .swiper-slide {
|
|
|
- width: 75.5vw;
|
|
|
- height: 31.2vw;
|
|
|
+ > menu {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 23.5vw;
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ > .entry {
|
|
|
+ width: 15vw;
|
|
|
+ height: 15vw;
|
|
|
+ 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 {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- > .title-wrap {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- height: 8.5vw;
|
|
|
- background-color: rgba(15, 5, 9, 0.54);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- > h4 {
|
|
|
- font-size: 3.2vw;
|
|
|
- font-weight: 600;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ height: 8vw;
|
|
|
+ margin-bottom: 2.7vw;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- > .help-center {
|
|
|
+
|
|
|
+ > .wen-chuang-zuo-pin {
|
|
|
+ margin: 0 0.8vw 6.5vw 0.8vw;
|
|
|
+ background: #fff;
|
|
|
border-radius: 1.1vw;
|
|
|
- margin: 0 0.7vw 4vw 0.7vw;
|
|
|
+ overflow: hidden;
|
|
|
position: relative;
|
|
|
- padding: 1.9vw 3.5vw 4.5vw;
|
|
|
- background: #fff;
|
|
|
- // 滚动条整体部分，其中的属性有width,height,background,border等。
|
|
|
- ::-webkit-scrollbar { width: 1.3vw; height: 1.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
|
|
|
- // 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，改变颜色。
|
|
|
- ::-webkit-scrollbar-button { display: none; }
|
|
|
- // 滑动轨道。可以用display:none让其不显示，也可以添加背景图片，改变颜色。另外还有::webkit-scrollbar-track-piece这个是内层轨道？有吗？
|
|
|
- ::-webkit-scrollbar-track { background: rgba(84, 84, 84, 0.11); border-radius: 0.5vw; }
|
|
|
- // 滑块
|
|
|
- ::-webkit-scrollbar-thumb { background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%); border-radius: 0.5vw; }
|
|
|
- // 横竖滚动条轨道交汇处
|
|
|
- ::-webkit-scrollbar-corner { display: none; }
|
|
|
- ::-webkit-scrollbar-resizer { display: none; }
|
|
|
+ padding: 3.7vw 3.5vw 4.5vw;
|
|
|
> h3 {
|
|
|
font-size: 3.5vw;
|
|
|
font-weight: bold;
|
|
|
color: #000000;
|
|
|
+ margin-bottom: 4vw;;
|
|
|
}
|
|
|
.more {
|
|
|
position: absolute;
|
|
|
- top: 2.7vw;
|
|
|
+ top: 4vw;
|
|
|
right: 3.6vw;
|
|
|
font-size: 2.7vw;
|
|
|
color: #333333;
|
|
|
}
|
|
|
- > ul {
|
|
|
- margin-top: 6vw;
|
|
|
- height: 42vw;
|
|
|
- overflow: auto;
|
|
|
- > div {
|
|
|
- border-bottom: 1px solid #E5E5E5;
|
|
|
- margin-bottom: 7.1vw;
|
|
|
- &:last-of-type {
|
|
|
- border-bottom: initial;
|
|
|
- margin-bottom: initial;
|
|
|
+ > div.card-list {
|
|
|
+ margin-right: -4.1vw;
|
|
|
+ > .card {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(50% - 4.1vw);
|
|
|
+ height: 64.7vw;
|
|
|
+ background: #F7F8FA;
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 4.1vw;
|
|
|
+ margin-bottom: 2.3vw;
|
|
|
+ > img.photo {
|
|
|
+ width: 100%;
|
|
|
+ height: 44.5vw;
|
|
|
+ object-fit: cover;
|
|
|
+ margin-bottom: 3.1vw;
|
|
|
}
|
|
|
- > h4 {
|
|
|
+ > h3 {
|
|
|
font-size: 3.2vw;
|
|
|
font-weight: bold;
|
|
|
- color: #000000;
|
|
|
- overflow: hidden;
|
|
|
- white-space: pre;
|
|
|
- text-overflow: ellipsis;
|
|
|
- margin-bottom: 3.9vw;
|
|
|
+ color: #333333;
|
|
|
+ margin-left: 2.3vw;
|
|
|
+ margin-right: 2.3vw;
|
|
|
+ margin-bottom: 3.5vw;
|
|
|
}
|
|
|
- > span {
|
|
|
- display: inline-block;
|
|
|
- margin-right: 2em;
|
|
|
- margin-bottom: 1.5vw;
|
|
|
- font-size: 3.2vw;
|
|
|
- color: #DCDCDC;
|
|
|
+ > .bottom-bar {
|
|
|
+ margin-left: 2.3vw;
|
|
|
+ margin-right: 2.3vw;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ > .price {
|
|
|
+ font-size: 2.7vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF0000;
|
|
|
+ }
|
|
|
+ > img.icon {
|
|
|
+ width: 4.1vw;
|
|
|
+ height: 4.1vw;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
