feat:手机端兼容性

src/layout/components/Navbar.vue

@@ -132,7 +132,8 @@ export default {
     vertical-align: top;
   }
   .right-menu {
-    float: right;
+    position: fixed;
+    right: 20px;
     height: 100%;
     line-height: 50px;
     display: flex;

src/utils/request.js

@@ -41,7 +41,7 @@ service.interceptors.response.use(
       // 用户模块  先隐藏
       if (res.code === 401) {
         Message.closeAll();
-        MessageBox.confirm(res.msg, '确定登出', {
+        MessageBox.confirm('登录失效，请重新登录', '确定登出', {
           confirmButtonText: '重新登录',
           cancelButtonText: '取消',
           type: 'warning'

src/utils/requestAuth.js

@@ -49,7 +49,7 @@ service.interceptors.response.use(
       // 用户模块
       if (res.code === 401) {
         Message.closeAll();
-        MessageBox.confirm(res.msg, '确定登出', {
+        MessageBox.confirm('登录失效，请重新登录', '确定登出', {
           confirmButtonText: '重新登录',
           cancelButtonText: '取消',
           type: 'warning'

src/views/video/oral-video.vue

@@ -51,190 +51,192 @@
       </div>
     </div>
 
-    <el-table
-      style="width: 100%;"
-      v-loading="listLoading"
-      :key="tableKey"
-      :data="list"
-      row-key="id"
-      stripe
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column
-        label="视频ID"
-        min-width="100"
-        align="center"
-        prop="id"
-      />
-
-      <el-table-column
-        label="视频标题"
-        min-width="150"
-        align="center"
-        prop="videoTitle"
-      />
-      <el-table-column
-        label="视频封面"
-        min-width="110"
-        align="center"
-        prop="videoImg"
+    <div class="table-container">
+      <el-table
+        style="width: 100%"
+        v-loading="listLoading"
+        :key="tableKey"
+        :data="list"
+        row-key="id"
+        stripe
+        border
+        fit
+        highlight-current-row
       >
-        <template slot-scope="scope">
-          <div class="video" @click="handlePlay(scope.row)">
-            <img :src="scope.row.videoImg" class="video-img" />
-            <i class="el-icon-video-play" />
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="SKU" min-width="100" align="center" prop="sku" />
+        <el-table-column
+          label="视频ID"
+          min-width="100"
+          align="center"
+          prop="id"
+        />
 
-      <el-table-column
-        label="SKUID"
-        min-width="100"
-        align="center"
-        prop="skuId"
-      />
-      <el-table-column
-        label="审核状态"
-        min-width="100"
-        align="center"
-        prop="reviewStatus"
-      >
-       <template slot-scope="scope">
-          <span class="status-tag" :class="{
-            'status-pending': scope.row.reviewStatus === 0,
-            'status-success': scope.row.reviewStatus === 1,
-            'status-error': scope.row.reviewStatus === 2
-          }"></span>
-          {{ getValueByKey(scope.row.reviewStatus, auditStatus) }}
-        </template>
-      </el-table-column>
+        <el-table-column
+          label="视频标题"
+          min-width="150"
+          align="center"
+          prop="videoTitle"
+        />
+        <el-table-column
+          label="视频封面"
+          min-width="110"
+          align="center"
+          prop="videoImg"
+        >
+          <template slot-scope="scope">
+            <div class="video" @click="handlePlay(scope.row)">
+              <img :src="scope.row.videoImg" class="video-img" />
+              <i class="el-icon-video-play" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="SKU" min-width="100" align="center" prop="sku" />
 
-      <el-table-column
-        label="审核时间"
-        min-width="100"
-        align="center"
-        prop="reviewTime"
-      />
-      <el-table-column
-        label="审核人"
-        min-width="100"
-        align="center"
-        prop="reviewer"
-      />
-      <el-table-column
-        label="发布状态"
-        min-width="100"
-        align="center"
-        prop="publishStatus"
-      >
-        <template slot-scope="scope">
-          <span class="status-tag" :class="{
-            'status-pending': scope.row.publishStatus === 0,
-            'status-success': scope.row.publishStatus === 1,
-            'status-error': scope.row.publishStatus === 2
-          }"></span>
-          {{ getValueByKey(scope.row.publishStatus, auditStatus) }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="发布时间"
-        min-width="100"
-        align="center"
-        prop="publishTime"
-      />
-      <el-table-column
-        label="发布人"
-        min-width="100"
-        align="center"
-        prop="publisher"
-      />
-      <el-table-column
-        label="关联热词"
-        min-width="100"
-        align="center"
-        prop="hotWords"
-      />
+        <el-table-column
+          label="SKUID"
+          min-width="100"
+          align="center"
+          prop="skuId"
+        />
+        <el-table-column
+          label="审核状态"
+          min-width="100"
+          align="center"
+          prop="reviewStatus"
+        >
+         <template slot-scope="scope">
+            <span class="status-tag" :class="{
+              'status-pending': scope.row.reviewStatus === 0,
+              'status-success': scope.row.reviewStatus === 1,
+              'status-error': scope.row.reviewStatus === 2
+            }"></span>
+            {{ getValueByKey(scope.row.reviewStatus, auditStatus) }}
+          </template>
+        </el-table-column>
 
-      <el-table-column
-        label="直播时间"
-        min-width="100"
-        align="center"
-        prop="liveTime"
-      />
-      <!-- <el-table-column
-        label="直播场次"
-        min-width="100"
-        align="center"
-        prop="liveSession"
-      /> -->
-      <el-table-column
-        label="直播中控"
-        min-width="120"
-        align="center"
-        prop="liveController"
-      >
-      </el-table-column>
+        <el-table-column
+          label="审核时间"
+          min-width="100"
+          align="center"
+          prop="reviewTime"
+        />
+        <el-table-column
+          label="审核人"
+          min-width="100"
+          align="center"
+          prop="reviewer"
+        />
+        <el-table-column
+          label="发布状态"
+          min-width="100"
+          align="center"
+          prop="publishStatus"
+        >
+          <template slot-scope="scope">
+            <span class="status-tag" :class="{
+              'status-pending': scope.row.publishStatus === 0,
+              'status-success': scope.row.publishStatus === 1,
+              'status-error': scope.row.publishStatus === 2
+            }"></span>
+            {{ getValueByKey(scope.row.publishStatus, auditStatus) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="发布时间"
+          min-width="100"
+          align="center"
+          prop="publishTime"
+        />
+        <el-table-column
+          label="发布人"
+          min-width="100"
+          align="center"
+          prop="publisher"
+        />
+        <el-table-column
+          label="关联热词"
+          min-width="100"
+          align="center"
+          prop="hotWords"
+        />
 
-      <el-table-column
-        label="直播间号"
-        min-width="100"
-        align="center"
-        prop="liveRoomId"
-      />
-      <el-table-column
-        label="操作人"
-        min-width="100"
-        align="center"
-        prop="creator"
-      />
+        <el-table-column
+          label="直播时间"
+          min-width="100"
+          align="center"
+          prop="liveTime"
+        />
+        <!-- <el-table-column
+          label="直播场次"
+          min-width="100"
+          align="center"
+          prop="liveSession"
+        /> -->
+        <el-table-column
+          label="直播中控"
+          min-width="120"
+          align="center"
+          prop="liveController"
+        >
+        </el-table-column>
 
-      <el-table-column
-        label="创建时间"
-        min-width="100"
-        align="center"
-        prop="createTime"
-      />
-      <el-table-column
-        label="操作"
-        align="center"
-        min-width="250"
-        fixed="right"
-      >
-        <template slot-scope="scope">
-          <div class="button">
-            <el-button
-              type="primary"
-              :loading="
-                scope.row && scope.row.id
-                  ? downloadingRows[scope.row.id]
-                  : false
-              "
-              size="mini"
-              @click="handleDownload(scope.row)"
-            >
-              下载
-            </el-button>
-            <el-button
-              type="success"
-              size="mini"
-              @click="handlePlay(scope.row)"
-            >
-              播放
-            </el-button>
-            <el-button
-              type="danger"
-              size="mini"
-              @click="handleDelete(scope.row)"
-            >
-              删除
-            </el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table-column
+          label="直播间号"
+          min-width="100"
+          align="center"
+          prop="liveRoomId"
+        />
+        <el-table-column
+          label="操作人"
+          min-width="100"
+          align="center"
+          prop="creator"
+        />
+
+        <el-table-column
+          label="创建时间"
+          min-width="100"
+          align="center"
+          prop="createTime"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          min-width="250"
+          v-bind="device !== 'mobile' ? {fixed: 'right'} : {  }"
+        >
+          <template slot-scope="scope">
+            <div class="button">
+              <el-button
+                type="primary"
+                :loading="
+                  scope.row && scope.row.id
+                    ? downloadingRows[scope.row.id]
+                    : false
+                "
+                size="mini"
+                @click="handleDownload(scope.row)"
+              >
+                下载
+              </el-button>
+              <el-button
+                type="success"
+                size="mini"
+                @click="handlePlay(scope.row)"
+              >
+                播放
+              </el-button>
+              <el-button
+                type="danger"
+                size="mini"
+                @click="handleDelete(scope.row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
 
     <!-- 分页 -->
     <swPage
@@ -264,6 +266,7 @@ import { getValueByKey } from "@/utils/index";
 import { fetchOralVideoList, deleteOralVideoList } from "@/api/video";
 import downloadUtil from "@/utils/downloadUtil";
 import VideoPlayer from "@/components/VideoPlayer";
+import { mapGetters } from "vuex";
 
 export default {
   name: "oralVideo",
@@ -274,6 +277,9 @@ export default {
     swPage,
     VideoPlayer
   },
+  computed: {
+    ...mapGetters(['device']) // 从 vuex 中获取设备类型
+  },
   data() {
     return {
       auditStatus,
@@ -372,6 +378,10 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+}
 @import "../../styles/layout.scss";
 .button {
   .el-button {