feat(home): 更新首页样式和功能交互

src/views/home/index.vue

@@ -10,7 +10,7 @@
               <i class="el-icon-setting" @click="handleAdd" style="cursor: pointer; font-size: 18px;"></i>
             </span>
           </div>
-          <div class="card-content">
+          <div class="card-content common-function-card">
             <vuedraggable v-model="commonFunctions" class="common-function">
               <div
                 v-for="(item, index) in commonFunctions"
@@ -38,7 +38,7 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="12" class="mt-20" style="height: 242px;">
+    <el-row :gutter="12" class="mt-20" style="height: 232px;">
       <el-col :span="18" class="box-col">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -49,7 +49,7 @@
               <el-col :span="8">
                 <div class="overview">
                   <div class="overview-top">
-                    <div class="overview-top-img"><img src="~@/assets/home/my-project.svg" alt=""></div>
+                    <div class="overview-top-img"><img src="~@/assets/home/ceshi1.png" alt=""></div>
                     <div class="overview-top-content">
                       <div class="overview-top-content-name">我的项目</div>
                       <div class="overview-top-content-count">{{ myProjectList['总数量'] || 0 }}</div>
@@ -73,7 +73,7 @@
               <el-col :span="8">
                 <div class="overview">
                   <div class="overview-top">
-                    <div class="overview-top-img"><img src="~@/assets/home/my-project.svg" alt=""></div>
+                    <div class="overview-top-img"><img  src="~@/assets/home/ceshi.jpg" alt=""></div>
                     <div class="overview-top-content">
                       <div class="overview-top-content-name">我的工单</div>
                       <div class="overview-top-content-count">{{ myWorkOrderList['总数量'] || 0 }}</div>
@@ -97,7 +97,7 @@
               <el-col :span="8">
                 <div class="overview">
                   <div class="overview-top">
-                    <div class="overview-top-img"><img src="~@/assets/home/my-project.svg" alt=""></div>
+                    <div class="overview-top-img"><img style="border-radius: 10px;" src="~@/assets/home/ceshi2.jpg" alt=""></div>
                     <div class="overview-top-content">
                       <div class="overview-top-content-name">我的任务</div>
                       <div class="overview-top-content-count">{{ myTaskList['总数量'] || 0 }}</div>
@@ -131,7 +131,7 @@
             <div class="portal">
               <el-row :gutter="12">
                 <el-col :span="8" v-for="item in portals" :key="item.name" class="portal-item">
-                  <div class="portal-item-content">
+                  <div class="portal-item-content" @click="openUrl(item)">
                     <div class="portal-item-img"><img :src="item.img" alt=""></div>
                     <div class="portal-item-name">{{ item.name }}</div>
                   </div>
@@ -145,7 +145,7 @@
 
     <el-row :gutter="12" class="mt-20" style="height: 404px;">
       <el-col :span="18" class="box-col">
-        <el-card class="box-card">
+        <el-card class="box-card notification-card">
           <div class="card-content">
             <el-tabs v-model="activeTab" @tab-click="handleTabClick">
               <el-tab-pane label="通知公告" name="notice"></el-tab-pane>
@@ -316,6 +316,16 @@ export default {
     this.getMyWorkCalendar();
   },
   methods: {
+    openUrl(item) {
+      // 统一门户配置
+      if (item.architType === '1') {
+        // bs门户配置
+        window.open(item.linkUrl);
+      } else {
+        let url = item.linkUrl.split('//');
+        window.open(url[1], '_blank');
+      }
+    },
     handleNotificationsClick(item) {
       console.log('item~~~', item);
       this.$router.push({
@@ -394,7 +404,7 @@ export default {
           this.handelRouterTo('/page-pro/project-initiation')
           break;
         case '运维工单':
-          this.handelRouterTo('/page-eam/maintenance/patrol')
+          this.handelRouterTo('/page-eam/maintenance/patrol?isWt=true&title=工单')
           break;
         case '质检工单':
           this.handelRouterTo('/page-qms/inspectionWork')
@@ -441,6 +451,7 @@ export default {
           const textContent = content.replace(/<[^>]+>/g, '').trim();
           
           return {
+            id: item.id,
             title: item.title,
             content: textContent,
             images: images,
@@ -482,7 +493,7 @@ export default {
       this.myTaskList = await getMyTaskTotal({});
     },
     handleAdd() {
-      if(this.commonFunctions.length > 12) return this.$message.warning('最多只能添加12个常用功能');
+      // if(this.commonFunctions.length > 12) return this.$message.warning('最多只能添加12个常用功能');
       this.commonDialogFlag = true;
       this.$nextTick(() => {
         this.$refs.commonDialogRef.init();
@@ -620,8 +631,38 @@ export default {
   flex-direction: column;
   // height: calc(100vh - 96px);
   .card-content {
+    &.common-function-card {
+      overflow-x: auto;
+      overflow-y: hidden;
+      white-space: nowrap;
+      padding-bottom: 8px;
+      
+      &::-webkit-scrollbar {
+        height: 6px;
+      }
+      
+      &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+      }
+      
+      &::-webkit-scrollbar-thumb:hover {
+        background: #a8a8a8;
+      }
+      
+      .common-function {
+        flex-wrap: nowrap;
+        display: inline-flex;
+      }
+    }
+    
     &.portal-content {
-      max-height: 180px;
+      max-height: 172px;
       overflow-y: auto;
       overflow-x: hidden;
       padding-right: 8px;
@@ -807,6 +848,7 @@ export default {
           border: 1px solid #ebebeb;
           box-shadow: 0px 4px 4px #a7a7a740;
           padding: 6px 4px;
+          cursor: pointer;
           .portal-item-img {
             width: 32px;
             height: 32px;
@@ -901,7 +943,7 @@ export default {
   }
 }
 .mt-20 {
-  margin-top: 16px;
+  margin-top: 8px;
 }
 
 .box-col {
@@ -910,15 +952,31 @@ export default {
 
 .box-card {
   height: 100%;
+  margin-bottom: 0;
+  ::v-deep .el-card__header {
+    padding: 10px 8px;
+    font-weight: bold;
+    color: #303133;
+  }
   ::v-deep .el-card__body {
     padding: 12px;
   }
 }
 
+.notification-card {
+  ::v-deep .el-card__body {
+    padding-top: 0;
+  }
+  .el-tabs__item {
+    font-size: 15px;
+    font-weight: bold;
+  }
+}
+
 /* 通知公告样式 */
 .notification-list {
-  margin-top: 16px;
-  max-height: 328px;
+  // margin-top: 16px;
+  max-height: 344px;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 8px;
@@ -942,10 +1000,6 @@ export default {
   }
 }
 
-.no-notification {
-
-}
-
 .notification-item {
   display: flex;
   align-items: center;
@@ -957,8 +1011,8 @@ export default {
 }
 
 .notification-dot {
-  width: 15px;
-  height: 15px;
+  width: 10px;
+  height: 10px;
   background-color: #a6ccff;;
   border-radius: 50%;
   margin-right: 12px;
@@ -969,6 +1023,11 @@ export default {
 .notification-content {
   flex: 1;
   min-width: 0;
+  cursor: pointer;
+  color: #333;
+  &:hover {
+    color: #1890ff;
+  }
 }
 
 .notification-header {
@@ -980,7 +1039,7 @@ export default {
 .notification-title {
   font-size: 15px;
   font-weight: 500;
-  color: #333;
+  // color: #333;
   margin-right: 12px;
   white-space: nowrap;
   overflow: hidden;
@@ -992,7 +1051,7 @@ export default {
 
 .notification-info {
   font-size: 12px;
-  color: #333;
+  // color: #333;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1000,7 +1059,7 @@ export default {
 
 .notification-text {
   font-size: 12px;
-  color: #333;
+  // color: #333;
   line-height: 1.4;
   flex: 1;
   min-width: 0;
@@ -1028,8 +1087,8 @@ export default {
 }
 
 .notification-date {
-  font-size: 12px;
-  color: #999;
+  font-size: 13px;
+  // color: #333;
   margin-left: 12px;
   flex-shrink: 0;
 }