|
|
@@ -0,0 +1,173 @@
|
|
|
+<template>
|
|
|
+ <div class="recommended-path">
|
|
|
+ <SearchBar class="search-bar" @search="onSearch"></SearchBar>
|
|
|
+ <div class="keywords">
|
|
|
+ <h2>推荐</h2>
|
|
|
+ <button
|
|
|
+ class="keyword"
|
|
|
+ v-for="(item, index) in recoKeywordList"
|
|
|
+ :key="index"
|
|
|
+ @click="onClickTag(item)"
|
|
|
+ >
|
|
|
+ {{item}}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="card-list">
|
|
|
+ <article
|
|
|
+ v-for="n in 10"
|
|
|
+ :key="n"
|
|
|
+ >
|
|
|
+ <div class="left">
|
|
|
+ <img src="@/assets/img/service/一日游.png" alt="" draggable="false">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <h3>【一日游】方特 欢乐世界+梦幻王国+中江塔+老海关客流数据格式的克里夫拉萨大家反抗拉萨酱豆腐考虑离开</h3>
|
|
|
+ <ul class="tags">
|
|
|
+ <li class="tag">一日游</li>
|
|
|
+ <li class="tag">自驾</li>
|
|
|
+ </ul>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="time">2022-10-10</div>
|
|
|
+ <div class="view-count">
|
|
|
+ <img class="icon" src="@/assets/img/service/eye.png" alt="" draggable="false">
|
|
|
+ 666
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import SearchBar from "@/components/SearchRedBtn.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ SearchBar,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ recoKeywordList: [
|
|
|
+ '一日游',
|
|
|
+ '古建筑',
|
|
|
+ '美食',
|
|
|
+ '快速浏览',
|
|
|
+ '美食',
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSearch(v) {
|
|
|
+ console.log('on search: ', v);
|
|
|
+ },
|
|
|
+ onClickTag(v) {
|
|
|
+ console.log('on click tag: ', v);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.recommended-path {
|
|
|
+ background-color: #fff;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ overflow: auto;
|
|
|
+ padding: 6.1vw 4.5vw 4.5vw 4.5vw;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .search-bar {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ }
|
|
|
+ .keywords {
|
|
|
+ margin-top: 4.1vw;
|
|
|
+ margin-right: -4.5vw;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ > h2 {
|
|
|
+ font-size: 3.5vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 3.2vw;
|
|
|
+ }
|
|
|
+ > button {
|
|
|
+ background: #F4F4F4;
|
|
|
+ border-radius: 0.5vw;
|
|
|
+ padding: 2.5vw 4vw;
|
|
|
+ font-size: 2.7vw;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 4.5vw;
|
|
|
+ margin-bottom: 3.2vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-list {
|
|
|
+ flex: 1 0 1px;
|
|
|
+ overflow: auto;
|
|
|
+ > article {
|
|
|
+ height: 29.6vw;
|
|
|
+ background: #F7F8FA;
|
|
|
+ box-shadow: 0vw 0.5vw 1.1vw 0vw rgba(109,128,166,0.29);
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 1.1vw;
|
|
|
+ margin-bottom: 5.6vw;
|
|
|
+ display: flex;
|
|
|
+ > .left {
|
|
|
+ height: 100%;
|
|
|
+ width: 21.3vw;
|
|
|
+ flex: 0 1 auto;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .right {
|
|
|
+ flex: 0 1 auto;
|
|
|
+ width: 69.7vw;
|
|
|
+ padding: 2.2vw 2vw 2.7vw 2vw;
|
|
|
+ > h3 {
|
|
|
+ font-size: 3.2vw;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 6.4vw;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 3vw;
|
|
|
+ }
|
|
|
+ > ul.tags {
|
|
|
+ margin-bottom: 2vw;
|
|
|
+ > li.tag {
|
|
|
+ border: 0.3vw solid #FE6E69;
|
|
|
+ border-radius: 0.5vw;
|
|
|
+ margin-right: 2.9vw;
|
|
|
+ padding: 0.8vw 2vw;
|
|
|
+ font-size: 2.7vw;
|
|
|
+ color: #FE6E69;
|
|
|
+ letter-spacing: 0.2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 2.7vw;
|
|
|
+ color: #333333;
|
|
|
+ > .time {
|
|
|
+ }
|
|
|
+ > .view-count {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > img {
|
|
|
+ width: 3.3vw;
|
|
|
+ height: 2.5vw;
|
|
|
+ margin-right: 0.9vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
