|
|
@@ -0,0 +1,146 @@
|
|
|
+<config>
|
|
|
+{
|
|
|
+ "navigationStyle": "custom",
|
|
|
+ "navigationBarTextStyle": "white",
|
|
|
+ "backgroundColorTop":'#00ba64',
|
|
|
+ "backgroundColorBottom":'#f5f7fa',
|
|
|
+}
|
|
|
+</config>
|
|
|
+<template>
|
|
|
+ <div class="app">
|
|
|
+ <img src="../native/yajing-png-bg@3x.png" alt="" class="bg" />
|
|
|
+ <swiper class="my-swiper" indicator-dots autoplay :interval="5000" :duration="500">
|
|
|
+ <block v-for="(item, index) in banners" :key="index">
|
|
|
+ <swiper-item>
|
|
|
+ <img class="banner-img" :src="item.pic" alt="" />
|
|
|
+ </swiper-item>
|
|
|
+ </block>
|
|
|
+ </swiper>
|
|
|
+ <div class="list">
|
|
|
+ <div class="list-title">
|
|
|
+ 热门门店
|
|
|
+ </div>
|
|
|
+ <div class="room" v-for="(item, index) in list" :key="index">
|
|
|
+ <img :src="item.pic" alt="" class="room-img" />
|
|
|
+ <div class="room-info">
|
|
|
+ <div class="text1">{{ item.storeName }}</div>
|
|
|
+ <div class="text2">
|
|
|
+ <div class="text">
|
|
|
+ <div>
|
|
|
+ {{ item.address }}
|
|
|
+ </div>
|
|
|
+ <div>联系电话：{{ item.phone }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="price">¥{{ item.money }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ banners: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getBanner();
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getBanner() {
|
|
|
+ this.$http
|
|
|
+ .get('/banner/all', {
|
|
|
+ sort: 'sort,asc'
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.banners = res.content;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.$http.get('/clientStoreInfo/all').then(res => {
|
|
|
+ this.list = res.content;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.app {
|
|
|
+ background: #f5f7fa !important;
|
|
|
+ // padding-bottom: 200px;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ min-height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ padding-top: 62px;
|
|
|
+ .bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 220px;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.my-swiper {
|
|
|
+ margin: 16px;
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 160px;
|
|
|
+ .banner-img {
|
|
|
+ height: 160px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list {
|
|
|
+ padding: 16px;
|
|
|
+ .list-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .room-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .room {
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .room-info {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 12px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-top: 5px;
|
|
|
+ .text {
|
|
|
+ flex-grow: 1;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00ba64;
|
|
|
+ line-height: 21px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
