增加首页UI.单据列表界面、单据详细信息界面增加topbar

src/assets/iconfont/demo_fontclass.html

@@ -24,6 +24,12 @@
                     <div class="fontclass">.icon-zanting</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont icon-sousuo"></i>
+                    <div class="name">搜索</div>
+                    <div class="fontclass">.icon-sousuo</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont icon-fenlei"></i>
                     <div class="name">分类</div>
@@ -42,18 +48,42 @@
                     <div class="fontclass">.icon-wentibuchong</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont icon-icon-test"></i>
+                    <div class="name">公文管理</div>
+                    <div class="fontclass">.icon-icon-test</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fanhui"></i>
+                    <div class="name">返回</div>
+                    <div class="fontclass">.icon-fanhui</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont icon-CombinedShape"></i>
                     <div class="name">完成</div>
                     <div class="fontclass">.icon-CombinedShape</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont icon-shezhi"></i>
+                    <div class="name">设置</div>
+                    <div class="fontclass">.icon-shezhi</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont icon-kehu"></i>
                     <div class="name">客户</div>
                     <div class="fontclass">.icon-kehu</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont icon-xiaoxi"></i>
+                    <div class="name">消息</div>
+                    <div class="fontclass">.icon-xiaoxi</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont icon-shangpin"></i>
                     <div class="name">商品</div>
@@ -90,6 +120,36 @@
                     <div class="fontclass">.icon-icon-</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont icon-caigou"></i>
+                    <div class="name">采购</div>
+                    <div class="fontclass">.icon-caigou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shujukanban"></i>
+                    <div class="name">数据看板</div>
+                    <div class="fontclass">.icon-shujukanban</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yingyongguanli"></i>
+                    <div class="name">应用管理</div>
+                    <div class="fontclass">.icon-yingyongguanli</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-gongwenbao"></i>
+                    <div class="name">公文包</div>
+                    <div class="fontclass">.icon-gongwenbao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao-zhuzhuangtu"></i>
+                    <div class="name">图表-柱状图</div>
+                    <div class="fontclass">.icon-tubiao-zhuzhuangtu</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont icon-dian"></i>
                     <div class="name">点</div>
@@ -102,6 +162,18 @@
                     <div class="fontclass">.icon-ziyuan</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont icon-caidan"></i>
+                    <div class="name">菜单</div>
+                    <div class="fontclass">.icon-caidan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-caiwuguanli"></i>
+                    <div class="name">财务管理</div>
+                    <div class="fontclass">.icon-caiwuguanli</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont icon-zuixinxiaoxi"></i>
                     <div class="name">最新消息</div>
@@ -114,12 +186,24 @@
                     <div class="fontclass">.icon-buzhoutiaowancheng</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont icon-xiaoshoudingdan"></i>
+                    <div class="name">销售订单</div>
+                    <div class="fontclass">.icon-xiaoshoudingdan</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont icon-jindu"></i>
                     <div class="name">进度</div>
                     <div class="fontclass">.icon-jindu</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont icon-more"></i>
+                    <div class="name">more</div>
+                    <div class="fontclass">.icon-more</div>
+                </li>
+            
         </ul>
 
         <h2 id="font-class-">font-class引用</h2>

src/assets/iconfont/demo_symbol.html

@@ -43,6 +43,14 @@
                     <div class="fontclass">#icon-zanting</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-sousuo"></use>
+                    </svg>
+                    <div class="name">搜索</div>
+                    <div class="fontclass">#icon-sousuo</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-fenlei"></use>
@@ -67,6 +75,22 @@
                     <div class="fontclass">#icon-wentibuchong</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-icon-test"></use>
+                    </svg>
+                    <div class="name">公文管理</div>
+                    <div class="fontclass">#icon-icon-test</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fanhui"></use>
+                    </svg>
+                    <div class="name">返回</div>
+                    <div class="fontclass">#icon-fanhui</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-CombinedShape"></use>
@@ -75,6 +99,14 @@
                     <div class="fontclass">#icon-CombinedShape</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shezhi"></use>
+                    </svg>
+                    <div class="name">设置</div>
+                    <div class="fontclass">#icon-shezhi</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-kehu"></use>
@@ -83,6 +115,14 @@
                     <div class="fontclass">#icon-kehu</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiaoxi"></use>
+                    </svg>
+                    <div class="name">消息</div>
+                    <div class="fontclass">#icon-xiaoxi</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-shangpin"></use>
@@ -131,6 +171,46 @@
                     <div class="fontclass">#icon-icon-</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-caigou"></use>
+                    </svg>
+                    <div class="name">采购</div>
+                    <div class="fontclass">#icon-caigou</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shujukanban"></use>
+                    </svg>
+                    <div class="name">数据看板</div>
+                    <div class="fontclass">#icon-shujukanban</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yingyongguanli"></use>
+                    </svg>
+                    <div class="name">应用管理</div>
+                    <div class="fontclass">#icon-yingyongguanli</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-gongwenbao"></use>
+                    </svg>
+                    <div class="name">公文包</div>
+                    <div class="fontclass">#icon-gongwenbao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
+                    </svg>
+                    <div class="name">图表-柱状图</div>
+                    <div class="fontclass">#icon-tubiao-zhuzhuangtu</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-dian"></use>
@@ -147,6 +227,22 @@
                     <div class="fontclass">#icon-ziyuan</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-caidan"></use>
+                    </svg>
+                    <div class="name">菜单</div>
+                    <div class="fontclass">#icon-caidan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-caiwuguanli"></use>
+                    </svg>
+                    <div class="name">财务管理</div>
+                    <div class="fontclass">#icon-caiwuguanli</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-zuixinxiaoxi"></use>
@@ -163,6 +259,14 @@
                     <div class="fontclass">#icon-buzhoutiaowancheng</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiaoshoudingdan"></use>
+                    </svg>
+                    <div class="name">销售订单</div>
+                    <div class="fontclass">#icon-xiaoshoudingdan</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-jindu"></use>
@@ -171,6 +275,14 @@
                     <div class="fontclass">#icon-jindu</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-more"></use>
+                    </svg>
+                    <div class="name">more</div>
+                    <div class="fontclass">#icon-more</div>
+                </li>
+            
         </ul>
 
 

src/assets/iconfont/demo_unicode.html

@@ -44,6 +44,12 @@
                     <div class="code">&amp;#xe6ca;</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont">&#xe632;</i>
+                    <div class="name">搜索</div>
+                    <div class="code">&amp;#xe632;</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont">&#xe628;</i>
                     <div class="name">分类</div>
@@ -62,18 +68,42 @@
                     <div class="code">&amp;#xe6c0;</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont">&#xe604;</i>
+                    <div class="name">公文管理</div>
+                    <div class="code">&amp;#xe604;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe605;</i>
+                    <div class="name">返回</div>
+                    <div class="code">&amp;#xe605;</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont">&#xe602;</i>
                     <div class="name">完成</div>
                     <div class="code">&amp;#xe602;</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont">&#xe64e;</i>
+                    <div class="name">设置</div>
+                    <div class="code">&amp;#xe64e;</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont">&#xe603;</i>
                     <div class="name">客户</div>
                     <div class="code">&amp;#xe603;</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont">&#xe644;</i>
+                    <div class="name">消息</div>
+                    <div class="code">&amp;#xe644;</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont">&#xe694;</i>
                     <div class="name">商品</div>
@@ -110,6 +140,36 @@
                     <div class="code">&amp;#xe6db;</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont">&#xe601;</i>
+                    <div class="name">采购</div>
+                    <div class="code">&amp;#xe601;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xeb66;</i>
+                    <div class="name">数据看板</div>
+                    <div class="code">&amp;#xeb66;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xeb67;</i>
+                    <div class="name">应用管理</div>
+                    <div class="code">&amp;#xeb67;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6d6;</i>
+                    <div class="name">公文包</div>
+                    <div class="code">&amp;#xe6d6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xeb96;</i>
+                    <div class="name">图表-柱状图</div>
+                    <div class="code">&amp;#xeb96;</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont">&#xec1e;</i>
                     <div class="name">点</div>
@@ -122,6 +182,18 @@
                     <div class="code">&amp;#xe682;</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont">&#xe60c;</i>
+                    <div class="name">菜单</div>
+                    <div class="code">&amp;#xe60c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe612;</i>
+                    <div class="name">财务管理</div>
+                    <div class="code">&amp;#xe612;</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont">&#xe642;</i>
                     <div class="name">最新消息</div>
@@ -134,12 +206,24 @@
                     <div class="code">&amp;#xe634;</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont">&#xe61d;</i>
+                    <div class="name">销售订单</div>
+                    <div class="code">&amp;#xe61d;</div>
+                </li>
+            
                 <li>
                 <i class="icon iconfont">&#xe621;</i>
                     <div class="name">进度</div>
                     <div class="code">&amp;#xe621;</div>
                 </li>
             
+                <li>
+                <i class="icon iconfont">&#xe710;</i>
+                    <div class="name">more</div>
+                    <div class="code">&amp;#xe710;</div>
+                </li>
+            
         </ul>
         <h2 id="unicode-">unicode引用</h2>
         <hr>

src/pages/home.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="home_div">
+    <!-- <div class="home_title">
+      <div class="home_title_search">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-sousuo"></use>
+        </svg>
+        搜索
+      </div>
+      <div class="home_title_setting">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-shezhi"></use>
+        </svg>
+      </div>
+    </div> -->
+    <div class="home_maininfo">
+
+
+      <!-- <div class="home_icon_area">
+
+        <div class="home_icon_area_mx" @click="gotosaletask">
+          <svg class="icon home_icon_area_use" aria-hidden="true">
+            <use xlink:href="#icon-xiaoshoudingdan"></use>
+          </svg>
+          <div class="home_icon_text">销售订单</div>
+        </div>
+
+        <div class="home_icon_area_mx">
+          <svg class="icon home_icon_area_use" aria-hidden="true">
+            <use xlink:href="#icon-shangpin"></use>
+          </svg>
+          <div class="home_icon_text">采购订单</div>
+        </div>
+
+
+        <div class="home_icon_area_mx">
+          <svg class="icon home_icon_area_use" aria-hidden="true">
+            <use xlink:href="#icon-gongwenbao"></use>
+          </svg>
+          <div class="home_icon_text">公文审批</div>
+        </div>
+
+        <div class="home_icon_area_mx">
+          <svg class="icon home_icon_area_use" aria-hidden="true">
+            <use xlink:href="#icon-yingyongguanli"></use>
+          </svg>
+          <div class="home_icon_text">更多</div>
+        </div>
+
+      </div>
+
+      <div class="home_msg">
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-xiaoxi"></use>
+          </svg>
+          有12张销售订单待您审批，请查看。</div>
+      </div> -->
+
+      <div class="home_widget_area">
+
+        <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>
+
+
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'home',
+    methods: {
+      gotosaletask() {
+        this.$router.push({
+          path: "/saletask"
+        });
+      }
+    }
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: rgb(242, 242, 242);
+    font-family: "微软雅黑";
+  }
+
+  .home_div {
+    background-color: rgb(242, 242, 242);
+  }
+
+  .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: 5px 20px;
+    background-color: white;
+    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 5px 10px 5px;
+    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;
+  }
+
+</style>

src/pages/saletask.vue

@@ -1,6 +1,27 @@
 <template>
   <div class="bill">
-    <saletask-list v-for="(item,index) in dmlist" :key="index"></saletask-list>
+    <div class="topbar_bill">
+      <div class="topbar_bill_left" @click="goback">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_bill_middle">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-sousuo"></use>
+        </svg>
+        搜索
+      </div>
+      <div class="topbar_bill_right">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caidan"></use>
+        </svg>
+      </div>
+    </div>
+
+    <div id="salelist">
+      <saletask-list v-for="(item,index) in dmlist" :key="index"></saletask-list>
+    </div>
   </div>
 </template>
 
@@ -15,6 +36,13 @@
       return {
         dmlist: [1, 2, 3, 4, 5, 6, 7, 8, 9]
       }
+    },
+    methods: {
+      goback() {
+        {
+          history.back();
+        }
+      }
     }
   }
 
@@ -25,7 +53,50 @@
   body {
     margin: 0;
     padding: 0;
-    background-color:#eee;
+    background-color: #eee;
+  }
+
+
+  #salelist {
+    position: absolute;
+    top: 44px;
+    width: 100%
+  }
+
+  .topbar_bill {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+  }
+
+  .topbar_bill_left {
+    flex: 0 0 5%;
+    margin-left: 10px;
+    font-size: 18px;
+  }
+
+  .topbar_bill_middle {
+    /* text-align: center; */
+    flex: 0 0 75%;
+    background-color: rgb(247, 247, 247);
+    margin-left: 10px;
+    padding: 0px 5px 0px 20px;
+    font-size: 14px;
+    line-height: 30px;
+    border-radius: 15px;
+    color: rgb(119, 119, 119)
+  }
+
+  .topbar_bill_right {
+    flex: 0 0 5%;
+    position: absolute;
+    right: 10px;
+    font-size: 18px;
   }
 
 </style>

src/pages/saletaskdetail.vue

@@ -1,214 +1,230 @@
 <template>
   <div id="taskdetail">
-    <div class="toparea_dt" :class="colortop">
-      <div class="taskcode_dt">
-        SC181211001
-        <svg class="icon" aria-hidden="true" v-if="ifnew==1">
-          <use xlink:href="#icon-ziyuan"></use>
+    <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="taskflag_dt">
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-weikaishi" v-if="taskflag_dt=='待审核'"></use>
-          <use xlink:href="#icon-jindu" v-if="taskflag_dt=='在进行'"></use>
-          <use xlink:href="#icon-CombinedShape" v-if="taskflag_dt=='已完成'"></use>
+      <div class="topbar_middle">
+        订单详情
+      </div>
+      <div class="topbar_right">
+        <svg class="icon" aria-hidden="true" >
+          <use xlink:href="#icon-caidan"></use>
         </svg>
-        {{taskflag_dt}}
       </div>
     </div>
-    <div class="taskinfo_dt">
-      <div class="cust_dt">
+    <div id="content">
+      <div class="toparea_dt" :class="colortop">
+        <div class="taskcode_dt">
+          SC181211001
+          <svg class="icon" aria-hidden="true" v-if="ifnew==1">
+            <use xlink:href="#icon-ziyuan"></use>
+          </svg>
+        </div>
+        <div class="taskflag_dt">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-weikaishi" v-if="taskflag_dt=='待审核'"></use>
+            <use xlink:href="#icon-jindu" v-if="taskflag_dt=='在进行'"></use>
+            <use xlink:href="#icon-CombinedShape" v-if="taskflag_dt=='已完成'"></use>
+          </svg>
+          {{taskflag_dt}}
+        </div>
+      </div>
+      <div class="taskinfo_dt">
+        <div class="cust_dt">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-kehu"></use>
+          </svg>
+          广东省佛山市顺德区某某经销商
+        </div>
+      </div>
+      <div class="reptel_dt">
         <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-kehu"></use>
+          <use xlink:href="#icon-address"></use>
         </svg>
-        广东省佛山市顺德区某某经销商
+        <span>王利云</span>
+        <span style="margin-left:10px;">13800138000</span>
       </div>
-    </div>
-    <div class="reptel_dt">
-      <svg class="icon" aria-hidden="true">
-        <use xlink:href="#icon-address_dt"></use>
-      </svg>
-      <span>王利云</span>
-      <span style="margin-left:10px;">13800138000</span>
-    </div>
-    <div class="address_dt">地址：广东省顺德市芙蓉中路二段115号湖南千思湖南千思湖南千思湖南千思湖南千思</div>
+      <div class="address_dt">地址：广东省顺德市芙蓉中路二段115号湖南千思湖南千思湖南千思湖南千思湖南千思</div>
 
-    <div class="liubai_dt"></div>
+      <div class="liubai_dt"></div>
 
-    <div class="middlearea">
-      <div class="taskinfo_dttitle_dt">
-        <div class="title_dt">业务员：</div>
-        <div class="taskinfo_dtitem">张大三</div>
-      </div>
-      <div class='taskinfo_dtflex'>
+      <div class="middlearea">
         <div class="taskinfo_dttitle_dt">
-          <div class="title_dt ">订货日期：</div>
-          <div class="taskinfo_dtitem leftsize">2018-12-10</div>
+          <div class="title_dt">业务员：</div>
+          <div class="taskinfo_dtitem">张大三</div>
         </div>
-        <div class="taskinfo_dttitle_dt">
-          <div class="title_dt rightside">交货日期：</div>
-          <div class="taskinfo_dtitem requiredate">2018-12-30</div>
+        <div class='taskinfo_dtflex'>
+          <div class="taskinfo_dttitle_dt">
+            <div class="title_dt ">订货日期：</div>
+            <div class="taskinfo_dtitem leftsize">2018-12-10</div>
+          </div>
+          <div class="taskinfo_dttitle_dt">
+            <div class="title_dt rightside">交货日期：</div>
+            <div class="taskinfo_dtitem requiredate">2018-12-30</div>
+          </div>
         </div>
-      </div>
-      <div class="taskinfo_dtamt">
-        <div class="taskinfo_dttitle_dt">
-          <div class="title_dt">金额：</div>
-          <div class="taskinfo_dtitem taskamt leftsize">¥100000</div>
+        <div class="taskinfo_dtamt">
+          <div class="taskinfo_dttitle_dt">
+            <div class="title_dt">金额：</div>
+            <div class="taskinfo_dtitem taskamt leftsize">¥100000</div>
+          </div>
+          <div class="taskinfo_dttitle_dt dingjin">
+            <div class="title_dt rightside">订金：</div>
+            <div class="taskinfo_dtitem taskamt">¥30000</div>
+          </div>
         </div>
-        <div class="taskinfo_dttitle_dt dingjin">
-          <div class="title_dt rightside">订金：</div>
-          <div class="taskinfo_dtitem taskamt">¥30000</div>
+        <div class="taskinfo_dtamt">
+          <div class="taskinfo_dttitle_dt">
+            <div class="title_dt">已收金额：</div>
+            <div class="taskinfo_dtitem taskamt leftsize">¥60000</div>
+          </div>
+          <div class="taskinfo_dttitle_dt dingjin">
+            <div class="title_dt rightside">未收金额：</div>
+            <div class="taskinfo_dtitem taskamt">¥40000</div>
+          </div>
         </div>
-      </div>
-      <div class="taskinfo_dtamt">
         <div class="taskinfo_dttitle_dt">
-          <div class="title_dt">已收金额：</div>
-          <div class="taskinfo_dtitem taskamt leftsize">¥60000</div>
+          <div class="title_dt">结算方式：</div>
+          <div class="taskinfo_dtitem">款到发货</div>
         </div>
-        <div class="taskinfo_dttitle_dt dingjin">
-          <div class="title_dt rightside">未收金额：</div>
-          <div class="taskinfo_dtitem taskamt">¥40000</div>
+        <div class="taskinfo_dttitle_dt" style="margin-top:10px; ">
+          <div class="title_dt">货运部：</div>
+          <div class="taskinfo_dtitem">佳杰物流</div>
         </div>
+        <div class="taskinfo_dttitle_dt">
+          <div class="title_dt">货运电话：</div>
+          <div class="taskinfo_dtitem">13928952902</div>
+        </div>
+        <div class="hyaddress_dt">货运部地址：乐从水藤加油站后面陆通物流园A6座12-16仓湖南大本营</div>
       </div>
-      <div class="taskinfo_dttitle_dt">
-        <div class="title_dt">结算方式：</div>
-        <div class="taskinfo_dtitem">款到发货</div>
-      </div>
-      <div class="taskinfo_dttitle_dt" style="margin-top:10px; ">
-        <div class="title_dt">货运部：</div>
-        <div class="taskinfo_dtitem">佳杰物流</div>
-      </div>
-      <div class="taskinfo_dttitle_dt">
-        <div class="title_dt">货运电话：</div>
-        <div class="taskinfo_dtitem">13928952902</div>
-      </div>
-      <div class="hyaddress_dt">货运部地址：乐从水藤加油站后面陆通物流园A6座12-16仓湖南大本营</div>
-    </div>
-
-    <div class="dscrp">
-      <svg class="icon" aria-hidden="true">
-        <use xlink:href="#icon-wentibuchong"></use>
-      </svg>
-      我是备注信息，如果没有，就不显示这一个div了。哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦！
-    </div>
-
-    <div class="liubai_dt"></div>
 
-    <div class="subtitle_dt">订单进度跟踪</div>
-    <div class="jindu">
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzhoutiaowancheng"></use>
-        </svg>
-        审核时间：2018-12-11 09:30
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzhoutiaowancheng"></use>
-        </svg>
-        物料清单审核：2018-12-11 15:32
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzhoutiaowancheng"></use>
-        </svg>
-        主计划建立：2018-12-12 14:29
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzouweijinxing"></use>
-        </svg>
-        物料订购：
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzouweijinxing"></use>
-        </svg>
-        唛头确认：
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-baifenbi"></use>
-        </svg>
-        材料入库比例：33%
-        <span class="jindubtn">欠料情况</span>
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzouweijinxing"></use>
-        </svg>
-        排程审核：
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-baifenbi"></use>
-        </svg>
-        发料通知：90%
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-baifenbi"></use>
-        </svg>
-        发料比例：10%
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-baifenbi"></use>
-        </svg>
-        木工：90%
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-baifenbi"></use>
-        </svg>
-        裁剪：10%
-      </div>
-      <div>
+      <div class="dscrp">
         <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-baifenbi"></use>
+          <use xlink:href="#icon-wentibuchong"></use>
         </svg>
-        入库：2%&nbsp&nbsp(20/1000)
-      </div>
-      <div> <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzouweijinxing"></use>
-        </svg>
-        订船日期：
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzouweijinxing"></use>
-        </svg>
-        装柜日期：
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzouweijinxing"></use>
-        </svg>
-        发货开单日期：
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzouweijinxing"></use>
-        </svg>
-        仓审日期：
-      </div>
-      <div>
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-buzouweijinxing"></use>
-        </svg>
-        财务审核日期：
+        我是备注信息，如果没有，就不显示这一个div了。哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦！
       </div>
 
+      <div class="liubai_dt"></div>
 
-    </div>
+      <div class="subtitle_dt">订单进度跟踪</div>
+      <div class="jindu">
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzhoutiaowancheng"></use>
+          </svg>
+          审核时间：2018-12-11 09:30
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzhoutiaowancheng"></use>
+          </svg>
+          物料清单审核：2018-12-11 15:32
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzhoutiaowancheng"></use>
+          </svg>
+          主计划建立：2018-12-12 14:29
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          物料订购：
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          唛头确认：
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-baifenbi"></use>
+          </svg>
+          材料入库比例：33%
+          <span class="jindubtn">欠料情况</span>
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          排程审核：
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-baifenbi"></use>
+          </svg>
+          发料通知：90%
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-baifenbi"></use>
+          </svg>
+          发料比例：10%
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-baifenbi"></use>
+          </svg>
+          木工：90%
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-baifenbi"></use>
+          </svg>
+          裁剪：10%
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-baifenbi"></use>
+          </svg>
+          入库：2%&nbsp&nbsp(20/1000)
+        </div>
+        <div> <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          订船日期：
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          装柜日期：
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          发货开单日期：
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          仓审日期：
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          财务审核日期：
+        </div>
 
-    <div class="liubai_dt"></div>
-    <div class="subtitle_dt">订单明细</div>
-    <div class="taskmx">
 
+      </div>
+
+      <div class="liubai_dt"></div>
+      <div class="subtitle_dt">订单明细</div>
+      <div class="taskmx">
 
-    </div>
 
+      </div>
+    </div>
   </div>
 </template>
 
@@ -222,6 +238,13 @@
         ifnew: 1
       };
     },
+    methods: {
+      goback() {
+        {
+          history.back();
+        }
+      }
+    },
     computed: {
       colortop: function () {
         return {
@@ -243,8 +266,41 @@
     font-family: "微软雅黑";
   }
 
-  #taskdetail{
-      background-color: #fff;
+  .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 %; */
+    margin-left:10px;
+  }
+
+  .topbar_middle {
+    text-align: center;
+    flex: 0 0 85%;
+  }
+
+  .topbar_right {
+    /* flex: 0 0 10%; */
+    position: absolute;
+    right: 10px;
+  }
+
+  #taskdetail {
+    background-color: #fff;
+  }
+
+  #content {
+    position: absolute;
+    top: 44px;
+    background-color: #fff;
   }
 
   .toparea_dt {

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import SaleTask from '@/pages/saletask'
 import SaleTaskDetail from '@/pages/saletaskdetail'
+import Home from '@/pages/home'
 
 Vue.use(Router)
 
@@ -9,8 +10,8 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'SaleTask',
-      component: SaleTask
+      name: 'Home',
+      component: Home
     },
     {
       path: '/detail',
@@ -19,6 +20,14 @@ export default new Router({
       meta: {
         title: '订单详情'
       }
+    },
+    {
+      path: '/saletask',
+      name: 'SaleTask',
+      component: SaleTask,
+      meta: {
+        title: '订单列表'
+      }
     }
   ]
 })