首页增加第三个子页“报表”

src/pages/dmweb/dmhome.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      需求系统 
+  </div>
+</template>
+
+<script>
+  export default {
+
+  }
+
+</script>
+<style>
+
+</style>

src/pages/funclist.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main">
 
-    <div class="funclist">
+    <div class="funclist" :class="bg_blur">
       <!-- 销售 -->
       <div class="funclist_title">销售</div>
       <div class="funclist_funcarea">
@@ -33,7 +33,7 @@
         </div>
 
 
-        <div class="funclist_item">
+        <div class="funclist_item" @click="ifreport_shift(1)">
           <div class="funclist_report_icon">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-wenjianjiasuolvetu"></use>
@@ -162,7 +162,7 @@
           <div class="funclist_text">生产质检单</div>
         </div>
 
-        <div class="funclist_item">
+        <div class="funclist_item"@click="ifreport_shift(3)">
           <div class="funclist_report_icon">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-wenjianjiasuolvetu"></use>
@@ -204,7 +204,7 @@
         </div>
 
 
-        <div class="funclist_item">
+        <div class="funclist_item" @click="ifreport_shift(2)">
           <div class="funclist_report_icon">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-wenjianjiasuolvetu"></use>
@@ -216,15 +216,18 @@
       </div>
     </div>
 
-    <!-- 文件夹视图 -->
+    <!-- 销售报表文件夹视图 -->
     <div v-if="ifreport==1">
-      <div style="    height: 100%;width: 100%;background-color: #ffd555;opacity: 0.95;position: fixed;top: 0px;z-index: 9998;"></div>
+      <div
+        style="    height: 100%;width: 100%;background-color: #000;opacity: 0.48;position: fixed;top: 0px;z-index: 9998;">
+      </div>
       <div style="z-index: 9999;position: fixed;bottom: 0px;height: 100%;width: 100%;font-size:14px;">
 
         <div style="width:100%;margin: 20% auto;height: 100%;    border-radius: 15px;overflow:hidden;">
 
 
-          <div style="position: relative;left:88%;top:40px;background-color:#fc4f4f;color:#fff;font-size:12px;width:20px;height:20px;line-height:20px;text-align: center;border-radius: 50%;">
+          <div @click="ifreport_shift(0)"
+            style="position: relative;left:88%;top:40px;background-color:#fc4f4f;color:#fff;font-size:12px;width:20px;height:20px;line-height:20px;text-align: center;border-radius: 50%;">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-guanbi"></use>
             </svg>
@@ -235,8 +238,8 @@
               销售报表
             </div>
           </div>
-          <div
-            style="background-color:rgba(255, 255, 255, 0.82);opacity: 1;margin: 0 auto;width:95%;height:75%;border-radius: 15px;overflow: auto;box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);">
+          <div :style="rpstyle"
+            style="background-color:rgba(255, 255, 255, 0.75);margin: 0 auto;width:95%;border-radius: 15px;overflow: auto;box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);">
 
 
             <div style="padding:15px;">
@@ -311,6 +314,49 @@
               </div>
 
 
+
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+
+    </div>
+
+
+    <!-- 财务报表文件夹视图 -->
+    <div v-if="ifreport==2">
+      <div
+        style="    height: 100%;width: 100%;background-color: #000;opacity: 0.48;position: fixed;top: 0px;z-index: 9998;">
+      </div>
+      <div style="z-index: 9999;position: fixed;bottom: 0px;height: 100%;width: 100%;font-size:14px;">
+
+        <div style="width:100%;margin: 20% auto;height: 100%;    border-radius: 15px;overflow:hidden;">
+
+
+          <div @click="ifreport_shift(0)"
+            style="position: relative;left:88%;top:40px;background-color:#fc4f4f;color:#fff;font-size:12px;width:20px;height:20px;line-height:20px;text-align: center;border-radius: 50%;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi"></use>
+            </svg>
+          </div>
+
+          <div style="display:flex;">
+            <div style="font-size:25px;font-weight:bold;color:#fff;margin:10px auto;">
+              财务报表
+            </div>
+          </div>
+          <div :style="rpstyle"
+            style="background-color:rgba(255, 255, 255, 0.75);margin: 0 auto;width:95%;border-radius: 15px;overflow: auto;box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);">
+
+
+            <div style="padding:15px;">
+
+
+
+
               <div class="report_list_item ">
                 <div class="report_list_item_icon func_icon_bg_red">
                   <svg class="icon" aria-hidden="true">
@@ -383,6 +429,47 @@
                 </div>
               </div>
 
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+
+    </div>
+
+
+    <!-- 生产报表文件夹视图 -->
+    <div v-if="ifreport==3">
+      <div
+        style="    height: 100%;width: 100%;background-color: #000;opacity: 0.48;position: fixed;top: 0px;z-index: 9998;">
+      </div>
+      <div style="z-index: 9999;position: fixed;bottom: 0px;height: 100%;width: 100%;font-size:14px;">
+
+        <div style="width:100%;margin: 20% auto;height: 100%;    border-radius: 15px;overflow:hidden;">
+
+
+          <div @click="ifreport_shift(0)"
+            style="position: relative;left:88%;top:40px;background-color:#fc4f4f;color:#fff;font-size:12px;width:20px;height:20px;line-height:20px;text-align: center;border-radius: 50%;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi"></use>
+            </svg>
+          </div>
+
+          <div style="display:flex;">
+            <div style="font-size:25px;font-weight:bold;color:#fff;margin:10px auto;">
+              生产报表
+            </div>
+          </div>
+          <div :style="rpstyle"
+            style="background-color:rgba(255, 255, 255, 0.75);margin: 0 auto;width:95%;border-radius: 15px;overflow: auto;box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);">
+
+
+            <div style="padding:15px;">
+
+
+
 
               <div class="report_list_item ">
                 <div class="report_list_item_icon func_icon_bg_green">
@@ -431,7 +518,7 @@
 
 
     <!-- 底部按钮 -->
-    <div class="todolist-tab">
+    <div class="todolist-tab" :class="bg_blur">
       <div class="todolist-tab-btn">
         <div class="todolist-tab-icon">
           <svg class="icon" aria-hidden="true">
@@ -487,7 +574,36 @@
     name: 'funclist',
     data() {
       return {
-        ifreport: 1, //0-关闭文件夹 1-打开报表文件夹
+        ifreport: 0, //0-关闭文件夹 1-销售报表 2-财务报表 3-生产报表
+        rpstyle: {
+          height: ''
+        }
+      }
+    },
+    computed: {
+      bg_blur: function () {
+        return {
+          blur: this.ifreport > 0
+        }
+      }
+    },
+    created() {
+      this.get_rp_height(4);
+    },
+    methods: {
+      ifreport_shift(type) {
+        this.ifreport = type
+      },
+      get_rp_height(num) {
+        //num 代表文件夹中有多少个报表
+        num = (num < 4) ? 4 : num; //最少显示4行
+        var tmph = num * 50 + 30; //+30为了预留下面空位
+        //限制总高度不能大于屏幕的70%
+        if (tmph >= window.innerHeight * 0.7) {
+          this.rpstyle.height = window.innerHeight * 0.7 + 'px'
+        } else {
+          this.rpstyle.height = tmph + 'px'
+        }
       }
     }
   }
@@ -664,4 +780,12 @@
     right: 8%; */
   }
 
+  .blur {
+    -webkit-filter: blur(8px);
+    /* Chrome, Opera */
+    -moz-filter: blur(8px);
+    -ms-filter: blur(8px);
+    filter: blur(8px);
+  }
+
 </style>

src/pages/homenew.vue

@@ -4,24 +4,26 @@
 
 
     <div class="home_maininfo">
-      <div class="task_selection_warp">
-        <div class="task_selection">
-          <div>时刻</div>
-          <div class='task_selection_check' style="margin-left:30px">决策</div>
-          <div class="task_top_cnt"></div>
+      <div class="task_top">
+        <div class="task_selection_warp">
+          <div class="task_selection">
+            <div>时刻</div>
+            <div class='task_selection_check' style="margin-left:20px">决策</div>
+            <div style="margin-left:20px">报表</div>
+          </div>
         </div>
-      </div>
 
-      <div class="home_msg">
-        <div>
-          <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-xiaoxi"></use>
-          </svg>
-          8月12日公司经营日报已出炉，欢迎查看！</div>
+        <div class="home_msg">
+          <div>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xiaoxi"></use>
+            </svg>
+            8月12日公司经营日报已出炉，欢迎查看！</div>
+        </div>
       </div>
 
 
-      <div style="margin:15px 0 70px 0">
+      <div style="margin:90px 0 70px 0">
 
         <div class="home_widget_mx">
           <div class="home_widget_mx_title">
@@ -192,8 +194,8 @@
           </div>
         </div>
 
-        <!-- 收藏报表页面，如果没有收藏，就不显示 -->
-        <div class="home_widget_mx">
+        <!-- 取消以下设计：收藏报表页面，如果没有收藏，就不显示 -->
+        <!-- <div class="home_widget_mx">
           <div class="home_widget_mx_title">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-yitihuachuxing"></use>
@@ -286,7 +288,7 @@
               </div>
             </div>
           </div>
-        </div>
+        </div> -->
 
         <div class="home_reload">重新载入数据</div>
 
@@ -368,12 +370,12 @@
   body {
     margin: 0;
     padding: 0;
-    background-color: #fff;
+    background-color: #f7f7f7;
     font-family: "微软雅黑";
   }
 
   .home_div {
-    background-color: #f2f2f2;
+    background-color: #f7f7f7;
     padding: 0 0 10px 0;
   }
 
@@ -580,8 +582,7 @@
 
   .task_selection {
     display: flex;
-    width: 90px;
-    margin: 10px auto 5px auto;
+    margin: 10px 20px;
     font-size: 15px;
     font-weight: bold;
   }
@@ -656,4 +657,13 @@
     background-color: #ff6f61;
   }
 
+  .task_top {
+    z-index: 9999;
+    width: 100%;
+    position: fixed;
+    background-color: #fff;
+    font-size: 15px;
+    top: 0;
+  }
+
 </style>

src/pages/homerp.vue

@@ -0,0 +1,530 @@
+<template>
+  <div>
+    <!-- 顶部区域 -->
+    <div class="task_top" :class="bg_blur">
+      <div class="task_selection_warp">
+        <div class="task_selection">
+          <div>时刻</div>
+          <div style="margin-left:20px">决策</div>
+          <div class='task_selection_check' style="margin-left:20px">报表</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主体内容区域 -->
+    <div style="margin:60px 0 100px 0" :class="bg_blur">
+      <div class="homerp_title">销售</div>
+
+      <div style="margin:0 10px 0 20px">
+        <div class="home_report_list_item ">
+          <div class="home_report_list_item_icon func_icon_bg_blue">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
+            </svg>
+          </div>
+
+          <div class="home_report_list_item_text home_report_list_item_border">
+            <div class="home_report_list_item_name">客户销售排名统计表</div>
+            <div class="home_report_list_item_right">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-xing1"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="home_report_list_item ">
+          <div class="home_report_list_item_icon func_icon_bg_blue">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-paiming"></use>
+            </svg>
+          </div>
+
+          <div class="home_report_list_item_text home_report_list_item_border">
+            <div class="home_report_list_item_name">产品销售排名统计表</div>
+            <div class="home_report_list_item_right">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-xing1"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="homerp_more" @click="ifreport_shift">查看更多销售报表</div>
+
+
+      <div class="homerp_title">财务</div>
+
+      <div style="margin:0 10px 0 20px">
+        <div class="home_report_list_item ">
+          <div class="home_report_list_item_icon func_icon_bg_red">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-baojia"></use>
+            </svg>
+          </div>
+
+          <div class="home_report_list_item_text home_report_list_item_border">
+            <div class="home_report_list_item_name">销售订单收款统计表</div>
+            <div class="home_report_list_item_right">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-xing1"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="home_report_list_item ">
+          <div class="home_report_list_item_icon func_icon_bg_red">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-baifenbi"></use>
+            </svg>
+          </div>
+
+          <div class="home_report_list_item_text home_report_list_item_border">
+            <div class="home_report_list_item_name">销售订单利润率统计表</div>
+            <div class="home_report_list_item_right">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-xing1"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="homerp_more">查看更多财务报表</div>
+
+
+      <div class="homerp_title">生产</div>
+
+      <div style="margin:0 10px 0 20px">
+        <div class="home_report_list_item ">
+          <div class="home_report_list_item_icon func_icon_bg_green">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-renwu"></use>
+            </svg>
+          </div>
+
+          <div class="home_report_list_item_text home_report_list_item_border">
+            <div class="home_report_list_item_name">在进行出口订单异常统计表</div>
+            <div class="home_report_list_item_right">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-xing1"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="homerp_more">查看更多生产报表</div>
+
+    </div>
+
+    <!-- 文件夹视图 -->
+    <div v-if="ifreport==1">
+      <div
+        style="    height: 100%;width: 100%;background-color: #000;opacity: 0.48;position: fixed;top: 0px;z-index: 9998;">
+      </div>
+      <div style="z-index: 9999;position: fixed;bottom: 0px;height: 100%;width: 100%;font-size:14px;">
+
+        <div style="width:100%;margin: 20% auto;height: 100%;    border-radius: 15px;overflow:hidden;">
+
+
+          <div @click="ifreport_shift"
+            style="position: relative;left:88%;top:40px;background-color:#fc4f4f;color:#fff;font-size:12px;width:20px;height:20px;line-height:20px;text-align: center;border-radius: 50%;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi"></use>
+            </svg>
+          </div>
+
+          <div style="display:flex;">
+            <div style="font-size:25px;font-weight:bold;color:#fff;margin:10px auto;">
+              销售报表
+            </div>
+          </div>
+          <div :style="rpstyle"
+            style="background-color:rgba(255, 255, 255, 0.75);margin: 0 auto;width:95%;border-radius: 15px;overflow: auto;box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);">
+
+
+            <div style="padding:15px;">
+
+              <div class="report_list_item ">
+                <div class="report_list_item_icon func_icon_bg_blue">
+                  <svg class="icon" aria-hidden="true">
+                    <use xlink:href="#icon-baobiao"></use>
+                  </svg>
+                </div>
+
+                <div class="report_list_item_text report_list_item_border">
+                  <div class="report_list_item_name">新增销售订单统计表</div>
+                  <div class="report_list_item_right">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#icon-xing"></use>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <div class="report_list_item ">
+                <div class="report_list_item_icon func_icon_bg_blue">
+                  <svg class="icon" aria-hidden="true">
+                    <use xlink:href="#icon-paiming"></use>
+                  </svg>
+                </div>
+
+                <div class="report_list_item_text report_list_item_border">
+                  <div class="report_list_item_name">业务员销售排名统计表</div>
+                  <div class="report_list_item_right">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#icon-xing"></use>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+
+              <div class="report_list_item ">
+                <div class="report_list_item_icon func_icon_bg_blue">
+                  <svg class="icon" aria-hidden="true">
+                    <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
+                  </svg>
+                </div>
+
+                <div class="report_list_item_text report_list_item_border">
+                  <div class="report_list_item_name">客户销售排名统计表</div>
+                  <div class="report_list_item_right">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#icon-xing1"></use>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <div class="report_list_item ">
+                <div class="report_list_item_icon func_icon_bg_blue">
+                  <svg class="icon" aria-hidden="true">
+                    <use xlink:href="#icon-paiming"></use>
+                  </svg>
+                </div>
+
+                <div class="report_list_item_text report_list_item_border">
+                  <div class="report_list_item_name">产品销售排名统计表</div>
+                  <div class="report_list_item_right">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#icon-xing1"></use>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="todolist-tab" :class="bg_blur">
+      <div class="todolist-tab-btn todolist-tab-btn-on">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-home"></use>
+          </svg>
+        </div>
+        首页
+      </div>
+      <div class="todolist-tab-btn ">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-format-list-bulleted"></use>
+          </svg>
+        </div>
+        <div class="todolist-tab-count">9</div>
+        待办
+      </div>
+
+
+      <div class="todolist-tab-btn">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-google-drive"></use>
+          </svg>
+        </div>
+        功能
+      </div>
+
+      <div class="todolist-tab-btn">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-email-outline"></use>
+          </svg>
+        </div>
+        <div class="todolist-tab-count">5</div>
+        消息
+      </div>
+
+      <div class="todolist-tab-btn">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-account"></use>
+          </svg>
+        </div>
+        我的
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+  export default {
+    name: 'homerp',
+    data() {
+      return {
+        ifreport: 0, //0-关闭文件夹 1-打开报表文件夹
+        rpstyle:{
+            height:''
+        }
+      }
+    },
+    computed: {
+      bg_blur: function () {
+        return {
+          blur: this.ifreport == 1
+        }
+      }
+    },
+    created() {
+      this.get_rp_height(4);
+    },
+    methods: {
+      ifreport_shift() {
+        this.ifreport = 1 - this.ifreport
+      },
+      get_rp_height(num){
+          //num 代表文件夹中有多少个报表
+          num = (num<4)?4:num; //最少显示4行
+          var tmph = num * 50 + 30; //+30为了预留下面空位
+          //限制总高度不能大于屏幕的70%
+          if(tmph >= window.innerHeight * 0.7){
+              this.rpstyle.height = window.innerHeight * 0.7 +'px'
+          } else {
+            this.rpstyle.height = tmph + 'px'
+          }
+
+
+      }
+    }
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    font-family: "微软雅黑";
+  }
+
+  .blur {
+    -webkit-filter: blur(8px);
+    /* Chrome, Opera */
+    -moz-filter: blur(8px);
+    -ms-filter: blur(8px);
+    filter: blur(8px);
+  }
+
+  .homerp_more {
+    margin: 20px;
+    font-size: 14px;
+    text-align: center;
+    color: #6495ed;
+  }
+
+  .homerp_title {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0 0 10px 20px;
+  }
+
+  .task_top {
+    z-index: 9998;
+    width: 100%;
+    position: fixed;
+    background-color: #fff;
+    font-size: 15px;
+    top: 0;
+  }
+
+  .task_selection_warp {
+    background-color: #fff;
+    width: 100%;
+    border-bottom: 1px solid #f5f5f5;
+  }
+
+  .task_selection {
+    display: flex;
+    margin: 10px 20px;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .task_selection div {
+    padding-bottom: 3px;
+  }
+
+  .task_selection_check {
+    color: #fd7526;
+    border-bottom: 2px solid #fd7526;
+  }
+
+  /* 底部栏 */
+  .todolist-tab {
+    color: #666;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #ffffff;
+    width: 100%;
+    z-index: 9995;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0 2px 0;
+    box-shadow: 0 -1px 3px #f1f1f1
+  }
+
+  .todolist-tab-btn {
+    font-size: 13px;
+    width: 25%;
+    text-align: center
+  }
+
+  .todolist-tab-btn-on {
+    color: #46a4da
+  }
+
+  .todolist-tab-icon {
+    font-size: 23px;
+  }
+
+  .todolist-tab-count {
+    position: absolute;
+    margin-left: 14%;
+    bottom: 30px;
+    font-size: 12px;
+    line-height: 12px;
+    width: 12px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    padding: 3px;
+    text-align: center;
+    background-color: #fc4f4f
+  }
+
+
+  .home_report_list_item {
+    display: flex;
+    color: #606060;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 50px;
+    align-items: center;
+  }
+
+  .home_report_list_item_icon {
+    flex: 0 0 35px;
+    /* width: 35px;
+    height: 35px; */
+    margin: 0 0 0 10px;
+    font-size: 20px;
+    line-height: 35px;
+
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+  }
+
+  .home_report_list_item_border {
+    border-bottom: 1px solid #f6f6f6;
+  }
+
+  .home_report_list_item_text {
+    display: flex;
+    width: 100%;
+    margin: 0 15px 0 15px;
+  }
+
+  .home_report_list_item_name {
+    flex: 0 0 90%
+  }
+
+  .home_report_list_item_right {
+    color: #9b9b9b;
+    font-size: 28px;
+    /* position: absolute;
+    right: 8%; */
+  }
+
+
+  .func_icon_bg_blue {
+    background-color: #00aaee;
+  }
+
+  .func_icon_bg_green {
+    background-color: #47cc47;
+  }
+
+  .func_icon_bg_orange {
+    background-color: #ff9800;
+  }
+
+  .func_icon_bg_red {
+    background-color: #ff6f61;
+  }
+
+
+  .report_list_item {
+    display: flex;
+    color: #606060;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 50px;
+    align-items: center;
+  }
+
+  .report_list_item_icon {
+    flex: 0 0 35px;
+    /* width: 35px;
+    height: 35px; */
+    font-size: 20px;
+    line-height: 35px;
+
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+  }
+
+  /* .report_list_item_border {
+    border-bottom: 1px solid #fff;
+  } */
+
+  .report_list_item_text {
+    display: flex;
+    width: 100%;
+    margin: 0 5px 0 15px;
+  }
+
+  .report_list_item_name {
+    flex: 0 0 90%
+  }
+
+  .report_list_item_right {
+    color: #9b9b9b;
+    font-size: 28px;
+    /* position: absolute;
+    right: 8%; */
+  }
+
+</style>

src/pages/task.vue

@@ -25,8 +25,8 @@
           <div class="task_selection">
             
             <div class='task_selection_check'>时刻</div>
-            <div style="margin-left:30px">决策</div>
-            <div class="task_top_cnt"></div>
+            <div style="margin-left:20px">决策</div>
+            <div style="margin-left:20px">报表</div>
           </div>
         </div>
 
@@ -40,7 +40,7 @@
 
 
 
-      <div class="task_title" style="margin-top:80px">当天</div>
+      <div class="task_title" style="margin-top:100px">当天</div>
       <div class="tasklist">
         <task-list></task-list>
       </div>
@@ -132,8 +132,9 @@
 
   .task_selection {
     display: flex;
-    width: 90px;
-    margin: 10px auto 5px auto;
+    /* width: 90px;
+    margin: 10px auto 5px auto; */
+    margin:10px 20px;
     font-size: 15px;
     font-weight: bold;
   }

src/router/index.js

@@ -38,6 +38,8 @@ import OaView from '@/pages/oaview'
 import Amerce from '@/pages/amerce'
 import Testcss from '@/pages/testcss'
 import Funclist from '@/pages/funclist'
+import DmHome from '@/pages/dmweb/dmhome'
+import HomeRp from '@/pages/homerp'
 
 Vue.use(Router)
 
@@ -56,6 +58,22 @@ export default new Router({
         title: '工作任务'
       }
     },
+    {
+      path: '/homerp',
+      name: 'HomeRp',
+      component: HomeRp,
+      meta: {
+        title: '首页报表'
+      }
+    },
+    {
+      path: '/dmhome',
+      name: 'DmHome',
+      component: DmHome,
+      meta: {
+        title: '需求管理'
+      }
+    },
     {
       path: '/funclist',
       name: 'Funclist',