| commit | author | age | ||
| d3f921 | 1 | <template> |
| 41b36f | 2 | <a-layout> |
| 019990 | 3 | <a-layout-header class="scrolling-navbar" |
| I | 4 | :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }"> |
| 5 | <tag-Header /> | |
| 41b36f | 6 | </a-layout-header> |
| I | 7 | |
| 6bcd13 | 8 | <keep-alive> |
| a3ab3a | 9 | <router-view @showMyVideo="showMyVideo" @detailBackAction="detailBackAction"></router-view> |
| 6bcd13 | 10 | </keep-alive> |
| 146176 | 11 | |
| 41b36f | 12 | <a-layout-footer> |
| 019990 | 13 | <AplayerBox /> |
| 41b36f | 14 | <tagFooter /> |
| c3aa82 | 15 | <MyVideo ref="MyVideo" @closeMyVideo="closeMyVideo" /> |
| 0dd41b | 16 | |
| I | 17 | <a-button v-if="miniVideoPlayData!=null && showMiniBox" class="fadeInRight" |
| 18 | style="position: fixed;right: 0px;bottom: 130px;" @click="showMyVideo(miniVideoPlayData)"> | |
| 19 | {{miniBoxContent}} | |
| 20 | <a-icon type="youtube" style="transform: scale(1.5);" /> | |
| af029b | 21 | </a-button> |
| 41b36f | 22 | </a-layout-footer> |
| f9c38e | 23 | |
| b505f3 | 24 | <a-back-top> |
| I | 25 | <a-icon type="up" />回到顶部 |
| 26 | </a-back-top> | |
| 27 | ||
| 41b36f | 28 | </a-layout> |
| d3f921 | 29 | </template> |
| I | 30 | |
| 31 | <script> | |
| 0dd41b | 32 | // Dplayer Api地址 |
| I | 33 | // http://dplayer.js.org/ |
| 41b36f | 34 | import tagHeader from "../fixed/header.vue" |
| c3aa82 | 35 | // import tagFooter from "../fixed/footer.vue" |
| I | 36 | const tagFooter = () => import("../fixed/footer.vue") |
| 019990 | 37 | import AplayerBox from "../mini/Aplayer.vue" |
| 146176 | 38 | import MyVideo from "../group/MyVideo.vue" |
| d3f921 | 39 | export default { |
| I | 40 | components: { |
| 41b36f | 41 | tagHeader, |
| I | 42 | tagFooter, |
| 019990 | 43 | AplayerBox, |
| 146176 | 44 | MyVideo, |
| d3f921 | 45 | }, |
| I | 46 | data() { |
| 47 | return { | |
| af029b | 48 | miniVideoPlayData: null, |
| 0dd41b | 49 | firstQuery: true, |
| I | 50 | showMiniBox: false, |
| 51 | miniBoxContent: "视频盒子", | |
| d3f921 | 52 | } |
| 56a4b8 | 53 | }, |
| d629d9 | 54 | methods: { |
| 105729 | 55 | showMyVideo(param) { |
| af029b | 56 | this.miniVideoPlayData = param; |
| 105729 | 57 | this.$refs.MyVideo.showModal(param); |
| 0dd41b | 58 | }, |
| a3ab3a | 59 | detailBackAction(param) { |
| I | 60 | this.miniVideoPlayData = param; |
| 61 | this.closeMyVideo() | |
| 62 | }, | |
| 0dd41b | 63 | closeMyVideo() { |
| I | 64 | if (this.firstQuery) { |
| 65 | this.firstQuery = !this.firstQuery; | |
| 66 | this.showMiniBox = !this.showMiniBox; | |
| af029b | 67 | this.$notification.info({ |
| 0dd41b | 68 | message: '视频盒子最小化啦..', |
| af029b | 69 | placement: 'bottomRight', |
| I | 70 | }); |
| 0dd41b | 71 | |
| I | 72 | setTimeout(() => { |
| 73 | this.miniBoxContent = ""; | |
| 74 | }, 6000); | |
| af029b | 75 | } |
| 146176 | 76 | }, |
| d629d9 | 77 | // 下载文件 |
| L | 78 | down: function() { |
| 79 | console.log(111); | |
| 80 | this.$axios({ | |
| 81 | "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", | |
| 82 | "method": "get", | |
| 83 | "responseType": "blob" | |
| 84 | ||
| 85 | }).then((res) => { | |
| 86 | ||
| 87 | let blob = new Blob([res.data], { | |
| 88 | type: "application/octet-stream" | |
| 89 | }); | |
| 90 | let url = window.URL.createObjectURL(blob) | |
| 91 | let link = document.createElement('a') | |
| 41b36f | 92 | link.download = "inleft.jpg" |
| I | 93 | |
| d629d9 | 94 | link.style.display = 'none' |
| L | 95 | link.href = url |
| 96 | document.body.appendChild(link) | |
| 97 | link.click() | |
| 98 | }) | |
| 99 | } | |
| 100 | ||
| 101 | } | |
| d3f921 | 102 | } |
| I | 103 | </script> |
| 104 | ||
| 105 | <style lang="less"> | |
| 41b36f | 106 | .app { |
| ad2b70 | 107 | .ant-layout {} |
| L | 108 | |
| 109 | .ant-layout-header { | |
| d629d9 | 110 | backdrop-filter: saturate(180%) blur(1em); |
| 019990 | 111 | -webkit-backdrop-filter: blur(5px); |
| d629d9 | 112 | 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 | 113 | } |
| I | 114 | |
| 115 | .ant-layout-footer { | |
| ad2b70 | 116 | background-color: #edf1f299; |
| L | 117 | padding: 0px; |
| 41b36f | 118 | padding-top: 20px; |
| ad2b70 | 119 | |
| L | 120 | p { |
| 121 | margin: auto; | |
| 122 | color: #757575; | |
| 123 | } | |
| 124 | ||
| 125 | a { | |
| 126 | opacity: 0.8; | |
| 127 | color: #757575; | |
| 128 | } | |
| d3f921 | 129 | } |
| I | 130 | |
| f9c38e | 131 | .ant-timeline-item-head { |
| I | 132 | background-color: transparent !important; |
| 133 | } | |
| 134 | ||
| d3f921 | 135 | } |
| I | 136 | |
| 137 | span, | |
| 138 | p { | |
| 139 | font-size: 17px; | |
| 140 | letter-spacing: 0.8px; | |
| ad2b70 | 141 | line-height: 22px; |
| L | 142 | } |
| 019990 | 143 | |
| aab811 | 144 | .scrolling-navbar { |
| 019990 | 145 | will-change: background, padding, height; |
| I | 146 | -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; |
| 147 | transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | |
| aab811 | 148 | } |
| ad2b70 | 149 | |
| L | 150 | .fade { |
| 151 | -webkit-animation-name: "fade"; | |
| 152 | -webkit-animation-duration: 2s; | |
| 153 | -webkit-animation-iteration-count: 1; | |
| d3f921 | 154 | } |
| c3aa82 | 155 | |
| I | 156 | |
| d3f921 | 157 | |
| I | 158 | .fadeInLeft { |
| 159 | -webkit-animation-name: "fadeInLeft"; | |
| 160 | -webkit-animation-duration: 1s; | |
| 161 | -webkit-animation-iteration-count: 1; | |
| 162 | } | |
| 163 | ||
| 164 | .fadeInRight { | |
| 165 | -webkit-animation-name: "fadeInRight"; | |
| 166 | -webkit-animation-duration: 1s; | |
| 167 | -webkit-animation-iteration-count: 1; | |
| 168 | } | |
| 169 | ||
| 170 | ||
| 171 | // 动画 | |
| 172 | @-webkit-keyframes fadeInLeft { | |
| 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 fadeInLeft { | |
| 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 fadeInRight { | |
| 197 | 0% { | |
| 198 | opacity: 0; | |
| 199 | -webkit-transform: translateX(120px); | |
| 200 | } | |
| 201 | ||
| 202 | 100% { | |
| 203 | opacity: 1; | |
| 204 | -webkit-transform: translateX(0); | |
| 205 | } | |
| 206 | } | |
| 207 | ||
| 208 | @keyframes fadeInRight { | |
| 209 | 0% { | |
| 210 | opacity: 0; | |
| 211 | transform: translateX(120px); | |
| 212 | } | |
| 213 | ||
| 214 | 100% { | |
| 215 | opacity: 1; | |
| 216 | transform: translateX(0); | |
| 217 | } | |
| 218 | } | |
| 219 | ||
| 220 | @-webkit-keyframes fade { | |
| 221 | 0% { | |
| 222 | opacity: 0; | |
| 223 | } | |
| 224 | ||
| 225 | 100% { | |
| 226 | opacity: 1; | |
| 227 | } | |
| 228 | } | |
| 229 | ||
| 230 | @keyframes fade { | |
| 231 | 0% { | |
| 232 | opacity: 0; | |
| 233 | } | |
| 234 | ||
| 235 | 100% { | |
| 236 | opacity: 1; | |
| 237 | } | |
| 238 | } | |
| 239 | </style> | |
