style.css部分代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PT Sans', sans-serif;
}
li{
list-style: none;
}
/* 人物代码 */
.container {
/* height:100%; */
width: 1024px;
margin:50px;
}
.person {
position: absolute;
height: 30px;
width: 0;
color: #040303;
left: 0px;
top: 30px;
transform-origin: 50% 50% 0px;
-webkit-animation: sprint 5s infinite ease-in;
}
.person .head:before {
content: "这是豆瓣top250哟";
position: absolute;
top: 0px;
left: -6px;
height: 2.7px;
width: 100px;
border-radius: 20%;
/* border: 4px solid rgb(17, 16, 16);
background-color: #141111; */
transform-origin: 50% 100% 0px;
z-index: 90;
}
.person .head {
position: absolute;
top: -30px;
left: -6px;
height: 30px;
width: 30px;
border-radius: 50%;
border: 4px solid rgb(247, 135, 135);
transform-origin: 50% 100% 0px;
z-index: 90;
-webkit-animation: bob 5s infinite alternate;
}
.person .head:after {
content: "";
position: absolute;
top: -12px;
left: 9px;
height: 12px;
width: 15px;
border-radius: 30%;
border: 4px solid rgb(56, 54, 54);
background-color: #0b0a0a;
z-index: 90;
}
.person .torso {
position: absolute;
height: 60px;
width: 0;
border-left: 2px solid rgb(34, 31, 31);
left: 0px;
top: 15px;
z-index: 90;
}
.person .part {
position: absolute;
left: 0;
top: 75px;
z-index: 90;
}
.person .part.arm {
position: absolute;
border-left: 3px solid rgb(50, 46, 46);
border-bottom: 3px solid rgb(27, 25, 25);
height: 45px;
width: 39px;
top: 15px;
right: 300px;
transform-origin: 0% 0% 0px;
-webkit-animation: pump 5s infinite ease-in-out;
}
.person .part.arm.one {
transform: rotate3d(0, 0, 1, -90deg);
}
.person .part.arm.two {
transform: rotate3d(0, 0, 1, -90deg);
animation-delay: 5s;
}
.person .part.leg {
height: 30px;
width: 60px;
border-right: 3px solid rgb(47, 43, 43);
border-top: 3px solid rgb(28, 25, 25);
-webkit-animation: run 4s infinite ease-in;
transform-origin: 0% 0% 0px;
}
.person .part.leg.one {
transform: rotate3d(0, 0, 1, 90deg);
}
.person .part.leg.two {
transform: rotate3d(0, 0, 1, 80deg);
animation-delay: 5s;
}
.person .part .foot {
position: absolute;
top: 90px;
left: 0;
width: 3px;
height: 3px;
background-color: #020202;
z-index: 900;
border: 3px solid red;
}
@keyframes run {
0% {
transform: rotate3d(0, 0, 1, -5deg);
}
50% {
transform: rotate3d(0, 0, 1, 150deg);
}
100% {
transform: rotate3d(0, 0, 1, -5deg);
}
}
@keyframes bob {
0% {
transform: rotate3d(0, 0, 1, 5deg);
}
25% {
transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
}
50% {
transform: rotate3d(0, 0, 1, 5deg);
}
75% {
transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
}
}
@keyframes pump {
0% {
transform: rotate3d(0, 0, 1, 80deg);
}
50% {
transform: rotate3d(0, 0, 1, -70deg);
}
100% {
transform: rotate3d(0, 0, 1, 80deg);
}
}
@keyframes spin {
0% {
transform: rotate3d(0, 0, 1, -180deg);
}
25% {
transform: rotate3d(0, 0, 1, -100deg);
}
75% {
transform: rotate3d(0, 0, 1, 100deg);
}
100% {
transform: rotate3d(0, 0, 1, 180deg);
}
}
@keyframes sprint {
0% {
transform-origin: 50% 50% 0px;
transform: translate(-0px, 0px);
}
100% {
transform: translate(0px, 0px);
transform-origin: 50% 50% 0px;
transform: translate(2000px, 0px);
}
}
/* 右边代码 */
.bigBox{
margin-top: 140px;
/* height: 100%;
width: 100%; */
display: flex;
}
#right{
margin-left: 300px;
position: absolute;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
/* overflow:scroll; */
width: 1600px;
height:832px
}
.card {
position: relative;
/* width: 320px;
height: 450px; */
/* background: #fff; */
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}
.card .poster::before {
content: '';
position: absolute;
bottom: -180px;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgb(101, 112, 164,0.3) 50%, transparent);
transition: 0.5s;
z-index: 1;
}
.card:hover .poster::before {
bottom: 0;
}
.card .poster {
position: relative;
overflow: hidden;
}
.card .poster img {
/* width: 100%; */
height: 409px;
width: 280px;
transition: 0.5s;
}
.card:hover .poster img {
/* transform: translateY(-50px); */
filter: blur(5px); /* 高斯模糊 */
}
.card .details {
position: absolute;
bottom: -175px;
left: 0;
z-index: 2;
width: 100%;
/* padding: 20px; */
transition: 0.5s;
}
.card:hover .details {
bottom: 0;
}
.card .details .logo {
max-width: 180px;
}
.card .details h3 {
font-size: 0.8em;
color: #fff;
}
.card .details .rating {
position: relative;
padding: 5px 0;
}
.card .details .rating .fa-star {
color: #f7f406;
font-size: 1em;
}
.card .details .rating span {
color: #fff;
margin-left: 10px;
}
.card .details .tags {
position: relative;
margin-top: 5px;
}
.card .details .tags span {
padding: 2px 5px;
color: #fff;
background: #03a8f5;
border-radius: 4px;
}
.card .details .tags span:nth-child(2) {
background: #ff5722;
}
.card .details .info {
color: #fff;
margin-top: 20px;
}
.card .details .cast h4 {
color: #fff;
margin-top: 10px;
}
.card .details .cast ul {
position: relative;
display: flex;
gap: 10px;
margin-top: 10px;
}
.card .details .cast ul li {
list-style: none;
width: 35px;
height: 35px;
overflow: hidden;
border-radius: 50%;
border: 2px solid #fff;
}
.card .details .cast ul li img {
width: 100%;
}
#nav{
background: #d7d9df;
margin-left: 200px;
position: fixed;
}
#nav ul{
display: inline-block;
border: 1px solid #3b3f42;
}
#nav ul li{
border: 1px solid #262a2d;
}
li{
font-size: 20px;
font-family: 宋体;
}
#nav ul li.text{
background-color:rgba(212, 214, 224, 0.3);
}
#nav ul li a{
position: relative;
display: block;
padding: 10px 20px;
margin: 20px 0;
text-decoration: none;
text-transform: uppercase;
color: #287484;
font-weight: bold;
transition:.5s ;
}
#nav ul li a:before
{
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background-color:rgba(89, 114, 243, 0.3);
border-top: 1px solid #6d5c5c;
border-bottom: 1px solid #3c3535;
transform: scaleY(2);
opacity: 0;
transition:.5s ;
}
#nav ul li a:hover:before
{
transform: scaleY(1);
opacity: 1;}
#nav ul li a::after
{
content: '';
position: absolute;
top:0;
left: 0;
/* width: 100%;
height: 100%; */
background-color: #4c5463;
opacity:0.7 ;
transform: scaleY(0);
transition:.5s ;
}
#nav ul li a:hover:after
{
transform: scaleY(1);
}
index.html部分代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>豆瓣电影Top250</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.js"></script>
</head>
<body style="background-color:rgba(37, 39, 47, 0.3)">
<!-- 人物代码 -->
<div class='container'>
<div class='person'>
<div class='head'></div>
<div class='part arm one'></div>
<div class='part arm two'></div>
<div class='torso'></div>
<div class='part leg one'></div>
<div class='part foot one'></div>
<div class='part leg two'></div>
<div class='part foot two'></div>
</div>
</div>
<div class="wrap">
<div class="bigBox">
<div id="left" >
<div id="nav">
<ul>
<li class="text"><a href="https://www.douban.com">首页</a></li>
<li><a href="https://book.douban.com" >读书</a></li>
<li><a href="https://movie.douban.com" >电影</a></li>
<li><a href="https://music.douban.com">音乐</a></li>
<li><a href="https://www.douban.com/location">同城</a></li>
<li><a href="https://www.douban.com/roup" >小组</a></li>
<li><a href="https://read.douban.com/?dcs=top-nav&dcm=douban" >阅读</a></li>
<li><a href="https://fm.douban.com/user-guide" >FM</a></li>
<li><a href="https://m.douban.com/time/?dt_time_source=douban-web_top_nav">时间</a></li>
<li><a href="https://market.douban.com/?utm_campaign=douban_top_nav&utm_source=douban&utm_medium=pc_web" >豆品</a></li>
</ul>
</div>
</div>
<div id="app">
<Moveone></Moveone>
</div>
</div>
<script> Vue.config.devtools = true
const Moveone = {
template: `
<div>
<div id="right">
<div class="card" v-for="site in sites">
<div class="poster">
<img :src="site.pic" alt="">
</div>
<div class="details">
<h1>{{site.title}}</h1>
<p>{{site.info}}</p>
<p>{{site.z}}</P>
<span>{{site.rating_num}}</span>
<span>{{site.commment_num}}</span>
</div>
</div>
</div>
</div>
`,
data() {
return {
sites:[
{
"title": "肖申克的救赎",
"url": "https://movie.douban.com/subject/1292052/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.7",
"commment_num": "2811907人评价",
"info": "导演:弗兰克·德拉邦特FrankDarabont主演:蒂姆·罗宾斯TimRobbins/...",
"z":"1994/美国/犯罪剧情"
},
{
"title": "霸王别姬",
"url": "https://movie.douban.com/subject/1291546/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "2079763人评价",
"info": "导演:陈凯歌KaigeChen主演:张国荣LeslieCheung/张丰毅FengyiZha...",
"z":"1993/中国大陆中国香港/剧情爱情同性"
},
{
"title": "阿甘正传",
"url": "https://movie.douban.com/subject/1292720/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.5",
"commment_num": "2105656人评价",
"info": "导演:罗伯特·泽米吉斯RobertZemeckis主演:汤姆·汉克斯TomHanks/...",
"z":"1994/美国/剧情爱情"
},
{
"title": "泰坦尼克号",
"url": "https://movie.douban.com/subject/1292722/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p457760035.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.5",
"commment_num": "2069037人评价",
"info": "导演:詹姆斯·卡梅隆JamesCameron主演:莱昂纳多·迪卡普里奥Leonardo...",
"z":"1997/美国墨西哥澳大利亚加拿大/剧情爱情灾难"
},
{
"title": "这个杀手不太冷",
"url": "https://movie.douban.com/subject/1295644/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2240625人评价",
"info": "导演:吕克·贝松LucBesson主演:让·雷诺JeanReno/娜塔莉·波特曼...",
"z":"1994/法国美国/剧情动作犯罪"
},
{
"title": "美丽人生",
"url": "https://movie.douban.com/subject/1292063/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2578474613.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "1293821人评价",
"info": "导演:罗伯托·贝尼尼RobertoBenigni主演:罗伯托·贝尼尼RobertoBeni...",
"z":"1997/意大利/剧情喜剧爱情战争"
},
{
"title": "千与千寻",
"url": "https://movie.douban.com/subject/1291561/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2181812人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:柊瑠美RumiHîragi/入野自由Miy...",
"z":"2001/日本/剧情动画奇幻"
},
{
"title": "辛德勒的名单",
"url": "https://movie.douban.com/subject/1295124/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p492406163.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "1077941人评价",
"info": "导演:史蒂文·斯皮尔伯格StevenSpielberg主演:连姆·尼森LiamNeeson...",
"z":"1993/美国/剧情历史战争"
},
{
"title": "盗梦空间",
"url": "https://movie.douban.com/subject/3541415/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p513344864.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2011932人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:莱昂纳多·迪卡普里奥Le...",
"z":"2010/美国英国/剧情科幻悬疑冒险"
},
{
"title": "星际穿越",
"url": "https://movie.douban.com/subject/1889243/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614988097.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "1773926人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:马修·麦康纳MatthewMc...",
"z":"2014/美国英国加拿大/剧情科幻冒险"
},
{
"title": "无间道",
"url": "https://movie.douban.com/subject/1307914/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2564556863.jpg",
"rating_num": "⭐⭐⭐⭐9.3",
"commment_num": "1323373人评价",
"info": "导演:刘伟强/麦兆辉主演:刘德华AndyLau/梁朝伟TonyLeungChiuW...",
"z":"2002/中国香港/剧情犯罪惊悚"
},
{
"title": "控方证人",
"url": "https://movie.douban.com/subject/1296141/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1505392928.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "530423人评价",
"info": "导演:比利·怀尔德BillyWilder主演:泰隆·鲍华TyronePower/玛琳·...",
"z":"1957/美国/剧情犯罪悬疑"
},{
"title": "肖申克的救赎",
"url": "https://movie.douban.com/subject/1292052/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.7",
"commment_num": "2811907人评价",
"info": "导演:弗兰克·德拉邦特FrankDarabont主演:蒂姆·罗宾斯TimRobbins/...",
"z":"1994/美国/犯罪剧情"
},
{
"title": "霸王别姬",
"url": "https://movie.douban.com/subject/1291546/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "2079763人评价",
"info": "导演:陈凯歌KaigeChen主演:张国荣LeslieCheung/张丰毅FengyiZha...",
"z":"1993/中国大陆中国香港/剧情爱情同性"
},
{
"title": "阿甘正传",
"url": "https://movie.douban.com/subject/1292720/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.5",
"commment_num": "2105656人评价",
"info": "导演:罗伯特·泽米吉斯RobertZemeckis主演:汤姆·汉克斯TomHanks/...",
"z":"1994/美国/剧情爱情"
},
{
"title": "泰坦尼克号",
"url": "https://movie.douban.com/subject/1292722/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p457760035.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.5",
"commment_num": "2069037人评价",
"info": "导演:詹姆斯·卡梅隆JamesCameron主演:莱昂纳多·迪卡普里奥Leonardo...",
"z":"1997/美国墨西哥澳大利亚加拿大/剧情爱情灾难"
},
{
"title": "这个杀手不太冷",
"url": "https://movie.douban.com/subject/1295644/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2240625人评价",
"info": "导演:吕克·贝松LucBesson主演:让·雷诺JeanReno/娜塔莉·波特曼...",
"z":"1994/法国美国/剧情动作犯罪"
},
{
"title": "美丽人生",
"url": "https://movie.douban.com/subject/1292063/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2578474613.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "1293821人评价",
"info": "导演:罗伯托·贝尼尼RobertoBenigni主演:罗伯托·贝尼尼RobertoBeni...",
"z":"1997/意大利/剧情喜剧爱情战争"
},
{
"title": "千与千寻",
"url": "https://movie.douban.com/subject/1291561/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2181812人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:柊瑠美RumiHîragi/入野自由Miy...",
"z":"2001/日本/剧情动画奇幻"
},
{
"title": "辛德勒的名单",
"url": "https://movie.douban.com/subject/1295124/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p492406163.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "1077941人评价",
"info": "导演:史蒂文·斯皮尔伯格StevenSpielberg主演:连姆·尼森LiamNeeson...",
"z":"1993/美国/剧情历史战争"
},
{
"title": "盗梦空间",
"url": "https://movie.douban.com/subject/3541415/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p513344864.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2011932人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:莱昂纳多·迪卡普里奥Le...",
"z":"2010/美国英国/剧情科幻悬疑冒险"
},
{
"title": "星际穿越",
"url": "https://movie.douban.com/subject/1889243/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614988097.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "1773926人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:马修·麦康纳MatthewMc...",
"z":"2014/美国英国加拿大/剧情科幻冒险"
},
{
"title": "无间道",
"url": "https://movie.douban.com/subject/1307914/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2564556863.jpg",
"rating_num": "⭐⭐⭐⭐9.3",
"commment_num": "1323373人评价",
"info": "导演:刘伟强/麦兆辉主演:刘德华AndyLau/梁朝伟TonyLeungChiuW...",
"z":"2002/中国香港/剧情犯罪惊悚"
},
{
"title": "控方证人",
"url": "https://movie.douban.com/subject/1296141/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1505392928.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "530423人评价",
"info": "导演:比利·怀尔德BillyWilder主演:泰隆·鲍华TyronePower/玛琳·...",
"z":"1957/美国/剧情犯罪悬疑"
},{
"title": "肖申克的救赎",
"url": "https://movie.douban.com/subject/1292052/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.7",
"commment_num": "2811907人评价",
"info": "导演:弗兰克·德拉邦特FrankDarabont主演:蒂姆·罗宾斯TimRobbins/...",
"z":"1994/美国/犯罪剧情"
},
{
"title": "霸王别姬",
"url": "https://movie.douban.com/subject/1291546/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "2079763人评价",
"info": "导演:陈凯歌KaigeChen主演:张国荣LeslieCheung/张丰毅FengyiZha...",
"z":"1993/中国大陆中国香港/剧情爱情同性"
},
{
"title": "阿甘正传",
"url": "https://movie.douban.com/subject/1292720/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.5",
"commment_num": "2105656人评价",
"info": "导演:罗伯特·泽米吉斯RobertZemeckis主演:汤姆·汉克斯TomHanks/...",
"z":"1994/美国/剧情爱情"
},
{
"title": "泰坦尼克号",
"url": "https://movie.douban.com/subject/1292722/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p457760035.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.5",
"commment_num": "2069037人评价",
"info": "导演:詹姆斯·卡梅隆JamesCameron主演:莱昂纳多·迪卡普里奥Leonardo...",
"z":"1997/美国墨西哥澳大利亚加拿大/剧情爱情灾难"
},
{
"title": "这个杀手不太冷",
"url": "https://movie.douban.com/subject/1295644/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2240625人评价",
"info": "导演:吕克·贝松LucBesson主演:让·雷诺JeanReno/娜塔莉·波特曼...",
"z":"1994/法国美国/剧情动作犯罪"
},
{
"title": "美丽人生",
"url": "https://movie.douban.com/subject/1292063/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2578474613.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "1293821人评价",
"info": "导演:罗伯托·贝尼尼RobertoBenigni主演:罗伯托·贝尼尼RobertoBeni...",
"z":"1997/意大利/剧情喜剧爱情战争"
},
{
"title": "千与千寻",
"url": "https://movie.douban.com/subject/1291561/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2181812人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:柊瑠美RumiHîragi/入野自由Miy...",
"z":"2001/日本/剧情动画奇幻"
},
{
"title": "辛德勒的名单",
"url": "https://movie.douban.com/subject/1295124/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p492406163.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "1077941人评价",
"info": "导演:史蒂文·斯皮尔伯格StevenSpielberg主演:连姆·尼森LiamNeeson...",
"z":"1993/美国/剧情历史战争"
},
{
"title": "盗梦空间",
"url": "https://movie.douban.com/subject/3541415/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p513344864.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "2011932人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:莱昂纳多·迪卡普里奥Le...",
"z":"2010/美国英国/剧情科幻悬疑冒险"
},
{
"title": "星际穿越",
"url": "https://movie.douban.com/subject/1889243/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614988097.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "1773926人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:马修·麦康纳MatthewMc...",
"z":"2014/美国英国加拿大/剧情科幻冒险"
},
{
"title": "无间道",
"url": "https://movie.douban.com/subject/1307914/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2564556863.jpg",
"rating_num": "⭐⭐⭐⭐9.3",
"commment_num": "1323373人评价",
"info": "导演:刘伟强/麦兆辉主演:刘德华AndyLau/梁朝伟TonyLeungChiuW...",
"z":"2002/中国香港/剧情犯罪惊悚"
},
{
"title": "控方证人",
"url": "https://movie.douban.com/subject/1296141/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1505392928.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "530423人评价",
"info": "导演:比利·怀尔德BillyWilder主演:泰隆·鲍华TyronePower/玛琳·...",
"z":"1957/美国/剧情犯罪悬疑"
},
{
"title": "星际穿越",
"url": "https://movie.douban.com/subject/1889243/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614988097.jpg",
"rating_num": "⭐⭐⭐⭐9.4",
"commment_num": "1773926人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:马修·麦康纳MatthewMc...",
"z":"2014/美国英国加拿大/剧情科幻冒险"
},
{
"title": "无间道",
"url": "https://movie.douban.com/subject/1307914/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2564556863.jpg",
"rating_num": "⭐⭐⭐⭐9.3",
"commment_num": "1323373人评价",
"info": "导演:刘伟强/麦兆辉主演:刘德华AndyLau/梁朝伟TonyLeungChiuW...",
"z":"2002/中国香港/剧情犯罪惊悚"
},
{
"title": "控方证人",
"url": "https://movie.douban.com/subject/1296141/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1505392928.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "530423人评价",
"info": "导演:比利·怀尔德BillyWilder主演:泰隆·鲍华TyronePower/玛琳·...",
"z":"1957/美国/剧情犯罪悬疑"
},{
"title": "控方证人",
"url": "https://movie.douban.com/subject/1296141/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1505392928.jpg",
"rating_num": "⭐⭐⭐⭐⭐9.6",
"commment_num": "530423人评价",
"info": "导演:比利·怀尔德BillyWilder主演:泰隆·鲍华TyronePower/玛琳·...",
"z":"1957/美国/剧情犯罪悬疑"
},
]
}
}
}
new Vue({
el:'#app',
components:{
Moveone
}
})
</script>
<script language=javascript>
function hero()
{
var herowidth=2000;//改为你要的网页宽度
var heroheight=832;//改为你要的网页高度
window.resizeTo(herowidth,heroheight);
}
hero();
</script>
</body>
</html>
效果图: