7b2主题美化 菜单栏美化以及添加VIP图标

效果图

图片[1]-7b2主题美化 菜单栏美化以及添加VIP图标-AA源码网 | 源码收藏

教程

  • 替换Header.php文件,路径为主题b2/Modules/Templates
  • css复制到主题下(后台-->主题-->自定义-->额外css中)
  • 图片替换到根目录下即可/www/wwwroot/站点/pic

CSS代码

/*导航头部开始*/
@media screen and (max-width:768px) {
.site-header{
height:70px!important;
}
}
.jiaobiao_color1{
color:#fff;
background-color:#03bbff;
}
.jiaobiao_color2{
color:#fff;
background-color:#ca26ff;
}
.jiaobiao_color3{
color:#fff;
background-color:#7bdcb5;
}
.jiaobiao_color4{
color:#fff;
background-color:#ff2a8e;
}
.jiaobiao_color5{
color:#fff;
background-color:#ff8f21;
}
.jiaobiao_color6{
color:#fff;
background-color:#00ce41;
}
@media screen and (max-width: 768px){
.header, .header .wrapper {
height: 44px!important;
}
.change-theme {
display:none!important;
}
.logo-center .login-button .b2-account-circle-line, .logo-left .login-button .b2-account-circle-line, .menu-center .login-button .b2-account-circle-line, .logo-top .login-button .b2-account-circle-line {
color: #121212!important;
}
}
.logo img {
display: block;
height: 45px;
}
.has_children .sub-menu a {
display: block;
align-items: center;
text-align: center;
}
.sub-menu {
top: 55px;
width: 125px;
}
.b2-menu-3 .sub-menu-0 a {
line-height: 20px;
}
.top-menu ul li.depth-0 > a {
font-size: 15px;
display: flex;
letter-spacing: 3px;
align-items: center;
position: relative;
z-index: 2;
height: 70px;
}
.top-menu ul li.depth-0 > a .hob {
width: 10px;
height: 3px;
border-radius: 5px;
bottom: 6px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: -5px;
right: 0;
text-align: center;
/* width: 100%; */
/* height: 3px; */
/* border-radius: 5px; */
/* top: 0px; */
/* position: absolute; */
/* margin-left: auto; */
/* margin-right: auto; */
/* left: 0; */
/* right: 0; */
/* text-align: center; */
}
.b2-menu-1 .sub-menu-0 li a img {
width: 50px;
height: 50px;
border-radius: 100%;
margin: auto;
}
.top-menu-ul > li.depth-0 + li.depth-0 > a .hob {
left: 0px;
right: 0px;
}
.site-header{
height:100px;
}
.site.up .site-header-in {
transform: translate(0,-100px);
transition: transform .3s,background-color .3s ease-out;
}
.top-style-blur {
top: 0px;
border-top: 1px solid #f5f6f7;
}
.top-style-blur {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 1px;
background: #fff;
}
.header, .header .wrapper {
height: 70px;
}
.header-banner .ym-menu a, .header-banner, .social-top .site-title, .top-search-button button, .top-search input, .login-button .b2-account-circle-line {
color: #ffffff!important;
fill: #ffffff!important;
}
.header-banner-content {
height: 30px;
}
.header-banner {
background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
}
.change-theme {
display: flex;
margin: 0 10px;
align-items: center;
float: left;
margin-top: 6px;
}
.login-button {
display: block;
align-items: center;
}
.social-top .header-login-button button {
margin-left: 0;
background: none;
border: 0;
color: inherit;
background: rgb(255 255 255 / 100%);
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
color: #ff3c56;
}
.header-login-button .emptya{
background: #ff3c56;
border: 1px solid #ff3c56!important;
border-radius: 5px;
}
.header-login-button button {
margin-left: 0px;
padding: 6px 6px;
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
color: var(--b2color)!important;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
font-size: 16px;
line-height: 22px;
color: #663f32;
letter-spacing: 0;
font-weight: 600;
margin-bottom: 4px;
}
.Onecad_benefitTag_benefits-wrapper {
position: relative;
margin-right: 5px;
/* width: 48px; */
display: flex;
justify-content: center;
height: 53px;
}
.benefitTag__benefits-icon___3aeab {
display:inline-block;
width:32px;
height:32px;
}
.benefitTag__benefits-text___5d19f {
font-size:12px;
color:#4d3626;
font-weight:600;
position:absolute;
bottom:0;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
white-space:nowrap;
}
.benefitTag__popover___fbaea {
min-width:0;
max-width:200px;
z-index:9;
}
.Onecad_memberWrapper {
position: relative;
padding: 5px 20px 20px;
/* background-image: linear-gradient(135deg,#f2d6c2,#f2c8aa); */
cursor: pointer;
display: flex;
flex-direction: column;
background-color: #ffffff87;
backdrop-filter: blur(10px);
align-items: center;
border-radius: 0px 0px 10px 10px;
box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1);
}
.Onecad_memberWrapper .Onecad_memberCard_member-header {
position:relative;
padding-top:12px;
font-weight:700;
white-space:nowrap;
text-align:center;
margin-bottom:16px;
width: 300px;
box-sizing:border-box;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
font-size:16px;
line-height:22px;
color:#663f32;
letter-spacing:0;
font-weight:600;
margin-bottom:4px;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
font-size:12px;
color:#663f32;
letter-spacing:0;
line-height:17px;
font-weight:400;
}
.Onecad_memberWrapper.Onecad_memberCard_none .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
height:25px;
width:180px;
margin-left:auto;
margin-right:auto;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,.Onecad_memberWrapper.memberCard__will-expired___3128d .Onecad_memberCard_member-header {
background:hsla(0,0%,100%,.8);
padding:16px 0;
border-radius:8px;
}
.Onecad_memberWrapper.memberCard__expired___9de29 {
background:#dadde0;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header, .Onecad_memberWrapper .Onecad_memberCard_member-benefits {
position:relative;
width: 100%;
box-sizing:border-box;
/* padding:12px 16px; */
background:hsla(0,0%,100%,.8);
border-radius:8px;
margin-bottom:16px;
white-space:nowrap;
overflow:hidden;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits li {
/* display:inline-block; */
float: left;
width: 25%;
margin: 10px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
position:absolute;
top:50%;
width:12px;
height:28px;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
background-color:rgba(230,163,115,.2);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all .25s;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 .memberCard__icon-font___9846a,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 .memberCard__icon-font___9846a {
color:#4d3626;
font-size:12px;
-webkit-transform:scale(.5);
transform:scale(.5);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917:hover,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46:hover {
background-color:rgba(230,163,115,.16);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 {
left:0;
border-radius:0 4px 4px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
right:0;
border-radius:4px 0 0 4px;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 {
position:relative;
width:152px;
height:32px;
background-image:linear-gradient(134deg,#4d5580,#3d4466);
font-size:14px;
color:#fff3eb;
font-weight:600;
display:flex;
align-items:center;
border-radius: 5px;
justify-content:center;
cursor:pointer;
}
.Onecad_memberWrapper>button{
border: 0!important;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:hover {
background-image:linear-gradient(134deg,rgba(77,85,128,.9),rgba
(61,68,102,.9));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:active {
background-image:linear-gradient(134deg,rgba(77,85,128,.8),rgba
(61,68,102,.8));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 .memberCard__tips___3220a {
top: -10px;
right: -15px;
position: absolute;
background-image: linear-gradient(90deg,#ff9580,#f36);
border-radius: 6px;
color: #fff;
letter-spacing: 0;
text-align: center;
font-weight: 100;
padding: 2px 8px;
font-size: 12px;
}
.Onecad_memberCard_benefitsLiWrapper {
position:relative;
left:0;
transition:left .3s linear;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
font-size:12px;
color:#663f32;
letter-spacing:0;
line-height:17px;
font-weight:400;
}
.Onecad_header_vip_topi {
padding:2px 6px 0 6px;
right: 0px;
line-height:24px;
color:#fff;
text-align:center;
position: absolute;
top: 1px;
box-sizing:border-box;
border-radius:16px;
font-size:19px;
white-space:nowrap;
-webkit-transform:scale(.5);
}
.Onecad_header_vip {
padding: 0px 20px;
position: relative;
width: 25px;
height: 25px;
margin-right: 20px;
background:url(/pic/vipiconhover.svg) no-repeat
50%/25px;
}
.Onecad_header_vip>i {
position: absolute;
top: -15px;
}
.Onecad_header_vip:hover .Onecad_member_tip[data-status=true] {
display:block;
}
.Onecad_member_tip {
position: absolute;
padding-top: 70px;
margin-top: -23px;
right: -14px;
display: none;
z-index: 8000;
}
.Onecad_header_vip i {
font-style: normal;
font-weight: 400;
}
/*导航头部结束*/
/*导航头部开始*/
@media screen and (max-width:768px) {
       
    .site-header{
    height:70px!important;
}
}
.jiaobiao_color1{
    color:#fff;
    background-color:#03bbff;
}
.jiaobiao_color2{
    color:#fff;
    background-color:#ca26ff;
}
.jiaobiao_color3{
    color:#fff;
    background-color:#7bdcb5;
}
.jiaobiao_color4{
    color:#fff;
    background-color:#ff2a8e;
}
.jiaobiao_color5{
    color:#fff;
    background-color:#ff8f21;
}
.jiaobiao_color6{
    color:#fff;
    background-color:#00ce41;
}
@media screen and (max-width: 768px){
.header, .header .wrapper {
    height: 44px!important;
}
.change-theme {
display:none!important;
    
}

.logo-center .login-button .b2-account-circle-line, .logo-left .login-button .b2-account-circle-line, .menu-center .login-button .b2-account-circle-line, .logo-top .login-button .b2-account-circle-line {
    color: #121212!important;
}


}

.logo img {
    display: block;
    height: 45px;
}
.has_children .sub-menu a {
    display: block;
    align-items: center;
    text-align: center;
}
.sub-menu {
    top: 55px;
    width: 125px;

}
.b2-menu-3 .sub-menu-0 a {
    line-height: 20px;
}
.top-menu ul li.depth-0 > a {
    font-size: 15px;
    display: flex;
    letter-spacing: 3px;
    align-items: center;
    position: relative;
    z-index: 2;
    height: 70px;
}
.top-menu ul li.depth-0 > a .hob {
    width: 10px;
    height: 3px;
    border-radius: 5px;
    bottom: 6px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -5px;
    right: 0;
    text-align: center;
    /* width: 100%; */
    /* height: 3px; */
    /* border-radius: 5px; */
    /* top: 0px; */
    /* position: absolute; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* left: 0; */
    /* right: 0; */
    /* text-align: center; */
}
.b2-menu-1 .sub-menu-0 li a img {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  margin: auto;
}
.top-menu-ul > li.depth-0 + li.depth-0 > a .hob {
    left: 0px; 
    right: 0px; 
}
.site-header{
    height:100px;
}
.site.up .site-header-in {
    transform: translate(0,-100px);
    transition: transform .3s,background-color .3s ease-out;
}
.top-style-blur {
    top: 0px;
    border-top: 1px solid #f5f6f7;
}
.top-style-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 1px;
    background: #fff;
}
.header, .header .wrapper {
    height: 70px;
}
.header-banner .ym-menu a, .header-banner, .social-top .site-title, .top-search-button button, .top-search input, .login-button .b2-account-circle-line {
    color: #ffffff!important;
    fill: #ffffff!important;
}
.header-banner-content {
    height: 30px;
}
.header-banner {
    background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
}
.change-theme {
    display: flex;
    margin: 0 10px;
    align-items: center;
    float: left;
    margin-top: 6px;
}

.login-button {
    display: block;
    align-items: center;
}
.social-top .header-login-button button {
    margin-left: 0;
    background: none;
    border: 0;
    color: inherit;
    background: rgb(255 255 255 / 100%);
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
    color: #ff3c56;
}
.header-login-button .emptya{
    background: #ff3c56;
    border: 1px solid #ff3c56!important;
    border-radius: 5px;
}
.header-login-button button {
    margin-left: 0px;
    padding: 6px 6px;
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
    color: var(--b2color)!important;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
    font-size: 16px;
    line-height: 22px;
    color: #663f32;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 4px;
}
.Onecad_benefitTag_benefits-wrapper {
    position: relative;
    margin-right: 5px;
    /* width: 48px; */
    display: flex;
    justify-content: center;
    height: 53px;
}
.benefitTag__benefits-icon___3aeab {
  display:inline-block;
  width:32px;
  height:32px;
}
.benefitTag__benefits-text___5d19f {
  font-size:12px;
  color:#4d3626;
  font-weight:600;
  position:absolute;
  bottom:0;
  left:50%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  white-space:nowrap;
}
.benefitTag__popover___fbaea {
  min-width:0;
  max-width:200px;
  z-index:9;
}

.Onecad_memberWrapper {
    position: relative;
    padding: 5px 20px 20px;
    /* background-image: linear-gradient(135deg,#f2d6c2,#f2c8aa); */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background-color: #ffffff87;
    backdrop-filter: blur(10px);
    align-items: center;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1);
    
}
.Onecad_memberWrapper .Onecad_memberCard_member-header {
  position:relative;
  padding-top:12px;
  font-weight:700;
  white-space:nowrap;
  text-align:center;
  margin-bottom:16px;
  width: 300px;
  box-sizing:border-box;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
  font-size:16px;
  line-height:22px;
  color:#663f32;
  letter-spacing:0;
  font-weight:600;
  margin-bottom:4px;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
  font-size:12px;
  color:#663f32;
  letter-spacing:0;
  line-height:17px;
  font-weight:400;
}
.Onecad_memberWrapper.Onecad_memberCard_none .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
  height:25px;
  width:180px;
  margin-left:auto;
  margin-right:auto;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,.Onecad_memberWrapper.memberCard__will-expired___3128d .Onecad_memberCard_member-header {
  background:hsla(0,0%,100%,.8);
  padding:16px 0;
  border-radius:8px;
}
.Onecad_memberWrapper.memberCard__expired___9de29 {
  background:#dadde0;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,  .Onecad_memberWrapper .Onecad_memberCard_member-benefits {
  position:relative;
  width: 100%;
  box-sizing:border-box;
  /* padding:12px 16px; */
  background:hsla(0,0%,100%,.8);
  border-radius:8px;
  margin-bottom:16px;
  white-space:nowrap;
  overflow:hidden;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits li {
  /* display:inline-block; */
  float: left;
  width: 25%;
  margin: 10px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
  position:absolute;
  top:50%;
  width:12px;
  height:28px;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  background-color:rgba(230,163,115,.2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 .memberCard__icon-font___9846a,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 .memberCard__icon-font___9846a {
  color:#4d3626;
  font-size:12px;
  -webkit-transform:scale(.5);
  transform:scale(.5);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917:hover,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46:hover {
  background-color:rgba(230,163,115,.16);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 {
  left:0;
  border-radius:0 4px 4px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
  right:0;
  border-radius:4px 0 0 4px;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 {
  position:relative;
  width:152px;
  height:32px;
  background-image:linear-gradient(134deg,#4d5580,#3d4466);
  font-size:14px;
  color:#fff3eb;
  font-weight:600;
  display:flex;
  align-items:center;
  border-radius: 5px;
  justify-content:center;
  cursor:pointer;
}
.Onecad_memberWrapper>button{
    border: 0!important;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:hover {
  background-image:linear-gradient(134deg,rgba(77,85,128,.9),rgba

(61,68,102,.9));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:active {
  background-image:linear-gradient(134deg,rgba(77,85,128,.8),rgba

(61,68,102,.8));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 .memberCard__tips___3220a {
    top: -10px;
    right: -15px;
    position: absolute;
    background-image: linear-gradient(90deg,#ff9580,#f36);
    border-radius: 6px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    font-weight: 100;
    padding: 2px 8px;
    font-size: 12px;
}
.Onecad_memberCard_benefitsLiWrapper {
  position:relative;
  left:0;
  transition:left .3s linear;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
  font-size:12px;
  color:#663f32;
  letter-spacing:0;
  line-height:17px;
  font-weight:400;
}

.Onecad_header_vip_topi {
  padding:2px 6px 0 6px;
  right: 0px;
  line-height:24px;
  color:#fff;
  text-align:center;
  position: absolute;
  top: 1px;
  box-sizing:border-box;
  border-radius:16px;
  font-size:19px;
  white-space:nowrap;
  -webkit-transform:scale(.5);
}
.Onecad_header_vip {
  padding: 0px 20px;
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 20px;
  background:url(/pic/vipiconhover.svg) no-repeat 

50%/25px;
}
.Onecad_header_vip>i {
    position: absolute;
    top: -15px;
}
.Onecad_header_vip:hover .Onecad_member_tip[data-status=true] {
  display:block;
}
.Onecad_member_tip {
position: absolute;
    padding-top: 70px;
    margin-top: -23px;
    right: -14px;
    display: none;
    z-index: 8000;
}
.Onecad_header_vip  i {
    font-style: normal;
    font-weight: 400;
}
/*导航头部结束*/
/*导航头部开始*/ @media screen and (max-width:768px) { .site-header{ height:70px!important; } } .jiaobiao_color1{ color:#fff; background-color:#03bbff; } .jiaobiao_color2{ color:#fff; background-color:#ca26ff; } .jiaobiao_color3{ color:#fff; background-color:#7bdcb5; } .jiaobiao_color4{ color:#fff; background-color:#ff2a8e; } .jiaobiao_color5{ color:#fff; background-color:#ff8f21; } .jiaobiao_color6{ color:#fff; background-color:#00ce41; } @media screen and (max-width: 768px){ .header, .header .wrapper { height: 44px!important; } .change-theme { display:none!important; } .logo-center .login-button .b2-account-circle-line, .logo-left .login-button .b2-account-circle-line, .menu-center .login-button .b2-account-circle-line, .logo-top .login-button .b2-account-circle-line { color: #121212!important; } } .logo img { display: block; height: 45px; } .has_children .sub-menu a { display: block; align-items: center; text-align: center; } .sub-menu { top: 55px; width: 125px; } .b2-menu-3 .sub-menu-0 a { line-height: 20px; } .top-menu ul li.depth-0 > a { font-size: 15px; display: flex; letter-spacing: 3px; align-items: center; position: relative; z-index: 2; height: 70px; } .top-menu ul li.depth-0 > a .hob { width: 10px; height: 3px; border-radius: 5px; bottom: 6px; position: absolute; margin-left: auto; margin-right: auto; left: -5px; right: 0; text-align: center; /* width: 100%; */ /* height: 3px; */ /* border-radius: 5px; */ /* top: 0px; */ /* position: absolute; */ /* margin-left: auto; */ /* margin-right: auto; */ /* left: 0; */ /* right: 0; */ /* text-align: center; */ } .b2-menu-1 .sub-menu-0 li a img { width: 50px; height: 50px; border-radius: 100%; margin: auto; } .top-menu-ul > li.depth-0 + li.depth-0 > a .hob { left: 0px; right: 0px; } .site-header{ height:100px; } .site.up .site-header-in { transform: translate(0,-100px); transition: transform .3s,background-color .3s ease-out; } .top-style-blur { top: 0px; border-top: 1px solid #f5f6f7; } .top-style-blur { position: absolute; width: 100%; height: 100%; left: 0; top: 1px; background: #fff; } .header, .header .wrapper { height: 70px; } .header-banner .ym-menu a, .header-banner, .social-top .site-title, .top-search-button button, .top-search input, .login-button .b2-account-circle-line { color: #ffffff!important; fill: #ffffff!important; } .header-banner-content { height: 30px; } .header-banner { background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%); } .change-theme { display: flex; margin: 0 10px; align-items: center; float: left; margin-top: 6px; } .login-button { display: block; align-items: center; } .social-top .header-login-button button { margin-left: 0; background: none; border: 0; color: inherit; background: rgb(255 255 255 / 100%); } button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text { color: #ff3c56; } .header-login-button .emptya{ background: #ff3c56; border: 1px solid #ff3c56!important; border-radius: 5px; } .header-login-button button { margin-left: 0px; padding: 6px 6px; } button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text { color: var(--b2color)!important; } .Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title { font-size: 16px; line-height: 22px; color: #663f32; letter-spacing: 0; font-weight: 600; margin-bottom: 4px; } .Onecad_benefitTag_benefits-wrapper { position: relative; margin-right: 5px; /* width: 48px; */ display: flex; justify-content: center; height: 53px; } .benefitTag__benefits-icon___3aeab { display:inline-block; width:32px; height:32px; } .benefitTag__benefits-text___5d19f { font-size:12px; color:#4d3626; font-weight:600; position:absolute; bottom:0; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); white-space:nowrap; } .benefitTag__popover___fbaea { min-width:0; max-width:200px; z-index:9; } .Onecad_memberWrapper { position: relative; padding: 5px 20px 20px; /* background-image: linear-gradient(135deg,#f2d6c2,#f2c8aa); */ cursor: pointer; display: flex; flex-direction: column; background-color: #ffffff87; backdrop-filter: blur(10px); align-items: center; border-radius: 0px 0px 10px 10px; box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1); } .Onecad_memberWrapper .Onecad_memberCard_member-header { position:relative; padding-top:12px; font-weight:700; white-space:nowrap; text-align:center; margin-bottom:16px; width: 300px; box-sizing:border-box; } .Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title { font-size:16px; line-height:22px; color:#663f32; letter-spacing:0; font-weight:600; margin-bottom:4px; } .Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc { font-size:12px; color:#663f32; letter-spacing:0; line-height:17px; font-weight:400; } .Onecad_memberWrapper.Onecad_memberCard_none .Onecad_memberCard_member-header .Onecad_memberCard_member-title { height:25px; width:180px; margin-left:auto; margin-right:auto; } .Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,.Onecad_memberWrapper.memberCard__will-expired___3128d .Onecad_memberCard_member-header { background:hsla(0,0%,100%,.8); padding:16px 0; border-radius:8px; } .Onecad_memberWrapper.memberCard__expired___9de29 { background:#dadde0; } .Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header, .Onecad_memberWrapper .Onecad_memberCard_member-benefits { position:relative; width: 100%; box-sizing:border-box; /* padding:12px 16px; */ background:hsla(0,0%,100%,.8); border-radius:8px; margin-bottom:16px; white-space:nowrap; overflow:hidden; } .Onecad_memberWrapper .Onecad_memberCard_member-benefits li { /* display:inline-block; */ float: left; width: 25%; margin: 10px 0; } .Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 { position:absolute; top:50%; width:12px; height:28px; -webkit-transform:translateY(-50%); transform:translateY(-50%); background-color:rgba(230,163,115,.2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; } .Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 .memberCard__icon-font___9846a,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 .memberCard__icon-font___9846a { color:#4d3626; font-size:12px; -webkit-transform:scale(.5); transform:scale(.5); } .Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917:hover,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46:hover { background-color:rgba(230,163,115,.16); } .Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 { left:0; border-radius:0 4px 4px 0; } .Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 { right:0; border-radius:4px 0 0 4px; } .Onecad_memberWrapper .memberCard__joinBtn___a50c1 { position:relative; width:152px; height:32px; background-image:linear-gradient(134deg,#4d5580,#3d4466); font-size:14px; color:#fff3eb; font-weight:600; display:flex; align-items:center; border-radius: 5px; justify-content:center; cursor:pointer; } .Onecad_memberWrapper>button{ border: 0!important; } .Onecad_memberWrapper .memberCard__joinBtn___a50c1:hover { background-image:linear-gradient(134deg,rgba(77,85,128,.9),rgba (61,68,102,.9)); } .Onecad_memberWrapper .memberCard__joinBtn___a50c1:active { background-image:linear-gradient(134deg,rgba(77,85,128,.8),rgba (61,68,102,.8)); } .Onecad_memberWrapper .memberCard__joinBtn___a50c1 .memberCard__tips___3220a { top: -10px; right: -15px; position: absolute; background-image: linear-gradient(90deg,#ff9580,#f36); border-radius: 6px; color: #fff; letter-spacing: 0; text-align: center; font-weight: 100; padding: 2px 8px; font-size: 12px; } .Onecad_memberCard_benefitsLiWrapper { position:relative; left:0; transition:left .3s linear; } .Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc { font-size:12px; color:#663f32; letter-spacing:0; line-height:17px; font-weight:400; } .Onecad_header_vip_topi { padding:2px 6px 0 6px; right: 0px; line-height:24px; color:#fff; text-align:center; position: absolute; top: 1px; box-sizing:border-box; border-radius:16px; font-size:19px; white-space:nowrap; -webkit-transform:scale(.5); } .Onecad_header_vip { padding: 0px 20px; position: relative; width: 25px; height: 25px; margin-right: 20px; background:url(/pic/vipiconhover.svg) no-repeat 50%/25px; } .Onecad_header_vip>i { position: absolute; top: -15px; } .Onecad_header_vip:hover .Onecad_member_tip[data-status=true] { display:block; } .Onecad_member_tip { position: absolute; padding-top: 70px; margin-top: -23px; right: -14px; display: none; z-index: 8000; } .Onecad_header_vip i { font-style: normal; font-weight: 400; } /*导航头部结束*/

文件下载

温馨提示:若内容/图片/下载链接失效,请在下方留言或登录后私信站长

本文结束END


© 版权声明
THE END
喜欢就支持一下吧
点赞45赞赏 分享
评论 共1条

请登录后发表评论