|
|
@@ -0,0 +1,218 @@
|
|
|
+<template>
|
|
|
+ <div class="food-list-page">
|
|
|
+ <div class="banner-wrap">
|
|
|
+ <SearchBar class="search-bar" @search="onSearch"></SearchBar>
|
|
|
+ </div>
|
|
|
+ <div class="select-wrap">
|
|
|
+ <Select
|
|
|
+ class="select"
|
|
|
+ :valueList="orderList"
|
|
|
+ v-model="orderIdx"
|
|
|
+ :placeholder="'排序'"
|
|
|
+ ></Select>
|
|
|
+ <Select
|
|
|
+ class="select"
|
|
|
+ v-model="typeIdx"
|
|
|
+ :valueList="typeList"
|
|
|
+ :placeholder="'分类'"
|
|
|
+ ></Select>
|
|
|
+ <Select
|
|
|
+ class="select"
|
|
|
+ v-model="attractionIdx"
|
|
|
+ :valueList="attractionList"
|
|
|
+ :placeholder="'景点周边'"
|
|
|
+ ></Select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-list">
|
|
|
+ <!-- <div class="grid-sizer"></div> -->
|
|
|
+ <article
|
|
|
+ @click="onClickFoodList(index)"
|
|
|
+ >
|
|
|
+ <div class="img-wrap">
|
|
|
+ <img class="photo" :src="foodList[0].img" alt="" draggable="false">
|
|
|
+ <div class="address">
|
|
|
+ <img class="icon" src="@/assets/img/service/address-white.png" alt="" draggable="false">
|
|
|
+ fdaslkfdj
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h2>sadfslf</h2>
|
|
|
+ <h2>sadfslf</h2>
|
|
|
+ <h2>sadfslf</h2>
|
|
|
+ <h2>sadfslf</h2>
|
|
|
+ </article>
|
|
|
+ <article
|
|
|
+ v-for="(item, index) in foodList"
|
|
|
+ :key="index"
|
|
|
+ @click="onClickFoodList(index)"
|
|
|
+ >
|
|
|
+ <div class="img-wrap">
|
|
|
+ <img class="photo" :src="item.img" alt="" draggable="false">
|
|
|
+ <div class="address">
|
|
|
+ <img class="icon" src="@/assets/img/service/address-white.png" alt="" draggable="false">
|
|
|
+ {{item.address}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h2>{{item.title}}</h2>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import SearchBar from "@/components/SearchTransparent.vue";
|
|
|
+import Select from "@/components/Select.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ SearchBar,
|
|
|
+ Select,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderIdx: 0,
|
|
|
+ typeIdx: 0,
|
|
|
+ attractionIdx: 0,
|
|
|
+ foodList: [
|
|
|
+ {
|
|
|
+ img: require('@/assets/img/service/food1.png'),
|
|
|
+ address: '芜湖市凤凰美食街中心广场',
|
|
|
+ title: '虾籽面',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('@/assets/img/service/food1.png'),
|
|
|
+ address: '芜湖市凤凰美食街中心广场',
|
|
|
+ title: '虾籽面',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('@/assets/img/service/food1.png'),
|
|
|
+ address: '芜湖市凤凰美食街中心广场',
|
|
|
+ title: '虾籽面',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ orderList() {
|
|
|
+ return [
|
|
|
+ '全部',
|
|
|
+ '价格',
|
|
|
+ '距离',
|
|
|
+ '评价',
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ typeList() {
|
|
|
+ return [
|
|
|
+ '全部',
|
|
|
+ '中餐',
|
|
|
+ '西餐',
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ attractionList() {
|
|
|
+ return [
|
|
|
+ '全部',
|
|
|
+ '景点1',
|
|
|
+ '景点2',
|
|
|
+ '景点3',
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSearch() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onClickFoodList(index) {
|
|
|
+ this.$router.push({name: 'FoodDetail'})
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ $('.card-list').masonry({
|
|
|
+ itemSelector: '.card-list > article',
|
|
|
+ percentPosition: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.food-list-page {
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > .banner-wrap {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ height: 40vw;
|
|
|
+ background-image: url(~@/assets/img/service/food-banner.png);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 4.1vw;
|
|
|
+ position: relative;
|
|
|
+ > .search-bar {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 4.8vw;
|
|
|
+ left: 50%;
|
|
|
+ width: 80.1vw;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .select-wrap {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ margin: 0 4vw 4vw 4vw;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ > .select {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .card-list {
|
|
|
+ flex: 1 0 1px;
|
|
|
+ margin-left: 4vw;
|
|
|
+ overflow: auto;
|
|
|
+ > article {
|
|
|
+ width: 44vw;
|
|
|
+ padding-bottom: 2.7vw;
|
|
|
+ margin-bottom: 4vw;
|
|
|
+ margin-right: 4vw;;
|
|
|
+ display: inline-block;
|
|
|
+ > .img-wrap {
|
|
|
+ height: 53.3vw;
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ > img.photo {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ > .address {
|
|
|
+ position: absolute;
|
|
|
+ left: 2vw;
|
|
|
+ bottom: 2vw;
|
|
|
+ font-size: 2.7vw;
|
|
|
+ color: #FFFFFF;
|
|
|
+ > img.icon {
|
|
|
+ width: 2.7vw;
|
|
|
+ height: 3.6vw;
|
|
|
+ margin-right: 1vw;
|
|
|
+ vertical-align: -0.3em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > h2 {
|
|
|
+ margin: 2.7vw 2vw 3vw 2vw;
|
|
|
+ font-size: 3.5vw;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #454545;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
任一存
