更新供应商协同APP界面

src/assets/iconfont/demo_index.html

@@ -96,6 +96,12 @@
                 <div class="code-name">&amp;#xe6c0;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe745;</span>
+                <div class="name">二维码</div>
+                <div class="code-name">&amp;#xe745;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe604;</span>
                 <div class="name">公文管理</div>
@@ -174,6 +180,12 @@
                 <div class="code-name">&amp;#xe613;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">交货日期设置</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe600;</span>
                 <div class="name">查看</div>
@@ -222,6 +234,12 @@
                 <div class="code-name">&amp;#xeb96;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">同意</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xec1e;</span>
                 <div class="name">点</div>
@@ -240,6 +258,18 @@
                 <div class="code-name">&amp;#xe620;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe656;</span>
+                <div class="name">订单号</div>
+                <div class="code-name">&amp;#xe656;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe672;</span>
+                <div class="name">关闭</div>
+                <div class="code-name">&amp;#xe672;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe682;</span>
                 <div class="name">最新</div>
@@ -437,6 +467,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-erweima"></span>
+            <div class="name">
+              二维码
+            </div>
+            <div class="code-name">.icon-erweima
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-icon-test"></span>
             <div class="name">
@@ -554,6 +593,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-jiaohuoriqishezhi"></span>
+            <div class="name">
+              交货日期设置
+            </div>
+            <div class="code-name">.icon-jiaohuoriqishezhi
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-chakan"></span>
             <div class="name">
@@ -626,6 +674,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-tongyi"></span>
+            <div class="name">
+              同意
+            </div>
+            <div class="code-name">.icon-tongyi
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-dian"></span>
             <div class="name">
@@ -653,6 +710,24 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-dingdanhao"></span>
+            <div class="name">
+              订单号
+            </div>
+            <div class="code-name">.icon-dingdanhao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-ziyuan"></span>
             <div class="name">
@@ -842,6 +917,14 @@
                 <div class="code-name">#icon-wentibuchong</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-erweima"></use>
+                </svg>
+                <div class="name">二维码</div>
+                <div class="code-name">#icon-erweima</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-icon-test"></use>
@@ -946,6 +1029,14 @@
                 <div class="code-name">#icon-jiangpai-1</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+                </svg>
+                <div class="name">交货日期设置</div>
+                <div class="code-name">#icon-jiaohuoriqishezhi</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-chakan"></use>
@@ -1010,6 +1101,14 @@
                 <div class="code-name">#icon-tubiao-zhuzhuangtu</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongyi"></use>
+                </svg>
+                <div class="name">同意</div>
+                <div class="code-name">#icon-tongyi</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-dian"></use>
@@ -1034,6 +1133,22 @@
                 <div class="code-name">#icon-kucun</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dingdanhao"></use>
+                </svg>
+                <div class="name">订单号</div>
+                <div class="code-name">#icon-dingdanhao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi"></use>
+                </svg>
+                <div class="name">关闭</div>
+                <div class="code-name">#icon-guanbi</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-ziyuan"></use>

src/pages/cses_spt/components/todolist.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id='csesspt-todolist'>
+    <div class="todolist-flex">
+      <div class="todolist-custname">
+        <div>安吉富和家具有限公司</div>
+        <div class="todolist-flex todolist-subtitle">
+          <div class="todolist-value">云天明</div>
+          <div>2019-03-10 09:30</div>
+        </div>
+      </div>
+      <div class="todolist-flag">待接收</div>
+    </div>
+    <div class="todolist-mx">
+      <div class="todolist-mx-mtrl">
+        采购8种产品，共8000件，最早交期03/15，其中包括：枪钉 5000粒；角码 2000个；滚轮 400个...
+      </div>
+    </div>
+    <div class="todolist-bottom">
+      <div>
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-erweima"></use>
+        </svg>
+        FXXS1990305001
+      </div>
+      <div class="todolist-btndetail">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chakan"></use>
+        </svg>
+        查看详情
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+
+  }
+
+</script>
+<style>
+  #csesspt-todolist {
+    background: #ffffff;
+    margin: 8px 0 0 0;
+    padding: 10px 13px;
+    font-size: 16px;
+    font-family: "微软雅黑";
+    /* border-bottom: 1px solid #ddd; */
+    border-radius: 15px;
+  }
+
+  .todolist-custname {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ff7f50;
+    width: 70%;
+  }
+
+  .todolist-flex {
+    display: flex;
+    padding: 0 0 2px 0;
+    align-items: center;
+  }
+
+  .todolist-subtitle {
+    color: #ababab;
+    font-size: 13px;
+    /* line-height: 30px; */
+  }
+
+  .todolist-title {
+    font-weight: bold;
+    width: 80px;
+    text-align: right;
+  }
+
+  .todolist-value {
+    width: 23%;
+  }
+
+  .todolist-flag {
+    position: absolute;
+    right: 25px;
+    /* width: 100px; */
+    font-size: 13px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 15px;
+    padding: 2px 6px;
+    text-align: center;
+    background-color: #ff0000
+  }
+
+  /* .todolist-mx {
+    padding: 2px 5px 5px 5px;
+    margin: 5px 0;
+    background-color: #f8f8f8;
+    border-radius: 10px;
+  } */
+
+  .todolist-mx-title {
+    font-size: 14px;
+    color: #666;
+    /* margin: 5px 0; */
+    padding-top: 3px;
+    /* border-top: 1px solid #ddd; */
+  }
+
+  .todolist-mx-mtrl {
+    font-size: 16px;
+    padding: 3px 0;
+  }
+
+
+  .todolist-bottom {
+    display: flex;
+    margin: 5px 0 0 0;
+    padding: 5px 0 0px 0;
+    font-size: 13px;
+    color: #888;
+    height: 15px;
+    /* border-top: 1px solid #ddd; */
+  }
+
+  .todolist-btndetail {
+    position: absolute;
+    right: 20px;
+    color: #888;
+    font-size: 13px;
+    border-radius: 5px;
+  }
+
+</style>

src/pages/cses_spt/components/todolist_bak_0305.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id='csesspt-todolist'>
+    <div class="todolist-custname">安吉富和家具有限公司</div>
+    <div class="todolist-flex">
+      <div class="todolist-title">订单编号：</div>
+      <div class="todolist-billcode">FXXS1990305001</div>
+      <div class="todolist-flag">待接收</div>
+    </div>
+    <div class="todolist-flex">
+      <div class="todolist-title">下单人：</div>
+      <div class="todolist-value">云天明</div>
+      <div class="todolist-title">下单时间：</div>
+      <div>2019-03-10</div>
+    </div>
+    <div class="todolist-mx">
+      <div class="todolist-mx-title"> <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-shangpin"></use>
+        </svg>
+        共8000件产品，其中包括</div>
+      <div class="todolist-mx-mtrl"> <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-dian"></use>
+        </svg>
+        枪钉</div>
+      <div class="todolist-mx-qty">数量：5000粒，交期：2019-03-15</div>
+      <div class="todolist-mx-mtrl">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-dian"></use>
+        </svg>
+        角码</div>
+      <div class="todolist-mx-qty">数量：2000个，交期：2019-03-15</div>
+    </div>
+    <div class="todolist-bottom">
+      <div class="todolist-btndetail">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chakan"></use>
+        </svg>
+        查看详情</div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+
+  }
+
+</script>
+<style>
+  #csesspt-todolist {
+    background: #ffffff;
+    margin: 10px 5px;
+    padding: 10px 13px;
+    font-size: 16px;
+    font-family: "微软雅黑";
+    border-radius: 20px;
+  }
+
+  .todolist-custname {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ff7f50;
+  }
+
+  .todolist-flex {
+    display: flex;
+    padding: 0 0 2px 0;
+  }
+
+
+  .todolist-title {
+    font-weight: bold;
+    width: 80px;
+    text-align: right;
+  }
+
+  .todolist-value {
+    width: 23%;
+  }
+
+  .todolist-flag {
+    position: absolute;
+    right: 25px;
+    width: 55px;
+    font-size: 13px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 15px;
+    padding: 2px;
+    text-align: center;
+    background-color: #ff0000
+  }
+
+  .todolist-mx {
+    padding: 2px 5px 5px 5px;
+    margin: 5px 0;
+    background-color: #f8f8f8;
+    border-radius: 10px;
+  }
+
+  .todolist-mx-title {
+    font-size: 14px;
+    color: #666;
+    margin: 5px 0;
+    padding-bottom: 3px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .todolist-mx-mtrl {
+    font-size: 14px;
+    margin-top: 5px;
+  }
+
+  .todolist-mx-qty {
+    font-size: 12px;
+    color: #888;
+    margin-bottom: 3px;
+    margin-left: 20px;
+  }
+
+  .todolist-bottom {
+    display: flex;
+    margin: 0 5px;
+    padding: 3px 0;
+    font-size: 13px;
+    color: #888;
+    height: 15px;
+  }
+
+  .todolist-btndetail {
+    position: absolute;
+    right: 20px;
+    color: #888;
+    font-size: 13px;
+    margin-right: 0px;
+    border-radius: 5px;
+  }
+
+</style>

src/pages/cses_spt/components/todolist_demo_1.vue

@@ -0,0 +1,123 @@
+<template>
+  <div id='csesspt-todolist'>
+    <div class="todolist-custname">安吉富和家具有限公司</div>
+    <div class="todolist-flex">
+      <div class="todolist-title">订单编号：</div>
+      <div class="todolist-billcode">FXXS1990305001</div>
+      <div class="todolist-flag">待接收</div>
+    </div>
+    <div class="todolist-flex">
+      <div class="todolist-title">下单人：</div>
+      <div class="todolist-value">云天明</div>
+      <div class="todolist-title">下单时间：</div>
+      <div>2019-03-10</div>
+    </div>
+    <div class="todolist-mx">
+      <div class="todolist-mx-title"> <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-shangpin"></use>
+        </svg>
+        8种产品，共8000件，最早交期03/15，其中包括</div>
+      <div class="todolist-mx-mtrl">
+        枪钉 5000粒；角码 2000个；滚轮 400个...
+      </div>
+    </div>
+    <div class="todolist-bottom">
+      <div class="todolist-btndetail">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chakan"></use>
+        </svg>
+        查看详情</div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+
+  }
+
+</script>
+<style>
+  #csesspt-todolist {
+    background: #ffffff;
+    margin: 8px 0 0 0;
+    padding: 10px 13px;
+    font-size: 16px;
+    font-family: "微软雅黑";
+    /* border-bottom: 1px solid #ddd; */
+    /* border-radius: 20px; */
+  }
+
+  .todolist-custname {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ff7f50;
+  }
+
+  .todolist-flex {
+    display: flex;
+    padding: 0 0 2px 0;
+  }
+
+
+  .todolist-title {
+    font-weight: bold;
+    width: 80px;
+    text-align: right;
+  }
+
+  .todolist-value {
+    width: 23%;
+  }
+
+  .todolist-flag {
+    position: absolute;
+    right: 25px;
+    width: 55px;
+    font-size: 13px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 15px;
+    padding: 2px;
+    text-align: center;
+    background-color: #ff0000
+  }
+
+  /* .todolist-mx {
+    padding: 2px 5px 5px 5px;
+    margin: 5px 0;
+    background-color: #f8f8f8;
+    border-radius: 10px;
+  } */
+
+  .todolist-mx-title {
+    font-size: 14px;
+    color: #666;
+    /* margin: 5px 0; */
+    padding-top: 3px;
+    /* border-top: 1px solid #ddd; */
+  }
+
+  .todolist-mx-mtrl {
+    font-size: 14px;
+    padding: 0 10px 0 18px;
+  }
+
+
+  .todolist-bottom {
+    display: flex;
+    margin: 0 5px;
+    /* padding: 3px 0; */
+    font-size: 13px;
+    color: #888;
+    height: 15px;
+  }
+
+  .todolist-btndetail {
+    position: absolute;
+    right: 20px;
+    color: #888;
+    font-size: 13px;
+    border-radius: 5px;
+  }
+
+</style>

src/pages/cses_spt/cses_spt_detail.vue

@@ -0,0 +1,513 @@
+<template>
+  <div id="taskdetail">
+    <div class="topbar">
+      <div class="topbar_left" @click="goback">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        订单详情
+      </div>
+      <div class="topbar_right">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caidan"></use>
+        </svg>
+      </div>
+    </div>
+    <div id="content">
+      <div class="toparea_dt" :class="colortop">
+        <div class="taskcode_dt">
+          FXXS1990305001
+          <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-address"></use>
+        </svg>
+        <span>云天明</span>
+        <span style="margin-left:10px;">13800138000</span>
+      </div>
+      <div class="address_dt">地址：广东省顺德市芙蓉中路二段115号湖南千思湖南千思湖南千思湖南千思湖南千思</div>
+
+      <!-- <div class="liubai_dt"></div> -->
+
+      <div class="middlearea">
+        <div class='taskinfo_dtflex'>
+          <div class="taskinfo_dttitle_dt">
+            <div class="title_dt ">订货日期：</div>
+            <div class="taskinfo_dtitem leftsize">2019-03-10</div>
+          </div>
+          <div class="taskinfo_dttitle_dt">
+            <div class="title_dt rightside">交货日期：</div>
+            <div class="taskinfo_dtitem requiredate">2019-03-15</div>
+          </div>
+        </div>
+        <div class="taskinfo_dtamt">
+          <div class="taskinfo_dttitle_dt">
+            <div class="title_dt">金额：</div>
+            <div class="taskinfo_dtitem taskamt leftsize">¥3500</div>
+          </div>
+          <div class="taskinfo_dttitle_dt rightside">
+            <div class="title_dt">结算方式：</div>
+            <div class="taskinfo_dtitem">款到发货</div>
+          </div>
+        </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="taskmx_dt">
+
+        <div id="rowmx_dt">
+          <div class="mxmtrl_dt">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-dian"></use>
+            </svg>
+            枪钉
+            <span class="cses-spt-detail-mxdate">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+              </svg>
+              2019/03/15
+            </span>
+          </div>
+          <div class="mxqty_dt">数量：5000粒，单价：0.1元，合计500元</div>
+          <div class="mxqty_dt">发货：5000粒，质检合格：4980粒，不合格：20粒，收货：5000粒</div>
+        </div>
+
+        <div id="rowmx_dt">
+          <div class="mxmtrl_dt">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-dian"></use>
+            </svg>
+            角码
+            <span class="cses-spt-detail-mxdate">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+              </svg>
+              2019/03/15
+            </span>
+          </div>
+          <div class="mxqty_dt">数量：2000个，单价：0.5元，合计1000元</div>
+          <div class="mxqty_dt">发货：2000个，质检合格：2000个，收货：2000个</div>
+        </div>
+
+
+        <div id="rowmx_dt">
+          <div class="mxmtrl_dt">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-dian"></use>
+            </svg>
+            滚轮
+            <span class="cses-spt-detail-mxdate">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+              </svg>
+              2019/03/15
+            </span>
+          </div>
+          <div class="mxqty_dt">数量：400个，单价：5元，合计2000元</div>
+          <div class="mxqty_dt">发货：400个，质检合格：400个，收货：400个</div>
+        </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>
+          下单日期：2019-03-10 09:30
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzhoutiaowancheng"></use>
+          </svg>
+          接收时间：2019-03-10 10:05
+        </div>
+
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          发货开单：2019-03-14 15:00
+        </div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          发货完成：2019-03-14 15:30
+        </div>
+
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          质检完成：2019-03-15 09:30
+        </div>
+
+
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          收货完成：2019-03-15 10:30
+        </div>
+        <!-- <div>
+          *要求完成日期：
+        </div> -->
+
+
+      </div>
+
+    </div>
+
+    <div class="spt-detail-btn-wrap" v-if="taskflag_dt=='待接收'">
+      <div class="spt-detail-btn spt-detail-border-right">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-tongyi"></use>
+        </svg>
+        接收
+      </div>
+      <div class="spt-detail-btn">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-guanbi"></use>
+        </svg>
+        拒绝
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+
+    name: 'saletaskDetail',
+    data() {
+      return {
+        taskflag_dt: '已完成',
+        ifnew: 0
+      };
+    },
+    methods: {
+      goback() {
+        {
+          history.back();
+        }
+      }
+    },
+    computed: {
+      colortop: function () {
+        return {
+          bgcolorred: this.taskflag_dt == "待接收",
+          bgcolorgreen: this.taskflag_dt == "在进行",
+          bgcolorblue: this.taskflag_dt == "已完成"
+        };
+      },
+    }
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    /* background-color: #fff; */
+    font-family: "微软雅黑";
+  }
+
+  .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;
+    width: 100%;
+    padding-bottom: 60px;
+  }
+
+  .toparea_dt {
+    color: white;
+    background-color: #fc4e2c;
+    height: 80px;
+    display: flex;
+  }
+
+  .bgcolorred {
+    background-color: #fc4e2c
+  }
+
+  .bgcolorgreen {
+    background-color: #8dc026;
+  }
+
+  .bgcolorblue {
+    background-color: #1e90ff;
+  }
+
+  .taskcode_dt {
+    font-size: 22px;
+    font-weight: bold;
+    padding: 10px 0 10px 10px;
+    line-height: 30px;
+  }
+
+  .taskflag_dt {
+    font-size: 18px;
+    font-weight: bold;
+    padding: 10px;
+    line-height: 30px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .taskinfo_dt {
+    background-color: #fff;
+    width: 100%;
+    height: 35px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    position: absolute;
+    top: 50px;
+  }
+
+  .cust_dt {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 10px
+  }
+
+  .reptel_dt {
+    font-size: 14px;
+    font-weight: bold;
+    margin: 10px 0 2px 10px;
+  }
+
+  .address_dt {
+    font-size: 13px;
+    margin-left: 30px;
+    margin-right: 20px;
+    margin-bottom: 10px;
+    color: #666666;
+  }
+
+  .hyaddress_dt {
+    font-size: 13px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    color: #666666;
+  }
+
+  .liubai_dt {
+    width: 100%;
+    height: 10px;
+    background-color: #f6f6f6;
+  }
+
+  .middlearea {
+    margin: 10px;
+    font-size: 14px;
+  }
+
+  .taskinfo_dtflex {
+    display: flex;
+    /* height: 60px; */
+    align-items: center;
+  }
+
+  .taskinfo_dttitle_dt {
+    font-weight: bold;
+    margin-bottom: 5px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .title_dt {
+    width: 80px;
+    text-align: right
+  }
+
+  .taskinfo_dtitem {
+    font-weight: normal;
+    color: #333;
+
+  }
+
+  .taskinfo_dtamt {
+    display: flex;
+  }
+
+  .taskamt {
+    font-weight: bold;
+    color: #ff0000;
+  }
+
+  .leftsize {
+    width: 100px;
+  }
+
+  .dscrp {
+    border-radius: 10px;
+    background: #f0eded;
+    padding: 10px 20px;
+    margin: 0 20px 10px 20px;
+    font-size: 15px;
+    color: #555555;
+    line-height: 18px;
+  }
+
+  .subtitle_dt {
+    font-size: 17px;
+    font-weight: 700;
+    text-align: center;
+    margin: 0 20px;
+    height: 42px;
+    line-height: 43px;
+  }
+
+  .jindu {
+    border-top: 1px solid #f0f0f0;
+    margin: 0 20px;
+    font-size: 15px;
+    line-height: 30px;
+    padding: 10px 0;
+  }
+
+  .jindubtn {
+    margin-left: 20px;
+    border: 1px solid #bbb;
+    padding: 0 10px;
+    border-radius: 15px;
+    font-size: 13px;
+  }
+
+  .taskmx_dt {
+    border-top: 1px solid #f0f0f0;
+
+  }
+
+  #rowmx_dt {
+
+    margin-bottom: 10px;
+  }
+
+  .mxmtrl_dt {
+    margin: 5px;
+    font-size: 16px;
+  }
+
+  .mxqty_dt {
+    font-size: 14px;
+    color: #888888;
+    margin:0 10px 3px 25px;
+  }
+
+
+  .spt-detail-btn-wrap {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #fc4e2c;
+    width: 100%;
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0 2px 0;
+    box-shadow: 0 -1px 3px #f1f1f1;
+  }
+
+  .spt-detail-btn {
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: bold;
+    width: 45%;
+    text-align: center;
+    padding: 8px
+  }
+
+  .spt-detail-border-right {
+    border-right: 1px solid #f0f0f0;
+  }
+
+  .spt-detail-btn-on {
+    color: #ff7f50
+  }
+
+  .spt-detail-icon {
+    font-size: 23px;
+  }
+
+  .cses-spt-detail-mxdate {
+    margin-left: 10px;
+    padding: 2px 10px;
+    background-color: #f0eded;
+    border-radius: 15px;
+    font-size: 15px;
+  }
+
+</style>

src/pages/cses_spt/todo.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="todo-tab-warp">
+      <todo-list></todo-list>
+      <todo-list></todo-list>
+      <todo-list></todo-list>
+      <todo-list></todo-list>
+      <todo-list></todo-list>
+      <todo-list></todo-list>
+    </div>
+
+    <div class="todo-tab">
+      <div class="todo-tab-btn todo-tab-btn-on">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-jindu"></use>
+          </svg>
+        </div>
+        <div class="todo-tab-count">12</div>
+        待处理
+      </div>
+      <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-yingyongguanli"></use>
+          </svg>
+        </div>
+        全部
+      </div>
+      <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-kehu"></use>
+          </svg>
+        </div>
+        我
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import TodoList from "./components/todolist";
+  export default {
+    name: 'todo',
+    components: {
+      TodoList
+    }
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #eee;
+    font-family: "微软雅黑";
+  }
+
+.todo-tab-warp{
+  margin-bottom: 70px;
+
+}
+  .todo-tab {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #ffffff;
+    width: 100%;
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0 2px 0;
+    box-shadow: 0 -1px 3px #f1f1f1
+  }
+
+  .todo-tab-btn {
+    font-size: 13px;
+    width: 30%;
+    text-align: center
+  }
+
+  .todo-tab-btn-on {
+    color: #ff7f50
+  }
+
+  .todo-tab-icon {
+    font-size: 23px;
+  }
+
+  .todo-tab-count {
+    position: fixed;
+    bottom: 35px;
+    left: 23%;
+    font-size: 13px;
+    line-height: 15px;
+    width: 15px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    padding: 3px;
+    text-align: center;
+    background-color: #fc4f4f
+  }
+
+</style>

src/pages/setting.vue

@@ -11,7 +11,7 @@
     <div class="setting_liubai"></div>
 
     <div class="setting_list">
-      <div class="setting_list_item setting_list_item_border">
+      <!-- <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>
@@ -23,7 +23,7 @@
             <use xlink:href="#icon-iconfontjiantou2"></use>
           </svg>
         </div>
-      </div>
+      </div> -->
 
       <div class="setting_list_item setting_list_item_border">
         <div class="setting_list_item_icon">
@@ -57,6 +57,33 @@
     <div class="setting_liubai"></div>
     <div class="setting_relogin">退出当前帐号</div>
 
+    <!-- <div class="todo-tab">
+      <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-jindu"></use>
+          </svg>
+        </div>
+        <div class="todo-tab-count">12</div>
+        待处理
+      </div>
+      <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-yingyongguanli"></use>
+          </svg>
+        </div>
+        全部
+      </div>
+      <div class="todo-tab-btn todo-tab-btn-on">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-kehu"></use>
+          </svg>
+        </div>
+        我
+      </div>
+    </div> -->
   </div>
 </template>
 <script>
@@ -153,4 +180,47 @@
     text-align: center
   }
 
+
+    .todo-tab {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #ffffff;
+    width: 100%;
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0 2px 0;
+    box-shadow: 0 -1px 3px #f1f1f1
+  }
+
+  .todo-tab-btn {
+    font-size: 13px;
+    width: 30%;
+    text-align: center
+  }
+
+  .todo-tab-btn-on {
+    color: #ff7f50
+  }
+
+  .todo-tab-icon {
+    font-size: 23px;
+  }
+
+  .todo-tab-count {
+    position: fixed;
+    bottom: 35px;
+    left: 23%;
+    font-size: 13px;
+    line-height: 15px;
+    width: 15px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    padding: 3px;
+    text-align: center;
+    background-color: #fc4f4f
+  }
+
 </style>

src/router/index.js

@@ -7,6 +7,8 @@ import Setting from '@/pages/setting'
 import Daily from '@/pages/daily'
 import Pushlist from '@/pages/pushlist'
 import About from '@/pages/about'
+import CsesSptTodo from '@/pages/cses_spt/todo'
+import CsesSptDetail from '@/pages/cses_spt/cses_spt_detail'
 
 Vue.use(Router)
 
@@ -64,6 +66,22 @@ export default new Router({
       meta: {
         title: '关于'
       }
+    },
+    {
+      path: '/csesspttodo',
+      name: 'CsesSptTodo',
+      component: CsesSptTodo,
+      meta: {
+        title: '待处理'
+      }
+    },
+    {
+      path: '/csessptdetail',
+      name: 'CsesSptDetail',
+      component: CsesSptDetail,
+      meta: {
+        title: '采购订单详情'
+      }
     }
   ]
 })