<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>
|
|
</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;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
