inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <template>
I 2   <div class="exception">
3     <div class="imgBlock">
4       <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}">
5       </div>
6     </div>
7     <div class="content">
8       <h1>{{ config[type].title }}</h1>
9       <div class="desc">{{ config[type].desc }}</div>
10       <div class="actions">
11         <a-button type="primary" @click="handleToHome">返回首页</a-button>
12       </div>
13     </div>
14   </div>
15 </template>
16
17 <script>
18 import types from './type'
19
20 export default {
21   name: 'Exception',
22   props: {
23     type: {
24       type: String,
25       default: '404'
26     }
27   },
28   data () {
29     return {
30       config: types
31     }
32   },
33   methods: {
34     handleToHome () {
35       this.$router.push({ name: 'Console' })
36     }
37   }
38 }
39 </script>
40 <style lang="less">
41 @import "~ant-design-vue/lib/style/index";
42
43 .exception {
44   display: flex;
45   align-items: center;
46   height: 80%;
47   min-height: 500px;
48
49   .imgBlock {
50     flex: 0 0 62.5%;
51     width: 62.5%;
52     padding-right: 152px;
53     zoom: 1;
54     &::before,
55     &::after {
56       content: ' ';
57       display: table;
58     }
59     &::after {
60       clear: both;
61       height: 0;
62       font-size: 0;
63       visibility: hidden;
64     }
65   }
66
67   .imgEle {
68     float: right;
69     width: 100%;
70     max-width: 430px;
71     height: 360px;
72     background-repeat: no-repeat;
73     background-position: 50% 50%;
74     background-size: contain;
75   }
76
77   .content {
78     flex: auto;
79
80     h1 {
81       margin-bottom: 24px;
82       color: #434e59;
83       font-weight: 600;
84       font-size: 72px;
85       line-height: 72px;
86     }
87
88     .desc {
89       margin-bottom: 16px;
90       color: @text-color-secondary;
91       font-size: 20px;
92       line-height: 28px;
93     }
94
95     .actions {
96       button:not(:last-child) {
97         margin-right: 8px;
98       }
99     }
100   }
101 }
102
103 @media screen and (max-width: @screen-xl) {
104   .exception {
105     .imgBlock {
106       padding-right: 88px;
107     }
108   }
109 }
110
111 @media screen and (max-width: @screen-sm) {
112   .exception {
113     display: block;
114     text-align: center;
115     .imgBlock {
116       margin: 0 auto 24px;
117       padding-right: 0;
118     }
119   }
120 }
121
122 @media screen and (max-width: @screen-xs) {
123   .exception {
124     .imgBlock {
125       margin-bottom: -24px;
126       overflow: hidden;
127     }
128   }
129 }
130 </style>