From 74344a2ec388b78fe906a22c31f8fdb77fc60b12 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 04 Mar 2022 15:55:59 +0800
Subject: [PATCH] 404页面优化,页面响应式变化适配
---
src/assets/404/styles.css | 786 +++++++++++++++++++++++++++++++++++
src/components/fixed/header.vue | 2
src/components/swichLabel/main2-music-search.vue | 1
src/components/group/tool.vue | 25
src/components/group/MyPreviewModal.vue | 6
src/components/mini/mdDetail.vue | 2
src/components/swichLabel/main1-home.vue | 116 +----
src/components/swichLabel/main3-show.vue | 4
src/main.js | 4
src/components/group/boxLeft.vue | 6
src/components/mini/box-new-article.vue | 89 +--
src/config/screenConfig.js | 92 ++++
src/components/mini/box8-panal.vue | 2
src/config/router.config.js | 14
src/components/group/articleListScorll.vue | 67 --
src/components/mini/box1-info.vue | 10
src/views/exception/404.vue | 43 +
17 files changed, 1,041 insertions(+), 228 deletions(-)
diff --git a/src/assets/404/styles.css b/src/assets/404/styles.css
new file mode 100644
index 0000000..b9415e5
--- /dev/null
+++ b/src/assets/404/styles.css
@@ -0,0 +1,786 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ font-size: 100%;
+ vertical-align: baseline;
+}
+
+html {
+ line-height: 1;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+caption, th, td {
+ text-align: left;
+ font-weight: normal;
+ vertical-align: middle;
+}
+
+q, blockquote {
+ quotes: none;
+}
+q:before, q:after, blockquote:before, blockquote:after {
+ content: "";
+ content: none;
+}
+
+a img {
+ border: none;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+ display: block;
+}
+
+/***********VARIABLES***********/
+/*Movement*/
+/*Colors*/
+/***********STYLES***********/
+/* body {
+ background-color: #d4e7ba;
+} */
+
+/*.ele-container {
+ background: -webkit-linear-gradient(top, rgba(0, 141, 210, 0.63) 0%, transparent 100%);
+ background: linear-gradient(to bottom, rgba(0, 141, 210, 0.63) 0%, transparent 100%);
+ height: 500px;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}*/
+
+.ele-wrapper {
+ -webkit-animation: ele-movement 1s infinite linear;
+ animation: ele-movement 1s infinite linear;
+ left: 40%;
+ position: absolute;
+ top: 30%;
+ margin: auto 0px;
+ -webkit-transform: translate3D(-50%, -75%, 0);
+ -ms-transform: translate3D(-50%, -75%, 0);
+ transform: translate3D(-50%, -75%, 0);
+ width: 200px;
+}
+
+.ele-body {
+ -webkit-animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ background: -webkit-linear-gradient(top, #cfcfcf 0%, #9c9c9c 70%);
+ background: linear-gradient(to bottom, #cfcfcf 0%, #9c9c9c 70%);
+ border: 1px solid #808080;
+ border-radius: 100px 50px 70px 60px;
+ height: 165px;
+ position: relative;
+ width: 100%;
+ z-index: 1;
+}
+
+.ele-tail {
+ -webkit-animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ border-top: 7px solid #808080;
+ border-radius: 50%;
+ height: 50px;
+ position: absolute;
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ width: 64px;
+}
+.ele-tail:before {
+ border-top: 5px solid #C2C2C2;
+ border-radius: 50%;
+ content: '';
+ height: 50px;
+ position: absolute;
+ width: 64px;
+ top: -6px;
+}
+
+.ele-head {
+ -webkit-animation: head-movement 2s infinite linear;
+ animation: head-movement 2s infinite linear;
+ background: #C2C2C2;
+ border-radius: 50%;
+ border-top: 1px solid #808080;
+ box-shadow: -1px 1px 2px #808080;
+ height: 150px;
+ position: absolute;
+ -webkit-transform: translate3d(80%, -25%, 0);
+ transform: translate3d(80%, -25%, 0);
+ width: 155px;
+}
+
+.ele-eyes:before, .ele-eyes:after {
+ -webkit-animation: eyes-blink 3.5s infinite linear;
+ animation: eyes-blink 3.5s infinite linear;
+ background-color: #FDFDFD;
+ border-radius: 50%;
+ bottom: -48px;
+ content: '';
+ height: 10px;
+ position: absolute;
+ width: 10px;
+}
+
+.ele-eyebrows {
+ -webkit-animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ background: -webkit-linear-gradient(bottom, #C2C2C2 20%, #9c9c9c 100%);
+ background: linear-gradient(to top, #C2C2C2 20%, #9c9c9c 100%);
+ border-radius: 10px;
+ border-top: 1px solid #808080;
+ bottom: 88px;
+ height: 20px;
+ left: 92px;
+ position: absolute;
+ width: 60px;
+}
+
+.ele-eyes {
+ left: 60%;
+ position: absolute;
+ top: 6%;
+}
+.ele-eyes:before {
+ left: 41px;
+}
+.ele-eyes:after {
+ left: 10px;
+}
+
+.ele-ear {
+ -webkit-animation: ear-movement 1s infinite linear;
+ animation: ear-movement 1s infinite linear;
+ background: -webkit-linear-gradient(right, #C2C2C2 10%, darkgray 100%);
+ background: linear-gradient(to left, #C2C2C2 10%, darkgray 100%);
+ border-bottom: 1px solid #808080;
+ border-left: 1px solid #808080;
+ border-top: 1px solid #808080;
+ border-radius: 60px 0 0 50%;
+ height: 110px;
+ left: -22px;
+ position: absolute;
+ top: 25px;
+ -webkit-transform: rotateZ(-10deg);
+ transform: rotateZ(-10deg);
+ width: 60px;
+}
+
+.ele-mouth {
+ -webkit-animation: mouth-movement 1s infinite linear;
+ animation: mouth-movement 1s infinite linear;
+ background: -webkit-linear-gradient(top, #C2C2C2 50%, darkgray 100%);
+ background: linear-gradient(to bottom, #C2C2C2 50%, darkgray 100%);
+ border-radius: 0px 100% 0px 0px;
+ border-top: 2px solid #808080;
+ height: 160px;
+ left: 83%;
+ position: absolute;
+ top: 35%;
+ width: 30px;
+}
+.ele-mouth:before {
+ -webkit-animation: mouth-after-movement 1s infinite linear;
+ animation: mouth-after-movement 1s infinite linear;
+ background-color: darkgray;
+ border-bottom: 1px solid #808080;
+ border-left: 1px solid #808080;
+ border-radius: 8px;
+ bottom: 0;
+ content: '';
+ height: 15px;
+ left: -5px;
+ position: absolute;
+ width: 40px;
+}
+
+.ele-fang-front, .ele-fang-back {
+ border-bottom: 12px solid #FFF;
+ border-radius: 50%;
+ height: 40px;
+ position: absolute;
+ -webkit-transform: rotateZ(20deg);
+ transform: rotateZ(20deg);
+ width: 50px;
+}
+
+.ele-fang-front {
+ box-shadow: 0px 1px 0px #808080;
+ left: 100px;
+ top: 100px;
+}
+.ele-fang-front:before {
+ background-color: #C2C2C2;
+ bottom: -10px;
+ content: '';
+ height: 45px;
+ left: -5px;
+ position: absolute;
+ width: 15px;
+}
+.ele-fang-front:after {
+ background-color: #C2C2C2;
+ border-radius: 0 50% 50% 0;
+ bottom: -14px;
+ box-shadow: 1px 1px 0px #808080;
+ content: '';
+ height: 21px;
+ left: 6px;
+ position: absolute;
+ -webkit-transform: rotateZ(20deg);
+ transform: rotateZ(20deg);
+ width: 15px;
+}
+
+.ele-fang-back {
+ border-bottom-color: #e6e6e6;
+ left: 115px;
+ top: 95px;
+ z-index: -1;
+}
+.ele-fang-back:before {
+ background-color: #C2C2C2;
+ bottom: -10px;
+ content: '';
+ height: 25px;
+ position: absolute;
+ width: 30px;
+}
+
+div[class^="ele-leg-"] {
+ border-left: 1px solid #808080;
+ height: 88px;
+ position: absolute;
+ width: 50px;
+}
+div[class^="ele-leg-"]:before {
+ background-color: rgba(74, 74, 74, 0.53);
+ border-radius: 50%;
+ bottom: -30px;
+ box-shadow: 0 0 2px rgba(74, 74, 74, 0.53);
+ content: '';
+ height: 10px;
+ left: 50%;
+ position: absolute;
+ -webkit-transform: translateX(-50%) rotateZ(0deg);
+ transform: translateX(-50%) rotateZ(0deg);
+ width: 50px;
+}
+
+.ele-leg-front {
+ background-color: #9c9c9c;
+ top: 100%;
+ z-index: 1;
+}
+.ele-leg-front .ele-foot {
+ background-color: #9c9c9c;
+}
+
+.ele-leg-back {
+ background-color: #828282;
+ top: 95%;
+}
+.ele-leg-back .ele-foot {
+ background-color: #828282;
+}
+.ele-leg-back .ele-foot:before, .ele-leg-back .ele-foot:after {
+ background-color: #bababa;
+}
+
+.ele-leg-1 {
+ -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ right: 57.5%;
+}
+.ele-leg-1:before {
+ -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+}
+.ele-leg-1 .ele-foot {
+ -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+}
+
+.ele-leg-2 {
+ -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ right: 67.5%;
+}
+.ele-leg-2:before {
+ -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+}
+.ele-leg-2 .ele-foot {
+ -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+}
+
+.ele-leg-3 {
+ -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ right: 5%;
+}
+.ele-leg-3:before {
+ -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+}
+.ele-leg-3 .ele-foot {
+ -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+}
+
+.ele-leg-4 {
+ -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ right: 15%;
+}
+.ele-leg-4:before {
+ -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+}
+.ele-leg-4 .ele-foot {
+ -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+}
+
+.ele-foot:before, .ele-foot:after {
+ background-color: #E0E0E0;
+ border-radius: 10px 10px 0 0;
+ bottom: 0;
+ content: '';
+ height: 15px;
+ position: absolute;
+ width: 11px;
+}
+
+.ele-foot {
+ border-radius: 25px 25px 35% 40%;
+ bottom: -17.5px;
+ box-shadow: -1px 1px 0px #808080;
+ height: 35px;
+ left: 50%;
+ overflow: hidden;
+ position: absolute;
+ -webkit-transform: translateX(-49%) rotateZ(0deg);
+ transform: translateX(-49%) rotateZ(0deg);
+ width: 55px;
+}
+.ele-foot:before {
+ right: -7.5px;
+}
+.ele-foot:after {
+ bottom: -3px;
+ right: 5px;
+}
+
+@-webkit-keyframes leg-animation {
+ 0% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ }
+ 25% {
+ height: 40px;
+ }
+ 50% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
+ }
+ 75% {
+ height: 65px;
+ }
+ 100% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ }
+}
+
+@keyframes leg-animation {
+ 0% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ }
+ 25% {
+ height: 40px;
+ }
+ 50% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
+ }
+ 75% {
+ height: 65px;
+ }
+ 100% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ }
+}
+@-webkit-keyframes foot-animation {
+ 0% {
+ -webkit-transform: translateX(-49%) rotateZ(-10deg);
+ transform: translateX(-49%) rotateZ(-10deg);
+ }
+ 15% {
+ -webkit-transform: translateX(-49%) rotateZ(5deg);
+ transform: translateX(-49%) rotateZ(5deg);
+ }
+ 40% {
+ -webkit-transform: translateX(-49%) rotateZ(0deg);
+ transform: translateX(-49%) rotateZ(0deg);
+ }
+ 50% {
+ -webkit-transform: translateX(-49%) rotateZ(15deg);
+ transform: translateX(-49%) rotateZ(15deg);
+ }
+ 100% {
+ -webkit-transform: translateX(-49%) rotateZ(-10deg);
+ transform: translateX(-49%) rotateZ(-10deg);
+ }
+}
+@keyframes foot-animation {
+ 0% {
+ -webkit-transform: translateX(-49%) rotateZ(-10deg);
+ transform: translateX(-49%) rotateZ(-10deg);
+ }
+ 15% {
+ -webkit-transform: translateX(-49%) rotateZ(5deg);
+ transform: translateX(-49%) rotateZ(5deg);
+ }
+ 40% {
+ -webkit-transform: translateX(-49%) rotateZ(0deg);
+ transform: translateX(-49%) rotateZ(0deg);
+ }
+ 50% {
+ -webkit-transform: translateX(-49%) rotateZ(15deg);
+ transform: translateX(-49%) rotateZ(15deg);
+ }
+ 100% {
+ -webkit-transform: translateX(-49%) rotateZ(-10deg);
+ transform: translateX(-49%) rotateZ(-10deg);
+ }
+}
+@-webkit-keyframes foot-shadow-animation {
+ 0% {
+ -webkit-transform: translateX(-50%) rotateZ(-8deg);
+ transform: translateX(-50%) rotateZ(-8deg);
+ bottom: -20px;
+ width: 50px;
+ }
+ 25% {
+ bottom: -30px;
+ width: 40px;
+ }
+ 50% {
+ -webkit-transform: translateX(-50%) rotateZ(13deg);
+ transform: translateX(-50%) rotateZ(13deg);
+ bottom: -20px;
+ width: 50px;
+ }
+ 100% {
+ -webkit-transform: translateX(-50%) rotateZ(-8deg);
+ transform: translateX(-50%) rotateZ(-8deg);
+ bottom: -20px;
+ width: 50px;
+ }
+}
+@keyframes foot-shadow-animation {
+ 0% {
+ -webkit-transform: translateX(-50%) rotateZ(-8deg);
+ transform: translateX(-50%) rotateZ(-8deg);
+ bottom: -20px;
+ width: 50px;
+ }
+ 25% {
+ bottom: -30px;
+ width: 40px;
+ }
+ 50% {
+ -webkit-transform: translateX(-50%) rotateZ(13deg);
+ transform: translateX(-50%) rotateZ(13deg);
+ bottom: -20px;
+ width: 50px;
+ }
+ 100% {
+ -webkit-transform: translateX(-50%) rotateZ(-8deg);
+ transform: translateX(-50%) rotateZ(-8deg);
+ bottom: -20px;
+ width: 50px;
+ }
+}
+@-webkit-keyframes eyes-blink {
+ 0% {
+ height: 10px;
+ }
+ 3% {
+ height: 1px;
+ }
+ 5% {
+ height: 10px;
+ }
+ 100% {
+ height: 10px;
+ }
+}
+@keyframes eyes-blink {
+ 0% {
+ height: 10px;
+ }
+ 3% {
+ height: 1px;
+ }
+ 5% {
+ height: 10px;
+ }
+ 100% {
+ height: 10px;
+ }
+}
+@-webkit-keyframes ele-movement {
+ 0% {
+ -webkit-transform: translate3D(-50%, -54%, 0);
+ transform: translate3D(-50%, -54%, 0);
+ }
+ 50% {
+ -webkit-transform: translate3D(-50%, -57%, 0);
+ transform: translate3D(-50%, -57%, 0);
+ }
+ 100% {
+ -webkit-transform: translate3D(-50%, -54%, 0);
+ transform: translate3D(-50%, -54%, 0);
+ }
+}
+@keyframes ele-movement {
+ 0% {
+ -webkit-transform: translate3D(-50%, -54%, 0);
+ transform: translate3D(-50%, -54%, 0);
+ }
+ 50% {
+ -webkit-transform: translate3D(-50%, -57%, 0);
+ transform: translate3D(-50%, -57%, 0);
+ }
+ 100% {
+ -webkit-transform: translate3D(-50%, -54%, 0);
+ transform: translate3D(-50%, -54%, 0);
+ }
+}
+@-webkit-keyframes mouth-movement {
+ 0% {
+ height: 160px;
+ width: 28px;
+ }
+ 50% {
+ height: 150px;
+ width: 30px;
+ }
+ 100% {
+ height: 160px;
+ width: 28px;
+ }
+}
+@keyframes mouth-movement {
+ 0% {
+ height: 160px;
+ width: 28px;
+ }
+ 50% {
+ height: 150px;
+ width: 30px;
+ }
+ 100% {
+ height: 160px;
+ width: 28px;
+ }
+}
+@-webkit-keyframes mouth-after-movement {
+ 0% {
+ width: 37px;
+ }
+ 50% {
+ width: 40px;
+ }
+ 100% {
+ width: 37px;
+ }
+}
+@keyframes mouth-after-movement {
+ 0% {
+ width: 37px;
+ }
+ 50% {
+ width: 40px;
+ }
+ 100% {
+ width: 37px;
+ }
+}
+@-webkit-keyframes tail-movement {
+ 0% {
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ }
+ 50% {
+ -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
+ transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
+ }
+ 100% {
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ }
+}
+@keyframes tail-movement {
+ 0% {
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ }
+ 50% {
+ -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
+ transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
+ }
+ 100% {
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ }
+}
+@-webkit-keyframes head-movement {
+ 0% {
+ -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ }
+ 25% {
+ -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ }
+ 50% {
+ -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
+ transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
+ }
+ 75% {
+ -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ }
+ 100% {
+ -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ }
+}
+@keyframes head-movement {
+ 0% {
+ -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ }
+ 25% {
+ -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ }
+ 50% {
+ -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
+ transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
+ }
+ 75% {
+ -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ }
+ 100% {
+ -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ }
+}
+@-webkit-keyframes body-movement {
+ 0% {
+ height: 160px;
+ margin-top: 5px;
+ }
+ 50% {
+ height: 162.5px;
+ margin-top: 2.5px;
+ }
+ 100% {
+ height: 160px;
+ margin-top: 5px;
+ }
+}
+@keyframes body-movement {
+ 0% {
+ height: 160px;
+ margin-top: 5px;
+ }
+ 50% {
+ height: 162.5px;
+ margin-top: 2.5px;
+ }
+ 100% {
+ height: 160px;
+ margin-top: 5px;
+ }
+}
+@-webkit-keyframes ear-movement {
+ 0% {
+ height: 115px;
+ }
+ 50% {
+ height: 110px;
+ }
+ 100% {
+ height: 115px;
+ }
+}
+@keyframes ear-movement {
+ 0% {
+ height: 115px;
+ }
+ 50% {
+ height: 110px;
+ }
+ 100% {
+ height: 115px;
+ }
+}
+@-webkit-keyframes eyebrows-movement {
+ 0% {
+ height: 18px;
+ }
+ 50% {
+ height: 20px;
+ }
+ 100% {
+ height: 18px;
+ }
+}
+@keyframes eyebrows-movement {
+ 0% {
+ height: 18px;
+ }
+ 50% {
+ height: 20px;
+ }
+ 100% {
+ height: 18px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue
index 7504258..3103d65 100644
--- a/src/components/fixed/header.vue
+++ b/src/components/fixed/header.vue
@@ -13,7 +13,7 @@
<a-col v-bind="showMain">
<a-auto-complete v-model="search.value" :data-source="search.dataSource" ref="mySearch" v-bind="search"
@select="onSelect" @search="onSearch" @change="onChange">
- <a-input >
+ <a-input>
<a-icon slot="suffix" type="search" class="certain-category-icon" />
</a-input>
</a-auto-complete>
diff --git a/src/components/group/MyPreviewModal.vue b/src/components/group/MyPreviewModal.vue
index 4fa33aa..21fad6f 100644
--- a/src/components/group/MyPreviewModal.vue
+++ b/src/components/group/MyPreviewModal.vue
@@ -3,9 +3,8 @@
<a-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
:bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}">
<div style="display: flex;">
- <a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text"
+ <a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text"
@keydown.9.native.prevent="tabFunc" />
-
<div class="markdown-body article-detail" style="min-width: 50%;border: 1px solid #d9d9d9;">
<vue-markdown :source="text"></vue-markdown>
</div>
@@ -17,6 +16,7 @@
<script>
import VueMarkdown from 'vue-markdown'
+
import md5 from 'js-md5';
export default {
@@ -34,7 +34,7 @@
this.insertInputTxt('myInput', '\t')
},
insertInputTxt(id, insertTxt) {
- var elInput = document.getElementById(id);
+ var elInput = document.getElementById(id);
var startPos = elInput.selectionStart
var endPos = elInput.selectionEnd
if (startPos === undefined || endPos === undefined) return
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index 716efc8..b59c978 100644
--- a/src/components/group/articleListScorll.vue
+++ b/src/components/group/articleListScorll.vue
@@ -4,8 +4,8 @@
<div class="mySecret" v-if="data.length==0">
<p>空空如也..</p>
</div>
-
- <div v-for="(temp,index) in data" >
+
+ <div v-for="(temp,index) in data">
<newArticle v-bind="temp" :index="index"></newArticle>
<!-- <box5 v-bind="temp"></box5> -->
</div>
@@ -16,7 +16,7 @@
</div>
</div>
<a-row type="flex" justify="center">
- <div style="position:fixed;bottom: 10px;" >
+ <div style="position:fixed;bottom: 10px;">
<a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
:defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
</div>
@@ -33,31 +33,6 @@
import {
queryBlogArticleList
} from '../../api/blogArticle.js'
-
- var obj1 = {
- "source": babyActicle,
- "title": "陈奕迅-Body Song 歌词",
- "read": 1101,
- "like": 233,
- "folder": "歌词",
- "publishTime": "2021-05-26",
- }
- var obj2 = {
- "source": shijie,
- "title": "这世界那么多人-吉他谱",
- "read": 3101,
- "like": 113,
- "folder": "吉他谱",
- "publishTime": "2020-05-26",
- }
- var obj3 = {
- "source": shijie,
- "title": "遥远的它-吉他谱",
- "read": 201,
- "like": 13,
- "folder": "吉他谱",
- "publishTime": "2022-07-26",
- }
export default {
components: {
@@ -78,12 +53,15 @@
total: 1,
pageSize: 6,
current: 1,
- defaultPageSize:10
+ defaultPageSize: 10
};
+ },
+ created() {
+ this.typeId = this.$route.query.typeId;
},
watch: {
'$route'(to, from) {
- if ("articleList" === to.name) {
+ if ("articleList" === to.name || "home" === to.name) {
this.typeId = this.$route.query.typeId;
}
},
@@ -99,24 +77,12 @@
deactivated() {
window.removeEventListener('scroll', this);
},
- beforeMount() {
- queryBlogArticleList({
- pageNo: this.current,
- pageSize:this.pageSize,
- typeId: this.typeId
- }).then((res) => {
- this.total = Number(res.data.total)
- this.pageSize = Number(res.data.size);
- this.data = res.data.records;
- return res
- })
- },
methods: {
onChange(current) {
this.current = current;
queryBlogArticleList({
pageNo: current,
- pageSize:this.pageSize,
+ pageSize: this.pageSize,
typeId: this.typeId
}).then((res) => {
this.busy = false;
@@ -132,7 +98,7 @@
queryBlogArticleList({
pageNo: this.current + 1,
- pageSize:this.pageSize,
+ pageSize: this.pageSize,
typeId: this.typeId
}).then((res) => {
@@ -162,19 +128,6 @@
};
</script>
<style>
- /* .test {
- overflow: hidden;
- height: 700px;
- }
-
- .infinite-container {
- overflow: auto;
- }
-
- .infinite-container::-webkit-scrollbar {
- display: none;
- } */
-
.demo-loading-container {
position: absolute;
bottom: 40px;
diff --git a/src/components/group/boxLeft.vue b/src/components/group/boxLeft.vue
index 7d8ab19..9512c91 100644
--- a/src/components/group/boxLeft.vue
+++ b/src/components/group/boxLeft.vue
@@ -1,5 +1,5 @@
<template>
- <div class="blog-left-side fadeInLeft">
+ <div class="blog-left-side fadeInLeft">
<div class="blog-cell">
<box1></box1>
</div>
@@ -22,9 +22,5 @@
box2,
box3,
},
- data() {
- return {}
- }
}
</script>
-
diff --git a/src/components/group/tool.vue b/src/components/group/tool.vue
index d4f319f..18522b5 100644
--- a/src/components/group/tool.vue
+++ b/src/components/group/tool.vue
@@ -18,7 +18,9 @@
</a-button>
<a-button @click="showScreen">
{{screenModel}}
- <a-icon type="arrows-alt" />
+ <transition name="fade">
+ <a-icon :type="iconType" />
+ </transition>
</a-button>
<!-- <a-button>
@@ -33,14 +35,12 @@
export default {
data() {
return {
+ iconType: "arrows-alt",
screen: false,
screenModel: "拉伸"
}
},
methods: {
- showDrawer1() {
- this.$emit('showDrawer1')
- },
showModal() {
this.$emit('showModal')
},
@@ -51,14 +51,25 @@
this.$emit('showScreen')
if (this.screen) {
this.screenModel = "拉伸";
- }else{
+ this.iconType = "arrows-alt";
+ } else {
this.screenModel = "缩小";
+ this.iconType = "shrink"
}
- this.screen=!this.screen;
+ this.screen = !this.screen;
}
},
}
</script>
-<style>
+<style lang="less">
+ .fade-enter-active,
+ .fade-leave-active {
+ transition: opacity .5s;
+ }
+
+ .fade-enter,
+ .fade-leave-to {
+ opacity: 0;
+ }
</style>
diff --git a/src/components/mini/box-new-article.vue b/src/components/mini/box-new-article.vue
index 1fbb81b..0d9e24b 100644
--- a/src/components/mini/box-new-article.vue
+++ b/src/components/mini/box-new-article.vue
@@ -1,50 +1,47 @@
<template>
- <div>
- <div class="recent-posts" id="recent-posts">
- <div class="recent-post-item">
- <div class="miniTag" v-if="isTop==1">置顶</div>
- <div class="post_cover left_radius" v-if="index%2==0">
- <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title">
- <div class="block left_radius"></div>
- <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
- </router-link>
- </div>
+ <div class="recent-posts" id="recent-posts">
+ <div class="recent-post-item">
+ <div class="miniTag" v-if="isTop==1">置顶</div>
+ <div class="post_cover left_radius" v-if="index%2==0">
+ <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title">
+ <div class="block left_radius"></div>
+ <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
+ </router-link>
+ </div>
- <div class="post_cover right_radius" v-else>
- <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title">
- <div class="block right_radius"></div>
- <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
- <!-- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg" onerror="this.onerror=null,this.src="/img/404.jpg"" :alt="title"> -->
- </router-link>
- </div>
+ <div class="post_cover right_radius" v-else>
+ <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title">
+ <div class="block right_radius"></div>
+ <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
+ <!-- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg" onerror="this.onerror=null,this.src="/img/404.jpg"" :alt="title"> -->
+ </router-link>
+ </div>
- <div class="recent-post-info">
- <router-link :to="{path:'/mdDetail',query:{id:id}}" class="article-title">
- <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
- <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
- {{title}}
- </router-link>
- <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
- <div class="article-meta-wrap" style="display: flex;">
- <span class="post-meta-date">
- <a-icon type="calendar" />
- <span class="article-meta-label"></span>
- <time datetime="2022-01-13T06:25:00.000Z"
- title=" 2022-01-13 14:25:00">{{publishDate}}</time>
- </span>
- <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
- <span class="article-meta">
- <a-icon type="book" />
- <router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}"
- class="article-meta__categories">
- {{articleTypeName}}
- </router-link>
- <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
- </span>
- </div>
- <div class="content">
- {{introduce}}
- </div>
+ <div class="recent-post-info">
+ <router-link :to="{path:'/mdDetail',query:{id:id}}" class="article-title">
+ <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
+ <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
+ {{title}}
+ </router-link>
+ <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
+ <div class="article-meta-wrap" style="display: flex;">
+ <span class="post-meta-date">
+ <a-icon type="calendar" />
+ <span class="article-meta-label"></span>
+ <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00">{{publishDate}}</time>
+ </span>
+ <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
+ <span class="article-meta">
+ <a-icon type="book" />
+ <router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}"
+ class="article-meta__categories">
+ {{articleTypeName}}
+ </router-link>
+ <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
+ </span>
+ </div>
+ <div class="content">
+ {{introduce}}
</div>
</div>
</div>
@@ -88,10 +85,6 @@
data() {
return {
img404: "this.onerror='';this.src=\"https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg\"",
- // "title": "使用KeyStore生成证书",
- // "publishTime": "2022-01-14",
- // "tag": "随手记",
- // "content": "前言Keytool是一个Java数据证书的管理工具 ， 在keystore里，包含两种数据： 密钥实体（Key entity）：即密钥（secret key）又或者是私钥和配对公钥（采用非对称加密） 可信任的证书实体（trusted certificate entries）：即证书（包含公钥） keytool常用命令: genkey 在用户主目录中创建一个默认文件”.keystore” alias 产生别名 keystore 指定密钥库的名称(产生的各类信息将不在.keystore文件中) keyalg 指定密钥的算法 (如 RSA DSA（如果不指定默认采用DSA）) validity 指定创建的证书有效期多少天 keysize 指定密钥长度 storepass 指定密钥库的密码(获取keystore信息所需的密码) keypass 指定别名条目的密码(私钥的密码) dname 指定证书拥有者信息 例如： “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码 list 显示密钥库中的证书信息 keytool - ..."
}
}
}
diff --git a/src/components/mini/box1-info.vue b/src/components/mini/box1-info.vue
index 9b1c0f5..a37ce07 100644
--- a/src/components/mini/box1-info.vue
+++ b/src/components/mini/box1-info.vue
@@ -9,9 +9,11 @@
<span>{{name}}</span>
<span>{{sentence}}</span>
<span>
- <a-icon type="environment" />{{location}}
+ <router-link to="/findMe">
+ <a-icon type="environment" />{{location}}
+ </router-link>
</span>
-
+
</div>
</div>
@@ -57,6 +59,10 @@
/* 一言 */
.blog-user-message {
+ a {
+ color: #555;
+ }
+
text-align: center;
font-size: 15px;
color: #555;
diff --git a/src/components/mini/box8-panal.vue b/src/components/mini/box8-panal.vue
index 8b4c6be..76ca572 100644
--- a/src/components/mini/box8-panal.vue
+++ b/src/components/mini/box8-panal.vue
@@ -1,7 +1,7 @@
<template>
<div class="holdHeight">
<a-row type="flex" justify="center">
- <a-col v-for="temp in [1,2,1,1,1,1,1]">
+ <a-col v-for="temp in [1,2,1,1,1,1]">
<div class="myCard" style="height: 200px;width: 220px; border-radius: 20px;">
<a-card :hoverable="true" size="small">
<template slot="cover">
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index 4c75b5a..af4e2c2 100644
--- a/src/components/mini/mdDetail.vue
+++ b/src/components/mini/mdDetail.vue
@@ -23,8 +23,6 @@
</a-input-password>
</a-auto-complete>
<span class="myTip">{{errorMsg}}</span>
-
-
</div>
<div class="markdown-body article-detail" v-else>
diff --git a/src/components/swichLabel/main1-home.vue b/src/components/swichLabel/main1-home.vue
index d88d368..ae58261 100644
--- a/src/components/swichLabel/main1-home.vue
+++ b/src/components/swichLabel/main1-home.vue
@@ -4,11 +4,11 @@
<MyPreviewModal ref="MyPreviewModal"></MyPreviewModal>
<div class="blog-drawer">
- <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
- :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=300
+ <a-drawer placement="left" :closable="false" :visible="visibleDrawer" :getContainer="'body'"
+ :after-visible-change="afterVisibleChange" @close="onCloseDrawer" :zIndex="90" :width="300"
:bodyStyle="{padding:'0px'}"
:wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}">
- <boxLeft></boxLeft>
+ <boxLeft @click="closeDrawer()"></boxLeft>
<boxRight></boxRight>
</a-drawer>
</div>
@@ -23,10 +23,10 @@
</a-col>
</keep-alive>
- <a-col v-bind="colApiMain ">
+ <a-col v-bind="colApiMain">
<a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
<a-affix :offset-top="600">
- <a-button @click="showDrawer1" style="padding:0px 10px">
+ <a-button @click="showDrawer" style="padding:0px 10px">
<a-icon type="left-circle" />
</a-button>
</a-affix>
@@ -36,10 +36,8 @@
</keep-alive>
</a-col>
- <a-col v-bind="colApiRight" ref="myDrawer">
- <!-- <boxRight></boxRight> -->
- <tool @showModal="showModal" @showPreview="showPreview" @showDrawer1="showDrawer1"
- @showScreen="showScreen"></tool>
+ <a-col v-bind="colApiRight">
+ <tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen" />
</a-col>
</a-row>
</div>
@@ -50,40 +48,33 @@
<script>
import boxLeft from "../group/boxLeft.vue"
import boxRight from "../group/boxRight.vue"
- import articleListScorll from "../group/articleListScorll.vue"
import tool from "../group/tool.vue"
import MyModal from "../group/MyModal.vue"
import MyPreviewModal from "../group/MyPreviewModal.vue"
+
+ import screenConfig from "../../config/screenConfig.js"
export default {
components: {
boxLeft,
boxRight,
- articleListScorll,
tool,
MyModal,
MyPreviewModal,
},
methods: {
showScreen() {
- if (this.screen) {
+ if (this.scale) {
//缩小
- this.colApiLeft.xxl.span = 0;
- this.colApiLeft.xxl.offset = 0;
-
- this.colApiMain.xxl.span = 17;
- this.colApiMain.xxl.offset = 4;
+ this.colApiLeft = screenConfig.colApiLeftScale;
+ this.colApiMain = screenConfig.colApiMainScale;
} else {
//放大
- this.colApiLeft.xxl.span = 4;
- this.colApiLeft.xxl.offset = 3;
-
- this.colApiMain.xxl.span = 11;
- this.colApiMain.xxl.offset = 2;
+ this.colApiLeft = screenConfig.colApiLeft;
+ this.colApiMain = screenConfig.colApiMain;
}
- this.screen = !this.screen;
-
+ this.scale = !this.scale;
},
showModal() {
this.$refs.myModal.showModal();
@@ -92,77 +83,21 @@
this.$refs.MyPreviewModal.showModal();
},
afterVisibleChange(val) {},
- showDrawer1() {
- this.visible1 = true;
+ showDrawer() {
+ this.visibleDrawer = true;
},
- onClose1() {
- this.visible1 = false;
+ onCloseDrawer() {
+ this.visibleDrawer = false;
},
-
},
data() {
return {
- screen: true,
- visible1: false,
- visible2: false,
- colMini: {
- xs: 1,
- sm: 1,
- md: 0,
- lg: 0,
- xl: 0,
- xxl: 0
- },
- colApiLeft: {
- xs: 0,
- sm: 0,
- md: {
- span: 8,
- },
- lg: {
- span: 7,
- offset: 1,
- },
- xl: {
- span: 5,
- offset: 2,
- },
- xxl: {
- span: 4,
- offset: 3,
- },
- },
- colApiRight: {
- xs: 0,
- sm: 0,
- md: 0,
- lg: 1,
- xl: 1,
- xxl: 1,
- },
- colApiMain: {
- xs: 24,
- sm: {
- span: 20,
- offset: 2,
- },
- md: {
- span: 15,
- offset: 1,
- },
- lg: {
- span: 13,
- offset: 2,
- },
- xl: {
- span: 13,
- offset: 2,
- },
- xxl: {
- span: 11,
- offset: 2,
- },
- }
+ scale: true,
+ visibleDrawer: false,
+ colMini: screenConfig.colMini,
+ colApiLeft: screenConfig.colApiLeft,
+ colApiRight: screenConfig.colApiRight,
+ colApiMain: screenConfig.colApiMain
}
}
}
@@ -312,7 +247,6 @@
transition: height 1s;
}
-
.blog-scroll:hover::-webkit-scrollbar {
display: block;
diff --git a/src/components/swichLabel/main2-music-search.vue b/src/components/swichLabel/main2-music-search.vue
index a984232..bf75c6e 100644
--- a/src/components/swichLabel/main2-music-search.vue
+++ b/src/components/swichLabel/main2-music-search.vue
@@ -17,6 +17,7 @@
import box7 from "../mini/box7-search.vue"
import box8 from "../mini/box8-panal.vue"
import boxLeft from "../group/boxLeft.vue"
+
export default {
components: {
box7,
diff --git a/src/components/swichLabel/main3-show.vue b/src/components/swichLabel/main3-show.vue
index 90529f7..d5ba4dd 100644
--- a/src/components/swichLabel/main3-show.vue
+++ b/src/components/swichLabel/main3-show.vue
@@ -3,8 +3,8 @@
<a-row>
<a-col v-bind="colApiMain " class="holdHeight">
<a-page-header title="我的网盘" style="padding: 0px;" @back="() => this.$router.go(-1)" />
- <net-file></net-file>
- <!-- <myVideo></myVideo> -->
+ <!-- <net-file></net-file> -->
+ <myVideo></myVideo>
</a-col>
</a-row>
</div>
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 9e5127e..f39a749 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -18,8 +18,8 @@
export const asyncRouterMap = [{
path: '*',
- // redirect: '/404',
- component: () => import( /* webpackChunkName: "fail" */ '@/views/exception/404'),
+ redirect: '/404',
+ // component: () => import( /* webpackChunkName: "fail" */ '@/views/exception/404'),
hidden: true
},
{
@@ -30,7 +30,7 @@
component: main1,
children: [{
path: '/',
- name: "articleList",
+ name: "home",
component: articleList,
props: true
},
@@ -59,6 +59,10 @@
}, {
path: '/link',
component: boxFriend,
+ },
+ {
+ path: '/404',
+ component: () => import('@/views/exception/404')
}
]
},
@@ -101,8 +105,8 @@
* @type { *[] }
*/
export const constantRouterMap = [{
- path: '/404',
- component: () => import( /* webpackChunkName: "fail" */ '@/views/exception/404')
+ // path: '/404',
+ // component: () => import( /* webpackChunkName: "fail" */ '@/views/exception/404')
}
]
diff --git a/src/config/screenConfig.js b/src/config/screenConfig.js
index 154a58c..e89e446 100644
--- a/src/config/screenConfig.js
+++ b/src/config/screenConfig.js
@@ -1,2 +1,92 @@
-export const screenVo = {
+//main1-home布局设置
+const screenConfig = {
+ colMini: {
+ xs: 1,
+ sm: 1,
+ md: 0,
+ lg: 0,
+ xl: 0,
+ xxl: 0
+ },
+ colApiLeft: {
+ xs: 0,
+ sm: 0,
+ md: {
+ span: 8,
+ },
+ lg: {
+ span: 7,
+ offset: 1,
+ },
+ xl: {
+ span: 5,
+ offset: 2,
+ },
+ xxl: {
+ span: 4,
+ offset: 3,
+ },
+ },
+ colApiRight: {
+ xs: 0,
+ sm: 0,
+ md: 0,
+ lg: 1,
+ xl: 1,
+ xxl: 1,
+ },
+ colApiMain: {
+ xs: 24,
+ sm: {
+ span: 20,
+ offset: 2,
+ },
+ md: {
+ span: 15,
+ offset: 1,
+ },
+ lg: {
+ span: 13,
+ offset: 2,
+ },
+ xl: {
+ span: 13,
+ offset: 2,
+ },
+ xxl: {
+ span: 11,
+ offset: 2,
+ },
+ },
+ // 放大版布局
+ colApiMainScale: {
+ xs: 24,
+ sm: 24,
+ md: {
+ span: 20,
+ offset: 2,
+ },
+ lg: {
+ span: 20,
+ offset: 2,
+ },
+ xl: {
+ span: 17,
+ offset: 4,
+ },
+ xxl: {
+ span: 17,
+ offset: 4,
+ },
+ },
+ // 放大版布局
+ colApiLeftScale: {
+ xs: 0,
+ sm: 0,
+ md: 0,
+ lg: 0,
+ xl: 0,
+ xxl: 0,
+ },
}
+export default screenConfig;
diff --git a/src/main.js b/src/main.js
index 5ef5b2f..910859d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,9 +8,9 @@
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);
-import wow from 'wowjs'
import 'animate.css'
-Vue.prototype.$wow=wow
+// import wow from 'wowjs'
+// Vue.prototype.$wow=wow
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
diff --git a/src/views/exception/404.vue b/src/views/exception/404.vue
index 09e22e9..3dea25d 100644
--- a/src/views/exception/404.vue
+++ b/src/views/exception/404.vue
@@ -1,5 +1,37 @@
<template>
- <div>404</div>
+ <div class="my404">
+ <div class="ele-container">
+ <div class="ele-wrapper">
+ <div class="ele-tail"></div>
+ <div class="ele-body">
+ <div class="ele-head">
+ <div class="ele-eyebrows"></div>
+ <div class="ele-eyes"></div>
+ <div class="ele-mouth"></div>
+ <div class="ele-fang-front"></div>
+ <div class="ele-fang-back"></div>
+ <div class="ele-ear"></div>
+ </div>
+ </div>
+ <div class="ele-leg-1 ele-leg-back">
+ <div class="ele-foot"></div>
+ </div>
+ <div class="ele-leg-2 ele-leg-front">
+ <div class="ele-foot"></div>
+ </div>
+ <div class="ele-leg-3 ele-leg-back">
+ <div class="ele-foot"></div>
+ </div>
+ <div class="ele-leg-4 ele-leg-front">
+ <div class="ele-foot"></div>
+ </div>
+ </div>
+ </div>
+ <div style="text-align: center;">
+ <span>啊噢,404了..</span>
+ <h1>你要找的东西丢失咯..</h1>
+ </div>
+ </div>
</template>
<script>
@@ -9,5 +41,14 @@
</script>
<style scoped>
+ @import '../../assets/404/styles.css';
+ .my404 {
+ margin-top: 30%;
+ min-height: 700px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ }
</style>
--
Gitblit v1.9.1