From e5d600867fec26cde6f05aaded63441e411df243 Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Fri, 30 Dec 2022 17:44:57 +0800
Subject: [PATCH] =?UTF-8?q?UI=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/components/header.vue    |   44 +-
 .../mynoticeView/components/NoticeList.vue    | 1007 +++++++++--------
 2 files changed, 553 insertions(+), 498 deletions(-)

diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index ba178039..3d8e8efe 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -75,21 +75,39 @@
     <div class="mynotice" v-show="mynoticeFlag">
       <a-list item-layout="horizontal" :data-source="mynoticeData">
         <template #renderItem="{ item }">
-          <a-tooltip placement="left">
+          <!-- <a-tooltip placement="left">
             <template #title>
               <span>{{ item.content }}</span>
             </template>
-            <a-list-item>
-              <a-list-item-meta :description="item.senderDate">
-                <template #title>
-                  <a>{{ item.content }}</a>
-                </template>
-              </a-list-item-meta>
-            </a-list-item>
-          </a-tooltip>
+
+          </a-tooltip> -->
+          <a-list-item>
+            <a-list-item-meta :description="item.senderDate">
+              <template #title>
+                <a>{{ item.content }}</a>
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
         </template>
       </a-list>
-      <div class="bottom" @click="goToView()">查看更多</div>
+      <div class="bottom" @click="goToView()">
+        查看更多
+        <svg
+          t="1672387024761"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="2682"
+          width="20"
+          height="20"
+        >
+          <path
+            d="M185.884 327.55 146.3 367.133 512.021 732.779 877.7 367.133 838.117 327.55 511.997 653.676Z"
+            p-id="2683"
+          ></path>
+        </svg>
+      </div>
     </div>
     <div class="info">
       <i
@@ -693,6 +711,9 @@
       text-align: center;
       color: #000;
       font-size: 0.16rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 
@@ -721,6 +742,9 @@
       -webkit-box-orient: vertical;
       cursor: default;
     }
+    a:hover {
+      color: #0058e1;
+    }
 
     button {
       width: 0.7rem;
diff --git a/front/src/views/mynoticeView/components/NoticeList.vue b/front/src/views/mynoticeView/components/NoticeList.vue
index f47ef2bb..cf441148 100644
--- a/front/src/views/mynoticeView/components/NoticeList.vue
+++ b/front/src/views/mynoticeView/components/NoticeList.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-21 11:55:07
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-27 15:57:26
+ * @LastEditors: Light
+ * @LastEditTime: 2022-12-30 16:05:18
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -15,7 +15,12 @@
     </a-breadcrumb>
     <div class="top">
       <div class="left">
-        <div class="item" :class="{ select: selectNav == nav.key }" v-for="nav in navList" :key="nav.key">
+        <div
+          class="item"
+          :class="{ select: selectNav == nav.key }"
+          v-for="nav in navList"
+          :key="nav.key"
+        >
           <i :class="nav.key" @click="changeNav(nav)"></i>
           <div>{{ nav.title + '(' + nav.num + ')' }}</div>
         </div>
@@ -23,11 +28,25 @@
     </div>
     <div class="btn">
       <div class="left">
-        <a-select ref="select" v-model:value="value" style="width: 120px" @focus="focus" @change="handleChange">
+        <a-select
+          ref="select"
+          v-model:value="value"
+          style="width: 120px"
+          @focus="focus"
+          @change="handleChange"
+        >
           <a-select-option value="全部消息">全部消息</a-select-option>
           <a-select-option value="已读消息">已读消息</a-select-option>
           <a-select-option value="未读消息">未读消息</a-select-option>
         </a-select>
+        <a-checkbox
+          :checked="
+            selectData.length !== 0 && selectData.length === data.length
+          "
+          stlye="margin-right:0.3rem;"
+          @change="changeCheckAll()"
+        ></a-checkbox>
+        <div style="margin-left: 10px">全选当前页</div>
         <div class="check">
           <div>
             共
@@ -37,527 +56,539 @@
         </div>
       </div>
       <div class="right">
-        <a-checkbox :checked="
-          selectData.length !== 0 && selectData.length === data.length
-        " stlye="margin-right:0.3rem;" @change="changeCheckAll()"></a-checkbox>
-        <div>全选当前页</div>
         <span @click="read()">标记为已读</span>
       </div>
     </div>
-    <div class="main">
-      <a-list item-layout="horizontal" :data-source="data">
-        <template #renderItem="{ item }" @click="goNoticePage(item)">
-          <a-list-item>
-            <a-list-item-meta description="">
-              <template #title>
-                <div class="left" @click="read(item)" :class="item.readStatus === 0 ? 'bold-text' : ''">
-                  {{ item.content }}
-                </div>
-                <div class="right">{{ '发布时间：' + item.senderDate }}</div>
-              </template>
-              <template #avatar>
-                <a-checkbox :checked="item.checked" @change="changeCheckBox(item)"></a-checkbox>
-                <a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0">
-                  <a-avatar :src="item.src" />
-                </a-badge>
-                <a-avatar :src="item.src" v-show="item.readStatus == 1" />
-              </template>
-            </a-list-item-meta>
-          </a-list-item>
-        </template>
-      </a-list>
+    <div class="main-box">
+      <div class="main">
+        <a-list item-layout="horizontal" :data-source="data">
+          <template #renderItem="{ item }" @click="goNoticePage(item)">
+            <a-list-item>
+              <a-list-item-meta description="">
+                <template #title>
+                  <div
+                    class="left"
+                    @click="read(item)"
+                    :class="item.readStatus === 0 ? 'bold-text' : ''"
+                  >
+                    {{ item.content }}
+                  </div>
+                  <div class="right">{{ '发布时间：' + item.senderDate }}</div>
+                </template>
+                <template #avatar>
+                  <a-checkbox
+                    :checked="item.checked"
+                    @change="changeCheckBox(item)"
+                  ></a-checkbox>
+                  <a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0">
+                    <a-avatar :src="item.src" />
+                  </a-badge>
+                  <a-avatar :src="item.src" v-show="item.readStatus == 1" />
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+          </template>
+        </a-list>
+      </div>
     </div>
-    <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total" show-less-items
-      :show-size-changer="false" @change="changePageNum" />
+    <a-pagination
+      v-model:current="pageNum"
+      v-model:pageSize="pageSize"
+      :total="total"
+      show-less-items
+      :show-size-changer="false"
+      @change="changePageNum"
+    />
   </div>
 </template>
 <script setup>
-import { ref, reactive, onBeforeUnmount } from 'vue'
-import mybus from '@/myplugins/mybus'
-import { message } from 'ant-design-vue'
-import { mynotice, mynoticeRead } from '@/api/home'
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const total = ref(0)
-const pageSize = ref(8)
-const pageNum = ref(1)
-const value = ref('全部消息')
-const obj = reactive({ page: pageNum.value, limit: pageSize.value })
-const navList = reactive([
-  {
-    title: '全部',
-    key: 'all',
-    num: 0,
-  },
-  {
-    title: '通知',
-    key: 'notice',
-    num: 0,
-  },
-  {
-    title: '评论',
-    key: 'comment',
-    num: 0,
-  },
-  {
-    title: '其它',
-    key: 'other',
-    num: 0,
-  },
-])
-const selectNav = ref('all')
-const selectData = ref([])
-const data = ref([])
-const changeNav = (nav) => {
-  selectNav.value = nav.key
-  if (nav.key === 'all') {
-    delete obj.from
-  } else {
-    obj.from = nav.title
-  }
-  value.value = '全部消息'
-  delete obj.readStatus
-  init()
-}
-const changeCheckBox = (item) => {
-  item.checked = !item.checked
-  if (item.checked) {
-    selectData.value.push(item.id)
-  } else {
-    selectData.value = selectData.value.filter((val) => val !== item.id)
-  }
-}
-const changeCheckAll = () => {
-  if (selectData.value.length == data.value.length) {
-    selectData.value = []
-    data.value.forEach((val) => {
-      val.checked = false
-    })
-  } else {
-    selectData.value = []
-    data.value.forEach((val) => {
-      val.checked = true
-      selectData.value.push(val.id)
-    })
-  }
-}
-const changePageNum = (page) => {
-  pageNum.value = page
-  obj.page = pageNum.value
-  init()
-}
-const handleChange = () => {
-  pageNum.value = 1
-  obj.page = pageNum.value
-  switch (value.value) {
-    case '全部消息':
-      delete obj.readStatus
-      break
-    case '已读消息':
-      obj.readStatus = 1
-      break
-    case '未读消息':
-      obj.readStatus = 0
-      break
-    default:
-      delete obj.readStatus
-      break
-  }
-  init()
-}
-const goBack = (url) => {
-  router.push({
-    path: url,
-  })
-}
-
-// 申请状态
-let applyStateObj = {
-  0: '待办',
-  1: '已办',
-}
-let typeObj = {
-  0: '申请前台',
-  1: '申请后台',
-  2: '上架前台',
-  3: '上架后台',
-  4: '下架前台',
-  5: '下架后台',
-  6: '需求前台',
-  7: '需求后台',
-  8: '评论前台',
-  9: '评论后台',
-  10: '会客厅前台',
-  11: '会客厅后台',
-  12: '其他'
-}
-
-// 对应的后台管理的页面
-let pageObj = {
-  '申请后台': {
-    0: 'myAgent-CompetencyApplication',
-    1: 'hasToDoTasks-CompetencyApplication',
-  },
-  '上架后台': {
-    0: 'myAgent-AbilityResourceShelf',
-    1: 'hasToDoTasks-AbilityResourceShelf',
-  },
-  '下架后台': {
-    0: 'myAgent-AbilityResourcesRemoved',
-    1: 'hasToDoTasks-AbilityResourcesRemoved',
-  },
-  '需求后台': {
-    0: 'myAgent-ApplicationforCompetencyRequirements',
-    1: 'hasToDoTasks-ApplicationForCompetencyRequirements',
-  },
-  '评论后台': {
-    0: 'myAgent-CommentModeration',
-    1: 'hasToDoTasks-CommentModeration',
-  },
-  '会客厅后台': {
-    0: 'activiti-RoomExamineAdmin',
-    1: 'activiti-RoomExamineAdmin',
-  },
-}
-
-// 前台tab名称
-const tabTypeObj = {
-  '申请前台': '能力申请',
-  '上架前台': '能力上架',
-  '下架前台': '能力下架',
-  '需求前台': '需求评论',
-  '评论前台': '需求评论',
-  '会客厅前台': '会客厅前台'
-}
-
-// 会客厅后台
-const goPage = (item) => {
-  if (item.jumpUrl && item.type !== 12) {
-    let typeText = typeObj[item.type];
-    console.log('item------------>', item);
-    console.log('typeText类型------------>', typeText);
-    // "http://192.168.124.236:9796/#/personalCenter?tabTypeName=能力申请"
-    let _url = item.jumpUrl && item.jumpUrl.split('#')
-    let openType = '_self';
-    // 如果是跳转到后台管理，重新打开页面
-    if (typeText && typeText.indexOf('后台') !== -1) {
-      openType = '_blank'
+  import { ref, reactive, onBeforeUnmount } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  import { mynotice, mynoticeRead } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const total = ref(0)
+  const pageSize = ref(8)
+  const pageNum = ref(1)
+  const value = ref('全部消息')
+  const obj = reactive({ page: pageNum.value, limit: pageSize.value })
+  const navList = reactive([
+    {
+      title: '全部',
+      key: 'all',
+      num: 0,
+    },
+    {
+      title: '通知',
+      key: 'notice',
+      num: 0,
+    },
+    {
+      title: '评论',
+      key: 'comment',
+      num: 0,
+    },
+    {
+      title: '其它',
+      key: 'other',
+      num: 0,
+    },
+  ])
+  const selectNav = ref('all')
+  const selectData = ref([])
+  const data = ref([])
+  const changeNav = (nav) => {
+    selectNav.value = nav.key
+    if (nav.key === 'all') {
+      delete obj.from
     } else {
-      if (_url[1] && _url[1].indexOf('personalCenter') !== -1) {
-        window.sessionStorage.setItem('type', JSON.stringify('apply'))
-      }
+      obj.from = nav.title
     }
-    window.open(item.jumpUrl, openType)
-    
+    value.value = '全部消息'
+    delete obj.readStatus
+    init()
   }
-  return;
-  // if (typeText) {
-  //   console.log('typeText类型------------>', typeText);
-  //   // 是后台，跳转到后台相关页面
-  //   if (typeText.indexOf('后台') !== -1) {
-  //     let _applyState = item.applyState
-  //     let _page = pageObj[typeText][_applyState]
-  //     window.open(window.SITE_CONFIG.backUrl + `/#/${_page}`)
-  //   } else if (typeText.indexOf('前台') !== -1) {
-  //     if (typeText == '会客厅前台') {
-  //       router.push({
-  //         path: '/DetailsPageconetent',
-  //         query: {
-  //           select: '基础设施',
-  //           formPage: 'noticePage'
-  //         },
-  //       })
-  //     } else {
-  //       window.sessionStorage.setItem('type', JSON.stringify('apply'))
-  //       router.push({
-  //         path: '/personalCenter',
-  //         query: {
-  //           tabTypeName: tabTypeObj[typeText] || '能力申请',
-  //         }
-  //       })
-  //     }
-
-  //   }
-  // }
-}
-
-// 更改消息状态
-const read = (item) => {
-  if (selectData.value.length === 0 && !item) {
-    return message.error('未选择消息！')
-  }
-  console.log(selectData.value)
-  if (item) {
-    // 已读状态,跳转页面
-    if (item.readStatus === 1) {
-      return goPage(item)
+  const changeCheckBox = (item) => {
+    item.checked = !item.checked
+    if (item.checked) {
+      selectData.value.push(item.id)
+    } else {
+      selectData.value = selectData.value.filter((val) => val !== item.id)
     }
-    mynoticeRead(item.id).then((res) => {
-      if (res.data.code == 0) {
-        message.success('通知已读！')
-        mybus.emit('getMynotice')
-        init()
-        // 页面跳转
-        setTimeout(() => {
-          goPage(item)
-        }, 1500)
-      } else {
-        message.error('操作失败！')
-      }
-    }).catch(err => {
-      message.error(err)
-    })
-  } else {
-    console.log('提交')
-    selectData.value.map((val) => {
-      mynoticeRead(val).then((res) => {
-        if (res.data.code == 0) {
-          // message.success('操作成功！')
-          mybus.emit('getMynotice')
-          init()
-        } else {
-          message.error('操作失败！')
-        }
+  }
+  const changeCheckAll = () => {
+    if (selectData.value.length == data.value.length) {
+      selectData.value = []
+      data.value.forEach((val) => {
+        val.checked = false
       })
+    } else {
+      selectData.value = []
+      data.value.forEach((val) => {
+        val.checked = true
+        selectData.value.push(val.id)
+      })
+    }
+  }
+  const changePageNum = (page) => {
+    pageNum.value = page
+    obj.page = pageNum.value
+    init()
+  }
+  const handleChange = () => {
+    pageNum.value = 1
+    obj.page = pageNum.value
+    switch (value.value) {
+      case '全部消息':
+        delete obj.readStatus
+        break
+      case '已读消息':
+        obj.readStatus = 1
+        break
+      case '未读消息':
+        obj.readStatus = 0
+        break
+      default:
+        delete obj.readStatus
+        break
+    }
+    init()
+  }
+  const goBack = (url) => {
+    router.push({
+      path: url,
     })
   }
-}
-const init = () => {
-  // from 通知 评论 readStatus 0 未读  1 已读
-  mynotice(obj).then((res) => {
-    console.log('消息=============>', res.data.data)
-    res.data.data.list.forEach((val) => {
-      if (val.from === '通知') {
-        val.src = require('@/assets/mynoticeView/notice.png')
-      } else if (val.from === '评论') {
-        val.src = require('@/assets/mynoticeView/comment.png')
-      } else if (val.from === '其它') {
-        val.src = require('@/assets/mynoticeView/other.png')
+
+  // 申请状态
+  let applyStateObj = {
+    0: '待办',
+    1: '已办',
+  }
+  let typeObj = {
+    0: '申请前台',
+    1: '申请后台',
+    2: '上架前台',
+    3: '上架后台',
+    4: '下架前台',
+    5: '下架后台',
+    6: '需求前台',
+    7: '需求后台',
+    8: '评论前台',
+    9: '评论后台',
+    10: '会客厅前台',
+    11: '会客厅后台',
+    12: '其他',
+  }
+
+  // 对应的后台管理的页面
+  let pageObj = {
+    申请后台: {
+      0: 'myAgent-CompetencyApplication',
+      1: 'hasToDoTasks-CompetencyApplication',
+    },
+    上架后台: {
+      0: 'myAgent-AbilityResourceShelf',
+      1: 'hasToDoTasks-AbilityResourceShelf',
+    },
+    下架后台: {
+      0: 'myAgent-AbilityResourcesRemoved',
+      1: 'hasToDoTasks-AbilityResourcesRemoved',
+    },
+    需求后台: {
+      0: 'myAgent-ApplicationforCompetencyRequirements',
+      1: 'hasToDoTasks-ApplicationForCompetencyRequirements',
+    },
+    评论后台: {
+      0: 'myAgent-CommentModeration',
+      1: 'hasToDoTasks-CommentModeration',
+    },
+    会客厅后台: {
+      0: 'activiti-RoomExamineAdmin',
+      1: 'activiti-RoomExamineAdmin',
+    },
+  }
+
+  // 前台tab名称
+  const tabTypeObj = {
+    申请前台: '能力申请',
+    上架前台: '能力上架',
+    下架前台: '能力下架',
+    需求前台: '需求评论',
+    评论前台: '需求评论',
+    会客厅前台: '会客厅前台',
+  }
+
+  // 会客厅后台
+  const goPage = (item) => {
+    if (item.jumpUrl && item.type !== 12) {
+      let typeText = typeObj[item.type]
+      console.log('item------------>', item)
+      console.log('typeText类型------------>', typeText)
+      // "http://192.168.124.236:9796/#/personalCenter?tabTypeName=能力申请"
+      let _url = item.jumpUrl && item.jumpUrl.split('#')
+      let openType = '_self'
+      // 如果是跳转到后台管理，重新打开页面
+      if (typeText && typeText.indexOf('后台') !== -1) {
+        openType = '_blank'
+      } else {
+        if (_url[1] && _url[1].indexOf('personalCenter') !== -1) {
+          window.sessionStorage.setItem('type', JSON.stringify('apply'))
+        }
       }
-      val.checked = false
-    })
-    data.value = res.data.data.list
-    total.value = res.data.data.total
-    selectData.value = []
-  })
-}
-navList.forEach((val) => {
-  if (val.title === '全部') {
-    mynotice({ page: pageNum.value, limit: pageSize.value }).then((res) => {
-      val.num = res.data.data.total
-    })
-  } else {
-    mynotice({
-      page: pageNum.value,
-      limit: pageSize.value,
-      from: val.title,
-    }).then((res) => {
-      val.num = res.data.data.total
+      window.open(item.jumpUrl, openType)
+    }
+    return
+    // if (typeText) {
+    //   console.log('typeText类型------------>', typeText);
+    //   // 是后台，跳转到后台相关页面
+    //   if (typeText.indexOf('后台') !== -1) {
+    //     let _applyState = item.applyState
+    //     let _page = pageObj[typeText][_applyState]
+    //     window.open(window.SITE_CONFIG.backUrl + `/#/${_page}`)
+    //   } else if (typeText.indexOf('前台') !== -1) {
+    //     if (typeText == '会客厅前台') {
+    //       router.push({
+    //         path: '/DetailsPageconetent',
+    //         query: {
+    //           select: '基础设施',
+    //           formPage: 'noticePage'
+    //         },
+    //       })
+    //     } else {
+    //       window.sessionStorage.setItem('type', JSON.stringify('apply'))
+    //       router.push({
+    //         path: '/personalCenter',
+    //         query: {
+    //           tabTypeName: tabTypeObj[typeText] || '能力申请',
+    //         }
+    //       })
+    //     }
+
+    //   }
+    // }
+  }
+
+  // 更改消息状态
+  const read = (item) => {
+    if (selectData.value.length === 0 && !item) {
+      return message.error('未选择消息！')
+    }
+    console.log(selectData.value)
+    if (item) {
+      // 已读状态,跳转页面
+      if (item.readStatus === 1) {
+        return goPage(item)
+      }
+      mynoticeRead(item.id)
+        .then((res) => {
+          if (res.data.code == 0) {
+            message.success('通知已读！')
+            mybus.emit('getMynotice')
+            init()
+            // 页面跳转
+            setTimeout(() => {
+              goPage(item)
+            }, 1500)
+          } else {
+            message.error('操作失败！')
+          }
+        })
+        .catch((err) => {
+          message.error(err)
+        })
+    } else {
+      console.log('提交')
+      selectData.value.map((val) => {
+        mynoticeRead(val).then((res) => {
+          if (res.data.code == 0) {
+            // message.success('操作成功！')
+            mybus.emit('getMynotice')
+            init()
+          } else {
+            message.error('操作失败！')
+          }
+        })
+      })
+    }
+  }
+  const init = () => {
+    // from 通知 评论 readStatus 0 未读  1 已读
+    mynotice(obj).then((res) => {
+      console.log('消息=============>', res.data.data)
+      res.data.data.list.forEach((val) => {
+        if (val.from === '通知') {
+          val.src = require('@/assets/mynoticeView/notice.png')
+        } else if (val.from === '评论') {
+          val.src = require('@/assets/mynoticeView/comment.png')
+        } else if (val.from === '其它') {
+          val.src = require('@/assets/mynoticeView/other.png')
+        }
+        val.checked = false
+      })
+      data.value = res.data.data.list
+      total.value = res.data.data.total
+      selectData.value = []
     })
   }
-})
-init()
-mybus.on('noticeListInit', () => {
+  navList.forEach((val) => {
+    if (val.title === '全部') {
+      mynotice({ page: pageNum.value, limit: pageSize.value }).then((res) => {
+        val.num = res.data.data.total
+      })
+    } else {
+      mynotice({
+        page: pageNum.value,
+        limit: pageSize.value,
+        from: val.title,
+      }).then((res) => {
+        val.num = res.data.data.total
+      })
+    }
+  })
   init()
-})
-onBeforeUnmount(() => {
-  mybus.off('noticeListInit')
-})
+  mybus.on('noticeListInit', () => {
+    init()
+  })
+  onBeforeUnmount(() => {
+    mybus.off('noticeListInit')
+  })
 </script>
 <style lang="less" scoped>
-.notice-list {
-  padding: 0.64rem 0 0;
-  background: #f4f5f8;
+  .notice-list {
+    padding: 0.64rem 0 0;
+    background: #f4f5f8;
 
-  .ant-breadcrumb {
-    padding: 0.1rem 3.1rem;
-  }
-
-  .top {
-    background: #fff;
-    padding: 0.18rem 3.1rem 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-
-
-    .left {
-      display: flex;
-
-      .item {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        margin-left: 1.28rem;
-        margin-bottom: 0.16rem;
-        border-bottom: 3px solid #fff;
-
-        i {
-          display: inline-block;
-          width: 0.48rem;
-          height: 0.48rem;
-          margin-bottom: 0.15rem;
-          cursor: pointer;
-        }
-
-        .all {
-          background: url('~@/assets/mynoticeView/all.png') no-repeat;
-          background-size: 100%;
-        }
-
-        .notice {
-          background: url('~@/assets/mynoticeView/notice.png') no-repeat;
-          background-size: 100%;
-        }
-
-        .comment {
-          background: url('~@/assets/mynoticeView/comment.png') no-repeat;
-          background-size: 100%;
-        }
-
-        .other {
-          background: url('~@/assets/mynoticeView/other.png') no-repeat;
-          background-size: 100%;
-        }
-      }
-
-      .item:nth-of-type(1) {
-        margin-left: 0;
-      }
-
-      .select {
-        border-bottom: 3px solid #0058e1;
-        color: #0058e1;
-      }
+    .ant-breadcrumb {
+      padding: 0.1rem 3.1rem;
     }
 
-    .right {
-      display: flex;
-      align-items: center;
-      height: 0.32rem;
-
-      div {
-        width: 0.5rem;
-      }
-
-      .reset {
-        color: #0058e1;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .btn {
-    background: #fff;
-    margin-top: 0.16rem;
-    padding: 0.14rem 3.1rem 0;
-    display: flex;
-    justify-content: space-between;
-
-    .left {
+    .top {
+      background: #fff;
+      padding: 0.18rem 3.1rem 0;
       display: flex;
+      justify-content: space-between;
       align-items: center;
 
-      .ant-select {
-        margin-right: 0.24rem;
-      }
-
-
-      .check {
+      .left {
         display: flex;
-        align-items: center;
+        .item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          margin-left: 1.28rem;
+          margin-bottom: 0.16rem;
+          border-bottom: 3px solid #fff;
 
-        div {
-          margin-left: 0.24rem;
+          i {
+            display: inline-block;
+            width: 0.48rem;
+            height: 0.48rem;
+            margin-bottom: 0.15rem;
+            cursor: pointer;
+          }
 
-          span {
-            font-size: 18px;
-            color: #0058e1;
+          .all {
+            background: url('~@/assets/mynoticeView/all.png') no-repeat;
+            background-size: 100%;
+          }
+
+          .notice {
+            background: url('~@/assets/mynoticeView/notice.png') no-repeat;
+            background-size: 100%;
+          }
+
+          .comment {
+            background: url('~@/assets/mynoticeView/comment.png') no-repeat;
+            background-size: 100%;
+          }
+
+          .other {
+            background: url('~@/assets/mynoticeView/other.png') no-repeat;
+            background-size: 100%;
           }
         }
 
-        div:nth-of-type(1) {
-          margin-left: 0.12rem;
-        }
-      }
-    }
-
-    .right {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-
-      div {
-        margin: 0 0.1rem;
-      }
-
-      span {
-        cursor: pointer;
-        color: #0058e1;
-        text-align: center;
-        align-self: center;
-        padding: 0.05rem 0.1rem;
-      }
-
-      span:hover {
-        background: rgba(0, 88, 225, 0.1);
-      }
-    }
-  }
-
-  .main {
-    background: #fff;
-    padding: 0 3.1rem;
-    height: 4.75rem;
-    overflow-y: scroll;
-
-    :deep(.ant-list-item-meta) {
-      display: flex;
-      align-items: center;
-
-      .ant-checkbox-wrapper {
-        margin-right: 0.3rem;
-      }
-
-      .ant-list-item-meta-title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .bold-text {
-          font-weight: bold;
-          cursor: pointer;
+        .item:nth-of-type(1) {
+          margin-left: 0;
         }
 
-        .left {
-          width: 9.2rem;
-          max-height: 0.43rem;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          word-break: break-all;
-        }
-
-        .ant-badge-dot {
-          width: 8px;
-          height: 8px;
-        }
-
-        .left:hover {
+        .select {
+          border-bottom: 3px solid #0058e1;
           color: #0058e1;
         }
       }
+
+      .right {
+        display: flex;
+        align-items: center;
+        height: 0.32rem;
+
+        div {
+          width: 0.5rem;
+        }
+
+        .reset {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .btn {
+      background: #fff;
+      margin-top: 0.16rem;
+      padding: 0.14rem 3.1rem 0.1rem;
+      display: flex;
+      justify-content: space-between;
+      .left {
+        display: flex;
+        align-items: center;
+        & > div:nth-of-type(2) {
+          margin-right: 10px;
+        }
+        .ant-select {
+          margin-right: 0.24rem;
+        }
+
+        .check {
+          display: flex;
+          align-items: center;
+
+          div {
+            margin-left: 0.24rem;
+
+            span {
+              font-size: 18px;
+              color: #0058e1;
+            }
+          }
+
+          div:nth-of-type(1) {
+            margin-left: 0.12rem;
+          }
+        }
+      }
+
+      .right {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        div {
+          margin: 0 0.1rem;
+        }
+
+        span {
+          cursor: pointer;
+          color: #0058e1;
+          text-align: center;
+          align-self: center;
+          padding: 0.05rem 0.1rem;
+        }
+
+        span:hover {
+          background: rgba(0, 88, 225, 0.1);
+        }
+      }
+    }
+
+    .main-box {
+      background: #fff;
+      .main {
+        background: #fff;
+        margin: 0 3.1rem;
+        height: 4.75rem;
+        overflow-y: scroll;
+        border-top: 1px solid #dddee1;
+        :deep(.ant-list-item-meta) {
+          display: flex;
+          align-items: center;
+
+          .ant-checkbox-wrapper {
+            margin-right: 0.3rem;
+          }
+
+          .ant-list-item-meta-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .bold-text {
+              font-weight: bold;
+              cursor: pointer;
+            }
+
+            .left {
+              width: 9.2rem;
+              max-height: 0.43rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              word-break: break-all;
+            }
+
+            .ant-badge-dot {
+              width: 8px;
+              height: 8px;
+            }
+
+            .left:hover {
+              color: #0058e1;
+            }
+          }
+        }
+      }
+    }
+
+    .ant-pagination {
+      background: #fff;
+      margin-top: 0;
+      padding: 0.2rem 0 0.2rem;
     }
   }
-
-  .ant-pagination {
-    background: #fff;
-    margin-top: 0;
-    padding: 0.2rem 0 0.2rem;
-  }
-}
 </style>