Merge branch 'main' of http://123.132.248.154:10000/gitY/LanLingXiangMu

src/router/routes/index.ts

@@ -85,7 +85,7 @@ export const SchemeRoute: AppRouteRecordRaw = {
 export const SubjectRoute: AppRouteRecordRaw = {
   path: '/subject',
   name: 'subject',
-  component: () => import('@/views/subject/subject_lindidiaocha/index.vue'),
+  component: () => import('@/views/subject/subject/index.vue'),
   meta: {
     title: '主题',
   },

src/views/subject/subject/index.vue

@@ -1,58 +1,87 @@
 <template>
   <div class="subject">
-    <div class="subject_header">
+    <div class="subject_top">
       <img
-        class="subject_header_img"
-        src="/subject/subject_header.png"
+        class="subject_top_img"
+        src="/subject/top.png"
         :style="{
           width: '100%',
-          height: `${82 * bi}px`,
+          height: `${116 * bi}px`,
         }"
       />
       <div
-        class="subject_header_title"
+        class="subject_top_title"
         :style="{
           position: 'relative',
-          top: `${-85 * bi}px`,
+          top: `${-116 * bi}px`,
         }"
       >
         <span
           :style="{
-            fontSize: `${42 * bi}px`,
-            height: `${82 * bi}px`,
+            position: 'relative',
+            fontSize: `${55 * bi}px`,
+            top: `${-20 * bi}px`,
+            height: `${116 * bi}px`,
           }"
         >
           <img
-            src="/subject/subject_logo.png"
+            src="/subject/logo.png"
             :style="{
               position: 'relative',
               top: `${4 * bi}px`,
-              width: `${78 * bi}px`,
-              height: `${70 * bi}px`,
+              width: `${80 * bi}px`,
+              height: `${75 * bi}px`,
               marginRight: `${5 * bi}px`,
             }"
           />
           {{ t('sys.subject.header_title') }}
         </span>
       </div>
-      <div class="subject_header_currentTime">
-        <span class="subject_header_currentTime_date">
+      <div
+        class="subject_top_currentTime"
+        :style="{
+          left: `${87 * bi}px`,
+          top: `${0 * bi}px`,
+          height: `${40 * bi}px`,
+        }"
+      >
+        <span class="subject_top_currentTime_date">
           {{ currentTime_date }}
         </span>
-        <div class="subject_header_currentTime_div">
+        <div class="subject_top_currentTime_div">
           <div> {{ currentTime_week }} </div>
           <div> {{ currentTime_year }} </div>
         </div>
       </div>
-      <div class="subject_header_adminAndLogout">
-        <img src="/subject/subject_header_admin.png" />
-        <span> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
+      <div
+        class="subject_top_adminAndLogout"
+        :style="{
+          right: `${40 * bi}px`,
+          top: `${0 * bi}px`,
+          height: `${40 * bi}px`,
+        }"
+      >
+        <span class="loginUser"> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
+        &nbsp;&nbsp;
+        <img src="/subject/setting.png" @click="getHome(setting)" />
+        &nbsp;&nbsp;
+        <span class="line" @click="getHome(setting)"> {{ setting.title }} &nbsp;&nbsp;</span>
+        <span class="line"> | </span>
         &nbsp;&nbsp;&nbsp;&nbsp;
-        <img src="/subject/subject_header_logout.png" @click="handleLoginOut()" />
-        <span @click="handleLoginOut()">{{ t('sys.subject.header_logout') }}</span>
+        <img src="/subject/logout.png" @click="handleLoginOut()" />
       </div>
     </div>
-    <div class="subject_box">
+
+    <img class="subject_left" src="/subject/left.png" />
+    <img class="subject_right" src="/subject/right.png" />
+
+    <div
+      class="subject_box"
+      :style="{
+        position: 'relative',
+        top: `${-100 * bi}px`,
+      }"
+    >
       <div
         class="subject_box_btn"
         ref="contentArea"
@@ -65,7 +94,7 @@
         }"
       >
         <div
-          v-for="(item, index) in list"
+          v-for="item in list"
           :key="item.id"
           :id="item.id"
           class="subject_box_btn_div"
@@ -73,122 +102,153 @@
           :style="{
             marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
             marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
-            marginBottom: `${20 * bi}px`,
-            height: `${325 * bi}px`,
-            width: `${225 * bi}px`,
-            'background-image': `url(${index % 2 == 0 ? '/subject/subject_btn_1.png' : '/subject/subject_btn_2.png'})`,
+            marginBottom: `${10 * bi}px`,
+            height: `${300 * bi}px`,
+            width: `${210 * bi}px`,
+            'background-image': `url(${item.isHover ? '/subject/btn_2.png' : '/subject/btn_1.png'})`,
             'background-size': `${100}%`,
             'background-repeat': 'no-repeat',
           }"
+          @mouseenter="item.isHover = true"
+          @mouseleave="item.isHover = false"
         >
           <img
-            class="subject_box_btn_div_url"
-            :src="getImageUrl(item.imgUrl)"
+            class="subject_box_btn_div_img"
+            :src="
+              item.isHover
+                ? '/subject/line1_hover.png'
+                : '/subject/line1.png'
+            "
             :style="{
-              left: `${21 * bi}px`,
-              width: `${191 * bi}px`,
-              height: `${191 * bi}px`,
+              position: 'relative',
+              display: 'block',
+              top: `${(200 - ((fotSize + 3) / 2) * getWrap(item.title)) * bi}px`,
+              left: `${25 * bi}px`,
+              width: `${160 * bi}px`,
+              height: `${3 * bi}px`,
+            }"
+          />
+          <img
+            class="subject_box_btn_div_img"
+            :src="
+              item.isHover
+                ? '/subject/line2_hover.png'
+                : '/subject/line2.png'
+            "
+            :style="{
+              position: 'relative',
+              top: `${(180 + ((fotSize + 3) / 2) * (getWrap(item.title) + 1)) * bi}px`,
+              width: `${160 * bi}px`,
+              height: `${3 * bi}px`,
             }"
           />
           <span
             class="subject_box_btn_div_span"
             v-html="renderedTitle(item.title)"
-            :style="{
-              fontSize: `${fotSize * bi}px`,
-              left: `${22 * bi}px`,
-              width: `${190 * bi}px`,
-              height: `${(fotSize * spanWrap + 7) * bi}px`,
-            }"
+            :style="
+              item.title.length > 10
+                ? {
+                    fontSize: `${fotSize * bi}px`,
+                    lineHeight: '30px',
+                    top: `${(180 - (fotSize / 2) * spanWrap) * bi - 30}px`,
+                    width: `${fotSize * 6 * bi}px`,
+                    height: `${(fotSize + 3) * spanWrap * (bi + 2)}px`,
+                  }
+                : {
+                    fontSize: `${fotSize * bi}px`,
+                    lineHeight: '30px',
+                    top: `${(180 - (fotSize / 2) * spanWrap) * bi}px`,
+                    width: `${fotSize * 6 * bi}px`,
+                    height: `${(fotSize + 3) * spanWrap * bi}px`,
+                  }
+            "
           />
           <img
-            class="subject_box_btn_div_line"
-            src="/subject/subject_line.png"
-            :style="{
-              top: `${((fotSize / 2) * getWrap(item.title) - (fotSize / 2) * (spanWrap - 1) - 7) * bi}px`,
-              left: `${52 * bi}px`,
-              width: `${128 * bi}px`,
-              height: `${7 * bi}px`,
-            }"
+            src="/subject/nochoose.png"
+            :style="
+              item.title.length > 10
+                ? {
+                    display: 'block',
+                    position: 'relative',
+                    top: `${(20 - fotSize * spanWrap) * bi - 64}px`,
+                    left: `${55 * bi}px`,
+                    width: `${100 * bi}px`,
+                    height: `${100 * bi}px`,
+                    zIndex: 2,
+                  }
+                : {
+                    display: 'block',
+                    position: 'relative',
+                    top: `${(20 - fotSize * spanWrap) * bi}px`,
+                    left: `${55 * bi}px`,
+                    width: `${100 * bi}px`,
+                    height: `${100 * bi}px`,
+                    zIndex: 2,
+                  }
+            "
           />
-          <div
-            class="circle arc1"
-            :style="{
-              position: 'absolute',
-              top: `${92 * bi}px`,
-              left: `${117 * bi}px`,
-              width: `${126 * bi}px`,
-              height: `${126 * bi}px`,
-            }"
+          <img
+            :src="getImageUrl(item.imgUrl)"
+            :style="
+              item.title.length > 10
+                ? {
+                    display: 'block',
+                    position: 'relative',
+                    top: `${(-55 - fotSize * spanWrap) * bi - 64}px`,
+                    left: `${75 * bi}px`,
+                    width: `${60 * bi}px`,
+                    height: `${58 * bi}px`,
+                    zIndex: 3,
+                  }
+                : {
+                    display: 'block',
+                    position: 'relative',
+                    top: `${(-55 - fotSize * spanWrap) * bi}px`,
+                    left: `${75 * bi}px`,
+                    width: `${60 * bi}px`,
+                    height: `${58 * bi}px`,
+                    zIndex: 3,
+                  }
+            "
           />
-          <div
-            class="circle arc2"
-            :style="{
-              position: 'absolute',
-              top: `${92 * bi}px`,
-              left: `${117 * bi}px`,
-              width: `${126 * bi}px`,
-              height: `${126 * bi}px`,
-            }"
-          />
-          <div
-            class="circle arc3"
-            :style="{
-              position: 'absolute',
-              top: `${92 * bi}px`,
-              left: `${117 * bi}px`,
-              width: `${126 * bi}px`,
-              height: `${126 * bi}px`,
-            }"
-          />
-          <div
-            class="circle arc4"
-            :style="{
-              position: 'absolute',
-              top: `${92 * bi}px`,
-              left: `${117 * bi}px`,
-              width: `${126 * bi}px`,
-              height: `${126 * bi}px`,
-            }"
+          <img
+            v-show="item.isHover"
+            src="/subject/choose.png"
+            :style="
+              item.title.length > 10
+                ? {
+                    position: 'relative',
+                    top: `${(-127 - fotSize * spanWrap) * bi - 64}px`,
+                    width: `${70 * bi}px`,
+                    height: `${75 * bi}px`,
+                    zIndex: 4,
+                  }
+                : {
+                    position: 'relative',
+                    top: `${(-127 - fotSize * spanWrap) * bi}px`,
+                    width: `${70 * bi}px`,
+                    height: `${75 * bi}px`,
+                    zIndex: 4,
+                  }
+            "
           />
         </div>
       </div>
-      <!-- <div class="subject_box_overflow">
-        <Icon
-          style="font-size: 31px"
-          class="subject_box_overflow_icon1"
-          icon="ant-design:up-outlined"
-          @click="scrollToElement('top')"
-        />
-        <Icon
-          style="font-size: 31px"
-          class="subject_box_overflow_icon2"
-          icon="ant-design:down-outlined"
-          @click="scrollToElement('bottom')"
-        />
-      </div> -->
     </div>
     <div class="subject_bottom">
-      <!-- <span>
-        {{ t('sys.subject.bottom_copyright') }}
-        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
-        {{ t('sys.subject.bottom_support') }}
-        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
-        {{ t('sys.subject.bottom_version') }}
-      </span> -->
+      <img src="/subject/bottom.png" />
       <span>
         {{
           VITE_GLOB_APP_MANAGEMENT_UNIT
             ? VITE_GLOB_APP_MANAGEMENT_UNIT
-            : t('sys.subject.bottom_copyright')
+            : t('sys.subject.bottom_copyright_lindidiaocha')
         }}
-        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         {{
           VITE_GLOB_APP_TECHINICAL_SUPPORT
             ? VITE_GLOB_APP_TECHINICAL_SUPPORT
             : t('sys.subject.bottom_support')
         }}
-        &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
-        {{ VITE_GLOB_APP_VERSIONS ? VITE_GLOB_APP_VERSIONS : t('sys.subject.bottom_version') }}
       </span>
     </div>
   </div>
@@ -218,51 +278,26 @@
   const list: any = ref([]);
   const userStore = useUserStore();
   const spanWrap = ref(1);
+  const setting = ref({});
 
   async function getData() {
     const res: any = await getSpecialData();
     // 最大标题文字行数
-    res?.forEach((item) => {
-      if (Math.ceil(item.title.length / 6) > spanWrap.value) {
-        spanWrap.value = Math.ceil(item.title.length / 6);
+    res?.forEach((item, index) => {
+      if (item.title == '系统管理') {
+        setting.value = item;
+        res.splice(index, 1);
+      } else {
+        res.isHover = false;
+        if (Math.ceil(item.title.length / 6) > spanWrap.value) {
+          spanWrap.value = Math.ceil(item.title.length / 6);
+        }
       }
     });
     list.value = res;
     loginUser.value = localStorage.getItem('fireUserLoginName');
-    // cardRotationLoop();
-  }
-  // 旋转动画
-  async function cardRotationLoop() {
-    nextTick(() => {
-      list.value.forEach((item, index) => {
-        setTimeout(() => {
-          const element: any = document.getElementById(item.id);
-          element.classList.remove('cardRotationState');
-          element.classList.add('cardRotation');
-          setTimeout(() => {
-            element.classList.add('cardRotationState');
-          }, 5000);
-          if (index == list.value.length - 1) {
-            setTimeout(() => {
-              cardRotationLoop();
-            }, 8000);
-          }
-        }, index * 8000);
-      });
-    });
   }
 
-  // 按键控制滚动条
-  const scrollToElement = async (type) => {
-    if (contentArea.value) {
-      if (type == 'top' && contentArea.value.scrollTop != 0) {
-        contentArea.value.scrollTop = contentArea.value.scrollTop - 344;
-      }
-      if (type == 'bottom' && contentArea.value.scrollTop != contentArea.value.scrollHeight) {
-        contentArea.value.scrollTop = contentArea.value.scrollTop + 344;
-      }
-    }
-  };
   // 跳转
   async function getHome(item) {
     console.log(window.innerWidth);
@@ -289,7 +324,7 @@
     if (imgUrl) {
       return VITE_GLOB_API_URL_VAR.value + imgUrl;
     } else {
-      return '/subject/subject_default.png';
+      return '/subject/default.png';
     }
   }
   // 标题换行
@@ -306,62 +341,22 @@
   }
   // 分辨率
   const viewportWidth = ref(window.innerWidth);
-  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[0] = 0;
+    box[1] = 330;
     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;
-    // }
+    box[3] = 1440;
+    box[4] = 20;
     return box;
   }
-
   const updateWindowSize = () => {
     viewportWidth.value = window.innerWidth;
-    viewportHeight.value = window.innerHeight;
   };
-
   const bi = computed(() => {
     return viewportWidth.value / referenceWidth;
   });
@@ -397,7 +392,7 @@
 </script>
 <style lang="less" scoped>
   .subject {
-    background-image: url('/subject/subject_bg.png');
+    background-image: url('/subject/bg.png');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
@@ -411,7 +406,7 @@
     -ms-user-select: none; /* IE/Edge */
     user-select: none;
 
-    &_header {
+    &_top {
       &_title {
         span {
           display: inline-flex;
@@ -419,19 +414,23 @@
           text-align: center;
           justify-content: center;
           width: 100%;
-          font-family: 068-SSZhengYaTi;
-          font-weight: 400;
+
+          font-family: Alimama ShuHeiTi;
           color: #ffffff;
+          // text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
+          background: linear-gradient(268deg, #f8fbff 0%, #ffffff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          color: transparent;
           font-weight: 900 !important;
-          letter-spacing: 1.5px;
+
+          letter-spacing: 2px;
         }
       }
 
       &_currentTime {
         position: absolute;
-        left: 87px;
-        top: 4px;
-        height: 40px;
         display: inline-flex;
         align-items: center;
 
@@ -464,42 +463,60 @@
 
       &_adminAndLogout {
         position: absolute;
-        right: 87px;
-        top: 0px;
-        height: 40px;
         display: inline-flex;
         align-items: center;
+        cursor: pointer;
 
         img {
-          cursor: pointer;
-          width: 31px;
-          height: 31px;
+          width: 18px;
+          height: 18px;
         }
 
-        span {
-          cursor: pointer;
+        .loginUser {
           display: inline-flex;
           align-items: center;
           text-align: center;
           justify-content: center;
           height: 14px;
+
           font-family: Microsoft YaHei;
           font-weight: 400;
-          font-size: 14px;
-          color: #006cff;
-          line-height: 28px;
+          font-size: 18px;
+          color: #ffffff;
+          line-height: 24px;
+        }
+
+        .line {
+          position: relative;
+          top: 0px;
+          font-size: 18px;
+          color: #ffffff;
         }
       }
     }
 
+    &_left {
+      position: absolute;
+      height: 93%;
+      bottom: 10px;
+      left: 10px;
+    }
+
+    &_right {
+      position: absolute;
+      height: 93%;
+      bottom: 10px;
+      right: 10px;
+    }
+
     &_box {
       display: flex;
       position: relative;
-      top: -82px;
+      height: calc(100%);
 
       &_btn {
         align-items: center;
-        justify-content: center;
+        // justify-content: center;
         display: flex;
         flex-wrap: wrap;
         display: flex;
@@ -515,41 +532,27 @@
 
         &_div {
           // 弹性子元素（flex item）的弹性行为
-          flex: 0 0 auto;
+          // flex: 0 0 auto;
+          display: block;
           transition: all 0.3s ease;
+          cursor: pointer;
+          align-items: center;
+          text-align: center;
+          justify-content: center;
 
-          // 定义旋转
-          // 设置透视距离
-          perspective: 1000px;
-          // 添加过渡效果
-          transition: transform 1s;
-          // 定义旋转动画
-          // animation: cardRotation 5s linear infinite;
+          &:hover &_span {
+            font-family: Alimama ShuHeiTi;
+            font-weight: 900 !important;
+            color: #ffffff !important;
+            background: #ffffff;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            color: transparent;
+          }
 
-          &:hover {
+          &:hover &_img {
             filter: brightness(150%);
-            cursor: pointer;
-            box-shadow: 20px 10px 10px rgba(0, 0, 0, 0.5);
-
-            // 定义旋转
-            // 暂停动画
-            animation-play-state: paused;
-            // 过渡效果
-            transition: transform 1s ease;
-            // 立即回到正面
-            transform: rotateY(0deg) !important;
-          }
-
-          &_bg {
-            height: 324px;
-          }
-
-          &_url {
-            position: relative;
-            top: 0px;
-            left: 11px;
-            width: 191px;
-            height: 191px;
           }
 
           &_span {
@@ -558,168 +561,44 @@
             text-align: center;
             justify-content: center;
             position: relative;
-            // top: -300px;
-            left: 12px;
-            width: 190px;
-            // 字体样式
-            font-size: 28px;
 
-            font-family: 'Microsoft YaHei';
+            // 字体样式
+            font-family: Alimama ShuHeiTi;
+            font-weight: bold;
+            font-size: 23px;
             color: #ffffff;
-            background: linear-gradient(0deg, #6da7ff 0%, #e2ebff 100%);
+            line-height: 15px;
+            // text-shadow: 0px 2px 6px rgba(10, 30, 52, 0.48);
+            background: linear-gradient(0deg, #5db1fc 0%, #e2ebff 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             color: transparent;
             font-weight: 900 !important;
           }
-
-          &_line {
-            position: relative;
-            left: 42px;
-            width: 128px;
-            height: 7px;
-          }
         }
       }
-
-      // &_overflow {
-      //   position: absolute;
-      //   top: 220px;
-      //   right: -110px;
-      //   height: 300px;
-      //   width: 110px;
-
-      //   &_icon1 {
-      //     color: #006cff;
-      //     cursor: pointer;
-      //     position: relative;
-      //     top: 100px;
-      //     right: 85px;
-      //   }
-
-      //   &_icon2 {
-      //     color: #006cff;
-      //     cursor: pointer;
-      //     position: relative;
-      //     top: 200px;
-      //     right: 115px;
-      //   }
-      // }
     }
 
     &_bottom {
       span {
-        width: 902px;
+        position: absolute;
+        bottom: 10px;
+        left: calc(50% - 660px / 2);
+        width: 660px;
         height: 18px;
         font-family: PingFang SC;
         font-weight: 400;
         font-size: 18px;
-        color: #5eb2ff;
+        color: #ffffff;
       }
-      position: absolute;
-      top: 95%;
-      left: calc(50% - 902px / 2);
-    }
-  }
 
-  // 四条旋转的弧线
-  .circle {
-    transform-origin: 50% 50%;
-    width: 126px;
-    height: 126px;
-    border-radius: 50%;
-    background-color: transparent;
-    border: 3px solid #276fff;
-  }
-
-  .arc1 {
-    position: relative;
-    // top: -142px;
-    left: 108px;
-    clip-path: inset(0 55% 55% 0);
-    animation: rotateArc1 8s linear infinite;
-  }
-
-  .arc2 {
-    position: relative;
-    top: -268px;
-    left: 108px;
-    clip-path: inset(55% 0 0 55%);
-    transform: rotate(90deg);
-    animation: rotateArc2 8s linear infinite;
-  }
-
-  .arc3 {
-    position: relative;
-    top: -394px;
-    left: 108px;
-    clip-path: inset(0 55% 55% 0);
-    transform: rotate(180deg);
-    animation: rotateArc3 8s linear infinite;
-  }
-
-  .arc4 {
-    position: relative;
-    top: -520px;
-    left: 108px;
-    clip-path: inset(55% 0 0 55%);
-    transform: rotate(270deg);
-    animation: rotateArc4 8s linear infinite;
-  }
-
-  @keyframes rotateArc1 {
-    0% {
-      transform: translate(-50%, -50%) rotate(0deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotate(360deg);
-    }
-  }
-
-  @keyframes rotateArc2 {
-    0% {
-      transform: translate(-50%, -50%) rotate(90deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotate(450deg);
-    }
-  }
-
-  @keyframes rotateArc3 {
-    0% {
-      transform: translate(-50%, -50%) rotate(180deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotate(540deg);
-    }
-  }
-
-  @keyframes rotateArc4 {
-    0% {
-      transform: translate(-50%, -50%) rotate(270deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotate(630deg);
-    }
-  }
-  // 开启旋转动画
-  .cardRotation {
-    animation: cardRotation 5s linear infinite;
-  }
-  // 关闭旋转动画
-  .cardRotationState {
-    animation-play-state: paused;
-    transition: transform 3s ease;
-    transform: rotateY(0deg) !important;
-  }
-  // 定义旋转动画
-  @keyframes cardRotation {
-    0% {
-      transform: rotateY(0deg);
-    }
-    100% {
-      transform: rotateY(-360deg);
+      img {
+        position: absolute;
+        width: 100%;
+        bottom: 0px;
+        height: 57px;
+      }
     }
   }
 </style>

src/views/subject/subject_lindidiaocha/index.vue

@@ -1,604 +0,0 @@
-<template>
-  <div class="subject">
-    <div class="subject_top">
-      <img
-        class="subject_top_img"
-        src="/subject_lindidiaocha/top.png"
-        :style="{
-          width: '100%',
-          height: `${116 * bi}px`,
-        }"
-      />
-      <div
-        class="subject_top_title"
-        :style="{
-          position: 'relative',
-          top: `${-116 * bi}px`,
-        }"
-      >
-        <span
-          :style="{
-            position: 'relative',
-            fontSize: `${55 * bi}px`,
-            top: `${-20 * bi}px`,
-            height: `${116 * bi}px`,
-          }"
-        >
-          <img
-            src="/subject_lindidiaocha/logo.png"
-            :style="{
-              position: 'relative',
-              top: `${4 * bi}px`,
-              width: `${80 * bi}px`,
-              height: `${75 * bi}px`,
-              marginRight: `${5 * bi}px`,
-            }"
-          />
-          {{ t('sys.subject.header_title') }}
-        </span>
-      </div>
-      <div
-        class="subject_top_currentTime"
-        :style="{
-          left: `${87 * bi}px`,
-          top: `${0 * bi}px`,
-          height: `${40 * bi}px`,
-        }"
-      >
-        <span class="subject_top_currentTime_date">
-          {{ currentTime_date }}
-        </span>
-        <div class="subject_top_currentTime_div">
-          <div> {{ currentTime_week }} </div>
-          <div> {{ currentTime_year }} </div>
-        </div>
-      </div>
-      <div
-        class="subject_top_adminAndLogout"
-        :style="{
-          right: `${40 * bi}px`,
-          top: `${0 * bi}px`,
-          height: `${40 * bi}px`,
-        }"
-      >
-        <span class="loginUser"> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
-        &nbsp;&nbsp;
-        <img src="/subject_lindidiaocha/setting.png" @click="getHome(setting)" />
-        &nbsp;&nbsp;
-        <span class="line" @click="getHome(setting)"> {{ setting.title }} &nbsp;&nbsp;</span>
-        <span class="line"> | </span>
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        <img src="/subject_lindidiaocha/logout.png" @click="handleLoginOut()" />
-      </div>
-    </div>
-
-    <img class="subject_left" src="/subject_lindidiaocha/left.png" />
-    <img class="subject_right" src="/subject_lindidiaocha/right.png" />
-
-    <div
-      class="subject_box"
-      :style="{
-        position: 'relative',
-        top: `${-100 * bi}px`,
-      }"
-    >
-      <div
-        class="subject_box_btn"
-        ref="contentArea"
-        :style="{
-          position: 'relative',
-          top: `${getBoxBtnAttribute()[0]}px`,
-          left: `${getBoxBtnAttribute()[1] * bi}px`,
-          height: `${getBoxBtnAttribute()[2] * bi}px`,
-          width: `${getBoxBtnAttribute()[3] * bi}px`,
-        }"
-      >
-        <div
-          v-for="item in list"
-          :key="item.id"
-          :id="item.id"
-          class="subject_box_btn_div"
-          @click="getHome(item)"
-          :style="{
-            marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
-            marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
-            marginBottom: `${10 * bi}px`,
-            height: `${300 * bi}px`,
-            width: `${210 * bi}px`,
-            'background-image': `url(${item.isHover ? '/subject_lindidiaocha/btn_2.png' : '/subject_lindidiaocha/btn_1.png'})`,
-            'background-size': `${100}%`,
-            'background-repeat': 'no-repeat',
-          }"
-          @mouseenter="item.isHover = true"
-          @mouseleave="item.isHover = false"
-        >
-          <img
-            class="subject_box_btn_div_img"
-            :src="
-              item.isHover
-                ? '/subject_lindidiaocha/line1_hover.png'
-                : '/subject_lindidiaocha/line1.png'
-            "
-            :style="{
-              position: 'relative',
-              display: 'block',
-              top: `${(200 - ((fotSize + 3) / 2) * getWrap(item.title)) * bi}px`,
-              left: `${25 * bi}px`,
-              width: `${160 * bi}px`,
-              height: `${3 * bi}px`,
-            }"
-          />
-          <img
-            class="subject_box_btn_div_img"
-            :src="
-              item.isHover
-                ? '/subject_lindidiaocha/line2_hover.png'
-                : '/subject_lindidiaocha/line2.png'
-            "
-            :style="{
-              position: 'relative',
-              top: `${(180 + ((fotSize + 3) / 2) * (getWrap(item.title) + 1)) * bi}px`,
-              width: `${160 * bi}px`,
-              height: `${3 * bi}px`,
-            }"
-          />
-          <span
-            class="subject_box_btn_div_span"
-            v-html="renderedTitle(item.title)"
-            :style="
-              item.title.length > 10
-                ? {
-                    fontSize: `${fotSize * bi}px`,
-                    lineHeight: '30px',
-                    top: `${(180 - (fotSize / 2) * spanWrap) * bi - 30}px`,
-                    width: `${fotSize * 6 * bi}px`,
-                    height: `${(fotSize + 3) * spanWrap * (bi + 2)}px`,
-                  }
-                : {
-                    fontSize: `${fotSize * bi}px`,
-                    lineHeight: '30px',
-                    top: `${(180 - (fotSize / 2) * spanWrap) * bi}px`,
-                    width: `${fotSize * 6 * bi}px`,
-                    height: `${(fotSize + 3) * spanWrap * bi}px`,
-                  }
-            "
-          />
-          <img
-            src="/subject_lindidiaocha/nochoose.png"
-            :style="
-              item.title.length > 10
-                ? {
-                    display: 'block',
-                    position: 'relative',
-                    top: `${(20 - fotSize * spanWrap) * bi - 64}px`,
-                    left: `${55 * bi}px`,
-                    width: `${100 * bi}px`,
-                    height: `${100 * bi}px`,
-                    zIndex: 2,
-                  }
-                : {
-                    display: 'block',
-                    position: 'relative',
-                    top: `${(20 - fotSize * spanWrap) * bi}px`,
-                    left: `${55 * bi}px`,
-                    width: `${100 * bi}px`,
-                    height: `${100 * bi}px`,
-                    zIndex: 2,
-                  }
-            "
-          />
-          <img
-            :src="getImageUrl(item.imgUrl)"
-            :style="
-              item.title.length > 10
-                ? {
-                    display: 'block',
-                    position: 'relative',
-                    top: `${(-55 - fotSize * spanWrap) * bi - 64}px`,
-                    left: `${75 * bi}px`,
-                    width: `${60 * bi}px`,
-                    height: `${58 * bi}px`,
-                    zIndex: 3,
-                  }
-                : {
-                    display: 'block',
-                    position: 'relative',
-                    top: `${(-55 - fotSize * spanWrap) * bi}px`,
-                    left: `${75 * bi}px`,
-                    width: `${60 * bi}px`,
-                    height: `${58 * bi}px`,
-                    zIndex: 3,
-                  }
-            "
-          />
-          <img
-            v-show="item.isHover"
-            src="/subject_lindidiaocha/choose.png"
-            :style="
-              item.title.length > 10
-                ? {
-                    position: 'relative',
-                    top: `${(-127 - fotSize * spanWrap) * bi - 64}px`,
-                    width: `${70 * bi}px`,
-                    height: `${75 * bi}px`,
-                    zIndex: 4,
-                  }
-                : {
-                    position: 'relative',
-                    top: `${(-127 - fotSize * spanWrap) * bi}px`,
-                    width: `${70 * bi}px`,
-                    height: `${75 * bi}px`,
-                    zIndex: 4,
-                  }
-            "
-          />
-        </div>
-      </div>
-    </div>
-    <div class="subject_bottom">
-      <img src="/subject_lindidiaocha/bottom.png" />
-      <span>
-        {{
-          VITE_GLOB_APP_MANAGEMENT_UNIT
-            ? VITE_GLOB_APP_MANAGEMENT_UNIT
-            : t('sys.subject.bottom_copyright_lindidiaocha')
-        }}
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        {{
-          VITE_GLOB_APP_TECHINICAL_SUPPORT
-            ? VITE_GLOB_APP_TECHINICAL_SUPPORT
-            : t('sys.subject.bottom_support')
-        }}
-      </span>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useUserStore } from '@/store/modules/user';
-  import { getSpecialData } from '@/api/demo/system';
-  import { onMounted, onUnmounted, ref, nextTick, computed, watchEffect } from 'vue';
-  import { message } from 'ant-design-vue';
-  import Icon from '@/components/Icon/Icon.vue';
-  import { getAppEnvConfig } from '@/utils/env';
-  import { useI18n } from '@/hooks/web/useI18n';
-  import { PageEnum } from '@/enums/pageEnum';
-  import dayjs from 'dayjs';
-
-  const {
-    VITE_GLOB_API_URL,
-    VITE_GLOB_APP_MANAGEMENT_UNIT,
-    VITE_GLOB_APP_TECHINICAL_SUPPORT,
-    VITE_GLOB_APP_VERSIONS,
-  } = getAppEnvConfig();
-  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
-  const { t } = useI18n();
-
-  const loginUser: any = ref('');
-  const contentArea = ref<HTMLElement | null>(null);
-  const list: any = ref([]);
-  const userStore = useUserStore();
-  const spanWrap = ref(1);
-  const setting = ref({});
-
-  async function getData() {
-    const res: any = await getSpecialData();
-    // 最大标题文字行数
-    res?.forEach((item, index) => {
-      if (item.title == '系统管理') {
-        setting.value = item;
-        res.splice(index, 1);
-      } else {
-        res.isHover = false;
-        if (Math.ceil(item.title.length / 6) > spanWrap.value) {
-          spanWrap.value = Math.ceil(item.title.length / 6);
-        }
-      }
-    });
-    list.value = res;
-    loginUser.value = localStorage.getItem('fireUserLoginName');
-  }
-
-  // 跳转
-  async function getHome(item) {
-    console.log(window.innerWidth);
-    if (!item.isDevelop) {
-      message.warn(item.title + '系统暂未开放！');
-      return;
-    }
-    if (item.isExternal) {
-      if (item.linkOrApi) {
-        window.location.href = item.linkOrApi;
-      } else {
-        message.warn('系统外部链接未配置！');
-        return;
-      }
-    } else {
-      if (!item.linkOrApi) {
-        item.linkOrApi = PageEnum.WELCOME_HOME;
-      }
-      userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
-    }
-  }
-  // 获取图片地址
-  function getImageUrl(imgUrl) {
-    if (imgUrl) {
-      return VITE_GLOB_API_URL_VAR.value + imgUrl;
-    } else {
-      return '/subject_lindidiaocha/default.png';
-    }
-  }
-  // 标题换行
-  function renderedTitle(name) {
-    return `${name.replace(/\s/g, '<br />')}`;
-  }
-  // 标题的行数
-  function getWrap(name) {
-    return Math.ceil(name.length / 6);
-  }
-  // 退出系统
-  function handleLoginOut() {
-    userStore.confirmLoginOut();
-  }
-  // 分辨率
-  const viewportWidth = ref(window.innerWidth);
-  const referenceWidth = 1920;
-  const fotSize = ref(28);
-
-  // 计算不同数量的选项卡的布局属性
-  function getBoxBtnAttribute() {
-    let box: any = [];
-    box[0] = 0;
-    box[1] = 330;
-    box[2] = 700;
-    box[3] = 1440;
-    box[4] = 20;
-    return box;
-  }
-  const updateWindowSize = () => {
-    viewportWidth.value = window.innerWidth;
-  };
-  const bi = computed(() => {
-    return viewportWidth.value / referenceWidth;
-  });
-
-  // 时间和天气
-  const currentTime_year = ref(dayjs().format('YYYY年M月D日'));
-  const currentTime_week = ref(dayjs().locale('zh-cn').format('dddd'));
-  const currentTime_date = ref(dayjs().format('HH:mm:ss'));
-
-  function updateTime() {
-    currentTime_year.value = dayjs().format('YYYY年M月D日');
-    currentTime_week.value = dayjs().locale('zh-cn').format('dddd');
-    currentTime_date.value = dayjs().format('HH:mm:ss');
-  }
-
-  // 监听每一秒更新时间
-  watchEffect(() => {
-    const intervalId = setInterval(updateTime, 1000);
-    // 清除定时器
-    onUnmounted(() => clearInterval(intervalId));
-  });
-
-  onMounted(() => {
-    getData();
-    window.addEventListener('resize', updateWindowSize);
-    updateWindowSize(); // 初始化视口尺寸
-    updateTime();
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateWindowSize);
-  });
-</script>
-<style lang="less" scoped>
-  .subject {
-    background-image: url('/subject_lindidiaocha/bg.png');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    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;
-
-    &_top {
-      &_title {
-        span {
-          display: inline-flex;
-          align-items: center;
-          text-align: center;
-          justify-content: center;
-          width: 100%;
-
-          font-family: Alimama ShuHeiTi;
-          color: #ffffff;
-          // text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
-          background: linear-gradient(268deg, #f8fbff 0%, #ffffff 100%);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          background-clip: text;
-          color: transparent;
-          font-weight: 900 !important;
-
-          letter-spacing: 2px;
-        }
-      }
-
-      &_currentTime {
-        position: absolute;
-        display: inline-flex;
-        align-items: center;
-
-        &_date {
-          font-family: DIN;
-          font-weight: bold;
-          font-size: 26px;
-          color: #ffffff;
-          line-height: 26px;
-          margin-right: 10px;
-        }
-
-        &_div {
-          position: relative;
-          top: -7px;
-          width: 100px;
-          height: 12px;
-          font-family: DIN;
-          font-weight: 500;
-          font-size: 12px;
-          color: #ffffff;
-          line-height: 12px;
-          display: block;
-
-          div {
-            margin-bottom: 2px;
-          }
-        }
-      }
-
-      &_adminAndLogout {
-        position: absolute;
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-
-        img {
-          width: 18px;
-          height: 18px;
-        }
-
-        .loginUser {
-          display: inline-flex;
-          align-items: center;
-          text-align: center;
-          justify-content: center;
-          height: 14px;
-
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          font-size: 18px;
-          color: #ffffff;
-          line-height: 24px;
-        }
-
-        .line {
-          position: relative;
-          top: 0px;
-          font-size: 18px;
-          color: #ffffff;
-        }
-      }
-    }
-
-    &_left {
-      position: absolute;
-      height: 93%;
-      bottom: 10px;
-      left: 10px;
-    }
-
-    &_right {
-      position: absolute;
-      height: 93%;
-      bottom: 10px;
-      right: 10px;
-    }
-
-    &_box {
-      display: flex;
-      position: relative;
-      height: calc(100%);
-
-      &_btn {
-        align-items: center;
-        // justify-content: center;
-        display: flex;
-        flex-wrap: wrap;
-        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;
-          display: block;
-          transition: all 0.3s ease;
-          cursor: pointer;
-          align-items: center;
-          text-align: center;
-          justify-content: center;
-
-          &:hover &_span {
-            font-family: Alimama ShuHeiTi;
-            font-weight: 900 !important;
-            color: #ffffff !important;
-            background: #ffffff;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            color: transparent;
-          }
-
-          &:hover &_img {
-            filter: brightness(150%);
-          }
-
-          &_span {
-            display: inline-flex;
-            align-items: center;
-            text-align: center;
-            justify-content: center;
-            position: relative;
-
-            // 字体样式
-            font-family: Alimama ShuHeiTi;
-            font-weight: bold;
-            font-size: 23px;
-            color: #ffffff;
-            line-height: 15px;
-            // text-shadow: 0px 2px 6px rgba(10, 30, 52, 0.48);
-            background: linear-gradient(0deg, #5db1fc 0%, #e2ebff 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            color: transparent;
-            font-weight: 900 !important;
-          }
-        }
-      }
-    }
-
-    &_bottom {
-      span {
-        position: absolute;
-        bottom: 10px;
-        left: calc(50% - 660px / 2);
-        width: 660px;
-        height: 18px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        font-size: 18px;
-        color: #ffffff;
-      }
-
-      img {
-        position: absolute;
-        width: 100%;
-        bottom: 0px;
-        height: 57px;
-      }
-    }
-  }
-</style>