style: Mobile style optimization (#8689)

frontend/src/global/mimetype.ts

@@ -95,6 +95,10 @@ export const Languages = [
         label: 'css',
         value: ['css'],
     },
+    {
+        label: 'ini',
+        value: ['ini'],
+    },
 ];
 
 export const Rewrites = [

frontend/src/layout/components/MobileHeader.vue

@@ -4,7 +4,7 @@ const menuStore = MenuStore();
 </script>
 <template>
     <div class="mobile-header">
-        <svg-icon class="caidan" iconName="p-caidan" @click="menuStore.setCollapse()"></svg-icon>
+        <svg-icon class="mobile-menu" iconName="p-caidan" @click="menuStore.setCollapse()"></svg-icon>
     </div>
 </template>
 
@@ -14,8 +14,8 @@ const menuStore = MenuStore();
     box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
     padding: 10px;
     text-align: left;
-    z-index: 999;
-    .caidan {
+    z-index: 99;
+    .mobile-menu {
         margin-left: 10px;
         font-size: 10px;
         cursor: pointer;

frontend/src/layout/index.vue

@@ -7,7 +7,7 @@
         fullscreen
     >
         <div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleClickOutside" />
-        <el-affix :offset="classObj.openMenuTabs ? 8 : 15" class="affix">
+        <el-affix v-if="!classObj.mobile" :offset="classObj.openMenuTabs ? 8 : 15" class="affix">
             <el-tooltip :content="menuStore.isCollapse ? $t('commons.button.expand') : $t('commons.button.collapse')">
                 <el-button
                     size="small"

frontend/src/views/home/index.vue

@@ -578,6 +578,13 @@ onBeforeUnmount(() => {
         color: var(--el-text-color-regular);
     }
 
+    @media only screen and (max-width: 1300px) {
+        span:first-child {
+            font-size: 12px;
+            color: var(--el-text-color-regular);
+        }
+    }
+
     .count {
         margin-top: 10px;
         span {