zoukankan      html  css  js  c++  java
  • vue移动端地址三级联动组件(二)

    继续上一篇:

    子组件css:

    <style scoped lang="less">
        #city {
             100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
        }
    
        .bg {
            background: black;
             100%;
            height: 100%;
            opacity: .4;
        }
    
        .city {
            position: fixed;
            bottom: 1.6rem;
             100%;
            height: 3.5rem;
            overflow: hidden;
            background: white;
            display: flex;
            padding-bottom: .4rem;
            div {
                position: relative;
                height: 100%;
                line-height: .7rem;
                text-align: center;
                flex: 1;
                p {
                    height: .7rem;
                    font-size: .28rem;
                    &.active {
                        font-weight: bold;
                    }
                }
                p:first-child {
                    margin: 1.6rem 0 0 0;
                }
    
                .line {
                    position: absolute;
                    right: 0;
                    top: 1.6rem;
                }
            }
    
        }
    
        .cencel {
             100%;
            height: .8rem;
            baclground: white;
            position: fixed;
            bottom: .0rem;
            left: 0;
            background: white;
            line-height: .8rem;
            text-align: center;
            border-top: 0.01rem solid #CCCCCC;
        }
    
        .determine {
             100%;
            height: .8rem;
            baclground: white;
            position: fixed;
            bottom: .8rem;
            left: 0;
            background: white;
            line-height: .8rem;
            text-align: center;
            border-top: 0.01rem solid #CCCCCC;
        }
    </style>

    父级组件调用:

     <template>
     <city :consignmentPlace="data.consignmentPlace" :va="va" text="发货地"></city>
    
    </template>
    <script>
    import city from '@/components/widget/cityAssembly';
    export default {
            components: {
                headerTem, upLoad, titleTel, category, city, passengers, price, prereleaseTem, specifications
            }
    }
    </script>

    :va是校验不能为空字段。可以忽略。

  • 相关阅读:
    数据操作-对数据的增删改查-单表查询和多表查询
    爬虫从入门到放弃
    爬虫从入门到放弃
    创建表的完整语法及表之间的关系
    树链剖分练习总结
    [BZOJ]1984: 月下“毛景树”
    [BZOJ]2243: [SDOI2011]染色
    [BZOJ]4034: [HAOI2015]树上操作
    NOIP2012题解
    CODEVS4633 [Mz]树链剖分练习
  • 原文地址:https://www.cnblogs.com/wjd2221/p/7777165.html
Copyright © 2011-2022 走看看