inleft
2022-08-19 8ec9c517c58b70918f2d72f2bfa6ab4b0a4145f9
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 />
a3ab3a 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"
I 35     import tagFooter from "../fixed/footer.vue"
019990 36     import AplayerBox from "../mini/Aplayer.vue"
146176 37     import MyVideo from "../group/MyVideo.vue"
d3f921 38     export default {
I 39         components: {
41b36f 40             tagHeader,
I 41             tagFooter,
019990 42             AplayerBox,
146176 43             MyVideo,
d3f921 44         },
I 45         data() {
46             return {
af029b 47                 miniVideoPlayData: null,
0dd41b 48                 firstQuery: true,
I 49                 showMiniBox: false,
50                 miniBoxContent: "视频盒子",
d3f921 51             }
56a4b8 52         },
d629d9 53         methods: {
105729 54             showMyVideo(param) {
af029b 55                 this.miniVideoPlayData = param;
105729 56                 this.$refs.MyVideo.showModal(param);
0dd41b 57             },
a3ab3a 58             detailBackAction(param) {
I 59                 this.miniVideoPlayData = param;
60                 this.closeMyVideo()
61             },
0dd41b 62             closeMyVideo() {
I 63                 if (this.firstQuery) {
64                     this.firstQuery = !this.firstQuery;
65                     this.showMiniBox = !this.showMiniBox;
af029b 66                     this.$notification.info({
0dd41b 67                         message: '视频盒子最小化啦..',
af029b 68                         placement: 'bottomRight',
I 69                     });
0dd41b 70
I 71                     setTimeout(() => {
72                         this.miniBoxContent = "";
73                     }, 6000);
af029b 74                 }
146176 75             },
d629d9 76             // 下载文件
L 77             down: function() {
78                 console.log(111);
79                 this.$axios({
80                     "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",
81                     "method": "get",
82                     "responseType": "blob"
83
84                 }).then((res) => {
85
86                     let blob = new Blob([res.data], {
87                         type: "application/octet-stream"
88                     });
89                     let url = window.URL.createObjectURL(blob)
90                     let link = document.createElement('a')
41b36f 91                     link.download = "inleft.jpg"
I 92
d629d9 93                     link.style.display = 'none'
L 94                     link.href = url
95                     document.body.appendChild(link)
96                     link.click()
97                 })
98             }
99
100         }
d3f921 101     }
I 102 </script>
103
104 <style lang="less">
41b36f 105     .app {
ad2b70 106         .ant-layout {}
L 107
108         .ant-layout-header {
d629d9 109             backdrop-filter: saturate(180%) blur(1em);
019990 110             -webkit-backdrop-filter: blur(5px);
d629d9 111             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 112         }
I 113
114         .ant-layout-footer {
ad2b70 115             background-color: #edf1f299;
L 116             padding: 0px;
41b36f 117             padding-top: 20px;
ad2b70 118
L 119             p {
120                 margin: auto;
121                 color: #757575;
122             }
123
124             a {
125                 opacity: 0.8;
126                 color: #757575;
127             }
d3f921 128         }
I 129
f9c38e 130         .ant-timeline-item-head {
I 131             background-color: transparent !important;
132         }
133
d3f921 134     }
I 135
136     span,
137     p {
138         font-size: 17px;
139         letter-spacing: 0.8px;
ad2b70 140         line-height: 22px;
L 141     }
019990 142
aab811 143     .scrolling-navbar {
019990 144         will-change: background, padding, height;
I 145         -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
146         transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
aab811 147     }
ad2b70 148
L 149     .fade {
150         -webkit-animation-name: "fade";
151         -webkit-animation-duration: 2s;
152         -webkit-animation-iteration-count: 1;
d3f921 153     }
c14e32 154     
I 155      
d3f921 156
I 157     .fadeInLeft {
158         -webkit-animation-name: "fadeInLeft";
159         -webkit-animation-duration: 1s;
160         -webkit-animation-iteration-count: 1;
161     }
162
163     .fadeInRight {
164         -webkit-animation-name: "fadeInRight";
165         -webkit-animation-duration: 1s;
166         -webkit-animation-iteration-count: 1;
167     }
168
169
170     // 动画
171     @-webkit-keyframes fadeInLeft {
172         0% {
173             opacity: 0;
174             -webkit-transform: translateX(-120px);
175         }
176
177         100% {
178             opacity: 1;
179             -webkit-transform: translateX(0);
180         }
181     }
182
183     @keyframes fadeInLeft {
184         0% {
185             opacity: 0;
186             transform: translateX(-120px);
187         }
188
189         100% {
190             opacity: 1;
191             transform: translateX(0);
192         }
193     }
194
195     @-webkit-keyframes fadeInRight {
196         0% {
197             opacity: 0;
198             -webkit-transform: translateX(120px);
199         }
200
201         100% {
202             opacity: 1;
203             -webkit-transform: translateX(0);
204         }
205     }
206
207     @keyframes fadeInRight {
208         0% {
209             opacity: 0;
210             transform: translateX(120px);
211         }
212
213         100% {
214             opacity: 1;
215             transform: translateX(0);
216         }
217     }
218
219     @-webkit-keyframes fade {
220         0% {
221             opacity: 0;
222         }
223
224         100% {
225             opacity: 1;
226         }
227     }
228
229     @keyframes fade {
230         0% {
231             opacity: 0;
232         }
233
234         100% {
235             opacity: 1;
236         }
237     }
238 </style>