Merge pull request 'de' (#775) from de into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/775

src/assets/styles/index.scss

@@ -475,8 +475,8 @@ html, body, #app, .el-container, .el-aside, .el-main {
   height: 1.7em;
 }
 .home-time{
-  width: 1.5em;
+  width: 1.4em;
-  height: 1.5em;
+  height: 1.4em;
   margin-right: 5px;
 }
 .middle-icon {

src/views/home/index-old.vue

@@ -0,0 +1,537 @@
+<template>
+  <div class="home-bg" v-if="AuthStore.roles.length">
+    <el-row gutter="20">
+      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
+        <div class="left">
+          <h3>我的科创工作</h3>
+          <el-row :gutter="20" class="statistics">
+            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in list" :key="index">
+              <div class="block" :style="{background: item.color}">
+                <svg-icon :name="item.icon" :class-name="'home-icon'"/>
+                <div class="block-right">
+                  <span>{{ item.title }}</span>
+                  <span :style="{color: item.textColor}">{{ item.num }}<span>个</span></span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-tabs v-model="activeName" class="demo-tabs">
+            <el-tab-pane :label="'待办（'+todoNum +'）'" name="first" v-loading="loading">
+              <fvTable ref="tableConfigBacklogRef" class="home-table" :tableConfig="tableConfigBacklog" @getTotal="getTotal">
+                <template #empty>
+                  <el-empty description="暂无待办"/>
+                </template>
+              </fvTable>
+            </el-tab-pane>
+            <el-tab-pane :label="'待上报（' + reportNum + '）'" name="second">
+              <fvTable ref="tableConfigReportRef" :tableConfig="tableConfigReport" @getTotal="getReportNumTotal">
+                <template #empty>
+                  <el-empty description="暂无数据"/>
+                </template>
+              </fvTable>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+        <div class="right">
+          <div class="right-top ">
+            <div>
+              <h3>帮助文档</h3>
+              <span>查看更多</span>
+            </div>
+            <el-divider/>
+            <div v-for="item in helpDocList" class="help">
+              {{ item.title }}
+            </div>
+          </div>
+          <div class="right-top">
+            <div>
+              <h3>工具下载</h3>
+              <span>常用网站</span>
+            </div>
+            <el-divider/>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+  <div v-else style="display: flex; justify-content: center; align-items: center; height: 100%;">
+    您没有任何角色， 请联系管理员！
+  </div>
+</template>
+
+<script setup lang="jsx">
+import 'element-plus/theme-chalk/display.css'
+import {useAuthStore} from '@/stores/userstore.js'
+
+const AuthStore = useAuthStore()
+const router = useRouter()
+const activeName = ref('first')
+const tableConfigBacklogRef=ref()
+const tableConfigReportRef=ref()
+const list = ref([
+  {
+    title: '待立项',
+    color: '#CEE8FA',
+    textColor: '#0043C5',
+    icon: 'home1',
+    num: 21
+  },
+  {
+    title: '待评审',
+    color: '#DCCEFA',
+    textColor: '#8600C5',
+    icon: 'home2',
+    num: 2
+  },
+  {
+    title: '待验收',
+    color: '#FAE6CE',
+    textColor: '#F47D0E',
+    icon: 'home3',
+    num: 4
+  },
+  {
+    title: '待归档',
+    color: '#CEFAD8',
+    textColor: '#01A089',
+    icon: 'home4',
+    num: 1
+  }
+])
+const helpDocList = ref([
+  {
+    title: '业务流程'
+  },
+  {
+    title: '业务流程'
+  },
+  {
+    title: '业务流程'
+  },
+  {
+    title: '业务流程'
+  }
+])
+const todoNum = ref(0)
+const reportNum = ref(0)
+const auths = {
+  edit: ['mosr:requirement:resubmit'],
+  detail: ['mosr:requirement:info'],
+  add: ['mosr:requirement:add'],
+  del: ['mosr:requirement:del'],
+  report: ['mosr:collect:reported'],
+}
+const tableConfigBacklog = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width:85,
+      index: index => {
+        return (tableConfigBacklogRef.value.getQuery().pageNum - 1) * tableConfigBacklogRef.value.getQuery().pageSize + index + 1
+      }
+    },
+    {
+      prop: 'targetName',
+      label: '流程名称',
+      align: 'center',
+    },
+    {
+      prop: 'initiatorName',
+      label: '发起人',
+      align: 'center',
+    },
+    {
+      prop: 'targetState',
+      label: '流程类型',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        if (row.targetState !== null || row.targetState !== undefined) {
+          return (<Tag dictType={'todo_type'} value={row.targetState}/>)
+        } else {
+          return '--'
+        }
+      }
+    },
+    {
+      prop: 'submitTime',
+      label: '提交时间',
+      align: 'center',
+    },
+    {
+      prop: 'taskName',
+      label: '当前节点',
+      align: 'center',
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      fixed: 'right',
+      width: '150',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
+            </div>
+        )
+      }
+    }
+  ],
+  api: '/workflow/mosr/process/task',
+  params: {},
+})
+const tableConfigReport = reactive({
+  columns: [
+    // {
+    //   type: 'selection',
+    //   prop: 'selection'
+    // },
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width:85,
+      index: index => {
+        return (tableConfigReportRef.value.getQuery().pageNum - 1) * tableConfigReportRef.value.getQuery().pageSize + index + 1
+      }
+    },
+    {
+      prop: 'requirementName',
+      label: '征集名称',
+      align: 'center'
+    },
+    {
+      prop: 'collectType',
+      label: '征集类型',
+      align: 'center'
+    },
+    {
+      prop: 'companyName',
+      label: '征集公司',
+      align: 'center',
+      // currentRender: ({row, index}) => (
+      // <div style={{width: '300px', textOverflow: 'ellipsis',textAlign:'center'}}>{row.companyName}</div>)
+    },
+    // {
+    //   prop: 'approveName',
+    //   label: '审批人',
+    //   align: 'center'
+    // },
+    {
+      prop: 'deadline',
+      label: '截止时间',
+      align: 'center'
+    },
+    // {
+    //   prop: 'taskNode',
+    //   label: '当前节点',
+    //   align: 'center'
+    // },
+    {
+      prop: 'state',
+      label: '状态',
+      align: 'center',
+      width: 200,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (<Tag dictType={'demand_collection'} value={row.state}/>)
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      fixed: 'right',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        let buttons = new Set(Array.from(row.buttons))
+        if (buttons.has("details")) {
+          btn.push({label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary'})
+        }
+        if (buttons.has("report")) {
+          btn.push({label: '需求上报', prem: auths.report, func: () => handleReport(row), type: 'primary'})
+        }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        v-perm={item.prem}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+            </div>
+        )
+      }
+    }
+  ],
+  api: '/workflow/mosr/requirement',
+  params: {
+    state: "4"
+  }
+})
+const handleDetail = (row) => {
+  router.push({
+    name: 'Requirement/detail',
+    query: {
+      id: row.requirementId
+    }
+  })
+}
+const handleReport = (row) => {
+  router.push({
+    name: 'Summary/add',
+    query: {
+      id: row.requirementId
+    }
+  })
+}
+const getTotal = (val) => {
+  todoNum.value = val
+}
+const getReportNumTotal = (val) => {
+  reportNum.value = val
+}
+const handleView = (row) => {
+  if (row.targetState == '00' && row.targetId) {
+    router.push({
+      name: 'Requirement/detail',
+      query: {
+        id: row.targetId,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '10' && row.targetId) {
+    router.push({
+      name: 'Summary/detail',
+      query: {
+        projectId: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '20' || row.targetState == '40' || row.targetState == '50') {
+    router.push({
+      name: 'Implementation/detail',
+      query: {
+        projectId: row.targetId,
+        state: row.state,
+        step: row.targetState,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '70' && row.targetId) {
+    router.push({
+      name: 'Fund/detail',
+      query: {
+        id: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '80' && row.targetId) {
+    router.push({
+      name: 'Share/detail',
+      query: {
+        id: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '90' && row.targetId) {
+    router.push({
+      name: 'Phase/detail',
+      query: {
+        projectId: row.targetId,
+        source: 'home'
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs__nav-scroll) {
+  width: 100%;
+  display: flex;
+
+  .el-tabs__nav {
+    display: flex;
+    flex: 1;
+
+    .el-tabs__item {
+      flex: 1;
+      font-size: 16px;
+    }
+
+    .is-active {
+      color: black;
+      //background-color: #DED0B2;
+    }
+  }
+}
+@media only screen and (max-width: 767px) {
+  .right {
+    margin-top: 10px;
+  }
+  :deep(.el-table) {
+    height: 300px !important;
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  .right {
+    margin-top: 10px;
+  }
+  :deep(.el-table) {
+    height: 300px !important;
+  }
+
+}
+
+.home-bg {
+  height: calc(100vh - 130px);
+  max-height: calc(100vh - 96px);
+  background-color: #EFEFEF;
+  position: absolute;
+  left: 18px;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+
+  .left {
+    //flex: 0.8;
+    padding: 15px;
+    height: 100%;
+    border-radius: 10px;
+    background-color: #ffffff;
+
+
+    .el-table__empty-block {
+      .el-empty {
+        padding: 10px 0;
+      }
+    }
+
+    .statistics {
+      width: 99%;
+      margin-bottom: 20px;
+
+      .block {
+        display: flex;
+        align-items: center;
+        background-color: #e9edf2;
+        border-radius: 4px;
+        padding: 25px;
+        margin-top: 15px;
+
+        .block-right {
+          margin-left: 15%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          color: #92969a;
+          font-size: 17px;
+
+          > span:first-child {
+            white-space: nowrap;
+            color: #000000;
+            margin-bottom: 10px;
+          }
+
+          > span:last-child {
+            white-space: nowrap;
+            font-size: 20px;
+            font-weight: bold;
+
+            > span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  .right {
+    height: calc(100vh - 130px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .right-top {
+      flex: 0.5;
+      padding: 15px;
+      border-radius: 10px;
+      background-color: #ffffff;
+    }
+
+    .right-top {
+      flex: 0.48;
+
+      > div:first-child {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h3 {
+          white-space: nowrap;
+          margin-left: 15px;
+        }
+
+        > span {
+          white-space: nowrap;
+          color: #927648;
+          font-size: 14px;
+        }
+      }
+
+      .el-divider--horizontal {
+        height: 3px;
+        background: #D9D9D9;
+        border: none;
+      }
+
+      .help {
+        height: 61px;
+        line-height: 61px;
+        padding-left: 15px;
+
+        &:hover {
+          background: #FBFBF7;
+        }
+      }
+    }
+  }
+}
+
+</style>

src/views/home/index.vue

@@ -43,11 +43,13 @@
                     <el-empty image-size="135" description="暂无已办数据~"/>
                   </div>
                   <div v-for="item in todoList" class="todo-border">
-                    <div class="status"
+<!--                    <div class="status-style"-->
-                         :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
+<!--                         :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
-                      {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+<!--                      {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
+<!--                    </div>-->
+                    <div class="status-style">
+                      {{item.targetState}}
                     </div>
-                    <div class="process-type">流程类型：{{ item.targetState }}</div>
                     <div class="black-text">发起人：{{ item.initiatorName }}</div>
                     <div class="black-text">当前节点：{{ item.taskName }}</div>
                     <div class="gray-time">
@@ -57,6 +59,7 @@
                           <span>提交时间：</span>
                         </div>
                         <div class="time"> {{ item.submitTime }}</div>
+                        <div class="time">时间要求 {{ item.totalTime }}天</div>
                       </div>
                       <div class="view">查看</div>
                     </div>
@@ -75,11 +78,13 @@
                   <el-empty image-size="135" description="暂无已办数据~"/>
                 </div>
                 <div v-for="item in doneList" class="todo-border">
-                  <div class="status"
+<!--                  <div class="status-style"-->
-                       :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
+<!--                       :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
-                    {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+<!--                    {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
+<!--                  </div>-->
+                  <div class="status-style">
+                    {{item.targetState}}
                   </div>
-                  <div class="process-type">流程类型：{{ item.targetState }}</div>
                   <div class="black-text">发起人：{{ item.initiatorName }}</div>
                   <div class="black-text">当前节点：{{ item.taskName }}</div>
                   <div class="gray-time">
@@ -197,8 +202,12 @@
             <el-tab-pane label="规章制度" name="first">
               <div class="notice-block rules-block">
                 <div v-for="(item,index) in rulesList" class="notice">
-                  <div>
+<!--                  <div>-->
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+<!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
+<!--                  </div>-->
+                  <div :style="{'color': item.isRead ? '#1F63E6' : 'rgba(0,0,0,0.5)'}">
+                    <span>{{ item.title }}</span>
+                    <span class="dot" v-if="item.isRead"></span>
                   </div>
                   <div>2018-05-06</div>
                 </div>
@@ -210,8 +219,11 @@
                   <el-empty image-size="135" description="暂无帮助文档~"/>
                 </div>
                 <div v-for="(item,index) in helpDocList" class="notice">
+<!--                  <div>-->
+<!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
+<!--                  </div>-->
                   <div>
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                    {{ item.title }}
                   </div>
                   <div>2018-05-06</div>
                 </div>
@@ -220,10 +232,11 @@
             <el-tab-pane label="常见问题" name="third">
               <div class="notice-block rules-block">
                 <div v-for="(item,index) in problemList" class="notice">
+<!--                  <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
                   <div>
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                    {{ item.title }}
                   </div>
-                  <!--                  <span class="dot" v-if="item.isRead"></span>-->
+
                   <div>2018-05-06</div>
                 </div>
               </div>
@@ -306,6 +319,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 1,
@@ -313,6 +327,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 2,
@@ -320,6 +335,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 0,
@@ -327,6 +343,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 1,
@@ -334,6 +351,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 2,
@@ -341,6 +359,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
 ])
 const noticeList = ref([
@@ -391,7 +410,7 @@ const rulesList = ref([
   },
   {
     title: '系统升级通知，期间部分服务将暂停',
-    isRead: false
+    isRead: true
   },
   {
     title: '系统升级通知，期间部分服务将暂停',
@@ -626,22 +645,22 @@ const fundPieOption = ref({
     icon: 'circle',
     textStyle: {
       color: 'rgba(0,0,0,0.6)',
-      fontSize: '14px'
+      fontSize: '12px'
-    },
-    formatter: function (name) {
-      let data = fundPieOption.value.series[0].data
-      let total = 0
-      let tarValue
-      for (let i = 0; i < data.length; i++) {
-        total += data[i].value
-        if (data[i].name == name) {
-          tarValue = data[i].value
-        }
-      }
-      let v = tarValue
-      let p = ((tarValue / total) * 100).toFixed(2)
-      return `${name}     ${v}     ${p}%`
     },
+    // formatter: function (name) {
+    //   let data = fundPieOption.value.series[0].data
+    //   let total = 0
+    //   let tarValue
+    //   for (let i = 0; i < data.length; i++) {
+    //     total += data[i].value
+    //     if (data[i].name == name) {
+    //       tarValue = data[i].value
+    //     }
+    //   }
+    //   let v = tarValue
+    //   let p = ((tarValue / total) * 100).toFixed(2)
+    //   return `${name}     ${v}     ${p}%`
+    // },
   },
   graphic: {       //图形中间图片
     elements: [{
@@ -659,12 +678,16 @@ const fundPieOption = ref({
   series: [
     {
       type: 'pie',
-      radius: [75, 100],
+      radius: [65, 90],
       center: ['50%', '50%'],
       top: '10%',
       left:'8',
       label: {
-        show: false,
+        show: true,
+        formatter: '{b}\n{d}%'
+        // formatter: params => {
+          // console.log(params)
+        // },
       },
       itemStyle: {
         normal: {
@@ -690,8 +713,8 @@ const fundPieOption = ref({
         }
       },
       data: [
-        {value: 75, name: '专项资金',},
+        {value: 75, name: '专项资金',label:{color:'#6201FF'}},
-        {value: 20, name: '非专项资金', selected: true},
+        {value: 20, name: '非专项资金',label:{color:'#1AA4AD'}, selected: true},
       ],
     },
     {
@@ -701,7 +724,7 @@ const fundPieOption = ref({
       left:'8',
       clockWise: false,
       hoverAnimation: false,
-      radius: ['80%', '80%'],//边框大小
+      radius: ['70%', '70%'],//边框大小
       center: ['50%', '50%'],//边框位置
       tooltip: {
         show: false
@@ -733,7 +756,7 @@ const moneyPieOption = ref({
   series: [
     {
       type: 'pie',
-      radius: [0, 100],
+      radius: [0, 90],
       center: ['50%', '50%'],
       label: {
         normal: {
@@ -938,7 +961,7 @@ const handleView = (row) => {
   .total-money {
     height: 25px;
     font-weight: 400;
-    font-size: 16px;
+    font-size: 15px;
     color: #000000;
     line-height: 18px;
   }
@@ -950,13 +973,13 @@ const handleView = (row) => {
 
     > div:last-child {
       font-weight: 400;
-      font-size: 16px;
+      font-size: 15px;
       color: #000000;
       letter-spacing: 1px;
     }
 
     .company-name {
-      font-size: 14px;
+      font-size: 12px;
       color: rgba(0, 0, 0, 0.6);
       letter-spacing: 1px;
       margin-left: 10px;
@@ -1005,14 +1028,13 @@ const handleView = (row) => {
 
 :deep(.el-tabs__nav-wrap:after) {
   background-color: #D9D9D9 !important;
-  height: 1px !important;
+  height: 2px !important;
 }
 
 :deep(.el-tabs__active-bar) {
-  height: 1px !important;
+  height: 2px !important;
-  //background-color: #1476E3 !important;
+  background-color: #1476E3 !important;
 }
-
 :deep(.el-tabs__new-tab ) {
   width: auto !important;
   border: none !important;
@@ -1042,14 +1064,15 @@ const handleView = (row) => {
       flex: 1;
       font-size: 16px;
       width: 120px;
-      font-weight: 600;
+      //font-weight: 600;
       height: 51px;
       color: rgba(0, 0, 0, 0.5);
     }
 
     .el-tabs__item.is-active {
-      color: #1476E3;
+      color: #1F63E6;
     }
+    //#1476E3
   }
 }
 
@@ -1156,14 +1179,15 @@ const handleView = (row) => {
 
           .gray-time {
             display: flex;
+            flex-direction: column;
             align-items: flex-end;
             font-weight: 400;
             color: rgba(0, 0, 0, 0.5);
             letter-spacing: 1px;
-            font-size: 14px;
+            font-size: 12px;
 
             .view {
-              float: right;
+              //float: right;
               color: #1F63E6;
               white-space: nowrap;
               cursor: pointer;
@@ -1184,6 +1208,9 @@ const handleView = (row) => {
 
             .time {
               margin-left: 23px;
+              &:last-child{
+                white-space: nowrap;
+              }
             }
           }
 
@@ -1191,6 +1218,7 @@ const handleView = (row) => {
             white-space: nowrap;
             color: #000000;
             margin-bottom: 7px;
+            font-size: 12px;
           }
 
           .process-type {
@@ -1201,15 +1229,18 @@ const handleView = (row) => {
             letter-spacing: 1px;
           }
 
-          .status {
+          .status-style {
-            width: 52px;
+            padding: 0 8px;
+            display: inline-block;
             height: 23px;
             border-radius: 3px 3px 3px 3px;
-            font-size: 13px;
+            font-size: 12px;
             color: #FFFFFF;
             line-height: 23px;
             letter-spacing: 1px;
             text-align: center;
+            background-color: #2a99ff;
+            margin-bottom: 14px;
           }
         }
       }
@@ -1252,17 +1283,17 @@ const handleView = (row) => {
           flex-direction: column;
           justify-content: center;
           color: #fff;
-          font-size: 16px;
+          font-size: 13px;
 
           > span:first-child {
             white-space: nowrap;
-            font-size: 26px;
+            font-size: 36px;
             font-weight: bold;
             margin-bottom: 10px;
 
             > span {
               margin-left: 10px;
-              font-size: 16px;
+              font-size: 13px;
             }
           }
 
@@ -1291,37 +1322,44 @@ const handleView = (row) => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      height: 42px !important;
+      height: 47px !important;
-      line-height: 42px !important;
+      line-height: 47px !important;
       color: rgba(0, 0, 0, 0.5) !important;
 
-      .dot {
+      >div:first-child {
-        display: inline-block;
+        position: relative;
-        width: 6px;
-        height: 6px;
-        border-radius: 25px;
-        background: #DD3B3B;
-        margin-left: -6px;
-        margin-bottom: 5px;
-        margin-right: 4px;
-      }
-
-      div:first-child {
-        width: 80% !important;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
 
-        > span:first-child {
+        &:hover {
-          margin-right: 10px;
           color: #1476E3;
-          font-weight: bold;
+          background: #F6FBFE;
-          font-size: 16px;
-          margin-left: 0 !important;
         }
+
+        > span:first-child {
+          //width: 80% !important;
+          margin-right: 4px;
+        }
+
+        .dot {
+          position: absolute;
+          right: 0;
+          top: 14px;
+          display: inline-block;
+          width: 6px;
+          height: 6px;
+          border-radius: 25px;
+          background: #DD3B3B;
+          //margin-left: -6px;
+          //margin-bottom: 5px;
+          //margin-right: 4px;
+        }
+
       }
 
       div:last-child {
+        margin-left: 20px;
         font-weight: 400;
         letter-spacing: 1px;
         color: rgba(0, 0, 0, 0.5)
@@ -1332,7 +1370,7 @@ const handleView = (row) => {
   .notice-block {
     height: 452px;
     overflow-y: auto;
-    margin-top: 10px;
+    //margin-top: 10px;
 
     &::-webkit-scrollbar {
       width: 6px;
@@ -1353,10 +1391,10 @@ const handleView = (row) => {
 
     .notice {
       min-width: 300px;
-      height: 65px;
+      height: 75px;
-      line-height: 65px;
+      line-height: 75px;
       padding: 0 15px;
-      font-size: 15px;
+      font-size: 12px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1394,7 +1432,7 @@ const handleView = (row) => {
       .fund-pie {
         width: 100%;
         height: 25px;
-        font-size: 14px;
+        font-size: 12px;
         color: rgba(0, 0, 0, 0.5);
         text-align: center;
         //margin-top: 15px;
@@ -1423,7 +1461,7 @@ const handleView = (row) => {
           > span {
             white-space: nowrap;
             color: #000000;
-            font-weight: 600;
+            //font-weight: 600;
           }
         }