优化UI.增加【经营日报表】、【我的】、【推送列表】等新界面

src/assets/iconfont/demo.css

@@ -1,105 +1,151 @@
-*{margin: 0;padding: 0;list-style: none;}
-/*
-KISSY CSS Reset
-理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
-2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
-3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
-特色：1. 适应中文；2. 基于最新主流浏览器。
-维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
- */
-
-/** 清除内外边距 **/
-body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
-dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
-pre, /* text formatting elements 文本格式元素 */
-form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
-th, td /* table elements 表格元素 */ {
-  margin: 0;
-  padding: 0;
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
 }
 
-/** 设置默认字体 **/
-body,
-button, input, select, textarea /* for ie */ {
-  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+#tabs {
+  border-bottom: 1px solid #eee;
 }
-h1, h2, h3, h4, h5, h6 { font-size: 100%; }
-address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
-code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
-small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
-
-/** 重置列表元素 **/
-ul, ol { list-style: none; }
 
-/** 重置文本格式元素 **/
-a { text-decoration: none; }
-a:hover { text-decoration: underline; }
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
 
 
-/** 重置表单元素 **/
-legend { color: #000; } /* for ie6 */
-fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
-button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
-/* 注：optgroup 无法扶正 */
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
 
-/** 重置表格元素 **/
-table { border-collapse: collapse; border-spacing: 0; }
+.tab-container .content {
+  display: none;
+}
 
-/* 清除浮动 */
-.ks-clear:after, .clear:after {
-  content: '\20';
-  display: block;
-  height: 0;
-  clear: both;
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
 }
-.ks-clear, .clear {
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
   *zoom: 1;
 }
 
-.main {
-  padding: 30px 100px;
-width: 960px;
-margin: 0 auto;
+.main .logo a {
+  font-size: 160px;
+  color: #333;
 }
-.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
 
-.helps{margin-top:40px;}
-.helps pre{
-  padding:20px;
-  margin:10px 0;
-  border:solid 1px #e7e1cd;
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
   background-color: #fffdef;
   overflow: auto;
 }
 
-.icon_lists{
+.icon_lists {
   width: 100% !important;
-
+  overflow: hidden;
+  *zoom: 1;
 }
 
-.icon_lists li{
-  float:left;
+.icon_lists li {
   width: 100px;
-  height:180px;
+  margin-bottom: 10px;
+  margin-right: 20px;
   text-align: center;
   list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
 }
-.icon_lists .icon{
-  font-size: 42px;
-  line-height: 100px;
-  margin: 10px 0;
-  color:#333;
-  -webkit-transition: font-size 0.25s ease-out 0s;
-  -moz-transition: font-size 0.25s ease-out 0s;
-  transition: font-size 0.25s ease-out 0s;
 
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
 }
-.icon_lists .icon:hover{
+
+.icon_lists .icon:hover {
   font-size: 100px;
 }
 
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
 
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
 
+/* markdown 样式 */
 .markdown {
   color: #666;
   font-size: 14px;
@@ -165,40 +211,39 @@ margin: 0 auto;
   clear: both;
 }
 
-.markdown p,
-.markdown pre {
+.markdown p {
   margin: 1em 0;
 }
 
-.markdown > p,
-.markdown > blockquote,
-.markdown > .highlight,
-.markdown > ol,
-.markdown > ul {
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
   width: 80%;
 }
 
-.markdown ul > li {
+.markdown ul>li {
   list-style: circle;
 }
 
-.markdown > ul li,
-.markdown blockquote ul > li {
+.markdown>ul li,
+.markdown blockquote ul>li {
   margin-left: 20px;
   padding-left: 4px;
 }
 
-.markdown > ul li p,
-.markdown > ol li p {
+.markdown>ul li p,
+.markdown>ol li p {
   margin: 0.6em 0;
 }
 
-.markdown ol > li {
+.markdown ol>li {
   list-style: decimal;
 }
 
-.markdown > ol li,
-.markdown blockquote ol > li {
+.markdown>ol li,
+.markdown blockquote ol>li {
   margin-left: 20px;
   padding-left: 4px;
 }
@@ -210,24 +255,12 @@ margin: 0 auto;
   border-radius: 3px;
 }
 
-.markdown pre {
-  border-radius: 6px;
-  background: #f7f7f7;
-  padding: 20px;
-}
-
-.markdown pre code {
-  border: none;
-  background: #f7f7f7;
-  margin: 0;
-}
-
 .markdown strong,
 .markdown b {
   font-weight: 600;
 }
 
-.markdown > table {
+.markdown>table {
   border-collapse: collapse;
   border-spacing: 0px;
   empty-cells: show;
@@ -236,21 +269,20 @@ margin: 0 auto;
   margin-bottom: 24px;
 }
 
-.markdown > table th {
+.markdown>table th {
   white-space: nowrap;
   color: #333;
   font-weight: 600;
-
 }
 
-.markdown > table th,
-.markdown > table td {
+.markdown>table th,
+.markdown>table td {
   border: 1px solid #e9e9e9;
   padding: 8px 16px;
   text-align: left;
 }
 
-.markdown > table th {
+.markdown>table th {
   background: #F7F7F7;
 }
 
@@ -260,7 +292,6 @@ margin: 0 auto;
   border-left: 4px solid #e9e9e9;
   padding-left: 0.8em;
   margin: 1em 0;
-  font-style: italic;
 }
 
 .markdown blockquote p {
@@ -287,8 +318,8 @@ margin: 0 auto;
   display: inline-block;
 }
 
-.markdown > br,
-.markdown > p > br {
+.markdown>br,
+.markdown>p>br {
   clear: both;
 }
 
@@ -360,11 +391,149 @@ margin: 0 auto;
   text-decoration: underline;
 }
 
-pre{
-  background: #fff;
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
 }
 
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
 
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
 
+@media print {
 
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
 
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/pages/about.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="about_topbar">
+      <div class="about_topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="about_topbar_middle">
+        关于
+      </div>
+      <div class="about_topbar_right">
+
+      </div>
+    </div>
+
+    <div class="about_wrap">
+      <div class="about_logo">
+        <img src="../assets/longjia.png" class="about-img-responsive "></img>
+      </div>
+      <div class="about_content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龙嘉软件有限公司成立于2003年，总部位于有“中囯家具制造重镇”、“中囯家具材料之都”及“中囯家具电商之都”称号的广东省佛山市顺德区龙江镇，下设立成都分公司。</div>
+      <div class="about_content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龙嘉软件以软件技术服务企业管理为原则，专业服务于各类家具、五金等制造企业，提供实用的管理软件及信息化咨询服务，通过应用信息技术推动制造企业的高速供应链、智能生产制造、客户关系、电子商务、智能办公、绩效考核等管理升级。</div>
+      <div class="about_liubai"></div>
+      <div class="about_lianxi">
+        <div class="about_lianxi_title">联系方式</div>
+        <div class="about_lianxi_dept">总部</div>
+        <div>地址：佛山市顺德区龙江镇西溪工业区雄塑科技大厦二楼</div>
+        <div>电话：0757-23873986；23393986</div>
+        <div class="about_lianxi_dept">成都分公司</div>
+        <div>地址：成都市新都区龙桥镇</div>
+        <div>联系人：唐先生</div>
+        <div>电话：15528192207</div>
+        <div class="about_lianxi_dept">广州番禺办事处</div>
+        <div>地址：广州番禺奥园广场1号塔1108室 </div>
+        <div>联系人：朱先生</div>
+        <div>电话：13925944065</div>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+  export default {
+    name: "about"
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .about_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;
+  }
+
+  .about_topbar_left {
+    /* flex: 0 0 %; */
+    margin-left: 10px;
+  }
+
+  .about_topbar_middle {
+    text-align: center;
+    flex: 0 0 85%;
+  }
+
+  .about_topbar_right {
+    /* flex: 0 0 10%; */
+    position: absolute;
+    right: 10px;
+  }
+
+  .about_wrap {
+    padding: 50px 0
+  }
+
+  .about_logo {
+    text-align: center;
+    margin: 10px
+  }
+
+  .about-img-responsive {
+    display: inline-block;
+    height: auto;
+    max-width: 60%;
+  }
+
+  .about_liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 15px 0;
+  }
+
+  .about_content {
+    font-size: 16px;
+    color: #636363;
+    padding: 10px 20px;
+  }
+
+  .about_lianxi{
+    font-size: 16px;
+    color: #636363;
+    padding:10px 20px
+  }
+
+  .about_lianxi_title{
+    color:  #f5772f;
+    padding:0 0 10px 0;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .about_lianxi_dept{
+    font-size: 17px;
+    font-weight: bold;
+    padding: 10px 0 0 0 ;
+  }
+
+</style>

src/pages/components/saletasklist.vue

@@ -117,6 +117,10 @@
     /* width:100% */
   }
 
+  .taskinfo{
+    margin:0 10px;
+  }
+
   .taskinfoflex {
     display: flex;
     /* height: 60px; */

src/pages/daily.vue

@@ -0,0 +1,573 @@
+<template>
+  <div class="daily">
+    <div class="reportcom-header-wap">
+      <div class="reportcom-header">
+        <div class='reportcom-logo'>
+          <img src="../assets/longjoe.png" class="reportcom-img-responsive"></img>
+        </div>
+        <div class="reportcom-header-title">2019.02.27 经营日报表</div>
+      </div>
+    </div>
+    <!-- 订货 -->
+    <div class="daily-sale">
+      <div class="daily-sale-title">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xiaoshoudingdan"></use>
+        </svg>
+        订货
+      </div>
+      <div class="daily-sale-amt">今日订单金额：<span class="daily-sale-amt-value">1,200,000元</span></div>
+      <!-- 客户订货 -->
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          客户订货Top5
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(cusitem,index) in custlist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{cusitem.cusname}}</div>
+            <div class="daily-sale-cust-amt">{{cusitem.amt}}元</div>
+          </div>
+        </div>
+      </div>
+
+
+      <!-- 产品订货 -->
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          产品订货Top5
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in mtrllist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{mtrlitem.mtrlname}}</div>
+            <div class="daily-sale-cust-name-pz">{{mtrlitem.pz}}</div>
+            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="daily_liubai"></div>
+    <!-- 发货 -->
+    <div class="daily-sale">
+      <div class="daily-sale-title">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xiaoshoudingdan"></use>
+        </svg>
+        发货
+      </div>
+      <div class="daily-sale-amt">今日发货金额：<span class="daily-sale-amt-value">1,000,000元</span></div>
+      <!-- 客户发货 -->
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          客户发货Top5
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(cusitem,index) in custlist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{cusitem.cusname}}</div>
+            <div class="daily-sale-cust-amt">{{cusitem.amt}}元</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 产品发货 -->
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          产品发货Top5
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in mtrllist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{mtrlitem.mtrlname}}</div>
+            <div class="daily-sale-cust-name-pz">{{mtrlitem.pz}}</div>
+            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="daily_liubai"></div>
+
+    <!-- 库存 -->
+    <div>
+      <div class="daily-sale-title">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-kucun"></use>
+        </svg>
+        库存
+      </div>
+      <div class="daily-sale-amt">今日成品进仓金额：<span class="daily-sale-amt-value">1,000,000元</span></div>
+      <div class="daily-sale-amt">今日材料耗用金额：<span class="daily-sale-amt-value">420,000元</span></div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          成品进仓Top5
+        </div>
+        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in mtrllist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{mtrlitem.mtrlname}}</div>
+            <div class="daily-sale-cust-name-pz">{{mtrlitem.pz}}</div>
+            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          材料耗用Top5
+        </div>
+        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in cailiaolist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{mtrlitem.mtrlname}}</div>
+            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <div class="daily_liubai"></div>
+    <!-- 收支 -->
+    <div class="daily-money">
+      <div class="daily-sale-title">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caiwuguanli"></use>
+        </svg>
+        收支
+      </div>
+      <div class="daily-sale-amt">今日收入：<span class="daily-sale-amt-value">1,000,000元</span></div>
+      <div class="daily-sale-amt">今日支出：<span class="daily-sale-amt-value">300,000元</span></div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          帐户收支情况
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(accitem,index) in acclist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{accitem.accname}}</div>
+            <div class="daily-sale-cust-amt"><span class="daily-money-account-in">收：{{accitem.inamt}}元</span><span
+                class="daily-money-account-out">支：{{accitem.outamt}}元</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          项目收入情况
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(accitem,index) in accinlist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{accitem.itemname}}</div>
+            <div class="daily-sale-cust-amt">{{accitem.amt}}元</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          项目支出情况
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(accitem,index) in accoutlist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{accitem.itemname}}</div>
+            <div class="daily-sale-cust-amt">{{accitem.amt}}元</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'daily',
+    data() {
+      return {
+        custlist: [{
+          cusname: "某某区某某家具商城",
+          amt: "600,000",
+        }, {
+          cusname: "顺德区张三经销商",
+          amt: "300,000",
+        }, {
+          cusname: "红某美某龙某卖场",
+          amt: "100,000",
+        }, {
+          cusname: "上海某某经销商",
+          amt: "50,000",
+        }, {
+          cusname: "北京某某经销商",
+          amt: "49,000",
+        }],
+        mtrllist: [{
+          mtrlname: "T189头层牛皮沙发",
+          pz: "1+2+3",
+          amt: "400,000",
+          qty: "20套"
+        }, {
+          mtrlname: "F889大班椅",
+          pz: "扶手:#88|背:#998|座:#098|底盘:电镀",
+          amt: "200,000",
+          qty: "200张"
+        }, {
+          mtrlname: "C870大理石茶几",
+          pz: "面料颜色:米黄",
+          amt: "100,000",
+          qty: "60张"
+        }, {
+          mtrlname: "G798餐柜",
+          pz: "规格:1800*1500*1500|颜色:原色|板面:光面|板材:E0级板材|",
+          amt: "50,000",
+          qty: "80个"
+        }, {
+          mtrlname: "O998仿皮沙发",
+          pz: "左+贵妃",
+          amt: "40,000",
+          qty: "20张"
+        }],
+        acclist: [{
+          accname: "工商银行",
+          inamt: "400,000",
+          outamt: "150,000"
+        }, {
+          accname: "建设银行",
+          inamt: "300,000",
+          outamt: "50,000"
+        }, {
+          accname: "农业银行",
+          inamt: "200,000",
+          outamt: "60,000"
+        }, {
+          accname: "顺德农商银行",
+          inamt: "100,000",
+          outamt: "40,000"
+        }],
+        accinlist: [{
+          itemname: "营业收入",
+          amt: "900,000"
+        }, {
+          itemname: "退税",
+          amt: "100,000"
+        }],
+        accoutlist: [{
+          itemname: "材料采购",
+          amt: "200,000"
+        }, {
+          itemname: "销售返利",
+          amt: "50,000"
+        }, {
+          itemname: "广告宣传",
+          amt: "30,000"
+        }, {
+          itemname: "软件费",
+          amt: "20,000"
+        }],
+        cailiaolist: [{
+            mtrlname: "中纤板",
+            amt: "100,000",
+            qty: "2,000块"
+          }, {
+            mtrlname: "夹板",
+            amt: "80,000",
+            qty: "1,800块"
+          }, {
+            mtrlname: "小牛皮",
+            amt: "70,000",
+            qty: "300平方"
+          }, {
+            mtrlname: "介棉布",
+            amt: "40,000",
+            qty: "600平方"
+          },
+          {
+            mtrlname: "喷棉",
+            amt: "8,000",
+            qty: "100Kg"
+          }
+        ]
+      }
+    }
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .reportcom-header-wap {
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .reportcom-header {
+    width: 120%;
+    height: 90px;
+    background-color: rgb(253, 145, 83);
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 50%;
+    border-bottom-left-radius: 50%;
+    position: relative;
+    left: -10%;
+    padding: 10px 0;
+    margin-bottom: 10px;
+  }
+
+  .reportcom-logo {
+    width: 60%;
+    position: relative;
+    left: 10%;
+  }
+
+  .reportcom-img-responsive {
+    display: inline-block;
+    height: auto;
+    max-width: 60%;
+  }
+
+  .reportcom-header-title {
+    position: relative;
+    left: 10%;
+    color: #ffffff;
+    font-size: 25px;
+    font-weight: bold;
+    /* margin: 10px 0; */
+  }
+
+  /* .daily-header {
+    width: 100%;
+    height: 150px;
+    background: linear-gradient(rgba(253, 145, 83, 1), rgba(253, 145, 83, 0))
+  }
+
+  .daily-header-logo-warp {
+    border-top: 5px solid #fd9153;
+  }
+
+  .daily-header-logo {
+    padding: 2px 5px;
+    background-color: #fd9153;
+  }
+
+  .daily-img-responsive {
+    display: inline-block;
+    height: auto;
+    max-width: 50%;
+  } */
+
+  /* .daily-header-title {
+    font-size: 25px;
+    font-weight: bold;
+    color: #000;
+    padding: 0 20px;
+    text-shadow: 1px 1px 3px #FFFFFF, -1px -1px 3px #FFFFFF, 2px 2px 5px #FFFFFF, -2px -2px 5px #FFFFFF
+  }
+
+  .daily-header-date {
+    font-size: 25px;
+    font-weight: bold;
+    color: #000;
+    padding: 0 20px;
+    text-shadow: 1px 1px 3px #FFFFFF, -1px -1px 3px #FFFFFF, 2px 2px 5px #FFFFFF, -2px -2px 5px #FFFFFF
+  } */
+
+  .daily-sale-title {
+    font-size: 30px;
+    font-weight: bold;
+    margin: 0 20px;
+  }
+
+  .daily-sale-amt {
+    margin-left: 30px;
+    font-size: 15px;
+  }
+
+  .daily-sale-amt-value {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fd7526
+  }
+
+  .daily-sale-cust {
+    margin: 20px 20px;
+    font-size: 18px;
+    font-weight: bold;
+
+  }
+
+  .daily-sale-cust-list {
+    display: flex;
+    padding: 10px 0 0 0;
+  }
+
+  .daily-sale-cust-title {
+    font-weight: bold;
+    color: #606060;
+  }
+
+  .daily-sale-cust-index {
+    flex: 0 0 10%;
+    text-align: center;
+  }
+
+  .daily-sale-cust-name {
+    flex: 0 0 80%;
+  }
+
+  .daily-sale-cust-name-pz {
+    font-size: 15px;
+    color: #606060;
+  }
+
+  .daily-sale-cust-amt {
+    flex: 0 0 30%;
+    /* text-align: center; */
+    color: #f5772f;
+  }
+
+  .daily-money-account-in {
+    color: #ff2f2f
+  }
+
+  .daily-money-account-out {
+    color: #31b831;
+    margin-left: 20px;
+  }
+
+  .daily_liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 20px 0;
+  }
+
+</style>

src/pages/daily_bak_0227.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="daily">
+    <div class="daily-header-logo-warp">
+      <div class="daily-header-logo">
+        <img src="../assets/longjoe.png" class="daily-img-responsive "></img>
+      </div>
+    </div>
+
+    <div class="daily-header">
+      <div class="daily-header-title">经营日报表</div>
+      <div class="daily-header-date">2019年2月25日</div>
+    </div>
+
+    <div class="daily-sale">
+      <div class="daily-sale-title">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xiaoshoudingdan"></use>
+        </svg>
+        销售
+      </div>
+      <div class="daily-sale-amt">今日订单金额：<span class="daily-sale-amt-value">1,200,000元</span></div>
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          客户Top5
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(cusitem,index) in custlist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{cusitem.cusname}}</div>
+            <div class="daily-sale-cust-amt">{{cusitem.amt}}元</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          产品Top5
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(mtrlitem,index) in mtrllist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{mtrlitem.mtrlname}}</div>
+            <div class="daily-sale-cust-amt">{{mtrlitem.amt}}元，{{mtrlitem.qty}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="daily-sale-saler"></div>
+    </div>
+
+    <div class="daily_liubai"></div>
+
+    <div class="daily-money">
+      <div class="daily-sale-title">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caiwuguanli"></use>
+        </svg>
+        收支
+      </div>
+      <div class="daily-sale-amt">今日收入：<span class="daily-sale-amt-value">1,000,000元</span></div>
+      <div class="daily-sale-amt">今日支出：<span class="daily-sale-amt-value">300,000元</span></div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          帐户收支情况
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(accitem,index) in acclist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{accitem.accname}}</div>
+            <div class="daily-sale-cust-amt"><span class="daily-money-account-in">收：{{accitem.inamt}}元</span><span
+                class="daily-money-account-out">支：{{accitem.outamt}}元</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          项目收入情况
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(accitem,index) in accinlist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{accitem.itemname}}</div>
+            <div class="daily-sale-cust-amt">{{accitem.amt}}元</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="daily-sale-cust">
+        <div class="daily-sale-cust-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-paixingbang"></use>
+          </svg>
+          项目支出情况
+        </div>
+
+        <div class="daily-sale-cust-list" v-for="(accitem,index) in accoutlist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+            <div>{{accitem.itemname}}</div>
+            <div class="daily-sale-cust-amt">{{accitem.amt}}元</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="daily_liubai"></div>
+
+    <div>
+      <div class="daily-sale-title">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caigou"></use>
+        </svg>
+        采购
+      </div>
+
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'daily',
+    data() {
+      return {
+        custlist: [{
+          cusname: "某某区某某家具商城",
+          amt: "600,000",
+        }, {
+          cusname: "顺德区张三经销商",
+          amt: "300,000",
+        }, {
+          cusname: "红某美某龙某卖场",
+          amt: "100,000",
+        }, {
+          cusname: "上海某某经销商",
+          amt: "50,000",
+        }, {
+          cusname: "北京某某经销商",
+          amt: "49,000",
+        }],
+        mtrllist: [{
+          mtrlname: "T189头层牛皮沙发",
+          amt: "400,000",
+          qty: "20套"
+        }, {
+          mtrlname: "F889大班椅",
+          amt: "200,000",
+          qty: "200张"
+        }, {
+          mtrlname: "C870大理石茶几",
+          amt: "100,000",
+          qty: "60张"
+        }, {
+          mtrlname: "G798餐柜",
+          amt: "50,000",
+          qty: "80个"
+        }, {
+          mtrlname: "O998仿皮沙发",
+          amt: "40,000",
+          qty: "20张"
+        }],
+        acclist: [{
+          accname: "工商银行",
+          inamt: "400,000",
+          outamt: "150,000"
+        }, {
+          accname: "建设银行",
+          inamt: "300,000",
+          outamt: "50,000"
+        }, {
+          accname: "农业银行",
+          inamt: "200,000",
+          outamt: "60,000"
+        }, {
+          accname: "顺德农商银行",
+          inamt: "100,000",
+          outamt: "40,000"
+        }],
+        accinlist: [{
+          itemname: "营业收入",
+          amt: "900,000"
+        }, {
+          itemname: "退税",
+          amt: "100,000"
+        }],
+        accoutlist: [{
+          itemname: "材料采购",
+          amt: "200,000"
+        }, {
+          itemname: "销售返利",
+          amt: "50,000"
+        }, {
+          itemname: "广告宣传",
+          amt: "30,000"
+        }, {
+          itemname: "软件费",
+          amt: "20,000"
+        }]
+      }
+    }
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .daily-header {
+    width: 100%;
+    height: 150px;
+    background: linear-gradient(rgba(253, 145, 83, 1), rgba(253, 145, 83, 0))
+  }
+
+  .daily-header-logo-warp {
+    background-color: #fd9153;
+  }
+
+  .daily-header-logo {
+    padding: 10px 0 0 20px;
+  }
+
+  .daily-img-responsive {
+    display: inline-block;
+    height: auto;
+    max-width: 50%;
+  }
+
+  .daily-header-title {
+    font-size: 25px;
+    font-weight: bold;
+    color: #000;
+    padding: 0 20px;
+    text-shadow: 1px 1px 3px #FFFFFF, -1px -1px 3px #FFFFFF, 2px 2px 5px #FFFFFF, -2px -2px 5px #FFFFFF
+  }
+
+  .daily-header-date {
+    font-size: 25px;
+    font-weight: bold;
+    color: #000;
+    padding: 0 20px;
+    text-shadow: 1px 1px 3px #FFFFFF, -1px -1px 3px #FFFFFF, 2px 2px 5px #FFFFFF, -2px -2px 5px #FFFFFF
+  }
+
+  .daily-sale-title {
+    font-size: 30px;
+    font-weight: bold;
+    margin: 0 20px;
+  }
+
+  .daily-sale-amt {
+    margin-left: 30px;
+    font-size: 15px;
+  }
+
+  .daily-sale-amt-value {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fd7526
+  }
+
+  .daily-sale-cust {
+    margin: 20px 20px;
+    font-size: 18px;
+    font-weight: bold;
+    /* color: #606060; */
+  }
+
+  .daily-sale-cust-list {
+    display: flex
+  }
+
+  .daily-sale-cust-index {
+    flex: 0 0 10%;
+    text-align: center;
+  }
+
+  .daily-sale-cust-name {
+    flex: 0 0 80%;
+  }
+
+  .daily-sale-cust-amt {
+    flex: 0 0 30%;
+    /* text-align: center; */
+    color: #f5772f;
+  }
+
+  .daily-money-account-in {
+    color: #ff2f2f
+  }
+
+  .daily-money-account-out {
+    color: #31b831;
+    margin-left: 20px;
+  }
+
+  .daily_liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 20px 0;
+  }
+
+</style>

src/pages/home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home_div">
-    <!-- <div class="home_title">
+    <div class="home_title">
       <div class="home_title_search">
         <svg class="icon" aria-hidden="true">
           <use xlink:href="#icon-sousuo"></use>
@@ -12,11 +12,11 @@
           <use xlink:href="#icon-shezhi"></use>
         </svg>
       </div>
-    </div> -->
+    </div>
     <div class="home_maininfo">
 
 
-      <!-- <div class="home_icon_area">
+       <div class="home_icon_area">
 
         <div class="home_icon_area_mx" @click="gotosaletask">
           <svg class="icon home_icon_area_use" aria-hidden="true">
@@ -35,9 +35,9 @@
 
         <div class="home_icon_area_mx">
           <svg class="icon home_icon_area_use" aria-hidden="true">
-            <use xlink:href="#icon-gongwenbao"></use>
+            <use xlink:href="#icon-kucun"></use>
           </svg>
-          <div class="home_icon_text">公文审批</div>
+          <div class="home_icon_text">库存查询</div>
         </div>
 
         <div class="home_icon_area_mx">
@@ -54,12 +54,12 @@
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-xiaoxi"></use>
           </svg>
-          有12张销售订单待您审批，请查看。</div>
-      </div> -->
+          2月25日公司经营日报已出炉，欢迎查看！</div>
+      </div> 
 
       <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>
@@ -70,7 +70,7 @@
             <img src="../assets/chanxiaotu.jpg" class="img-chanxiao"></img>
             <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">
@@ -136,7 +136,7 @@
 
             </div>
 
-            <div class="home_widget_cw_flex bottomline">
+            <!-- <div class="home_widget_cw_flex bottomline">
 
               <div class="home_widget_cw_left">
                 <div class="home_widget_cw_left_title">车间在途总额(万元)</div>
@@ -147,7 +147,7 @@
                 <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">112.54</span>(万元)</div>
               </div>
 
-            </div>
+            </div> -->
 
             <div class="home_widget_cw_flex bottomline">
 
@@ -312,7 +312,7 @@
   .home_widget_mx {
     /* height: 420px; */
     background-color: white;
-    margin: 8px 5px 10px 5px;
+    margin: 8px 10px 15px 10px;
     box-shadow: 1px 2px 10px #ccc;
     border-radius: 10px;
     overflow: hidden;

src/pages/pushlist.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <div class="pushlist_topbar">
+      <div class="pushlist_topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="pushlist_topbar_middle">
+        推送资讯
+      </div>
+      <div class="pushlist_topbar_right">
+
+      </div>
+    </div>
+
+    <div class="pushlist_list_wrap">
+      <div class="pushlist_list" v-for="(pushitem,index) in pushlist" :key="index">
+        <div class="pushlist_list_top">
+          <div class="pushlist_list_top_type">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-shujukanban"  v-if="pushitem.type == '报告'"></use>
+              <use xlink:href="#icon-icon-test"  v-if="pushitem.type == '单据'"></use>
+            </svg>
+            {{pushitem.type}}
+          </div>
+          <div class="pushlist_list_top_time">{{pushitem.time}}</div>
+        </div>
+        <div class="pushlist_list_content">
+          {{pushitem.content}}
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+<script>
+  export default {
+    name: "pushlist",
+    data() {
+      return {
+        pushlist: [{
+            type: "报告",
+            time: "2019-02-25 18:30",
+            content: "2月25日公司经营日报已出炉，欢迎查看！"
+          },
+          {
+            type: "单据",
+            time: "2019-02-25 16:30",
+            content: "客户【张三经销商】销售订单SC190214001已完成发货！"
+          },
+          {
+            type: "单据",
+            time: "2019-02-25 16:20",
+            content: "收到客户【张三经销商】一笔销售订金款项：20,000元！"
+          },
+          {
+            type: "报告",
+            time: "2019-02-24 18:30",
+            content: "2月24日公司经营日报已出炉，欢迎查看！"
+          },
+          {
+            type: "单据",
+            time: "2019-02-24 11:30",
+            content: "客户【李四经销商】销售订单SC190213009已完成发货！"
+          },
+          {
+            type: "报告",
+            time: "2019-02-23 18:30",
+            content: "2月23日公司经营日报已出炉，欢迎查看！"
+          },
+          {
+            type: "报告",
+            time: "2019-02-22 18:30",
+            content: "2月22日公司经营日报已出炉，欢迎查看！"
+          },
+          {
+            type: "报告",
+            time: "2019-02-21 18:30",
+            content: "2月21日公司经营日报已出炉，欢迎查看！"
+          },
+          {
+            type: "报告",
+            time: "2019-02-20 18:30",
+            content: "2月20日公司经营日报已出炉，欢迎查看！"
+          },
+          {
+            type: "报告",
+            time: "2019-02-19 18:30",
+            content: "2月19日公司经营日报已出炉，欢迎查看！"
+          },
+          {
+            type: "报告",
+            time: "2019-02-18 18:30",
+            content: "2月18日公司经营日报已出炉，欢迎查看！"
+          }
+        ]
+
+      }
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .pushlist_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;
+  }
+
+  .pushlist_topbar_left {
+    /* flex: 0 0 %; */
+    margin-left: 10px;
+  }
+
+  .pushlist_topbar_middle {
+    text-align: center;
+    flex: 0 0 85%;
+  }
+
+  .pushlist_topbar_right {
+    /* flex: 0 0 10%; */
+    position: absolute;
+    right: 10px;
+  }
+
+  .pushlist_list_wrap {
+    padding: 50px 0
+  }
+
+  .pushlist_list {
+    margin: 10px 20px;
+    padding: 0 0 15px 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .pushlist_list_top {
+    display: flex;
+    align-items: center;
+  }
+
+  .pushlist_list_top_type {
+    color: #0275c2;
+    font-size: 16px;
+  }
+
+  .pushlist_list_top_time {
+    font-size: 13px;
+    color: #838383;
+    position: absolute;
+    right: 20px
+  }
+
+  .pushlist_list_content {
+    padding-top: 10px;
+    font-size: 16px;
+  }
+
+</style>

src/pages/saletaskdetail.vue

@@ -132,7 +132,7 @@
           </svg>
           审核时间：2018-12-11 09:30
         </div>
-        <div>
+        <!-- <div>
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-buzhoutiaowancheng"></use>
           </svg>
@@ -197,7 +197,7 @@
             <use xlink:href="#icon-buzouweijinxing"></use>
           </svg>
           装柜日期：
-        </div>
+        </div> -->
         <div>
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-buzouweijinxing"></use>
@@ -210,9 +210,9 @@
           </svg>
           发货完成日期：
         </div>
-        <div>
+        <!-- <div>
           *要求完成日期：
-        </div>
+        </div> -->
 
 
       </div>
@@ -262,7 +262,7 @@
     name: 'saletaskDetail',
     data() {
       return {
-        taskflag_dt: '已完成',
+        taskflag_dt: '在进行',
         ifnew: 1
       };
     },
@@ -355,7 +355,7 @@
   .taskcode_dt {
     font-size: 22px;
     font-weight: bold;
-    padding: 10px;
+    padding: 10px 0 10px 20px;
     line-height: 30px;
   }
 

src/pages/setting.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="setting">
+    <div class="setting_userinfo">
+      <div class="setting_userinfo_avatar">耀</div>
+      <div class="setting_userinfo_name">
+        <div class="setting_userinfo_name_name">邓永耀</div>
+        <div class="setting_userinfo_name_id">longjoedyy</div>
+      </div>
+    </div>
+
+    <div class="setting_liubai"></div>
+
+    <div class="setting_list">
+      <div class="setting_list_item setting_list_item_border">
+        <div class="setting_list_item_icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-huaban"></use>
+          </svg>
+        </div>
+        <div class="setting_list_item_name">推送资讯</div>
+        <div class="setting_list_item_right">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-iconfontjiantou2"></use>
+          </svg>
+        </div>
+      </div>
+
+      <div class="setting_list_item setting_list_item_border">
+        <div class="setting_list_item_icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-xiugaimima"></use>
+          </svg>
+        </div>
+        <div class="setting_list_item_name">修改密码</div>
+        <div class="setting_list_item_right">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-iconfontjiantou2"></use>
+          </svg>
+
+        </div>
+      </div>
+
+      <div class="setting_list_item">
+        <div class="setting_list_item_icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-guanyuwomen"></use>
+          </svg>
+        </div>
+        <div class="setting_list_item_name">关于</div>
+        <div class="setting_list_item_right">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-iconfontjiantou2"></use>
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="setting_liubai"></div>
+    <div class="setting_relogin">退出当前帐号</div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'setting',
+    data() {
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: rgb(246, 246, 246);
+    font-family: "微软雅黑";
+  }
+
+  .setting_userinfo {
+    background-color: #ffffff;
+    display: flex;
+    padding: 20px
+  }
+
+  .setting_userinfo_avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 70px;
+    background-color: #ccc;
+    font-size: 35px;
+    font-weight: bold;
+    color: #fff;
+    margin-left: 10px;
+    overflow: hidden;
+  }
+
+  .setting_userinfo_name {
+    padding: 5px 20px;
+  }
+
+  .setting_userinfo_name_name {
+    font-size: 22px;
+    font-weight: bold
+  }
+
+  .setting_userinfo_name_id {
+    color: #838383;
+    font-size: 18px;
+  }
+
+  .setting_list {
+    background-color: #ffffff;
+    padding: 0 20px;
+  }
+
+  .setting_list_item {
+    display: flex;
+    color: #606060;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 60px;
+  }
+
+  .setting_list_item_border {
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .setting_list_item_name {
+    margin-left: 15px;
+  }
+
+  .setting_list_item_right {
+    color: #9b9b9b;
+    font-size: 15px;
+    position: absolute;
+    right: 20px;
+  }
+
+  .setting_liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+  }
+
+  .setting_relogin {
+    background-color: #ffffff;
+    font-size: 18px;
+    font-weight: bold;
+    color: #e14123;
+    padding: 18px;
+    text-align: center
+  }
+
+</style>

src/router/index.js

@@ -3,6 +3,10 @@ import Router from 'vue-router'
 import SaleTask from '@/pages/saletask'
 import SaleTaskDetail from '@/pages/saletaskdetail'
 import Home from '@/pages/home'
+import Setting from '@/pages/setting'
+import Daily from '@/pages/daily'
+import Pushlist from '@/pages/pushlist'
+import About from '@/pages/about'
 
 Vue.use(Router)
 
@@ -28,6 +32,38 @@ export default new Router({
       meta: {
         title: '订单列表'
       }
+    },
+    {
+      path: '/setting',
+      name: 'Setting',
+      component: Setting,
+      meta: {
+        title: '我'
+      }
+    },
+    {
+      path: '/daily',
+      name: 'Daily',
+      component: Daily,
+      meta: {
+        title: '经营日报表'
+      }
+    },
+    {
+      path: '/pushlist',
+      name: 'Pushlist',
+      component: Pushlist,
+      meta: {
+        title: '推送资讯'
+      }
+    },
+    {
+      path: '/about',
+      name: 'About',
+      component: About,
+      meta: {
+        title: '关于'
+      }
     }
   ]
 })