首页代码总结
首页-header布局和样式实现
<style scoped lang='scss'> .header-group{ background-color: black; padding: 20px 14px 10px; .address-group{ color:white; font-size: 16px; font-weight: 700; } .search-group{ margin-top: 10px; } } </style> <template> <div class="home-container"> <div class="header-group"> <div class="address-group"> <i class="iconfont icon-location"></i> <span class="address">三里屯</span> <i class="iconfont icon-youjiantou-01"></i> </div> <div class="search-group"> <van-search placeholder="请输入关键词"></van-search> </div> </div> </div> </template> <script> import {Search} from "vant"; export default { name: 'home', data() { return { } }, components: { [Search.name]: Search, } } </script>
在App.vue中的通用样式代码
<style lang='scss'> @import 'style/init.css'; .van-search{ padding: 0; } </style>
实现效果如图
首页-商家排序操作栏完成
<style scoped lang='scss'> .header-group{ background-color: black; padding: 20px 14px 10px; .address-group{ color:white; font-size: 16px; font-weight: 700; } .search-group{ margin-top: 10px; } } </style> <style scoped> .van-dropdown-menu >>> .van-dropdown-menu__title{ color: #767676; } .van-dropdown-menu__item{ font-size: 14px; color: #767676; } </style> <template> <div class="home-container"> <div class="header-group"> <div class="address-group"> <i class="iconfont icon-location"></i> <span class="address">三里屯</span> <i class="iconfont icon-youjiantou-01"></i> </div> <div class="search-group"> <van-search placeholder="请输入关键词"></van-search> </div> </div> <div class="main-group"> <h2>推荐商家</h2> <van-dropdown-menu> <van-dropdown-item :options="sorts" v-model="sort"></van-dropdown-item> <div class="van-dropdown-menu__item">距离最近</div> <div class="van-dropdown-menu__item">品质联盟</div> <div class="van-dropdown-menu__item">筛选</div> </van-dropdown-menu> </div> </div> </template> <script> import {Search, DropdownMenu, DropdownItem} from "vant"; export default { name: 'home', data() { return { rate: 3, sort: 0, sorts: [ {text: '综合排序', value: 0}, {text: '爆款商品', value: 1}, {text: '活动商品', value: 2}, ] } }, components: { [Search.name]: Search, [DropdownMenu.name]: DropdownMenu, [DropdownItem.name]: DropdownItem, } } </script>
效果图如下
首页-商家列表完成
<style scoped lang='scss'> .header-group{ background-color: black; padding: 20px 14px 10px; .address-group{ color:white; font-size: 16px; font-weight: 700; } .search-group{ margin-top: 10px; } } .main-group{ h2{ padding: 20px 10px 10px; } .merchant-list{ .merchant-item{ padding: 10px; display: flex; .logo{ width: 85px; height: 64px; } .merchant-info{ margin-left: 5px; .merchant-name{ font-size: 16px; font-weight: 700; } .rate-group{ padding-top: 5px; } .tag-group{ padding-top: 5px; span{ margin-right: 2px; } } } } } } </style> <style scoped> .van-dropdown-menu >>> .van-dropdown-menu__title{ color: #767676; } .van-dropdown-menu__item{ font-size: 14px; color: #767676; } </style> <template> <div class="home-container"> <div class="header-group"> <div class="address-group"> <i class="iconfont icon-location"></i> <span class="address">三里屯</span> <i class="iconfont icon-youjiantou-01"></i> </div> <div class="search-group"> <van-search placeholder="请输入关键词"></van-search> </div> </div> <div class="main-group"> <h2>推荐商家</h2> <van-dropdown-menu> <van-dropdown-item :options="sorts" v-model="sort"></van-dropdown-item> <div class="van-dropdown-menu__item">距离最近</div> <div class="van-dropdown-menu__item">品质联盟</div> <div class="van-dropdown-menu__item">筛选</div> </van-dropdown-menu> <div class="merchant-list"> <div class="merchant-item"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603508165048&di=173933a25d0cfc7e41c08434c5aea9a4&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F09%2F17%2Fd33e536cb0c1cd3d139d421ed41a44ba.jpg" alt="" class="logo"> <div class="merchant-info"> <div class="merchant-name">肯德基</div> <div class="rate-group"> <van-rate size='12px' v-model="rate"></van-rate> </div> <div class="tag-group"> <van-tag plain>家常菜</van-tag> </div> </div> </div> </div> </div> </div> </template> <script> import {Search, DropdownMenu, DropdownItem, Rate, Tag} from "vant"; export default { name: 'home', data() { return { rate: 3, sort: 0, sorts: [ {text: '综合排序', value: 0}, {text: '爆款商品', value: 1}, {text: '活动商品', value: 2}, ] } }, components: { [Search.name]: Search, [DropdownMenu.name]: DropdownMenu, [DropdownItem.name]: DropdownItem, [Rate.name]: Rate, [Tag.name]: Tag } } </script>
实现效果如下图