diff --git a/package.json b/package.json index e1a67bf..db4f00e 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "ruoyi", + "name": "sqq-ui", "version": "3.8.5", "description": "三水清模板", - "author": "若依", + "author": "ssq", "license": "MIT", "scripts": { "dev": "vue-cli-service serve", @@ -33,7 +33,7 @@ ], "repository": { "type": "git", - "url": "https://gitee.com/y_project/RuoYi-Vue.git" + "url": "" }, "dependencies": { "@riophae/vue-treeselect": "0.4.0", diff --git a/public/favicon.ico b/public/favicon.ico index e263760..7cf3b91 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index 925455c..5418a8d 100644 --- a/public/index.html +++ b/public/index.html @@ -23,186 +23,102 @@ padding: 0.2em 0; } - #loader-wrapper { - position: fixed; + #loadingbg { + position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; - z-index: 999999; - } - - #loader { - display: block; + right: 0; + bottom: 0; + z-index: 99999; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(119deg, #D9D4F5 0%, #B3D1F9 0%, #6CAFFD 100%, #84A7FB 100%, #A1ADFC 100%); + /*background-color: #304156;*/ + } + + .loader-4 { + width: 10px; + height: 40px; + border-radius: 4px; + display: inline-block; position: relative; - left: 50%; - top: 50%; - width: 150px; - height: 150px; - margin: -75px 0 0 -75px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: #FFF; - -webkit-animation: spin 2s linear infinite; - -ms-animation: spin 2s linear infinite; - -moz-animation: spin 2s linear infinite; - -o-animation: spin 2s linear infinite; - animation: spin 2s linear infinite; - z-index: 1001; - } - - #loader:before { - content: ""; + background: currentColor; + color: #fff; + animation: animloader 0.3s 0.3s linear infinite alternate; + } + + .loader-4::after, + .loader-4::before { + content: ''; + width: 10px; + height: 40px; + border-radius: 4px; + background: currentColor; position: absolute; - top: 5px; - left: 5px; - right: 5px; - bottom: 5px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: #FFF; - -webkit-animation: spin 3s linear infinite; - -moz-animation: spin 3s linear infinite; - -o-animation: spin 3s linear infinite; - -ms-animation: spin 3s linear infinite; - animation: spin 3s linear infinite; + top: 50%; + transform: translateY(-50%); + left: 20px; + animation: animloader 0.3s 0.45s linear infinite alternate; } - #loader:after { - content: ""; - position: absolute; - top: 15px; - left: 15px; - right: 15px; - bottom: 15px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: #FFF; - -moz-animation: spin 1.5s linear infinite; - -o-animation: spin 1.5s linear infinite; - -ms-animation: spin 1.5s linear infinite; - -webkit-animation: spin 1.5s linear infinite; - animation: spin 1.5s linear infinite; + .loader-4::before { + left: -20px; + animation-delay: 0s; } - - @-webkit-keyframes spin { + @keyframes rotation { 0% { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); + transform: rotate(0deg) } + 100% { - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); + transform: rotate(360deg) } } - @keyframes spin { + @keyframes zero { 0% { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); + transform: scale(1) rotate(0deg) } + 100% { - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); + transform: scale(0) rotate(360deg) } } + @keyframes animloader { + 0% { + height: 50px; + } - #loader-wrapper .loader-section { - position: fixed; - top: 0; - width: 51%; - height: 100%; - background: #7171C6; - z-index: 1000; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } - - #loader-wrapper .loader-section.section-left { - left: 0; - } - - #loader-wrapper .loader-section.section-right { - right: 0; + 100% { + height: 50px / 10; + } } + @keyframes bump { + 0% { + transform: translate(-50%, 5px) + } - .loaded #loader-wrapper .loader-section.section-left { - -webkit-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); - } - - .loaded #loader-wrapper .loader-section.section-right { - -webkit-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); + 100% { + transform: translate(-50%, -5px) + } } - .loaded #loader { - opacity: 0; - -webkit-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; - } - .loaded #loader-wrapper { - visibility: hidden; - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); - -webkit-transition: all 0.3s 1s ease-out; - transition: all 0.3s 1s ease-out; - } - .no-js #loader-wrapper { - display: none; - } - .no-js h1 { - color: #222222; - } - #loader-wrapper .load_title { - font-family: 'Open Sans'; - color: #FFF; - font-size: 19px; - width: 100%; - text-align: center; - z-index: 9999999999999; - position: absolute; - top: 60%; - opacity: 1; - line-height: 30px; - } - #loader-wrapper .load_title span { - font-weight: normal; - font-style: italic; - font-size: 13px; - color: #FFF; - opacity: 0.5; - }