Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
0fd88fee by 任超
Options

style:样式

1 parent 895db48e
Inline Side-by-side
Showing 5 changed files with 33 additions and 23 deletions
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 <script> 20 <script>
21 import defaultSettings from '@/settings' 21 import defaultSettings from '@/settings'
22 const { title } = defaultSettings 22 const { title } = defaultSettings
23 import logonImg from '@/assets/global_images/logo.png' 23 import logonImg from '@/assets/logo.png'
24 export default { 24 export default {
25 name: 'SidebarLogo', 25 name: 'SidebarLogo',
26 props: { 26 props: {
......
1 <template> 1 <template>
2 <div class="wscn-http404-container"> 2 <div class="wscn-http404-container">
3 <div class="wscn-http404"> 3 404
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">OOPS!</div>
12 <div class="bullshit__info">All rights reserved
13 <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
14 </div>
15 <div class="bullshit__headline">{{ message }}</div>
16 <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
17 <a @click='nextTo' class="bullshit__return-home">回到主页</a>
18 </div>
19 </div>
20 </div> 4 </div>
21 </template> 5 </template>
22 6
...@@ -25,12 +9,12 @@ ...@@ -25,12 +9,12 @@
25 export default { 9 export default {
26 name: 'Page404', 10 name: 'Page404',
27 computed: { 11 computed: {
28 message() { 12 message () {
29 return 'The webmaster said that you can not enter this page...' 13 return 'The webmaster said that you can not enter this page...'
30 } 14 }
31 }, 15 },
32 methods:{ 16 methods: {
33 nextTo(){ 17 nextTo () {
34 this.$router.push({ 18 this.$router.push({
35 path: this.redirect || '/', 19 path: this.redirect || '/',
36 query: this.otherQuery 20 query: this.otherQuery
...@@ -41,27 +25,32 @@ export default { ...@@ -41,27 +25,32 @@ export default {
41 </script> 25 </script>
42 26
43 <style lang="scss" scoped> 27 <style lang="scss" scoped>
44 .wscn-http404-container{ 28 .wscn-http404-container {
45 transform: translate(-50%,-50%); 29 transform: translate(-50%, -50%);
46 position: absolute; 30 position: absolute;
47 top: 40%; 31 top: 40%;
48 left: 50%; 32 left: 50%;
49 } 33 }
34
50 .wscn-http404 { 35 .wscn-http404 {
51 position: relative; 36 position: relative;
52 width: 1200px; 37 width: 1200px;
53 padding: 0 50px; 38 padding: 0 50px;
54 overflow: hidden; 39 overflow: hidden;
40
55 .pic-404 { 41 .pic-404 {
56 position: relative; 42 position: relative;
57 float: left; 43 float: left;
58 width: 600px; 44 width: 600px;
59 overflow: hidden; 45 overflow: hidden;
46
60 &__parent { 47 &__parent {
61 width: 100%; 48 width: 100%;
62 } 49 }
50
63 &__child { 51 &__child {
64 position: absolute; 52 position: absolute;
53
65 &.left { 54 &.left {
66 width: 80px; 55 width: 80px;
67 top: 17px; 56 top: 17px;
...@@ -73,6 +62,7 @@ export default { ...@@ -73,6 +62,7 @@ export default {
73 animation-fill-mode: forwards; 62 animation-fill-mode: forwards;
74 animation-delay: 1s; 63 animation-delay: 1s;
75 } 64 }
65
76 &.mid { 66 &.mid {
77 width: 46px; 67 width: 46px;
78 top: 10px; 68 top: 10px;
...@@ -84,6 +74,7 @@ export default { ...@@ -84,6 +74,7 @@ export default {
84 animation-fill-mode: forwards; 74 animation-fill-mode: forwards;
85 animation-delay: 1.2s; 75 animation-delay: 1.2s;
86 } 76 }
77
87 &.right { 78 &.right {
88 width: 62px; 79 width: 62px;
89 top: 100px; 80 top: 100px;
...@@ -95,66 +86,78 @@ export default { ...@@ -95,66 +86,78 @@ export default {
95 animation-fill-mode: forwards; 86 animation-fill-mode: forwards;
96 animation-delay: 1s; 87 animation-delay: 1s;
97 } 88 }
89
98 @keyframes cloudLeft { 90 @keyframes cloudLeft {
99 0% { 91 0% {
100 top: 17px; 92 top: 17px;
101 left: 220px; 93 left: 220px;
102 opacity: 0; 94 opacity: 0;
103 } 95 }
96
104 20% { 97 20% {
105 top: 33px; 98 top: 33px;
106 left: 188px; 99 left: 188px;
107 opacity: 1; 100 opacity: 1;
108 } 101 }
102
109 80% { 103 80% {
110 top: 81px; 104 top: 81px;
111 left: 92px; 105 left: 92px;
112 opacity: 1; 106 opacity: 1;
113 } 107 }
108
114 100% { 109 100% {
115 top: 97px; 110 top: 97px;
116 left: 60px; 111 left: 60px;
117 opacity: 0; 112 opacity: 0;
118 } 113 }
119 } 114 }
115
120 @keyframes cloudMid { 116 @keyframes cloudMid {
121 0% { 117 0% {
122 top: 10px; 118 top: 10px;
123 left: 420px; 119 left: 420px;
124 opacity: 0; 120 opacity: 0;
125 } 121 }
122
126 20% { 123 20% {
127 top: 40px; 124 top: 40px;
128 left: 360px; 125 left: 360px;
129 opacity: 1; 126 opacity: 1;
130 } 127 }
128
131 70% { 129 70% {
132 top: 130px; 130 top: 130px;
133 left: 180px; 131 left: 180px;
134 opacity: 1; 132 opacity: 1;
135 } 133 }
134
136 100% { 135 100% {
137 top: 160px; 136 top: 160px;
138 left: 120px; 137 left: 120px;
139 opacity: 0; 138 opacity: 0;
140 } 139 }
141 } 140 }
141
142 @keyframes cloudRight { 142 @keyframes cloudRight {
143 0% { 143 0% {
144 top: 100px; 144 top: 100px;
145 left: 500px; 145 left: 500px;
146 opacity: 0; 146 opacity: 0;
147 } 147 }
148
148 20% { 149 20% {
149 top: 120px; 150 top: 120px;
150 left: 460px; 151 left: 460px;
151 opacity: 1; 152 opacity: 1;
152 } 153 }
154
153 80% { 155 80% {
154 top: 180px; 156 top: 180px;
155 left: 340px; 157 left: 340px;
156 opacity: 1; 158 opacity: 1;
157 } 159 }
160
158 100% { 161 100% {
159 top: 200px; 162 top: 200px;
160 left: 300px; 163 left: 300px;
...@@ -163,12 +166,14 @@ export default { ...@@ -163,12 +166,14 @@ export default {
163 } 166 }
164 } 167 }
165 } 168 }
169
166 .bullshit { 170 .bullshit {
167 position: relative; 171 position: relative;
168 float: left; 172 float: left;
169 width: 300px; 173 width: 300px;
170 padding: 30px 0; 174 padding: 30px 0;
171 overflow: hidden; 175 overflow: hidden;
176
172 &__oops { 177 &__oops {
173 font-size: 32px; 178 font-size: 32px;
174 font-weight: bold; 179 font-weight: bold;
...@@ -180,6 +185,7 @@ export default { ...@@ -180,6 +185,7 @@ export default {
180 animation-duration: 0.5s; 185 animation-duration: 0.5s;
181 animation-fill-mode: forwards; 186 animation-fill-mode: forwards;
182 } 187 }
188
183 &__headline { 189 &__headline {
184 font-size: 20px; 190 font-size: 20px;
185 line-height: 24px; 191 line-height: 24px;
...@@ -192,6 +198,7 @@ export default { ...@@ -192,6 +198,7 @@ export default {
192 animation-delay: 0.1s; 198 animation-delay: 0.1s;
193 animation-fill-mode: forwards; 199 animation-fill-mode: forwards;
194 } 200 }
201
195 &__info { 202 &__info {
196 font-size: 13px; 203 font-size: 13px;
197 line-height: 21px; 204 line-height: 21px;
...@@ -203,6 +210,7 @@ export default { ...@@ -203,6 +210,7 @@ export default {
203 animation-delay: 0.2s; 210 animation-delay: 0.2s;
204 animation-fill-mode: forwards; 211 animation-fill-mode: forwards;
205 } 212 }
213
206 &__return-home { 214 &__return-home {
207 display: block; 215 display: block;
208 float: left; 216 float: left;
...@@ -221,11 +229,13 @@ export default { ...@@ -221,11 +229,13 @@ export default {
221 animation-delay: 0.3s; 229 animation-delay: 0.3s;
222 animation-fill-mode: forwards; 230 animation-fill-mode: forwards;
223 } 231 }
232
224 @keyframes slideUp { 233 @keyframes slideUp {
225 0% { 234 0% {
226 transform: translateY(60px); 235 transform: translateY(60px);
227 opacity: 0; 236 opacity: 0;
228 } 237 }
238
229 100% { 239 100% {
230 transform: translateY(0); 240 transform: translateY(0);
231 opacity: 1; 241 opacity: 1;
......