Merge pull request 'feat : 首页' (#759) from de into master

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

src/assets/styles/index.scss

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

src/assets/svg/home-time.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726060385019" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8147" data-spm-anchor-id="a313x.search_index.0.i14.42e13a81ABrE1q" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M514 514m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#bfbfbf" p-id="8148" data-spm-anchor-id="a313x.search_index.0.i9.42e13a81ABrE1q" class=""></path><path d="M542 543.4h-56v-310c0-16.6 13.4-30 30-30 14.4 0 26 11.6 26 26v314z" fill="#ffffff" p-id="8149" data-spm-anchor-id="a313x.search_index.0.i10.42e13a81ABrE1q" class="selected"></path><path d="M809.4 515.7v-4c0-14.4-11.6-26-26-26h-284v56h284c14.4 0 26-11.6 26-26z" fill="#ffffff" p-id="8150" data-spm-anchor-id="a313x.search_index.0.i8.42e13a81ABrE1q" class=""></path></svg>

src/views/home/index.vue

@@ -1,58 +1,221 @@
 <template>
   <div class="home-bg" v-if="AuthStore.roles.length">
-    <el-row gutter="20">
+    <el-row gutter="10">
       <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
-        <div class="left">
+        <div class="top-left">
-          <h3>我的科创工作</h3>
+          <el-card shadow="never">
-          <el-row :gutter="20" class="statistics">
+            <el-row class="statistics">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in list" :key="index">
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="(item,index) in taskTabList" :key="index">
-              <div class="block" :style="{background: item.color}">
+                <div class="block" :style="{'background-image':'url('+getImgUrl(item.icon)+')'}"
-                <svg-icon :name="item.icon" :class-name="'home-icon'"/>
+                     @click="clickGotoListPage(item)">
                   <div class="block-right">
+                    <span>{{ item.num }}<span>个</span></span>
                     <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-card>
-            <el-tab-pane :label="'待办（'+todoNum +'）'" name="first" v-loading="loading">
+          <el-card shadow="never" class="todo-bg">
-              <fvTable ref="tableConfigBacklogRef" class="home-table" :tableConfig="tableConfigBacklog" @getTotal="getTotal">
+            <el-tabs v-model="activeName" editable>
-                <template #empty>
+              <template #add-icon>
-                  <el-empty description="暂无待办"/>
+                刷新一下
+                <div style="width: 31px"></div>
               </template>
-              </fvTable>
+              <el-tab-pane :label="'待办（'+todoNum +'）'" name="first">
+                <div class="todo-top">
+                  <div class="bell">
+                    <el-icon size="20" color="#F55815">
+                      <BellFilled/>
+                    </el-icon>
+                    <span>您有{{ todoNum }}条待办需要处理</span>
+                  </div>
+                  <div class="todo-more">
+                    <!--                    <el-icon color="#1F63E6" size="18"><RefreshRight /></el-icon>-->
+                    <span>查看更多</span>
+                    <el-icon color="#1F63E6" size="18">
+                      <ArrowRight/>
+                    </el-icon>
+                  </div>
+                </div>
+                <div class="todo-content">
+                  <div v-if="todoList&&todoList.length==0">
+                    <el-empty image-size="135" description="暂无已办数据~"/>
+                  </div>
+                  <div v-for="item in todoList" class="todo-border">
+                    <div class="status"
+                         :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
+                      {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+                    </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">
+                      <div>
+                        <div class="title">
+                          <svg-icon name="home-time" :class-name="'home-time'"/>
+                          <span>提交时间：</span>
+                        </div>
+                        <div class="time"> {{ item.submitTime }}</div>
+                      </div>
+                      <div class="view">查看</div>
+                    </div>
+                  </div>
+                </div>
+                <!--                <fvTable ref="tableConfigBacklogRef" class="home-table" :tableConfig="tableConfigBacklog"-->
+                <!--                         :pagination="false"-->
+                <!--                         @getTotal="getTotal">-->
+                <!--                  <template #empty>-->
+                <!--                    <el-empty description="暂无待办"/>-->
+                <!--                  </template>-->
+                <!--                </fvTable>-->
               </el-tab-pane>
-            <el-tab-pane :label="'待上报（' + reportNum + '）'" name="second">
+              <el-tab-pane :label="'已办（' + reportNum + '）'" name="second">
-              <fvTable ref="tableConfigReportRef" :tableConfig="tableConfigReport" @getTotal="getReportNumTotal">
+                <div v-if="doneList&&doneList.length==0">
-                <template #empty>
+                  <el-empty image-size="135" description="暂无已办数据~"/>
-                  <el-empty description="暂无数据"/>
+                </div>
-                </template>
+                <div v-for="item in doneList" class="todo-border">
-              </fvTable>
+                  <div class="status"
+                       :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
+                    {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+                  </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">
+                    <div>
+                      <div class="title">
+                        <svg-icon name="home-time" :class-name="'home-time'"/>
+                        <span>提交时间：</span>
+                      </div>
+                      <div class="time"> {{ item.submitTime }}</div>
+                    </div>
+                    <div class="view">查看</div>
+                  </div>
+                </div>
+                <!--                <fvTable ref="tableConfigReportRef" :tableConfig="tableConfigReport" @getTotal="getReportNumTotal">-->
+                <!--                  <template #empty>-->
+                <!--                    <el-empty description="暂无数据"/>-->
+                <!--                  </template>-->
+                <!--                </fvTable>-->
               </el-tab-pane>
             </el-tabs>
+          </el-card>
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
         <div class="right">
           <div class="right-top ">
+            <div class="title-block">
+              <div class="title">
+                <div class="tag"></div>
+                <span>通知公告</span>
+              </div>
+              <div class="more">
+                <span>更多</span>
+                <el-icon color="#1F63E6" size="18">
+                  <ArrowRight/>
+                </el-icon>
+              </div>
+            </div>
+            <div class="notice-block">
+              <div v-for="(item,index) in noticeList" class="notice">
+                <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row gutter="10" style="margin-top: 10px">
+      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
+        <div class="right bottom">
+          <div class="right-top ">
+            <div class="title-block">
+              <div class="title">
+                <div class="tag"></div>
+                <span>专项资金项目</span>
+              </div>
+              <div class="more">
+                <span>更多</span>
+                <el-icon color="#1F63E6" size="18">
+                  <ArrowRight/>
+                </el-icon>
+              </div>
+            </div>
             <div>
-              <h3>帮助文档</h3>
+              <div class="container">
-              <span>查看更多</span>
+                <div id="rose" ref="rose"></div>
-            </div>
-            <el-divider/>
-            <div v-for="item in helpDocList" class="help">
-              {{ item.title }}
               </div>
             </div>
-          <div class="right-top">
+          </div>
+
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+        <div class="right  bottom">
+          <div class="right-top ">
+            <div class="title-block">
+              <div class="title">
+                <div class="tag"></div>
+                <span>研发投入资金</span>
+              </div>
+              <div class="more">
+                <span>更多</span>
+                <el-icon color="#1F63E6" size="18">
+                  <ArrowRight/>
+                </el-icon>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
+        <el-card shadow="never" class="todo-bg">
+          <el-tabs v-model="docActiveTab" editable>
+            <template #add-icon>
+              更多
+              <el-icon color="#1F63E6" size="18">
+                <ArrowRight/>
+              </el-icon>
+              <div style="width: 15px"></div>
+            </template>
+            <el-tab-pane label="规章制度" name="first">
+              <div class="notice-block rules-block">
+                <div v-for="(item,index) in rulesList" class="notice">
                   <div>
-              <h3>工具下载</h3>
+                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
-              <span>常用网站</span>
                   </div>
-            <el-divider/>
+                  <div>2018-05-06</div>
                 </div>
               </div>
+            </el-tab-pane>
+            <el-tab-pane label="帮助文档" name="second">
+              <div class="notice-block rules-block">
+                <div v-if="helpDocList&&helpDocList.length==0">
+                  <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>2018-05-06</div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="常见问题" name="third">
+              <div class="notice-block rules-block">
+                <div v-for="(item,index) in problemList" class="notice">
+                  <div>
+                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                  </div>
+                  <!--                  <span class="dot" v-if="item.isRead"></span>-->
+                  <div>2018-05-06</div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -65,55 +228,184 @@
 import 'element-plus/theme-chalk/display.css'
 import {useAuthStore} from '@/stores/userstore.js'
 
+import * as echarts from 'echarts'
+
 const AuthStore = useAuthStore()
 const router = useRouter()
 const activeName = ref('first')
-const tableConfigBacklogRef=ref()
+const docActiveTab = ref('first')
-const tableConfigReportRef=ref()
+const tableConfigBacklogRef = ref()
-const list = ref([
+const tableConfigReportRef = ref()
+const taskTabList = ref([
   {
     title: '待立项',
     color: '#CEE8FA',
     textColor: '#0043C5',
-    icon: 'home1',
+    icon: 'home1.png',
     num: 21
   },
   {
-    title: '待评审',
+    title: '已立项',
     color: '#DCCEFA',
     textColor: '#8600C5',
-    icon: 'home2',
+    icon: 'home2.png',
     num: 2
   },
   {
-    title: '待验收',
+    title: '实施中',
     color: '#FAE6CE',
     textColor: '#F47D0E',
-    icon: 'home3',
+    icon: 'home3.png',
     num: 4
   },
   {
-    title: '待归档',
+    title: '已验收',
     color: '#CEFAD8',
     textColor: '#01A089',
-    icon: 'home4',
+    icon: 'home4.png',
     num: 1
   }
 ])
-const helpDocList = ref([
+const todoList = ref([
   {
-    title: '业务流程'
+    status: 0,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
   },
   {
-    title: '业务流程'
+    status: 1,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
   },
   {
-    title: '业务流程'
+    status: 2,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
   },
   {
-    title: '业务流程'
+    status: 0,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+  {
+    status: 1,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+  {
+    status: 2,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+])
+const noticeList = ref([
+  {
+    title: '系统升级通知，升级通知，期间部分服务将暂升级通知，期间部分服务将暂升级通知，期间部分服务将暂将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
   }
 ])
+const rulesList = ref([
+  {
+    title: '系统升级通知，升级通知，期间部分服务将暂升级通知，期间部分服务将暂升级通知，期间部分服务将暂将暂停',
+    isRead: true
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: true
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: true
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  }
+])
+const helpDocList = ref([])
+const problemList = ref([
+  {
+    title: '常见问题',
+    isRead: true
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: true
+  }
+
+])
+const doneList = ref([])
 const todoNum = ref(0)
 const reportNum = ref(0)
 const auths = {
@@ -130,7 +422,7 @@ const tableConfigBacklog = reactive({
       type: 'index',
       label: '序号',
       align: 'center',
-      width:85,
+      width: 85,
       index: index => {
         return (tableConfigBacklogRef.value.getQuery().pageNum - 1) * tableConfigBacklogRef.value.getQuery().pageSize + index + 1
       }
@@ -198,7 +490,7 @@ const tableConfigReport = reactive({
       type: 'index',
       label: '序号',
       align: 'center',
-      width:85,
+      width: 85,
       index: index => {
         return (tableConfigReportRef.value.getQuery().pageNum - 1) * tableConfigReportRef.value.getQuery().pageSize + index + 1
       }
@@ -282,6 +574,53 @@ const tableConfigReport = reactive({
     state: "4"
   }
 })
+
+const data = reactive({
+  pieCharts: null,
+})
+const roseOption = ref({
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: 'bottom',
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: [80, 100],
+      center: ['50%', '50%'],
+      itemStyle: {
+        // borderRadius: 8
+      },
+      data: [
+        {value: 10, name: '用户总数'},
+        {value: 50, name: '角色总数'},
+      ]
+    }
+  ]
+})
+const init = () => {
+  data.pieCharts = echarts.init(document.getElementById('rose')).setOption(roseOption.value)
+}
+
+onMounted(() => {
+  init()
+})
+
+window.addEventListener('resize', () => {
+  data.pieCharts = null
+  init()
+})
+
+const clickGotoListPage = (item) => {
+  console.info("🚀 ~method:clickGotoListPage -----", item.title)
+}
+
+const getImgUrl = (name) => {
+  return new URL('../../assets/home/' + name, import.meta.url).href
+}
+
 const handleDetail = (row) => {
   router.push({
     name: 'Requirement/detail',
@@ -363,25 +702,66 @@ const handleView = (row) => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.el-tabs__nav-scroll) {
+* {
-  width: 100%;
+  font-family: Source Sans Pro, Source Sans Pro;
-  display: flex;
+}
 
-  .el-tabs__nav {
+.container {
+  height: calc((100vh / 2) - 200px);
   display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+
+  > div {
+    height: 300px;
     flex: 1;
+  }
+}
 
+:deep(.el-card__body) {
+  padding: 0 5px !important;
+}
+
+:deep(.el-tabs__nav-wrap:after) {
+  background-color: #D9D9D9 !important;
+  height: 1px !important;
+}
+
+:deep(.el-tabs__active-bar) {
+  height: 1px !important;
+  background-color: #1476E3 !important;
+}
+
+:deep(.el-tabs__new-tab ) {
+  width: auto !important;
+  border: none !important;
+  margin-left: -93px !important;
+  color: #1476E3;
+  font-size: 14px;
+}
+
+:deep(.el-card) {
+  border-radius: 10px !important;
+}
+
+:deep(.is-icon-close) {
+  display: none;
+}
+
+:deep(.el-tabs__nav-scroll) {
+  .el-tabs__nav {
     .el-tabs__item {
       flex: 1;
       font-size: 16px;
-    }
+      width: 120px;
-
+      font-weight: 600;
-    .is-active {
+      height: 51px;
-      color: black;
+      color: #1476E3;
-      //background-color: #DED0B2;
     }
   }
 }
+
 @media only screen and (max-width: 767px) {
   .right {
     margin-top: 10px;
@@ -411,6 +791,24 @@ const handleView = (row) => {
   overflow-x: hidden;
   overflow-y: auto;
 
+  .todo-more {
+    display: flex;
+    align-items: center;
+    color: #1476E3;
+    cursor: pointer;
+    margin-right: 10px;
+    line-height: 20px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    > span {
+      margin-left: 10px;
+      margin-right: 3px;
+    }
+  }
+
   &::-webkit-scrollbar {
     width: 6px;
   }
@@ -427,109 +825,331 @@ const handleView = (row) => {
     border-radius: 10px;
   }
 
-  .left {
+  .top-left {
     //flex: 0.8;
-    padding: 15px;
+    .todo-bg {
-    height: 100%;
+      margin-top: 10px;
+
+      .todo-content {
+        overflow-x: scroll;
+        margin: 0 12px 0 19px;
+        padding: 0 0 10px 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        &::-webkit-scrollbar {
+          width: 6px;
+          height: 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;
-    background-color: #ffffff;
+        }
+
+        .todo-border {
+          padding: 13px;
+          width: 180px;
+          background: rgba(73, 171, 239, 0.05);
+          border-radius: 8px 8px 8px 8px;
+          border: 1px solid #D0D0E3;
+          margin-right: 23px;
+          font-size: 14px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &:hover {
+            border: 1px solid #F55815;
+          }
+
+          .gray-time {
+            display: flex;
+            align-items: flex-end;
+            font-weight: 400;
+            color: rgba(0, 0, 0, 0.5);
+            letter-spacing: 1px;
+            font-size: 14px;
+
+            .view {
+              float: right;
+              color: #1F63E6;
+              white-space: nowrap;
+              cursor: pointer;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            }
+
+            > div:first-child {
+              display: flex;
+              flex-direction: column;
+
+              .title {
+                display: flex;
+              }
+            }
+
+            .time {
+              margin-left: 23px;
+            }
+          }
+
+          .black-text {
+            white-space: nowrap;
+            color: #000000;
+            margin-bottom: 7px;
+          }
+
+          .process-type {
+            white-space: nowrap;
+            margin-top: 13px;
+            margin-bottom: 7px;
+            color: #1F63E6;
+            letter-spacing: 1px;
+          }
+
+          .status {
+            width: 52px;
+            height: 23px;
+            border-radius: 3px 3px 3px 3px;
+            font-size: 13px;
+            color: #FFFFFF;
+            line-height: 23px;
+            letter-spacing: 1px;
+            text-align: center;
+          }
+        }
+      }
+
+      .todo-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        margin-bottom: 12px;
+        margin-left: 20px;
 
 
-    .el-table__empty-block {
+        .bell {
-      .el-empty {
+          display: flex;
-        padding: 10px 0;
+          align-items: center;
+          color: #F55815;
+          font-size: 15px;
+
+          > span {
+            margin-left: 10px;
+            letter-spacing: 1px;
+          }
+        }
       }
     }
 
     .statistics {
-      width: 99%;
-      margin-bottom: 20px;
-
       .block {
+        cursor: pointer;
         display: flex;
         align-items: center;
-        background-color: #e9edf2;
+        height: 150px;
-        border-radius: 4px;
+        background-size: 100% 100%;
-        padding: 25px;
+        background-repeat: no-repeat;
-        margin-top: 15px;
 
         .block-right {
           margin-left: 15%;
           display: flex;
           flex-direction: column;
           justify-content: center;
-          color: #92969a;
+          color: #fff;
-          font-size: 17px;
+          font-size: 16px;
 
           > span:first-child {
             white-space: nowrap;
-            color: #000000;
+            font-size: 26px;
+            font-weight: bold;
             margin-bottom: 10px;
+
+            > span {
+              margin-left: 10px;
+              font-size: 16px;
+            }
           }
 
           > span:last-child {
             white-space: nowrap;
-            font-size: 20px;
+            color: #fff;
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+
+  .bottom {
+
+    .right-top {
+      height: 410px !important;
+    }
+  }
+
+  .rules-block {
+    height: 343px !important;
+
+    .notice {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 42px !important;
+      line-height: 42px !important;
+      color: rgba(0, 0, 0, 0.5) !important;
+
+      .dot {
+        display: inline-block;
+        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 {
+          margin-right: 10px;
+          color: #1476E3;
           font-weight: bold;
+          font-size: 16px;
+          margin-left: 0 !important;
+        }
+      }
 
-            > span {
+      div:last-child {
+        font-weight: 400;
+        letter-spacing: 1px;
+        color: rgba(0, 0, 0, 0.5)
+      }
+    }
+  }
+
+  .notice-block {
+    height: 421px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 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;
+    }
+
+    .notice {
+      min-width: 300px;
+      height: 61px;
+      line-height: 61px;
+      padding: 0 15px;
+      font-size: 15px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      > span:first-child {
+        margin-right: 10px;
         margin-left: 10px;
-            }
+        color: #1476E3;
-          }
+        font-weight: bold;
-        }
+        font-size: 16px;
-      }
       }
 
+      &:hover {
+        color: #1476E3;
+        background: #F6FBFE;
+      }
+    }
   }
 
   .right {
-    height: calc(100vh - 130px);
+    //height: calc(100vh - 130px);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 
     .right-top {
-      flex: 0.5;
+      height: 473px;
-      padding: 15px;
+      //flex: 0.61;
+      overflow: hidden;
       border-radius: 10px;
       background-color: #ffffff;
-    }
 
-    .right-top {
+      .title-block {
-      flex: 0.48;
-
-      > div:first-child {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding: 15px;
+        border-bottom: 2px solid #D9D9D9;
 
-        h3 {
+        .title {
-          white-space: nowrap;
+          display: flex;
-          margin-left: 15px;
+          align-items: center;
+
+          .tag {
+            width: 7px;
+            height: 18px;
+            background: linear-gradient(#1476E3 0%, #99C9FF 100%);
+            margin-right: 5px;
+            border-radius: 2px;
+            margin-top: 2px;
           }
 
           > span {
             white-space: nowrap;
-          color: #927648;
+            color: #000000;
+            font-weight: 600;
+          }
+        }
+
+        .more {
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          color: #1476E3;
           font-size: 14px;
-        }
+          cursor: pointer;
-      }
 
-      .el-divider--horizontal {
+          line-height: 20px;
-        height: 3px;
-        background: #D9D9D9;
-        border: none;
-      }
-
-      .help {
-        height: 61px;
-        line-height: 61px;
-        padding-left: 15px;
 
           &:hover {
-          background: #FBFBF7;
+            text-decoration: underline;
+
           }
         }
+
+      }
+
     }
   }
 }