102 lines
4.4 KiB
HTML
102 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ELO Star</title>
|
|
<script src="{{ url_for('static', filename='layui.js') }}"></script>
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/layui.css') }}">
|
|
<style>
|
|
.layui-footer {
|
|
position: fixed;left: 0;right: 0;bottom: 0;z-index: 990;height: 7vh;line-height: 7vh;
|
|
padding: 0 15px;box-shadow: -1px 0 4px rgb(0 0 0 / 12%);background-color: #FAFAFA;
|
|
}
|
|
.main {
|
|
text-align: center;background: #fff;height: 80vh;
|
|
margin-top: 2vh;padding-top: 1vh;padding-bottom: 1vh;border-radius: 20px;
|
|
}
|
|
.echarts_widget {
|
|
height: 50vh;position: absolute;
|
|
top: 0; left: 0;right: 0;bottom: 0;margin: auto;
|
|
}
|
|
img {
|
|
max-width: 60%;max-height : 100%;position: absolute;
|
|
top: 0; left: 0;right: 0;bottom: 0;margin: auto;
|
|
}
|
|
.layui-header a, .layui-footer a {
|
|
color: #fff;text-decoration: none;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
|
|
</head>
|
|
<body style="background: #EAEDF0;">
|
|
<div class="layui-header layui-bg-cyan" style="height: 9vh;">
|
|
<div style="float: left;font-size: 28px;margin-left: 5vw;line-height: 9vh;">
|
|
<a href="/">ELO Star</a>
|
|
</div>
|
|
<ul class="layui-nav layui-bg-cyan" style="height: 9vh;float: right;">
|
|
<li class="layui-nav-item"><a href="/new">比较</a></li>
|
|
<li class="layui-nav-item"><a href="/list">排行榜</a></li>
|
|
<li class="layui-nav-item"><a href="/">添加资料</a></li>
|
|
<li class="layui-nav-item"><a href="https://git.foolishfox.cn/fox/ELOStar">Gitea</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="layui-container main">
|
|
<div class="layui-row" style="margin-top: 2vh;height: 5vh;">
|
|
<h1>{{ name }}</h1>
|
|
</div>
|
|
<div class="layui-row" style="margin-top: 3vh;height: 70vh;">
|
|
<div class="layui-col-md5">
|
|
<div style="width: 60%;height: 50vh;position: relative;display: inline-block;">
|
|
<img alt="{{ name }}" src={{ picsrc }}>
|
|
</div>
|
|
<div style="height: 15vh;">
|
|
<p>代表作: {{ work }}</p><br />
|
|
<p>分　数: {{ rate }}</p><br />
|
|
<p>比较数: {{ count }}</p><br />
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md7">
|
|
<div style="position: relative;display: inline-block;height: 65vh;width: 90%;">
|
|
<div id="rate_container" class="echarts_widget"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-footer layui-bg-cyan" style="text-align: center;">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<p>© 2021 ELO Star</p>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<p>Made By <a href="https://foolishfox.cn">Fox</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var rate = echarts.init(document.getElementById('rate_container'));
|
|
var num = {{ count }};
|
|
var hist = {{ hist }};
|
|
var data = [], k = 0;
|
|
while ( k<=num ) {
|
|
data.push([k, hist[k/10]]);
|
|
k += 10;
|
|
}
|
|
var rate_option = {
|
|
title: { text: '历史分数变化', subtext: '每10次比较记录一次' },
|
|
tooltip: { trigger: 'axis' },
|
|
xAxis: { type: 'value', interval: 10 },
|
|
yAxis: { type: 'value' },
|
|
dataZoom: [{}],
|
|
series: [{
|
|
type: 'line',
|
|
data: data
|
|
}]
|
|
};
|
|
rate.setOption(rate_option);
|
|
</script>
|
|
</body>
|
|
</html> |