此代码可以直接调用会员开通弹窗、增加红色边框描边来源于腾飞：https://www.tfbkw.com/
代码放至——模块配置——底部全区块或文章内容上方、文章页顶部全区块——自定义 HTML
<div class="tf-one-home-homevip"
style="background-image: url(https://so.lzzcc.cn/images/dahai-vip.png);">
<div class="one-container wrapper">
<div class="tf-one-home-title">
<span>会员尊享权益圈子</span>
<p>成为我们的VIP会员，尊享无限免费下载使用，更享受全面的服务与福利</p>
</div>
<div class="tf-one-home-homevip-box one-grid-ceosmls one-grid">
<div id="onecad-id-1" class="tf-one-width-1-1 tf-one-width-1 b2-radius">
<div class="tf-home-homevip-boxmk tf-one-dongtai tf-one-background-default b2-radius ">
<div class="">
<img src="https://so.lzzcc.cn/wp-content/uploads/2024/08/20240806145746595329.webp">
</div>
<div class="tf-home-homevip-boxmktitle b-b">
<div class="price">¥<strong>9.9</strong>/ 月</div>
<p>月卡会员</p>
</div>
<div class="tf-home-homevip-boxmks">
<div class="tf-Onecad_vips_title">
<span>会员权益</span>
</div>
<li>每天可下载资源:<em><span>10个</span></em></li>
<li>会员享特权期限:<em><span>30天</span></em></li>
<li>全站资源免费下载:<em><span><i class="fa fa-check"></i></span></em></li>
<li>专属会员标识:<em><span><i class="fa fa-check"></i></span></em></li>
<li>享受本站资源永久免费更新:<em><span><i class="fa fa-check"></i></span></em></li>
</div>
<!--<a href="/vips" class="tf-jitheme-jb-btn">更多权益</a>-->
<a href="javascript:;" data-plan="vip_1" class="float-btn pay-vip my-custom-class-name" style="position: relative;
display: inline-block;
font-size: 14px;
line-height: 32px;
color: #fff;
text-align: center;
padding: 5px 10px;
background-color: var(--b2color);
width: 100%;
border-radius: 4px;
text-transform: uppercase;
z-index: 1;">立刻加入</a>
</div>
</div>
<div id="onecad-id-2" class="tf-one-width-1-1 tf-one-width-1 b2-radius">
<div class="tf-home-homevip-boxmk tf-one-dongtai tf-one-background-default b2-radius ">
<div class="">
<img src="https://so.lzzcc.cn/wp-content/uploads/2024/08/20240806145746595329.webp">
</div>
<div class="tf-home-homevip-boxmktitle b-b">
<div class="price">¥<strong>25</strong>/ 季</div>
<p>季卡会员</p>
</div>
<div class="tf-home-homevip-boxmks">
<div class="tf-Onecad_vips_title">
<span>会员权益</span>
</div>
<li>每天可下载资源:<em><span>10个</span></em></li>
<li>会员享特权期限:<em><span>90天</span></em></li>
<li>全站资源免费下载:<em><span><i class="fa fa-check"></i></span></em></li>
<li>专属会员标识:<em><span><i class="fa fa-check"></i></span></em></li>
<li>享受本站资源永久免费更新:<em><span><i class="fa fa-check"></i></span></em></li>
</div>
<!--<a href="/vips" class="tf-jitheme-jb-btn">更多权益</a>-->
<a href="javascript:;" data-plan="vip_1" class="float-btn pay-vip my-custom-class-name" style="position: relative;
display: inline-block;
font-size: 14px;
line-height: 32px;
color: #fff;
text-align: center;
padding: 5px 10px;
background-color: var(--b2color);
width: 100%;
border-radius: 4px;
text-transform: uppercase;
z-index: 1;">立刻加入</a>
</div>
</div>
<div id="onecad-id-3" class="tf-one-width-1-1 tf-one-width-1 b2-radius">
<div class="tf-home-homevip-boxmk tf-one-dongtai tf-one-background-default b2-radius ">
<div class="">
<img src="https://so.lzzcc.cn/wp-content/uploads/2025/01/20250116154741933140.webp">
</div>
<div class="tf-home-homevip-boxmktitle b-b">
<div class="price">¥<strong>19.9</strong>/ 月</div>
<p>月卡会员</p>
</div>
<div class="tf-home-homevip-boxmks">
<div class="tf-Onecad_vips_title">
<span>会员权益</span>
</div>
<li>每天可下载资源:<em><span>20个</span></em></li>
<li>会员享特权期限:<em><span>30天</span></em></li>
<li>全站资源免费下载:<em><span><i class="fa fa-check"></i></span></em></li>
<li>专属会员标识:<em><span><i class="fa fa-check"></i></span></em></li>
<li>享受本站资源永久免费更新:<em><span><i class="fa fa-check"></i></span></em></li>
</div>
<!--<a href="/vips" class="tf-jitheme-jb-btn">更多权益</a>-->
<a href="javascript:;" data-plan="vip_1" class="float-btn pay-vip my-custom-class-name" style="position: relative;
display: inline-block;
font-size: 14px;
line-height: 32px;
color: #fff;
text-align: center;
padding: 5px 10px;
background-color: var(--b2color);
width: 100%;
border-radius: 4px;
text-transform: uppercase;
z-index: 1;">立刻加入</a>
</div>
</div>
<div id="onecad-id-4" class="tf-one-width-1-1 tf-one-width-1 b2-radius">
<div class="tf-home-homevip-boxmk tf-one-dongtai tf-one-background-default b2-radius highlight" style="border: 2px solid red;">
<div class="">
<div class="tf-vip_tj">推荐购买</div>
<img src="https://so.lzzcc.cn/wp-content/uploads/2025/01/20250116154741933140.webp">
</div>
<div class="tf-home-homevip-boxmktitle b-b">
<div class="price">¥<strong>55.9</strong>/ 季</div>
<p>季卡会员</p>
</div>
<div class="tf-home-homevip-boxmks">
<div class="tf-Onecad_vips_title">
<span>会员权益</span>
</div>
<li>每天可下载资源:<em><span>20个</span></em></li>
<li>会员享特权期限:<em><span>90天</span></em></li>
<li>全站资源免费下载:<em><span><i class="fa fa-check"></i></span></em></li>
<li>专属会员标识:<em><span><i class="fa fa-check"></i></span></em></li>
<li>享受本站资源永久免费更新:<em><span><i class="fa fa-check"></i></span></em></li>
</div>
<!--<a href="/vips" class="tf-jitheme-jb-btn">更多权益</a>-->
<a href="javascript:;" data-plan="vip_1" class="float-btn pay-vip my-custom-class-name" style="position: relative;
display: inline-block;
font-size: 14px;
line-height: 32px;
color: #fff;
text-align: center;
padding: 5px 10px;
background-color: var(--b2color);
width: 100%;
border-radius: 4px;
text-transform: uppercase;
z-index: 1;">立刻加入</a>
</div>
</div>
</div>
</div>
</div>
<style>
.tf-home-homevip-boxmk .tf-one-dongtai .tf-one-background-default .b2-radius {
border: 2px solid red;
}
.tf-one-home-title span {
font-size: 28px;
font-weight: 700;
color: var(--main-color);
}
.tf-one-home-title p {
font-size: 16px;
font-weight: 400;
color: #999;
margin-top: 20px;
line-height: 25px;
}
.tf-one-home-title {
text-align: center;
margin-bottom: 70px;
}
.tf-one-home-homevip {
background-repeat: no-repeat;
background-position: center;
}
.one-container {
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
}
.wrapper {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.wrapper {
margin: 0 auto;
max-width: 100%;
margin-top: 10px;
margin-bottom: 30px;
}
.one-container>:last-child {
margin-bottom: 0;
}
.one-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
width: var(--mian-max-width);
margin-left: -68px;
}
.tf-one-width-1 {
width: calc(25% - 16px);
}
.tf-one-dongtai {
transition: all .3s ease 0s;
}
.tf-home-homevip-boxmk {
text-align: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, .05);
padding: 20px;
border-radius: 6px;
}
.tf-home-homevip-boxmk {
text-align: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, .05);
padding: 20px 20px 0;
overflow: hidden !important;
position: relative;
}
.tf-home-homevip-boxmk {
text-align: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, .05);
padding: 20px;
}
.tf-one-background-default {
background-color: var(--main-bg-color);
}
.tf-home-homevip-boxmk img {
height: 40px;
display: block;
margin: 20px auto 10px auto;
}
.tf-home-homevip-boxmktitle .price {
margin-bottom: 15px;
color: var(--key-color);
font-size: 16px;
}
.tf-home-homevip-boxmktitle .price strong {
margin: 0 5px;
font-weight: bolder !important;
font-size: 43px;
}
.tf-home-homevip-boxmktitle p {
font-size: 14px;
line-height: 27px;
background-color: var(--body-bg-color);
color: var(--main-color);
border-radius: 50px;
}
.tf-home-homevip-boxmktitle {
text-align: center;
position: relative;
padding-bottom: 20px;
}
#tf-Onecad_vips .tf-Onecad_vips_title {
margin: 0 -20px;
padding: 15px 0 15px 10px;
color: var(--key-color);
text-align: left;
}
.tf-Onecad_vips_title span {
font-size: 20px;
font-weight: 500;
text-align: left;
}
.tf-home-homevip-boxmks li {
display: flex;
margin: 0 -20px;
padding: 0 15px;
color: var(--key-color);
font-size: 13px;
line-height: 45px;
align-items: center;
justify-content: space-between;
}
.tf-home-homevip-boxmks li em,
.tf-home-homevip-boxmks li em span p {
display: flex;
font-size: 14px;
font-weight: 100;
}
.tf-one-dongtai:hover {
transform: translateY(-3px);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .05);
box-shadow: 0 0 10px rgba(0, 0, 0, .05);
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
}
.tf-one-width-1 {
width: calc(25% - 16px);
margin-left: 10px;
}
.tf-vip_tj {
position: absolute;
top: 15px;
right: -40px;
overflow: hidden !important;
z-index: 1;
width: 150px;
height: 30px;
background: red;
color: #fff;
line-height: 30px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
font-size: 14px;
}
.tf-home-homevip-boxmk a {
align-items: center;
justify-content: center;
font-size: 14px;
width: 100%;
margin: 0 auto 18px;
text-align: center;
background: linear-gradient(91.51deg, #f4cfa3 .48%, #cd9e66 98.33%);
border-radius: 4px;
line-height: -10px;
letter-spacing: 2.4px;
color: #522d00;
transition: opacity .2s;
position: relative;
cursor: pointer;
font-size: 12px;
margin: 0;
white-space: nowrap;
}
.tf-jitheme-jb-btn {
position: relative;
display: inline-block;
font-size: 14px;
line-height: 32px;
color: #fff;
text-align: center;
padding: 5px 10px;
background-color: var(--b2color);
width: 100%;
border-radius: 4px;
text-transform: uppercase;
z-index: 1;
}
@media screen and (max-width: 1221px) {
.wapnone {
display: none;
}
}
.highlight {
border: 2px solid red !important;
}
</style>
© 版权声明
THE END
