专题管理-PC端专栏保存后，手机端专栏未显示

src/router/routes/basic.ts

@@ -23,6 +23,16 @@ export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
         hideMenu: true,
       },
     },
+    {
+      path: '/welcome',
+      name: PAGE_NOT_FOUND_NAME,
+      component: EXCEPTION_COMPONENT,
+      meta: {
+        title: 'Welcome',
+        hideBreadcrumb: true,
+        hideMenu: true,
+      },
+    },
   ],
 };
 

src/views/demo/system/specialcolumn/Modal/index.vue

@@ -2,6 +2,8 @@
   <BasicModal
     v-bind="$attrs"
     :title="modaltitle"
+    centered="true"
+    height="700"
     @register="registerModal"
     @ok="modalSubmit"
     @cancel="closeModal"
@@ -22,19 +24,26 @@
       <a-form-item label="LOGO名称" name="logoTitle">
         <a-input v-model:value="modalData.logoTitle" />
       </a-form-item>
-      <a-form-item label="状态" name="isShow">
+      <a-form-item label="在PC端的状态" name="isShow">
         <a-select v-model:value="modalData.isShow">
           <a-select-option :value="true">启用</a-select-option>
           <a-select-option :value="false">停用</a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item label="是否开放" name="isDevelop">
+      <a-form-item label="是否在PC端开放" name="isDevelop">
         <a-switch
           v-model:checked="modalData.isDevelop"
           checked-children="开放"
           un-checked-children="不开放"
         />
       </a-form-item>
+      <a-form-item label="是否在APP端显示" name="appShow">
+        <a-switch
+          v-model:checked="modalData.appShow"
+          checked-children="显示"
+          un-checked-children="不显示"
+        />
+      </a-form-item>
       <a-form-item label="流程分类" name="category">
         <a-select
           v-model:value="modalData.category"
@@ -106,8 +115,9 @@
     id: '' as string,
     title: '' as string,
     logoTitle: '' as string,
-    isShow: true as boolean,
+    isShow: false as boolean,
     isDevelop: false as boolean,
+    appShow: false as boolean,
     isExternal: false as boolean,
     linkOrApi: '' as string,
     sort: 0 as number,

src/views/demo/system/specialcolumn/index.data.ts

@@ -15,12 +15,12 @@ export const columns: BasicColumn[] = [
   {
     title: '名称',
     dataIndex: 'title',
-    width: 300,
+    width: 150,
   },
   {
     title: 'LOGO名称',
     dataIndex: 'logoTitle',
-    width: 200,
+    width: 150,
   },
   {
     title: '类型',
@@ -33,14 +33,19 @@ export const columns: BasicColumn[] = [
     ifShow: false,
   },
   {
-    title: '状态',
+    title: '在PC端的状态',
     dataIndex: 'isShow',
-    width: 200,
+    width: 150,
   },
   {
-    title: '是否开放',
+    title: '是否在PC端开放',
     dataIndex: 'isDevelop',
-    width: 100,
+    width: 150,
+  },
+  {
+    title: '是否在APP端显示',
+    dataIndex: 'appShow',
+    width: 150,
   },
   {
     title: '排序',

src/views/demo/system/specialcolumn/index.vue

@@ -21,6 +21,10 @@
           <a-tag color="yellow" v-if="record.isDevelop">开放</a-tag>
           <a-tag color="gray" v-else>不开放</a-tag>
         </template>
+        <template v-if="column.key === 'appShow'">
+          <a-tag color="orange" v-if="record.appShow">显示</a-tag>
+          <a-tag color="gray" v-else>不显示</a-tag>
+        </template>
         <template v-if="column.key === 'action'">
           <a-button
             v-if="(nowPage - 1) * nowLimit + index != 0"
@@ -76,8 +80,9 @@
       id: '' as string,
       title: '' as string,
       logoTitle: '' as string,
-      isShow: true as boolean,
+      isShow: false as boolean,
       isDevelop: false as boolean,
+      appShow: false as boolean,
       isExternal: false as boolean,
       linkOrApi: '' as string,
       sort: 0 as number,
@@ -145,8 +150,9 @@
           id: '',
           title: '',
           logoTitle: '',
-          isShow: true,
+          isShow: false,
           isDevelop: false,
+          appShow: false,
           isExternal: false,
           linkOrApi: '',
           sort: total + 1,

src/views/subject/index.vue

@@ -1,20 +1,35 @@
 <template>
   <div class="subject">
     <div class="subject_header">
-      <img class="subject_header_img" src="/subject/subject_header.png" />
+      <img
-      <div class="subject_header_title">
+        class="subject_header_img"
+        src="/subject/subject_header.png"
+        :style="{
+          width: '100%',
+          height: `${82 * bi}px`,
+        }"
+      />
+      <div
+        class="subject_header_title"
+        :style="{
+          position: 'relative',
+          top: `${-85 * bi}px`,
+        }"
+      >
         <span
           :style="{
             fontSize: `${42 * bi}px`,
+            height: `${82 * bi}px`,
           }"
         >
           <img
             src="/subject/subject_logo.png"
             :style="{
-              top: `${3 * bi}px`,
+              position: 'relative',
+              top: `${4 * bi}px`,
               width: `${78 * bi}px`,
-              height: `${71 * bi}px`,
+              height: `${70 * bi}px`,
-              marginRight: `${10 * bi}px`,
+              marginRight: `${5 * bi}px`,
             }"
           />
           {{ t('sys.subject.header_title') }}
@@ -33,10 +48,11 @@
         class="subject_box_btn"
         ref="contentArea"
         :style="{
-          top: `${50}px`,
+          position: 'relative',
-          left: `${85 * bi}px`,
+          top: `${getBoxBtnAttribute()[0]}px`,
-          height: `${688 * bi}px`,
+          left: `${getBoxBtnAttribute()[1] * bi}px`,
-          width: `${1750 * bi}px`,
+          height: `${getBoxBtnAttribute()[2] * bi}px`,
+          width: `${getBoxBtnAttribute()[3] * bi}px`,
         }"
       >
         <div
@@ -46,7 +62,8 @@
           class="subject_box_btn_div"
           @click="getHome(item)"
           :style="{
-            marginRight: `${25 * bi}px`,
+            marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
+            marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
             marginBottom: `${20 * bi}px`,
             height: `${325 * bi}px`,
             width: `${225 * bi}px`,
@@ -59,7 +76,7 @@
             class="subject_box_btn_div_url"
             :src="getImageUrl(item.imgUrl)"
             :style="{
-              left: `${11 * bi}px`,
+              left: `${21 * bi}px`,
               width: `${191 * bi}px`,
               height: `${191 * bi}px`,
             }"
@@ -68,18 +85,18 @@
             class="subject_box_btn_div_span"
             v-html="renderedTitle(item.title)"
             :style="{
-              fontSize: `${28 * bi}px`,
+              fontSize: `${fotSize * bi}px`,
-              left: `${12 * bi}px`,
+              left: `${22 * bi}px`,
               width: `${190 * bi}px`,
-              height: `${(28 * spanWrap + 7) * bi}px`,
+              height: `${(fotSize * spanWrap + 7) * bi}px`,
             }"
           />
           <img
             class="subject_box_btn_div_line"
             src="/subject/subject_line.png"
             :style="{
-              top: `${(14 * getWrap(item.title) - 14 * (spanWrap - 1) - 7) * bi}px`,
+              top: `${((fotSize / 2) * getWrap(item.title) - (fotSize / 2) * (spanWrap - 1) - 7) * bi}px`,
-              left: `${42 * bi}px`,
+              left: `${52 * bi}px`,
               width: `${128 * bi}px`,
               height: `${7 * bi}px`,
             }"
@@ -88,8 +105,8 @@
             class="circle arc1"
             :style="{
               position: 'absolute',
-              top: `${104 * bi}px`,
+              top: `${92 * bi}px`,
-              left: `${120 * bi}px`,
+              left: `${117 * bi}px`,
               width: `${126 * bi}px`,
               height: `${126 * bi}px`,
             }"
@@ -98,8 +115,8 @@
             class="circle arc2"
             :style="{
               position: 'absolute',
-              top: `${104 * bi}px`,
+              top: `${92 * bi}px`,
-              left: `${120 * bi}px`,
+              left: `${117 * bi}px`,
               width: `${126 * bi}px`,
               height: `${126 * bi}px`,
             }"
@@ -108,8 +125,8 @@
             class="circle arc3"
             :style="{
               position: 'absolute',
-              top: `${104 * bi}px`,
+              top: `${92 * bi}px`,
-              left: `${120 * bi}px`,
+              left: `${117 * bi}px`,
               width: `${126 * bi}px`,
               height: `${126 * bi}px`,
             }"
@@ -118,8 +135,8 @@
             class="circle arc4"
             :style="{
               position: 'absolute',
-              top: `${104 * bi}px`,
+              top: `${92 * bi}px`,
-              left: `${120 * bi}px`,
+              left: `${117 * bi}px`,
               width: `${126 * bi}px`,
               height: `${126 * bi}px`,
             }"
@@ -262,6 +279,53 @@
   const viewportHeight = ref(window.innerHeight);
   const referenceWidth = 1920;
   const referenceHeight = 1080;
+  const fotSize = ref(28);
+
+  // 计算不同数量的选项卡的布局属性
+  function getBoxBtnAttribute() {
+    let box: any = [];
+    box[0] = 80;
+    box[1] = 85;
+    box[2] = 700;
+    box[3] = 1750;
+    box[4] = 12;
+    // if (list.value.length <= 7) {
+    //   box[0] = 80;
+    //   box[1] = 85;
+    //   box[2] = 700;
+    //   box[3] = 1750;
+    //   box[4] = 12;
+    // }
+    // if (list.value.length == 8) {
+    //   box[0] = 80;
+    //   box[1] = 185;
+    //   box[2] = 700;
+    //   box[3] = 1550;
+    //   box[4] = 50;
+    // }
+    // if (list.value.length == 9 || list.value.length == 10) {
+    //   box[0] = 80;
+    //   box[1] = 135;
+    //   box[2] = 700;
+    //   box[3] = 1650;
+    //   box[4] = 50;
+    // }
+    // if (list.value.length == 11 || list.value.length == 12) {
+    //   box[0] = 80;
+    //   box[1] = 85;
+    //   box[2] = 700;
+    //   box[3] = 1750;
+    //   box[4] = 30;
+    // }
+    // if (list.value.length == 13 || list.value.length == 14) {
+    //   box[0] = 80;
+    //   box[1] = 85;
+    //   box[2] = 700;
+    //   box[3] = 1750;
+    //   box[4] = 12;
+    // }
+    return box;
+  }
 
   const updateWindowSize = () => {
     viewportWidth.value = window.innerWidth;
@@ -291,42 +355,26 @@
     background-attachment: fixed;
     width: 100%;
     height: 100%;
+
+    // 页面不能被选中
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE/Edge */
     user-select: none;
 
     &_header {
-      &_img {
-        height: 82px;
-        width: 100%;
-      }
-
       &_title {
-        position: relative;
-        top: -87px;
-
         span {
-          img {
-            position: relative;
-            top: 3px;
-            width: 78px;
-            height: 71px;
-            margin-right: 10px;
-          }
-
           display: inline-flex;
           align-items: center;
           text-align: center;
           justify-content: center;
           width: 100%;
-          height: 82px;
           font-family: 068-SSZhengYaTi;
           font-weight: 400;
-          font-size: 42px;
           color: #ffffff;
           font-weight: 900 !important;
-          letter-spacing: 2px;
+          letter-spacing: 1.5px;
         }
       }
 
@@ -370,30 +418,21 @@
         justify-content: center;
         display: flex;
         flex-wrap: wrap;
-        position: relative;
-        top: 50px;
-        // left: 100px;
-        height: 688px;
-        width: 100%;
         display: flex;
         overflow-x: hidden;
         overflow-y: auto;
+
+        // 隐藏滚动条
         -ms-overflow-style: none; /* IE 和 Edge */
         scrollbar-width: none; /* Firefox */
-
         ::-webkit-scrollbar {
           display: none; /* Chrome, Safari, Opera */
         }
 
         &_div {
+          // 弹性子元素（flex item）的弹性行为
           flex: 0 0 auto;
-          margin-right: 20px;
-          margin-bottom: 20px;
-          height: 320px;
-          width: 225px;
-
           transition: all 0.3s ease;
-          padding: 10px;
 
           // 定义旋转
           // 设置透视距离