You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
14 KiB
309 lines
14 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>第三组电影院首页</title>
|
|
<!-- 引入bootstrap的css -->
|
|
{% load static %}
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="{% static 'css/base.css' %}"/>
|
|
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}"/>
|
|
<!-- 引入Jquery -->
|
|
<script src="{% static 'js/jquery-3.6.0.js' %}"></script>
|
|
<!-- 包括所有bootstrap的js插件 -->
|
|
<script src=" {% static 'bootstrap/js/bootstrap.min.js' %}"></script>
|
|
<link type="text/css" rel="stylesheet" href="{% static 'swiper/swiper.min.css' %}"/>
|
|
|
|
<script src="{% static 'swiper/swiper.js' %}"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="{% static 'css/type.css' %}"/>
|
|
|
|
<style>
|
|
body {
|
|
background: #12161c;
|
|
}
|
|
|
|
.m-item {
|
|
margin: 20px;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
}
|
|
|
|
.m-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.m-item img:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.m-con {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
background: rgba(255, 255, 255, .15);
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="overflow: Scroll;overflow-x:hidden">
|
|
|
|
<div>
|
|
<!-- 页眉 -->
|
|
<div id="header">
|
|
<nav class="navbar navbar-fixed-top" role="navigation" id="navbar">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse"
|
|
data-target="#bs-example-navbar-collapse-1">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar white-icon-bar"></span>
|
|
<span class="icon-bar white-icon-bar"></span>
|
|
<span class="icon-bar white-icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">
|
|
<span>欢迎来到第三组电影院</span>
|
|
</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="/" class="tab">首页</a></li>
|
|
<li><a href="/mall/" class="tab">商城</a></li>
|
|
{% if request.tracer %}
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false">{{ request.tracer.username }}<span
|
|
class="caret"></span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="/user/center/userinfo">个人中心</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a href="/logout/">退出登录</a></li>
|
|
</ul>
|
|
</li>
|
|
{% else %}
|
|
<li><a href="/user/login/" class="tab">登录</a></li>
|
|
{% endif %}
|
|
<li><a href="#" class="tab">退出</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="blur"></div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- 顶部动画宣传栏 -->
|
|
<div class="top">
|
|
<div class="scroll fl">
|
|
<div class="scroll_autoplay fl">
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide"><a href="/movie/detail?id=1"><img src="{% static 'img/1.jpg' %}"
|
|
alt="图片找不到了, 努力修复ing"
|
|
class="photo"></a></div>
|
|
|
|
<div class="swiper-slide"><a href="/movie/detail?id=2"><img src="{% static 'img/2.jpg' %}"
|
|
alt="图片找不到了, 努力修复ing"
|
|
class="photo"></a></div>
|
|
|
|
<div class="swiper-slide"><a href="/movie/detail?id=9"><img src="{% static 'img/3.jpg' %}"
|
|
alt="图片找不到了, 努力修复ing"
|
|
class="photo"></a></div>
|
|
|
|
<div class="swiper-slide"><a href="/movie/detail?id=3"><img src="{% static 'img/4.jpg' %}"
|
|
alt="图片找不到了, 努力修复ing"
|
|
class="photo"></a></div>
|
|
|
|
<div class="swiper-slide"><a href="/movie/detail?id=12"><img src="{% static 'img/5.jpg' %}"
|
|
alt="图片找不到了, 努力修复ing"
|
|
class="photo"></a></div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fr top_top"><a href="/movie/detail?id=12"><img src="{% static 'img/5.jpg' %}"
|
|
alt="图片找不到了,嘤嘤嘤~~~" class="photo"></a></div>
|
|
<div class="fr top_down"><a href="/movie/detail?id=3"><img src="{% static 'img/4.jpg' %}"
|
|
alt="图片找不到了,嘤嘤嘤~~~" class="photo"></a></div>
|
|
</div>
|
|
|
|
|
|
<div style="margin: 20px;">
|
|
|
|
<div>
|
|
<form action="">
|
|
<div style="text-align: center">
|
|
<input type="text" name="keyword" value="{{ keyword }}" class="form-control"
|
|
style="width: 400px;display: inline-block"
|
|
id="exampleInputEmail2" placeholder="请输入电影名称">
|
|
<button type="submit" class="btn btn-primary">搜索</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="m-con">
|
|
{% for movie in movie %}
|
|
<div class="m-item">
|
|
<a href="/movie/detail?id={{ movie.id }}">
|
|
<div style=" width: 140px; height: 210px; overflow: hidden">
|
|
<img src="/static/{{ movie.movieimge }}" alt="加载失败, 攻城狮正在修复ing">
|
|
</div>
|
|
|
|
<div style="margin-top: 10px">{{ movie.moviename }}</div>
|
|
<div style="color: #fff">{{ movie.moviedate }}</div>
|
|
<div>{{ movie.movietime }}</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 页面核心 -->
|
|
<div class="main" style="background: grey">
|
|
|
|
<!-- 正在热映与今日票房 -->
|
|
<div class="more">
|
|
<!-- 左侧导航栏-->
|
|
<div class="hot_left fl">
|
|
<ul class="hot_nav">
|
|
<li class="fl">正在热映</li>
|
|
<li class="fr"><a href="/all">全部>></a></li>
|
|
</ul>
|
|
<ul class="hot_movie">
|
|
{% for movie in movielist1 %}
|
|
<li class="fl">
|
|
<div class="movie_detail"><a href="/movie/detail?id={{ movie.id }}">
|
|
<img src="/static/{{ movie.movieimge }}" alt="加载失败, 攻城狮正在修复ing"></a></div>
|
|
<a href="/seats/?id={{ movie.id }}">
|
|
<div class="buy_movie buy_after_movie">{{ movie.moviename }}</div>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
<!-- 右边导航栏-->
|
|
<div class="hot_right fr">
|
|
<ul class="hot_right_title">
|
|
<li>今日票房</li>
|
|
</ul>
|
|
{% for movie in movielist4 %}
|
|
<a href="/movie/detail?id={{ movie.id }}">
|
|
<ul class="hot_right_win">
|
|
<li class="fl"><img src="/static/{{ movie.movieimge }}" alt="加载失败, 攻城狮正在修复ing">
|
|
</li>
|
|
<li class="hot_right_win_name">{{ movie.moviename }}</li>
|
|
<li class="hot_right_win_count">{{ movie.movienum }}</li>
|
|
</ul>
|
|
</a>
|
|
<ul class="hot_right_movie_list" style="background-color: white">
|
|
<a href="/seats/?id={{ movie.id }}">
|
|
<li class="hot_right_movie" style="color: black">
|
|
<span class="fl movie_num" hidden>{{ movie.id }}</span>
|
|
<p class="fl movie_name">{{ movie.moviename }}</p>
|
|
<span class="fr movie_box_office">点击购票</span>
|
|
</li>
|
|
</a>
|
|
</ul>
|
|
{% endfor %}
|
|
<ul class="hot_today_data"></ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 即将热映与最受期待 -->
|
|
<div class="more">
|
|
<div class="hot_left fl">
|
|
<ul class="hot_nav">
|
|
<li class="fl">即将热映</li>
|
|
<li class="fr"><a href="/all">全部>></a></li>
|
|
</ul>
|
|
<ul class="hot_movie">
|
|
{% for movie in movielist2 %}
|
|
<li class="fl">
|
|
<div class="movie_detail"><a href="/movie/detail?id={{ movie.id }}">
|
|
<img src="/static/{{ movie.movieimge }}" alt="加载失败, 攻城狮正在修复ing"></a></div>
|
|
<a href="/seats/?id={{ movie.id }}">
|
|
<div class="buy_movie buy_after_movie">{{ movie.moviename }}</div>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 热播经典与top100 -->
|
|
<div class="more">
|
|
<div class="hot_left fl">
|
|
<ul class="hot_nav">
|
|
<li class="fl">热播经典</li>
|
|
<li class="fr"><a href="/all">全部>></a></li>
|
|
</ul>
|
|
<ul class="hot_movie">
|
|
{% for movie in movielist3 %}
|
|
<li class="fl">
|
|
<div class="movie_detail"><a href="/movie/detail?id={{ movie.id }}">
|
|
<img src="/static/{{ movie.movieimge }}" alt="加载失败, 攻城狮正在修复ing"></a></div>
|
|
<a href="/seats/?id={{ movie.id }}">
|
|
<div class="buy_movie buy_after_movie">{{ movie.moviename }}</div>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<div class="free fl clearF">
|
|
<div class="one fl" style="float: left; margin-left: 50px; margin-right: 30px">
|
|
<p><a href="">关于我们</a></p>
|
|
<p><a href="">权威合作</a></p>
|
|
<p><a href="">合作专区</a></p>
|
|
<p><a href="">加入我们</a></p>
|
|
</div>
|
|
<div class="two fl" style="float: left; margin-left: 70px; margin-right: 30px">
|
|
<p><a href="">购物指南</a></p>
|
|
<p><a href="">购买流程</a></p>
|
|
<p><a href="">支付方式</a></p>
|
|
<p><a href="">配送流程</a></p>
|
|
</div>
|
|
<div class="stree fl" style="float: left; margin-left: 70px; margin-right: 30px">
|
|
<p><a href="">售后服务</a></p>
|
|
<p><a href="">退货流程</a></p>
|
|
<p><a href="">办理售后</a></p>
|
|
<p><a href="">七天退换</a></p>
|
|
</div>
|
|
<div class="fore fl" style="float: left; margin-left: 70px; margin-right: 30px">
|
|
<p><a href="">帮助中心</a></p>
|
|
<p><a href="">注册流程</a></p>
|
|
<p><a href="">联系客服</a></p>
|
|
<p><a href="">网站地图</a></p>
|
|
</div>
|
|
<div class="five fl" style="float: left; margin-left: 70px; margin-right: 30px">
|
|
<p><a href="">服务条款</a></p>
|
|
<p><a href="">终生保养</a></p>
|
|
<p><a href="">注册协议</a></p>
|
|
<p><a href="">隐私声明 </a></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script src="{% static 'js/base.js' %}" type="text/javascript"></script>> |