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.
241 lines
7.6 KiB
241 lines
7.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Personal Center</title>
|
|
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
|
|
<script src="/static/js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
|
|
<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
|
|
<style>
|
|
body{
|
|
background-color: #d9edf7;
|
|
}
|
|
.header{
|
|
top:0;
|
|
left: 0;
|
|
margin:0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
background: rgba(1,1,1,.9);
|
|
z-index: 99;
|
|
position:fixed;
|
|
}
|
|
.title{
|
|
margin-left: 50px;
|
|
color: white;
|
|
font-size: 20px;
|
|
line-height: 50px;
|
|
font-size: x-large;
|
|
}
|
|
.main{
|
|
width: 1200px;
|
|
height: 800px;
|
|
margin: 70px auto 0;
|
|
}
|
|
.left{
|
|
float: left;
|
|
width: 300px;
|
|
height: 100%;
|
|
|
|
}
|
|
.left_info{
|
|
width: 300px;
|
|
height: 230px;
|
|
background-color: #9d9d9d;
|
|
}
|
|
.userphoto{
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
margin:0 auto 0;
|
|
display: block;
|
|
}
|
|
.user_vip{
|
|
width: 300px;
|
|
height: 120px;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
}
|
|
.userphoto img{
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
margin-top:20px;
|
|
}
|
|
.username{
|
|
width: 300px;
|
|
height: 30px;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
color: white;
|
|
list-style: none;
|
|
}
|
|
.user_power{
|
|
margin-top:10px;
|
|
width: 300px;
|
|
height: 50px;
|
|
font-size: 16px;
|
|
line-height: 25px;
|
|
}
|
|
.user_power li{
|
|
width: 100px;
|
|
height: 50px;
|
|
text-align: center;
|
|
color: white;
|
|
list-style: none;
|
|
}
|
|
.left_nav{
|
|
background: white;
|
|
height: 570px;
|
|
background-color: #b9def0;
|
|
}
|
|
.left_nav ul li{
|
|
width: 250px;
|
|
height: 50px;
|
|
margin-left:25px;
|
|
line-height:50px;
|
|
font-size: 20px;
|
|
list-style: none;
|
|
|
|
}
|
|
.right{
|
|
margin-left: 320px;
|
|
width: 850px;
|
|
height: 100%;
|
|
|
|
}
|
|
.basic{
|
|
float: left;
|
|
margin-left: 10px;
|
|
padding-left: 40px;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
|
|
}
|
|
.basic_title{
|
|
padding: 26px 0;
|
|
color: #ec443f;
|
|
font-size: 18px;
|
|
border-bottom: 1px solid #e1e1e1;
|
|
margin-bottom: 30px;
|
|
}
|
|
.order{
|
|
width: 880px;
|
|
height: 51px;
|
|
border: 1px solid #e5e5e5;
|
|
margin: 0 40px 30px 0;
|
|
background-color: #faebcc;
|
|
}
|
|
.order_header{
|
|
width: 840px;
|
|
height: 19px;
|
|
background-color: #f7f7f7;
|
|
font-size: 14px;
|
|
padding: 16px 20px;
|
|
}
|
|
.order_date{
|
|
color: #333;
|
|
display: inline-block;
|
|
margin-right: 30px
|
|
}
|
|
.order_id{
|
|
color: #999;
|
|
}
|
|
.order_delete{
|
|
float: right;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="col-md-2 col-md-offset-1">
|
|
<div class="row">
|
|
<span style="font-size: xx-large">第三组影院</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="row">
|
|
<div class="col-md-2" style="margin-top: 7px;margin-left: 50px">
|
|
<a href="/" style="font-size: x-large">首页</a>
|
|
</div>
|
|
<div class="col-md-2" style="margin-top: 7px;margin-left: 10px">
|
|
<a href="/" style="font-size: x-large">电影</a>
|
|
</div>
|
|
<div class="col-md-2" style="margin-top: 7px;margin-left: 10px">
|
|
<a href="/mall" style="font-size: x-large">商城</a>
|
|
</div>
|
|
<div class="col-md-2" style="margin-top: 7px;margin-left: 10px">
|
|
<a href="" style="font-size: x-large" onclick="Charge()">充值</a>
|
|
<script>
|
|
function Charge(){
|
|
var money = prompt("请输入充值金额");
|
|
$.ajax({
|
|
url: '/user/charge/',
|
|
type: "GET",
|
|
data:{'money':money},
|
|
success: function (data) {
|
|
if (data.msg == "pass"){
|
|
alert("充值成功！！！")
|
|
}
|
|
else {
|
|
alert("非数字！！充值失败！！！")
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main" style="display: inline-block">
|
|
<div class="left">
|
|
<div class="left_info">
|
|
<ul class="user_vip">
|
|
<li class="userphoto"><img src="/static/img/{{ user.image }}" alt=""></li>
|
|
<li class="username"><span style="color: gold">{{ user.vip.level }}</span></li>
|
|
</ul>
|
|
<ul class="user_power">
|
|
<li>
|
|
<sapn>我的积分</sapn>
|
|
<br>
|
|
<span style="margin-left: 50px">{{ user.vip.score }}</span>
|
|
</li>
|
|
<li>
|
|
<sapn>我的余额</sapn>
|
|
<br>
|
|
<span style="margin-left: 50px">{{ user.vip.money }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="left_nav">
|
|
<ul>
|
|
<li><a style="text-decoration:none" href="/user/center/userinfo" ><font color="black">基 本 信 息</font></a></li>
|
|
<li><a style="text-decoration:none" href="/user/center/movieorder?type=2" ><font color="black">电 影 订 单 信 息</font></a></li>
|
|
<li><a style="text-decoration:none" href="/user/center/mallorder?type=2" ><font color="black">商 城 订 单 信 息</font></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="right" >
|
|
<div class="basic" style="display: inline-block">
|
|
<div class="basic_title">商城订单信息</div>
|
|
<div class="order" style="display: inline-block">
|
|
{% for item in order %}
|
|
<div class="order_header" >
|
|
<span class="order_id" style="display: inline-block">商品：{{ item.goodsid.goodsname }}</span>
|
|
<span class="order_id" style="display: inline-block">价格：{{ item.goodsid.goodsprice }}</span>
|
|
<span class="order_delete ">
|
|
<a href="/user/center/mallorder?type=1&id={{ item.id }}" class="glyphicon glyphicon-trash"></a>
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>l> |