fix: 生产打包编译报错问题修复

Former-commit-id: 3998de871def78ea6f61b3ecd368411d50a2c6f9

src/views/error-page/404.vue

@@ -1,38 +1,32 @@
+<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
+<script lang="ts">
+export default {
+  name: 'Page404',
+};
+</script>
+
+<script setup lang="ts">
+
+function message() {
+  return 'The webmaster said that you can not enter this page...';
+}
+</script>
+
+
 <template>
   <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
-        <img
-          class="pic-404__parent"
-          src="@/assets/404_images/404.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child left"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child mid"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child right"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404" />
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404" />
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
         <div class="bullshit__info">
           All rights reserved
-          <a
-            style="color: #20a0ff"
-            href="https://wallstreetcn.com"
-            target="_blank"
-            >wallstreetcn</a
-          >
+          <a style="color: #20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
         </div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">
@@ -45,17 +39,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Page404',
-  computed: {
-    message() {
-      return 'The webmaster said that you can not enter this page...';
-    }
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .wscn-http404-container {
   transform: translate(-50%, -50%);
@@ -63,21 +46,26 @@ export default {
   top: 40%;
   left: 50%;
 }
+
 .wscn-http404 {
   position: relative;
   width: 1200px;
   padding: 0 50px;
   overflow: hidden;
+
   .pic-404 {
     position: relative;
     float: left;
     width: 600px;
     overflow: hidden;
+
     &__parent {
       width: 100%;
     }
+
     &__child {
       position: absolute;
+
       &.left {
         width: 80px;
         top: 17px;
@@ -89,6 +77,7 @@ export default {
         animation-fill-mode: forwards;
         animation-delay: 1s;
       }
+
       &.mid {
         width: 46px;
         top: 10px;
@@ -100,6 +89,7 @@ export default {
         animation-fill-mode: forwards;
         animation-delay: 1.2s;
       }
+
       &.right {
         width: 62px;
         top: 100px;
@@ -111,66 +101,78 @@ export default {
         animation-fill-mode: forwards;
         animation-delay: 1s;
       }
+
       @keyframes cloudLeft {
         0% {
           top: 17px;
           left: 220px;
           opacity: 0;
         }
+
         20% {
           top: 33px;
           left: 188px;
           opacity: 1;
         }
+
         80% {
           top: 81px;
           left: 92px;
           opacity: 1;
         }
+
         100% {
           top: 97px;
           left: 60px;
           opacity: 0;
         }
       }
+
       @keyframes cloudMid {
         0% {
           top: 10px;
           left: 420px;
           opacity: 0;
         }
+
         20% {
           top: 40px;
           left: 360px;
           opacity: 1;
         }
+
         70% {
           top: 130px;
           left: 180px;
           opacity: 1;
         }
+
         100% {
           top: 160px;
           left: 120px;
           opacity: 0;
         }
       }
+
       @keyframes cloudRight {
         0% {
           top: 100px;
           left: 500px;
           opacity: 0;
         }
+
         20% {
           top: 120px;
           left: 460px;
           opacity: 1;
         }
+
         80% {
           top: 180px;
           left: 340px;
           opacity: 1;
         }
+
         100% {
           top: 200px;
           left: 300px;
@@ -179,12 +181,14 @@ export default {
       }
     }
   }
+
   .bullshit {
     position: relative;
     float: left;
     width: 300px;
     padding: 30px 0;
     overflow: hidden;
+
     &__oops {
       font-size: 32px;
       font-weight: bold;
@@ -196,6 +200,7 @@ export default {
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
     }
+
     &__headline {
       font-size: 20px;
       line-height: 24px;
@@ -208,6 +213,7 @@ export default {
       animation-delay: 0.1s;
       animation-fill-mode: forwards;
     }
+
     &__info {
       font-size: 13px;
       line-height: 21px;
@@ -219,6 +225,7 @@ export default {
       animation-delay: 0.2s;
       animation-fill-mode: forwards;
     }
+
     &__return-home {
       display: block;
       float: left;
@@ -237,11 +244,13 @@ export default {
       animation-delay: 0.3s;
       animation-fill-mode: forwards;
     }
+
     @keyframes slideUp {
       0% {
         transform: translateY(60px);
         opacity: 0;
       }
+
       100% {
         transform: translateY(0);
         opacity: 1;