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