| commit | author | age | ||
| d3f921 | 1 | <template> |
| d629d9 | 2 | <div id="components-layout-basic"> |
| d3f921 | 3 | <a-layout> |
| d629d9 | 4 | <a-layout-header :style="{ position: 'fixed', zIndex: 999, width: '100%' }"> |
| L | 5 | <tag-Header></tag-Header> |
| ad2b70 | 6 | </a-layout-header> |
| d3f921 | 7 | <a-layout> |
| ad2b70 | 8 | <router-view class="fade"></router-view> |
| d3f921 | 9 | </a-layout> |
| ad2b70 | 10 | <a-layout-footer> |
| L | 11 | <div> |
| 12 | <p>备案号: | |
| 13 | <a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备19000592号-1</a> | |
| 14 | </p> | |
| 15 | </div> | |
| 16 | </a-layout-footer> | |
| d3f921 | 17 | </a-layout> |
| I | 18 | </div> |
| 19 | </template> | |
| 20 | ||
| 21 | <script> | |
| ad2b70 | 22 | import tagHeader from "./tag-header.vue" |
| d3f921 | 23 | export default { |
| I | 24 | components: { |
| ad2b70 | 25 | tagHeader |
| d3f921 | 26 | }, |
| I | 27 | data() { |
| 28 | return { | |
| 29 | ||
| 30 | } | |
| 56a4b8 | 31 | }, |
| d629d9 | 32 | methods: { |
| ad2b70 | 33 | |
| d629d9 | 34 | // 下载文件 |
| L | 35 | down: function() { |
| 36 | console.log(111); | |
| 37 | this.$axios({ | |
| 38 | "url": "http://192.168.40.149:9000/test2/save/%E6%B5%8B%E8%AF%95%E9%83%A8/%E6%96%87%E4%BB%B6%E7%BB%84/OIP-C.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin/20220113/us-east-1/s3/aws4_request&X-Amz-Date=20220113T085350Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=36db32d3fe577716ada0655379327e837efdfd3a133be6051281ae9eaad8e04f", | |
| 39 | "method": "get", | |
| 40 | "responseType": "blob" | |
| 41 | ||
| 42 | }).then((res) => { | |
| 43 | ||
| 44 | let blob = new Blob([res.data], { | |
| 45 | type: "application/octet-stream" | |
| 46 | }); | |
| 47 | let url = window.URL.createObjectURL(blob) | |
| 48 | let link = document.createElement('a') | |
| 49 | link.download="inleft.jpg" | |
| 50 | ||
| 51 | link.style.display = 'none' | |
| 52 | link.href = url | |
| 53 | document.body.appendChild(link) | |
| 54 | link.click() | |
| 55 | }) | |
| 56 | } | |
| 57 | ||
| 58 | } | |
| d3f921 | 59 | } |
| I | 60 | </script> |
| 61 | ||
| 62 | <style lang="less"> | |
| 63 | #components-layout-basic { | |
| 64 | width: 100%; | |
| 65 | margin: 0; | |
| 66 | padding: 0; | |
| 67 | ||
| ad2b70 | 68 | .ant-layout {} |
| L | 69 | |
| 70 | .ant-layout-header { | |
| d629d9 | 71 | // background-color: #ffffff; |
| L | 72 | backdrop-filter: saturate(180%) blur(1em); |
| 73 | background: linear-gradient(90deg, rgba(247, 149, 51, 0.101961) 0, rgba(243, 112, 85, 0.101961) 15%, rgba(239, 78, 123, 0.101961) 30%, rgba(161, 102, 171, 0.101961) 44%, rgba(80, 115, 184, 0.101961) 58%, rgba(16, 152, 173, 0.101961) 72%, rgba(7, 179, 155, 0.101961) 86%, rgba(109, 186, 130, 0.101961) 100%); | |
| d3f921 | 74 | } |
| I | 75 | |
| 76 | .ant-layout-footer { | |
| ad2b70 | 77 | background-color: #edf1f299; |
| L | 78 | padding: 0px; |
| 79 | ||
| 80 | p { | |
| 81 | margin: auto; | |
| 82 | color: #757575; | |
| 83 | } | |
| 84 | ||
| 85 | a { | |
| 86 | opacity: 0.8; | |
| 87 | color: #757575; | |
| 88 | } | |
| d3f921 | 89 | } |
| I | 90 | |
| 91 | .ant-layout-sider { | |
| 92 | background: #3ba0e9; | |
| 93 | color: #fff; | |
| 94 | line-height: 120px; | |
| 95 | } | |
| 96 | ||
| 97 | .ant-col, | |
| 98 | .ant-layout-content { | |
| 99 | height: 100%; | |
| 100 | } | |
| 101 | ||
| 102 | ||
| 103 | } | |
| 104 | ||
| 105 | ||
| 106 | .h1, | |
| 107 | .h2, | |
| 108 | .h3, | |
| 109 | .h4, | |
| 110 | .h5, | |
| 111 | .h6, | |
| 112 | h1, | |
| 113 | h2, | |
| 114 | h3, | |
| 115 | h4, | |
| 116 | h5, | |
| 117 | h6 { | |
| 118 | font-weight: 400; | |
| 119 | } | |
| 120 | ||
| 121 | span, | |
| 122 | p { | |
| 123 | font-size: 17px; | |
| 124 | letter-spacing: 0.8px; | |
| ad2b70 | 125 | line-height: 22px; |
| L | 126 | } |
| 127 | ||
| 128 | .fade { | |
| 129 | -webkit-animation-name: "fade"; | |
| 130 | -webkit-animation-duration: 2s; | |
| 131 | -webkit-animation-iteration-count: 1; | |
| d3f921 | 132 | } |
| I | 133 | |
| 134 | .fadeInLeft { | |
| 135 | -webkit-animation-name: "fadeInLeft"; | |
| 136 | -webkit-animation-duration: 1s; | |
| 137 | -webkit-animation-iteration-count: 1; | |
| 138 | } | |
| 139 | ||
| 140 | .fadeInRight { | |
| 141 | -webkit-animation-name: "fadeInRight"; | |
| 142 | -webkit-animation-duration: 1s; | |
| 143 | -webkit-animation-iteration-count: 1; | |
| 144 | } | |
| 145 | ||
| 146 | ||
| 147 | // 动画 | |
| 148 | @-webkit-keyframes fadeInLeft { | |
| 149 | 0% { | |
| 150 | opacity: 0; | |
| 151 | -webkit-transform: translateX(-120px); | |
| 152 | } | |
| 153 | ||
| 154 | 100% { | |
| 155 | opacity: 1; | |
| 156 | -webkit-transform: translateX(0); | |
| 157 | } | |
| 158 | } | |
| 159 | ||
| 160 | @keyframes fadeInLeft { | |
| 161 | 0% { | |
| 162 | opacity: 0; | |
| 163 | transform: translateX(-120px); | |
| 164 | } | |
| 165 | ||
| 166 | 100% { | |
| 167 | opacity: 1; | |
| 168 | transform: translateX(0); | |
| 169 | } | |
| 170 | } | |
| 171 | ||
| 172 | @-webkit-keyframes fadeInRight { | |
| 173 | 0% { | |
| 174 | opacity: 0; | |
| 175 | -webkit-transform: translateX(120px); | |
| 176 | } | |
| 177 | ||
| 178 | 100% { | |
| 179 | opacity: 1; | |
| 180 | -webkit-transform: translateX(0); | |
| 181 | } | |
| 182 | } | |
| 183 | ||
| 184 | @keyframes fadeInRight { | |
| 185 | 0% { | |
| 186 | opacity: 0; | |
| 187 | transform: translateX(120px); | |
| 188 | } | |
| 189 | ||
| 190 | 100% { | |
| 191 | opacity: 1; | |
| 192 | transform: translateX(0); | |
| 193 | } | |
| 194 | } | |
| 195 | ||
| 196 | @-webkit-keyframes fade { | |
| 197 | 0% { | |
| 198 | opacity: 0; | |
| 199 | } | |
| 200 | ||
| 201 | 100% { | |
| 202 | opacity: 1; | |
| 203 | } | |
| 204 | } | |
| 205 | ||
| 206 | @keyframes fade { | |
| 207 | 0% { | |
| 208 | opacity: 0; | |
| 209 | } | |
| 210 | ||
| 211 | 100% { | |
| 212 | opacity: 1; | |
| 213 | } | |
| 214 | } | |
| 215 | </style> | |
