###菜单滚动吸顶效果:
这里写图片描述
这里写图片描述

###html:

        <section class="switchModule" id="switchModule">
            <div class="switchNavbar" id="switchNavbarId"  :class="searchBarFixed == true ? 'isFixed' :''">
                <div class="navbar__item activity" @click="activity()">
                            <div  :class="{switchAcitve:active=='activity'}">活动介绍</div>
                </div>
                <div class="navbar__item lastest" @click="lastest()">
                        <div  :class="{ switchAcitve:active=='lastest'}">最新配音</div>
                </div>
                <div class="navbar__item rank" @click="rank()">
                        <div  :class="{ switchAcitve:active=='rank'}">排行榜</div>
                </div>
            </div>
        </section>

js:
###data中声明数据

   data: function () {
            return {
                active: 'activity',
                scroll: '',
                select: -1,
                activeClass: {
                    background: '#eee'
                },
                searchBarFixed:false,
            };
        },

###mounted中给window添加一个滚动滚动监听事件

 mounted() {
            this.$nextTick(function () {
                //滚动监听事件
                window.addEventListener('scroll', this.menu)

            });
        },

###点击切换高亮效果

    methods: {
      //操作顶部tab
            activity() {
                 this.active = 'activity'
                var a_h = $("#activityIntro").offset().top;
                $('html,body').animate({ scrollTop: a_h }, 800);

            },
            lastest() {
                 this.active = 'lastest'
                var l_h = $("#lastestDubbing").offset().top;
                $('html,body').animate({ scrollTop: l_h }, 800);
 
            },
            rank() {
                this.active = 'rank'
                var r_h = $("#rankLlistDetail").offset().top;
                $('html,body').animate({ scrollTop: r_h }, 800);

            },
    }
//监听滚动的事件
   menu() {
                var _self = this;
                _self.scroll = document.documentElement.scrollTop || document.body.scrollTop;
                var menuTop = document.querySelector('#switchModule').offsetTop
                //console.log(_self.scroll)
                console.log(menuTop)
                //滑动到指定位置菜单吸顶
                if (_self.scroll > menuTop) {
                    this.searchBarFixed = true
                } else {
                    this.searchBarFixed = false
                }
                //滑动到指定位置相应菜单高亮
                var a_h = $("#activityIntro").offset().top;
                var l_h = $("#lastestDubbing").offset().top;
                var r_h = $("#rankLlistDetail").offset().top;
                if (_self.scroll < l_h) {
                    this.active = 'activity'
                } else if (_self.scroll < r_h) {
                    this.active = 'lastest'
                } else if (_self.scroll > r_h) {
                    this.active = 'rank'
                }
 
            },

###如果离开该页面需要移除这个监听的事件

        destroyed() {
            window.removeEventListener('scroll', this.menu)
        },

###css


    .isFixed {
        position: fixed;
        top: 0;
        z-index: 999;
    }
.switchNavbar {
    display: flex;
    position: relative;
    width: 100%;
    background: #fff;
    font-size: 0.307rem;
    color: #333333;
    letter-spacing: 0;
    text-align: justify;
}

完整代码如下:

<template>
    <div class="dubbing_activity">
        <!--@*头部logo*@-->
        <header>
            <div class="headerImg">
                <img :src="activityInfo.cover_image_url" alt="Alternate Text" />
            </div>
            <div class="headerText">
                <div class="headerTextL">
                    <p>{{activityInfo.name}}</p>
                    <div>{{activityInfo.name}},等你来挑战</div>
                </div>
            </div>
        </header>
        <!--跳转活动页-->
        <section class="btntwobox" v-if="showTwoTab">
            <ul>
                <li class="btnbg" @click="guanActivity()"><img src="/Images/common/dubbing_more_icon.png">更多活动</li>
                <li class="btnbg liright" @click="selfActivity()"><img src="/Images/common/dubbing_found_icon.png">自建活动</li>
            </ul>
        </section>
        <div class="empty"></div>
        <!--@*navbar*@-->
        <section class="switchModule" id="switchModule">
            <div class="switchNavbar" id="switchNavbarId" :class="searchBarFixed == true ? 'isFixed' :''">
                <div class="navbar__item activity" @click="activity()">
                    <div :class="{'switchAcitve':active=='activity'}">活动介绍</div>
                </div>
                <div class="navbar__item lastest" @click="lastest()">
                    <div :class="{'switchAcitve':active=='lastest'}">最新配音</div>
                </div>
                <div class="navbar__item rank" @click="rank()">
                    <div :class="{'switchAcitve':active=='rank'}">排行榜</div>
                </div>
            </div>
        </section>
        <!--@*part one*@-->
        <section class="regular_box" id="activityIntro">
            <!--@*活动报名*@-->
            <div class="sub_box  rule_bg" v-if="activityInfo.is_ended">
                <div class="min_title">比赛结果</div>
                <span v-if="activityInfo.meta_obj.results" v-html="ReplaceNewLine(activityInfo.meta_obj.results)"></span>
                <span v-if="!activityInfo.meta_obj.results">评审正在评选中,请耐心等待。</span>
            </div>
            <!--@*赛事简介*@-->
            <p class="sub_title topMar">赛事简介</p>
            <div class="sub_box  compit_bg">
                <span v-html="ReplaceNewLine(activityInfo.meta_obj.introduction)"></span>
                <br />
            </div>
            <!--@*参赛规则*@-->
            <p class="sub_title">参赛规则</p>
            <div class="sub_box  rule_bg">
                <span v-html="ReplaceNewLine(activityInfo.meta_obj.rules)"></span>
            </div>
            <!--@*奖励设置*@-->
            <p class="sub_title">奖励设置</p>
            <div class="sub_box  reward_bg">
                <span v-html="ReplaceNewLine(activityInfo.meta_obj.awards)"></span>
            </div>
        </section>
        <!--@*part two*@-->
        <!--@*最新配音*@-->
        <section class="newlast_dubbing" id="lastestDubbing">
            <div class="newlestTitle">
                <span class="new_ttile">最新配音</span>
                <router-link tag="span" :to="{path:'/dubbing-list'}" class="more">
                    更多
                </router-link>
            </div>
            <ul class="dubbing_ul" id="dubbing_ul">
                <li v-for="(item,index) in dubbingList" v-if="index < 4" v-bind:style="[select==index ? activeClass : '']" @touchstart="touchstart(index)" @touchend="touchend(index)" @click="linkDubbingList(item)">
                    <!--@*左  *@-->
                    <div class="li_l_img">
                        <img :src="item.image_url_origin" alt="Alternate Text" />
                    </div>
                    <!--@*中 *@-->
                    <div class="li_m_title">
                        <div class="top_title">{{item.title}}</div>
                        <div class="min_name">{{item.author_info.nick_name}}的作品</div>
                        <div class="bot_date">
                            <span>{{item.create_time.split('T')[0]}}</span>
                            <span class="play_detail" v-show="item.download_count">
                                <img class="playcount" src="/Images/common/activity_play_icons.png" alt="">
                                {{item.download_count}}次
                            </span>
                            <span class="play_detail" v-show="!item.download_count">
                                <img class="playcount" src="/Images/common/activity_play_icons.png" alt="">
                                0次
                            </span>
                        </div>
                    </div>
                    <!--@*右  *@-->
                    <div class="li_r_zan">
                        <span class="zan_count">{{item.like_count}}</span>
                        <img class="userZan" src="https://static.eudic.net/web/other/dubbing_like_icon@2x.png" alt="">
                    </div>
                </li>
            </ul>
        </section>
        <!--@*排行榜*@-->
        <section class="leaderboard" id="rankLlistDetail">
            <div class="leaderboardTitle">
                <span class="new_ttile">排行榜</span>
                <span class="more" @click="toggleRank()">排序</span>
            </div>
            <!--排序方式-->
            <ul class="rank_style rank_style_top" v-if="showRank&& rankList.length>=3">
                <li v-for="(item,index) in sortByStyle" v-bind:style="[sortSelect==index?activeClass:'']" @touchstart="touchSortStart(index)" @touchend="touchSortEnd(index)" @click="sortLikeCount(index)">
                    <span class="imgbox"><img v-show="rankType-1==index" class="selImg" src="/Images/common/dubbing_tick_img@2x.png" /></span>
                    <span class="selText">{{item.title}}</span>
                </li>
            </ul>
            <ul class="rank_style rank_style_down" v-if="showRank && rankList.length<3">
                <li v-for="(item,index) in sortByStyle" v-bind:style="[sortSelect==index?activeClass:'']" @touchstart="touchSortStart(index)" @touchend="touchSortEnd(index)" @click="sortLikeCount(index)">
                    <span class="imgbox"><img v-show="rankType-1==index" class="selImg" src="/Images/common/dubbing_tick_img@2x.png" /></span>
                    <span class="selText">{{item.title}}</span>
                </li>
            </ul>

            <!--排行榜列表-->
            <ul class="board_ul">
                <li v-for="(item,index) in rankList" v-bind:style="[selectlink==index ? activeClass : '']" @touchstart="touchstartlink(index)" @touchend="touchendlink(index)" @click="linkRankDubbing(item)">

                    <!--@* left *@-->
                    <div class="num">{{item.rank}}</div>
                    <!--@* right*@-->
                    <div class="person_box">
                        <div class="per_img">
                            <img :src="item.userInfo.avatarUrl" alt="Alternate Text" />
                        </div>
                        <div class="li_m_title">
                            <div class="top_title">{{item.userInfo.userName}}</div>
                            <div class="bot_date">
                                <span>{{item.last_update_time.split('T')[0]}}</span>
                                <span class="play_detail" v-show="item.download_count">
                                    <img class="playcount" src="/Images/common/activity_play_icons.png" alt="">{{item.download_count}}次
                                </span>
                            </div>
                        </div>
                        <div class="li_r_zan">
                            <span class="zan_count change_count">{{item.like_count}}</span>
                            <img class="userZan" src="https://static.eudic.net/web/other/dubbing_like_icon@2x.png" alt="">
                        </div>
                    </div>
                </li>
            </ul>
        </section>
        <!--@*活动报名中*@-->
        <section class="signUpBox" v-show="activityInfo.is_ended==false" @click="shareSignUp">
            <div v-show="!!tip||!haveSign">
                <van-button type="primary" class="buttonVan">{{button_text}}</van-button>
            </div>
            <div v-show="!tip&&haveSign">
                <van-button type="primary" class="buttonVan" v-if="user_dubbings_count>0">已完成{{user_dubbings_count}}个配音,继续配音</van-button>
                <van-button type="primary" class="buttonVan" v-if="user_dubbings_count<=0">立即配音</van-button>
            </div>
        </section>
        <!--活动结束-->
        <section class="signUpBox" v-show="activityInfo.is_ended==true">
            <div>
                <div class="signUpNow overActivity">活动已结束</div>
            </div>
        </section>
        <div v-if="showRank" class="blackBg" @click="hideRankUl()"></div>
        <!--微信中-->
        <div class="wxmask" @click="showInWX()" v-show="isWX==true">
            <div class="share_bg">
                <span>1. 点击屏幕右上角的按钮</span>
                <span class="span_two">2. 选择在浏览器中打开</span>
            </div>
        </div>
    </div>
</template>
<script>
        import { Button } from 'vant';
    export default {
        components: {
            [Button.name]: Button,
        },
        data: function () {
            var data1 = {
                sortByStyle: [
                    { title: '按点赞/单篇' },
                    { title: '按播放量/单篇' },
                    { title: '按点赞和播放量/单篇' },
                    { title: '按点赞/总和' },
                    { title: '按播放量/总和' },
                    { title: '按点赞和播放量/总和' },
                ],
                activityInfo: {
                    meta_obj: {
                        introduction: "",
                        awards: "",
                        rules: "",
                        results:""
                    }
                },
                dubbingList: [],
                haveSign: false,
                user_dubbings_count: 0,
                tip: global.app.tip,
                showRank: false,
                rankList: [],
                active: 'activity',
                scroll: global.app.detailScroll,
                rankType: global.app.rank_type,
                select: -1,
                selectlink: -1,
                sortSelect: -1,
                activeClass: {
                    background: '#eee'
                },
                activeGrey: {
                    background: '#f7f7f7'
                },
                searchBarFixed: false,
                isAddZan: false,
                zanAdd: false,
                count: '',
                grayShow: false,
                isWX: false,
                page: 1,
                button_text: '',
                is_extending: true,
                showTwoTab: false,
            }
            return data1;
        },
        created() {
            var _self = this;
            _self.activityInfo = global.app.event_detail;
            //获取最新配音列表
            this.$http.get('/Dubbing/GetRecentDubbingEventDubbingInfos?eventid=' + global.app.event_id + '&page=1&numberofrows=10', {
            })
                .then(function (response) {
                    _self.dubbingList = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
            if (!is_share) {
            this.$http.get('/Dubbing/UserHasJoinedEvent?eventid=' + global.app.event_id + '&userid=' + global.app.userid, {
            })
                .then(function (response) {
                    _self.user_dubbings_count = response.data.user_dubbings_count;
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },

        mounted() {
            this.$nextTick(function () {
                var _self = this;
                this.rankLists();
                _self.scroll = 0;
                //报名成功之后,底部就变成了立即配音
                if (!is_share) {
                    if (_self.$route.query.value == "nowDubbing") {
                        global.app.has_joined = true;
                    }
                    _self.showTwoTab = true;
                }
                //判断用户是否已报名
                _self.button_text = "立即报名";
                if (!is_share) {
                    _self.haveSign = global.app.has_joined;
                    if (_self.haveSign) {
                        _self.button_text = "立即配音";
                    }
                }
                //滚动监听事件
                window.addEventListener('scroll', this.menu);
            });
        },

        methods: {
            ReplaceNewLine(content)
            {
                var string = content;
                try {
                    string = string.replace(/\r\n/g, "<br/>")
                    string = string.replace(/\n/g, "<br/>");
                } catch (e) {
                    ;
                }
                return string;
            },
            //跳转到官方活动
            guanActivity() {
                window.location.href = "/Dubbing/EventHome?userId=" + global.app.userid + '#/';
            },
            selfActivity() {
                window.location.href = "/Dubbing/EventHome?userId=" + global.app.userid + '&tab=users#/';
            },
            //排行榜链接跳转
            linkRankDubbing(e) {
                if (this.rankType <= global.app.dubbing_rank_type.dubbing_like_download_count_single) {
                    window.location.href = global.app.user_dubbing_url.replace("=dubbing_id", "=" + e.dubbing_id).replace("=uuid", "=" + e.uuid).replace("=action_data", "=" +e.dubbing_id);
                } else {
                    //window.location.href = "/dubbing/eventworks?userid=" + e.guid_user_id + "&eventid="+global.app.event_id;
                    this.$router.push({ path: '/userdubbing-list/'+e.guid_user_id })
                }
            },
            showInWX() {
                this.isWX = false;
            },
            //打开分享
            shareSignUp() {
                var _self = this;
                //微信内置浏览器
                if (is_weixin_browser) {
                    this.isWX = true;
                } else if (!is_share) {//软件内部浏览器
                    if (!!_self.tip) {
                        _self.button_text = _self.tip
                    }
                    else if (!_self.haveSign) {
                        this.$router.push({ path: '/sign-up' })
                    } else {
                        this.$router.push({ path: '/set-dubbing' })
                    }
                } else {//非微信。非软件内部
                    window.location.href = global.app.app_event_detail_share_url;
                    setTimeout(function () {
                        window.location.href = global.app.download_url;
                    }, 2000)
                }
            },
            touchstartGrey() {
                this.grayShow = true;
            },
            touchendGrey() {
                this.grayShow = false;
            },
            touchstart(i) {
                this.select = i;
            },
            touchend(i) {
                this.select = -1;
            },
            touchstartlink(i) {
                this.selectlink = i;
            },
            touchendlink(i) {
                this.selectlink = -1;
            },
            touchSortStart(i) {
                this.sortSelect = i;
            },
            touchSortEnd(i) {
                this.sortSelect = -1;
            },
            //最新配音列表跳转
            linkDubbingList(e) {
                window.location.href = global.app.ting_app_url_schema + "://x-callback-url/tingAction?item_action=24&dubbing_id=" + e.dubbing_uuid + "&uuid=" + e.uuid + "&action_data=" + e.dubbing_uuid ;
            },
            //选择排序方式
            sortLikeCount(i) {
                this.rankType = i + 1;
                global.app.rank_type = this.rankType;
                this.rankLists();
                this.showRank = false;
            },
            //显示隐藏排序方式
            toggleRank() {
                this.showRank = !this.showRank;
            },
            hideRankUl() {
                this.showRank = false;
            },
            //操作顶部tab
            activity() {
                this.active = 'activity';
                var a_h = $("#activityIntro").offset().top-40;
                $('html,body').animate({ scrollTop: a_h }, 400);
            },
            lastest() {
                this.active = 'lastest';
                var l_h = $("#lastestDubbing").offset().top-40;
                $('html,body').animate({ scrollTop: l_h }, 400);
            },
            rank() {
                this.active = 'rank';
                var r_h = $("#rankLlistDetail").offset().top-40;
                $('html,body').animate({ scrollTop: r_h }, 400);
            },
            rankLists() {
                //排行榜
                this.page = 0;
                var _self = this;
                self.is_extending = true;
                this.$http.get('/Dubbing/GetDubbingEventUserRanks?eventid=' + global.app.event_id + '&page='+ 1 +'&numberofrows=20&LeaderBoardType=' + this.rankType, {
                })
                    .then(function (response) {
                        _self.page = 1;
                        _self.rankList = response.data;
                        self.is_extending = false;
                    })
                    .catch(function (error) {
                        console.log(error);
                        self.is_extending = false;
                    });
            },
            extendRankLists() {
                //排行榜
                var _self = this;
                self.is_extending = true;
                this.$http.get('/Dubbing/GetDubbingEventUserRanks?eventid=' + global.app.event_id + '&page=' + (this.page+1) + '&numberofrows=20&LeaderBoardType=' + this.rankType, {
                })
                    .then(function (response) {
                        _self.page++;
                        _self.rankList = _self.rankList.concat(response.data);
                        _self.rankList = _self.rankList.sort(_self.sortRank);
                        self.is_extending = false;
                    })
                    .catch(function (error) {
                        console.log(error);
                        self.is_extending = false;
                    });
            },
            sortRank(a, b) {
                return a.rank - b.rank;
            },
            //监听页面滚动
            menu() {
                var _self = this;
                _self.scroll = document.documentElement.scrollTop || document.body.scrollTop;
                var menuTop = document.querySelector('#switchModule').offsetTop;
                //滑动到指定位置菜单吸顶
                if (_self.scroll > menuTop) {
                    this.searchBarFixed = true
                } else {
                    this.searchBarFixed = false
                }
                //滑动到指定位置相应菜单高亮
                var a_h = $("#activityIntro").offset().top - 50;
                var l_h = $("#lastestDubbing").offset().top - 50;
                var r_h = $("#rankLlistDetail").offset().top - 50;
                if (_self.scroll < l_h) {
                    this.active = 'activity';
                } else if (_self.scroll > l_h && _self.scroll < r_h) {
                    this.active = 'lastest';
                } else if (_self.scroll > r_h) {
                    this.active = 'rank';
                }

                //分页加载数据
                //滚动的距离 +   整个窗口的高度>内容可视区域的高度
                if (_self.scroll + window.innerHeight >= document.documentElement.offsetHeight) {
                    if (self.is_extending) {
                        return;
                    }
                    _self.extendRankLists();
                }
            },
        },
        destroyed() {
            window.removeEventListener('scroll', this.menu)
        },
    }

</script>
<style>
    .dubbing_activity {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
        will-change: transform;
        transition: all .3s ease;
        position: absolute;
        width: 100%;
        left: 0;
    }

    .slide-right-enter {
        transform: translateX(-100%);
    }

    .slide-right-leave-active {
        transform: translateX(100%);
    }

    .slide-left-enter {
        transform: translateX(100%);
    }

    .slide-left-leave-active {
        transform: translateX(-100%);
    }

    .rank_style {
        width: 3.3rem;
        height: 3.56rem;
        position: absolute;
        top: 0.7rem;
        right: 0.2rem;
        z-index: 999999;
        text-align: left;
        font-size: 0.256rem;
        color: #444;
        background: url("/Images/common/bubble_img_white.png") no-repeat;
        background-size: 100% 100%;
        background-position: 100% center;
    }

    .rank_style_down {
        top: -3.55rem;
        background: url("/Images/common/bubble_img_down_white.png") no-repeat;
        background-size: 100% 100%;
        background-position: 100% center;
        padding-bottom: 0.1rem;
        padding-top: 0.2rem;
    }

    .rank_style_top {
        padding-top: 0.35rem;
    }

    .rank_style li {
        display: flex;
        align-items: center;
        width: 3.16rem;
        height: 0.55rem;
        padding-left: 0.15rem;
        line-height: 0.5rem;
        letter-spacing: 1px;
    }

    .board_ul {
        padding-bottom: 30px;
    }


    .isFixed {
        position: fixed !important;
        top: 0;
        z-index: 999;
    }

    .isAdd {
        color: #FF8620;
    }

    .dubbing_activity .grayBjHover {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 93%;
        height: 40px;
        z-index: 20;
        background: rgba(0, 0, 0, 0.2);
        margin-left: 0.239rem;
        margin-top: 14px;
    }

    .activeSpan {
        background: #ccc;
    }

    .imgbox {
        display: inline-block;
        width: 0.393rem;
    }

    .selImg {
        flex: 1;
        display: inline-block;
        width: 15px;
        height: 12px;
        margin-right: 14px;
    }

    .selText {
        display: inline-block;
        flex: 10;
    }

    .blackBg {
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        display: block;
        background: rgba(0,0,0,.15);
        z-index: 99999;
    }

    .wxmask {
        position: fixed;
        height: 62px;
        width: 100%;
        top: 0;
        /* background: rgba(0,0,0,.5); */
        z-index: 1000;
        display: block;
    }

        .wxmask .share_bg {
            background: url(/Images/common/share_background.png) center center no-repeat;
            background-size: 100% 100%;
            position: fixed;
            top: 0;
            right: 0;
            width: 56%;
            height: 62px;
            padding-left: 9px;
        }

    .share_bg span {
        display: block;
        color: #fff;
        font-size: 14px;
        position: relative;
        top: 13px;
    }

    .span_two {
        margin-top: 3px;
    }

    .overActivity {
        background: #ccc !important;
    }

    * {
        margin: 0px;
        padding: 0px;
    }

    img {
        width: 100%;
        vertical-align: middle;
    }

    body {
        background: #f5f5f5;
        font-size: 0.273rem;
    }

    body, html {
        font-family: PingFangSC-Regular,-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
        color: #444444;
    }

    .dubbing_activity {
        padding-bottom: 40px;
        position: relative;
    }

    header, section {
        background: #fff;
    }

    .empty {
        height: 8px;
        background: #F8F8F8;
        border: 1 solid #F0F0F0;
    }

    section {
        padding: 0 0.256rem;
    }

    .headerImg {
        height: 3.21rem;
    }

        .headerImg img {
            height: 3.21rem;
        }

    .headerText {
        padding: 0.358rem 0.256rem;
        display: flex;
    }

    .headerTextL p {
        font-size: 0.307rem;
        color: #333333;
        margin-bottom: 0.137rem;
        font-weight: 600;
    }

    .headerTextL > div {
        font-size: 0.239rem;
        color: #666666;
        letter-spacing: 0;
        text-align: justify;
        line-height: 0.358rem;
    }

    .headerTextL {
        flex: 5;
        padding-right: 0.683rem;
    }

    .switchModule {
        padding: 0;
        width: 100%;
        height: 0.819rem;
    }

    .switchNavbar {
        display: flex;
        position: relative;
        width: 100%;
        background: #fff;
        font-size: 0.307rem;
        color: #333333;
        letter-spacing: 0;
        text-align: justify;
    }

    .navbar__item {
        position: relative;
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        padding: 13px 0;
        text-align: center;
        font-size: 0.256rem;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

        .navbar__item div {
            width: 54%;
            margin: 0 auto;
        }

    .switchAcitve {
        color: #51ABFF;
        border-bottom: 2px solid #51ABFF;
    }

    .signUp {
        height: 69px;
        background: url("https://static-main.frdic.com/web/dubbing/notice_banner.png") no-repeat;
        /*background: url("https://static.eudic.net/web/dubbing/notice_banner.png") no-repeat;*/
        background-size: 100% 100%;
        display: flex;
        padding-left: 1.7rem;
        border-radius: 5px;
    }

    .m_sign {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
    }

        .m_sign span {
            display: block;
        }

    .span_top {
        font-size: 0.273rem;
        color: #F78530;
    }

    .span_bot {
        font-size: 0.205rem;
        color: #9B9B9B;
    }

    .dubbingNow {
        flex: 0.6;
        height: 25px;
        line-height: 69px;
        text-align: center;
    }

        .dubbingNow a {
            display: inline-block;
            width: 1.161rem;
            line-height: 25px;
            color: #fff;
            background: linear-gradient(to right, #F76B1C,#FBDA61 );
            box-shadow: 0 2px 2px 0 #F4D49E;
            border-radius: 15px;
            font-size: 0.205rem;
            text-align: center;
        }

    .sub_title {
        padding: 20px 0;
        font-size: 0.307rem;
        color: #444444;
        font-weight: bold;
    }

    .sub_box {
        border-radius: 5px;
        padding: 15px;
        box-sizing: border-box;
    }

        .sub_box span {
            display: inline-block;
            margin-top: 15px;
            font-size: 0.239rem;
        }

    .regular_box {
    }

    .compit_bg {
        border: 0.5px solid #D7EBFF;
        background: #F5FAFF;
    }

    .rule_bg {
        background: #FFFBF3;
        border: 0.5px solid #FFE7BF;
    }

    .reward_bg {
        background: #F8FFFB;
        border: 0.5px solid #CDECDD;
    }

    .color_blue {
        color: #478DE5;
    }

    .color_grey {
        color: #8F8F8F;
    }

    .sub_box span:first-child {
        margin-top: 0px;
    }

    .min_title {
        font-size: 0.273rem;
        text-align: center;
        font-weight: bold;
    }

    .mar_top {
        margin-top: 15px;
    }

    .newlast_dubbing {
        margin-top: 8px;
    }

    .newlestTitle {
        padding: 20px 0 10px 0;
        line-height: 0.4rem;
    }

        .newlestTitle .new_ttile {
            font-size: 0.307rem;
            font-weight: bold;
        }

        .newlestTitle .more {
            float: right;
            font-size: 0.222rem;
            color: #A9B0B5;
        }

    .dubbing_ul li {
        height: 1.71rem;
        border-bottom: 1px solid #EAEAEA;
        box-sizing: border-box;
    }

    .dubbing_ul li {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .dubbing_ul .li_l_img {
        flex: 4.4;
        overflow: hidden;
        position: relative;
    }

        .dubbing_ul .li_l_img img {
            width: 1.707rem;
            height: 1.229rem;
            display: block;
            border-radius: 5px;
        }

    .li_m_title {
        flex: 8;
        margin-left: 0.256rem;
        padding-right: 0.24rem;
    }

        .li_m_title .top_title {
            font-size: 0.273rem;
            color: #444;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 0;
            display: -webkit-box;
        }

        .li_m_title .min_name {
            font-size: 0.239rem;
            color: #8F8F8F;
            margin: 0.068rem 0;
        }

        .li_m_title .bot_date {
            font-size: 0.239rem;
            color: #8F8F8F;
            display: flex;
            align-items: center;
        }

    .play_detail {
        height: 0.239rem;
        line-height: 0.27rem;
        margin-left: 0.3rem;
        display: flex;
        font-size: 0.239rem;
    }

        .play_detail .playcount {
            display:inline-block;
            width: 0.239rem;
            height: 0.239rem;
            padding-right: 5px;
            vertical-align: text-top;
        }

    .dubbing_ul .li_r_zan {
        flex: 1;
        display: flex;
        margin-top: -0.887rem;
        height: 0.307rem;
        line-height: 0.307rem;
        align-items: center;
    }

    .zan_count {
        font-size: 0.239rem;
        color: #8F8F8F;
        margin-right: 0.1rem;
        height:18px;
        line-height:22px;
    }

    .userZan {
        width: 0.307rem;
        height: 0.307rem;
    }

    .leaderboard {
        margin-top: 8px;
        position: relative;
    }

    .leaderboardTitle {
        padding: 20px 0 10px 0;
    }

        .leaderboardTitle .new_ttile {
            font-size: 0.307rem;
            font-weight: bold;
        }

        .leaderboardTitle .more {
            float: right;
            font-size: 0.222rem;
            color: #A9B0B5;
        }

    .board_ul .num {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 0.239rem;
        color: #8C8C8C;
    }

    .person_box .per_img {
        flex: 2;
    }

    .per_img img {
        width: 0.649rem;
        height: 0.649rem;
        border-radius: 50%;
        border: 1px solid #dfdfdf;
    }

    .board_ul li {
        display: flex;
        height: 1.161rem;
    }

        .board_ul li .person_box {
            flex: 14;
            display: flex;
            align-items: center;
            border-bottom: 0.5px solid #ECECEC;
        }

    .person_box .li_m_title {
        flex: 8;
        margin-left: 5px;
    }

    .person_box .li_r_zan {
        flex: 2;
        display: flex;
        margin-top: -0.358rem;
        align-items: center;
        height: 0.307rem;
        line-height:0.307rem;
    }

    .person_box .userZan {
        width: 0.307rem;
        height: 0.307rem;
        display: inline-block;
        vertical-align: text-bottom;
    }

    .signUpBox {
        width: 93%;
        position: fixed;
        padding: 0.239rem 0.256rem;
        bottom: 0px;
        height: 40px;
        line-height: 40px;
        z-index: 99998;
    }

        .signUpBox .signUpNow {
            height: 40px;
            background: #51ABFF;
            border-radius: 5px;
            color: #fff;
            text-align: center;
        }

    .blackBj {
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        display: none;
        background: rgba(0,0,0,.3);
        z-index: 99999;
    }

    .signPage {
        width: 92%;
        z-index: 999999;
        position: fixed;
    }

        .signPage .sign_title {
            font-size: 0.307rem;
            padding: 20px 0;
            font-weight: bold;
        }

        .signPage .sign_detail {
            font-size: 0.239rem;
            margin-bottom: 10px;
        }

    .sign_detail .left_q {
        color: #8F8F8F;
    }

    .sign_detail .edit {
        color: #8F8F8F;
        float: right;
    }

    .signOkInfo {
        font-size: 0.205rem;
        color: #8F8F8F;
    }

    .signUp_box {
        position: absolute;
        bottom: 20px;
        bottom: 0px;
        width: 92%;
        height: 40px;
        line-height: 40px;
        padding: 0.239rem 0;
    }

    .signUp_now {
        height: 40px;
        background: #51ABFF;
        border-radius: 5px;
        color: #fff;
        text-align: center;
    }

    .inputEmail {
        padding-bottom: 0.1rem;
        border: none;
        /*border-bottom: 1px solid #ccc;*/
        outline: none;
        border-radius: 0;
    }

    .switchNavbar a {
        color: #696969;
    }

    /*最新配音列表*/
    .channel_box {
        position: relative;
        height: 1.673rem;
        border-bottom: 0.5px solid #E6E6E6;
        background-color: #fff;
        font-size: 0.239rem;
        padding: 0.24rem 0.239rem;
    }

    .channel_contain {
        height: 1.25rem;
        padding: 0px;
        display: flex;
        align-items: center;
    }

    .chan_img {
        height: 100%;
        align-items: center;
        display: flex;
        flex: 3;
    }

    .chan_title {
        flex: 8;
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
        margin-left: 0.256rem;
        position: relative;
        height: 100%;
    }

    .m_title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 0;
        display: -webkit-box;
    }

    .m_titledes {
        font-size: 0.222rem;
        color: #696969;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        margin-top: 0.1rem;
    }

    .chan_title .m_title {
        color: #444;
        font-size: 0.273rem;
    }

    .chan_title .m_time {
        color: #858585;
        font-size: 0.239rem;
        position: absolute;
        bottom: 0;
        display: inline-block
    }

    .chan_img img {
        width: 1.71rem;
        height: 1.23rem;
        border-radius: 5px;
    }

    .confirm_video {
        position: fixed;
        bottom: 0;
        width: 93%;
        height: 40px;
        line-height: 40px;
        background: #51ABFF;
        text-align: center;
        background: #fff;
        padding: 10px 0.239rem;
    }

        .confirm_video span {
            display: inline-block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #51ABFF;
            text-align: center;
            border-radius: 5px;
            font-size: 0.239rem;
            color: #fff;
        }

    .chan_bot {
        display: flex;
        font-size: 0.201rem;
        color: #8F8F8F;
        margin-top: 0.171rem;
    }

        .chan_bot .bot_l {
            flex: 1.7;
        }

            .chan_bot .bot_l img {
                width: 10px;
                height: 10px;
            }

    .bot_l .down_num {
        margin-left: 3px;
    }

    .chan_bot .bot_m {
        flex: 2;
    }

        .chan_bot .bot_m img {
            width: 10px;
            height: 10px;
        }

    .bot_m .tim_num {
        margin-left: 5px;
    }

    .bot_r {
        flex: 1;
        text-align: right;
    }


    /*设置配音页面*/
    body {
        background: #fff;
    }

    .setDubbingBox {
        background: #fff;
    }

    .ul_list {
        position: relative;
        padding: 0.239rem;
    }

        .ul_list li {
            display: inline-block;
            width: 2.87rem;
            height: 2.5rem;
            background-color: #fff;
            font-size: 0.239rem;
        }

            .ul_list li:nth-child(even) {
                float: right;
            }

    .video_img {
    }

        .video_img img {
            border-radius: 5px;
            width: 100%;
            height: 1.6rem;
        }

    img {
        width: 100%;
        height: 1.5rem;
    }

    .video_title {
        padding-top: 0.05rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #444;
        font-size: 0.256rem;
    }

    .van-checkbox {
        float: left;
        position: relative;
        top: 0.5rem;
        left: 0.1rem;
        z-index: 99;
    }

    .van-checkbox__icon {
        border-radius: 20px;
    }

    .activeVideo {
        color: #fff;
        border-color: #06bf04;
        background-color: #06bf04;
    }


    input[type=checkbox] {
        position: relative;
        width: 10px;
        height: 1px;
    }

        input[type=checkbox]::before {
            content: '';
            position: absolute;
            top: 0.2rem;
            left: 0.1rem;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            color: white;
            font-size: 0.239rem;
            background-color: transparent;
            border: 1px solid #999;
            border-radius: 30px;
        }

        input[type=checkbox]:checked::before {
            font-family: FontAwesome;
            color: #fff;
            border-color: #06bf04;
            background-color: #06bf04;
            content: "\f00c";
        }

    .confirm_video {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #51ABFF;
        text-align: center;
    }

        .confirm_video span {
            color: #fff;
        }

    .ch_label {
        position: absolute;
        display: inline-block;
        width: 2.87rem;
        height: 1.6rem;
    }

    body.en .newWeui-btn {
        background: #43a1c7;
    }

    body.en .newWeui-btn_plain-primary {
        border: 1px solid #43a1c7;
    }

    body.de .newWeui-btn {
        background: #37ac1a;
    }

    body.de .newWeui-btn_plain-primary {
        border: 1px solid #37ac1a;
    }

    body.fr .newWeui-btn {
        background: #2695e0;
    }

    body.fr .newWeui-btn_plain-primary {
        border: 1px solid #2695e0;
    }

    body.es .newWeui-btn {
        background: #a6203b;
    }

    body.es .newWeui-btn_plain-primary {
        border: 1px solid #a6203b;
    }

    .buttonVanNone {
        background: #fff !important;
    }

    .buttonVan {
        width: 100%;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 16px !important;
    }

    .buttonVanShort {
        width: 100%;
        height: 40px !important;
        line-height: 40px !important;
        background: #fff !important;
        color: #51abff !important;
        border-color: #51abff !important;
        font-size: 16px !important;
    }
    .signUpBox .van-button {
        margin: 0;
        padding: 0;
        width: 100% !important;
    }
    .topMar {
        padding-top: 10px;
    }

    .btntwobox {
        margin-bottom: 20px;
        position:relative;
    }

        .btntwobox li {
            display: inline-block;
            padding: 9px 0;
            line-height: normal;
            width: 47.5%;
            background: #FAFAFA;
            border: 0.5px solid #EEEEEE;
            border-radius: 5px;
            text-align: center;
            font-size: 0.239rem;
        }

        .btntwobox img {
            width: 0.273rem;
            height: 0.273rem;
            margin-right: 10px;
            position: relative;
            top:-1px;
        }

        .btntwobox .liright {
            float: right;
        }
</style>

完整页面展示(一个页面,从上往下滑动的截图):
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐