<template>
|
<div class="container">
|
|
<div class="header">
|
<div class="wrapper flex">
|
<img src="../../assets/film/logo.png">
|
<div class="nav">
|
<span>首页</span>
|
<input type="text" class="search">
|
<span>登录</span>
|
<span>注册</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="line" />
|
|
<div class="content">
|
|
<div class="banner wrapper">
|
<div class="banner-nav">
|
<span class="banner-nav-title">当前位置:</span>
|
<span class="banner-nav-router">首页</span>
|
<span class="banner-nav-router"> > </span>
|
<span class="banner-nav-router">文艺世界</span>
|
<span class="banner-nav-router"> > </span>
|
<span class="banner-nav-router">影视</span>
|
</div>
|
|
<img src="../../assets/film/film_logo.png" class="film_logo">
|
|
<div class="banner-pagination" >
|
<p class="banner-pagination-dot">阿甘正传</p>
|
<p class="banner-pagination-dot">阿甘正传</p>
|
<p class="banner-pagination-dot">阿甘正传</p>
|
<p class="banner-pagination-dot">阿甘正传</p>
|
<p class="banner-pagination-dot on">敦刻尔克</p>
|
<p class="banner-pagination-dot">阿甘正传</p>
|
</div>
|
|
|
<div class="banner-category">
|
<div class="banner-category-dot">美国</div>
|
<div class="banner-category-dot">俄罗斯</div>
|
<div class="banner-category-dot">欧洲</div>
|
<div class="banner-category-dot">日本</div>
|
<div class="banner-category-dot">韩国</div>
|
<div class="banner-category-dot">其他</div>
|
</div>
|
|
</div>
|
|
<div class="programa wrapper">
|
|
<div class="programa-nav">
|
|
<div class="programa-nav-title">经典影视</div>
|
<div class="programa-nav-item">
|
<span>猜你喜欢</span>
|
<span>推荐排行</span>
|
<span>影视经典</span>
|
<span>最新上映</span>
|
<span>|</span>
|
<span>更多>></span>
|
</div>
|
|
</div>
|
|
<div class="programa-content">
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film2.png" alt="">
|
<p class="film-name">灰列犬号</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film3.png" alt="">
|
<p class="film-name">黑鹰堕落</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
|
</div>
|
</div>
|
|
<div class="programa wrapper">
|
|
<div class="programa-nav">
|
|
<div class="programa-nav-title">漫威</div>
|
<div class="programa-nav-item">
|
<span>猜你喜欢</span>
|
<span>推荐排行</span>
|
<span>影视经典</span>
|
<span>最新上映</span>
|
<span>|</span>
|
<span>更多>></span>
|
</div>
|
|
</div>
|
|
<div class="programa-content2">
|
<div class="programa-film2">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
<div class="programa-film-group">
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
</div>
|
<div class="programa-film-rank">
|
<div class="programa-rank-header">
|
<div class="tab1">热播放</div>
|
<div class="tab2">飙升榜</div>
|
<div class="tab3">更多></div>
|
</div>
|
<div class="programa-film-rank-list">
|
<div class="rank-list-item">
|
<img class="sort" src="../../assets/film/first.png" alt="">
|
<div class="info">
|
<p>欢乐喜剧人</p>
|
<p>01-18期</p>
|
</div>
|
<img class="stars" src="../../assets/film/star.png" alt="">
|
</div>
|
|
<div class="rank-list-item">
|
<img class="sort" src="../../assets/film/second.png" alt="">
|
<div class="info">
|
<p>欢乐喜剧人</p>
|
<p>01-18期</p>
|
</div>
|
<img class="stars" src="../../assets/film/star.png" alt="">
|
</div>
|
|
<div class="rank-list-item">
|
<img class="sort" src="../../assets/film/third.png" alt="">
|
<div class="info">
|
<p>欢乐喜剧人</p>
|
<p>01-18期</p>
|
</div>
|
<img class="stars" src="../../assets/film/star.png" alt="">
|
</div>
|
|
<div class="rank-list-item">
|
<img class="sort" src="../../assets/film/fourth.png" alt="">
|
<div class="info">
|
<p>欢乐喜剧人</p>
|
<p>01-18期</p>
|
</div>
|
<img class="stars" src="../../assets/film/star.png" alt="">
|
</div>
|
|
<div class="rank-list-item">
|
<img class="sort" src="../../assets/film/fifth.png" alt="">
|
<div class="info">
|
<p>欢乐喜剧人</p>
|
<p>01-18期</p>
|
</div>
|
<img class="stars" src="../../assets/film/star.png" alt="">
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
|
|
|
</div>
|
|
<div class="programa wrapper">
|
|
<div class="programa-nav">
|
|
<div class="programa-nav-title">经典影视</div>
|
<div class="programa-nav-item">
|
<span>猜你喜欢</span>
|
<span>推荐排行</span>
|
<span>影视经典</span>
|
<span>最新上映</span>
|
<span>|</span>
|
<span>更多>></span>
|
</div>
|
|
</div>
|
|
<div class="programa-content">
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
<div class="programa-film">
|
<img src="../../assets/film/film.png" alt="">
|
<p class="film-name">阿甘正传</p>
|
<p class="film-des">豆瓣高分电影</p>
|
</div>
|
|
|
</div>
|
</div>
|
|
|
</div>
|
|
</div>
|
</template>
|
<script>
|
|
// 页头背景，导航等
|
import HomeHeader from '@/views/home/components/HomeHeader'
|
import HomeFooter from '@/views/home/components/HomeFooter'
|
// 文艺·原创
|
import SearchInput from '@/views/home/components/SearchInput'
|
export default {
|
name: 'FilmChina',
|
components: {
|
HomeHeader,
|
HomeFooter,
|
SearchInput
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "~@/styles/variables.scss";
|
|
.container {
|
background: #670607;
|
.header{
|
height: 90px;
|
.wrapper{
|
height: 90px;
|
img{
|
width: 336px;
|
height: 55px;
|
}
|
|
.nav{
|
color:#FFE0B8;
|
font-weight: 600;
|
font-size: 19px;
|
.search{
|
border:1px solid #ffe0b8;
|
border-radius: 10px;
|
background: rgba(0,0,0,0);
|
width: 120px;
|
}
|
span{
|
margin: 0 20px;
|
}
|
}
|
}
|
}
|
.line{
|
width:100%;
|
height: 6px;
|
background: linear-gradient(90deg, #CA2226 28.000000000000004%, #FFD791 100%);
|
opacity: 0.4;
|
}
|
|
.content {
|
width: 100%;
|
margin: 0 auto;
|
.banner{
|
height: 570px;
|
background: url("../../assets/film/banner1.png") no-repeat center center;
|
background-size:100% 100%;
|
overflow: hidden;
|
position: relative;
|
.banner-nav{
|
color: rgba(255,255,255,0.45);
|
margin-top: 20px;
|
margin-left: 10px;
|
font-weight: 600;
|
.banner-nav-router{
|
margin-left: 5px;
|
margin-right: 5px;
|
}
|
}
|
|
.film_logo{
|
position: absolute;
|
top: 160px;
|
left: 10px;
|
width: 120px;
|
}
|
|
.banner-pagination{
|
position: absolute;
|
right: 80px;
|
top: 140px;
|
color: #fff;
|
font-size: 12px;
|
display: flex;
|
flex-direction: column;
|
justify-content: right;
|
|
.banner-pagination-dot{
|
text-align: right;
|
box-sizing: content-box;
|
padding-right: 5px;
|
padding-left: 5px;
|
}
|
.on{
|
font-size: 20px;
|
background: rgba(255,255,255,0.1);
|
}
|
|
}
|
|
.banner-category{
|
position: absolute;
|
bottom: 20px;
|
left: 0;
|
right: 0;
|
width: 800px;
|
margin: 0 auto;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
.banner-category-dot{
|
background: rgba(255,255,255,0.12);
|
width: 100px;
|
height: 32px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
font-weight: 600;
|
border-radius: 16px;
|
}
|
}
|
}
|
|
.programa{
|
margin-top: 50px;
|
.programa-nav{
|
width:800px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
color: #fff;
|
padding-bottom: 5px;
|
border-bottom: 2px solid rgba(255,255,255,0.3);
|
.programa-nav-title{
|
font-size: 24px;
|
font-weight: 900;
|
}
|
|
.programa-nav-item{
|
margin-left: 50px;
|
|
span{
|
margin-right: 40px;
|
font-size: 12px;
|
color: rgba(255,255,255,0.5);
|
}
|
}
|
|
}
|
.programa-content{
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-around;
|
flex-direction: row;
|
.programa-film{
|
width: 200px;
|
font-size: 12px;
|
img{
|
width: 190px;
|
}
|
.film-name{
|
color:#fff;
|
margin:5px 8px;
|
}
|
.film-des{
|
margin:5px 8px;
|
color: rgba(255,255,255,0.5);
|
}
|
}
|
}
|
.programa-content2{
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
width: 1200px;
|
.programa-film2{
|
width: 400px;
|
font-size: 12px;
|
img{
|
width: 400px;
|
}
|
.film-name{
|
color:#fff;
|
margin:5px 12px;
|
}
|
.film-des{
|
margin:5px 12px;
|
color: rgba(255,255,255,0.5);
|
}
|
}
|
.programa-film-group {
|
width: 500px;
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: row;
|
.programa-film {
|
width: 150px;
|
font-size: 12px;
|
|
img {
|
width: 150px;
|
}
|
|
.film-name {
|
color: #fff;
|
margin: 5px 8px;
|
}
|
|
.film-des {
|
margin: 5px 8px;
|
color: rgba(255, 255, 255, 0.5);
|
}
|
}
|
}
|
.programa-film-rank{
|
width: 300px;
|
position: relative;
|
top: -50px;
|
.programa-rank-header{
|
display: flex;
|
flex-direction: row;
|
color: #fff;
|
align-items: center;
|
.tab1{
|
width: 80px;
|
height: 22px;
|
background: rgba(255,255,255,0.3);
|
line-height: 22px;
|
text-align: center;
|
border-radius: 10px;
|
color: #58E62C;
|
font-weight: 600;
|
|
}
|
.tab2{
|
width: 80px;
|
height: 22px;
|
line-height: 22px;
|
border-radius: 10px;
|
text-align: center;
|
font-size: 14px;
|
}
|
.tab3{
|
margin-left: 40px;
|
font-size: 12px;
|
color: rgba(255,255,255,0.3);
|
}
|
|
}
|
.programa-film-rank-list{
|
.rank-list-item{
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
margin-top: 10px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid rgba(255,255,255,0.3);
|
.sort{
|
margin-left: 10px;
|
width: 30px;
|
}
|
.info{
|
margin-left: 40px;
|
p{
|
color: rgba(2552,255,255,0.3);
|
font-size: 12px;
|
margin-top: 2px;
|
margin-bottom: 2px;
|
}
|
}
|
.stars{
|
width: 50px;
|
margin-left: 30px;
|
|
}
|
|
}
|
}
|
}
|
}
|
|
|
|
}
|
|
}
|
}
|
|
</style>
|
