cnlive_project / cnlive-community-web-vue · Commits

Commit 7b23d907b87d5a841ac052386840b2621fa27d8e

Authored by 杨泽宇
1 parent 7207ee0b

404页，IE拦截页

Inline Side-by-side
Showing 9 changed files with 291 additions and 11 deletions
README.md
  View file @7b23d90
... ... @@ -63,6 +63,7 @@ cnlive-community-web-vue 中国网+智慧社区平台
63 63 * .env.staging 线上部署测试环境配置
64 64 * .gitignore 不上传git的文件配置
65 65 * index.html 入口html
  66 +* ie.html IE浏览器拦截提示页面
66 67 * package-lock.json 资源包
67 68 * package.json 资源包
68 69 * README.md 项目说明
... ...
ie.html 0 → 100644
  View file @7b23d90
  1 +<!DOCTYPE html>
  2 +<html>
  3 +
  4 +<head>
  5 + <meta charset="utf-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  8 + <link rel="icon" href="cnlive.ico">
  9 + <title>中国网+智慧社区平台</title>
  10 + <script type="text/javascript">
  11 + // TIP chrome 71 以下不支持globalThis
  12 + globalThis = window
  13 + </script>
  14 + <style>
  15 + .version-page {
  16 + text-align: center;
  17 + }
  18 +
  19 + .b-container {
  20 + width: 60%;
  21 + margin: 0 auto;
  22 + margin-top: 200px;
  23 + }
  24 + </style>
  25 +</head>
  26 +
  27 +<body>
  28 + <div class="version-page">
  29 + <div class="b-container">
  30 + <h2>为了您的数据安全，请使用chrome内核的浏览器阅览本站内容。</h2>
  31 + <h3>推荐浏览器：</h3>
  32 + <div style="margin: 10px 0;"><a href="https://www.google.cn/chrome/" target="_blank">Chrome 谷歌浏览器</a></div>
  33 + <div style="margin: 10px 0;"><a href="http://www.firefox.com.cn/" target="_blank">FireFox 火狐浏览器</a></div>
  34 + <div style="margin: 10px 0;"><a href="http://browser.360.cn/" target="_blank">360浏览器【极速】模式</a></div>
  35 + <h5 style="color: red;">请避免使用360浏览器【兼容】模式</h5>
  36 + </div>
  37 + </div>
  38 + <noscript>
  39 + <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it
  40 + to continue.</strong>
  41 + </noscript>
  42 + <!-- built files will be auto injected -->
  43 +</body>
  44 +
  45 +</html>
0 46 \ No newline at end of file
... ...
index.html
  View file @7b23d90
... ... @@ -2,8 +2,9 @@
2 2 <html lang="en">
3 3 <head>
4 4 <meta charset="UTF-8" />
5   - <link rel="icon" href="/favicon.ico" />
6   - <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 + <link rel="icon" href="/cnlive.ico" />
  7 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 8 <title></title>
8 9 <script type="text/javascript">
9 10 // chrome 71 以下不支持globalThis
... ... @@ -11,6 +12,15 @@
11 12 </script>
12 13 </head>
13 14 <body>
  15 + <script>
  16 + // TIP 拦截IE浏览器
  17 + var UA = window.navigator.userAgent
  18 + var msie = UA.indexOf("MSIE")
  19 + if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
  20 + alert("为了您的数据安全，请使用Chrome内核浏览器阅览本站内容！")
  21 + location.href = 'ie.html'
  22 + }
  23 + </script>
14 24 <div id="app"></div>
15 25 <script type="module" src="/src/main.ts"></script>
16 26 </body>
... ...
public/cnlive.ico 0 → 100644
View file @7b23d90
No preview for this file type
public/favicon.ico deleted 100644 → 0
View file @7207ee0
No preview for this file type
src/assets/404_images/404.png 0 → 100644
View file @7b23d90

95.8 KB
src/assets/404_images/404_cloud.png 0 → 100644
View file @7b23d90

4.65 KB
src/views/error/404.vue
  View file @7b23d90
1 1 <script setup lang="ts">
  2 +/**
  3 + * 404页面
  4 + * @module 404
  5 + * @author Tengxi
  6 + */
2 7 </script>
3 8  
4 9 <template>
5   - <p>404 404 404 404 404</p>
6   - <p>404 404 404 404 404</p>
7   - <p>404 404 404 404 404</p>
8   - <p>404 404 404 404 404</p>
9   - <p>404 404 404 404 404</p>
10   - <p>404 404 404 404 404</p>
11   - <p>404 404 404 404 404</p>
12   - <p>404 404 404 404 404</p>
  10 + <div class="wscn-http404-container">
  11 + <div class="wscn-http404">
  12 + <div class="pic-404">
  13 + <img
  14 + class="pic-404__parent"
  15 + src="./../../assets/404_images/404.png"
  16 + alt="404"
  17 + >
  18 + <img
  19 + class="pic-404__child left"
  20 + src="./../../assets/404_images/404_cloud.png"
  21 + alt="404"
  22 + >
  23 + <img
  24 + class="pic-404__child mid"
  25 + src="./../../assets/404_images/404_cloud.png"
  26 + alt="404"
  27 + >
  28 + <img
  29 + class="pic-404__child right"
  30 + src="./../../assets/404_images/404_cloud.png"
  31 + alt="404"
  32 + >
  33 + </div>
  34 + <div class="bullshit">
  35 + <div class="bullshit__oops">糟糕!</div>
  36 + <div class="bullshit__headline">您输入的网址有误或者链接已经过期。</div>
  37 + <div class="bullshit__info">请检查您的url输入是否正确，或者点击下方按钮回到首页。</div>
  38 + <a href class="bullshit__return-home">回到首页</a>
  39 + </div>
  40 + </div>
  41 + </div>
13 42 </template>
  43 +<style scoped lang="scss">
  44 +.wscn-http404-container {
  45 + transform: translate(-50%, -50%);
  46 + position: absolute;
  47 + top: 40%;
  48 + left: 50%;
  49 +}
  50 +.wscn-http404 {
  51 + position: relative;
  52 + width: 1200px;
  53 + padding: 0 50px;
  54 + overflow: hidden;
  55 + .pic-404 {
  56 + position: relative;
  57 + float: left;
  58 + width: 600px;
  59 + overflow: hidden;
  60 + &__parent {
  61 + width: 100%;
  62 + }
  63 + &__child {
  64 + position: absolute;
  65 + &.left {
  66 + width: 80px;
  67 + top: 17px;
  68 + left: 220px;
  69 + opacity: 0;
  70 + animation-name: cloudLeft;
  71 + animation-duration: 2s;
  72 + animation-timing-function: linear;
  73 + animation-fill-mode: forwards;
  74 + animation-delay: 1s;
  75 + }
  76 + &.mid {
  77 + width: 46px;
  78 + top: 10px;
  79 + left: 420px;
  80 + opacity: 0;
  81 + animation-name: cloudMid;
  82 + animation-duration: 2s;
  83 + animation-timing-function: linear;
  84 + animation-fill-mode: forwards;
  85 + animation-delay: 1.2s;
  86 + }
  87 + &.right {
  88 + width: 62px;
  89 + top: 100px;
  90 + left: 500px;
  91 + opacity: 0;
  92 + animation-name: cloudRight;
  93 + animation-duration: 2s;
  94 + animation-timing-function: linear;
  95 + animation-fill-mode: forwards;
  96 + animation-delay: 1s;
  97 + }
  98 + @keyframes cloudLeft {
  99 + 0% {
  100 + top: 17px;
  101 + left: 220px;
  102 + opacity: 0;
  103 + }
  104 + 20% {
  105 + top: 33px;
  106 + left: 188px;
  107 + opacity: 1;
  108 + }
  109 + 80% {
  110 + top: 81px;
  111 + left: 92px;
  112 + opacity: 1;
  113 + }
  114 + 100% {
  115 + top: 97px;
  116 + left: 60px;
  117 + opacity: 0;
  118 + }
  119 + }
  120 + @keyframes cloudMid {
  121 + 0% {
  122 + top: 10px;
  123 + left: 420px;
  124 + opacity: 0;
  125 + }
  126 + 20% {
  127 + top: 40px;
  128 + left: 360px;
  129 + opacity: 1;
  130 + }
  131 + 70% {
  132 + top: 130px;
  133 + left: 180px;
  134 + opacity: 1;
  135 + }
  136 + 100% {
  137 + top: 160px;
  138 + left: 120px;
  139 + opacity: 0;
  140 + }
  141 + }
  142 + @keyframes cloudRight {
  143 + 0% {
  144 + top: 100px;
  145 + left: 500px;
  146 + opacity: 0;
  147 + }
  148 + 20% {
  149 + top: 120px;
  150 + left: 460px;
  151 + opacity: 1;
  152 + }
  153 + 80% {
  154 + top: 180px;
  155 + left: 340px;
  156 + opacity: 1;
  157 + }
  158 + 100% {
  159 + top: 200px;
  160 + left: 300px;
  161 + opacity: 0;
  162 + }
  163 + }
  164 + }
  165 + }
  166 + .bullshit {
  167 + position: relative;
  168 + float: left;
  169 + width: 300px;
  170 + padding: 30px 0;
  171 + text-align: left;
  172 + overflow: hidden;
  173 + &__oops {
  174 + font-size: 32px;
  175 + font-weight: bold;
  176 + line-height: 40px;
  177 + color: #1482f0;
  178 + opacity: 0;
  179 + margin-bottom: 20px;
  180 + animation-name: slideUp;
  181 + animation-duration: 0.5s;
  182 + animation-fill-mode: forwards;
  183 + }
  184 + &__headline {
  185 + font-size: 20px;
  186 + line-height: 24px;
  187 + color: #222;
  188 + font-weight: bold;
  189 + opacity: 0;
  190 + margin-bottom: 10px;
  191 + animation-name: slideUp;
  192 + animation-duration: 0.5s;
  193 + animation-delay: 0.1s;
  194 + animation-fill-mode: forwards;
  195 + }
  196 + &__info {
  197 + font-size: 13px;
  198 + line-height: 21px;
  199 + color: grey;
  200 + opacity: 0;
  201 + margin-bottom: 30px;
  202 + animation-name: slideUp;
  203 + animation-duration: 0.5s;
  204 + animation-delay: 0.2s;
  205 + animation-fill-mode: forwards;
  206 + }
  207 + &__return-home {
  208 + display: block;
  209 + float: left;
  210 + width: 110px;
  211 + height: 36px;
  212 + background: #1482f0;
  213 + border-radius: 100px;
  214 + text-align: center;
  215 + color: #ffffff;
  216 + opacity: 0;
  217 + font-size: 14px;
  218 + line-height: 36px;
  219 + cursor: pointer;
  220 + animation-name: slideUp;
  221 + animation-duration: 0.5s;
  222 + animation-delay: 0.3s;
  223 + animation-fill-mode: forwards;
  224 + }
  225 + @keyframes slideUp {
  226 + 0% {
  227 + transform: translateY(60px);
  228 + opacity: 0;
  229 + }
  230 + 100% {
  231 + transform: translateY(0);
  232 + opacity: 1;
  233 + }
  234 + }
  235 + }
  236 +}
  237 +</style>
... ...
vite.config.ts
  View file @7b23d90
... ... @@ -21,7 +21,7 @@ export default ({command, mode}) =&gt; {
21 21 resolve: {
22 22 alias: {
23 23 '@': resolve('./src')
24   - }
  24 + },
25 25 },
26 26 define: {
27 27 'process.env': {}
... ...