404页面优化,页面响应式变化适配

 src/assets/404/styles.css

New file
@@ -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;
  }
}

 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>

 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

 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;

 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>


 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>

 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=&quot;/img/404.jpg&quot;" :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=&quot;/img/404.jpg&quot;" :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 - ..."
            }
        }
    }

 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;

 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">

 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>

 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;

 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,

 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>

 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')
    }

]

 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;

 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)

 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>