<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>详情</title>
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/public.css">
<link rel="stylesheet" href="./CSS/xiangqing.css">
<script src="./JS/auto-size.js"></script>
</head>
<body>
<div class="top"></div>
<div>
<div>
<a href="javascript:history.go(-1)">
<img src="./IMG/xiangqingjiantou.jpg" alt="返回">
</a>
<img src="./IMG/xiangqingfenxiang.jpg" alt="分享">
</div>
<div>
<img src="./IMG/reying1.jpg" alt="机械师2:复活">
<div>
<p>机械师2:复活</p>
<p>Mechanic:Resurrection</p>
<p><i></i>9.0</p>
<p>(7065评分)</p>
<p>动作 犯罪<i>3D</i></p>
<p>美国 法国 / 97分钟</p>
<p><a href="#3">2016-10-21大陆上映 ></a></p>
</div>
</div>
<div>
<div>
<input type="checkbox" id="xin">
<label for="xin">想看</label>
</div>
<span><i></i>评分</span>
</div>
</div>
<article>
<div>
<input type="checkbox" id="dianji">
<div>
<p>
影片讲述了职业杀手亚瑟为解救爱人不得不完成一系列不可能的暗杀任务。在一桩看似意外的事件中,亚瑟毕索(杰森.斯坦森饰)的红颜知己梅(杨紫琼饰)请求亚瑟解救屡遭毒打的神秘女子吉娜(杰西卡:阿尔芭饰),哪料向来对爱情免疫的亚瑟,竟与吉娜坠入了爱河,但因此打破了他已远离是非五年风平浪静的生活。亚瑟以为自己早已和过去的杀手生涯告别,然而宿命难敌的他竟被人暗中盯上,他的身世之谜也渐渐浮出水面。原来亚瑟年幼时和小伙伴们被军火商抓去。难以忍受被
影片讲述了职业杀手亚瑟为解救爱人不得不完成一系列不可能的暗杀任务。在一桩看似意外的事件中,亚瑟毕索(杰森.斯坦森饰)的红颜知己梅(杨紫琼饰)请求亚瑟解救屡遭毒打的神秘女子吉娜(杰西卡:阿尔芭饰),哪料向来对爱情免疫的亚瑟,竟与吉娜坠入了爱河,但因此打破了他已远离是非五年风平浪静的生活。
</p>
</div>
<label for="dianji"><i></i></label>
</div>
<div></div>
<div>
<div>
<p>导演</p>
<img src="./IMG/xiangqingdaoyan.jpg" alt="导演">
</div>
<div>
<div>
<p>演员</p>
<p>全部 ></p>
</div>
<div>
<div>
<img src="./IMG/xiangqingyanyuan1.jpg" alt="导演">
<img src="./IMG/xiangqingyanyuan2.jpg" alt="导演">
<img src="./IMG/xiangqingyanyuan3.jpg" alt="导演">
<img src="./IMG/xiangqingyanyuan4.jpg" alt="导演">
<img src="./IMG/xiangqingyanyuan1.jpg" alt="导演">
<img src="./IMG/xiangqingyanyuan2.jpg" alt="导演">
<img src="./IMG/xiangqingyanyuan3.jpg" alt="导演">
<img src="./IMG/xiangqingyanyuan4.jpg" alt="导演">
</div>
</div>
</div>
</div>
<div><a href="./yingyuan.html">立即购票</a></div>
</article>
<div class="bottom"></div>
</body>
</html>
@mixin f_be_ce {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
@mixin f__ce {
display: flex;
align-items: center;
}
@mixin f_ce_ce {
display: flex;
justify-content: center;
align-items: center;
}
@mixin f_be_sta {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
body {
// 黑灰色背景图部分
>div:nth-of-type(2) {
width: 10.8rem;
height: 7.9rem;
box-sizing: border-box;
padding: 0 0.45rem;
margin-top: 0.75rem;
background-image: url(../IMG/xiangqingbeijing.jpg);
// 第一行两张图 div1
>div:nth-of-type(1) {
padding: 0.45rem 0 0.42rem;
@include f_be_ce;
a>img {
width: 0.62rem;
}
img {
width: 0.7rem;
}
}
// 中部div2
>div:nth-of-type(2) {
@include f_be_sta;
>img {
width: 3.32rem;
height: 4.5rem;
border: 5px solid white;
box-sizing: border-box;
}
>div {
flex: 1;
margin-left: 0.45rem;
>p {
line-height: 1.5;
margin: 0.07rem 0;
}
>p:nth-of-type(1) {
font-size: 0.44rem;
color: white;
}
>p:nth-of-type(2) {
font-size: 0.22rem;
color: white;
}
>p:nth-of-type(3) {
font-size: 0.4rem;
color: #ffcc00;
>i {
display: inline-block;
width: 2.7rem;
height: 0.4rem;
background-image: url("../IMG/star_icon02.png");
background-size: 2.7rem 0.4rem;
margin-right: 0.2rem;
}
}
>p:nth-of-type(4) {
font-size: 0.26rem;
color: #c2c1ba;
}
>p:nth-of-type(5),>p:nth-of-type(6) {
font-size: 0.3rem;
color: #c2c1ba;
@include f__ce;
}
>p:nth-of-type(5)>i {
font-size: 0.18rem;
border: 1px solid transparent;
box-sizing: border-box;
border-radius: 10px;
padding: 0.05rem 0.1rem ;
margin-left: 0.2rem;
font-style: normal;
background-color: #827e75;
color: white;
}
>p:nth-of-type(7)>a {
font-size: 0.34rem;
color: #c2c1ba;
}
}
}
// 底部div3
>div:nth-of-type(3) {
@include f_be_ce;
margin-top: 0.43rem;
>span,div {
display: inline-block;
height: 1rem;
text-align: center;
width: 4.8rem;
border: 1px solid #797370;
box-sizing: border-box;
background-color: #4e4943;
border-radius: 15px;
color: #f0f0f0;
@include f_ce_ce;
}
>div {
@include f__ce;
>input {
display: none;
&:checked~label {
color: #ef4238;
&::before {
display: inline-block;
content: "";
width: 0.45rem;
height: 0.45rem;
background-image: url("../IMG/xin1.jpg");
background-size: 0.45rem 0.45rem;
margin-right: 0.2rem;
vertical-align: -0.05rem;
}
}
}
>label::before {
display: inline-block;
content: "";
width: 0.45rem;
height: 0.44rem;
background-image: url("../IMG/banner_icon02.png");
background-size: 0.45rem 0.44rem;
margin-right: 0.2rem;
vertical-align: -0.05rem;
}
}
>span:nth-of-type(1)>i {
width: 0.45rem;
height: 0.44rem;
background-image: url("../IMG/banner_icon01.png");
background-size: 0.45rem 0.44rem;
margin-right: 0.2rem;
}
}
}
>article {
background-color: white;
margin-bottom: 3.7rem;
// 文字
>div:nth-of-type(1) {
padding: 0.5rem 0.4rem 0.15rem;
>div:nth-of-type(1) {
line-height: 0.7rem;
height: 2.05rem;
overflow: hidden;
}
>input:checked~div {
height: auto;
}
>input:checked~label>i {
width: 0.57rem;
height: 0.3rem;
background-image: url("../IMG/xiangqingxiajiatou.jpg") ;
background-size: 100%;
background-position: 0rem 0rem;
}
>input {
display: none;
}
>label {
@include f_ce_ce;
>i {
margin-top: 0.08rem;
width: 0.57rem;
height: 0.3rem;
background-image: url("../IMG/icon100.png") ;
background-size: 5.6rem 5.1rem;
background-position: -5.03rem -0.72rem;
}
}
}
// 颜色条
>div:nth-of-type(2) {
height: 0.5rem;
background-color: #f5f5f5;
}
// 人员
>div:nth-of-type(3) {
padding: 0.37rem 0 0.37rem 0.45rem;
@include f_be_sta;
img{
width: 2.07rem;
height: 2.74rem;
}
// 左边导演
>div:nth-of-type(1) {
>p {
margin-bottom: 0.3rem;
}
}
// 右边演员
>div:nth-of-type(2) {
flex: 1;
margin-left: 0.35rem;
box-sizing: border-box;
// 1
>div:nth-of-type(1) {
@include f_be_ce;
margin-bottom: 0.3rem;
padding-right: 0.37rem;
>p:nth-of-type(2) {
color: #999999;
}
}
// 2
>div:nth-of-type(2) {
width: 7.9rem;
>div {
display: flex;
overflow-x: scroll;
>img {
margin-right: 0.15rem;
}
}
}
}
}
// 立即购票
>div:nth-of-type(4) {
>a {
width: 100%;
position: fixed;
bottom: 1.45rem;
color: white;
font-size: 0.48rem;
height: 1.5rem;
background-color: #f14e40;
text-align: center;
line-height: 1.45rem;
box-sizing: border-box;
}
}
}
}