404页，IE拦截页

杨泽宇
1 parent 7207ee0b
Showing 9 changed files with 291 additions and 11 deletions
README.md
ie.html
index.html
public/cnlive.ico
public/favicon.ico
src/assets/404_images/404.png
src/assets/404_images/404_cloud.png
src/views/error/404.vue
vite.config.ts
@@ -63,6 +63,7 @@ cnlive-community-web-vue 中国网+智慧社区平台
 * .env.staging 线上部署测试环境配置
 * .gitignore 不上传git的文件配置
 * index.html 入口html 
+* ie.html IE浏览器拦截提示页面
 * package-lock.json 资源包
 * package.json 资源包
 * README.md 项目说明
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="icon" href="cnlive.ico">
+  <title>中国网+智慧社区平台</title>
+  <script type="text/javascript">
+    // TIP chrome 71 以下不支持globalThis
+    globalThis = window
+  </script>
+  <style>
+    .version-page {
+      text-align: center;
+    }
+
+    .b-container {
+      width: 60%;
+      margin: 0 auto;
+      margin-top: 200px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="version-page">
+    <div class="b-container">
+      <h2>为了您的数据安全，请使用chrome内核的浏览器阅览本站内容。</h2>
+      <h3>推荐浏览器：</h3>
+      <div style="margin: 10px 0;"><a href="https://www.google.cn/chrome/" target="_blank">Chrome 谷歌浏览器</a></div>
+      <div style="margin: 10px 0;"><a href="http://www.firefox.com.cn/" target="_blank">FireFox 火狐浏览器</a></div>
+      <div style="margin: 10px 0;"><a href="http://browser.360.cn/" target="_blank">360浏览器【极速】模式</a></div>
+      <h5 style="color: red;">请避免使用360浏览器【兼容】模式</h5>
+    </div>
+  </div>
+  <noscript>
+    <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it
+        to continue.</strong>
+  </noscript>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
 \ No newline at end of file
@@ -2,8 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <link rel="icon" href="/cnlive.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title></title>
     <script type="text/javascript">
       // chrome 71 以下不支持globalThis
@@ -11,6 +12,15 @@
     </script>
   </head>
   <body>
+    <script>
+      // TIP 拦截IE浏览器
+      var UA = window.navigator.userAgent
+      var msie = UA.indexOf("MSIE")
+      if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
+        alert("为了您的数据安全，请使用Chrome内核浏览器阅览本站内容！")
+        location.href = 'ie.html'
+      }
+    </script>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 <script setup lang="ts">
+/**
+ * 404页面
+ * @module 404
+ * @author Tengxi
+ */
 </script>
 <template>
-  <p>404 404 404 404 404</p>
-  <p>404 404 404 404 404</p>
-  <p>404 404 404 404 404</p>
-  <p>404 404 404 404 404</p>
-  <p>404 404 404 404 404</p>
-  <p>404 404 404 404 404</p>
-  <p>404 404 404 404 404</p>
-  <p>404 404 404 404 404</p>
+  <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"
+        >
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">糟糕!</div>
+        <div class="bullshit__headline">您输入的网址有误或者链接已经过期。</div>
+        <div class="bullshit__info">请检查您的url输入是否正确，或者点击下方按钮回到首页。</div>
+        <a href class="bullshit__return-home">回到首页</a>
+      </div>
+    </div>
+  </div>
 </template>
+<style scoped lang="scss">
+.wscn-http404-container {
+  transform: translate(-50%, -50%);
+  position: absolute;
+  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;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        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;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    text-align: left;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
@@ -21,7 +21,7 @@ export default ({command, mode}) =&gt; {
     resolve: {
       alias: {
         '@': resolve('./src')
-      }
+      },
     },
     define: {
       'process.env': {}