inleft
2022-08-10 10572998aa54d61c45df3e334eb01e44a15df729
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>
146176 9             <router-view @showMyVideo="showMyVideo"></router-view>
6bcd13 10         </keep-alive>
146176 11
41b36f 12         <a-layout-footer>
019990 13             <AplayerBox />
41b36f 14             <tagFooter />
105729 15             <MyVideo ref="MyVideo" />
41b36f 16         </a-layout-footer>
f9c38e 17
b505f3 18         <a-back-top>
I 19             <a-icon type="up" />回到顶部
20         </a-back-top>
21
41b36f 22     </a-layout>
d3f921 23 </template>
I 24
25 <script>
41b36f 26     import tagHeader from "../fixed/header.vue"
I 27     import tagFooter from "../fixed/footer.vue"
019990 28     import AplayerBox from "../mini/Aplayer.vue"
146176 29     import MyVideo from "../group/MyVideo.vue"
d3f921 30     export default {
I 31         components: {
41b36f 32             tagHeader,
I 33             tagFooter,
019990 34             AplayerBox,
146176 35             MyVideo,
d3f921 36         },
I 37         data() {
38             return {
39
40             }
56a4b8 41         },
d629d9 42         methods: {
105729 43             showMyVideo(param) {
I 44                 this.$refs.MyVideo.showModal(param);
146176 45             },
d629d9 46             // 下载文件
L 47             down: function() {
48                 console.log(111);
49                 this.$axios({
50                     "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",
51                     "method": "get",
52                     "responseType": "blob"
53
54                 }).then((res) => {
55
56                     let blob = new Blob([res.data], {
57                         type: "application/octet-stream"
58                     });
59                     let url = window.URL.createObjectURL(blob)
60                     let link = document.createElement('a')
41b36f 61                     link.download = "inleft.jpg"
I 62
d629d9 63                     link.style.display = 'none'
L 64                     link.href = url
65                     document.body.appendChild(link)
66                     link.click()
67                 })
68             }
69
70         }
d3f921 71     }
I 72 </script>
73
74 <style lang="less">
41b36f 75     .app {
ad2b70 76         .ant-layout {}
L 77
78         .ant-layout-header {
d629d9 79             backdrop-filter: saturate(180%) blur(1em);
019990 80             -webkit-backdrop-filter: blur(5px);
d629d9 81             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 82         }
I 83
84         .ant-layout-footer {
ad2b70 85             background-color: #edf1f299;
L 86             padding: 0px;
41b36f 87             padding-top: 20px;
ad2b70 88
L 89             p {
90                 margin: auto;
91                 color: #757575;
92             }
93
94             a {
95                 opacity: 0.8;
96                 color: #757575;
97             }
d3f921 98         }
I 99
f9c38e 100         .ant-timeline-item-head {
I 101             background-color: transparent !important;
102         }
103
d3f921 104     }
I 105
106     span,
107     p {
108         font-size: 17px;
109         letter-spacing: 0.8px;
ad2b70 110         line-height: 22px;
L 111     }
019990 112
aab811 113     .scrolling-navbar {
019990 114         will-change: background, padding, height;
I 115         -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
116         transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
aab811 117     }
ad2b70 118
L 119     .fade {
120         -webkit-animation-name: "fade";
121         -webkit-animation-duration: 2s;
122         -webkit-animation-iteration-count: 1;
d3f921 123     }
I 124
125     .fadeInLeft {
126         -webkit-animation-name: "fadeInLeft";
127         -webkit-animation-duration: 1s;
128         -webkit-animation-iteration-count: 1;
129     }
130
131     .fadeInRight {
132         -webkit-animation-name: "fadeInRight";
133         -webkit-animation-duration: 1s;
134         -webkit-animation-iteration-count: 1;
135     }
136
137
138     // 动画
139     @-webkit-keyframes fadeInLeft {
140         0% {
141             opacity: 0;
142             -webkit-transform: translateX(-120px);
143         }
144
145         100% {
146             opacity: 1;
147             -webkit-transform: translateX(0);
148         }
149     }
150
151     @keyframes fadeInLeft {
152         0% {
153             opacity: 0;
154             transform: translateX(-120px);
155         }
156
157         100% {
158             opacity: 1;
159             transform: translateX(0);
160         }
161     }
162
163     @-webkit-keyframes fadeInRight {
164         0% {
165             opacity: 0;
166             -webkit-transform: translateX(120px);
167         }
168
169         100% {
170             opacity: 1;
171             -webkit-transform: translateX(0);
172         }
173     }
174
175     @keyframes fadeInRight {
176         0% {
177             opacity: 0;
178             transform: translateX(120px);
179         }
180
181         100% {
182             opacity: 1;
183             transform: translateX(0);
184         }
185     }
186
187     @-webkit-keyframes fade {
188         0% {
189             opacity: 0;
190         }
191
192         100% {
193             opacity: 1;
194         }
195     }
196
197     @keyframes fade {
198         0% {
199             opacity: 0;
200         }
201
202         100% {
203             opacity: 1;
204         }
205     }
206 </style>