Vue基础实现bilibili移动端页面
一、Vue基础实现bilibili移动端页面
简述：对于已经学到vue的同学，bilibili的页面布置难度不大，仔细阅读仔细体悟；难点在于怎么做到使用vue‘不操作’dom，从而实现较为复杂的逻辑方法。由于是按头部-导航-轮播-视频-底部的顺序，所以并没有多少注释，但是也并不难阅读。
axios.js可搜索自行下载
//html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./assets/reset.css">
<link rel="stylesheet" href="./assets/index.css">
<script src="./axios.js"></script>
<script src="./request.js"></script>
<script src="./vue.js"></script>
</head>
<body>
<!-- 图片、iconfont、svg -->
<div id="app" @scroll="handleScroll">
<div class="header">
<div class="logo">
<svg width="62" height="28" viewBox="0 0 62 28" fill="#de698c"><path id="Shape" class="cls-1" d="M57.45 25a7 7 0 0 1-.74 0c-.47-.05-.94 0-1.4-.06-.3 0-.29 0-.32-.3-.07-.88-.16-1.75-.24-2.63l-.21-2.31c-.07-.77-.15-1.41-.23-2.11s-.14-1.33-.21-2q-.14-1.25-.29-2.5l-.27-2.22Q53.29 9.21 53 7.5c-.18-1.21-.39-2.42-.61-3.62 0-.22 0-.22.18-.26a14.07 14.07 0 0 1 2.63-.25h.27a.24.24 0 0 1 .18.08.25.25 0 0 1 .06.19c0 .62.07 1.24.12 1.87.07 1 .16 2 .23 3 0 .65.09 1.31.14 2l.24 3.15c0 .64.09 1.29.14 1.94l.24 2.82c0 .6.09 1.2.15 1.8l.24 2.66c.13.73.18 1.42.24 2.12z"></path><path data-name="Shape" class="cls-1" d="M23.74 3.39h.51c.19 0 .29.08.3.32.07 1.1.13 2.19.21 3.28s.17 2.36.26 3.54.17 2.17.25 3.25.2 2.38.3 3.57l.21 2.73c.07.91.16 1.69.23 2.53l.2 2.18c0 .23 0 .24-.25.24-.66 0-1.32-.09-2-.07-.15 0-.19-.06-.22-.21-.05-.31 0-.62-.08-.93-.09-.8-.14-1.64-.22-2.47s-.15-1.49-.23-2.24-.14-1.37-.21-2.05-.15-1.34-.23-2-.14-1.24-.22-1.85c-.11-.91-.22-1.81-.34-2.72S22 8.8 21.88 8q-.24-1.69-.55-3.37c0-.25-.09-.51-.15-.76s0-.2.15-.22c.39 0 .78-.13 1.17-.17a6.83 6.83 0 0 1 1.24-.06z"></path><path id="Shape-3" data-name="Shape" class="cls-1" d="M51.39 14.31c.74 0 .76 0 .88.67s.25 1.63.35 2.45.21 1.75.3 2.62c.08.7.14 1.41.21 2.12s.16 1.47.23 2.22c0 .42.09.83.13 1.25 0 .12 0 .19-.14.2l-.76.09-1.4.14c-.24 0-.26 0-.3-.22l-1.22-6.23c-.27-1.39-.53-2.77-.8-4.14 0-.19-.07-.38-.1-.57a.16.16 0 0 1 0-.14.16.16 0 0 1 .12-.07 14.3 14.3 0 0 1 2.5-.39z"></path><path id="Shape-4" data-name="Shape" class="cls-1" d="M20.13 14.31c.8 0 .79 0 .92.71.19 1.11.32 2.22.44 3.33s.25 2.15.36 3.23c.08.74.14 1.47.21 2.22.05.52.12 1 .17 1.57a.94.94 0 0 0 0 .19c0 .26 0 .28-.25.3l-1.47.14-.55.06c-.24 0-.24 0-.29-.22-.17-.83-.33-1.66-.49-2.5l-1.18-6c-.16-.8-.29-1.61-.44-2.41 0-.15 0-.21.15-.25a14.56 14.56 0 0 1 2.43-.39z"></path><path id="Shape-5" data-name="Shape" class="cls-1" d="M30.64 22.7v3.36a.82.82 0 0 0 0 .1c0 .16 0 .24-.21.23h-2.07c-.26 0-.25 0-.27-.26l-.24-2.54c-.08-.85-.14-1.56-.21-2.34s-.16-1.6-.23-2.41c-.05-.54-.1-1.07-.14-1.61l-.18-2.09c0-.29 0-.34.29-.37a14.82 14.82 0 0 1 2.3-.07 3.18 3.18 0 0 1 .57.09c.23.06.26.09.27.33 0 .48.05 1 .06 1.45s0 1.08 0 1.61c.05 1.55.04 3.04.06 4.52z"></path><path id="Shape-6" data-name="Shape" class="cls-1" d="M61.84 22.85v3.35c0 .14-.05.19-.19.19h-1a10 10 0 0 0-1.12 0c-.25 0-.25 0-.27-.23-.1-1.11-.21-2.2-.31-3.3l-.27-3c-.09-1-.2-2.1-.3-3.14 0-.52-.09-1.05-.13-1.57 0-.23 0-.28.27-.28.46 0 .91-.1 1.37-.09a8.11 8.11 0 0 1 1.37.07c.38.07.41.09.43.5.07 1.19 0 2.39.09 3.58s.02 2.51.06 3.92z"></path><path id="Shape-7" data-name="Shape" class="cls-1" d="M50.62 8.54a4.62 4.62 0 0 1 .68.06.23.23 0 0 1 .21.23c.06.68.13 1.37.2 2.05s.12 1.11.17 1.66c0 .35 0 .36-.31.38l-.92.06c-.2 0-.27 0-.3-.24-.12-1-.25-2-.38-3.07 0-.28-.07-.57-.12-.86a.21.21 0 0 1 .19-.28z"></path><path id="Shape-8" data-name="Shape" class="cls-1" d="M19.46 8.54a3.7 3.7 0 0 1 .63 0 .21.21 0 0 1 .19.21c0 .32.08.64.11 1q.15 1.47.27 3c0 .21 0 .22-.19.23l-1.08.02c-.21 0-.24 0-.27-.23l-.27-2.17c-.09-.72-.1-1.18-.19-1.79 0-.16 0-.21.16-.24a4 4 0 0 1 .64 0z"></path><path id="Shape-9" data-name="Shape" class="cls-1" d="M30.43 11.25v1.87c0 .28 0 .28-.27.28a9.08 9.08 0 0 1-1-.05c-.22 0-.22 0-.23-.25 0-.76 0-1.52-.06-2.28V9.28c0-.28 0-.28.26-.28a7.06 7.06 0 0 1 1.14.07c.23 0 .24 0 .24.28v1.9z"></path><path id="Shape-10" data-name="Shape" class="cls-1" d="M61.65 11.27v1.87c0 .26 0 .28-.27.26s-.7 0-1 0c-.17 0-.22-.09-.21-.24V13L60 9.44v-.19C60 9 60 9 60.29 9s.68 0 1 .05.34.09.34.41q.02.91.02 1.81z"></path><path id="Shape-11" data-name="Shape" class="cls-1" d="M18.61 12.73c0 .34 0 .34-.32.42l-.68.16c-.23 0-.23 0-.27-.17l-.69-3.83c0-.28 0-.28.23-.33l1-.16c.21 0 .23 0 .27.2.08.45.16.91.22 1.36.09.72.17 1.45.26 2.17a.68.68 0 0 1-.02.18z"></path><path id="Shape-12" data-name="Shape" class="cls-1" d="M47.86 9l1.28-.21c.15 0 .2.07.22.21.07.5.16 1 .22 1.49.09.72.21 1.44.23 2.18v.22a.18.18 0 0 1 0 .14.18.18 0 0 1-.12.06l-.87.2c-.14 0-.19 0-.21-.16-.09-.51-.19-1-.27-1.52l-.44-2.5a.89.89 0 0 1-.04-.11z"></path><path id="Shape-13" data-name="Shape" class="cls-1" d="M28.32 12a9.73 9.73 0 0 1 0 1.22c0 .12-.05.2-.19.21l-.86.07c-.14 0-.18 0-.2-.18-.06-.39-.05-.79-.09-1.19-.07-.75-.1-1.5-.15-2.25v-.55a.13.13 0 0 1 0-.12.13.13 0 0 1 .12 0c.37 0 .74-.08 1.11-.07.22 0 .24 0 .25.24v.45c-.03.67-.01 1.43.01 2.17z"></path><path id="Shape-14" data-name="Shape" class="cls-1" d="M59.53 11.52v1.55c0 .28 0 .29-.29.32l-.76.07c-.14 0-.21 0-.22-.19 0-.69-.09-1.37-.13-2.06S58 10.08 58 9.51v-.19c0-.11 0-.18.16-.19.36 0 .72-.08 1.08-.07s.22 0 .24.24c.05.7.05 1.48.05 2.22z"></path><path id="Shape-15" data-name="Shape" class="cls-1" d="M17.54 20.75a3.69 3.69 0 0 0-.47-.44 8.21 8.21 0 0 0-1.62-1 18.27 18.27 0 0 0-3.59-1.21 18.68 18.68 0 0 0-4.3-.52 10.55 10.55 0 0 0-1.4.11c-.24 0-.25 0-.27-.19-.1-1.07-.22-2.14-.31-3.21s-.19-2.15-.25-3.29c-.08-1.39-.16-2.77-.19-4.16V2.09a2.54 2.54 0 0 1 0-.35V.42c0-.17 0-.21-.21-.17a3.67 3.67 0 0 0-.73.22L.43 2.08c-.13.06-.18.11-.15.26.24 1.12.46 2.23.65 3.36q.36 2.06.67 4.13c.13.83.25 1.68.36 2.52s.23 1.75.34 2.62.19 1.58.27 2.37.2 1.7.3 2.56.14 1.46.21 2.18c.1 1 .21 2 .3 3s.14 1.74.21 2.6c0 .24.05.28.29.28H5.85a28.93 28.93 0 0 0 3.75-.46 17.26 17.26 0 0 0 4.91-1.68A9 9 0 0 0 17 24a3.59 3.59 0 0 0 .91-1.56 1.73 1.73 0 0 0-.37-1.69zm-8.78 4.52c-.21-1.58-.43-3.15-.65-4.78a44 44 0 0 1 4.63 1.71 27.84 27.84 0 0 1-4 3.07z"></path><path id="Shape-16" data-name="Shape" class="cls-1" d="M48.52 20.5a7 7 0 0 0-1.3-.88A16.07 16.07 0 0 0 44 18.36a19.59 19.59 0 0 0-5.07-.75 10 10 0 0 0-1.46.11c-.27 0-.29 0-.32-.24-.06-.5-.11-1-.16-1.51-.09-.92-.18-1.84-.25-2.77-.1-1.28-.19-2.55-.26-3.83 0-1-.1-1.94-.09-2.9v-.61q-.06-1.21 0-2.42c0-1 0-2 .09-3 0-.18 0-.21-.2-.19a2.25 2.25 0 0 0-.55.16c-1.37.5-2.67 1.12-4 1.64a.19.19 0 0 0-.14.28 1.75 1.75 0 0 1 0 .19c.3 1.43.57 2.86.8 4.31.16 1 .33 2 .49 3 .12.78.22 1.57.33 2.36s.19 1.47.27 2.22.2 1.58.29 2.36.15 1.3.22 1.94.16 1.39.23 2.08.14 1.48.21 2.22.16 1.61.23 2.41.13 1.52.19 2.28c0 .17.1.22.25.22h.76a12 12 0 0 0 1.82-.07c1-.09 2-.24 3.06-.42A17.36 17.36 0 0 0 46 25.64a8.24 8.24 0 0 0 2.26-1.75 3.49 3.49 0 0 0 .82-1.57 1.74 1.74 0 0 0-.56-1.82zm-4.66 1.86a5.19 5.19 0 0 1-.5.44c-1 .83-2.13 1.61-3.21 2.39a.18.18 0 0 1-.17.05l-.63-4.7a.4.4 0 0 1 .34 0c1.19.37 2.35.83 3.51 1.28l.64.28c.1.06.12.12 0 .21z"></path></svg>
</div>
<div class="search-input">
<svg width="12" height="18" viewBox="0 0 1024 1024"><path d="M448 128c176 0 320 144 320 320 0 73.6-25.6 147.2-73.6 204.8l-19.2 22.4-22.4 19.2C595.2 742.4 521.6 768 448 768 272 768 128 624 128 448S272 128 448 128m0-64C236.8 64 64 236.8 64 448s172.8 384 384 384c92.8 0 179.2-35.2 246.4-89.6l211.2 208c6.4 6.4 12.8 9.6 22.4 9.6s16-3.2 22.4-9.6c12.8-16 12.8-35.2 0-48l-208-208c54.4-67.2 89.6-153.6 89.6-246.4 0-211.2-172.8-384-384-384z" fill="#aaa"></path></svg>
<span>北冥有鱼，化而为鹏梵蒂冈连快递费过来付款定金</span>
</div>
<div class="avatar">
<svg width="24" height="24" viewBox="0 0 80 80"><path fill="#e7e7e7" d="M0 0h80v80H0z"></path><path d="M45.78 57.73h2.29a73.4 73.4 0 0 1 4.23 9.5 57.14 57.14 0 0 1 2.62 10.5 50.58 50.58 0 0 1-29.86 0 57.14 57.14 0 0 1 2.62-10.5 73.4 73.4 0 0 1 4.23-9.5h2.29l2.67 7.21 2.41-7.21h1.42l2.41 7.21zM31.72 18.51l4.87 4.87a1.8 1.8 0 0 1 0 2.55 1.8 1.8 0 0 1-2.55 0l-4.87-4.87a1.8 1.8 0 0 1 0-2.55 1.8 1.8 0 0 1 2.55 0zM48.57 18.51a1.8 1.8 0 0 1 2.55 0 1.8 1.8 0 0 1 0 2.55l-4.87 4.87a1.8 1.8 0 0 1-2.55 0 1.8 1.8 0 0 1 0-2.55z" fill="#ccc"></path><path d="M24.2 24.22h31.6a7.2 7.2 0 0 1 7.2 7.2v20.12a7.2 7.2 0 0 1-7.2 7.2H24.2a7.2 7.2 0 0 1-7.2-7.2V31.42a7.2 7.2 0 0 1 7.2-7.2zm1 4a4.24 4.24 0 0 0-4.2 4.29v17.94a4.24 4.24 0 0 0 4.21 4.27h29.5A4.24 4.24 0 0 0 59 50.45V32.51a4.24 4.24 0 0 0-4.21-4.27z" fill="#ccc"></path><path d="M25.88 29.84h28.24a3.22 3.22 0 0 1 3.22 3.21v16.86a3.22 3.22 0 0 1-3.22 3.21H25.88a3.22 3.22 0 0 1-3.22-3.21V33.05a3.22 3.22 0 0 1 3.22-3.21zm0 .8a2.42 2.42 0 0 0-2.42 2.41v16.86a2.42 2.42 0 0 0 2.42 2.41h28.24a2.42 2.42 0 0 0 2.42-2.41V33.05a2.42 2.42 0 0 0-2.42-2.41z" fill="#ccc"></path><path d="M26.73 40.1l7-3.1a1.81 1.81 0 1 1 1.48 3.3l-7 3.1a1.81 1.81 0 1 1-1.48-3.3zM53.27 40.1a1.81 1.81 0 1 1-1.48 3.3l-7-3.1a1.81 1.81 0 1 1 1.48-3.3zM37.58 47.9c-1 0-1.9-.7-2.7-2a.8.8 0 0 1 .26-1.11.81.81 0 0 1 1.11.26c.54.86 1 1.23 1.33 1.23s.79-.37 1.33-1.23a.81.81 0 0 1 1.37 0c.54.86 1 1.23 1.33 1.23s.79-.37 1.33-1.23a.81.81 0 0 1 1.11-.26.8.8 0 0 1 .26 1.11c-.8 1.28-1.69 2-2.7 2a2.71 2.71 0 0 1-2-1.06 2.71 2.71 0 0 1-2.03 1.06z" fill="#ccc"></path></svg>
</div>
<div class="download-app">下载App</div>
</div>
<!-- 导航区域 -->
<template v-if='navList.length'>
<div :class="{
'nav-box': navIndex === 1,
'hide-nav-box': navIndex === 2,
hide: navIndex === 2 && navHide
}" v-for="navIndex in 2" :key='navIndex'>
<ul class="nav-list">
<li @click="handleNavClick(index)"
class="nav" :class="{
big: nav.title.length === 3 && navIndex === 2,
active: index === navActiveIndex
}"v-for="(nav, index) in navList"
:key="nav.id">{
{ nav.title }}</li>
</ul>
<div class="down"
v-if="navIndex === 1"
@click="handleClick">
<svg width="16" height="32" viewBox="0 0 1024 1024"><path d="M515.2 649.6L169.6 304c-12.8-12.8-32-12.8-44.8 0s-12.8 35.2 0 48l368 364.8c12.8 12.8 32 12.8 44.8 0l361.6-361.6c12.8-12.8 12.8-35.2 0-48s-32-12.8-44.8 0L515.2 649.6z" fill="#ccc"></path></svg>
</div>
<div v-else class="up" @click="handleClick">
<svg width="16" height="32" viewBox="0 0 1024 1024"><path d="M854.4 713.6c12.8 12.8 32 12.8 44.8 0s12.8-35.2 0-48L537.6 304c-12.8-12.8-32-12.8-44.8 0L124.8 672c-12.8 12.8-12.8 35.2 0 48s32 12.8 44.8 0l345.6-342.4 339.2 336z" fill="#ccc"></path></svg>
</div>
</div>
</template>
<!-- 轮播 -->
<div class="banner-box" v-if='bannerList.length'>
<ul class="banner-list" :style='bannerStyle' @transitionend='handleTransitionEnd'>
<li class="banner" v-for='banner in bannerList' :key='banner.id'>
<img :src="banner.poster" :alt="banner.title">
</li>
</ul>
<ul class="index-list">
<li v-for='index in bannerList.length - 1'
:key='index' class="index" :class='{
active: index - 1 === bannerActiveIndex % 3
}'></li>
</ul>
</div>
<!-- 视频区域 -->
<div class="video-box" v-if='videoList'>
<ul class="video-list">
<li class="video" v-for='video in videoList' :key='video.id'>
<div class="poster">
<img :src="video.poster" :alt="video.title">
<div class="info">
<div class="play">
<svg viewBox="0 0 1024 1024"><path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path><path d="M684.8 483.2l-256-112c-22.4-9.6-44.8 6.4-44.8 28.8v224c0 22.4 22.4 38.4 44.8 28.8l256-112c25.6-9.6 25.6-48 0-57.6z"></path></svg>
{
{ video.play }}
</div>
<div class="rank" v-if='video.rank'>
<svg viewBox="0 0 1024 1024"><path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path><path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path></svg>
{
{ video.rank }}
</div>
</div>
</div>
<div class="title">{
{ video.title }}</div>
</li>
</ul>
</div>
<!-- 底部区域 -->
<div class="footer">
<p>哔哩哔哩 沪ICP备13002172号-3</p>
<p>信息网络传播视听节目许可证：0910417</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
navList: [],
navHide: true,
navActiveIndex: 0,
bannerList: [],
bannerWidth: 350,
bannerStyle: {
left: 0,
transition: 'left .3s',
},
bannerActiveIndex: 0,
videoOldList: [],
videoOldList: [],
videoGettingData: false,
videoCount: 0,
},
computed: {
videoList () {
return this.videoOldList.map(video => {
video.play = video.play > 10000 ? video.play / 10000 + '万' : video.play;
video.rank = video.rank > 10000 ? video.rank / 10000 + '万' : video.rank;
return video;
})
}
},
methods: {
handleClick () {
this.navHide = !this.navHide;
},
handleNavClick (index) {
this.navActiveIndex = index;
},
autoMove () {
setTimeout(() => {
if(this.bannerActiveIndex === 0 ) {
//判断轮播索引确定循环
this.bannerStyle.transition = 'left .3s';
}
this.bannerActiveIndex ++;
this.bannerStyle.left = -this.bannerActiveIndex * this.bannerWidth + 'px';
}, 1500)
},
handleTransitionEnd () {
if(this.bannerActiveIndex === 3) {
this.bannerActiveIndex = 0;
this.bannerStyle.left = 0;
this.bannerStyle.transition = 'none';
}
this.autoMove();
},
handleScroll (e) {
const {
scrollHeight, offsetHeight, scrollTop } = e.target;
const toBottomHeight = scrollHeight - offsetHeight - scrollTop;//是否滑动到接近底部
const videoLength = this.videoList.length;
if(videoLength === this.videoCount) {
return; }
if(toBottomHeight < 200 && !this.videoGettingData) {
//接近底部则再次请求数据
this.videoGettingData = true;
axios.get('video', {
params: {
start: this.videoList.length,
offset: 12
}
}).then(res => {
this.videoOldList.push(...res.data);//将多次视频数据拼接
this.videoGettingData = false;
})
}
},
getData () {
axios.all([
axios.get('nav'),//对导航的处理
axios.get('banner'),//对轮播的处理
axios.get('video', {
//对视频信息的处理
params: {
start: 0,
offset: 12
}
})
]).then(axios.spread((navRes, bannerRes, videoRes) => {
this.initNavList(navRes);
this.initBannerList(bannerRes);
this.initVideo(videoRes);
}));
},
initNavList (navRes) {
this.navList = navRes;
},
initBannerList (bannerRes) {
const bannerLaseEle = {
...bannerRes[0]};
bannerLaseEle.id = Math.floor(Math.random() * 10000000);
this.bannerList = [...bannerRes, bannerLaseEle];
},
initVideo (videoRes) {
this.videoCount = videoRes.count;
this.videoOldList = videoRes.data;
}
},
created () {
this.getData();
},
mounted () {
this.autoMove();
}
})
</script>
</body>
</html>
//index.css
html{
height: 100%;
}
body{
height: 100%;
}
#app{
height: 100%;
overflow-y: scroll;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
padding-bottom: 15px;
z-index: 3;
background-color: #fff;
}
.header .logo {
margin-left: 18px;
}
.header .search-input {
width: 132px;
height: 24px;
margin-left: 5px;
display: flex;
align-items: center;
font-size: 10px;
color: #999;
background-color: #f4f4f4;
border-radius: 12px;
}
.header .search-input svg {
margin-left: 10px;
}
.header .search-input span {
width: 92px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header .avatar svg {
border-radius: 50%;
}
.header .download-app {
-webkit-user-drag: 78px;
height: 23px;
padding-left: 10px;
padding-right: 10px;
margin-right: 12px;
line-height: 23px;
text-align: center;
color: #fff;
background-color: #fb7299;
font-size: 12px;
border-radius: 4px;
}
.nav-box {
position: fixed;
top: 54px;
left: 0;
right: 0;
z-index: 1;
background-color: #fff;
}
.nav-box .nav-list {
width: 85%;
white-space: nowrap;
overflow-x: scroll;
padding-left: 24px;
/* display: none; */
}
.nav-box .nav-list::-webkit-scrollbar {
display: none;
}
.nav-box .nav {
display: inline-block;
height: 30px;
line-height: 30px;
margin-right: 40px;
color: #757575;
font-size: 14px;
border-bottom: 2px solid transparent;
}
.nav-box .nav.active {
border-color: #fb7299;
color: #fb7299;
}
.nav-box .down {
position: absolute;
top: -3px;
right: 13px;
}
.hide-nav-box {
position: fixed;
top: 54px;
left: 0;
right: 0;
padding-bottom: 20px;
z-index: 2;
transition: top .3s;
background-color: #fff;
}
.hide-nav-box.hide {
top: -117px;
}
.hide-nav-box .nav {
display: inline-block;
width: 32px;
text-align: center;
margin-left: 14px;
margin-right: 14px;
margin-bottom: 10px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 14px;
color: #757575;
border-bottom: 2px solid transparent;
}
.hide-nav-box .nav.big {
width: 46px;
margin-left: 7px;
margin-right: 7px;
}
.hide-nav-box .nav.active {
border-color: #fb7299;
color: #fb7299;
}
.hide-nav-box .up {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.banner-box {
position: relative;
top: 90px;
left: 50%;
transform: translateX(-50%);
width: 350px;
height: 110px;
border-radius: 6px;
overflow: hidden;
}
.banner-box .banner-list {
position: absolute;
left: 0;
width: calc(350px * 4);
transition: left .3s;
}
.banner-box .banner {
float: left;
width: 350px;
height: 110px;
}
.banner-box .poster {
width: 100%;
height: 100%;
}
.banner-box .index-list {
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
height: 10px;
padding-left: 3px;
padding-right: 3px;
background-color: rgba(0, 0, 0, .5);
border-radius: 5px;
}
.banner-box .index {
width: 5px;
height: 5px;
border-radius: 50%;
margin-left: 3px;
margin-right: 3px;
background-color: #fff;
}
.banner-box .index.active {
background-color: #fb7299;
}
/* 视频区 */
.video-box{
margin-top: 100px;
padding-left: 6px;
padding-right: 6px;
}
.video-box .video-list::after{
display: block;
content: '';
clear: both;
}
.video-box .video{
width: 50%;
float: left;
}
.video-box .poster{
position: relative;
height: 106px;
margin-right: 6px;
margin-left: 6px;
border-radius: 6px;
overflow: hidden;
}
.video-box .poster img{
width: 100%;
height: 100%;
}
.video-box .poster .info{
position: absolute;
bottom: 0;
color: #fff;
padding-top: 8px;
padding-bottom: 2px;
height: 18px;
font-size: 12px;
background-image: linear-gradient(rgba(33,33,33,0),rgba(33,33,33,0.8));
}
.video-box .info div{
display: inline-flex;
align-items: center;
margin-left: 16px;
}
.video-box .info svg{
margin-right: 4px;
margin-top: 2px;
width: 14px;
height: 14px;
fill: #fff;
}
.video-box .title{
margin: 6px 6px 10px 6px;
height: 38px;
line-height: 20px;
font-size: 13px;
/* 单行文本溢出打点：
设置文本不换行
white-space: nowrap;
设置文字溢出用省略号代替
text-overflow: ellipsis; */
/* 多行文本溢出打点： */
overflow: hidden;
/* 设置盒子为伸缩盒 */
display: -webkit-box;
/* 设置伸缩盒内子元素的排列方式为vertical */
-webkit-box-orient: vertical;
/* 限制一个块元素内显示的文本行数 */
-webkit-line-clamp: 2;
}
.footer {
margin-top: 40px;
}
.footer p {
margin-bottom: 20px;
text-align: center;
font-size: 13px;
color: #999;
}
//request.js
axios.defaults.baseURL = 'https://developer.duyiedu.com/vue/bz/';//默认配置请求地址公共部分
axios.interceptors.response.use((response) => {
const {
status } = response;
const {
baseURL, url } = response.config;
if(status === 200) {
if(url === baseURL + 'video') {
return {
count: response.data.count,
data: response.data.data
}
}
return response.data.data;
}
return response;
});
