【7B2主题美化】给首页添加个导航会员模块

效果图

右侧vip可以自动识别是否开通会员，附件下载并上传到网站根目录

教程来自森鹿语

以下代码放入后台-模块管理-自定义

<!-- 区块代码 开始 -->
<div id="home-row-qukuai" class="  home_row home_row_1  module-qukuai  " style="background-color:;"> 
   <div class="wrapper">
        <div class="home-row-left content-area "> 
            <div class="sort b2-radius" style="margin-top:0px ;">    
                <ul class="sort-config"> 
                    <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407423076.svg"  />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">区块高度
                                            <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">后台可设置定位高度</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407423033.svg"  />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">区块颜色
                                            <span class="go" style="background-color: #5de000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">本区块设置负数例如-60px</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407422988.svg"  />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">下方广告
                                            <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">组和VIP组可以单独关闭</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407422990.svg"  />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">角标可设置
                                            <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">角标颜色也可以设置哦</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407422937.svg"  />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">无忧售后
                                            <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">保证放心购、安心用</span>
                                            </div></li>                 </ul> 
                                            <div class="sort-blocks"> 
                    <div class="bt-body"> 
                        <div class="containerrr"> 
                            <div class="onecad-quk-carousel"> 
                                <div class="itemss"> 
                                    <a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1646645863-a756b411d8cfd69.jpg">
                                                                        <div class="title_3qCGt">后台可添加</div> 
                                                                        <div class="tipss jiaobiao_color6">广告</div>
                                                                    </a><a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1628154884-a96bf386ea68fd1.png">
                                                                        <div class="title_3qCGt">角标可选择</div> 
                                                                        <div class="tipss jiaobiao_color6">广告</div>
                                                                    </a><a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1648712370-d59a15461c78f74.jpeg">
                                                                        <div class="title_3qCGt">组定位高度后台可调整</div> 
                                                                        <div class="tipss jiaobiao_color4">推荐</div>
                                                                    </a><a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1647488870-6fa6b58b4b1b751.jpg">
                                                                        <div class="title_3qCGt">本组后台可关闭</div> 
                                                                        <div class="tipss jiaobiao_color3">热门</div>
                                                                    </a><a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1634631547-a03889872f26e97.jpg">
                                                                        <div class="title_3qCGt">可独立显示上栏</div> 
                                                                        <div class="tipss jiaobiao_color3">热门</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 class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/person.b254.png" > <p class="sort-vips-tit">永久会员</p> <p class="sort-vips-tit2"><span class="sort-vips-tit2-kt" v-if="userData && userData.lv.vip.lv == 'vip3'">已开通</span><span class="sort-vips-tit2-wk" v-else>未开通</span></p> </a> 
                    <!-- 一年会员 --> 
                    <a href="./vips" target="_blank" class="sort-vips-item"> <img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/ep.4814.png" > <p class="sort-vips-tit">年卡会员</p> <p class="sort-vips-tit2"><span class="sort-vips-tit2-kt"  v-if="userData && userData.lv.vip.lv == 'vip2'">已开通</span><span class="sort-vips-tit2-wk" v-else>未开通</span></p> </a> 
                    <!-- 月费会员 --> 
                    <a href="./vips" target="_blank" class="sort-vips-item"> <img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/create.503f.png" > <p class="sort-vips-tit">月卡会员</p> <p class="sort-vips-tit2"><span class="sort-vips-tit2-kt"  v-if="userData && userData.lv.vip.lv == 'vip1'">已开通</span><span class="sort-vips-tit2-wk" v-else>未开通</span></p> </a> 
                    <!-- 体验会员 --> 
                    <a href="./vips" target="_blank" class="sort-vips-item index-bjq-a"><img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/design.16dc.png" ><p class="sort-vips-tit index-bjq-txt">体验会员</p><p class="sort-vips-tit2"><span class="sort-vips-tit2-kt"  v-if="userData && userData.lv.vip.lv == 'vip0'">已开通</span><span class="sort-vips-tit2-wk" v-else>未开通</span></p></a>
                    </div>                        </div> 
                    </div> 
                </div> 
                            </div>
        </div>
    </div>
</div>
<!-- 区块代码结束 -->

以下代码放入css样式

以下代码放入child.js

//首页是否购买VIP判断开始
var qukuai = new Vue({
  el:'.sort-mine-wrap',
  data:{
  },
  computed:{
        userData(){
            return this.$store.state.userData;
        }
    }
})
//首页是否购买VIP判断结束