vue 监听滚动事件之菜单滚动吸顶&&点击滑动到指定位置&&点击高亮
菜单滚动吸顶效果：html:<section class="switchModule" id="switchModule"><div class="switchNavbar" id="switchNavbarId":class="searchBarFixed == t
·
###菜单滚动吸顶效果：
###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>
完整页面展示（一个页面，从上往下滑动的截图）：
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)