B2主题首页展示区块、会员开通详情

效果图

教程

这个区块还可以的，右边的vip是动态显示，也就是说如果开通其中一个会员那它就会点亮对应的会员，如图，唯一缺点就是渲染反应慢，是由Js控制。

Html：

<div id="xutian_vips" class="sort b2-radius">
  <!-- 新专题 -->
  <ul class="sort-config">
    <li>
      <div class="sort-config-item">
        <img class="sort-config-icon" src="https://www.xingkongweb.com/wp-content/uploads/2022/01/1641039099-linggan-01.svg"
          alt="">
        <p class="sort-config-title">优质精品</p>
        <span class="sort-config-desc">提供海量高品质图片</span>
      </div>
    </li>
    <li>
      <div class="sort-config-item">
        <img class="sort-config-icon" src="https://www.xingkongweb.com/wp-content/uploads/2022/01/1641039233-ruanjian-01.svg"
          alt="">
        <p class="sort-config-title">优质精品</p>
        <span class="sort-config-desc">手动上传高品质素材</span>
      </div>
    </li>
    <li>
      <div class="sort-config-item">
        <img class="sort-config-icon" src="https://www.xingkongweb.com/wp-content/uploads/2022/01/1641039309-ziti-01.svg"
          alt="">
        <p class="sort-config-title">专业水平</p>
        <span class="sort-config-desc">10年图纸深化经验</span>
      </div>
    </li>
    <li>
      <div class="sort-config-item">
        <img class="sort-config-icon" src="https://www.xingkongweb.com/wp-content/uploads/2022/01/1641039800-logojun.svg"
          alt="">
        <p class="sort-config-title">价格实惠</p>
        <span class="sort-config-desc">终身VIP仅需199元</span>
      </div>
    </li>
    <li>
      <div class="sort-config-item">
        <img class="sort-config-icon" src="https://www.xingkongweb.com/wp-content/uploads/2022/01/1641040320-huodong-01.svg"
          alt="">
        <p class="sort-config-title">值得信赖</p>
        <span class="sort-config-desc">用心服务，值得信赖</span>
      </div>
    </li>
    <li>
      <div class="sort-config-item">
        <img class="sort-config-icon" src="https://www.xingkongweb.com/wp-content/uploads/2022/01/1641039309-ziti-01.svg"
          alt="">
        <p class="sort-config-title">无忧售后</p>
        <span class="sort-config-desc">保证放心购、安心用</span>
      </div>
    </li>
  </ul>
  <div class="sort-blocks">
    <div class="bt-body">
      <div class="containerrr">
        <div class="g-scrolling-carousel">
          <div class="items">
            <a class="card_ZQsT- b2-radius" href="#" target="_blank"><img
                src="https://img.xingkongweb.com/wp-content/uploads/2022/02/20220211141407245.jpg">
              <div class="title_3qCGt">室内设计</div>
              <div class="year-tag_3Iqeg guanggao">广告</div>
            </a><a class="card_ZQsT- b2-radius" href="baidu.com" target="_blank"><img
                src="https://img.xingkongweb.com/wp-content/uploads/2022/02/20220211141355749.jpg">
              <div class="title_3qCGt">酒店餐饮设计</div>
              <div class="year-tag_3Iqeg tuijain ">推荐</div>
            </a><a class="card_ZQsT- b2-radius" href="#" target="_blank"><img
                src="https://img.xingkongweb.com/wp-content/uploads/2022/02/20220211141351841.jpg">
              <div class="title_3qCGt">娱乐会所图库</div>
              <div class="year-tag_3Iqeg remen">热门</div>
            </a><a class="card_ZQsT- b2-radius" href="44" target="_blank"><img
                src="https://img.xingkongweb.com/wp-content/uploads/2022/02/20220211141348525.jpg">
              <div class="title_3qCGt">售楼处资料</div>
              <div class="year-tag_3Iqeg huodong">活动</div>
            </a><a class="card_ZQsT- b2-radius" href="RRR" target="_blank"><img
                src="https://img.xingkongweb.com/wp-content/uploads/2022/02/20220211141314215.jpg">
              <div class="title_3qCGt">精装修样板间</div>
              <div class="year-tag_3Iqeg jingping">精品</div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="srot-mine b2-radius">
      <i class="srot-mine-bg"></i>
      <div class="sort-mine-wrap">
        <div class="srot-mine-tit"><img src="https://img.xingkongweb.com/wp-content/uploads/2022/01/20220114064641724.svg"
            alt="" class="srot-mine-ava"> <span>开通会员全站素材无限制下载</span></div>
        <div id="userDisplayName" class="srot-mine-vips">
          <a href="./vips" target="_blank" class="sort-vips-item"><img src="//s.ibaotu.com/next/img/new/person.b254.png"
              alt="" class="sort-vips-icon">
            <p class="sort-vips-tit">永久会员</p>
            <p class="sort-vips-tit2" v-cloak>
              <span v-if="userData_vip == 'vip3'" class="sort-vips-tit2-wk"
                :style="userData_vip == 'vip3' ? 'background:linear-gradient(45deg, #4b5871, #4b5871);':''">已开通</span>
              <span v-else class="sort-vips-tit2-wk">未开通</span>
            </p>
          </a>
          <a href="./vips" target="_blank" class="sort-vips-item"><img src="//s.ibaotu.com/next/img/new/ep.4814.png"
              alt="" class="sort-vips-icon">
            <p class="sort-vips-tit">年卡会员</p>
            <p class="sort-vips-tit2" v-cloak>
              <span v-if="userData_vip == 'vip2'" class="sort-vips-tit2-wk"
                :style="userData_vip == 'vip2' ? 'background: linear-gradient(45deg, #ffa600, #ffa900);':''">已开通</span>
              <span v-else class="sort-vips-tit2-wk">未开通</span>
            </p>
          </a>
          <a href="./vips" target="_blank" class="sort-vips-item"><img src="//s.ibaotu.com/next/img/new/create.503f.png"
              alt="" class="sort-vips-icon">
            <p class="sort-vips-tit">月卡会员</p>
            <p class="sort-vips-tit2" v-cloak>
              <span v-if="userData_vip == 'vip1'" class="sort-vips-tit2-wk"
                :style="userData_vip == 'vip1' ? 'background: linear-gradient(45deg, #ff0e00, #ff0e00);':''">已开通</span>
              <span v-else class="sort-vips-tit2-wk">未开通</span>
            </p>
          </a>
          <a href="./vips" target="_blank" class="sort-vips-item index-bjq-a"><img
              src="//s.ibaotu.com/next/img/new/design.16dc.png" alt="" class="sort-vips-icon">
            <p class="sort-vips-tit index-bjq-txt">体验会员</p>
            <p class="sort-vips-tit2" v-cloak>
              <span v-if="userData_vip == 'vip0'" class="sort-vips-tit2-wk"
                :style="userData_vip == 'vip0' ? 'background: linear-gradient(45deg, #ff5a00, #ff5a00);':''">已开通</span>
              <span v-else class="sort-vips-tit2-wk">未开通</span>
            </p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

注意，建议将图片保存在自己服务器商，避免对方网站关闭，导致图片打不开。上面的图片很多失效，可以更具自己的情况更换

我将上面的图片保存起来，可以到下面去下载。

Js：

请将js代码放入子主题的child.js文件里面，如果没有那就放入main.js里面，或自行引入。

var xutian_vips = new Vue({
    el:'#xutian_vips',
    data:{
    },
	computed:{
        userData_vip(){
            return this.$store.state.userData.lv && this.$store.state.userData.lv.vip.lv;
        }
    },
})

Css：

.sort {
    position: relative;
    margin-top: 80px;
    z-index: 3;
    height: 320px;
    padding: 15px;
    background: #fff;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 40px 75px 0 rgb(57 60 67 / 8%);
    box-shadow: 0 40px 75px 0 rgb(57 60 67 / 8%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

下载权限

查看

￥

免费下载

评论并刷新后下载

登录后下载

查看演示

{{attr.name}}：

您当前的等级为

登录后免费下载登录小黑屋反思中，不准下载！评论后刷新页面下载评论支付以后下载请先登录您今天的下载次数（次）用完了，请明天再来支付积分以后下载立即支付支付以后下载立即支付您当前的用户组不允许下载升级会员

您已获得下载权限您可以每天下载资源次，今日剩余次

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

{{userData.name}}已认证

B2主题首页展示区块、会员开通详情

效果图

教程

优惠活动

域名抢注

星空商城

免责声明

版权声明

帮助文档

建议提交

广告合作

IDC投稿

网址导航