Bỏ phiếuWordPress thêm mô-đun thành viên điều hướng vào trang chủ chủ đề

Cập nhập 4 tháng trước

480

Khối này ổn. VIP ở bên phải được hiển thị động, nghĩa là nếu bạn kích hoạt một trong các thành viên, nó sẽ sáng lên thành viên tương ứng, như trong hình. Nhược điểm duy nhất là phản hồi kết xuất chậm và. được điều khiển bởi Js.

WordPress thêm mô-đun thành viên điều hướng vào trang chủ chủ đề - hồ sơ trải nghiệm cá nhân — Ảnh demo

Mã 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.tukuv.com/wp-content/uploads/2022/01/1641039099-linggan-01.svg"
          >
        <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.tukuv.com/wp-content/uploads/2022/01/1641039233-ruanjian-01.svg"
          >
        <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.tukuv.com/wp-content/uploads/2022/01/1641039309-ziti-01.svg"
          >
        <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.tukuv.com/wp-content/uploads/2022/01/1641039800-logojun.svg"
          >
        <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.tukuv.com/wp-content/uploads/2022/01/1641040320-huodong-01.svg"
          >
        <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.tukuv.com/wp-content/uploads/2022/01/1641039309-ziti-01.svg"
          >
        <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.onecad.cn/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.onecad.cn/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.onecad.cn/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.onecad.cn/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.onecad.cn/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.onecad.cn/wp-content/uploads/2022/01/20220114064641724.svg"
             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/nexthttps://img.huliku.com/pic/new/person.b254.png"
               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/nexthttps://img.huliku.com/pic/new/ep.4814.png"
               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/nexthttps://img.huliku.com/pic/new/create.503f.png"
               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/nexthttps://img.huliku.com/pic/new/design.16dc.png"  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>

Mã 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;
        }
    },
})

Mã 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);
}
#xutian_vips .sort-config {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#xutian_vips .sort-config>li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 100%;
}
#xutian_vips .sort-config-item {
    display: block;
    height: 100%;
}
#xutian_vips .sort-config-item img {
    float: left;
    width: 62px;
    height: 62px;
    margin-right: 12px;
}
#xutian_vips .sort-config-title {
    line-height: 34px;
    font-size: 18px;
    font-weight: 600;
    color: #2d2d2d;
    -webkit-transition: .3s;
    transition: .3s;
}
#xutian_vips .sort-config-desc {
    float: left;
    line-height: 22px;
    font-size: 14px;
    color: #8e8e8e;
}
#xutian_vips .sort-blocks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 124px;
    margin-top: 35px;
}
#xutian_vips .bt-body {
    padding-bottom: 100px;
    background: transparent;
    width: calc(100% - 376px);
}
#xutian_vips .containerrr {
    margin: 0px auto;
    width: 100%;
}
#xutian_vips .g-scrolling-carousel {
    position: relative;
}
#xutian_vips .g-scrolling-carousel .items {
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    justify-content: space-between;
}
#xutian_vips .g-scrolling-carousel .items a {
    display: inline-block;
    margin-right: 10px;
    width: calc(20% - 10px);
    height: 180px;
    text-align: center;
}
#xutian_vips .card_ZQsT- {
    height: 192px;
    width: 128px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    white-space: normal;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
    background: #FFFFFF;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 0px 0 16px 0;
    margin-right: 16px;
    text-decoration: none;
    transition: all 0.3s;
}
#xutian_vips .card_ZQsT-:hover {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    white-space: normal;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
    background: #FFFFFF;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 0px 0 16px 0;
    margin-right: 16px;
    text-decoration: none;
    transform: translateY(-3px);
}
#xutian_vips .card_ZQsT- img {
    height: 180px;
    width: 100%;
}
#xutian_vips html :where(img) {
    height: auto;
    max-width: 100%;
}
#xutian_vips .card_ZQsT- .title_3qCGt {
    font-size: 14px;
    color: #222222;
    height: 35px;
    background-color: #fff;
    line-height: 35px;
    width: 100%;
    position: absolute;
    display: block;
    margin-top: -35px;
}
#xutian_vips .card_ZQsT- .year-tag_3Iqeg {
    height: 19px;
    min-width: 52px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 6px;
    left: 6px;
    text-align: center;
    line-height: 19px;
    font-size: 12px;
    color: #FFFFFF;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 10px;
}
#xutian_vips .guanggao {
    background: #00d084;
}
#xutian_vips .tuijain {
    background: #ff6900;
}
#xutian_vips .remen {
    background: #fcb900;
}
#xutian_vips .huodong {
    background: #0693e3;
}
#xutian_vips .jingping {
    background: #cf2e2e;
}
#xutian_vips .srot-mine {
    position: relative;
    width: 376px;
    background: -webkit-gradient(linear,left top,right top,from(#fdf8eb),to(#feeec3));
    background: linear-gradient(90deg,#fdf8eb,#feeec3);
    height: 180px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
}
#xutian_vips .srot-mine-bg {
    position: absolute;
    top: 13px;
    right: -13px;
    width: 118px;
    height: 78px;
    background: url(//s.ibaotu.com/ibaotuhttps://img.huliku.com/pic/index/sort_zuanshi.png) no-repeat;
    background-size: cover;
}
#xutian_vips .sort-mine-wrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 12px 16px 15px;
}
#xutian_vips .srot-mine-tit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 25px;
}
#xutian_vips .sort-mine-wrap img {
    display: flex;
    width: auto;
}
#xutian_vips .srot-mine-tit>span {
    margin-left: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #613c14;
}
#xutian_vips .srot-mine-vips {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 337px;
    margin: 5px 0px 5px;
}
#xutian_vips .sort-vips-item {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
}
#xutian_vips .sort-mine-wrap img {
    display: flex;
    width: auto;
}
#xutian_vips .sort-vips-icon {
    display: block;
    width: 32px;
    height: 36px;
    margin: 0 auto;
    -webkit-transition: .3s;
    transition: .3s;
    margin-left: 30px;
}
#xutian_vips .sort-vips-tit {
    margin: 15px 0px;
    line-height: 12px;
    font-size: 13px;
    color: #613c14;
    margin-left: 10px;
}
#xutian_vips .sort-vips-tit2-wk {
    margin-top: 10px;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    color: #ffffff;
    border-radius: 33px;
    margin-right: 10px;
    font-size: 14px;
    opacity: 0.5;
    background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);
    background-blend-mode: multiply;
    margin: 10px 0px 0px 9px;
}
#xutian_vips .srot-mine-ava {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

Điểm

Vui lòng đánh giá Ta

Bỏ phiếuWordPress thêm mô-đun thành viên điều hướng vào trang chủ chủ đề

Mã HTML

Mã JS

Mã CSS

Giao diện Wp