B2 Pro主题 – 二次元会员开通页

PHP代码

vips.php文件代码

CSS代码

@media screen and (min-width: 768px){
.mrxu-vip-kt-box .mrxu-vip-kt {
    width: 285px;
    height: 171px;
}
.mrxu-vip-kt .mrxu-vip-flex .vipyou {
    width: 43px;
    margin-left: 242px;
    margin-top: 13px;
}
.mrxu-vip-flex .mrxu-vip-time-s {
    top: 41px;
    margin-left: 105px;
}
.my-vip-pc .mrxu-vip-kt-box:nth-child(4) .mrxu-vip-time-s {
    margin-left: 130px;
}
.mrxu-vip-flex .mrxu-vip-sm-s {
    top: 78px;
}
.mrxu-vip-kt .mrxu-vip-list01 {
    bottom: 22px;
}
.vip_dl .mrxu-vip-jiaru {
    position: relative;
    width: 260px;
    height: 42px;
    background: #ff669900;
    background-size: cover;
    background-color: #FFEB3B;
    border: none;
}
.vip_dl .mrxu-vip-jiaru1 {
    left: 0;
    top: 0;
}
.vip_dl .mrxu-vip-name {

}
.mrxu_vip_link .vip_dl {
    width: 25%;
    box-shadow: 0px 3px 6px #b3b3b3;
    background: #c7c7c769;
    margin: 5px;
    padding: 10px;
    border-radius: 8px;
}
.mrxu_vip_link .mrxu_vip_link_1 .iconfont {
    background: none;
}
.mrxu_vip_link .vip_dl:nth-child(1) .mrxu_vip_link_1 .iconfont {
    color: #6acd9a;
}
.mrxu_vip_link .vip_dl:nth-child(2) .mrxu_vip_link_1 .iconfont {
    color: #feb25e;
}
.mrxu_vip_link .vip_dl:nth-child(3) .mrxu_vip_link_1 .iconfont {
    color: #ea7878;
}
.mrxu_vip_link .vip_dl:nth-child(4) .mrxu_vip_link_1 .iconfont {
    color: #d94dff;
}
.mrxu_vip_link .vip_dl:nth-child(1){
    border: 2px solid #6acd9a42;
    background: #6acd9a1c;
}
.mrxu_vip_link .vip_dl:nth-child(2){
    border: 2px solid #feb25e42;
    background: #feb25e1c;
}
.mrxu_vip_link .vip_dl:nth-child(3){
    border: 2px solid #ea787842; 
    background: #ea78781c;
}
.mrxu_vip_link .vip_dl:nth-child(4){
    border: 2px solid #d94dff42;
    background: #d94dff1c;
}
.mrxu_vip_link .vip_dl dd p {
    font-size: 16px;
}
.mrxu_vip_link_1 p em {
    /*font-size: 25px;*/
    /*position: initial;*/
    color: #f69;
}
.mrxu_vip_link {
    display: flex;
}
.vip_dl .mrxu_vip_link_1{
    width: 100%;
    display: flex;
}
.vip_dl .mrxu_vip_link_1 {
     margin-bottom: 0; 
     margin-top: 0; 
}
}
.mrxu-vip-flex .vipyou{
    width: 52px;
    position: absolute;
    margin-left: 286px;
    margin-top: 17px;
}
.mrxu-vip-flex .vipzuo{
    width: 179px;
    position: absolute;
    margin-top: 1px;
}
.my-vip-pc{
    justify-content: left;
    display: flex;
}

.mrxu_vip_link .iconfont {
    color: #fff;
    padding: 8px;
    background: #fa7fba;
    font-size: 22px;
    border-radius: 50%;
}
.iconfont em{
    margin-left: -13px;
    transform: scale(0.5);
    background: #fbde0b;
    padding: 1px 5px;
    position: absolute;
    border-radius: 8px;
    color: #444173;
    margin-top: -14px;
}
.vip-footer {
    margin-top: 50px!important;
}

.swiper-button-prev, .swiper-button-next{
    color: #fff;
    top: 46%;
    height: auto;
    z-index: 2;
}
.swiper-button-prev:after, .swiper-button-next:after{
    background: #00000059;
    padding: 6px 11px;
    border-radius: 50%;
    font-size: 21px;
}
.vip-top > div {
    padding: 10px 0;
}
@media screen and (max-width: 768px){
.mrxu_vip_link .vip_dl {
display: none;
}
.mrxu_vip_link .vip_dl.mrxu_vip_x{
    display: block;
}
}
.my-vip-s .swiper-slide{
    background: none;
    display:block;
}
.mrxu-vip-name-box{
    display: none;
}
.my-vip-s{
    width: 90%;
    margin: 0 auto;
}
.mrxu-vip-jiaru {
    background-size: cover;
    background-image: url(/wp-content/themes/b2child/img/vip/kt.webp);
    position: absolute;
    color: #080808;
    width: 304px;
    height: 50px;
    margin: 0 auto;
    right: 0;
    left: 0;
}
.mrxu-vip-jiaru1{
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 24px;
}
.mrxu-vip-jiaru2{
    position: absolute;
    top: 16px;
    left: 94px;
    font-size: 15px;
    text-decoration: line-through;
}
.mrxu-vip-list01 {
    position: absolute;
    padding-left: 30px;
    bottom: 30px;
    color: #ffd05a;
}
.mrxu-vip-list02 {
    bottom: 36px;
    text-decoration: line-through;
    color: #ffffff;
    position: absolute;
    padding-left: 180px;
}
.mrxu-vip-list01 p {
    font-size: 20px;
}
.mrxu-vip-list01 p span:nth-child(2){
    padding: 3px;
}
.mrxu-vip-lv {
    border-radius: 0 8px 0 15px;
    color: #ffefdb;
    position: absolute;
    float: right;
    background: #c39a63;
    padding: 0 10px 2px 10px;
    right: 0;
    margin-top: -10px;
    font-weight: 700;
}

.mrxu-vip-name-box span {
    font-weight: 700;
    font-size: 20px;
    color: #714d1e;
}
	.mrxu_vip_link {
    padding: 5px;
}
.mrxu-vip-flex .vip-lv-icon {
    height: 70px;
    width: 70px;
    position: absolute;
    margin-top: 40px;
}
.mrxu-vip-flex .vip-lv-bg {
    opacity: 0.06;
    height: 200px;
    width: 200px;
    position: absolute;
    margin-top: -20px;
    margin-left: -65px;
}
	.mrxu_vip_link_1 {
    text-align: center;
    display: inline-block;
    width: 18.3%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.mrxu_vip_link_1.mrxu_vip_hui span{
    background: #94949485;
}
.mrxu_vip_link_1.mrxu_vip_hui i{
color: #929292ad;
}
.mrxu_vip_link_1.mrxu_vip_hui p{
color: #929292ad;
}
.mrxu_vip_link dl dd i {
    font-size: 28px;
    color: #d4a15f;
}
.mrxu-vip-time-s {
    text-shadow: 1px 1px 1px black;
    position: absolute;
    top: 52px;
    margin-left: 124px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.mrxu-vip-kt-box:nth-child(4) .mrxu-vip-time-s{
    margin-left: 160px;
}
.mrxu-vip-sm-s {
    text-shadow: 2px 2px 3px #000000bf;
    position: absolute;
    top: 100px;
    margin-left: 10px;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}
.mrxu-vip-yj-s {
    text-decoration: line-through;
    font-size: 13px;
    color: #fff;
    margin-left: 20px;
}
.mrxu_vip_link dl dd p{
    font-size: 12px;
    margin-top: 10px;
    color: #636363;
}

.mrxu-vip-qx-box{
    font-size: 20px;
    width: 100%;
    text-align: center;
    color: #636363;
    padding: 15px 0;
	}
	.mrxu-vip-qx-box svg{
    font-size: 13px;
	}
	.mrxu-vip-kt {
    width: 340px;
    height: 206px;
    background-size: cover;
}
	
.mrxu-vip-kt-box {
    width: 100%;
   text-align: inherit;
}
	
	
.vip-current {
    color: #636363;
}
.vip_name{
    color: #ff3a55;
    margin: 0 10px 0 10px;
	}
.vip-current {
     border: none; 
}
.vips .vip-top{
    background:none;
}
.content-area .vip-current{
    margin: 0;
}
.my-vip-p {
    overflow-x: auto;
    white-space: nowrap;
	width:100%;
}
.swiper-slide {
    display: inline-block;
}
.vip-faq-list + .vip-faq-list {
    border-top: 1px dotted var(--b2color);
}

图片素材