Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 6beff104 by amateur
Options

修改头部背景全局样式

1 parent 25313a5b
Inline Side-by-side
Showing 3 changed files with 245 additions and 42 deletions
src/assets/css/common.css 0 → 100644
* {
padding: 0;
margin: 0;
box-sizing: border-box;
touch-action: auto;
-webkit-overflow-scrolling: touch;
font-family: "苹方黑体-准-简", "PingFangSC-Regular", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft Jhenghei", sans-serif;
}
html,
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.iPhone .NavBar {
padding-top: calc(env(safe-area-inset-top) / 1.5);
}
.iPhone .NavBarWrap {
margin-bottom: calc(env(safe-area-inset-top) / 1.5);
}
.iPhone .payment_nav {
padding-top: calc(env(safe-area-inset-top) / 1.5);
}
.iPhone .payment_navbar_wrap {
padding-top: calc(env(safe-area-inset-top) / 1.5);
}
.iPhone .home {
padding-bottom: env(safe-area-inset-top);
}
.iPhone .navigation {
padding-top: calc(env(safe-area-inset-top) / 1.5) !important;
}
.iPhone .addAddress,
.iPhone .shop_item {
padding-top: calc(env(safe-area-inset-top) / 1.5);
}
.iPhone .product_footer {
padding-bottom: calc(env(safe-area-inset-bottom) / 1.5) !important;
padding-top: 15px !important;
}
.iPhone .header {
padding-top: calc(env(safe-area-inset-top) / 1.5) !important;
}
}
::-webkit-scrollbar {
display: none;
/* background-color:transparent; */
}
.pay {
height: 100vh;
width: 100vw;
}
#app {
height: 100vh;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
html {
-webkit-tap-highlight-color: transparent;
}
.icon {
width: 1.2em;
height: 1.2em;
fill: currentColor;
overflow: hidden;
}
.van-tabs__wrap--scrollable .van-tab {
flex: 1;
}
.van-tabs__line {
background-color: #729ae0;
bottom: 10px;
}
.van-button--default {
background-color: #292F42;
color: #fff;
}
.van-tab--active {
color: #729ae0;
}
.titlePaddingTop {
padding-top: 88px;
}
.left-enter,
.left-leave-to {
transform: translate3d(-100%, 0, 0);
}
.left-leave,
.left-enter-to {
transform: translate3d(0, 0, 0);
}
.left-enter-active,
.left-leave-active {
transition: all 0.2s;
}
.van-dialog__cancel {
background: #fff;
color: #545454;
}
.van-dialog__confirm {
background: #fff;
color: #5594E5;
}
.van-tabs__nav--line {
padding-bottom: 5px;
box-sizing: border-box;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: block;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.van-list__finished-text {
position: relative;
}
.van-list__finished-text::before {
content: "";
background-color: #999;
height: 4px;
transform: scale(1, 0.3);
width: 100px;
position: absolute;
top: 50%;
margin-top: -3px;
left: 120px;
}
.van-list__finished-text::after {
content: "";
background-color: #999;
height: 4px;
transform: scale(1, 0.3);
width: 100px;
position: absolute;
top: 50%;
margin-top: -3px;
right: 120px;
}
.noList .van-list__finished-text {
visibility: hidden !important;
}
.van-image-preview__index {
top: 93%;
}
.van-list__finished-text::before {
left: 2.1rem;
}
.van-list__finished-text::after {
right: 2.1rem;
}
input {
border: none;
}
.nafmii-head-bg1 {
background: url("~@/assets/icon/bg_login.png") no-repeat !important;
background-size: 100% !important;
background-position: center center;
}
.nafmii-head-bg2 {
background: url("~@/assets/icon/bg_mine.png") no-repeat !important;
background-size: 100% !important;
background-position: center center;
}
.nafmii-head-bg3 {
background: url("~@/assets/icon/bg_common.png") no-repeat !important;
background-size: 100% !important;
background-position: center center;
}
src/assets/css/common.less
@import "variable";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
touch-action: auto;
padding : 0;
margin : 0;
box-sizing : border-box;
touch-action : auto;
-webkit-overflow-scrolling: touch;
font-family: "苹方黑体-准-简", "PingFangSC-Regular", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft Jhenghei", sans-serif;
font-family : "苹方黑体-准-简", "PingFangSC-Regular", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft Jhenghei", sans-serif;
}
html,
body {
// height:100vh;
//min-height: 100%;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
height : 100vh;
width : 100vw;
margin : 0;
padding : 0;
//font-weight:300;
}
......@@ -56,7 +56,7 @@ body {
.product_footer {
//bottom:calc(env(safe-area-inset-bottom) + 10px) !important;
padding-bottom: calc(env(safe-area-inset-bottom) / 1.5) !important;
padding-top: 15px !important;
padding-top : 15px !important;
}
.header {
......@@ -67,13 +67,13 @@ body {
::-webkit-scrollbar {
// 直接复制黏贴到样式页.css，完美解决
display: none;
display : none;
/* background-color:transparent; */
}
.pay {
height: 100vh;
width: 100vw;
width : 100vw;
}
#app {
......@@ -95,9 +95,9 @@ html {
//iconfont start
.icon {
width: 1.2em;
height: 1.2em;
fill: currentColor;
width : 1.2em;
height : 1.2em;
fill : currentColor;
overflow: hidden;
}
......@@ -109,12 +109,12 @@ html {
.van-tabs__line {
background-color: @theme;
bottom: 10px;
bottom : 10px;
}
.van-button--default {
background-color: @headerBg;
color: #fff;
color : #fff;
}
.van-tab--active {
......@@ -144,18 +144,18 @@ html {
// vant Dialog 按钮背景色 和 字体颜色
.van-dialog__cancel {
background: #fff;
color: #545454;
color : #545454;
}
.van-dialog__confirm {
background: #fff;
color: #5594E5;
color : #5594E5;
}
//vant nav
.van-tabs__nav--line {
padding-bottom: 5px;
box-sizing: border-box;
box-sizing : border-box;
}
// 清除浮动
......@@ -164,8 +164,8 @@ html {
&:before,
&:after {
display: block;
content: "";
display : block;
content : "";
line-height: 0;
}
......@@ -178,27 +178,27 @@ html {
position: relative;
&::before {
content: "";
content : "";
background-color: #999;
height: 4px;
transform: scale(1, 0.3);
width: 100px;
position: absolute;
top: 50%;
margin-top: -3px;
left: 120px;
height : 4px;
transform : scale(1, 0.3);
width : 100px;
position : absolute;
top : 50%;
margin-top : -3px;
left : 120px;
}
&::after {
content: "";
content : "";
background-color: #999;
height: 4px;
transform: scale(1, 0.3);
width: 100px;
position: absolute;
top: 50%;
margin-top: -3px;
right: 120px;
height : 4px;
transform : scale(1, 0.3);
width : 100px;
position : absolute;
top : 50%;
margin-top : -3px;
right : 120px;
}
}
......@@ -224,4 +224,22 @@ html {
input {
border: none;
}
\ No newline at end of file
}
.nafmii-head-bg1 {
background : url("~@/assets/icon/bg_login.png") no-repeat !important;
background-size : 100% !important;
background-position: center center;
}
.nafmii-head-bg2 {
background : url("~@/assets/icon/bg_mine.png") no-repeat !important;
background-size : 100% !important;
background-position: center center;
}
.nafmii-head-bg3 {
background : url("~@/assets/icon/bg_common.png") no-repeat !important;
background-size : 100% !important;
background-position: center center;
}
src/components/NafmHeader.vue
<template>
<section v-wrap:height="'v'">
<div class="nav_bar" :class="{bgImgClass:isBgImg}" :style="navObj.barStyle">
<div class="nav_bar" :class="navClass" :style="navObj.barStyle">
<div class="nav_top_container" v-if="$slots.top">
<slot name="top" />
</div>
......@@ -44,6 +44,9 @@ export default {
type: Boolean,
default: true
},
navClass: {
type: String,
},
color: {
type: String
},
......@@ -82,7 +85,7 @@ export default {
return {
barStyle: {
...barStyleBg,
color: this.color || meta.color || '#fff'
color: this.color || meta.color || '#fff',
},
barLeftText: this.leftText || meta.leftText || '',
barTitle: this.title || meta.title || '',
......@@ -155,7 +158,7 @@ section {
}
}
.bgImgClass {
background: url(../assets/icon/bg_navigation.png) !important;
background: url(../assets/icon/bg_login.png) !important;
background-repeat: no-repeat;
background-size: 100% !important;
background-position: center center;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!