From 4867a0df2b0db46303e506d030e62203b4e4cb86 Mon Sep 17 00:00:00 2001 From: Xwen <929716663@qq.com> Date: Wed, 27 Dec 2023 22:41:57 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Yi.Bbs.Vue3/index.html | 13 ++- Yi.Bbs.Vue3/src/App.vue | 35 +++---- Yi.Bbs.Vue3/src/assets/loading.css | 128 ++++++++++++++++++++++++++ Yi.Bbs.Vue3/src/assets/loading.scss | 136 ++++++++++++++++++++++++++++ 4 files changed, 292 insertions(+), 20 deletions(-) create mode 100644 Yi.Bbs.Vue3/src/assets/loading.css create mode 100644 Yi.Bbs.Vue3/src/assets/loading.scss diff --git a/Yi.Bbs.Vue3/index.html b/Yi.Bbs.Vue3/index.html index 4d501b99..250ef32a 100644 --- a/Yi.Bbs.Vue3/index.html +++ b/Yi.Bbs.Vue3/index.html @@ -1,13 +1,20 @@ - - - + + 意社区 + +
+
+ + + 意社区很大，你要等一下... +
+
diff --git a/Yi.Bbs.Vue3/src/App.vue b/Yi.Bbs.Vue3/src/App.vue index a4a6f782..d315e780 100644 --- a/Yi.Bbs.Vue3/src/App.vue +++ b/Yi.Bbs.Vue3/src/App.vue @@ -1,28 +1,29 @@ - + - + diff --git a/Yi.Bbs.Vue3/src/assets/loading.css b/Yi.Bbs.Vue3/src/assets/loading.css new file mode 100644 index 00000000..2ef84621 --- /dev/null +++ b/Yi.Bbs.Vue3/src/assets/loading.css @@ -0,0 +1,128 @@ +.loader { + position: fixed; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + width: 130px; + height: 170px; +} + +.loader::before, +.loader::after { + content: ""; + width: 0; + height: 0; + position: absolute; + bottom: 30px; + left: -50%; + z-index: 1; + border-left: 150px solid transparent; + border-right: 150px solid transparent; + border-bottom: 100px solid #1b2a33; +} + +.loader::after { + border-right: 100px solid transparent; + border-bottom: 100px solid #1f3039; +} + +.loader .getting-there { + width: 200%; + text-align: center; + position: absolute; + bottom: 0; + left: -50%; + font-size: 20px; + color: #000; +} + +.loader .binary { + width: 100%; + height: 140px; + display: block; + color: #000; + position: absolute; + top: -40px; + left: 50px; + z-index: 2; + overflow: hidden; +} + +.loader .binary::before, +.loader .binary::after { + font-family: "Lato"; + font-size: 40px; + position: absolute; + top: 0; + left: 0; + opacity: 0; +} + +.loader .binary:nth-child(1)::before { + content: "0"; + animation: a 1.1s linear infinite; +} + +.loader .binary:nth-child(1)::after { + content: "0"; + animation: b 1.3s linear infinite; +} + +.loader .binary:nth-child(2)::before { + content: "1"; + animation: c 0.9s linear infinite; +} + +.loader .binary:nth-child(2)::after { + content: "1"; + animation: d 0.7s linear infinite; +} + +.loader.JS_on::before, +.loader.JS_on::after { + transform: scale(1); +} + +@keyframes a { + 0% { + transform: translate(30px, 0) rotate(30deg); + opacity: 0; + } + 100% { + transform: translate(30px, 150px) rotate(-50deg); + opacity: 1; + } +} + +@keyframes b { + 0% { + transform: translate(50px, 0) rotate(-40deg); + opacity: 0; + } + 100% { + transform: translate(40px, 150px) rotate(80deg); + opacity: 1; + } +} + +@keyframes c { + 0% { + transform: translate(70px, 0) rotate(10deg); + opacity: 0; + } + 100% { + transform: translate(60px, 150px) rotate(70deg); + opacity: 1; + } +} + +@keyframes d { + 0% { + transform: translate(30px, 0) rotate(-50deg); + opacity: 0; + } + 100% { + transform: translate(45px, 150px) rotate(30deg); + opacity: 1; + } +} diff --git a/Yi.Bbs.Vue3/src/assets/loading.scss b/Yi.Bbs.Vue3/src/assets/loading.scss new file mode 100644 index 00000000..61c8d467 --- /dev/null +++ b/Yi.Bbs.Vue3/src/assets/loading.scss @@ -0,0 +1,136 @@ +html, +body { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: #fff; +} + +.loader { + width: 130px; + height: 170px; + position: relative; + + &::before, + &::after { + content: ""; + width: 0; + height: 0; + position: absolute; + bottom: 30px; + left: -50%; + z-index: 1; + border-left: 150px solid transparent; + border-right: 150px solid transparent; + border-bottom: 100px solid darken(#2d4654, 10%); + // transform: scale(0); + // transition: all 0.2s ease; + } + &::after { + border-right: 100px solid transparent; + border-bottom: 100px solid darken(#2d4654, 8%); + } + + .getting-there { + width: 200%; + text-align: center; + position: absolute; + bottom: 0; + left: -50%; + font-size: 20px; + color: #000; + } + + .binary { + width: 100%; + height: 140px; + display: block; + color: #000; + position: absolute; + top: -40px; + left: 50px; + z-index: 2; + overflow: hidden; + + &::before, + &::after { + font-family: "Lato"; + font-size: 40px; + position: absolute; + top: 0; + left: 0; + opacity: 0; + } + + &:nth-child(1) { + &::before { + content: "0"; + animation: a 1.1s linear infinite; + } + &::after { + content: "0"; + animation: b 1.3s linear infinite; + } + } + &:nth-child(2) { + &::before { + content: "1"; + animation: c 0.9s linear infinite; + } + &::after { + content: "1"; + animation: d 0.7s linear infinite; + } + } + } + + // ACTIVATE + &.JS_on { + &::before, + &::after { + transform: scale(1); + } + } +} + +@keyframes a { + 0% { + transform: translate(30px, 0) rotate(30deg); + opacity: 0; + } + 100% { + transform: translate(30px, 150px) rotate(-50deg); + opacity: 1; + } +} +@keyframes b { + 0% { + transform: translate(50px, 0) rotate(-40deg); + opacity: 0; + } + 100% { + transform: translate(40px, 150px) rotate(80deg); + opacity: 1; + } +} +@keyframes c { + 0% { + transform: translate(70px, 0) rotate(10deg); + opacity: 0; + } + 100% { + transform: translate(60px, 150px) rotate(70deg); + opacity: 1; + } +} +@keyframes d { + 0% { + transform: translate(30px, 0) rotate(-50deg); + opacity: 0; + } + 100% { + transform: translate(45px, 150px) rotate(30deg); + opacity: 1; + } +} From 803b49083e5379e3c681f483607ba98b48e69d4e Mon Sep 17 00:00:00 2001 From: Xwen <929716663@qq.com> Date: Wed, 27 Dec 2023 23:55:59 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E6=82=AC=E6=B5=AE?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/UserInfoCard/index.vue | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue diff --git a/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue b/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue new file mode 100644 index 00000000..acf1733c --- /dev/null +++ b/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue @@ -0,0 +1,52 @@ + + + + +