修改index页面

src/main/java/cn/com/tenlion/usercenter/controller/route/index/CustomIndexPageRouteController.java

@@ -126,6 +126,7 @@ public class CustomIndexPageRouteController {
         OAuth2ClientSimpleDTO oAuth2ClientSimpleDTO = new OAuth2ClientSimpleDTO();
         oAuth2ClientSimpleDTO.setSystemIcon("");
         oAuth2ClientSimpleDTO.setClientName("统一用户管理系统");
+        oAuth2ClientSimpleDTO.setEnvironment("oauth2 server");
         oAuth2ClientSimpleDTO.setWebServerRedirectUri("default-main");
         return oAuth2ClientSimpleDTO;
     }

src/main/resources/static/assets/custom/index/css/style.css

@@ -1,15 +1,158 @@
-.container{position:absolute;top:0;left:0;bottom:0;right:0;background:url(../images/bg.png) no-repeat;background-size:100% 100%;padding:.35rem .5rem;font-size:0}
-.top{overflow:hidden}
-.logo{float:left}
-.logo a{font-size:.3rem;color:#00f5ff;text-shadow:0 0 5px #fff}
-.btn{float:right}
-.btn a{font-size:.2rem;color:#00f5ff;text-shadow:0 0 5px #fff;display:inline-block;margin-right:.2rem}
-.main{margin:1rem auto;width:95%;overflow:hidden}
-.main-container{width:105%;height:5.5rem;overflow-y:auto}
-.main-container:after{content:'';display:block;clear:both}
-.guide-box{display:block;float:left;width:3.5rem;height:2.75rem;position:relative;background:url(../images/box-bg.png) no-repeat center;background-size:100% 100%;margin-right:1rem;margin-bottom:.5rem}
-.guide-box:nth-child(4n){margin-right:0}
-.guide-text{max-width: 100%;padding: 0 .15rem;box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
-.guide-text img{width:1.4rem;height:1.5rem;margin-bottom:.3rem}
-.guide-text p{font-size:.22rem;color:#00f5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.close{position:absolute;top:0;right:0;width:.35rem;height:.35rem;padding:.1rem;cursor:pointer}
+html, body {
+    position: relative;
+    height: 100%;
+}
+#app{
+    width:100%;
+    height: 100%;
+    background: url("../images/page-bg.png") no-repeat center;
+    background-size: 100% 100%;
+}
+body {
+    background: #eee;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    color:#000;
+    margin: 0;
+    padding: 0;
+}
+.swiper-container {
+    width: 100%;
+    height: 100%;
+}
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    transition: 300ms;
+    transform: scale(0.8);
+}
+.swiper-slide-active,.swiper-slide-duplicate-active{
+    transform: scale(1);
+}
+.main{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    height: 55%;
+    /*height: 380px;*/
+}
+.header{
+    width: 100%;
+    height: 10%;
+    background: url("../images/header-bg.png") no-repeat center;
+    background-size: 100% 100%;
+    position: relative;
+}
+.header span{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    font-size: 26px;
+    color: #fff;
+}
+.header em{
+    position: absolute;
+    top: 50%;
+    left: 1%;
+    transform: translate(0,-50%);
+    font-size: 20px;
+    color: #44FFD3;
+    font-style: normal;
+    text-shadow: 0 0 8px #4BFFF0;
+}
+.header .logout{
+    position: absolute;
+    top: 50%;
+    right: 2%;
+    transform: translate(0,-50%);
+    font-size: 20px;
+    color: #44FFD3;
+    text-shadow: 0 0 8px #4BFFF0;
+    text-decoration: none;
+    padding-left: 30px;
+    background: url("../images/logout-bg.png") no-repeat left center;
+    background-size: auto 100%;
+}
+.header .logout img{
+    width: 70%;
+}
+.swiper-slide{
+    background: url("../images/box-bg.png") no-repeat center;
+    background-size: 100% 100%;
+    text-align: center;
+    position: relative;
+}
+.swiper-slide a{
+    display: block;
+    text-decoration: none;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+.slide-box{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+    padding: 15px 50px;
+    box-sizing: border-box;
+}
+.slide-box img{
+    width: 90%;
+    margin: 0 auto;
+    display: block;
+}
+.system-name{
+    width: 100%;
+    color: #4BFFF0;
+    font-size: 20px;
+    margin: -5px 0 5px;
+    text-shadow: 0 0 8px #4BFFF0;
+}
+.system-name-small{
+    width: 100%;
+    color: #4BFFF0;
+    text-shadow: 0 0 8px #4BFFF0;
+}
+.swiper-slide-active .system-name{
+    font-size: 26px;
+    line-height: 25px;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.swiper-slide-active .swiper-slide .slide-box img{
+    width: 100% !important;
+}
+.swiper-slide-active .system-name-small{
+    background: url("../images/name-bg.png") no-repeat center;
+    background-size: 100% 100%;
+    color: #fff;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

src/main/resources/templates/index/index.html

@@ -2,33 +2,94 @@
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
     <base th:href="${#request.getContextPath() + '/'}">
-    <meta charset="utf-8">
+    <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/reset.css">
+    <link rel="stylesheet" href="assets/custom/index/css/swiper.min.css">
     <link rel="stylesheet" href="assets/custom/index/css/style.css">
-    <script src="assets/custom/index/js/rem.js"></script>
 </head>
 <body>
-<div class="container">
-    <div class="top">
-        <div class="logo">
-            <a href="javascript:void(0);" th:text="${systemTitle}"></a>
-        </div>
-        <div class="btn">
-            <a href="oauth/logout">退出登录</a>
-        </div>
+<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="main-container">
-            <a th:href="${oAuth2Client.webServerRedirectUri}" class="guide-box" th:each="oAuth2Client: ${listOAuth2Client}">
-                <div class="guide-text">
+        <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/icon.png"/>
-                    <p th:text="${oAuth2Client.clientName}"></p>
+                            <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"></script>
+<script src="assets/custom/index/js/vue.js"></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>