95 lines
3.4 KiB
HTML
95 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<base th:href="${#request.getContextPath() + '/'}">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
|
<title th:text="${systemTitle}"></title>
|
|
<link rel="stylesheet" href="assets/custom/index/css/swiper.min.css?t=1">
|
|
<link rel="stylesheet" href="assets/custom/index/css/style.css?t=1">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="header">
|
|
<em v-cloak>{{date}}</em>
|
|
<span th:text="${systemTitle}"></span>
|
|
<a href="oauth/logout" class="logout">
|
|
退出系统
|
|
</a>
|
|
</div>
|
|
<div class="main">
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" th:each="oAuth2Client: ${listOAuth2Client}">
|
|
<a th:href="${oAuth2Client.webServerRedirectUri}" class="guide-box">
|
|
<div class="slide-box">
|
|
<img th:if="${oAuth2Client.systemIcon ne ''}" th:src="'route/file/download/false/'+ ${oAuth2Client.systemIcon}" alt="">
|
|
<img th:if="${oAuth2Client.systemIcon eq ''}" src="assets/custom/index/images/system.png"/>
|
|
<div class="system-name" th:text="${oAuth2Client.clientName}"></div>
|
|
<div class="system-name-small" th:text="${oAuth2Client.environment}"></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="assets/custom/index/js/swiper.min.js?t=1"></script>
|
|
<script src="assets/custom/index/js/vue.js?t=1"></script>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
date: ''
|
|
},
|
|
methods: {
|
|
initSwiper: function () {
|
|
var swiper = new Swiper('.swiper-container', {
|
|
slidesPerView: 5,
|
|
spaceBetween: 0,
|
|
centeredSlides: true,
|
|
loop: false,
|
|
autoplay: {
|
|
delay: 3000,
|
|
disableOnInteraction : false
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
});
|
|
},
|
|
initDate: function () {
|
|
var date = new Date()
|
|
var hour = date.getHours()
|
|
var min = date.getMinutes()
|
|
var year = date.getFullYear()
|
|
var month = date.getMonth() + 1
|
|
var day = date.getDate()
|
|
if (hour < 10) {
|
|
hour = '0' + hour
|
|
}
|
|
if (min < 10) {
|
|
min = '0' + min
|
|
}
|
|
if (month < 10) {
|
|
month = '0' + month
|
|
}
|
|
if (day < 10) {
|
|
day = '0' + day
|
|
}
|
|
this.date = year + '-' + month + '-' + day + ' ' + hour + ':' + min;
|
|
}
|
|
},
|
|
mounted: function () {
|
|
var self = this
|
|
this.initSwiper()
|
|
setInterval(function () {
|
|
self.initDate()
|
|
}, 1000)
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |