vue+css布局手机端移动端交友社交app首页效果代码-html代码-BFW代码库

代码语言：html
代码描述：vue+css布局手机端移动端交友社交app首页效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.5.3.8.css">
    <style>
        @font-face {
      font-family: "iconfont"; /* Project id 2754682 */
      src: url('data:application/octet-stream;base64,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') format('woff2'),
           url('') format('woff'),
           url('') format('truetype');
    }
    
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-weixin:before {
      content: "\e631";
    }
    
    .icon-duihua:before {
      content: "\e61e";
    }
    
    .icon-right:before {
      content: "\e64d";
    }
    
    .icon-qushi:before {
      content: "\e602";
    }
    
    .icon-mine:before {
      content: "\e615";
    }
    
    .icon-03-copy:before {
      content: "\e603";
    }
    
    .icon-duihua2:before {
      content: "\e62b";
    }
    
    .icon-home:before {
      content: "\e653";
    }
    
    .icon-search:before {
      content: "\e65d";
    }
    
    .icon-jiangzhang:before {
      content: "\e6cd";
    }
    
    .icon-jiangbei:before {
      content: "\e66c";
    }
    
    .icon-left:before {
      content: "\e73b";
    }
    
    .icon-duigou:before {
      content: "\e61a";
    }
    
    .icon-weibo:before {
      content: "\e601";
    }
    
    .icon-suo:before {
      content: "\e73a";
    }
    
    .icon-shouji:before {
      content: "\e620";
    }
    
    .icon-close:before {
      content: "\e600";
    }
    
    .icon-qq:before {
      content: "\e614";
    }
    
    .icon-hide:before {
      content: "\e6b3";
    }
    
    
            *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
        body{width: 100%;overflow-x: hidden;background: url(//repo.bfw.wiki/bfwrepo/image/6085fa955c872.png) top center no-repeat #f8f8f8;background-size: 100% auto;padding: .25rem;}
        img{vertical-align: middle;max-width: 100%;}
        input::-webkit-input-placeholder {
            color: #f8fbfe;
        }
        input::-moz-input-placeholder {
            color: #f8fbfe;
        }
        input::-ms-input-placeholder {
            color: #f8fbfe;
        }
        /* 头部 */
        .header{width: 100%;display: flex;justify-content: space-between;align-items: center;}
        .header .singn {width: .62rem;height: .62rem;margin-right: .3rem;display: flex;align-items: center;background: url(//repo.bfw.wiki/bfwrepo/images/app/icon-qiandao.png) center center no-repeat;background-size: 100% auto;}
        .header .search {width: 100%;height: .5rem;border: .01rem solid #f8fbfe;border-radius: .4rem;position: relative;display: flex;align-items: center;background: linear-gradient(to right,#a0c7f6,#a0c7f6);}
        .header .search i {font-size: .28rem;color: #f8fbfe;margin-left: .2rem;margin-right: .2rem;}
        .header .search input{background: none;border: none;outline: none;color: #ffffff;}
        .header .message {display: flex;align-items: center;margin-left: .2rem;position: relative;}
        .header .message i{font-size: .48rem;color: #ffffff;}
        .header .message span{position: absolute;top: -.1rem;right: -.1rem;font-size: .18rem;color: #ffffff;display: inline-block;width: .3rem;height: .3rem;line-height: .3rem;text-align: center;background: #ff59a6;border-radius: 100%;}
        /* 导航 */
        .nav{width: 100%;height: auto;overflow: hidden;padding: .3rem 0 .4rem 0;}
        .nav ul{width: 100%;display: flex;justify-content: space-between;align-items: center;}
        .nav ul li{font-size: .28rem;color: #ffffff;position: relative;letter-spacing: .02rem;}
        .nav ul li.on{font-size: .32rem;font-weight: bold;}
        .nav ul li.on::after{content: "";display: inline-block;width: 0;height: 0;border: .1rem;border-width: .1rem;border-style: solid;border-color: transparent transparent #ffffff transparent;border-bottom-width: .15rem;position: absolute;bottom: -.18rem;left: 50%;transform: translateX(-50%);}
        /* 轮播图 */
        .swiper-container{width: 100%;height: auto;overflow: hidden;}
        .swiper-slide{width: 100%;height: auto;margin: 0 .2rem;}
        .swiper-pagination{text-align: right;padding-right: .3rem;}
        .swiper-pagination-bullet{background: #ffffff;width: .13rem;height: .13rem;opacity: .4;}
        .swiper-pagination-bullet-active{width: .32rem;background: #ffffff;border-radius: .13rem;transition: all .3s linear;opacity: 1;}
        /* 三宫格快捷导航 */
        .block-three{width: 100%;height: auto;overflow: hidden;padding: .3rem 0;}
        .block-three ul{width: 100%;display: flex;justify-content: space-between;align-items: center;}
        .block-three ul li{display: flex;flex-direction: column;justify-content: center;width: 2.2rem;height: 1.3rem;padding: 0 .3rem;box-shadow: 0 0 .2rem rgba(248,138,252,.3);border-radius: .15rem;}
        .block-three ul li:nth-child(1){background: url(//repo.bfw.wiki/bfwrepo/images/app/icon-guanzhu.png) right .2rem center no-repeat #ffffff;background-size: .44rem auto;}
        .block-three ul li:nth-child(2){background: url(//repo.bfw.wiki/bfwrepo/images/app/icon-lingchang.png) right .2rem center no-repeat #ffffff;background-size: .44rem auto;}
        .block-three ul li:nth-child(3){background: url(//repo.bfw.wiki/bfwrepo/images/app/icon-yuyin.png) right .2rem center no-repeat #ffffff;background-size: .44rem auto;}
        .block-three ul li p{font-size: .28rem;color: #333333;padding-bottom: .05rem;}
        .block-three ul li span{font-size: .20rem;color: #333333;}
        /* 通用标题 */
        .list{width: 100%;height: auto;overflow: hidden;}
        .list .title{width: 100%;display: flex;justify-content: space-between;align-items: center;padding: .15rem 0 .3rem 0;}
        .list .title span{font-size: .32rem;color: #333333;font-weight: bold;}
        .list .title a{font-size: .22rem;color: #999999;}
        .list .title a i{font-size: .18rem;}
        /* 主播列表 */
        .zhubo-list{width: 100%;height: auto;overflow: hidden;}
        .zhubo-list ul{width: 100%;display: flex;align-items: center;flex-wrap: nowrap;overflow-x: auto;}
        .zhubo-list ul::-webkit-scrollbar{width: 0;}
        .zhubo-list ul li{width: 2.46rem;height: 3.02rem;flex-shrink: 0;margin-right: .2rem;position: relative;border-radius: .15rem;overflow: hidden;}
        .zhubo-list ul li:last-child{margin-right: 0;}
        .zhubo-list ul li img{width: 100%;height: 100%;}
        .zhubo-list ul li i.tip{position: absolute;display: inline-block;font-size: .18rem;color: #ffffff;top: 0;left: 0;padding: .03rem .15rem;background: #e02ae9;border-radius: 0 0 .15rem;border-bottom:.01rem solid #ffd04b;border-right:.01rem solid #ffd04b;z-index: 2;}
        .zhubo-list ul li .desc{position: absolute;bottom: 0;left: 0;z-index: 2;color: #ffffff;padding: .1rem .15rem;width: 100%;}
        .zhubo-list ul li .desc .name{font-size: .26rem;text-shadow: 0 0 .1rem rgba(0,0,0,.5);padding-bottom: .05rem;}
        .zhubo-list ul li .desc .name i{display: inline-block;width: .28rem;height: .28rem;background: url(//repo.bfw.wiki/bfwrepo/images/app/icon-dangao.png) center center no-repeat;background-size: 100% auto;margin-left: .1rem;}
        .zhubo-list ul li .desc .info{width: 100%;font-size: .22rem;display: flex;justify-content: space-between;align-items: center;}
        .zhubo-list ul li .desc .info .l{display: flex;justify-content: space-between;align-items: center;}
        .zhubo-list ul li .desc .info .l p{display: inline-flex;padding: .01rem .1rem;background: #f33eea;border-radius: .15rem;align-items: center;text-shadow: 0 0 .1rem rgba(0,0,0,.5);font-size: .22rem;margin-right: .05rem;}
        .zhubo-list ul li .desc .info .l p i{font-size: .22rem;color: #f3c94a;}
        .zhubo-list ul li .desc .info .l span{text-shadow: 0 0 .1rem rgba(0,0,0,.5);}
        .zhubo-list ul li .desc .info .r{display: flex;align-items: center;text-shadow: 0 0 .1rem rgba(0,0,0,.5);}
        .zhubo-list ul li .desc .info .r i{margin-right: .05rem;font-size: .26rem;}
        .hot.list .zhubo-list{width: 100%;height: auto;overflow: hidden;}
        .hot.list .zhubo-list ul{width: 100%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;overflow-x: auto;}
        .hot.list .zhubo-list ul li{width: 3.4rem;height: 4.17rem;flex-shrink: 0;position: relative;border-radius: .15rem;overflow: hidden;margin-right: 0;margin-bottom: .2rem;}
        /* tap-bar */
        .tap-bar-holder{width: 100%;height: 1.15rem;}
        .tap-bar{width: 100%;height: auto;overflow: hidden;position: fixed;bottom: 0;left: 0;z-index: 999;background: #ffffff;box-shadow: 0 -.05rem .1rem rgba(100,100,100,.1);}
        .tap-bar ul{width: 100%;display: flex;justify-content: space-between;}
        .tap-bar ul li{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 1.15rem;color: #666666;}
        .tap-bar ul li.on{color: #fe4c2c;}
        .tap-bar ul li i{font-size: .48rem;}
        .tap-bar ul li span{font-size: .18rem;margin-top: .05rem;}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.5.3.8.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <div class="header">
            <div class="singn">
            </div>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" placeholder="搜索主播昵称">
            </div>
            <div class="message">
                <i class="iconfont icon-duihua2"></i>
                <span>6</span>
            </div>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li :class="activeNav==1?'on':''" @click="changeNav(1)">首页</li>
                <li :class="activeNav==2?'on':''" @click="changeNav(2)">同城</li>
                <li :class="activeNav==3?'on':''" @click="changeNav(3)">颜值</li>
                <li :class="activeNav==4?'on':''" @click="changeNav(4)">才艺</li>
                <li :class="activeNav==5?'on':''" @click="changeNav(5)">PK</li>
                <li :class="activeNav==6?'on':''" @click="changeNav(6)">新秀</li>
            </ul>
        </div>
        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="//repo.bfw.wiki/bfwrepo/image/6126f697c0cd2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="//repo.bfw.wiki/bfwrepo/image/.........完整代码请登录后点击上方下载按钮下载查看