vant导入组件 设置导航栏的less样式设置
2020-01-08 本文已影响0人
荼蘼toome
了解: 接受的二手项目
开发工具 vue + vant
主要是想修改导航栏的颜色,还有返回按钮颜色
![](https://img.haomeiwen.com/i18618153/ad0dea2b39049411.png)
下面的就是修改的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;
}
![](https://img.haomeiwen.com/i18618153/7581ef4a8c7976f2.png)
@import '~vant/lib/index.less';
扩展
设置鼠标指针样式
/* 将鼠标的形状改成手型指针*/
cursor:pointer;