From bc8f9f4976e16b5e634a5d95bda4c0ccb5a6e6c8 Mon Sep 17 00:00:00 2001
From: "HDM58\\hdm58" <hdm58@qq.com>
Date: Fri, 25 Aug 2023 17:38:25 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=96=B0=E5=A2=9Etab=E9=A1=B5?=
=?UTF-8?q?=E9=9D=A2=E5=88=87=E6=8D=A2=E6=95=88=E6=9E=9C=EF=BC=8C=E5=A2=9E?=
=?UTF-8?q?=E5=BC=BA=E9=A1=B5=E9=9D=A2=E4=BD=93=E9=AA=8C=202=E3=80=81?=
=?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8A=A5=E9=94=80=E6=97=B6=E6=8A=A5=E9=94=80?=
=?UTF-8?q?=E6=97=B6=E9=97=B4=E8=87=AA=E5=8A=A8=E8=BD=AC=E6=A0=BC=E5=BC=8F?=
=?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app/finance/controller/Api.php | 2 +-
app/home/view/index/index.html | 4 +-
public/static/assets/gougu/css/layout.css | 57 ++++++++++++++++------
public/static/assets/gougu/module/admin.js | 46 ++++++++++++++---
4 files changed, 83 insertions(+), 26 deletions(-)
diff --git a/app/finance/controller/Api.php b/app/finance/controller/Api.php
index dfd0a4a..14a412d 100644
--- a/app/finance/controller/Api.php
+++ b/app/finance/controller/Api.php
@@ -51,7 +51,7 @@ class Api extends BaseController
//发送消息通知
$detail = Expense::where(['id' => $param['id']])->find();
$msg=[
- 'create_time'=>date('Y-m-d H:i:s',(int)$detail['create_time']),
+ 'create_time'=>$detail['create_time'],
'title'=>'报销',
'action_id'=>$detail['id']
];
diff --git a/app/home/view/index/index.html b/app/home/view/index/index.html
index d18100f..c81bbc0 100644
--- a/app/home/view/index/index.html
+++ b/app/home/view/index/index.html
@@ -140,7 +140,7 @@
<!-- 主体内容 -->
<div class="layui-body" id="GouguAppBody">
<div class="gg-tab-page layui-show" id="tabItem0">
- <iframe id="0" data-frameid="0" title="勾股OA" name="myiframe" src="{:url('/home/index/main')}" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>
+ <iframe id="0" data-frameid="0" title="勾股OA" name="myiframe" src="{:url('/home/index/main')}" frameborder="0" data-timestamp="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>
</div>
</div>
<!-- 辅助元素，用于移动设备下遮罩 -->
@@ -170,7 +170,7 @@
}
}
}
-
+ admin.loading();
$('.layui-side-scroll').hover(function(){
$(this).removeClass('no-scroll');
},function(){
diff --git a/public/static/assets/gougu/css/layout.css b/public/static/assets/gougu/css/layout.css
index 891be68..bee3f65 100644
--- a/public/static/assets/gougu/css/layout.css
+++ b/public/static/assets/gougu/css/layout.css
@@ -22,6 +22,48 @@
.gg-layout .layui-logo,
.gg-layout .layui-logo a {color: #f1f1f1; text-align:center;}
+/** tab过场动画 **/
+.tab-loading{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 666666; display: block; width: 100%; height: 100%; background-color: #fafafa;}
+.tab-loader {position: absolute;top: calc(50% - 1.6em);left: calc(50% - 1.6em); width: 3.2em; height: 3.2em; transform: rotate(165deg);}
+.tab-loader:before,.tab-loader:after {content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 0.6em; height: 0.6em; border-radius: 0.3em; transform: translate(-50%, -50%);}
+.tab-loader:before { animation: before 2s infinite;}
+.tab-loader:after {animation: after 2s infinite;}
+
+@keyframes before {
+ 0% {
+ width: 0.6em;
+ box-shadow: 1.6em -0.6em rgba(225, 20, 98, 0.88), -1.6em 0.6em rgba(111, 202, 220, 0.88);
+ }
+ 35% {
+ width: 3.2em;
+ box-shadow: 0 -0.6em rgba(225, 20, 98, 0.88), 0 0.6em rgba(111, 202, 220, 0.88);
+ }
+ 70% {
+ width: 0.6em;
+ box-shadow: -1em -0.6em rgba(225, 20, 98, 0.88), 1.6em 0.6em rgba(111, 202, 220, 0.88);
+ }
+ 100% {
+ box-shadow: 1em -0.6em rgba(225, 20, 98, 0.88), -1.6em 0.6em rgba(111, 202, 220, 0.88);
+ }
+}
+@keyframes after {
+ 0% {
+ height: 0.6em;
+ box-shadow: 0.6em 1.6em rgba(61, 184, 143, 0.88), -0.6em -1.6em rgba(233, 169, 32, 0.88);
+ }
+ 35% {
+ height: 3.2em;
+ box-shadow: 0.6em 0 rgba(61, 184, 143, 0.88), -0.6em 0 rgba(233, 169, 32, 0.88);
+ }
+ 70% {
+ height: 0.6em;
+ box-shadow: 0.6em -1.6em rgba(61, 184, 143, 0.88), -0.6em 1.6em rgba(233, 169, 32, 0.88);
+ }
+ 100% {
+ box-shadow: 0.6em 1.6em rgba(61, 184, 143, 0.88), -0.6em -1.6em rgba(233, 169, 32, 0.88);
+ }
+}
+
.layui-side-menu {box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);background-color: #001529; color: #fff}
.layui-side-menu .layui-side-scroll {width: 100%;}
.layui-side-menu .layui-side-scroll.no-scroll{overflow-y:hidden;}
@@ -66,7 +108,6 @@
.layui-side-white .layui-nav-tree .layui-nav-child dd a:hover{background-color:#ffffff;color: #187FDD;}
.layui-side-white .layui-nav-tree .layui-nav-bar{background-color: #187FDD;width:3px;left:inherit;right:0}
-
.layui-side-blue{background-color:#192A5E; color: #C5C9D2}
.layui-side-blue .layui-logo {background-color: #122150;border-bottom: 1px solid #122150;}
.layui-side-blue .layui-nav .layui-nav-item a{color: #C5C9D2}
@@ -199,18 +240,4 @@
}
.side-spread-sm .gg-body-shade {
display: block;
-}
-
-.gg-tab-page.layui-show {animation:moveTop .4s;-webkit-animation:moveTop .4s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}
-@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
- 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
-}
-@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
- 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
-}
-@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
- 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
-}
-@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
- 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
\ No newline at end of file
diff --git a/public/static/assets/gougu/module/admin.js b/public/static/assets/gougu/module/admin.js
index 3008f4e..e2eb568 100644
--- a/public/static/assets/gougu/module/admin.js
+++ b/public/static/assets/gougu/module/admin.js
@@ -1,11 +1,31 @@
layui.define(['element'], function (exports) {
var element = layui.element;
var tab = {
- /*新增一个Tab页面
- * @id，tab页面唯一标识，可是标签中data-id的属性值
- * @url,tab页面地址
- * @name,tab页面标题，
- */
+ // tab动画加载效果
+ loading: function() {
+ let load = '<div class="tab-loading"><div class="tab-loader"></div></div>';
+ let $iframe = $('#GouguAppBody').find('.gg-tab-page.layui-show iframe');
+ if (!$iframe.next().length) {
+ $iframe.parent().append(load);
+ let tabLoad = $iframe.parent().find('.tab-loading');
+ let tab_timestamp = $iframe.data('timestamp');
+ let timestamp = new Date().getTime();
+ //console.log(tab_timestamp);
+ if(timestamp-tab_timestamp<666){
+ $iframe.on('load', function() {
+ tabLoad.fadeOut(666, function() {
+ tabLoad.remove();
+ });
+ })
+ }
+ else{
+ tabLoad.fadeOut(666, function() {
+ tabLoad.remove();
+ });
+ }
+ }
+ },
+ //历史tab预加载
tabTem: function (id, url, title) {
element.tabAdd('gg-admin-tab', {
id: id,
@@ -14,8 +34,13 @@ layui.define(['element'], function (exports) {
});
$('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '" data-url="' + url + '"></div>');
},
+ /*新增一个Tab页面
+ * @id，tab页面唯一标识，可是标签中data-id的属性值
+ * @url,tab页面地址
+ * @name,tab页面标题，
+ */
tabAdd: function (id, url, title) {
- var thetabs = $('#pageTabUl').find('li');
+ let thetabs = $('#pageTabUl').find('li');
if (thetabs.length > 12) {
layer.tips('点击LOGO快速关闭已开的TAB页面', $('.layui-logo'));
}
@@ -28,7 +53,9 @@ layui.define(['element'], function (exports) {
url:url,
title: '<span class="gg-tab-active"></span>' + title
});
- $('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '"><iframe id="' + id + '" data-frameid="' + id + '" src="' + url + '" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe></div>');
+ // 获取当前时间戳（毫秒数）
+ let timestamp = new Date().getTime();
+ $('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem'+id+'" data-id="'+id +'"><iframe id="'+id+'" data-frameid="'+id+'" data-timestamp="'+timestamp+'" src="'+url+'" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe></div>');
this.tabChange(id);
},
//从子页面打开新的Tab页面，防止id重复，使用时间戳作为唯一标识
@@ -190,7 +217,9 @@ layui.define(['element'], function (exports) {
let id = thisPage.data('id');
let url = thisPage.data('url');
if(thisPage.find('iframe').length==0){
- thisPage.html('<iframe id="' + id + '" data-frameid="' + id + '" src="' + url + '" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>');
+ // 获取当前时间戳（毫秒数）
+ let timestamp = new Date().getTime();
+ thisPage.html('<iframe id="'+id+'" data-frameid="'+id+'" data-timestamp="'+timestamp+'" src="'+url+'" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>');
}
tab.tabFollow(id);
$('#GouguAppBody').find('.gg-tab-page').removeClass('layui-show');
@@ -198,6 +227,7 @@ layui.define(['element'], function (exports) {
if(data.index==0){
tab.refresh(0);
}
+ tab.loading();
tab.tabRoll("auto", data.index);
tab.tabCookie();
});