[update 87469] 首页样式

src/components/page/GlobalLayout.vue

@@ -285,9 +285,9 @@ body {
   }
 
   .trigger {
-    font-size: 22px;
+    font-size: 12px;
-    line-height: 42px;
+    //line-height: 42px;
-    padding: 0 18px;
+    padding: 22px;
     cursor: pointer;
     transition: color 300ms, background 300ms;
 

src/views/dashboard/Analysis.vue

@@ -3,26 +3,16 @@
 <!--    <first-stage-card></first-stage-card>-->
 <!--  </div>-->
   <div class="all-wrapper">
-    <a-row :gutter="20">
+    <!--  检索  -->
-      <a-col :span="24" class="mb-20">
+    <retrieval-card class="home-search"></retrieval-card>
-        <!--  检索  -->
+    <!--  快捷入口  -->
-        <retrieval-card></retrieval-card>
+    <quick-enter-card class="home-quick-entrance"></quick-enter-card>
-      </a-col>
+    <!--  待办任务  -->
-      <a-col :span="24" class="mb-20">
+    <to-do-task-card class="home-todo"></to-do-task-card>
-        <!--  快捷入口  -->
+    <!--  友情链接  -->
-        <quick-enter-card></quick-enter-card>
+    <friend-link-card class="home-link"></friend-link-card>
-      </a-col>
+    <!--  列表  -->
-      <a-col :span="10" class="mb-20">
+    <search-and-warning-card class="home-table"></search-and-warning-card>
-        <!--  待办任务  -->
-        <to-do-task-card class="mb-20"></to-do-task-card>
-        <!--  友情链接  -->
-        <friend-link-card></friend-link-card>
-      </a-col>
-      <a-col :span="14" class="mb-20">
-        <!--  预警  -->
-        <search-and-warning-card></search-and-warning-card>
-      </a-col>
-    </a-row>
   </div>
 </template>
 
@@ -46,14 +36,45 @@ export default {
 @import '~@assets/less/common.less';
 
 .all-wrapper {
-  padding: 20px 8px 0;
+  padding: 8px 8px 0;
-}
+  display: grid;
-.flex-item {
+  width: 100%;
-  margin: 10px;
+  height: calc(100vh - 60px - 8px - 20px);
-}
+  grid-gap: 20px;
-.mb-20 {
+  grid-template-columns: 0.4fr 0.6fr;
-  margin-bottom: 20px;
+  grid-template-rows: 56px 180px minmax(200px, auto) 180px;
+  grid-template-areas: 'Search Search'
+                       'QuickEntrance QuickEntrance'
+                       'Todo Table'
+                       'Link Table';
+
+  .home-search,
+  .home-quick-entrance,
+  .home-todo,
+  .home-link,
+  .home-table{
+    height: 100%;
+    overflow: hidden;
+    border-radius: 8px;
+  }
+  .home-search {
+    grid-area: Search;
+    overflow: visible;
+  }
+  .home-quick-entrance {
+    grid-area: QuickEntrance;
+  }
+  .home-todo {
+    grid-area: Todo;
+  }
+  .home-link {
+    grid-area: Link;
+  }
+  .home-table {
+    grid-area: Table;
+  }
 }
+
 /deep/ .top-wrapper {
   display: flex;
   align-items: center;

src/views/dashboard/modules/FriendLinkCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false">
+  <div class="friend-link-wrapper">
     <a-spin :spinning="loading">
       <div class="top-wrapper">
         <span class="left-p"><i class="iconfont icon-link left-icon"></i>{{$t('dashboard.friendLink.friendLink')}}</span>
@@ -7,15 +7,15 @@
       </div>
       <div class="content-wrapper">
         <div class="content-div" v-for="item in dataSource" :key="item.id" @click="clickLink(item)">
-          <img class="icon-img" :src="getImg(item.logoUrl)" :alt="item.name">
           <a-tooltip placement="top">
+            <img class="icon-img" :src="getImg(item.logoUrl)" :alt="item.name">
             <template slot="title">{{ item.name }}</template>
             <p>{{ item.name }}</p>
           </a-tooltip>
         </div>
       </div>
     </a-spin>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -69,13 +69,19 @@ export default {
 </script>
 
 <style scoped lang="less">
-
+.friend-link-wrapper {
+  padding: 24px;
+  background-color: white;
+}
+@itemSize: 64px;
 .content-wrapper {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
+  // 总宽度 - 子内容的宽度 = 剩余宽度 / 5 = 就是每个的右间距,最后一个元素不需要右间距
+  grid-gap: calc((100% - (6 * @itemSize)) / 5);
   margin-top: 12px;
 }
-.content-div {
+.content-div > span {
   cursor: pointer;
   text-align: center;
   display: flex;
@@ -86,12 +92,12 @@ export default {
 
   .icon-img {
     border-radius: 8px;
-    width: 64px;
+    width: @itemSize;
-    height: 64px;
+    height: @itemSize;
     margin-bottom: 2px;
   }
   p {
-    width: 64px;
+    width: @itemSize;
     height: 28px;
     line-height: 28px;
     margin: 0;

src/views/dashboard/modules/QuickEnterCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false">
+  <div class="quick-enter-wrapper">
     <a-spin :spinning="loading">
       <div class="top-wrapper">
         <p class="left-p"><i class="iconfont icon-rukou left-icon"></i>{{ this.$t('dashboard.quickEnter.quickEnter') }}</p>
@@ -24,7 +24,7 @@
     </a-spin>
     <!-- 菜单管理 -->
     <menu-manage-modal ref="menuManageModal" @ok="loadData"/>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -89,14 +89,22 @@ export default {
 </script>
 
 <style scoped lang="less">
+.quick-enter-wrapper {
+  background-color: white;
+  padding: 24px;
+  box-sizing: border-box;
+}
 .content-wrapper {
+  overflow: auto;
+  @itemGap: 20px;
   display: grid;
   margin-top: 12px;
-  grid-template-columns: repeat(auto-fill, calc(100% / 14));
+  grid-template-columns: repeat(14, minmax(72px, 1fr));
+  // 总宽度 - 子内容的宽度 = 剩余宽度 / 5 = 就是每个的右间距,最后一个元素不需要右间距
+  grid-column-gap: calc((100% - (14 * 72px)) / 13);
 
   & > .content-div > span,
   & > .plus-div > span {
-    padding: 9px 16px 0;
     display: flex;
     flex-direction: column;
     justify-content: center;

src/views/dashboard/modules/RetrievalCard.vue

@@ -1,19 +1,19 @@
 <template>
   <!--  搜索区域  -->
   <div class="search-wrapper">
-    <a-select class="resource-type-select" v-model="resourceType">
+    <a-select class="resource-type-select" v-model="resourceType" size="large">
       <a-select-option value="all">{{ $t('dashboard.generalSearch.all')}}</a-select-option>
       <a-select-option v-for="item in resourceTypeOptions" :key="item.value" :value="item.value" :title="item.title">
         {{ item.title }}
       </a-select-option>
     </a-select>
-    <a-input class="search-input" v-model="searchValue" :placeholder="$t('pleaseEnter')" @pressEnter="searchInputEnter">
+    <a-input class="search-input" size="large" v-model="searchValue" :placeholder="$t('pleaseEnter')" @pressEnter="searchInputEnter">
       <a-icon slot="prefix" type="search" style="color: #0064FA;" />
     </a-input>
     <div class="btn-box">
-      <a-button type="primary" icon="search" @click="toSearchWindow('title')">{{ $t('dashboard.retrieval.titleSearch') }}</a-button>
+      <a-button type="primary" size="large" icon="search" @click="toSearchWindow('title')">{{ $t('dashboard.retrieval.titleSearch') }}</a-button>
-      <a-button type="primary" icon="search" @click="toSearchWindow('fullText')">{{ $t('dashboard.retrieval.fullSearch') }}</a-button>
+      <a-button type="primary" size="large" icon="search" @click="toSearchWindow('fullText')">{{ $t('dashboard.retrieval.fullSearch') }}</a-button>
-      <a-button type="primary" class="btn-ghost" ghost @click="toAdvancedSearch"><img :src="require('@/assets/image/icon/super-search.png')" alt='' class="btn-icon">{{ $t('dashboard.retrieval.advancedSearch') }}</a-button>
+      <a-button type="primary" size="large" class="btn-ghost" ghost @click="toAdvancedSearch"><img :src="require('@/assets/image/icon/super-search.png')" alt='' class="btn-icon">{{ $t('dashboard.retrieval.advancedSearch') }}</a-button>
     </div>
   </div>
 </template>
@@ -80,21 +80,21 @@ export default {
 <style lang="less" scoped>
 @height: 56px;
 .search-wrapper {
-  width: 80%;
   margin: 0 auto;
+  width: 80%;
   display: grid;
-  grid-template-columns: 102px 1fr auto;
+  grid-template-columns: 120px 1fr auto;
   grid-gap: 10px;
 
   & > .resource-type-select {
-    flex: 0 0 102px;
+    height: 100%;
     color: @primary-color;
 
     /deep/.ant-select-arrow svg {
       fill: @primary-color;
     }
     /deep/.ant-select-selection--single {
-      height: @height;
+      height: 100%;
       border-color: @primary-color;
     }
     /deep/.ant-select-arrow {
@@ -108,7 +108,8 @@ export default {
   }
 
   & > .search-input {
-    flex: auto;
+    height: 100%;
+    font-size: 16px;
     //margin-left: 10px;
     /deep/.ant-input-prefix {
       left: 24px;
@@ -116,14 +117,14 @@ export default {
 
     /deep/.ant-input {
       padding-left: 40px;
-      height: @height;
+      height: 100%;
       border-color: @primary-color;
     }
   }
 
   .btn-box .ant-btn {
-    flex: 138px;
+    min-width: 138px;
-    height: @height;
+    height: 100%;
 
     &:not(:first-child) {
       margin-left: 10px;
@@ -133,10 +134,6 @@ export default {
 
 .btn-icon {
   margin-right: 8px;
-  vertical-align: top;
+  vertical-align: sub;
-}
-
-@media screen and (max-width: 1366px) {
-  @height: 42px;
 }
 </style>

src/views/dashboard/modules/SearchAndWarningCard.vue

@@ -12,7 +12,7 @@
         size="middle"
         :rowKey="(_, index) => index"
         class="table"
-        :scroll="{ x: '100%', y: '40vh' }"
+        :scroll="{ x: '100%', y: 'calc(100vh - 550px)' }"
         :columns="showColumns"
         :dataSource="dataSource"
         :pagination="ipagination"
@@ -32,6 +32,14 @@
             <div v-else class="table-text">{{ global.emptyLine }}</div>
           </a-tooltip>
         </template>
+        <!--  标准状态  -->
+        <template v-slot:standardState="text, record">
+          <a-tooltip overlay-class-name="tooltip-style">
+            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+            <div v-if="text" class="status-style" :class="getStandardStateClass(record)">{{ text }}</div>
+            <div v-else class="table-text">{{ global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
         <!--  企标号、企标名称  -->
         <template v-slot:enStandard="text, record">
           <a-tooltip overlay-class-name="tooltip-style">
@@ -61,7 +69,7 @@
 </template>
 
 <script>
-import { StandardSource } from '@/enums/commonEnums'
+import { EnterpriseStandardStatus, StandardSource, StandardStatus } from '@/enums/commonEnums'
 import { getMarketRegulationsList } from '../../../api/api'
 import {
   getHomeNewStandard,
@@ -210,7 +218,7 @@ export default {
           align: 'left',
           dataIndex: 'standardState_dictText',
           width: 100,
-          scopedSlots: { customRender: 'text' },
+          scopedSlots: { customRender: 'standardState' },
           show: () => {
             return [
               this.tabList[0].key,
@@ -319,6 +327,36 @@ export default {
     // this.loadData(1)
   },
   methods: {
+    // 获取标准状态
+    getStandardStateClass (row) {
+      switch (row.standardState + '') {
+        // 起草
+        case StandardStatus.DRAFT.value:
+          return 'status-style-1'
+          // 征求意见
+        case StandardStatus.SEEK_FOR_OPTIONS.value:
+          return 'status-style-2'
+          // 审查
+        case StandardStatus.EXAMINE.value:
+          return 'status-style-3'
+          // 报批
+        case StandardStatus.APPROVAL.value:
+          return 'status-style-4'
+          // 发布
+        case StandardStatus.RELEASE.value:
+          return 'status-style-5'
+          // 现行有效(外部标准\企标)
+        case StandardStatus.CURRENTLY_EFFECTIVE.value:
+        case EnterpriseStandardStatus.CURRENTLY_EFFECTIVE.value:
+          return 'status-style-6'
+          // 废止(外部标准\企标)
+        case StandardStatus.ABOLISH.value:
+        case EnterpriseStandardStatus.ABOLISH.value:
+          return 'status-style-7'
+        default:
+          return ''
+      }
+    },
     /**
      * 查看标准分解单
      */
@@ -471,7 +509,7 @@ export default {
 <style scoped lang="less">
 // 预警容器
 .warning-wrapper {
-  height: calc(100vh - 406px);
+  height: 100%;
 }
 
 // tab样式
@@ -524,6 +562,7 @@ export default {
 
   /deep/ .ant-table-thead > tr > th {
     background-color: #fff;
+    font-weight: bold;
   }
 
   /deep/ .ant-table-row .ant-table-row-cell-break-word {
@@ -539,7 +578,63 @@ export default {
 }
 @media screen and (max-width: 1366px) {
   .warning-wrapper {
-    height: calc(100vh - 226px);
+    /deep/ .ant-table-body {
+      max-height: calc(100vh - 414px) !important;
+    }
+    //height: calc(110vh - 550px) !important;
   }
 }
+// 标准状态样式
+.status-style {
+  border-radius: 14px;
+  height: 28px;
+  line-height: 28px;
+  padding: 0 12px;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+// 起草
+.status-style-1 {
+  background-color: rgba(243, 129, 65, 0.1);
+  border: 1px solid rgba(243, 129, 65, 0.5);
+  color: rgba(243, 129, 65, 1);
+}
+// 征求意见
+.status-style-2 {
+  background-color: rgba(129, 206, 94, 0.1);
+  border: 1px solid rgba(129, 206, 94, 0.5);
+  color: rgba(129, 206, 94, 1);
+}
+// 审查
+.status-style-3 {
+  background-color: rgba(255, 98, 98, 0.1);
+  border: 1px solid rgba(255, 98, 98, 0.5);
+  color: rgba(255, 98, 98, 1);
+}
+// 报批
+.status-style-4 {
+  background-color: rgba(48, 175, 255, 0.1);
+  border: 1px solid rgba(48, 175, 255, 0.5);
+  color: rgba(48, 175, 255, 1);
+}
+// 发布
+.status-style-5 {
+  background-color: rgba(6, 176, 140, 0.1);
+  border: 1px solid rgba(6, 176, 140, 0.5);
+  color: rgba(6, 176, 140, 1);
+}
+// 现行有效
+.status-style-6 {
+  background-color: rgba(137, 138, 233, 0.1);
+  border: 1px solid rgba(137, 138, 233, 0.5);
+  color: rgba(137, 138, 233, 1);
+}
+// 废止
+.status-style-7 {
+  background-color: rgba(156, 177, 208, 0.1);
+  border: 1px solid rgba(156, 177, 208, 0.5);
+  color: rgba(156, 177, 208, 1);
+}
 </style>

src/views/dashboard/modules/ToDoTaskCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false" class="todo-card">
+  <div class="todo-wrapper">
     <a-spin :spinning="loading">
       <div class="top-wrapper">
         <p class="left-p"><i class="iconfont icon-calendar left-icon"></i>{{ $t('dashboard.todoTask.todoTask') }}</p>
@@ -18,7 +18,7 @@
       </div>
       <a-list :data-source="[]" v-else></a-list>
     </a-spin>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -98,8 +98,10 @@ export default {
 
 <style lang="less" scoped>
 @size: 48px;
-.todo-card {
+.todo-wrapper {
-  height: calc(100vh - 611px);
+  padding: 24px;
+  background-color: white;
+
   /deep/ .ant-spin-container,
   /deep/ .ant-spin-nested-loading,
   /deep/ .ant-card-body {
@@ -108,7 +110,7 @@ export default {
 }
 .content-wrapper {
   height: calc(100% - 30px - 12px);
-  margin-top: 10px;
+  margin-top: 12px;
   overflow-y: auto;
 
   .content-item {