浏览代码

首页满屏不滚动及其他小优化

liangyan0105 3 年之前
父节点
当前提交
7ee0f1c1e7
共有 4 个文件被更改,包括 182 次插入172 次删除
  1. 34 37
      src/assets/less/mytodo.css
  2. 104 104
      src/assets/less/mytodo.less
  3. 41 28
      src/views/dashboard/MyToDo.vue
  4. 3 3
      src/views/dashboard/MyoaTabs.vue

+ 34 - 37
src/assets/less/mytodo.css

@@ -1,102 +1,99 @@
-.topCard .userImg {
+#home .firstLine .userImg {
   width: 50px;
   height: 50px;
 }
-.topCard .userImg img {
+#home .firstLine .userImg img {
   border-radius: 50%;
   width: 100%;
 }
-.topCard .userInfo {
+#home .firstLine .userInfo {
   line-height: 20px;
   color: #333;
 }
-.topCard .userInfo p {
+#home .firstLine .userInfo p {
   margin-top: 20px;
 }
-.topCard .userInfo em {
+#home .firstLine .userInfo em {
   font-style: normal;
 }
-.topCard .msgBox {
+#home .firstLine .msgBox {
   text-align: center;
   background-color: rgba(236, 232, 232, 0.4);
   border-radius: 2px;
 }
-.topCard .msgBox span {
+#home .firstLine .msgBox span {
   font-size: 28px;
   color: orangered;
 }
-.topCard .msgBox p {
+#home .firstLine .msgBox p {
   color: gray;
 }
-.topCard .oaBig {
+#home .firstLine .oaBig {
   background-color: #61bea7;
   text-align: center;
   justify-content: space-between;
 }
-.topCard .oaBig .oaItem {
+#home .firstLine .oaBig .oaItem {
   margin-bottom: 20px;
   width: calc((100% - 10px) / 3);
 }
-.topCard .oaBig .oaItem h4 {
+#home .firstLine .oaBig .oaItem h4 {
   margin-top: 4px;
 }
-.news .links button {
+#home .secondLine .links button {
   border-radius: 2px;
   border: none;
   margin-right: 10px;
   background-color: rgba(102, 155, 188, 0.7);
   margin-bottom: 10px;
 }
-.news .links button a {
+#home .secondLine .links button a {
   color: white;
   font-size: 18px;
   padding: 10px 14px;
 }
-.news .links button:hover {
+#home .secondLine .links button:hover {
   background-color: #003049;
   color: white;
   box-shadow: 1px 1px 3px #333;
 }
-.news .fullCard {
-  height: 400px;
-}
-.news .fullCard /deep/ .ant-card-body {
-  padding: 2px;
-}
-.news .ccfullCalendar /deep/ .ant-fullcalendar-header {
-  display: none;
-}
- /deep/ .ant-card-head-title {
+#home /deep/ .ant-card-head-title {
   color: #1890ff;
 }
- /deep/ .ant-fullcalendar {
-  border-top: none;
+#home /deep/ .ant-tabs {
+  border-radius: 2px;
 }
- /deep/ .ant-fullcalendar-calendar-body {
-  padding: 0;
+#home .ccfullCalendar {
+  height: 200px;
 }
- /deep/ .fc .fc-toolbar.fc-header-toolbar {
-  margin-bottom: 6px;
+#home .ccfullCalendar /deep/ .ant-fullcalendar-header {
+  display: none;
 }
- /deep/ .fc .fc-scrollgrid-liquid {
-  height: 274px !important;
+#home .ccfullCalendar /deep/ .fc .fc-scrollgrid-liquid {
+  height: 160px !important;
 }
- /deep/ .fc .fc-toolbar-title {
+#home .ccfullCalendar /deep/ .fc .fc-toolbar-title {
   font-size: 14px;
   letter-spacing: 1px;
 }
- /deep/ .fc-scrollgrid-sync-table {
+#home .ccfullCalendar /deep/ .fc-scrollgrid-sync-table {
   height: 274px !important;
 }
- /deep/ .fc-daygrid-day-bottom {
+#home .ccfullCalendar /deep/ .fc-daygrid-day-bottom {
   margin-top: -10px !important;
 }
- /deep/ .fc .fc-button-primary {
+#home .ccfullCalendar /deep/ .fc .fc-button-primary {
   background-color: #1890ff;
   margin-top: 4px;
   border: none;
 }
- /deep/ .fc .fc-toolbar-title {
+#home .ccfullCalendar /deep/ .fc .fc-toolbar-title {
   color: #333;
   font-size: 16px;
 }
+#home .ccfullCalendar .eventDeal-wrap {
+  height: 200px !important;
+}
+#home .ccfullCalendar /deep/ .fc-scrollgrid {
+  border-color: white;
+}

+ 104 - 104
src/assets/less/mytodo.less

@@ -1,125 +1,125 @@
 // mytodo页面专用样式
-
-// 第一行
-.topCard {
-  .userImg {
-    width: 50px;
-    height: 50px;
-    img {
-      border-radius: 50%;
-      width: 100%;
-    }
-  }
-  .userInfo {
-    line-height: 20px;
-    color: #333;
-    p {
-      margin-top: 20px;
-    }
-    em {
-      font-style: normal;
+#home {
+  // 第一行
+  .firstLine {
+    .userImg {
+      width: 50px;
+      height: 50px;
+      img {
+        border-radius: 50%;
+        width: 100%;
+      }
     }
-  }
-  // 消息
-  .msgBox {
-    text-align: center;
-    background-color: rgba(236, 232, 232, 0.4);
-    border-radius: 2px;
-    span {
-      font-size: 28px;
-      color: orangered;
+    .userInfo {
+      line-height: 20px;
+      color: #333;
+      p {
+        margin-top: 20px;
+      }
+      em {
+        font-style: normal;
+      }
     }
-    p {
-      color: gray;
+    // 消息
+    .msgBox {
+      text-align: center;
+      background-color: rgba(236, 232, 232, 0.4);
+      border-radius: 2px;
+      span {
+        font-size: 28px;
+        color: orangered;
+      }
+      p {
+        color: gray;
+      }
     }
-  }
-  // OA工作台
-  .oaBig {
-    background-color: rgb(97, 190, 167);
-    text-align: center;
-    justify-content: space-between;
-    .oaItem {
-      margin-bottom: 20px;
-      width: calc((100% - 10px) / 3);
-      h4 {
-        margin-top: 4px;
+    // OA工作台
+    .oaBig {
+      background-color: rgb(97, 190, 167);
+      text-align: center;
+      justify-content: space-between;
+      .oaItem {
+        margin-bottom: 20px;
+        width: calc((100% - 10px) / 3);
+        h4 {
+          margin-top: 4px;
+        }
       }
     }
   }
-}
 
-// 第二行
-.news {
-  // 友情链接
-  .links {
-    button {
-      border-radius: 2px;
-      border: none;
-      margin-right: 10px;
-      background-color: rgba(102, 155, 188, 0.7);
-      margin-bottom: 10px;
-      a {
+  // 第二行
+  .secondLine {
+    // 友情链接
+    .links {
+      button {
+        border-radius: 2px;
+        border: none;
+        margin-right: 10px;
+        background-color: rgba(102, 155, 188, 0.7);
+        margin-bottom: 10px;
+        a {
+          color: white;
+          font-size: 18px;
+          padding: 10px 14px;
+        }
+      }
+      button:hover {
+        background-color: #003049;
         color: white;
-        font-size: 18px;
-        padding: 10px 14px;
+        box-shadow: 1px 1px 3px #333;
       }
     }
-    button:hover {
-      background-color: #003049;
-      color: white;
-      box-shadow: 1px 1px 3px #333;
-    }
   }
-  //包着card
-  .fullCard {
-    height: 400px;
-    /deep/ .ant-card-body {
-      padding: 2px;
-    }
+
+  // card 标题颜色
+  /deep/ .ant-card-head-title {
+    color: #1890ff;
+  }
+
+  /deep/ .ant-tabs {
+    border-radius: 2px;
   }
+
   // 日历
   .ccfullCalendar {
+    height: 200px;
     // 年月选择消失
     /deep/ .ant-fullcalendar-header {
       display: none;
     }
-  }
-}
-
-/deep/ .ant-card-head-title {
-  color: #1890ff;
-}
-// 线消息
-/deep/ .ant-fullcalendar {
-  border-top: none;
-}
-
-/deep/ .ant-fullcalendar-calendar-body {
-  padding: 0;
-}
+    //日历真实高度
+    /deep/ .fc .fc-scrollgrid-liquid {
+      height: 160px !important;
+    }
+    /deep/ .fc .fc-toolbar-title {
+      font-size: 14px;
+      letter-spacing: 1px;
+    }
+    /deep/ .fc-scrollgrid-sync-table {
+      height: 274px !important;
+    }
+    /deep/ .fc-daygrid-day-bottom {
+      margin-top: -10px !important;
+    }
+    /deep/ .fc .fc-button-primary {
+      background-color: #1890ff;
+      margin-top: 4px;
+      border: none;
+    }
+    /deep/ .fc .fc-toolbar-title {
+      color: #333;
+      font-size: 16px;
+    }
+    .eventDeal-wrap {
+      // background-color: #dddddd;
+      height: 200px !important;
+      // border: none;
+    }
 
-/deep/ .fc .fc-toolbar.fc-header-toolbar {
-  margin-bottom: 6px;
-}
-/deep/ .fc .fc-scrollgrid-liquid {
-  height: 274px !important;
-}
-/deep/ .fc .fc-toolbar-title {
-  font-size: 14px;
-  letter-spacing: 1px;
-}
-/deep/ .fc-scrollgrid-sync-table {
-  height: 274px !important;
-}
-/deep/ .fc-daygrid-day-bottom {
-  margin-top: -10px !important;
-}
-/deep/ .fc .fc-button-primary {
-  background-color: #1890ff;
-  margin-top: 4px;
-  border: none;
-}
-/deep/ .fc .fc-toolbar-title {
-  color: #333;
-  font-size: 16px;
+    /deep/ .fc-scrollgrid {
+      border-color: white;
+      // background-color: orange;
+    }
+  }
 }

+ 41 - 28
src/views/dashboard/MyToDo.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="home">
     <!-- 第一行 -->
-    <a-row :gutter="24" class="topCard">
+    <a-row :gutter="24" class="firstLine">
       <!-- 我的 -->
       <a-col :xs="24" :sm="24" :md="24" :lg="7" :style="{ marginBottom: '8px', paddingRight: 0 }">
         <!-- 等高设置 -->
@@ -46,7 +46,7 @@
         <!-- 等高设置 -->
         <a-card title="OA工作台" :bordered="false" style="height: 264px;">
           <div v-for="(item, index) in activeKeyAll" :key="index" class="oaBig">
-            <a @click.prevent="aClick(item)" class="oaItem fl" >
+            <a @click.prevent="aClick(item)" class="oaItem fl">
               <!-- 图标 -->
               <a-avatar shape="square" :size="36" :src="item.iconAddress" />
               <h4>{{ item.name }}</h4>
@@ -57,21 +57,17 @@
     </a-row>
 
     <!-- 第二行-->
-    <a-row :gutter="24" class="news">
+
+    <a-row :gutter="24" class="secondLine">
       <!-- 公告 -->
       <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="9" :style="{ marginBottom: '8px', paddingRight: 0 }">
-        <a-card title="企业公告" :bordered="false" class="notice">
+        <a-card title="企业公告" :bordered="false" style="height:400px;">
           <template #extra>
             <a href="javascript:void(0);" @click="openEnterAnn">更多</a>
           </template>
 
           <div class="dataV">
-            <dv-scroll-board
-              class="board"
-              :config="config"
-              style="width:100%;height:300px;color:#333;paddinLeft:40px;"
-              @click="getMethod"
-            />
+            <dv-scroll-board class="board" :config="config" style="height:300px;" @click="getMethod" />
           </div>
         </a-card>
       </a-col>
@@ -80,7 +76,7 @@
       <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7" :style="{ marginBottom: '8px' }">
         <a-row :gutter="24">
           <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '8px', paddingRight: 0 }">
-            <a-card title="我的计划" :bordered="false" style="width:100%;height:200px;">
+            <a-card title="我的计划" :bordered="false" style="width:100%;height:196px;">
               <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :style="{ marginBottom: '8px', paddingRight: 0 }">
                 <p>
                   上月我的计划:
@@ -126,13 +122,26 @@
 
       <!-- 日历 -->
       <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" :style="{ marginBottom: '8px' }">
-        <a-card title="日程" :bordered="false" class="fullCard">
+        <a-card title="日程" :bordered="false" style="height:400px;">
           <template #extra>
-            <a href="javascript:void(0);" @click="openCalTab">更多</a>
+            <a href="javascript:void(0);" @click="openCalTab">详情</a>
           </template>
-          <div class="ccfullCalendar">
-            <FullCalendar :options="calendarOptions" style="height:300px;" class="eventDeal-wrap" />
-          </div>
+
+          <a-row :gutter="24">
+            <!-- 当前时间 -->
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <div style="height:100px;background:#a5a58d;">
+                准备放当前时间
+              </div>
+            </a-col>
+
+            <!-- 小日历 -->
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <div class="ccfullCalendar">
+                <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
+              </div>
+            </a-col>
+          </a-row>
         </a-card>
       </a-col>
     </a-row>
@@ -172,7 +181,7 @@ import { enterpriseEQueryById } from '@api/oa/cd-enterprise-announcement'
 import { enterpriseEList } from '@api/oa/cd-enterprise-announcement'
 import '@fullcalendar/daygrid/main.css'
 import JEditor from '../../components/jeecg/JEditor.vue'
-import '@/assets/less/dataVTable.less' // 修改首页 DataV 轮播样式
+import '@/assets/less/dataVTable.less' // 修改首页 DataV 轮播样式
 export default {
   name: 'Mytodo',
   components: {
@@ -222,22 +231,27 @@ export default {
         plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
         // 日历头部按钮位置
         headerToolbar: {
-          left: 'prev,next',
-          center: 'title',
-          right: 'dayGridMonth'
+          /* -----------------------
+              left: 'prev,next',
+              center: 'title',
+              right: 'dayGridMonth'
+           -------------------------*/
+          left: '',
+          center: '',
+          right: ''
         },
         // 日历头部按钮中文转换
-        buttonText: {
-          month: '月'
-        },
+        // buttonText: {
+        //   month: '月'
+        // },
         initialView: 'dayGridMonth', // 指定默认显示视图
         locale: 'zh-ch', // 切换语言,当前为中文
-        firstDay: '1', // 设置一周中显示的第一天是周几,周日是0,周一是1,以此类推
+        firstDay: '1', // 设置一周中显示的第一天是周几,周日是0,周一是1
         weekNumberCalculation: 'ISO', // 与 firstDay 配套使用
-        eventCOlor: 'red', // 全部日历日程背景色
-        timeGridEventMinHeight: '20', // 设置事件的最小高度
+        // eventColor: 'red', // 全部日历日程背景色
+        timeGridEventMinHeight: '50', // 设置事件的最小高度
         // aspectRatio: '2.5', // 设置日历单元格宽高比
-        displayEventTime: false, // 是否显示事件时间
+        displayEventTime: true, // 是否显示事件时间
         allDaySlot: false, // 周、日视图时,all-day不显示
         eventLimit: true, // 设置月日程,与all-day slot 的最大显示数量,超过的通过弹窗展示
         eventTimeFormat: {
@@ -347,7 +361,6 @@ export default {
 
     //轮播图 点击事件
     getMethod(item) {
-      // =the data presentation is a bit sluggish
       this.$refs.DetAnnModal.annVisible = true
       // console.log('轮播自带的数据', item)
       this.$nextTick(() => {

+ 3 - 3
src/views/dashboard/MyoaTabs.vue

@@ -84,7 +84,7 @@ export default {
                     })
                     this.todoConfig = {
                         oddRowBGC: 'white',
-                        evenRowBGC: 'rgba(233, 236, 239,.3)',
+                        evenRowBGC: 'rgba(233, 236, 239,.4)',
                         columnWidth: [150, 200, 200, 200, 200, 300],
                         align: ['center'],
                         rowNum: 6,
@@ -123,7 +123,7 @@ export default {
                     })
                     this.applyConfig = {
                         oddRowBGC: 'white',
-                        evenRowBGC: 'rgba(233, 236, 239,.3)',
+                        evenRowBGC: 'rgba(233, 236, 239,.4)',
                         columnWidth: [150, 200, 200, 200, 150, 300],
                         align: ['center'],
                         rowNum: 6,
@@ -147,7 +147,7 @@ export default {
                     })
                     this.doneConfig = {
                         oddRowBGC: 'white',
-                        evenRowBGC: 'rgba(233, 236, 239,.3)',
+                        evenRowBGC: 'rgba(233, 236, 239,.4)',
                         columnWidth: [150, 200, 200, 200, 150, 300],
                         align: ['center'],
                         rowNum: 6,