标签：vue group name text 美团 padding Vue 10px font

商家列表

评分图标用vant组件

标签，用vant组件

修改css

<style scoped>
    .van-dropdown-menu >>> van-dropdown-menu__title{
        color: #767676;
    }
    .van-dropdown-menu__item{
        font-size: 14px;
        color: #767676;
    }
</style>

<style scoped lang="scss">
    .header-group {
        background-color: black;
        padding: 20px 14px 10px;
        .address-group {
        color: #fff;
        font-size: 16px;
        font-weight: 400;
        }
        .search-group{
            margin-top: 10px;
        }
    }
    .main-group{
        h2{
            padding: 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>



<template>
    <div class="home-container">
        <div class="header-group">
            <div class="address-group">
                <i class="iconfont icon-dingwei"></i>
                <span class="address">美国</span>
                <i class="iconfont icon-youjiantou"></i>
            </div>
            <div class="search-group">
                <van-search placeholder="请输入搜索关键词" />
            </div>
        </div>
        <div class="main-group">
            <h2>推荐商家</h2>
            <van-dropdown-menu>
                <van-dropdown-item v-model="sort" :options="sorts"></van-dropdown-item>
                <div class="van-dropdown-menu__item">距离最近</div>
                <div class="van-dropdown-menu__item">品质联盟</div>
                <div class="van-dropdown-menu__item">筛选<i class="iconfont icon-funnel"></i></div>
            </van-dropdown-menu>
            <div class="merchant-list">
                <div class="merchant-item">
                    <img src="https://tse3-mm.cn.bing.net/th/id/OIP.17S875eLr_HDQD8FGwagqQAAAA?w=151&h=201&c=7&o=5&dpr=1.25&pid=1.7"
                         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>
                            <van-tag plain>家常菜</van-tag>
                        </div>
                    </div>
                </div>
                <div class="merchant-item">
                    <img src="https://tse3-mm.cn.bing.net/th/id/OIP.17S875eLr_HDQD8FGwagqQAAAA?w=151&h=201&c=7&o=5&dpr=1.25&pid=1.7"
                         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>
                            <van-tag plain>家常菜</van-tag>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script type="text/ecmascript-6">
    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},
                    { text: '销量最高', value: 3},
                ]
            }
        },
        components: {
            [Search.name]: Search,
            [DropdownMenu.name]: DropdownMenu,
            [DropdownItem.name]: DropdownItem,
            [Rate.name]: Rate,
            [Tag.name]: Tag,
        }
    };
</script>

标签：vue,group,name,text,美团,padding,Vue,10px,font
来源： https://www.cnblogs.com/zhongyehai/p/12507603.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。