diff --git a/app/.vitepress/src/views/brand/TheBrand.vue b/app/.vitepress/src/views/brand/TheBrand.vue
index 5dd0fd2453d775ef2a769394492347ad4d9b191c..039370acf82f323021e64838ae5c946db45be3ec 100644
--- a/app/.vitepress/src/views/brand/TheBrand.vue
+++ b/app/.vitepress/src/views/brand/TheBrand.vue
@@ -126,7 +126,12 @@ list.value = initList();
   }
 }
 .brand {
-  margin: var(--o-spacing-h1) 0;
+  margin: var(--o-spacing-h1) auto;
+  padding: 0 var(--o-spacing-h2);
+  max-width: 1504px;
+  @media (max-width: 1100px) {
+    padding: 0 var(--o-spacing-h5);
+  }
   &-title {
     font-size: var(--o-font-size-h3);
     font-weight: 300;
diff --git a/app/.vitepress/src/views/download/TheDownload.vue b/app/.vitepress/src/views/download/TheDownload.vue
index 5dee74de87f16ff3e1008b352a6565cd1ced5cc1..6b3d7ce8c0fdefad86a5e14766ec5d351d8bf50e 100644
--- a/app/.vitepress/src/views/download/TheDownload.vue
+++ b/app/.vitepress/src/views/download/TheDownload.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import IconDownload from '~icons/app/icon-download.svg';
 import banner from '@/assets/banner-secondary.png';
+import useWindowResize from '@/components/hooks/useWindowResize';
 
 import BannerLevel3 from '@/components/BannerLevel3.vue';
 import { useData } from 'vitepress';
@@ -14,14 +15,28 @@ const downloadUrl = (url: string) => {
 const currentPage = ref(1);
 const pageSize = ref(9);
 const total = ref(i18n.value.download.DOWNLOAD_LIST.length);
+const screenWidth = useWindowResize();
 
 const dataList = computed(() => {
-  return i18n.value.download.DOWNLOAD_LIST.slice(
-    (currentPage.value - 1) * pageSize.value,
-    currentPage.value * pageSize.value
-  );
+  if (screenWidth.value > 768) {
+    return i18n.value.download.DOWNLOAD_LIST.slice(
+      (currentPage.value - 1) * pageSize.value,
+      currentPage.value * pageSize.value
+    );
+  } else {
+    return i18n.value.download.DOWNLOAD_LIST.slice(
+      0,
+      currentPage.value * pageSize.value
+    );
+  }
 });
 
+const LoadMore = () => {
+  if (currentPage.value * pageSize.value < total.value) {
+    currentPage.value = currentPage.value + 1;
+  }
+};
+
 const urlStyle = computed(() => {
   if (lang.value === 'zh') {
     return 'url-list-zh';
@@ -45,51 +60,55 @@ const urlStyle = computed(() => {
       <OCard
         v-for="(download, index) in dataList"
         :key="index"
+        :style="{ padding: '0px' }"
         class="download-list-item"
       >
-        <h5 class="download-name">
-          {{ download.NAME }}
-        </h5>
-        <div class="download-desc">
-          {{ download.DESC }}
-        </div>
-        <div :class="urlStyle">
-          <div v-if="download.SEEK_HELP_URL ? true : false">
-            <a target="_blank" :href="download.SEEK_HELP_URL">
-              {{ i18n.download.SEEK_HELP }}
-            </a>
-          </div>
-          <div v-if="download.GET_ISO_URL ? true : false">
-            <a target="_blank" :href="download.GET_ISO_URL">
-              {{ i18n.download.GET_ISO }}
-            </a>
+        <div>
+          <h5 class="download-name">
+            {{ download.NAME }}
+          </h5>
+          <div class="download-desc">
+            {{ download.DESC }}
           </div>
-          <div v-if="download.LIFE_CYCLE_URL ? true : false">
-            <a target="_blank" :href="download.LIFE_CYCLE_URL">
-              {{ i18n.download.LIFE_CYCLE }}
-            </a>
-          </div>
-          <div v-if="download.RELEASE_DESC_URL ? true : false">
-            <a target="_blank" :href="download.RELEASE_DESC_URL">
-              {{ i18n.download.RELEASE_DESC }}
-            </a>
-          </div>
-          <div v-if="download.INSTALL_GUIDENCE_URL ? true : false">
-            <a target="_blank" :href="download.INSTALL_GUIDENCE_URL">
-              {{ i18n.download.INSTALL_GUIDENCE }}
-            </a>
-          </div>
-          <div v-if="download.WHITE_PAPER ? true : false">
-            <a target="_blank" :href="download.WHITE_PAPER">
-              {{ i18n.download.WHITE_PAPER }}
-            </a>
-          </div>
-          <div v-if="download.WEBSITE_SELECT ? true : false">
-            <a target="_blank" :href="download.WEBSITE_SELECT">
-              {{ i18n.download.WEBSITE_SELECT }}
-            </a>
+          <div :class="urlStyle">
+            <div v-if="download.SEEK_HELP_URL ? true : false">
+              <a target="_blank" :href="download.SEEK_HELP_URL">
+                {{ i18n.download.SEEK_HELP }}
+              </a>
+            </div>
+            <div v-if="download.GET_ISO_URL ? true : false">
+              <a target="_blank" :href="download.GET_ISO_URL">
+                {{ i18n.download.GET_ISO }}
+              </a>
+            </div>
+            <div v-if="download.LIFE_CYCLE_URL ? true : false">
+              <a target="_blank" :href="download.LIFE_CYCLE_URL">
+                {{ i18n.download.LIFE_CYCLE }}
+              </a>
+            </div>
+            <div v-if="download.RELEASE_DESC_URL ? true : false">
+              <a target="_blank" :href="download.RELEASE_DESC_URL">
+                {{ i18n.download.RELEASE_DESC }}
+              </a>
+            </div>
+            <div v-if="download.INSTALL_GUIDENCE_URL ? true : false">
+              <a target="_blank" :href="download.INSTALL_GUIDENCE_URL">
+                {{ i18n.download.INSTALL_GUIDENCE }}
+              </a>
+            </div>
+            <div v-if="download.WHITE_PAPER ? true : false">
+              <a target="_blank" :href="download.WHITE_PAPER">
+                {{ i18n.download.WHITE_PAPER }}
+              </a>
+            </div>
+            <div v-if="download.WEBSITE_SELECT ? true : false">
+              <a target="_blank" :href="download.WEBSITE_SELECT">
+                {{ i18n.download.WEBSITE_SELECT }}
+              </a>
+            </div>
           </div>
         </div>
+
         <OButton
           size="small"
           type="primary"
@@ -101,18 +120,45 @@ const urlStyle = computed(() => {
         </OButton>
       </OCard>
     </div>
-  </div>
-  <div class="page-box">
-    <OPagination
-      v-model:currentPage="currentPage"
-      v-model:page-size="pageSize"
-      :page-sizes="[9, 12, 18, 36]"
-      :background="true"
-      layout="sizes, prev, pager, next, slot, jumper"
-      :total="total"
-    >
-      <span>5/50</span>
-    </OPagination>
+    <div class="page-box">
+      <OPagination
+        v-if="screenWidth > 768"
+        v-model:currentPage="currentPage"
+        v-model:page-size="pageSize"
+        class="pagination"
+        :page-sizes="[9, 12, 18, 36]"
+        :background="true"
+        layout="sizes, prev, pager, next, slot, jumper"
+        :total="total"
+      >
+        <span>{{ pageSize }} / {{ total }}</span>
+      </OPagination>
+      <div v-else class="page-box-mobile">
+        <div>
+          已显示{{
+            pageSize * currentPage < total ? pageSize * currentPage : total
+          }}条记录/共{{ total }}条
+        </div>
+        <div class="page-box-divide">
+          <div
+            class="page-box-divide-in"
+            :style="{
+              width:
+                (pageSize * currentPage * 100) / total > 100
+                  ? (pageSize * currentPage * 100) / total
+                  : '100' + '%',
+            }"
+          ></div>
+        </div>
+        <OButton
+          v-if="currentPage * pageSize < total"
+          class="page-box-button"
+          @click="LoadMore"
+        >
+          加载更多
+        </OButton>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -123,13 +169,43 @@ const urlStyle = computed(() => {
   justify-content: center;
   align-items: center;
   margin-bottom: var(--o-spacing-h1);
+
+  &-mobile {
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-divide {
+    max-width: 328px;
+    width: 100%;
+    height: 1px;
+    margin-top: var(--o-spacing-h5);
+    background-color: var(--o-color-division);
+    &-in {
+      height: 100%;
+      background-color: var(--o-color-brand);
+    }
+  }
+
+  &-button {
+    margin-top: var(--o-spacing-h5);
+    padding: var(--o-spacing-h10) var(--o-spacing-h4);
+  }
 }
 .download {
-  margin: var(--o-spacing-h2) 0;
+  margin: 0 auto;
+  max-width: 1504px;
+  padding: 0 var(--o-spacing-h2);
+  @media (max-width: 1100px) {
+    padding: 0 var(--o-spacing-h5);
+  }
+
   &-list {
     display: grid;
-    max-width: 1504px;
-    margin: 0 auto;
+    margin: var(--o-spacing-h2) auto;
     justify-items: center;
     align-items: center;
     grid-template-columns: repeat(3, 1fr);
@@ -137,26 +213,50 @@ const urlStyle = computed(() => {
     &-item {
       width: 100%;
       max-width: 456px;
-      padding: 20px;
       height: 100%;
+
+      @media (max-width: 768px) {
+        max-width: 328px;
+      }
+
+      :deep(.el-card__body) {
+        padding: var(--o-spacing-h2);
+        width: 100%;
+        display: flex;
+        flex-flow: column;
+        justify-content: space-between;
+        align-items: flex-start;
+        height: 100%;
+        @media (max-width: 768px) {
+          padding: var(--o-spacing-h5) var(--o-spacing-h6);
+        }
+      }
     }
   }
   &-name {
     font-size: var(--o-font-size-h5);
     line-height: var(--o-line-height-h5);
+    @media (max-width: 768px) {
+      font-size: var(--o-font-size-text);
+      line-height: var(--o-line-height-text);
+    }
   }
 
   &-desc {
     margin-top: var(--o-spacing-h5);
     font-size: var(--o-font-size-text);
     color: var(--o-color-text3);
-    line-height: var(--o-line-height-h8);
+    line-height: var(--o-line-height-text);
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
-    height: var(--o-line-height-h3);
+    @media (max-width: 768px) {
+      font-size: var(--o-font-size-tip);
+      line-height: var(--o-line-height-tip);
+      margin-top: var(--o-spacing-h10);
+    }
   }
 
   &-button {
@@ -179,10 +279,17 @@ const urlStyle = computed(() => {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: var(--o-spacing-h5) var(--o-spacing-h8);
+  @media (max-width: 768px) {
+    grid-gap: var(--o-spacing-h8);
+  }
 
   a {
     font-size: var(--o-font-size-text);
     color: var(--o-color-brand);
+    @media (max-width: 768px) {
+      font-size: var(--o-font-size-tip);
+      line-height: var(--o-line-height-tip);
+    }
   }
 }
 
@@ -191,10 +298,17 @@ const urlStyle = computed(() => {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: var(--o-spacing-h5) var(--o-spacing-h8);
+  @media (max-width: 768px) {
+    grid-gap: var(--o-spacing-h8);
+  }
 
   a {
     font-size: var(--o-font-size-text);
     color: var(--o-color-brand);
+    @media (max-width: 768px) {
+      font-size: var(--o-font-size-tip);
+      line-height: var(--o-line-height-tip);
+    }
   }
 }
 
@@ -203,10 +317,17 @@ const urlStyle = computed(() => {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: var(--o-spacing-h5) var(--o-spacing-h8);
+  @media (max-width: 768px) {
+    grid-gap: var(--o-spacing-h8);
+  }
 
   a {
     font-size: var(--o-font-size-text);
     color: var(--o-color-brand);
+    @media (max-width: 768px) {
+      font-size: var(--o-font-size-tip);
+      line-height: var(--o-line-height-tip);
+    }
   }
 }
 
diff --git a/app/.vitepress/src/views/download/TheMirList.vue b/app/.vitepress/src/views/download/TheMirList.vue
index 9c3f9da96fb1c6cf0d5df54e6f4f63c588ee92e1..dabe08e33fdb477a2192e03e61e2282786547b72 100644
--- a/app/.vitepress/src/views/download/TheMirList.vue
+++ b/app/.vitepress/src/views/download/TheMirList.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, Ref, ref } from 'vue';
+import { computed, onMounted, Ref, ref } from 'vue';
 import { getAllMirror } from '@/api/api-mirror';
 import IconCpoy from '~icons/app/icon-copy.svg';
 import { ElMessage } from 'element-plus';
 import BannerLevel3 from '@/components/BannerLevel3.vue';
 import banner from '@/assets/banner-secondary.png';
 import { useData } from 'vitepress';
+import useWindowResize from '@/components/hooks/useWindowResize';
 
 const { theme: i18n } = useData();
 
@@ -22,6 +23,8 @@ interface MirrorMsg {
   area?: boolean;
 }
 
+const screenWidth = useWindowResize();
+
 const tableData: Ref<MirrorMsg[]> = ref([]);
 
 const inputDom: Ref<HTMLElement | null> = ref(null);
@@ -72,7 +75,8 @@ const tableRowClassName = ({ row }: any) => {
   }
   return '';
 };
-const copyText = (value: string) => {
+const copyText = (value: string | undefined) => {
+  if (!value) return;
   if (inputDom.value) {
     (inputDom.value as HTMLInputElement).value = value;
     (inputDom.value as HTMLInputElement).select();
@@ -83,12 +87,16 @@ const copyText = (value: string) => {
     type: 'success',
   });
 };
+
+const listData = computed(() => {
+  return tableData.value.filter((item) => typeof item.area === 'undefined');
+});
 onMounted(async () => {
   inputDom.value = document.getElementById('useCopy');
   try {
     const responeData = await getAllMirror();
     tableData.value = initTable(responeData);
-  } catch (e) {
+  } catch (e: any) {
     throw new Error(e);
   }
 });
@@ -108,6 +116,7 @@ onMounted(async () => {
       >.
     </p>
     <el-table
+      v-if="screenWidth > 768"
       :data="tableData"
       header-cell-class-name="mirror-list-header"
       cell-class-name="mirror-list-row"
@@ -130,14 +139,14 @@ onMounted(async () => {
         :label="i18n.download.MIRROR_ALL.LOCATION"
         min-width="100"
       />
-      <el-table-column :label="i18n.download.MIRROR_ALL.SPONSOR" min-width="80">
+      <el-table-column :label="i18n.download.MIRROR_ALL.SPONSOR" min-width="90">
         <template #default="scope">
           <a :href="scope.row.sponsor" target="_blank"
             ><img :src="scope.row.sponsorLogo" class="mirror-list-img"
           /></a>
         </template>
       </el-table-column>
-      <el-table-column :label="i18n.download.MIRROR_ALL.RSNC" min-width="80">
+      <el-table-column :label="i18n.download.MIRROR_ALL.RSNC" min-width="90">
         <template #default="scope">
           <span v-if="scope.row.rsnc === '-'">{{ scope.row.rsnc }}</span>
           <IconCpoy
@@ -164,6 +173,68 @@ onMounted(async () => {
       >
       </el-table-column>
     </el-table>
+    <div v-else class="mirror-mobile">
+      <OCard v-for="(item, index) in listData" :key="index" class="mirror-card">
+        <div class="mirror-card-content">
+          <div class="mirror-card-title">
+            {{ i18n.download.MIRROR_ALL.NAME }}
+          </div>
+          <div class="mirror-card-word">{{ item.name }}</div>
+        </div>
+        <div class="mirror-card-content">
+          <div class="mirror-card-title">
+            {{ i18n.download.MIRROR_ALL.LOCATION }}
+          </div>
+          <div class="mirror-card-word">{{ item.location }}</div>
+        </div>
+        <div class="mirror-card-content">
+          <div class="mirror-card-title">
+            {{ i18n.download.MIRROR_ALL.HTTPS }}
+          </div>
+          <div class="mirror-card-word">{{ item.sponsor }}</div>
+        </div>
+        <div class="mirror-card-content">
+          <div class="mirror-card-title">
+            {{ i18n.download.MIRROR_ALL.SPONSOR }}
+          </div>
+          <div class="mirror-card-word">
+            <a :href="item.http" target="_blank">{{ item.http }}</a>
+          </div>
+        </div>
+        <div class="mirror-card-content">
+          <div class="mirror-card-title">
+            {{ i18n.download.MIRROR_ALL.RSNC }}
+          </div>
+          <div v-if="item.rsnc === '-'" class="mirror-card-word">
+            {{ item.rsnc }}
+          </div>
+          <IconCpoy
+            v-else-if="item.rsnc && item.rsnc != ''"
+            class="mirror-card-rsnc"
+            @click="copyText(item.rsnc)"
+          />
+        </div>
+        <div class="mirror-card-content">
+          <div class="mirror-card-title">
+            {{ i18n.download.MIRROR_ALL.FTP }}
+          </div>
+          <div v-if="item.ftp === '-'" class="mirror-card-word">
+            {{ item.ftp }}
+          </div>
+          <IconCpoy
+            v-else-if="item.ftp && item.ftp != ''"
+            class="mirror-card-rsnc"
+            @click="copyText(item.ftp)"
+          />
+        </div>
+        <div class="mirror-card-content">
+          <div class="mirror-card-title">
+            {{ i18n.download.MIRROR_ALL.Mbs }}
+          </div>
+          <div class="mirror-card-word">{{ item.netband }}</div>
+        </div>
+      </OCard>
+    </div>
     <div class="input-box">
       <!-- 用于复制RSNC的值 -->
       <input id="useCopy" type="text" />
@@ -227,19 +298,80 @@ onMounted(async () => {
 </style>
 
 <style lang="scss" scoped>
+.mirror {
+  &-mobile {
+    > :nth-child(odd) {
+      background-color: var(--o-color-bg3);
+    }
+  }
+  &-card {
+    :deep(.el-card__body) {
+      padding: var(--o-spacing-h5);
+      :first-child .mirror-card-title,
+      :first-child .mirror-card-word {
+        margin-top: 0px;
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex-flow: row;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    &-title {
+      font-size: var(--o-font-size-tip);
+      line-height: var(--o-line-height-tip);
+      color: var(--o-color-text3);
+      margin-right: var(--o-spacing-h10);
+      margin-top: var(--o-spacing-h8);
+    }
+
+    &-word {
+      font-size: var(--o-font-size-tip);
+      line-height: var(--o-line-height-tip);
+      color: var(--o-color-secondary_active);
+      margin-top: var(--o-spacing-h8);
+      a {
+        font-size: var(--o-font-size-tip);
+        line-height: var(--o-line-height-tip);
+        margin-top: var(--o-spacing-h8);
+        color: var(--o-color-brand);
+      }
+    }
+
+    &-rsnc {
+      margin-top: var(--o-spacing-h8);
+      width: var(--o-font-size-h8);
+      height: var(--o-font-size-h8);
+      color: var(--o-color-brand);
+    }
+  }
+}
 .mirror-list {
   max-width: 1504px;
-  margin: var(--o-spacing-h2) auto;
-  margin-top: var(--o-spacing-h1);
+  margin: 0 auto;
+  padding: 0 var(--o-spacing-h2);
+  @media (max-width: 1100px) {
+    padding: 0 var(--o-spacing-h5);
+  }
   > p {
-    font-size: 18px;
+    font-size: var(--o-font-size-h7);
     font-weight: 400;
-    color: #000000;
-    line-height: 34px;
-    margin: 60px 0 30px 0;
+    color: var(--o-color-text2);
+    line-height: var(--o-line-height-h7);
+    margin: var(--o-spacing-h1) 0 var(--o-spacing-h2) 0;
+    @media (max-width: 768px) {
+      font-size: var(--o-font-size-tip);
+      line-height: var(--o-line-height-tip);
+      margin: var(--o-spacing-h2) 0 var(--o-spacing-h5) 0;
+    }
+
     > a {
       text-decoration: none;
-      color: #002fa7;
+      color: var(--o-color-brand);
     }
   }
 
diff --git a/app/.vitepress/src/views/home/CommunityActivity.vue b/app/.vitepress/src/views/home/CommunityActivity.vue
index d64c45e928a77ac70d27de7bdb2f5886bc33108e..de1f02065c98214ecb84bd532de5584592a162f4 100644
--- a/app/.vitepress/src/views/home/CommunityActivity.vue
+++ b/app/.vitepress/src/views/home/CommunityActivity.vue
@@ -130,6 +130,9 @@ const { theme: i18n } = useData();
   }
 }
 .community {
+  max-width: 1504px;
+  margin: 0 auto;
+  padding: 0;
   margin-top: var(--o-spacing-h1);
   @media (max-width: 768px) {
     margin-top: var(--o-spacing-h2);
diff --git a/app/.vitepress/src/views/home/ImgCarousel.vue b/app/.vitepress/src/views/home/ImgCarousel.vue
index ae7126aac034bdb770487849bae1c9677c2571ea..7144e900a74c8f384dae7a7bdca4b0478ddf53a9 100644
--- a/app/.vitepress/src/views/home/ImgCarousel.vue
+++ b/app/.vitepress/src/views/home/ImgCarousel.vue
@@ -64,7 +64,6 @@ const changeActive = (index: number) => {
 <style lang="scss" scoped>
 .carousel {
   max-width: 1504px;
-  padding: 40px;
   margin: 0 auto;
   padding: 0;
   h3 {
diff --git a/app/.vitepress/src/views/home/UserCase.vue b/app/.vitepress/src/views/home/UserCase.vue
index 463dac275618df0b13e6362cf64403fdc22147f9..6d695ea7e3e8a1cd5140cdeed256dfd1968dc84d 100644
--- a/app/.vitepress/src/views/home/UserCase.vue
+++ b/app/.vitepress/src/views/home/UserCase.vue
@@ -17,78 +17,81 @@ const changeActive = (index: number) => {
 </script>
 
 <template>
-  <h3>{{ i18n.home.USER_CASE.TITLE }}</h3>
-  <div class="case-mobile">
-    <div
-      v-for="(item, index) in i18n.home.USER_CASE.CASE_LIST"
-      :key="index"
-      class="case-mobile-list"
-    >
-      <OCard
-        :style="{ padding: '0px' }"
-        class="case-mobile-card"
-        @click="changeActive(index)"
+  <div class="case-main">
+    <h3>{{ i18n.home.USER_CASE.TITLE }}</h3>
+    <div class="case-mobile">
+      <div
+        v-for="(item, index) in i18n.home.USER_CASE.CASE_LIST"
+        :key="index"
+        class="case-mobile-list"
       >
-        <div class="case-mobile-card-content">
-          <div class="case-mobile-title">
-            <img
-              class="case-mobile-img"
-              :src="commonStore.theme === 'dark' ? item.URL_DARK : item.URL"
-            />
+        <OCard
+          :style="{ padding: '0px' }"
+          class="case-mobile-card"
+          @click="changeActive(index)"
+        >
+          <div class="case-mobile-card-content">
+            <div class="case-mobile-title">
+              <img
+                class="case-mobile-img"
+                :src="commonStore.theme === 'dark' ? item.URL_DARK : item.URL"
+              />
 
-            <div class="case-mobile-word">{{ item.TYPE }}</div>
+              <div class="case-mobile-word">{{ item.TYPE }}</div>
+            </div>
+            <IconDown class="case-mobile-icon"></IconDown>
+          </div>
+        </OCard>
+        <div v-if="active === index" class="user-mobile">
+          <div
+            v-for="(user, index2) in i18n.home.USER_CASE.CASE_LIST[active]
+              .CONTENT"
+            :key="index2"
+            class="user-card"
+          >
+            <div class="user-title">{{ user.NAME }}</div>
+            <div class="user-word">{{ user.WORD }}</div>
           </div>
-          <IconDown class="case-mobile-icon"></IconDown>
-        </div>
-      </OCard>
-      <div v-if="active === index" class="user-mobile">
-        <div
-          v-for="(user, index2) in i18n.home.USER_CASE.CASE_LIST[active]
-            .CONTENT"
-          :key="index2"
-          class="user-card"
-        >
-          <div class="user-title">{{ user.NAME }}</div>
-          <div class="user-word">{{ user.WORD }}</div>
         </div>
       </div>
     </div>
-  </div>
-  <div class="case">
-    <OCard class="case-card">
-      <div class="case-tab">
-        <div
-          v-for="(item, index) in i18n.home.USER_CASE.CASE_LIST"
-          :key="index"
-          class="case-tab-item"
-        >
-          <img
-            class="case-img"
-            :src="commonStore.theme === 'dark' ? item.URL_DARK : item.URL"
-          />
+    <div class="case">
+      <OCard class="case-card">
+        <div class="case-tab">
+          <div
+            v-for="(item, index) in i18n.home.USER_CASE.CASE_LIST"
+            :key="index"
+            class="case-tab-item"
+          >
+            <img
+              class="case-img"
+              :src="commonStore.theme === 'dark' ? item.URL_DARK : item.URL"
+            />
+            <div
+              :class="['case-word', active === index ? 'active' : '']"
+              @click="changeActive(index)"
+            >
+              {{ item.TYPE }}
+            </div>
+          </div>
+        </div>
+        <div class="case-user">
           <div
-            :class="['case-word', active === index ? 'active' : '']"
-            @click="changeActive(index)"
+            v-for="(item, index) in i18n.home.USER_CASE.CASE_LIST[active]
+              .CONTENT"
+            :key="index"
+            class="user-card"
           >
-            {{ item.TYPE }}
+            <div class="user-title">{{ item.NAME }}</div>
+            <div class="user-word">{{ item.WORD }}</div>
           </div>
         </div>
-      </div>
-      <div class="case-user">
-        <div
-          v-for="(item, index) in i18n.home.USER_CASE.CASE_LIST[active].CONTENT"
-          :key="index"
-          class="user-card"
-        >
-          <div class="user-title">{{ item.NAME }}</div>
-          <div class="user-word">{{ item.WORD }}</div>
+        <div class="case-more">
+          {{ i18n.home.USER_CASE.VIEW_MORE }}
+          <IconArrowRight class="case-more-icon"></IconArrowRight>
         </div>
-      </div>
-      <div class="case-more">
-        {{ i18n.home.USER_CASE.VIEW_MORE }}
-        <IconArrowRight class="case-more-icon"></IconArrowRight>
-      </div>
-    </OCard>
+      </OCard>
+    </div>
   </div>
 </template>
 
@@ -227,6 +230,11 @@ h3 {
   }
 }
 .case {
+  &-main {
+    max-width: 1504px;
+    margin: 0 auto;
+    padding: 0;
+  }
   display: block;
   @media (max-width: 1080px) {
     display: none;
diff --git a/app/en/mirror/index.md b/app/en/mirror/list/index.md
similarity index 100%
rename from app/en/mirror/index.md
rename to app/en/mirror/list/index.md
diff --git a/app/ru/mirror/index.md b/app/ru/mirror/list/index.md
similarity index 100%
rename from app/ru/mirror/index.md
rename to app/ru/mirror/list/index.md
diff --git a/app/zh/mirror/index.md b/app/zh/mirror/list/index.md
similarity index 100%
rename from app/zh/mirror/index.md
rename to app/zh/mirror/list/index.md