二手项目开发遇到的问题css

vant导入组件 设置导航栏的less样式设置

2020-01-08  本文已影响0人  荼蘼toome

了解: 接受的二手项目
开发工具 vue + vant
主要是想修改导航栏的颜色,还有返回按钮颜色


下面的就是修改的less文本
我看到第一行@import './customVars';导入样式
找到根级目录

@import './customVars';

.clearfix:after {
    content: "";
    display: block;
    clear  : both;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

html,
body {
    // font-family: Helvetica;
    font-family   : Helvetica, STHeiTi, sans-serif;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}


//背景色
.bgColor {
    background-color: #f5f5f5;
    min-height      : 100vh;
    box-sizing      : border-box;
    // overflow     : hidden;
}

.bgColorWhite {
    background-color: #fff;
    min-height      : 100vh;
    box-sizing      : border-box;
}

.btnLarge {
    display      : block;
    width        : 100%;
    border-radius: 10px;
    border       : 0;
    margin       : 20px 0;
    padding      : 10px;
    font-size    : 16px;
    color        : #555555;
    text-align   : center;
    background   : linear-gradient(to right, #44abdc, #4ea0e9);
    box-sizing   : border-box;
}


@min-space         : 5px; //最小间距
@hear-height       : 90px;
@normal-list-height: 100px;

@hint-color     : #B0B0B0;
@hint-span-color: #F5A623;

@white            : #ffffff;
@black            : #555555;    
@gray             : #8a8a8a;
@blur             : #529bef;
@green            : #37ab61;
@linear-green-blue: linear-gradient(to right, #20d4aa, #529bef);

.green {
    color: @green  !important;
}

.linear-green-blue {
    background: @linear-green-blue;
}

// 底部
@tabbar-height: 46px;

.tabbarPlaceholder {
    height: @tabbar-height;
}

@tabbar-item-font-size   : 10px;
@tabbar-item-text-color  : @gray;
@tabbar-item-active-color: @green;
@tabbar-item-icon-size   : 20px;

// 头部//// NavBar
@nav-bar-height             : 40px;

@nav-bar-arrow-size         : 18px;
@nav-bar-icon-color         : @black;
@nav-bar-text-color         : @white;
@nav-bar-title-font-size    : 15px;
@nav-bar-title-text-color   : @white;

.van-nav-bar {
    background:  @white;

    .van-nav-bar__title { 
        color: #555555;
        font-weight: bold;
    }
}


@swipe-indicator-active-background-color  : @green;
@swipe-indicator-inactive-background-color: @gray;

.home-swipe {
    margin       : 5px 13px;
    border-radius: 10px;
    box-shadow   : 0 0 8px rgba(78, 78, 78, 0.4);

    img {
        width  : 100%;
        display: block;
    }

    .van-swipe__indicators {
        left  : auto;
        right : 0;
        bottom: 8px;
    }

    .van-swipe__indicator {
        height       : 4px;
        width        : 6px;
        border-radius: 10px;
    }

    .van-swipe__indicator--active {
        width: 10px;
    }
}

// 
@grid-item-content-padding: 10px;

.vanGridBox {
    .van-grid-item__icon {
        font-size: 40px;
    }

    .van-grid-item__text {
        font-size  : 12px;
        font-weight: bold;
        color      : #333;
        margin-top : 5px;
    }
}

//
.marginTB10 {
    margin: 10px 0;
}

.storeBox {
    background-color: #fff;
    padding         : 1px 20px;

    .storeList {
        padding         : 8px;
        display         : flex;
        align-items     : center;
        color           : #242424;
        border-radius   : 10px;
        box-shadow      : 1px 2px 6px rgba(78, 78, 78, 0.2);
        margin          : 20px 0;
        background-color: #fff;

        img {
            display    : block;
            width      : 100px;
            flex-shrink: 0;
        }

        .store {
            flex        : 1;
            padding-left: 8px;
            line-height : 20px;

            h6 {
                font-size: 14px;
                color    : #1a1a1a;
            }

            .schedule {
                height          : 12px;
                line-height     : 14px;
                width           : 100%;
                background-color: #C1E0FF;
                border-radius   : 12px;
                margin          : 5px 0;

                div {
                    display      : block;
                    font-size    : 10px;
                    height       : 100%;
                    text-align   : right;
                    padding      : 0 8px;
                    color        : #fff;
                    background   : #3399f3;
                    border-radius: 12px;
                    box-sizing   : border-box;
                }
            }

            .van-row {
                font-size: 10px;

                span {
                    font-size: 12px;
                }
            }

            .sourceBox {
                display    : flex;
                height: 30px;
                line-height: 30px;


                &>div {
                    flex         : 1;
                    padding-right: 5px;
                }

                .btn {
                    height       : 22px;
                    line-height  : 22px;
                    padding      : 0 5px;
                    background   : #3399f3;
                    font-size    : 10px;
                    color        : #fff;
                    border-radius: 5px;
                    border       : 0;
                    margin-top: 5px;
                    margin-left:55px;
                }
            }
        }
    }
}

//// SubmitBar
@submit-bar-height                : 50px;
//@submit-bar-z-index             : 100;
@submit-bar-background-color      : #eee;


.submitBarPlaceholder {
    height: @submit-bar-height;
}

.projection {
    box-shadow: 1px 2px 6px rgba(78, 78, 78, 0.2);
}

.mediaBox {
    padding: 0 22px 20px;

    .videoBox {
        width : 100%;
        margin: 10px 0;

        video {
            display: block;
            width  : 100%;
        }
    }

    .imageText {
        img {
            max-width: 100%;
            display  : block;
            margin   : 10px 0;
        }

        p {
            text-indent: 2em;
            font-size  : 14px;
            color      : #313131;
            line-height: 24px;
            margin     : 5px 0;
        }
    }
}

.hiddenBox {
    overflow: hidden;
}

.btnBox {
    padding: 0 20px;
}
.interval10{
    padding: 5px;
    background: #f5f5f5;
}


@import '~vant/lib/index.less';

扩展

设置鼠标指针样式

    /* 将鼠标的形状改成手型指针*/
        cursor:pointer;
上一篇 下一篇

猜你喜欢

热点阅读