fix: 更多章节页 墨竹按钮 傻逼safari特供

src/views/MoreContent.vue

@@ -107,11 +107,19 @@
               draggable="false"
             >
             <button
+              v-if="!$isSafari"
               class="button"
               @click="onClickEntryAtMoZhu('PoemList')"
             >
               人文
             </button>
+            <button
+              v-if="$isSafari"
+              class="button in-safari"
+              @click="onClickEntryAtMoZhu('PoemList')"
+            >
+              <div>人</div><div>文</div>
+            </button>
             <img
               class="splitter"
               src="@/assets/images/more-content-wood/btn-splitter.png"
@@ -119,11 +127,19 @@
               draggable="false"
             >
             <button
+              v-if="!$isSafari"
               class="button"
               @click="onClickEntryAtMoZhu('PaintingList')"
             >
               画作
             </button>
+            <button
+              v-if="$isSafari"
+              class="button in-safari"
+              @click="onClickEntryAtMoZhu('PoemList')"
+            >
+              <div>画</div><div>作</div>
+            </button>
             <img
               class="splitter"
               src="@/assets/images/more-content-wood/btn-splitter.png"
@@ -131,11 +147,19 @@
               draggable="false"
             >
             <button
+              v-if="!$isSafari"
               class="button"
               @click="onClickEntryAtMoZhu('BambooBook')"
             >
               竹谱
             </button>
+            <button
+              v-if="$isSafari"
+              class="button in-safari"
+              @click="onClickEntryAtMoZhu('BambooBook')"
+            >
+              <div>竹</div><div>谱</div>
+            </button>
             <img
               class="splitter"
               src="@/assets/images/more-content-wood/btn-splitter.png"
@@ -242,7 +266,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onBeforeMount, nextTick, onBeforeUnmount } from "vue"
+import { ref, computed, watch, onBeforeMount, nextTick, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
@@ -253,6 +277,8 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const $isSafari = inject('$isSafari')
+
 const windowWidthDesign = 4674
 const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
 
@@ -491,6 +517,16 @@ onBeforeUnmount(() => {
             flex: 0 0 auto;
             color: #b8ae7a;
           }
+          > button.in-safari{
+            writing-mode: initial;
+            height: calc(80px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            >div{
+              letter-spacing: initial;
+            }
+            >div:nth-of-type(1){
+              margin-bottom: 0.2em;
+            }
+          }
         }
         > div.group-title {
           position: absolute;