Showing
1 changed file
with
17 additions
and
6 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div class="iframe-content" :style="getStyle(borderRadius)"> | 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 | <svg | 4 | <svg |
| 5 | focusable="false" | 5 | focusable="false" |
| 6 | class="" | 6 | class="" |
| 7 | data-icon="fullscreen" | 7 | data-icon="fullscreen" |
| 8 | - width="2.1vw" | ||
| 9 | - height="2.1vh" | 8 | + width="2.3vw" |
| 9 | + height="2.3vh" | ||
| 10 | fill="currentColor" | 10 | fill="currentColor" |
| 11 | aria-hidden="true" | 11 | aria-hidden="true" |
| 12 | viewBox="64 64 896 896" | 12 | viewBox="64 64 896 896" |
| @@ -87,11 +87,22 @@ const handleMouseleave = () => (isShowSvg.value = false) | @@ -87,11 +87,22 @@ const handleMouseleave = () => (isShowSvg.value = false) | ||
| 87 | <style lang="scss" scoped> | 87 | <style lang="scss" scoped> |
| 88 | .iframe-content { | 88 | .iframe-content { |
| 89 | position: relative; | 89 | position: relative; |
| 90 | - .fullscreen-button { | 90 | + #fullscreenButton { |
| 91 | + color: white; | ||
| 91 | cursor: pointer; | 92 | cursor: pointer; |
| 92 | position: absolute; | 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 | </style> | 108 | </style> |