487 lines
12 KiB
HTML
487 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<title>ランキング</title>
|
||
|
||
<style>
|
||
|
||
|
||
.flex-slave {
|
||
margin: 10px;
|
||
}
|
||
|
||
#map {
|
||
width: 800px;
|
||
height: 600px;
|
||
}
|
||
|
||
|
||
#best{
|
||
position: relative;
|
||
line-height: 1.5em;
|
||
|
||
background: #fff;
|
||
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
border-radius:8px;
|
||
counter-increment: count-ex1-5;
|
||
content: counter(number);
|
||
padding: 0px 10px 10px 30px;
|
||
margin:0px 0px 0px 5px;
|
||
}
|
||
#best::marker{
|
||
font-weight:bold;
|
||
color: #ff0801;
|
||
}
|
||
|
||
#best li{
|
||
counter-increment: count-ex1-5;
|
||
content: counter(number);
|
||
padding: 8px 10px 0px 0px;
|
||
margin:8px 0px 0px 8px;
|
||
line-height: 2em;
|
||
}
|
||
li::marker{
|
||
font-weight:bold;
|
||
color: #ff0801;
|
||
line-height: 1;
|
||
|
||
}
|
||
|
||
#best::before {
|
||
|
||
position: absolute;
|
||
background: #ff0801;
|
||
color: #FFF;
|
||
font-size: 15px;
|
||
border-radius: 50%;
|
||
left: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
top: 5px;
|
||
font-family: "Font Awesome 5 Free";
|
||
content: "\f521";
|
||
font-weight: 900;
|
||
margin:6px 0px 0px 10px;
|
||
|
||
}
|
||
|
||
|
||
|
||
.black{
|
||
background-color: #000;
|
||
}
|
||
h5 {
|
||
position: relative;
|
||
padding: 0px 0px 0px 70px;
|
||
|
||
|
||
background-image: linear-gradient(0deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
display:flex;
|
||
align-items: center;
|
||
height:60px;
|
||
}
|
||
|
||
h5 .span3 {
|
||
position: absolute;
|
||
top: -10px;
|
||
left: 0px;
|
||
display: inline-block;
|
||
width: 52px;
|
||
height: px;
|
||
text-align: center;
|
||
background: #fa4141;
|
||
}
|
||
|
||
h5 .span3:before,
|
||
h5 .span3:after {
|
||
position: absolute;
|
||
content: '';
|
||
|
||
}
|
||
|
||
h5 .span3:before {
|
||
right: -10px;
|
||
width: 0;
|
||
height: 0;
|
||
border-right: 10px solid transparent;
|
||
border-bottom: 10px solid #d90606;
|
||
}
|
||
|
||
h5 .span3:after {
|
||
top: 50%;
|
||
left: 0;
|
||
display: block;
|
||
height: %;
|
||
border: 26px solid #fa4141;
|
||
border-bottom-width: 15px;
|
||
border-bottom-color: transparent;
|
||
|
||
}
|
||
|
||
h5 .span3 i {
|
||
position: relative;
|
||
z-index: 1;
|
||
color: #fff100;
|
||
padding-top: 10px;
|
||
font-size: 24px;
|
||
}
|
||
.best
|
||
select.name{
|
||
display: block;
|
||
margin-bottom: -10px;
|
||
}
|
||
|
||
.best2 li{
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 1.5rem 2rem 1.5rem 130px;
|
||
word-break: break-all;
|
||
border-top: 3px solid #000;
|
||
border-radius: 12px 0 0 0;
|
||
margin: 10px 0px 0px 0px;
|
||
}
|
||
.best2 span{
|
||
font-size: 40px;
|
||
font-size: 4rem;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
display: block;
|
||
padding: 3px 20px;
|
||
color: #fff;
|
||
border-radius: 10px 0 20px 10px;
|
||
background: #000;
|
||
}
|
||
.button3{
|
||
color: #fff;
|
||
border: 2px solid #fff;
|
||
border-radius: 0;
|
||
background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
|
||
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
|
||
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
|
||
box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
|
||
border-radius: 100vh;
|
||
font-family: "Arial", "メイリオ";
|
||
/*letter-spacing: 0.1em;*/
|
||
padding: 7px 25px 7px 25px;
|
||
|
||
}
|
||
|
||
.button3:hover{
|
||
-webkit-transform: translate(0, -2px);
|
||
transform: translate(0, -2px);
|
||
color: #fff;
|
||
-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
|
||
box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
|
||
font-family: "Arial", "メイリオ";
|
||
|
||
|
||
}
|
||
|
||
#best::before {
|
||
|
||
position: absolute;
|
||
background: #ff0801;
|
||
color: #FFF;
|
||
font-size: 15px;
|
||
border-radius: 50%;
|
||
left: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
top: 5px;
|
||
font-family: "Font Awesome 5 Free";
|
||
content: "\f521";
|
||
font-weight: 900;
|
||
margin:6px 0px 0px 10px;
|
||
|
||
}
|
||
|
||
select {
|
||
display: block;
|
||
border-left: solid 10px #27acd9;
|
||
padding: 0.75rem 1.5rem;
|
||
border-color: transparent transparent transparent blue;
|
||
font-weight: bold;
|
||
box-shadow: 3px 5px 3px -2px #aaaaaa,3px 3px 2px 0px #ffffff inset;
|
||
margin-bottom: 10px;
|
||
width: 250px;
|
||
}
|
||
|
||
.box2{
|
||
position: relative;
|
||
line-height: 1.5em;
|
||
|
||
background: #fff;
|
||
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
border-radius:8px;
|
||
counter-increment: count-ex1-5;
|
||
content: counter(number);
|
||
padding: 10px 10px 10px 30px;
|
||
margin:10px 0px 0px 5px;
|
||
}
|
||
|
||
.best2::before {
|
||
|
||
position: absolute;
|
||
background: #ff0801;
|
||
color: #FFF;
|
||
font-size: 15px;
|
||
border-radius: 50%;
|
||
left: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
top: 5px;
|
||
font-family: "Font Awesome 5 Free";
|
||
content: "\f521";
|
||
font-weight: 900;
|
||
margin: 10px 0px 0px 10px;
|
||
|
||
|
||
}
|
||
|
||
h3{
|
||
margin: 3px 0px 0px 10px;
|
||
}
|
||
|
||
@media screen and (max-width: 767px) {
|
||
|
||
#best{
|
||
position: relative;
|
||
line-height: 1.5em;
|
||
|
||
background: #fff;
|
||
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
border-radius:8px;
|
||
counter-increment: count-ex1-5;
|
||
content: counter(number);
|
||
padding: 0px 10px 10px 30px;
|
||
margin:0px 0px 0px 5px;
|
||
}
|
||
#best::marker{
|
||
font-weight:bold;
|
||
color: #ff0801;
|
||
}
|
||
|
||
#best li{
|
||
counter-increment: count-ex1-5;
|
||
content: counter(number);
|
||
padding: 8px 10px 0px 0px;
|
||
margin:8px 0px 0px 8px;
|
||
line-height: 2em;
|
||
margin: 10px 0px 0px 0px;
|
||
}
|
||
li::marker{
|
||
font-weight:bold;
|
||
color: #ff0801;
|
||
line-height: 1;
|
||
|
||
}
|
||
select{
|
||
width:100%;
|
||
|
||
}
|
||
.button3{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 24px;
|
||
}
|
||
select.name{
|
||
margin-bottom: -20px;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.arrow{
|
||
position: relative;
|
||
}
|
||
.arrow::after {
|
||
color: #828282;
|
||
position: absolute;
|
||
top:18px; /* 矢印の位置 */
|
||
right: 25px; /* 矢印の位置 */
|
||
width: 13px; /* 矢印の大きさ */
|
||
height: 13px; /* 矢印の大きさ */
|
||
border-top: 3px solid #58504A; /* 矢印の線 */
|
||
border-right: 3px solid #58504A; /* 矢印の線 */
|
||
-webkit-transform: rotate(135deg); /* 矢印の傾き */
|
||
transform: rotate(135deg); /* 矢印の傾き */
|
||
pointer-events: none; /* 矢印部分もクリック可能にする */
|
||
content: "";
|
||
border-color: #828282;
|
||
}
|
||
.arrow2{
|
||
position: relative;
|
||
}
|
||
.arrow2::after {
|
||
color: #828282;
|
||
position: absolute;
|
||
top:20px; /* 矢印の位置 */
|
||
right: 25px; /* 矢印の位置 */
|
||
width: 13px; /* 矢印の大きさ */
|
||
height: 13px; /* 矢印の大きさ */
|
||
border-top: 3px solid #58504A; /* 矢印の線 */
|
||
border-right: 3px solid #58504A; /* 矢印の線 */
|
||
-webkit-transform: rotate(135deg); /* 矢印の傾き */
|
||
transform: rotate(135deg); /* 矢印の傾き */
|
||
pointer-events: none; /* 矢印部分もクリック可能にする */
|
||
content: "";
|
||
border-color: #828282;
|
||
}
|
||
|
||
.score {
|
||
text-align: right;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="ranking">
|
||
<div class="black">
|
||
<h5><span class="span3"><i class="fas fa-crown"></i></span>
|
||
<span style="font-size: 24px">ランキング</span></h5>
|
||
</div>
|
||
<form @submit.prevent="ranking_view">
|
||
<div class="arrow">
|
||
<select class="name" v-model="selectedEvent">
|
||
<option disabled value="">イベント一覧</option>
|
||
<option selected value="FC岐阜">with FC岐阜</option>
|
||
<!--
|
||
<option value="関ケ原2410">関ケ原-2024年10月</option>
|
||
<option value="養老2410">養老-2024年10月</option>
|
||
<option value="大垣2410">大垣-2024年10月</option>
|
||
<option value="各務原2410">各務原-2024年10月</option>
|
||
<option value="多治見2410">多治見-2024年10月</option>
|
||
<option value="美濃加茂2410">美濃加茂-2024年10月</option>
|
||
<option value="下呂2410">下呂-2024年10月</option>
|
||
<option value="郡上2410">郡上-2024年10月</option>
|
||
<option value="高山2410">高山-2024年10月</option>
|
||
|
||
<option value="関ケ原2409">関ケ原-2024年9月</option>
|
||
|
||
<option value="養老2409">養老-2024年9月</option>
|
||
<option value="大垣2409">大垣-2024年9月</option>
|
||
<option value="各務原2409">各務原-2024年9月</option>
|
||
<option value="多治見2409">多治見-2024年9月</option>
|
||
<option value="美濃加茂2409">美濃加茂-2024年9月</option>
|
||
<option value="下呂2409">下呂-2024年9月</option>
|
||
<option value="郡上2409">郡上-2024年9月</option>
|
||
<option value="高山2409">高山-2024年9月</option>
|
||
|
||
-->
|
||
<option value="美濃加茂">岐阜ロゲin美濃加茂</option>
|
||
<option value="養老ロゲ">養老町</option>
|
||
<option value="岐阜市">岐阜市</option>
|
||
<option value="大垣２">岐阜ロゲin大垣@イオンモール大垣</option>
|
||
<option value="大垣">岐阜ロゲin大垣</option>
|
||
<option value="多治見">岐阜ロゲin多治見</option>
|
||
<option value="各務原">岐阜ロゲin各務原</option>
|
||
<option value="下呂">岐阜ロゲin下呂温泉</option>
|
||
<option value="郡上">岐阜ロゲin郡上</option>
|
||
<option value="高山">岐阜ロゲin高山</option>
|
||
</select>
|
||
<div class="arrow2">
|
||
<select v-model="selectedClass">
|
||
<option selected value="top3">top3</option>
|
||
<option value="3時間一般">3時間一般</option>
|
||
<option value="3時間ファミリー">3時間ファミリー</option>
|
||
<option value="3時間自転車">3時間自転車</option>
|
||
<option value="3時間ソロ男子">3時間ソロ男子</option>
|
||
<option value="3時間ソロ女子">3時間ソロ女子</option>
|
||
<option value="3時間パラロゲ">3時間パラロゲ</option>
|
||
<option value="5時間一般">5時間一般</option>
|
||
<option value="5時間ファミリー">5時間ファミリー</option>
|
||
<option value="5時間自転車">5時間自転車</option>
|
||
<option value="5時間ソロ男子">5時間ソロ男子</option>
|
||
<option value="5時間ソロ女子">5時間ソロ女子</option>
|
||
</div>
|
||
</select>
|
||
<button class="button3" type="submit">CLICK</button>
|
||
</div>
|
||
</form>
|
||
<ol v-if="top_three_flag == false" >
|
||
<div id="best" v-for="team in team_list">
|
||
<li>
|
||
{{ team.team_name }}({{ team.zekken_number }})<br/><p class="score"><span class="span2">合計得点:{{ team.point }}</span> <span class="span2">内減点: {{ team.late_point }}</span></p>
|
||
</li>
|
||
</div>
|
||
</ol>
|
||
<div v-if="top_three_flag == true">
|
||
<div class="box2" v-for="(teams, index) in team_list">
|
||
<h3> {{ index }} </h3>
|
||
<ol>
|
||
<div class="best3" v-for="team in teams">
|
||
<span class="span6"><li class="best2"></span>
|
||
{{ team.team_name }}({{ team.zekken_number }})<br/><p class="score">合計得点:{{ team.point }} 内減点: {{ team.late_point }}</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.1/axios.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||
<script>
|
||
axios.defaults.baseURL = 'https://rogaining.sumasen.net/gifuroge';
|
||
axios.default.withCridentials = true;
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
var vm = new Vue({
|
||
el: '#ranking',
|
||
data: {
|
||
selectedEvent: "FC岐阜",
|
||
selectedClass: "top3",
|
||
team_list: [],
|
||
top_three_flag: false,
|
||
three_pop: [],
|
||
interval: 1
|
||
},
|
||
mounted : function(){
|
||
|
||
var int = this.interval * 60 * 1000
|
||
setInterval(function() {this.ranking_view()}.bind(this), int);
|
||
|
||
},
|
||
|
||
methods: {
|
||
|
||
ranking_view: function(){
|
||
if (this.selectedClass == 'top3'){
|
||
this.top_three_flag = true
|
||
var url = "/all_ranking_top3?event=" + this.selectedEvent
|
||
axios
|
||
.get(url)
|
||
.then(response => ( this.team_list = response.data))}
|
||
else {
|
||
this.top_three_flag = false
|
||
var url = "/get_ranking?class=" + this.selectedClass + '&event=' + this.selectedEvent
|
||
|
||
axios
|
||
.get(url)
|
||
.then(response => ( this.team_list = response.data ))}
|
||
}
|
||
|
||
}
|
||
});
|
||
})();
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|
||
</html>
|