标签:shop 异步 color 100% float width 外卖 硅谷 font
一、App.vue
created() { this.$store.dispatch('getAddress') }
二、Msite.vue
<template> <section class="msite"> <!--首页头部--> <HeaderTop :title="address.name"> <router-link slot="search" to="/search" class="header_search"> <i class="iconfont icon-sousuo"></i> </router-link> <router-link slot="login" to="/login" class="header_login"> <span class="header_login_text">登录|注册</span> </router-link> </HeaderTop> <!--首页导航--> <nav class="msite_nav"> <div class="swiper-container" v-if="categorysArr.length > 0"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(cs, index) in categorysArr" :key="index"> <a href="javascript:" class="link_to_food" v-for="(c, index2) in cs" :key="index2"> <div class="food_container"> <img :src="imgBaseUrl + c.image_url"> </div> <span>{{ c.title }}</span> </a> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <img src="./images/msite_back.svg" v-else> </nav> <!--首页附近商家--> <div class="msite_shop_list"> <div class="shop_header"> <i class="iconfont icon-xuanxiang"></i> <span class="shop_header_title">附近商家</span> </div> <ShopList/> </div> </section> </template> <script> import Swiper from 'swiper' import 'swiper/dist/css/swiper.min.css' import HeaderTop from '../../components/HeaderTop/HeaderTop' import ShopList from '../../components/ShopList/ShopList' import {mapState} from 'vuex' export default { name: 'Msite', data () { return { imgBaseUrl: 'https://fuss10.elemecdn.com' } }, mounted() { this.$store.dispatch('getShops') this.$store.dispatch('getCategorys') }, computed: { ...mapState(['address', 'categorys']), categorysArr () { const max = 8 const arr = [] const {categorys} = this let smallArr = [] categorys.forEach((c, index) => { if(smallArr.length === 0) { arr.push(smallArr) } smallArr.push(c) if(smallArr.length === max) { smallArr = [] } }) return arr } }, components: { HeaderTop, ShopList }, watch: { categorys(value) { this.$nextTick(() => { new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination' }, loop: true }) }) } } } </script> <style lang="stylus" rel="stylesheet/stylus"> @import "../../common/stylus/mixins.styl" &.msite //首页 width 100% .msite_nav bottom-border-1px(#e4e4e4) margin-top 45px height 200px background #fff .swiper-container width 100% height 100% .swiper-wrapper width 100% height 100% .swiper-slide display flex justify-content center align-items flex-start flex-wrap wrap .link_to_food width 25% .food_container display block width 100% text-align center padding-bottom 10px font-size 0 img display inline-block width 50px height 50px span display block width 100% text-align center font-size 13px color #666 .swiper-pagination >span.swiper-pagination-bullet-active background #02a774 .msite_shop_list top-border-1px(#e4e4e4) margin-top 10px background #fff .shop_header padding 10px 10px 0 .shop_icon margin-left 5px color #999 .shop_header_title color #999 font-size 14px line-height 20px </style>
三、ShopList.vue
<template> <div class="shop_container"> <ul class="shop_list"> <li class="shop_li border-1px" v-for="(shop, index) in shops" :key="index"> <a> <div class="shop_left"> <img class="shop_img" :src="shop.image_path"> </div> <div class="shop_right"> <section class="shop_detail_header"> <h4 class="shop_title ellipsis">{{shop.name}}</h4> <ul class="shop_detail_ul"> <li class="supports" v-for="(item) in shop.supports">{{item.icon_name}}</li> </ul> </section> <section class="shop_rating_order"> <section class="shop_rating_order_left"> <Star :size="24" :score="shop.rating"/> <div class="rating_section"> {{shop.rating}} </div> <div class="order_section"> 月售{{shop.recent_order_num}}单 </div> </section> <section class="shop_rating_order_right"> <span class="delivery_style delivery_right">{{shop.delivery_mode.text}}</span> </section> </section> <section class="shop_distance"> <p class="shop_delivery_msg"> <span>¥{{shop.float_minimum_order_amount}}起送</span> <span class="segmentation">/</span> <span>配送费约¥{{shop.float_delivery_fee}}</span> </p> </section> </div> </a> </li> </ul> </div> </template> <script> import {mapState} from 'vuex' import Star from '../Star/Star' export default { name: 'ShopList', data () { return { imgBaseUrl: 'http://cangdu.org:8001/img/' } }, computed: { ...mapState(['shops']) }, components: { Star } } </script> <style lang="stylus" rel="stylesheet/stylus"> @import "../../common/stylus/mixins.styl" .shop_container margin-bottom 50px .shop_list .shop_li bottom-border-1px(#f1f1f1) width 100% >a clearFix() display block box-sizing border-box padding 15px 8px width 100% .shop_left float left box-sizing border-box width 23% height 75px padding-right 10px .shop_img display block width 100% height 100% .shop_right float right width 77% .shop_detail_header clearFix() width 100% .shop_title float left width 200px color #333 font-size 16px line-height 16px font-weight 700 &::before content '品牌' display inline-block font-size 11px line-height 11px color #333 background-color #ffd930 padding 2px 2px border-radius 2px margin-right 5px .shop_detail_ul float right margin-top 3px .supports float left font-size 10px color #999 border 1px solid #f1f1f1 padding 0 2px border-radius 2px .shop_rating_order clearFix() width 100% margin-top 18px margin-bottom 8px .shop_rating_order_left float left color #ff9a0d .rating_section float left font-size 10px color #ff6000 margin-left 4px .order_section float left font-size 10px color #666 transform scale(.8) .shop_rating_order_right float right font-size 0 .delivery_style transform-origin 35px 0 transform scale(.7) display inline-block font-size 12px padding 1px border-radius 2px .delivery_left color #fff margin-right -10px background-color #02a774 border 1px solid #02a774 .delivery_right color #02a774 border 1px solid #02a774 .shop_distance clearFix() width 100% font-size 12px .shop_delivery_msg float left transform-origin 0 transform scale(.9) color #666 .segmentation color #ccc </style>
标签:shop,异步,color,100%,float,width,外卖,硅谷,font 来源: https://www.cnblogs.com/mxsf/p/10991339.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。