7b2顶部会员悬浮图标

鼠标指向图标会弹出窗口,窗口背景是毛玻璃效果哦

附件放到网站根目录,内容图标位置都可以自定义。

打开/b2/Modules/Templates/Header.php

搜索

<div class="header-banner-right">

代码放入下面即可

<style>
.abcd_benefitTag_benefits-wrapper {position:relative;margin-right: 5px;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;}.abcd_memberWrapper {position: relative;padding: 5px 20px 20px;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);}.abcd_memberWrapper .abcd_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;}.abcd_memberWrapper .abcd_memberCard_member-header .abcd_memberCard_member-title {font-size:16px;line-height:22px;color:#663f32;letter-spacing:0;font-weight:600;margin-bottom:4px;}.abcd_memberWrapper .abcd_memberCard_member-header .abcd_memberCard_member-desc {font-size:12px;color:#663f32;letter-spacing:0;line-height:17px;font-weight:400;}.abcd_memberWrapper.abcd_memberCard_none .abcd_memberCard_member-header .abcd_memberCard_member-title {height:25px;width:180px;margin-left:auto;margin-right:auto;}.abcd_memberWrapper.memberCard__expired___9de29 .abcd_memberCard_member-header,.abcd_memberWrapper.memberCard__will-expired___3128d .abcd_memberCard_member-header {background:hsla(0,0%,100%,.8);padding:16px 0;border-radius:8px;}.abcd_memberWrapper.memberCard__expired___9de29 {background:#dadde0;}.abcd_memberWrapper.memberCard__expired___9de29 .abcd_memberCard_member-header .abcd_memberCard_member-desc {color:#ff2b00;}.abcd_memberWrapper .abcd_memberCard_member-benefits {position:relative;width: 100%;box-sizing:border-box;background:hsla(0,0%,100%,.8);border-radius:8px;margin-bottom:16px;white-space:nowrap;overflow:hidden;}.abcd_memberWrapper .abcd_memberCard_member-benefits li {float: left;width: 25%;margin: 10px 0;}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__leftBtn___ec917,.abcd_memberWrapper .abcd_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;}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__leftBtn___ec917 .memberCard__icon-font___9846a,.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__rightBtn___0cc46 .memberCard__icon-font___9846a {color:#4d3626;font-size:12px;-webkit-transform:scale(.5);transform:scale(.5);}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__leftBtn___ec917:hover,.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__rightBtn___0cc46:hover {background-color:rgba(230,163,115,.16);}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__leftBtn___ec917 {left:0;border-radius:0 4px 4px 0;}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__rightBtn___0cc46 {right:0;border-radius:4px 0 0 4px;}.abcd_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;justify-content:center;cursor:pointer;}.abcd_memberWrapper>button{border: 0!important;}.abcd_memberWrapper .memberCard__joinBtn___a50c1:hover {background-image:linear-gradient(134deg,rgba(77,85,128,.9),rgba(61,68,102,.9));}.abcd_memberWrapper .memberCard__joinBtn___a50c1:active {background-image:linear-gradient(134deg,rgba(77,85,128,.8),rgba(61,68,102,.8));}.abcd_memberWrapper .memberCard__joinBtn___a50c1 .memberCard__tips___3220a {top:-14px;right:-54px;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:20px;-webkit-transform:scale(.5);transform:scale(.5);}.abcd_memberCard_benefitsLiWrapper {position:relative;left:0;transition:left .3s linear;}.abcd_header_vip_topi {padding:2px 6px 0 6px;right: 0px;line-height:24px;color:#fff;text-align:center;position: absolute;top: 5px;box-sizing:border-box;border-radius:16px;font-size:19px;white-space:nowrap;-webkit-transform:scale(.5);}.abcd_header_vip {padding:0 24px;position:relative;width:20px;height: 70px;background:url(/img/vipiconhover.svg) no-repeat 50%/25px;}.abcd_header_vip>i {position:absolute;top: 5px;right:-6px;}.abcd_header_vip:hover .abcd_member_tip[data-status=true] {display:block;}.abcd_member_tip {position:absolute;top:70px;right:-14px;display:none;z-index:8000;}.abcd_header_vip i {font-style: normal;font-weight: 400;}.jiaobiao_color4{color:#fff;background-color:#ff2a8e;}
</style>
					<a href="/vips" class="abcd_header_vip nav-member-btn"
draggable="false" style="padding: 0px 18px; width: 0px;background:url(tuku/会员.svg) no-repeat 10%/25px;">
    <div class="icon-btn">
    </div>
    <i class="abcd_header_vip_topi jiaobiao_color4" style="right: -15px;">开通</i>
    <div class="abcd_member_tip" data-status="true">
        <div data-position="" class="abcd_memberWrapper abcd_memberCard_none">
            <div class="abcd_memberCard_member-header">
                <div class="abcd_memberCard_member-title">开通铂金会员享受专属权益</div>
                <div class="abcd_memberCard_member-desc">一次购买,免费更新</div>
            </div>
            <ul class="abcd_memberCard_member-benefits">
                <div class="abcd_memberCard_benefitsLiWrapper" style="left: 0px;"> <li>
                                            <div class="abcd_benefitTag_benefits-wrapper">
                                                <i class="benefitTag__benefits-icon___3aeab" style="background: url(tuku/下载盘点单、下载打印模板.svg) center center / contain no-repeat;">
                                                </i>
                                                <span class="benefitTag__benefits-text___5d19f">
                                                  资源免费
                                                </span>
                                            </div>
                                        </li> <li>
                                            <div class="abcd_benefitTag_benefits-wrapper">
                                                <i class="benefitTag__benefits-icon___3aeab" style="background: url(tuku/1.svg) center center / contain no-repeat;">
                                                </i>
                                                <span class="benefitTag__benefits-text___5d19f">
                                                  免费指导
                                                </span>
                                            </div>
                                        </li> <li>
                                            <div class="abcd_benefitTag_benefits-wrapper">
                                                <i class="benefitTag__benefits-icon___3aeab" style="background: url(tuku/更新.svg) center center / contain no-repeat;">
                                                </i>
                                                <span class="benefitTag__benefits-text___5d19f">
                                                  保持更新
                                                </span>
                                            </div>
                                        </li> <li>
                                            <div class="abcd_benefitTag_benefits-wrapper">
                                                <i class="benefitTag__benefits-icon___3aeab" style="background: url(tuku/sku打折.svg) center center / contain no-repeat;">
                                                </i>
                                                <span class="benefitTag__benefits-text___5d19f">
                                                  专属优惠
                                                </span>
                                            </div>
                                        </li></div>
            </ul>
            <button class="memberCard__joinBtn___a50c1">
                开通会员
                <div class="memberCard__tips___3220a">
                 现价18.88元
                </div>
            </button>
        </div>
    </div>
</a>

给TA打赏
共{{data.count}}人
人已打赏
7b2美化

wordpress主题右上角悬浮广告

2022-7-19 15:03:19

7b2美化

7b2主题一键更换全站字体代码

2022-8-25 13:42:59

3 条回复 A文章作者 M管理员
  1. huayixb

    即便我弱了,也并不代表你强了。

  2. huayixb

    出来吧,刻刻帝!

  3. 实变函数学十遍,泛函学完心泛寒。

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索