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"; @import "variable";
* { * {
padding: 0; padding : 0;
margin: 0; margin : 0;
box-sizing: border-box; box-sizing : border-box;
touch-action: auto; touch-action : auto;
-webkit-overflow-scrolling: touch; -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, html,
body { body {
// height:100vh; // height:100vh;
//min-height: 100%; //min-height: 100%;
height: 100vh; height : 100vh;
width: 100vw; width : 100vw;
margin: 0; margin : 0;
padding: 0; padding : 0;
//font-weight:300; //font-weight:300;
} }
...@@ -56,7 +56,7 @@ body { ...@@ -56,7 +56,7 @@ body {
.product_footer { .product_footer {
//bottom:calc(env(safe-area-inset-bottom) + 10px) !important; //bottom:calc(env(safe-area-inset-bottom) + 10px) !important;
padding-bottom: calc(env(safe-area-inset-bottom) / 1.5) !important; padding-bottom: calc(env(safe-area-inset-bottom) / 1.5) !important;
padding-top: 15px !important; padding-top : 15px !important;
} }
.header { .header {
...@@ -67,13 +67,13 @@ body { ...@@ -67,13 +67,13 @@ body {
::-webkit-scrollbar { ::-webkit-scrollbar {
// 直接复制黏贴到样式页.css，完美解决 // 直接复制黏贴到样式页.css，完美解决
display: none; display : none;
/* background-color:transparent; */ /* background-color:transparent; */
} }
.pay { .pay {
height: 100vh; height: 100vh;
width: 100vw; width : 100vw;
} }
#app { #app {
...@@ -95,9 +95,9 @@ html { ...@@ -95,9 +95,9 @@ html {
//iconfont start //iconfont start
.icon { .icon {
width: 1.2em; width : 1.2em;
height: 1.2em; height : 1.2em;
fill: currentColor; fill : currentColor;
overflow: hidden; overflow: hidden;
} }
...@@ -109,12 +109,12 @@ html { ...@@ -109,12 +109,12 @@ html {
.van-tabs__line { .van-tabs__line {
background-color: @theme; background-color: @theme;
bottom: 10px; bottom : 10px;
} }
.van-button--default { .van-button--default {
background-color: @headerBg; background-color: @headerBg;
color: #fff; color : #fff;
} }
.van-tab--active { .van-tab--active {
...@@ -144,18 +144,18 @@ html { ...@@ -144,18 +144,18 @@ html {
// vant Dialog 按钮背景色 和 字体颜色 // vant Dialog 按钮背景色 和 字体颜色
.van-dialog__cancel { .van-dialog__cancel {
background: #fff; background: #fff;
color: #545454; color : #545454;
} }
.van-dialog__confirm { .van-dialog__confirm {
background: #fff; background: #fff;
color: #5594E5; color : #5594E5;
} }
//vant nav //vant nav
.van-tabs__nav--line { .van-tabs__nav--line {
padding-bottom: 5px; padding-bottom: 5px;
box-sizing: border-box; box-sizing : border-box;
} }
// 清除浮动 // 清除浮动
...@@ -164,8 +164,8 @@ html { ...@@ -164,8 +164,8 @@ html {
&:before, &:before,
&:after { &:after {
display: block; display : block;
content: ""; content : "";
line-height: 0; line-height: 0;
} }
...@@ -178,27 +178,27 @@ html { ...@@ -178,27 +178,27 @@ html {
position: relative; position: relative;
&::before { &::before {
content: ""; content : "";
background-color: #999; background-color: #999;
height: 4px; height : 4px;
transform: scale(1, 0.3); transform : scale(1, 0.3);
width: 100px; width : 100px;
position: absolute; position : absolute;
top: 50%; top : 50%;
margin-top: -3px; margin-top : -3px;
left: 120px; left : 120px;
} }
&::after { &::after {
content: ""; content : "";
background-color: #999; background-color: #999;
height: 4px; height : 4px;
transform: scale(1, 0.3); transform : scale(1, 0.3);
width: 100px; width : 100px;
position: absolute; position : absolute;
top: 50%; top : 50%;
margin-top: -3px; margin-top : -3px;
right: 120px; right : 120px;
} }
} }
...@@ -224,4 +224,22 @@ html { ...@@ -224,4 +224,22 @@ html {
input { input {
border: none; border: none;
}
\ No newline at end of file \ 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> <template>
<section v-wrap:height="'v'"> <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"> <div class="nav_top_container" v-if="$slots.top">
<slot name="top" /> <slot name="top" />
</div> </div>
...@@ -44,6 +44,9 @@ export default { ...@@ -44,6 +44,9 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
navClass: {
type: String,
},
color: { color: {
type: String type: String
}, },
...@@ -82,7 +85,7 @@ export default { ...@@ -82,7 +85,7 @@ export default {
return { return {
barStyle: { barStyle: {
...barStyleBg, ...barStyleBg,
color: this.color || meta.color || '#fff' color: this.color || meta.color || '#fff',
}, },
barLeftText: this.leftText || meta.leftText || '', barLeftText: this.leftText || meta.leftText || '',
barTitle: this.title || meta.title || '', barTitle: this.title || meta.title || '',
...@@ -155,7 +158,7 @@ section { ...@@ -155,7 +158,7 @@ section {
} }
} }
.bgImgClass { .bgImgClass {
background: url(../assets/icon/bg_navigation.png) !important; background: url(../assets/icon/bg_login.png) !important;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% !important; background-size: 100% !important;
background-position: center center; 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!