春风项目四线（CVT线）
查看 | 历史 | 提交 | 提交对比
yyt
2024-06-26 572f63fab7f868f3fc5037c4dc7c46e397511597
提交 | 用户 | 时间
0cceb6 1 <template>
Y 2   <div class="wscn-http404-container">
3     <div class="wscn-http404">
4       <div class="pic-404">
5         <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
6         <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
7         <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
8         <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
9       </div>
10       <div class="bullshit">
11         <div class="bullshit__oops">
12           404错误!
13         </div>
14         <div class="bullshit__headline">
15           {{ message }}
16         </div>
17         <div class="bullshit__info">
18           对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
19         </div>
20         <router-link to="/" class="bullshit__return-home">
21           返回首页
22         </router-link>
23       </div>
24     </div>
25   </div>
26 </template>
27
28 <script>
29
30 export default {
31   name: 'Page404',
32   computed: {
33     message() {
34       return '找不到网页！'
35     }
36   }
37 }
38 </script>
39
40 <style lang="scss" scoped>
41 .wscn-http404-container{
42   transform: translate(-50%,-50%);
43   position: absolute;
44   top: 40%;
45   left: 50%;
46 }
47 .wscn-http404 {
48   position: relative;
49   width: 1200px;
50   padding: 0 50px;
51   overflow: hidden;
52   .pic-404 {
53     position: relative;
54     float: left;
55     width: 600px;
56     overflow: hidden;
57     &__parent {
58       width: 100%;
59     }
60     &__child {
61       position: absolute;
62       &.left {
63         width: 80px;
64         top: 17px;
65         left: 220px;
66         opacity: 0;
67         animation-name: cloudLeft;
68         animation-duration: 2s;
69         animation-timing-function: linear;
70         animation-fill-mode: forwards;
71         animation-delay: 1s;
72       }
73       &.mid {
74         width: 46px;
75         top: 10px;
76         left: 420px;
77         opacity: 0;
78         animation-name: cloudMid;
79         animation-duration: 2s;
80         animation-timing-function: linear;
81         animation-fill-mode: forwards;
82         animation-delay: 1.2s;
83       }
84       &.right {
85         width: 62px;
86         top: 100px;
87         left: 500px;
88         opacity: 0;
89         animation-name: cloudRight;
90         animation-duration: 2s;
91         animation-timing-function: linear;
92         animation-fill-mode: forwards;
93         animation-delay: 1s;
94       }
95       @keyframes cloudLeft {
96         0% {
97           top: 17px;
98           left: 220px;
99           opacity: 0;
100         }
101         20% {
102           top: 33px;
103           left: 188px;
104           opacity: 1;
105         }
106         80% {
107           top: 81px;
108           left: 92px;
109           opacity: 1;
110         }
111         100% {
112           top: 97px;
113           left: 60px;
114           opacity: 0;
115         }
116       }
117       @keyframes cloudMid {
118         0% {
119           top: 10px;
120           left: 420px;
121           opacity: 0;
122         }
123         20% {
124           top: 40px;
125           left: 360px;
126           opacity: 1;
127         }
128         70% {
129           top: 130px;
130           left: 180px;
131           opacity: 1;
132         }
133         100% {
134           top: 160px;
135           left: 120px;
136           opacity: 0;
137         }
138       }
139       @keyframes cloudRight {
140         0% {
141           top: 100px;
142           left: 500px;
143           opacity: 0;
144         }
145         20% {
146           top: 120px;
147           left: 460px;
148           opacity: 1;
149         }
150         80% {
151           top: 180px;
152           left: 340px;
153           opacity: 1;
154         }
155         100% {
156           top: 200px;
157           left: 300px;
158           opacity: 0;
159         }
160       }
161     }
162   }
163   .bullshit {
164     position: relative;
165     float: left;
166     width: 300px;
167     padding: 30px 0;
168     overflow: hidden;
169     &__oops {
170       font-size: 32px;
171       font-weight: bold;
172       line-height: 40px;
173       color: #1482f0;
174       opacity: 0;
175       margin-bottom: 20px;
176       animation-name: slideUp;
177       animation-duration: 0.5s;
178       animation-fill-mode: forwards;
179     }
180     &__headline {
181       font-size: 20px;
182       line-height: 24px;
183       color: #222;
184       font-weight: bold;
185       opacity: 0;
186       margin-bottom: 10px;
187       animation-name: slideUp;
188       animation-duration: 0.5s;
189       animation-delay: 0.1s;
190       animation-fill-mode: forwards;
191     }
192     &__info {
193       font-size: 13px;
194       line-height: 21px;
195       color: grey;
196       opacity: 0;
197       margin-bottom: 30px;
198       animation-name: slideUp;
199       animation-duration: 0.5s;
200       animation-delay: 0.2s;
201       animation-fill-mode: forwards;
202     }
203     &__return-home {
204       display: block;
205       float: left;
206       width: 110px;
207       height: 36px;
208       background: #1482f0;
209       border-radius: 100px;
210       text-align: center;
211       color: #ffffff;
212       opacity: 0;
213       font-size: 14px;
214       line-height: 36px;
215       cursor: pointer;
216       animation-name: slideUp;
217       animation-duration: 0.5s;
218       animation-delay: 0.3s;
219       animation-fill-mode: forwards;
220     }
221     @keyframes slideUp {
222       0% {
223         transform: translateY(60px);
224         opacity: 0;
225       }
226       100% {
227         transform: translateY(0);
228         opacity: 1;
229       }
230     }
231   }
232 }
233 </style>