滚动公告

ruoyi-admin/src/main/resources/templates/home/base.html

@@ -399,51 +399,103 @@
             color: #ffbb3f;
         }
         .notice{
-            width: 49%;
+            width: 55%;
             height: 40px;
-            border-radius: 8px;
+            margin: 36px auto 14px;
-            border: 1px solid #eee;
-            margin: 36px auto 10px;
             overflow: hidden;
-            float: left;
+            font-weight: bold;
         }
         .notice__inner{
-            height: 100%;
+            animation: roll 36s linear infinite;
-            font-size: 14px;
+            margin-top: 0
-            color: #333;
+        }
+        .notice__item{
+            font-size: 38px;
+            height: 40px;
             line-height: 40px;
+            padding: 0 12px;
             white-space: nowrap;
-            position: relative;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
-        .notice__item{
+            @keyframes roll {
-            position: absolute;
+                0% {
-            top: 0;
+                    margin-top: 0;
-            left: 100%;
-            height: 100%;
-            z-index: -1;
                 }
-        .notice__item-first{
+                4% {
-            padding-right: 70%;
+                    margin-top: 0;
-            animation: rollFirst 25s linear infinite;
                 }
-        .notice__item-second{
+                8% {
-            padding-right: 53%;
+                    margin-top: 0;
-            animation: rollSecond 25s linear 12s infinite;
                 }
-        @keyframes rollFirst {
+                12% {
-            0% {
+                    margin-top: -40px;
-                transform: translateX(0);
                 }
-            100% {
+                16% {
-                transform: translateX(-200%);
+                    margin-top: -40px;
                 }
+                20% {
+                    margin-top: -80px;
                 }
-        @keyframes rollSecond {
+                24% {
-            0% {
+                    margin-top: -80px;
-                transform: translateX(0);
+                }
+                28% {
+                    margin-top: -120px;
+                }
+                32% {
+                    margin-top: -120px;
+                }
+                36% {
+                    margin-top: -160px;
+                }
+                40% {
+                    margin-top: -160px;
+                }
+                44% {
+                    margin-top: -200px;
+                }
+                48% {
+                    margin-top: -200px;
+                }
+                52% {
+                    margin-top: -240px;
+                }
+                56% {
+                    margin-top: -240px;
+                }
+                60% {
+                    margin-top: -200px;
+                }
+                64% {
+                    margin-top: -200px;
+                }
+                68% {
+                    margin-top: -160px;
+                }
+                72% {
+                    margin-top: -160px;
+                }
+                76% {
+                    margin-top: -120px;
+                }
+                80% {
+                    margin-top: -120px;
+                }
+                84% {
+                    margin-top: -80px;
+                }
+                88% {
+                    margin-top: -80px;
+                }
+                92% {
+                    margin-top: -40px;
+                }
+                96% {
+                    margin-top: -40px;
                 }
                 100% {
-                transform: translateX(-200%);
+                    margin-top: 0;
                 }
             }
 </style>
@@ -458,17 +510,24 @@
     <div class="layui-container">
         <div class="notice">
             <div class="notice__inner">
-                <i class="layui-icon layui-icon-speaker" style="font-size: 32px;background-color: white;height: 100%;display: inline-block;"></i>
+                <div class="notice__item" th:each="notice,status : ${noticeList}">
-                <span class="notice__item notice__item-first">
+                    <a style="color: #c70011" th:href="@{/public_view.html(type=1,id=${notice.noticeId})}" th:title="${notice.noticeTitle}" target="_blank" >[[${#strings.abbreviate(notice.noticeTitle,33)}]]</a>
-                    [[${#strings.abbreviate(noticeList[0].noticeTitle,33)}]]
+                </div>
-                    【[[${#dates.format(noticeList[0].createTime, 'yyyy年MM月dd日')}]]】
+            </div>
-                </span>
+        </div>
-                <span class="notice__item notice__item-second">
+<!--        <div class="notice">-->
-                    [[${#strings.abbreviate(noticeList[1].noticeTitle,33)}]]
+<!--            <div class="notice__inner">-->
-                    【[[${#dates.format(noticeList[1].createTime, 'yyyy年MM月dd日')}]]】
+<!--                <i class="layui-icon layui-icon-speaker" style="font-size: 32px;background-color: white;height: 100%;display: inline-block;"></i>-->
-                </span>
+<!--                <span class="notice__item notice__item-first">-->
-            </div>
+<!--                    [[${#strings.abbreviate(noticeList[0].noticeTitle,33)}]]-->
-        </div>
+<!--                    【[[${#dates.format(noticeList[0].createTime, 'yyyy年MM月dd日')}]]】-->
+<!--                </span>-->
+<!--                <span class="notice__item notice__item-second">-->
+<!--                    [[${#strings.abbreviate(noticeList[1].noticeTitle,33)}]]-->
+<!--                    【[[${#dates.format(noticeList[1].createTime, 'yyyy年MM月dd日')}]]】-->
+<!--                </span>-->
+<!--            </div>-->
+<!--        </div>-->
         <div class="layui-row layui-col-space1">
             <div class="layui-col-md6">
                 <div class="layui-carousel" id="ID-carousel-demo-image" style="width: 650px;height: 433px;">