Showing
1 changed file
with
17 additions
and
6 deletions
| 1 | 1 | <template> |
| 2 | 2 | <div class="iframe-content" :style="getStyle(borderRadius)"> |
| 3 | - <div v-show="isShowSvg" @click="handleFullScreen" class="fullscreen-button"> | |
| 3 | + <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton"> | |
| 4 | 4 | <svg |
| 5 | 5 | focusable="false" |
| 6 | 6 | class="" |
| 7 | 7 | data-icon="fullscreen" |
| 8 | - width="2.1vw" | |
| 9 | - height="2.1vh" | |
| 8 | + width="2.3vw" | |
| 9 | + height="2.3vh" | |
| 10 | 10 | fill="currentColor" |
| 11 | 11 | aria-hidden="true" |
| 12 | 12 | viewBox="64 64 896 896" |
| ... | ... | @@ -87,11 +87,22 @@ const handleMouseleave = () => (isShowSvg.value = false) |
| 87 | 87 | <style lang="scss" scoped> |
| 88 | 88 | .iframe-content { |
| 89 | 89 | position: relative; |
| 90 | - .fullscreen-button { | |
| 90 | + #fullscreenButton { | |
| 91 | + color: white; | |
| 91 | 92 | cursor: pointer; |
| 92 | 93 | position: absolute; |
| 93 | - right: 0; | |
| 94 | - top: 0; | |
| 94 | + z-index: 999999; | |
| 95 | + top: 3%; | |
| 96 | + left: 50%; | |
| 97 | + transform: translateX(-50%); | |
| 98 | + } | |
| 99 | + iframe:fullscreen { | |
| 100 | + width: 100vw; | |
| 101 | + height: 100vh; | |
| 102 | + } | |
| 103 | + iframe::backdrop { | |
| 104 | + width: 100vw; | |
| 105 | + height: 100vh; | |
| 95 | 106 | } |
| 96 | 107 | } |
| 97 | 108 | </style> | ... | ... |