L1App工作任务

src/assets/iconfont/demo_index.html

@@ -132,6 +132,12 @@
                 <div class="code-name">&amp;#xe8c3;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe638;</span>
+                <div class="name">邮件</div>
+                <div class="code-name">&amp;#xe638;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe745;</span>
                 <div class="name">二维码</div>
@@ -144,6 +150,12 @@
                 <div class="code-name">&amp;#xe630;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe651;</span>
+                <div class="name">审</div>
+                <div class="code-name">&amp;#xe651;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe604;</span>
                 <div class="name">公文管理</div>
@@ -384,6 +396,18 @@
                 <div class="code-name">&amp;#xe8fd;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe653;</span>
+                <div class="name">任务</div>
+                <div class="code-name">&amp;#xe653;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe657;</span>
+                <div class="name">附件</div>
+                <div class="code-name">&amp;#xe657;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe643;</span>
                 <div class="name">恢复</div>
@@ -480,6 +504,12 @@
                 <div class="code-name">&amp;#xe63b;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">星</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe60a;</span>
                 <div class="name">uni_icon_开关_关</div>
@@ -528,6 +558,12 @@
                 <div class="code-name">&amp;#xe600;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">星</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe6db;</span>
                 <div class="name">结算</div>
@@ -540,6 +576,12 @@
                 <div class="code-name">&amp;#xe601;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe744;</span>
+                <div class="name">开关 switch-正确</div>
+                <div class="code-name">&amp;#xe744;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe63c;</span>
                 <div class="name">奖牌-02</div>
@@ -678,6 +720,12 @@
                 <div class="code-name">&amp;#xe60c;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe63a;</span>
+                <div class="name">验</div>
+                <div class="code-name">&amp;#xe63a;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe612;</span>
                 <div class="name">财务管理</div>
@@ -792,6 +840,12 @@
                 <div class="code-name">&amp;#xe686;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe636;</span>
+                <div class="name">导航</div>
+                <div class="code-name">&amp;#xe636;</div>
+              </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="unicode-">Unicode 引用</h2>
@@ -995,6 +1049,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-youjian1"></span>
+            <div class="name">
+              邮件
+            </div>
+            <div class="code-name">.icon-youjian1
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-erweima"></span>
             <div class="name">
@@ -1013,6 +1076,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-shen3"></span>
+            <div class="name">
+              审
+            </div>
+            <div class="code-name">.icon-shen3
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-icon-test"></span>
             <div class="name">
@@ -1373,6 +1445,24 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-renwu"></span>
+            <div class="name">
+              任务
+            </div>
+            <div class="code-name">.icon-renwu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fujian"></span>
+            <div class="name">
+              附件
+            </div>
+            <div class="code-name">.icon-fujian
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-huifu"></span>
             <div class="name">
@@ -1517,6 +1607,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-xing"></span>
+            <div class="name">
+              星
+            </div>
+            <div class="code-name">.icon-xing
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-uni_icon_kaiguan_guan"></span>
             <div class="name">
@@ -1589,6 +1688,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-xing1"></span>
+            <div class="name">
+              星
+            </div>
+            <div class="code-name">.icon-xing1
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-icon-"></span>
             <div class="name">
@@ -1607,6 +1715,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-kaiguanswitch-zhengque"></span>
+            <div class="name">
+              开关 switch-正确
+            </div>
+            <div class="code-name">.icon-kaiguanswitch-zhengque
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-jiangpai-2"></span>
             <div class="name">
@@ -1814,6 +1931,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-yan"></span>
+            <div class="name">
+              验
+            </div>
+            <div class="code-name">.icon-yan
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-caiwuguanli"></span>
             <div class="name">
@@ -1985,6 +2111,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-icon_daohang-copy"></span>
+            <div class="name">
+              导航
+            </div>
+            <div class="code-name">.icon-icon_daohang-copy
+            </div>
+          </li>
+          
         </ul>
         <div class="article markdown">
         <h2 id="font-class-">font-class 引用</h2>
@@ -2150,6 +2285,14 @@
                 <div class="code-name">#icon-soupcan</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-youjian1"></use>
+                </svg>
+                <div class="name">邮件</div>
+                <div class="code-name">#icon-youjian1</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-erweima"></use>
@@ -2166,6 +2309,14 @@
                 <div class="code-name">#icon-xiala1</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shen3"></use>
+                </svg>
+                <div class="name">审</div>
+                <div class="code-name">#icon-shen3</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-icon-test"></use>
@@ -2486,6 +2637,22 @@
                 <div class="code-name">#icon-truck-delivery</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-renwu"></use>
+                </svg>
+                <div class="name">任务</div>
+                <div class="code-name">#icon-renwu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fujian"></use>
+                </svg>
+                <div class="name">附件</div>
+                <div class="code-name">#icon-fujian</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-huifu"></use>
@@ -2614,6 +2781,14 @@
                 <div class="code-name">#icon-baifenbi</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xing"></use>
+                </svg>
+                <div class="name">星</div>
+                <div class="code-name">#icon-xing</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-uni_icon_kaiguan_guan"></use>
@@ -2678,6 +2853,14 @@
                 <div class="code-name">#icon-chakan</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xing1"></use>
+                </svg>
+                <div class="name">星</div>
+                <div class="code-name">#icon-xing1</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-icon-"></use>
@@ -2694,6 +2877,14 @@
                 <div class="code-name">#icon-caigou</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kaiguanswitch-zhengque"></use>
+                </svg>
+                <div class="name">开关 switch-正确</div>
+                <div class="code-name">#icon-kaiguanswitch-zhengque</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-jiangpai-2"></use>
@@ -2878,6 +3069,14 @@
                 <div class="code-name">#icon-caidan</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yan"></use>
+                </svg>
+                <div class="name">验</div>
+                <div class="code-name">#icon-yan</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-caiwuguanli"></use>
@@ -3030,6 +3229,14 @@
                 <div class="code-name">#icon-biaoqian1</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_daohang-copy"></use>
+                </svg>
+                <div class="name">导航</div>
+                <div class="code-name">#icon-icon_daohang-copy</div>
+            </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="symbol-">Symbol 引用</h2>

src/pages/about_nanfang.vue

@@ -232,7 +232,7 @@
     data() {
       return {
         taskflag_dt: '待审核',
-        lang: "EN"
+        lang: "CN"
       };
     }
 

src/pages/components/quotelist.vue

@@ -35,7 +35,7 @@
     },
     computed: {
       picurl: function () {
-        return require("../../assets/" + this.qlist.picurl)
+        // return require("../../assets/" + this.qlist.picurl)
       }
     },
 

src/pages/components/quotelist_his.vue

@@ -59,7 +59,7 @@
     },
     computed: {
       picurl: function () {
-        return require("../../assets/" + this.qlist.picurl)
+        // return require("../../assets/" + this.qlist.picurl)
       }
     },
 

src/pages/components/tasklist.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="tasklist_main">
+
+    <div class="arrow_box ">
+      <div class="task_date_inner">8/6 16:00-18:00</div>
+      <div class="task_conner_sec tip_red">超期</div>
+      <div class="task_conner tip_red">待办</div>
+      <div class="task_dscrp">
+        <div>拿川建国有限公司的合同给老板签字然后传真过去给客户。</div>
+      </div>
+
+      <div class="task_flex">
+        <div class="task_tip">安排人:张小强</div>
+        <div class="task_tip">临时任务</div>
+      </div>
+
+      <div class="left_icon ">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-renwu"></use>
+        </svg>
+      </div>
+    </div>
+
+    <div class="arrow_box kindgreen">
+      <div class="task_date_inner">8/6 15:32</div>
+      <div class="task_conner_sec">有图片</div>
+      <div class="task_conner tip_red">待验收</div>
+      <div class="task_dscrp">
+        <div>木工车间设备定期保养</div>
+      </div>
+
+      <div class="task_flex">
+        <div class="task_tip">完成人:王大民</div>
+        <div class="task_tip">任务验收</div>
+      </div>
+
+      <div class="left_icon icongreen">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-yan"></use>
+        </svg>
+      </div>
+    </div>
+
+    <div class="arrow_box kindred">
+      <div class="task_date_inner">8/6 13:32</div>
+      <div class="task_conner tip_blue">已审批</div>
+      <div class="task_dscrp">
+        <div>销售订单审核。SG190725003，美利坚不合群有限公司</div>
+      </div>
+
+      <div class="task_flex">
+        <div class="task_tip">发起人:黎小娟</div>
+        <div class="task_tip">审批流程</div>
+      </div>
+
+      <div class="left_icon iconred">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-shen3"></use>
+        </svg>
+      </div>
+    </div>
+
+    <div class="arrow_box kindorange">
+      <div class="task_date_inner">8/6 09:22</div>
+      <div class="task_conner">附件</div>
+      <div class="task_dscrp">
+        <div>附件为单号:SG190725002的唛头文件，请查收</div>
+      </div>
+
+      <div class="task_flex">
+        <div class="task_tip">发送人:黎小娟</div>
+        <div class="task_tip">SG190725002</div>
+        <div class="task_tip">消息</div>
+      </div>
+
+      <div class="left_icon iconorange">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-youjian1"></use>
+        </svg>
+      </div>
+    </div>
+
+    <div class="arrow_box ">
+      <div class="task_date_inner">8/6 16:00-18:00</div>
+      <div class="task_conner tip_blue">已完成</div>
+      <div class="task_dscrp">
+        <div>跟设计公司沟通，定最新一季宣传画册的最终设计。</div>
+      </div>
+
+      <div class="task_flex">
+        <div class="task_tip">安排人:张小强</div>
+        <div class="task_tip">临时任务</div>
+        <div class="task_tip">返工</div>
+      </div>
+
+      <div class="left_icon ">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-renwu"></use>
+        </svg>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: "tasklist"
+  }
+
+</script>
+<style>
+  .tasklist_main {
+    padding: 0px 10px 0px 50px;
+    font-size: 15px;
+  }
+
+  .task_dscrp {
+    line-height: 22px;
+    margin: 0 0 5px 0;
+    font-size: 15px;
+  }
+
+  .task_date_inner {
+    color: #888;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  .task_conner {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    color: #888;
+    font-size: 8px;
+    padding: 5px;
+    background-color: #ececec;
+    line-height: 8px;
+    width: 36px;
+    text-align: center
+  }
+
+  .task_conner_sec {
+    position: absolute;
+    right: 50px;
+    top: 0px;
+    color: #888;
+    font-size: 8px;
+    padding: 5px;
+    background-color: #ececec;
+    line-height: 8px;
+    width: 36px;
+    text-align: center
+  }
+
+  .task_date_left {
+    position: absolute;
+    top: 35px;
+    left: -50px;
+    font-size: 10px;
+    width: 45px;
+    text-align: center;
+  }
+
+  .task_time_left {
+    position: absolute;
+    top: 50px;
+    left: -50px;
+    font-size: 12px;
+    font-weight: bold;
+    width: 45px;
+    text-align: center;
+  }
+
+  .left_icon {
+    position: absolute;
+    top: 10px;
+    left: -40px;
+    /* background-color: #41838e; */
+    /* font-size: 12px; */
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    background: #46a4da;
+    border-radius: 50%;
+    box-shadow: 0 0 0 3px #afdcf8;
+    ;
+  }
+
+  .task_flex {
+    display: flex;
+    line-height: 20px;
+  }
+
+  .arrow_box {
+    position: relative;
+    padding: 5px 5px 5px 10px;
+    /* border-radius: 5px; */
+    border-left: 3px solid #46a4da;
+    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    margin-bottom: 10px;
+  }
+
+  .arrow_box:after {
+    right: 100%;
+    top: 22px;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-right-color: #46a4da;
+    border-width: 8px;
+    margin-top: -8px;
+  }
+
+  .task_time {
+    color: #888;
+    margin-right: 10px;
+    font-size: 14px;
+  }
+
+  .task_bottom div {
+    margin-right: 10px
+  }
+
+  .task_tip {
+    color: #888;
+    font-size: 12px;
+    margin-right: 10px;
+    border-radius: 5px;
+    padding: 5px;
+    background-color: #f7f7f7;
+    line-height: 12px;
+  }
+
+  .task_tip_inner {
+    color: #888;
+    font-size: 8px;
+    /* margin-right: 10px; */
+    border-radius: 5px;
+    padding: 5px;
+    background-color: #f7f7f7;
+    line-height: 10px;
+  }
+
+  .tip_red {
+    color: #fa5a5a;
+    background-color: #ffc3c3
+  }
+
+  .tip_blue {
+    color: #46a4da;
+    background-color: #afdcf8
+  }
+
+  .kindgreen {
+    border-left: 3px solid #88b04b;
+
+  }
+
+  .kindgreen::after {
+    border-right-color: #88b04b;
+  }
+
+  .kindred {
+    border-left: 3px solid #ff6f61;
+  }
+
+  .kindred::after {
+    border-right-color: #ff6f61;
+  }
+
+  .kindorange{
+   border-left: 3px solid #f2c866
+  }
+
+   .kindorange::after {
+    border-right-color: #f2c866;
+  } 
+
+  .icongreen{
+    background: #88b04b;
+    box-shadow: 0 0 0 3px #d1f3a1;
+  }
+
+  .iconred{
+    background: #ff6f61;
+    box-shadow: 0 0 0 3px #fdd1cd;
+  }
+
+    .iconorange{
+    background: #f2c866;
+    box-shadow: 0 0 0 3px #f7e7c2;
+  }
+
+</style>

src/pages/cses_spt/cses_spt_detail.vue

@@ -386,7 +386,7 @@
       return {
         taskflag_dt: "待接收",
         ifnew: 0,
-        ifban: 0, //控制是否弹出填写拒绝原因div的开关
+        ifban: 1, //控制是否弹出填写拒绝原因div的开关
         ifaccept: 0 //1-全部明细同意，整单接收  0-有明细不能接收，整单退回
       };
     },

src/pages/home.vue

@@ -66,7 +66,7 @@
 
       <div class="home_widget_area">
 
-        <!-- <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-shujukanban"></use>
@@ -75,9 +75,9 @@
           </div>
           <div class="home_widget_mx_content">
             <img src="../assets/chanxiaotu.jpg" class="img-chanxiao"></img>
-            <div style="font-size: 14px;text-align: center;color: #666;">此处只作展示用，不代表折线图控件最终效果</div>
+            <!-- <div style="font-size: 14px;text-align: center;color: #666;">此处只作展示用，不代表折线图控件最终效果</div> -->
           </div>
-        </div> -->
+        </div>
 
         <div class="home_widget_mx">
           <div class="home_widget_mx_title">

src/pages/homenew.vue

@@ -0,0 +1,502 @@
+<template>
+  <div class="home_div">
+
+
+
+    <div class="home_maininfo">
+      <div class="task_selection_warp">
+        <div class="task_selection">
+          <div class='task_selection_check' >决策</div>
+          <div style="margin-left:30px">时间线</div>
+          <div class="task_top_cnt"></div>
+        </div>
+      </div>
+
+      <div class="home_msg">
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-xiaoxi"></use>
+          </svg>
+          7月25日公司经营日报已出炉，欢迎查看！</div>
+      </div>
+
+
+      <div style="margin:15px 0 70px 0">
+
+        <div class="home_widget_mx">
+          <div class="home_widget_mx_title">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-shujukanban"></use>
+            </svg>
+            产销情况
+          </div>
+          <div class="home_widget_mx_content">
+            <img src="../assets/chanxiaotu.jpg" class="img-chanxiao"></img>
+            <!-- <div style="font-size: 14px;text-align: center;color: #666;">此处只作展示用，不代表折线图控件最终效果</div> -->
+          </div>
+        </div>
+
+        <div class="home_widget_mx">
+          <div class="home_widget_mx_title">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-icon-test"></use>
+            </svg>
+            订单情况
+          </div>
+
+          <div class="home_widget_mx_content">
+
+            <div class="home_widget_cw_flex">
+
+              <div class="home_widget_cw_left">
+                <div class="home_widget_cw_left_title">未发货订单金额(万元)</div>
+                <div class="home_widget_cw_left_content">689.34</div>
+              </div>
+
+              <div class="home_widget_cw_right">
+                <div class="home_widget_cw_left_title">本月接单(万元)</div>
+                <div class="home_widget_cw_left_content">200.54</div>
+              </div>
+
+            </div>
+
+            <div class="home_widget_cw_flex">
+              <div class="home_widget_cw_left">
+                <div class="home_widget_cw_left_title">其中已入库金额(万元)</div>
+                <div class="home_widget_cw_left_content">689.34</div>
+              </div>
+
+              <div class="home_widget_cw_right">
+                <div class="home_widget_cw_left_title">本月发货(万元)</div>
+                <div class="home_widget_cw_left_content">180.54</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="home_widget_mx">
+
+          <div class="home_widget_mx_title">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-caiwuguanli"></use>
+            </svg>
+            财务状况
+          </div>
+
+          <div class="home_widget_mx_content">
+
+
+
+            <div class="home_widget_cw_flex bottomline">
+
+              <div class="home_widget_cw_left">
+                <div class="home_widget_cw_left_title">成品库存总额(万元)</div>
+                <div class="home_widget_cw_left_content">360.88</div>
+              </div>
+              <div class="home_widget_cw_right">
+                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">333.54</span>(万元)
+                </div>
+                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">268.54</span>(万元)
+                </div>
+              </div>
+
+            </div>
+
+            <!-- <div class="home_widget_cw_flex bottomline">
+
+              <div class="home_widget_cw_left">
+                <div class="home_widget_cw_left_title">车间在途总额(万元)</div>
+                <div class="home_widget_cw_left_content">222.88</div>
+              </div>
+              <div class="home_widget_cw_right">
+                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">231.54</span>(万元)</div>
+                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">112.54</span>(万元)</div>
+              </div>
+
+            </div> -->
+
+            <div class="home_widget_cw_flex bottomline">
+
+              <div class="home_widget_cw_left">
+                <div class="home_widget_cw_left_title">材料库存总额(万元)</div>
+                <div class="home_widget_cw_left_content">444.88</div>
+              </div>
+              <div class="home_widget_cw_right">
+                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">333.54</span>(万元)
+                </div>
+                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">321.54</span>(万元)
+                </div>
+              </div>
+
+            </div>
+
+            <div class="home_widget_cw_flex bottomline">
+
+              <div class="home_widget_cw_left">
+                <div class="home_widget_cw_left_title">现金结余(万元)</div>
+                <div class="home_widget_cw_left_content">888.88</div>
+              </div>
+              <div class="home_widget_cw_right">
+                <div class="home_widget_cw_right_title">本月收入<span class="home_widget_cw_right_content">777.54</span>(万元)
+                </div>
+                <div class="home_widget_cw_right_title">本月支出<span class="home_widget_cw_right_content">666.54</span>(万元)
+                </div>
+              </div>
+
+            </div>
+
+            <div class="home_widget_cw_flex bottomline">
+
+              <div class="home_widget_cw_left">
+                <div class="home_widget_cw_left_title">应收结余(万元)</div>
+                <div class="home_widget_cw_left_content">555.88</div>
+              </div>
+              <div class="home_widget_cw_right">
+                <div class="home_widget_cw_right_title">本月已收<span class="home_widget_cw_right_content">666.54</span>(万元)
+                </div>
+                <div class="home_widget_cw_right_title">本月应收<span class="home_widget_cw_right_content">444.54</span>(万元)
+                </div>
+              </div>
+
+            </div>
+
+
+            <div class="home_widget_cw_flex">
+
+              <div class="home_widget_cw_left">
+                <div class="home_widget_cw_left_title">应付结余(万元)</div>
+                <div class="home_widget_cw_left_content">456.88</div>
+              </div>
+              <div class="home_widget_cw_right">
+                <div class="home_widget_cw_right_title">本月已付<span class="home_widget_cw_right_content">543.54</span>(万元)
+                </div>
+                <div class="home_widget_cw_right_title">本月应付<span class="home_widget_cw_right_content">234.54</span>(万元)
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+
+        <div class="home_widget_mx">
+          <div class="home_widget_mx_title">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
+            </svg>
+            库存状况
+          </div>
+          <div class="home_widget_mx_content">
+            <img src="../assets/zhutu.jpg" class="img-chanxiao"></img>
+            <!-- <div style="font-size: 14px;text-align: center;color: #666;">此处只作展示用，不代表柱状图控件最终效果</div> -->
+          </div>
+        </div>
+
+        <div class="home_reload">重新载入数据</div>
+
+      </div>
+
+
+
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="todolist-tab">
+      <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: 'home',
+    methods: {
+      gotosaletask() {
+        this.$router.push({
+          path: "/saletask"
+        });
+      }
+    }
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    font-family: "微软雅黑";
+  }
+
+  .home_div {
+    background-color: #f2f2f2;
+    padding: 0 0 10px 0 ;
+  }
+
+  .home_reload {
+    font-size: 16px;
+    color: #aaa;
+    padding: 10px;
+    background-color: white;
+    margin: 8px 10px 15px 10px;
+    box-shadow: 1px 2px 10px #ccc;
+    border-radius: 10px;
+    overflow: hidden;
+    text-align: center;
+  }
+
+  .home_title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: rgb(34, 131, 210);
+    /* position: fixed; */
+    color: white;
+  }
+
+  .home_title_search {
+    background-color: rgb(30, 115, 187);
+    margin: 10px;
+    padding: 5px 5px 5px 20px;
+    /* font-size: 14px;
+    line-height: 20px; */
+    flex: 0 0 78%;
+    border-radius: 15px;
+  }
+
+  .home_title_setting {
+    font-size: 20px;
+    position: absolute;
+    right: 4%;
+  }
+
+  .home_msg {
+    /* padding: 10px 20px; */
+    padding: 4px 5px 4px 20px;
+    background-color: #fffeef;
+    font-size: 15px;
+    color: #666;
+    box-shadow: 1px 1px 6px #ccc;
+  }
+
+  .home_icon_area {
+    padding: 5px 10px 10px;
+    display: flex;
+    background-color: rgb(34, 131, 210);
+  }
+
+  .home_icon_area_mx {
+    text-align: center;
+    /* margin-right: 0px; */
+    flex: 0 0 25%;
+  }
+
+  .home_icon_area_use {
+    font-size: 35px;
+    color: white;
+  }
+
+  .home_icon_text {
+    color: white;
+    font-size: 15px;
+  }
+
+  .home_widget_mx {
+    /* height: 420px; */
+    background-color: white;
+    margin: 8px 10px 15px 10px;
+    box-shadow: 1px 2px 10px #ccc;
+    border-radius: 10px;
+    overflow: hidden;
+    padding-bottom: 10px;
+  }
+
+  .home_widget_mx_title {
+    background-color: rgb(245, 245, 245);
+    font-size: 17px;
+    font-weight: bold;
+    color: rgb(139, 139, 139);
+    padding: 8px 20px;
+
+  }
+
+  .img-chanxiao {
+    width: 100%
+  }
+
+  .bottomline {
+    border-bottom: 1px solid #eee;
+  }
+
+
+
+  .home_widget_cw_flex {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2px;
+    /* border-bottom: 1px solid #eee; */
+  }
+
+  .home_widget_cw_left {
+    margin-left: 20px;
+    margin-top: 5px;
+    flex: 0 0 45%;
+    /* border-right: 1px solid #eee; */
+  }
+
+  .home_widget_cw_left_title {
+    font-size: 13px;
+    /* color: #888; */
+    color: rgb(153, 153, 153);
+  }
+
+  .home_widget_cw_left_content {
+    font-size: 25px;
+    font-weight: bold;
+    /* color: rgb(228, 35, 35); */
+    color: rgb(255, 128, 26);
+  }
+
+  .home_widget_cw_right {
+    margin-left: 10px;
+    margin-top: 5px;
+  }
+
+  .home_widget_cw_right_title {
+    font-size: 13px;
+    line-height: 25px;
+    color: rgb(153, 153, 153);
+  }
+
+  .home_widget_cw_right_content {
+    margin-left: 5px;
+    color: #555;
+    font-weight: bold;
+  }
+
+  .home_func_msg {
+    background-color: #feffda;
+    font-size: 15px;
+    color: #666;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #eee;
+  }
+
+  /* 底部栏 */
+  .todolist-tab {
+    color: #666;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #ffffff;
+    width: 100%;
+    z-index: 9999;
+    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
+  }
+
+
+  .task_selection_warp {
+    background-color: #fff;
+    width: 100%;
+    border-bottom: 1px solid #f5f5f5;
+  }
+
+  .task_selection {
+    display: flex;
+    width: 105px;
+    margin: 10px auto 5px auto;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .task_selection div {
+    padding-bottom: 3px;
+  }
+
+  .task_selection_check {
+    color: #fd7526;
+    border-bottom: 2px solid #fd7526;
+  }
+
+</style>

src/pages/l1todolist.vue

@@ -0,0 +1,547 @@
+<template>
+  <div>
+    <div class="todo_top">
+      <div class="todo_selection">
+        <div class='todo_selection_check'>任务</div>
+        <div style="margin-left:30px">公文</div>
+        <div class="todo_top_cnt"></div>
+      </div>
+    </div>
+
+    <!-- 日历 -->
+    <div style="padding:0 0 60px 0 ">
+      <div class="todo_img_wap" v-if="reporttype != 2">
+        <div style="flex:0 0 100%;margin: 0 auto;">
+          <img src="../assets/task_date_2.jpg" class="todo_img" v-if="datetype==0"></img>
+          <img src="../assets/task_date_1.jpg" class="todo_img" v-if="datetype==1"></img>
+        </div>
+      </div>
+
+
+      <!-- 选择我的任务或我安排的任务 -->
+      <div class="todo_mid_selection">
+        <div class="todo_mid_selection_check">我的任务</div>
+        <div>我安排的任务</div>
+      </div>
+
+      <!-- 任务列表 -->
+      <div style="display:flex;align-items: center;margin-top:10px">
+        <div class="todo_title">8月6日(今天)</div>
+        <div style="font-size:14px;position:absolute;right:70px;color:#666">只显示待办</div>
+        <div style="margin-left:10px;font-size:40px;position:absolute;right:20px;">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-uni_icon_kaiguan_guan"></use>
+          </svg>
+        </div>
+      </div>
+      <div class="todo_list">
+        <div class="arrow_box ">
+          <div class="task_date_inner">8/6 16:00-18:00</div>
+          <div class="task_conner tip_red">待办</div>
+          <div class="task_dscrp">
+            <div>跟设计公司沟通，定好最新一季宣传画册的设计。</div>
+          </div>
+
+          <div class="task_flex">
+            <div class="task_tip">安排人:张小强</div>
+            <div class="task_tip">临时任务</div>
+          </div>
+        </div>
+
+        <div class="arrow_box ">
+          <div class="task_date_inner">8/6 09:00-12:00</div>
+          <div class="task_conner tip_blue">待验收</div>
+          <div class="task_dscrp">
+            <div>拿川建国有限公司的合同给老板签字然后传真过去给客户。</div>
+          </div>
+
+          <div class="task_flex">
+            <div class="task_tip">安排人:张小强</div>
+            <div class="task_tip">临时任务</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="liubai_dt"></div>
+
+      <div class="todo_title">超期</div>
+      <div class="todo_list">
+        <div class="arrow_box kindred">
+          <div class="task_date_inner">7/25 16:00-18:00</div>
+          <div class="task_conner_sec tip_red">超期</div>
+          <div class="task_conner tip_red">待办</div>
+          <div class="task_dscrp">
+            <div>拿川建国有限公司的合同给老板签字然后传真过去给客户。</div>
+          </div>
+
+          <div class="task_flex">
+            <div class="task_tip">安排人:张小强</div>
+            <div class="task_tip">临时任务</div>
+          </div>
+        </div>
+
+        <div class="arrow_box kindred">
+          <div class="task_date_inner">7/25 16:00-18:00</div>
+          <div class="task_conner_sec tip_red">超期</div>
+          <div class="task_conner tip_red">待办</div>
+          <div class="task_dscrp">
+            <div>拿川建国有限公司的合同给老板签字然后传真过去给客户。</div>
+          </div>
+
+          <div class="task_flex">
+            <div class="task_tip">安排人:张小强</div>
+            <div class="task_tip">临时任务</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="liubai_dt"></div>
+
+      <div class="todo_title">验收</div>
+      <div class="todo_list">
+        <div class="arrow_box kindgreen">
+          <div class="task_date_inner">7/25 15:32</div>
+          <div class="task_conner_sec">有图片</div>
+          <div class="task_conner tip_red">待验收</div>
+          <div class="task_dscrp">
+            <div>木工车间设备定期保养</div>
+          </div>
+
+          <div class="task_flex">
+            <div class="task_tip">完成人:王大民</div>
+            <div class="task_tip">任务验收</div>
+          </div>
+        </div>
+
+        <div class="arrow_box kindgreen">
+          <div class="task_date_inner">7/25 16:00</div>
+          <div class="task_conner_sec">有图片</div>
+          <div class="task_conner tip_red">待验收</div>
+          <div class="task_dscrp">
+            <div>按6S标准检查车间清洁是否达标。</div>
+          </div>
+
+          <div class="task_flex">
+            <div class="task_tip">完成人:王大民</div>
+            <div class="task_tip">任务验收</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 悬浮的新建任务按钮 -->
+    <div class="todo_add">
+      <svg class="icon" aria-hidden="true">
+        <use xlink:href="#icon-shuliangjia1"></use>
+      </svg>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="todolist-tab">
+      <div class="todolist-tab-btn">
+        <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  todolist-tab-btn-on">
+        <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>
+  import TaskList from "./components/tasklist";
+  export default {
+    name: 'todolist',
+    components: {
+      TaskList
+    },
+    data() {
+      return {
+        datetype: 1, //0-完整日历 1-只显示本周的日历
+      }
+    }
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    font-family: "微软雅黑";
+  }
+
+  .todo_img_wap {
+    display: flex;
+    /* margin-top: 20px; */
+  }
+
+  .todo_img {
+    width: 100%;
+  }
+
+  .todo_top_cnt {
+    position: absolute;
+    left: 230px;
+    height: 2px;
+    width: 2px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    padding: 3px;
+    text-align: center;
+    background-color: #fc4f4f
+  }
+
+  .todo_add {
+    position: fixed;
+    right: 20px;
+    bottom: 60px;
+    background-color: #ccc;
+    height: 60px;
+    width: 60px;
+    border-radius: 100%;
+    opacity: 0.5;
+    line-height: 60px;
+    text-align: center;
+    font-size: 30px;
+    z-index: 9990;
+  }
+
+  .todo_list {
+    padding: 10px 10px 0 10px;
+  }
+
+
+  .todo_top {
+
+    width: 100%;
+    border-bottom: 1px solid #f5f5f5;
+  }
+
+
+  .liubai_dt {
+    width: 100%;
+    height: 10px;
+    background-color: #f6f6f6;
+    margin: 10px 0;
+  }
+
+  .todo_title {
+    font-size: 15px;
+    font-weight: bold;
+    padding: 0 0 0 15px;
+  }
+
+  .todo_selection {
+    display: flex;
+    width: 90px;
+    margin: 10px auto 5px auto;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .todo_mid_selection {
+    display: flex;
+    color: #888;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.102);
+  }
+
+  .todo_mid_selection div {
+    margin: 0 0 0 30px;
+    padding: 0 0 5px 0;
+    font-size: 14px;
+  }
+
+  .todo_selection div {
+    padding-bottom: 3px;
+  }
+
+  .todo_selection_check {
+    color: #fd7526;
+    border-bottom: 2px solid #fd7526;
+  }
+
+  .todo_mid_selection_check {
+    color: #46a4da;
+    border-bottom: 2px solid #46a4da;
+  }
+
+  /* 任务列表相关css */
+  .task_dscrp {
+    line-height: 22px;
+    margin: 0 0 5px 0;
+    font-size: 15px;
+  }
+
+  .task_date_inner {
+    color: #888;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  .task_conner {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    color: #888;
+    font-size: 8px;
+    padding: 5px;
+    background-color: #ececec;
+    line-height: 8px;
+    width: 36px;
+    text-align: center
+  }
+
+  .task_conner_sec {
+    position: absolute;
+    right: 50px;
+    top: 0px;
+    color: #888;
+    font-size: 8px;
+    padding: 5px;
+    background-color: #ececec;
+    line-height: 8px;
+    width: 36px;
+    text-align: center
+  }
+
+  .task_date_left {
+    position: absolute;
+    top: 35px;
+    left: -50px;
+    font-size: 10px;
+    width: 45px;
+    text-align: center;
+  }
+
+  .task_time_left {
+    position: absolute;
+    top: 50px;
+    left: -50px;
+    font-size: 12px;
+    font-weight: bold;
+    width: 45px;
+    text-align: center;
+  }
+
+  .left_icon {
+    position: absolute;
+    top: 10px;
+    left: -40px;
+    /* background-color: #41838e; */
+    /* font-size: 12px; */
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    background: #46a4da;
+    border-radius: 50%;
+    box-shadow: 0 0 0 3px #afdcf8;
+    ;
+  }
+
+  .task_flex {
+    display: flex;
+    line-height: 20px;
+  }
+
+  .arrow_box {
+    position: relative;
+    padding: 5px 5px 5px 10px;
+    /* border-radius: 5px; */
+    border-left: 3px solid #46a4da;
+    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    margin-bottom: 10px;
+    /* border-bottom: 1px solid #f5f5f5;
+    border-top: 1px solid #f5f5f5;
+    border-right: 1px solid #f5f5f5; */
+  }
+
+  /* .arrow_box:after {
+    right: 100%;
+    top: 22px;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-right-color: #46a4da;
+    border-width: 8px;
+    margin-top: -8px;
+  } */
+
+  .task_time {
+    color: #888;
+    margin-right: 10px;
+    font-size: 14px;
+  }
+
+  .task_bottom div {
+    margin-right: 10px
+  }
+
+  .task_tip {
+    color: #888;
+    font-size: 12px;
+    margin-right: 10px;
+    border-radius: 5px;
+    padding: 5px;
+    background-color: #f7f7f7;
+    line-height: 12px;
+  }
+
+  .task_tip_inner {
+    color: #888;
+    font-size: 8px;
+    /* margin-right: 10px; */
+    border-radius: 5px;
+    padding: 5px;
+    background-color: #f7f7f7;
+    line-height: 10px;
+  }
+
+  .tip_red {
+    color: #fa5a5a;
+    background-color: #ffc3c3
+  }
+
+  .tip_blue {
+    color: #46a4da;
+    background-color: #afdcf8
+  }
+
+  .kindgreen {
+    border-left: 3px solid #88b04b;
+
+  }
+
+  .kindgreen::after {
+    border-right-color: #88b04b;
+  }
+
+  .kindred {
+    border-left: 3px solid #ff6f61;
+  }
+
+  .kindred::after {
+    border-right-color: #ff6f61;
+  }
+
+  .kindorange {
+    border-left: 3px solid #f2c866
+  }
+
+  .kindorange::after {
+    border-right-color: #f2c866;
+  }
+
+  .icongreen {
+    background: #88b04b;
+    box-shadow: 0 0 0 3px #d1f3a1;
+  }
+
+  .iconred {
+    background: #ff6f61;
+    box-shadow: 0 0 0 3px #fdd1cd;
+  }
+
+  .iconorange {
+    background: #f2c866;
+    box-shadow: 0 0 0 3px #f7e7c2;
+  }
+
+
+  /* 底部栏 */
+  .todolist-tab {
+    color: #666;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #ffffff;
+    width: 100%;
+    z-index: 9999;
+    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
+  }
+
+</style>

src/pages/task.vue

@@ -0,0 +1,279 @@
+<template>
+  <div>
+    <!-- <div class="topbar">
+      <div class="topbar_left" @click="goback">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        我的任务 <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xiala"></use>
+        </svg>
+      </div>
+      <div class="topbar_right">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caidan"></use>
+        </svg>
+      </div>
+    </div> -->
+
+
+    <div class="task_main">
+      <div class="task_top">
+        <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>
+        </div>
+
+        <div class="task_msg">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-xiaoxi"></use>
+          </svg>
+          你有3个任务已超期，点击查看
+        </div>
+      </div>
+
+      <div class="task_title" style="margin-top:80px">当天</div>
+      <div class="tasklist">
+        <task-list></task-list>
+      </div>
+
+
+      <div class="task_title">昨天</div>
+      <div class="tasklist" style="margin-bottom:80px;">
+        <task-list></task-list>
+      </div>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="todolist-tab">
+      <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>
+  import TaskList from "./components/tasklist";
+  export default {
+    name: 'task',
+    components: {
+      TaskList
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #f7f7f7;
+    font-family: "微软雅黑";
+  }
+
+  .task_selection_warp {
+
+    width: 100%;
+    border-bottom: 1px solid #f5f5f5;
+  }
+
+  .task_selection {
+    display: flex;
+    width: 105px;
+    margin: 10px auto 5px auto;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .task_selection div {
+    padding-bottom: 3px;
+  }
+
+  .task_selection_check {
+    color: #fd7526;
+    border-bottom: 2px solid #fd7526;
+  }
+
+  .task_top {
+    z-index: 9999;
+    width: 100%;
+    position: fixed;
+    background-color: #fff;
+    /* margin: 10px auto 5px auto; */
+    font-size: 15px;
+    /* font-weight: bold; */
+  }
+
+  .task_msg {
+    /* z-index: 9999; */
+    /* position: fixed; */
+    width: 100%;
+    background-color: #fdd1cd;
+    font-size: 13px;
+    color: #ff6f61;
+    line-height: 25px;
+    padding: 4px 5px 4px 20px;
+  }
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9999;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    flex: 0 0 20px;
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    text-align: center;
+    flex: 0 0 89%;
+  }
+
+  .topbar_right {
+    flex: 0 0 20px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .task_main {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    z-index: 0;
+  }
+
+  .task_main::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    background: #e6e6e6;
+    left: 28px;
+    margin-left: -5px;
+    z-index: 0;
+
+  }
+
+
+  .task_title {
+    margin: 40px 20px 0px 50px;
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 25px;
+  }
+
+  .tasklist {
+    margin: 0 0 20px 0;
+  }
+
+  .liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 15px 0;
+  }
+
+  /* 底部栏 */
+  .todolist-tab {
+    color: #666;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #ffffff;
+    width: 100%;
+    z-index: 9999;
+    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
+  }
+
+</style>

src/pages/taskedit.vue

@@ -0,0 +1,391 @@
+<template>
+  <div>
+    <div class="topbar">
+      <div class="topbar_left" @click="goback">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        新建任务
+      </div>
+      <div class="topbar_right">
+        <!-- <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caidan"></use>
+        </svg> -->
+      </div>
+    </div>
+
+    <div class="taskedit">
+
+      <div class="taskedit_main">
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">类型</div>
+          <div class="taskedit_item">
+            <span v-if="tasktype==0">临时任务</span>
+            <span v-if="tasktype==1">客户走访</span>
+            <span v-if="tasktype==2">稽核检查</span>
+          </div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">任务人</div>
+          <div class="taskedit_item">张小千</div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+        <!-- 客户信息 -->
+        <div v-if="tasktype==1">
+
+
+          <div class="taskedit_flex">
+            <div class="taskedit_title">客户</div>
+            <div class="taskedit_item">红岸家私城</div>
+            <div class="taskedit_pzbtn">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-iconfontjiantou2"></use>
+              </svg>
+            </div>
+          </div>
+
+          <div class="taskedit_flex">
+            <div class="taskedit_title">联系人</div>
+            <div class="taskedit_item">章北海</div>
+
+          </div>
+
+          <div class="taskedit_flex">
+            <div class="taskedit_title">电话</div>
+            <div class="taskedit_item">13600138779</div>
+            <div class="taskedit_pzbtn">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-dianhua"></use>
+              </svg>
+            </div>
+          </div>
+
+          <div class="taskedit_flex">
+            <div class="taskedit_title">地址</div>
+            <div class="taskedit_item">佛山市佛山大道189号</div>
+            <div class="taskedit_pzbtn">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-icon_daohang-copy"></use>
+              </svg>
+            </div>
+          </div>
+
+
+          <div class="taskedit_flex">
+            <div class="taskedit_title">走访类型</div>
+            <div class="taskedit_item">电话回访</div>
+            <div class="taskedit_pzbtn">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-iconfontjiantou2"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">任务</div>
+          <div class="taskedit_dscrp">
+            <span v-if="tasktype==0">跟设计公司沟通，定好最新一季宣传画册的设计。</span>
+            <span v-if="tasktype==1">了解客户上一批货的销售情况及质量反馈，并介绍本季最新产品。</span>
+            <span v-if="tasktype==2">按6S标准检查车间清洁是否达标。</span>
+          </div>
+        </div>
+
+        <div class="taskedit_flex" v-if="tasktype==2">
+          <div class="taskedit_title">及格标准</div>
+          <div class="taskedit_dscrp">
+            <span>地面清洁无灰尘、无垃圾、无油污、无积水、无死角。墙壁(角)清洁无污染、无蛛网、无死角。门窗明亮干净、无积灰、无污迹、无蛛网。</span>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">时间</div>
+          <div class="taskedit_item color_sub">开始</div>
+          <div class="taskedit_date">8月2日 09:00</div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+        <div class="taskedit_flex">
+          <div class="taskedit_title"></div>
+          <div class="taskedit_item color_sub">结束</div>
+          <div class="taskedit_date">8月2日 12:00</div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">重复</div>
+          <div class="taskedit_item">
+            <span v-if="tasktype==0">不重复</span>
+            <span v-if="tasktype==1">每月</span>
+            <span v-if="tasktype==2">每周</span>
+          </div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">提醒</div>
+          <div class="taskedit_item">提前30分钟</div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">需要验收</div>
+          <div style="margin-left:10px;font-size:40px">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-kaiguanswitch-zhengque"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">验收人</div>
+          <div class="taskedit_item">李学朋</div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+
+      </div>
+
+      <div class="taskedit_fjarea">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fujian"></use>
+        </svg>
+        添加附件
+      </div>
+
+      <div class="taskedit_fjlist">
+        <div v-if="tasktype!=2">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-yasuobao"></use>
+          </svg>
+          新产品照片_190802.rar
+        </div>
+        <div v-if="tasktype==2">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-tupian"></use>
+          </svg>
+          及格标准图片.jpg
+        </div>
+        <div class="taskedit_fjsize">
+          <span v-if="tasktype!=2">30.2M</span>
+          <span v-if="tasktype==2">1.4M</span>
+        </div>
+        <div class="taskedit_fjdel">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-guanbi"></use>
+          </svg>
+        </div>
+      </div>
+
+
+    </div>
+
+    <div class="quote_edit_btn_wrap">
+      <div class="quote_edit_btn">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-tongyi"></use>
+        </svg>
+        确定
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'taskedit',
+    data() {
+      return {
+        tasktype: 1 //0-临时任务 1-客户走访 2-稽核检查
+      }
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    font-family: "微软雅黑";
+    font-size: 15px;
+  }
+
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9999;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    flex: 0 0 20px;
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    /* text-align: center; */
+    padding: 0 0 0 10px;
+    flex: 0 0 89%;
+  }
+
+  .topbar_right {
+    flex: 0 0 20px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .taskedit {
+    position: absolute;
+    top: 44px;
+    width: 100%;
+    margin-bottom: 80px;
+  }
+
+  .taskedit_main {
+    padding: 5px 20px;
+  }
+
+  .taskedit_flex {
+    display: flex;
+    line-height: 45px;
+    align-items: flex-start
+  }
+
+
+  .taskedit_title {
+    font-size: 15px;
+    font-weight: bold;
+    flex: 0 0 60px;
+    text-align: justify;
+    text-align-last: justify;
+  }
+
+
+  .taskedit_item {
+    flex: 0 0 80%;
+    border-bottom: 1px solid #e5e5e5;
+    margin: 0 0 0 10px;
+    color: #777
+  }
+
+  .taskedit_pzbtn {
+    position: absolute;
+    right: 20px;
+    color: #ccc;
+    font-size: 16px;
+  }
+
+  .taskedit_date {
+    position: absolute;
+    right: 40px;
+    color: #777
+  }
+
+  .taskedit_dscrp {
+    padding: 10px;
+    line-height: 20px;
+    border: 1px solid #e5e5e5;
+    border-radius: 5px;
+    margin: 5px 0 5px 10px;
+    height: 100px;
+    color: #777;
+    width: 100%
+  }
+
+  .color_sub {
+    color: #999
+  }
+
+  .quote_edit_btn_wrap {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    /* background-color: #fc4e2c; */
+    width: 100%;
+    z-index: 9990;
+    align-items: center;
+    justify-content: center;
+    /* padding: 5px 0 2px 0; */
+    box-shadow: 0 -1px 3px #f1f1f1;
+  }
+
+  .quote_edit_btn {
+    /* background-color: #ffb732; */
+    background-color: #fc4e2c;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    padding: 8px;
+    width: 100%;
+  }
+
+  .taskedit_fjarea {
+    margin: 10px 20px;
+    color: #777
+  }
+
+  .taskedit_fjlist {
+    padding: 0 20px;
+    align-items: center;
+    display: flex;
+    font-size: 15px;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .taskedit_fjsize {
+    font-size: 15px;
+    color: #aaa;
+    margin-left: 10px;
+  }
+
+  .taskedit_fjdel {
+    font-size: 15px;
+    color: #fc4e2c;
+    position: absolute;
+    right: 20px;
+  }
+
+</style>

src/pages/taskview.vue

@@ -0,0 +1,642 @@
+<template>
+  <div>
+    <div class="topbar">
+      <div class="topbar_left" @click="goback">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        任务
+      </div>
+      <div class="topbar_right">
+        <!-- <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caidan"></use>
+        </svg> -->
+      </div>
+    </div>
+
+    <div class="taskview_toparea" :class="colortop">
+      <div class="taskview_top_type" v-if="tasktype==0">临时任务</div>
+      <div class="taskview_top_type" v-if="tasktype==1">客户走访</div>
+      <div class="taskview_top_type" v-if="tasktype==2">稽核检查</div>
+      <div class="taskview_top_delay" v-if="taskflag_dt=='未完成'">超期</div>
+      <div class="taskview_top_flag">{{taskflag_dt}}</div>
+    </div>
+    <div class="taskview_toparea_sec" :class="colortop_sec"></div>
+    <div class="taskview_toparea_thr" :class="colortop_thr"></div>
+
+    <div class="taskview">
+
+      <div class="taskview_main">
+        <div class="taskview_info">
+          <span v-if="tasktype==0">跟设计公司沟通，定好最新一季宣传画册的设计。</span>
+          <span v-if="tasktype==1">了解客户上一批货的销售情况及质量反馈，并介绍本季最新产品。</span>
+          <span v-if="tasktype==2">按6S标准检查车间清洁是否达标。</span>
+        </div>
+
+
+        <div v-if="tasktype==2">
+          <div class="taskview_check_title">及格标准</div>
+          <div class="taskview_check_dscrp">
+            <span>地面清洁无灰尘、无垃圾、无油污、无积水、无死角。墙壁(角)清洁无污染、无蛛网、无死角。门窗明亮干净、无积灰、无污迹、无蛛网。</span>
+          </div>
+        </div>
+
+        <!-- 下面是附件区域，根据实际是否有附件决定显示与否 -->
+        <div style="margin-top:10px;">
+          <div class="taskview_fjlist">
+            <div v-if="tasktype!=2">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-yasuobao"></use>
+              </svg>
+              新产品照片_190802_01.rar
+            </div>
+
+            <div v-if="tasktype==2">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-tupian"></use>
+              </svg>
+              及格标准图片1.jpg
+            </div>
+
+            <div class="taskview_fjsize">
+              <span v-if="tasktype!=2">30.2M</span>
+              <span v-if="tasktype==2">1.4M</span>
+            </div>
+
+          </div>
+
+          <div class="taskview_fjlist">
+            <div v-if="tasktype!=2">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-yasuobao"></use>
+              </svg>
+              新产品照片_190802_02.rar
+            </div>
+
+            <div v-if="tasktype==2">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-tupian"></use>
+              </svg>
+              及格标准图片2.jpg
+            </div>
+
+            <div class="taskview_fjsize">
+              <span v-if="tasktype!=2">30.2M</span>
+              <span v-if="tasktype==2">1.4M</span>
+            </div>
+
+          </div>
+        </div>
+
+        <!-- 客户信息 -->
+        <div v-if="tasktype==1">
+
+          <div class="liubai_dt"></div>
+          <div class="taskview_flex">
+            <div class="taskview_title">客户</div>
+            <div class="taskview_item">红岸家私城</div>
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">联系人</div>
+            <div class="taskview_item">章北海</div>
+
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">电话</div>
+            <div class="taskview_item">13600138779</div>
+            <div class="taskview_pzbtn">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-dianhua"></use>
+              </svg>
+            </div>
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">地址</div>
+            <div class="taskview_item">佛山市佛山大道189号</div>
+            <div class="taskview_pzbtn">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-icon_daohang-copy"></use>
+              </svg>
+            </div>
+          </div>
+
+
+          <div class="taskview_flex">
+            <div class="taskview_title">走访类型</div>
+            <div class="taskview_item">电话回访</div>
+          </div>
+        </div>
+
+
+        <div class="liubai_dt"></div>
+
+        <div class="taskview_flex">
+          <div class="taskview_title">任务人</div>
+          <div class="taskview_item">张小千</div>
+        </div>
+
+
+        <div class="taskview_flex">
+          <div class="taskview_title">时间</div>
+          <div class="taskview_item">8月2日 09:00-12:00</div>
+        </div>
+
+        <div class="taskview_flex" v-if="taskflag_dt=='未完成'">
+          <div class="taskview_title">提醒</div>
+          <div class="taskview_item">提前30分钟</div>
+          <div class="taskview_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskview_flex" v-if="taskflag_dt!='未完成'" style="align-items: center">
+          <div class="taskview_title">完成时间</div>
+          <div class="taskview_item">8月2日 16:28</div>
+          <div class="taskview_finish_delay">超期</div>
+        </div>
+
+
+        <div class="taskview_flex" v-if="taskflag_dt!='未完成'">
+          <div class="taskview_title">
+            <span v-if="tasktype!=2">任务汇报</span>
+            <span v-if="tasktype==2">检查结果</span>
+          </div>
+          <div class="taskview_item">
+            <span v-if="tasktype==0">已沟通好设计方案，详情见附件</span>
+            <span v-if="tasktype==1">已电话回访客户，销售情况及质量都比较理想，并对我司新一季产品感兴趣。</span>
+            <span v-if="tasktype==2">合格</span>
+          </div>
+        </div>
+
+        <div class="taskview_fjlist" v-if="taskflag_dt!='未完成'">
+          <div v-if="tasktype==0">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-tupian"></use>
+            </svg>
+            设计方案草图.jpg
+          </div>
+
+          <div v-if="tasktype==1">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-tupian"></use>
+            </svg>
+            通话记录截图.jpg
+          </div>
+
+          <div v-if="tasktype==2">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-tupian"></use>
+            </svg>
+            车间现场照片.jpg
+          </div>
+
+          <div class="taskview_fjsize">
+            <span>1.4M</span>
+          </div>
+
+        </div>
+
+
+        <div class="liubai_dt"></div>
+        <div class="taskview_flex">
+          <div class="taskview_title">验收人</div>
+          <div class="taskview_item">李学朋</div>
+        </div>
+
+        <div class="taskview_flex" v-if="taskflag_dt=='已验收'">
+          <div class="taskview_title">评分</div>
+          <div class="taskview_item" style="font-size:22px;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskview_flex" v-if="taskflag_dt=='已验收'">
+          <div class="taskview_title">评语</div>
+          <div class="taskview_item">人在做，天在看，下次记得准时完成任务。</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <div class="quote_edit_btn_wrap" v-if="taskflag_dt!='已验收'">
+      <div class="quote_edit_btn">
+        <span v-if="taskflag_dt=='未完成'">完成任务</span>
+        <span v-if="taskflag_dt=='待验收'">验收</span>
+      </div>
+    </div>
+
+    <!-- 完成任务、验收任务弹出界面 -->
+    <div v-if="ifresponse>0">
+      <div class="taskview_mask"></div>
+
+      <div class="taskview_response">
+        <div style="display:flex;align-items: center;">
+          <div style="font-size:15px;padding:0 20px;color:#888">
+            <span v-if="ifresponse==2">任务验收</span>
+            <span v-if="ifresponse==1">完成任务</span>
+          </div>
+          <div style="position: absolute;right: 20px;color: #ccc;font-size: 12px;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi"></use>
+            </svg>
+          </div>
+        </div>
+
+        <!-- 评价星级 -->
+        <div class="taskview_flex" style="margin-top:15px;" v-if="ifresponse==2">
+          <div class="taskview_title">评分</div>
+          <div class="taskview_item" style="font-size:22px;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing"></use>
+            </svg>
+          </div>
+        </div>
+
+        <!-- 评语 或 汇报 录入 -->
+        <div style="width: 100%;text-align: center;">
+          <textarea name="banreason" rows="5" placeholder="请填写评语" style="width: 90%;font-size: 15px;margin: 10px;"
+            v-if="ifresponse==2">
+            </textarea>
+
+          <textarea name="banreason" rows="5" placeholder="请填写任务汇报" style="width: 90%;font-size: 15px;margin: 10px;"
+            v-if="ifresponse==1">
+            </textarea>
+
+        </div>
+
+        <!-- 完成任务时添加附件 -->
+        <div v-if="ifresponse==1" class="taskedit_fjarea" style="padding:0 0 0 20px;color:#666">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-fujian"></use>
+          </svg>
+          添加附件
+        </div>
+
+        <!-- 提交按钮 -->
+        <div class="quote_edit_btn_wrap">
+          <div class="quote_edit_btn">
+            <span v-if="ifresponse==2">验收</span>
+            <span v-if="ifresponse==1">完成</span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'taskview',
+    data() {
+      return {
+        tasktype: 2, //0-临时任务 1-客户走访 2-稽核检查
+        taskflag_dt: "已验收", //未完成,待验收,已验收
+        ifresponse: 0 //弹窗 0：不弹  1：完成任务界面 2：验收任务界面
+      }
+    },
+    computed: {
+      colortop: function () {
+        return {
+          taskview_toparea_green: this.taskflag_dt == "待验收",
+          taskview_toparea_blue: this.taskflag_dt == "已验收"
+        };
+      },
+      colortop_sec: function () {
+        return {
+          taskview_toparea_green_sec: this.taskflag_dt == "待验收",
+          taskview_toparea_blue_sec: this.taskflag_dt == "已验收"
+        };
+      },
+      colortop_thr: function () {
+        return {
+          taskview_toparea_green_thr: this.taskflag_dt == "待验收",
+          taskview_toparea_blue_thr: this.taskflag_dt == "已验收"
+        };
+      }
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    font-family: "微软雅黑";
+    font-size: 14px;
+  }
+
+  .taskview_mask {
+    height: 100%;
+    width: 100%;
+    background-color: #1d1d1d;
+    opacity: 0.8;
+    position: fixed;
+    top: 0px;
+    z-index: 9998;
+  }
+
+  .taskview_response {
+    z-index: 9999;
+    background-color: #ffffff;
+    position: fixed;
+    bottom: 0px;
+    height: 220px;
+    width: 100%;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    padding: 10px 0;
+  }
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9997;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    flex: 0 0 20px;
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    /* text-align: center; */
+    padding: 0 0 0 10px;
+    flex: 0 0 89%;
+  }
+
+  .topbar_right {
+    flex: 0 0 20px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .taskview_info {
+    font-size: 16px;
+    padding: 5px 20px;
+  }
+
+  .taskview_toparea {
+    position: absolute;
+    top: 44px;
+    width: 100%;
+    display: flex;
+    color: #fff;
+    background-color: #fc4e2c;
+    font-size: 16px;
+    font-weight: bold;
+    align-items: center;
+    height: 35px;
+  }
+
+  .taskview_toparea_green {
+    background-color: #8dc026;
+  }
+
+  .taskview_toparea_blue {
+    background-color: #46a4da;
+  }
+
+  .taskview_toparea_sec {
+    position: absolute;
+    top: 79px;
+    height: 5px;
+    background-color: #fd8e78;
+    width: 100%;
+  }
+
+  .taskview_toparea_green_sec {
+    background-color: #bbe26e;
+  }
+
+  .taskview_toparea_blue_sec {
+    background-color: #90cef1;
+  }
+
+  .taskview_toparea_thr {
+    position: absolute;
+    top: 84px;
+    height: 5px;
+    background-color: #ffdbd4;
+    width: 100%;
+  }
+
+  .taskview_toparea_green_thr {
+    background-color: #e3f8b8;
+  }
+
+  .taskview_toparea_blue_thr {
+    background-color: #d1edfd;
+  }
+
+  .taskview_top_type {
+    padding: 0 0 0 20px;
+  }
+
+  .taskview_top_flag {
+    position: absolute;
+    right: 20px;
+  }
+
+  .taskview_top_delay {
+    position: absolute;
+    right: 80px;
+    font-size: 12px;
+    height: 24px;
+    line-height: 24px;
+    background-color: #fdd1cd;
+    color: #ff6f61;
+    width: 45px;
+    border-radius: 15px;
+    text-align: center;
+  }
+
+  .taskview_finish_delay {
+    margin: 0 0 0 10px;
+    font-size: 12px;
+    height: 18px;
+    line-height: 18px;
+    background-color: #fdd1cd;
+    color: #ff6f61;
+    width: 40px;
+    border-radius: 15px;
+    text-align: center;
+  }
+
+  .taskview {
+    position: absolute;
+    top: 90px;
+    width: 100%;
+    margin-bottom: 80px;
+  }
+
+  .taskview_main {
+    padding: 0px 0px;
+  }
+
+  .taskview_flex {
+    display: flex;
+    line-height: 25px;
+    align-items: flex-start;
+    padding: 0px 20px;
+  }
+
+
+  .taskview_title {
+    font-size: 14px;
+    font-weight: bold;
+    flex: 0 0 60px;
+    text-align: justify;
+    text-align-last: justify;
+  }
+
+  .taskview_check_title {
+    font-size: 14px;
+    font-weight: bold;
+    padding: 5px 0 0 20px;
+  }
+
+  .taskview_check_dscrp {
+    color: #777;
+    padding: 0 20px;
+  }
+
+  .taskview_item {
+    /* flex: 0 0 80%; */
+    /* border-bottom: 1px solid #e5e5e5; */
+    margin: 0 0 0 10px;
+    color: #777
+  }
+
+  .taskview_pzbtn {
+    /* position: absolute;
+    right: 20px; */
+    margin-left: 20px;
+    color: #ccc;
+    font-size: 16px;
+  }
+
+  .taskview_date {
+    position: absolute;
+    right: 40px;
+    color: #777
+  }
+
+  .taskview_dscrp {
+    padding: 10px;
+    line-height: 20px;
+    border: 1px solid #e5e5e5;
+    border-radius: 5px;
+    margin: 5px 0 5px 10px;
+    height: 100px;
+    color: #777;
+    width: 100%
+  }
+
+  .color_sub {
+    color: #999
+  }
+
+  .quote_edit_btn_wrap {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    /* background-color: #fc4e2c; */
+    width: 100%;
+    z-index: 9990;
+    align-items: center;
+    justify-content: center;
+    /* padding: 5px 0 2px 0; */
+    box-shadow: 0 -1px 3px #f1f1f1;
+  }
+
+  .quote_edit_btn {
+    /* background-color: #ffb732; */
+    background-color: #fc4e2c;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    padding: 8px;
+    width: 100%;
+  }
+
+  .taskview_fjarea {
+    margin: 10px 20px;
+    color: #777
+  }
+
+  .taskview_fjlist {
+    padding: 0px 0 0 20px;
+    align-items: center;
+    display: flex;
+    font-size: 14px;
+    height: 25px;
+    line-height: 25px;
+  }
+
+  .taskview_fjsize {
+    font-size: 14px;
+    color: #aaa;
+    margin-left: 10px;
+  }
+
+  .taskview_fjdel {
+    font-size: 15px;
+    color: #fc4e2c;
+    position: absolute;
+    right: 20px;
+  }
+
+  .liubai_dt {
+    width: 100%;
+    height: 10px;
+    background-color: #f6f6f6;
+    margin: 10px 0;
+  }
+
+</style>

src/router/index.js

@@ -3,7 +3,7 @@ import Router from 'vue-router'
 import SaleTask from '@/pages/saletask'
 import SaleTaskDetail from '@/pages/saletaskdetail'
 import SaleTaskmxjd from '@/pages/saletaskmxjd'
-import Home from '@/pages/home'
+import Home from '@/pages/homenew'
 import Setting from '@/pages/setting'
 import Daily from '@/pages/daily'
 import Pushlist from '@/pages/pushlist'
@@ -29,6 +29,10 @@ import Saleintime from '@/pages/report/saleintime'
 import Ito from '@/pages/report/ito'
 import Itomx from '@/pages/report/itomx'
 import Profit from '@/pages/report/profit'
+import Task from '@/pages/task'
+import TaskEdit from '@/pages/taskedit'
+import TaskView from '@/pages/taskview'
+import TodoList from '@/pages/l1todolist'
 
 Vue.use(Router)
 
@@ -39,6 +43,38 @@ export default new Router({
       name: 'Home',
       component: Home
     },
+    {
+      path: '/taskedit',
+      name: 'TaskEdit',
+      component: TaskEdit,
+      meta: {
+        title: '工作任务'
+      }
+    },
+    {
+      path: '/todolist',
+      name: 'TodoList',
+      component: TodoList,
+      meta: {
+        title: '待办'
+      }
+    },
+    {
+      path: '/taskview',
+      name: 'TaskView',
+      component: TaskView,
+      meta: {
+        title: '工作任务'
+      }
+    },
+    {
+      path: '/task',
+      name: 'Task',
+      component: Task,
+      meta: {
+        title: '工作任务'
+      }
+    },
     {
       path: '/detail',
       name: 'SaleTaskDetail',