Selaa lähdekoodia

增加新登录界面入帐号管理页面

LongjoeDyy 4 vuotta sitten
vanhempi
commit
e78c6c4f8c
5 muutettua tiedostoa jossa 544 lisäystä ja 64 poistoa
  1. BIN
      src/assets/cseslogo.png
  2. 255 0
      src/pages/account.vue
  3. 178 0
      src/pages/login.vue
  4. 97 63
      src/pages/saletaskdetail.vue
  5. 14 1
      src/router/index.js

BIN
src/assets/cseslogo.png


+ 255 - 0
src/pages/account.vue

@@ -0,0 +1,255 @@
+<template>
+  <div>
+    <div class="account_topbar">
+      <div class="account_topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="account_topbar_middle">
+        帐号管理
+      </div>
+      <div class="account_topbar_right">
+
+      </div>
+    </div>
+
+    <div class="account_wrap">
+      <div class="account_list_area"></div>
+      <div class="account_list">
+        <div class="account_avatar">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-account"></use>
+          </svg>
+        </div>
+
+        <div class="account_info">
+          <div class="account_info_com">张三家具有限公司</div>
+          <div class="account_info_user">
+            <span class="account_info_name">超级用户</span>
+            <span class="account_info_account">super</span>
+          </div>
+        </div>
+
+        <div class="account_active_user">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-tongyi"></use>
+          </svg>
+        </div>
+
+      </div>
+
+      <div class="account_list">
+        <div class="account_avatar">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-account"></use>
+          </svg>
+        </div>
+
+        <div class="account_info">
+          <div class="account_info_com">张三家具有限公司</div>
+          <div class="account_info_user">
+            <span class="account_info_name">王总</span>
+            <span class="account_info_account">wang666</span>
+          </div>
+        </div>
+
+
+      </div>
+
+      <div class="account_list">
+        <div class="account_avatar">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-account"></use>
+          </svg>
+        </div>
+
+        <div class="account_info">
+          <div class="account_info_com">李四金属制品有限公司</div>
+          <div class="account_info_user">
+            <span class="account_info_name">王总</span>
+            <span class="account_info_account">wang888</span>
+          </div>
+        </div>
+
+
+      </div>
+
+
+      <div class="account_list">
+        <div class="account_avatar">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-shuliangjia1"></use>
+          </svg>
+        </div>
+
+        <div class="account_info">
+          <div class="account_add_acc">添加帐号</div>
+        </div>
+
+
+      </div>
+
+      <div class="account_relogin">退出当前帐号</div>
+
+    </div>
+
+  </div>
+
+  </div>
+  </div>
+
+</template>
+<script>
+  export default {
+    name: "account"
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .account_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;
+  }
+
+  .account_topbar_left {
+    /* flex: 0 0 %; */
+    margin-left: 10px;
+  }
+
+  .account_topbar_middle {
+    text-align: center;
+    flex: 0 0 85%;
+  }
+
+  .account_topbar_right {
+    /* flex: 0 0 10%; */
+    position: absolute;
+    right: 10px;
+  }
+
+  .account_list_area {
+    margin: 20px 0
+  }
+
+  .account_wrap {
+
+    padding: 45px 0px;
+    margin:0 0 500px 0
+  }
+
+  .account_list {
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .account_avatar {
+    flex: 0 0 50px;
+    /* width: 35px;
+    height: 35px; */
+    font-size: 35px;
+    line-height: 50px;
+    background-color: #e4e4e4;
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+  }
+
+  .account_info {
+    margin: 0 0 0 10px
+  }
+
+  .account_info_com {
+    font-size: 16px;
+    font-weight: bold;
+
+  }
+
+  .account_add_acc {
+    font-size: 16px;
+    color: #afafaf;
+  }
+
+  .account_info_user {
+    margin: 2px 0 0 0
+  }
+
+  .account_info_name {
+    font-size: 14px;
+    color: #666;
+  }
+
+  .account_info_account {
+    font-size: 14px;
+    color: #666;
+    margin: 0 0 0 10px
+  }
+
+  .account_active_user {
+    color: #46a4da;
+    font-size: 18px;
+    position: absolute;
+    right: 20px;
+  }
+
+  .account_relogin {
+    background-color: #e14123;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    /* padding: 18px; */
+    text-align: center;
+    margin: 50px 20px;
+    padding: 10px 20px;
+    border-radius: 10px;
+  }
+
+  .account_liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 15px 0;
+  }
+
+  .account_content {
+    font-size: 15px;
+    color: #636363;
+    padding: 10px 20px;
+  }
+
+  .account_lianxi {
+    font-size: 15px;
+    color: #636363;
+    padding: 0 20px 10px 20px
+  }
+
+  .account_lianxi_title {
+    color: #f5772f;
+    padding: 0 0 10px 0;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .account_lianxi_dept {
+    font-size: 15px;
+    font-weight: bold;
+    padding: 10px 0 0 0;
+  }
+
+</style>

+ 178 - 0
src/pages/login.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <div class="login_topbar">
+      <div class="login_topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="login_topbar_middle">
+        登录
+      </div>
+      <div class="login_topbar_right">
+
+      </div>
+    </div>
+
+    <div class="login_wrap">
+      <div class="ceselogo">
+        <img src="../assets/cseslogo.png" class="about-img-responsive "></img>
+      </div>
+
+      <div class="login_tip_title">登录CSES</div>
+      <div class="login_tip">一切尽在掌握中</div>
+
+      <div class="user_psw">
+        <div class="login_input">请选择帐套
+          <span style="float:right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xiala2"></use>
+            </svg>
+          </span>
+        </div>
+        <div class="login_input">请输入用户名</div>
+        <div class="login_input">请输入密码</div>
+        <div class="login_btn">登录</div>
+
+        <div class="login_parm">连接参数设置</div>
+      </div>
+
+    </div>
+  </div>
+
+</template>
+<script>
+  export default {
+    name: "login"
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .login_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;
+  }
+
+  .login_topbar_left {
+    /* flex: 0 0 %; */
+    margin-left: 10px;
+  }
+
+  .login_topbar_middle {
+    text-align: center;
+    flex: 0 0 85%;
+  }
+
+  .login_topbar_right {
+    /* flex: 0 0 10%; */
+    position: absolute;
+    right: 10px;
+  }
+
+  .login_wrap {
+    padding: 45px 0
+  }
+
+  .ceselogo {
+    text-align: center;
+    margin: 30px 0 20px 0
+  }
+
+  .login_tip {
+    font-size: 15px;
+    color: #888;
+    text-align: center;
+  }
+
+
+  .login_tip_title {
+    font-size: 19px;
+    font-weight: bold;
+    color: #000000;
+    text-align: center;
+  }
+
+  .user_psw {
+    margin: 40px 0 
+  }
+
+  .login_input {
+    font-size: 15px;
+    color: #bfbfbf;
+    line-height: 25px;
+    padding: 10px;
+    background-color: #f6f6f6;
+    margin: 10px 30px;
+    border-radius: 10px;
+  }
+
+  .login_btn {
+    text-align: center;
+    font-size: 15px;
+    color: #fff;
+    line-height: 25px;
+    padding: 10px;
+    background-color: #46a4da;
+    margin: 30px 30px;
+    border-radius: 10px;
+  }
+
+  .login_parm{
+      margin:30px;
+      font-size: 14px;
+      color:#46a4da;
+  }
+
+  .about-img-responsive {
+    display: inline-block;
+    height: auto;
+    max-width: 20%;
+  }
+
+  .login_liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 15px 0;
+  }
+
+  .login_content {
+    font-size: 15px;
+    color: #636363;
+    padding: 10px 20px;
+  }
+
+  .login_lianxi {
+    font-size: 15px;
+    color: #636363;
+    padding: 0 20px 10px 20px
+  }
+
+  .login_lianxi_title {
+    color: #f5772f;
+    padding: 0 0 10px 0;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .login_lianxi_dept {
+    font-size: 15px;
+    font-weight: bold;
+    padding: 10px 0 0 0;
+  }
+
+</style>

+ 97 - 63
src/pages/saletaskdetail.vue

@@ -116,6 +116,68 @@
         备注:客户要求先发样板进行确认再排产。
       </div>
 
+
+      <div class="liubai_dt"></div>
+      <!-- <div class="mxjdinfo">*点击明细可查看明细产品进度</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>
+            218B两人位沙发,拉扣:布扣|座包:型号标配|配置:皮加布|
+          </div>
+          <div class="mx_bottomarea">
+            <div class="mxqty_dt">数量:100,¥50000</div>
+            <div class="mx_btndetail" @click="gotomxjd">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-chakan"></use>
+              </svg>
+              查看进度
+            </div>
+          </div>
+        </div>
+
+        <div id="rowmx_dt">
+          <div class="mxmtrl_dt">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-dian"></use>
+            </svg>
+            6528茶几,型号:P069(72913)
+          </div>
+          <div class="mx_bottomarea">
+            <div class="mxqty_dt">数量:100,¥30000</div>
+            <div class="mx_btndetail" @click="gotomxjd">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-chakan"></use>
+              </svg>
+              查看进度
+            </div>
+          </div>
+        </div>
+
+
+        <div id="rowmx_dt">
+          <div class="mxmtrl_dt">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-dian"></use>
+            </svg>
+            电视柜,型号:T9999
+          </div>
+          <div class="mx_bottomarea">
+            <div class="mxqty_dt">数量:100,¥20000</div>
+            <div class="mx_btndetail" @click="gotomxjd">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-chakan"></use>
+              </svg>
+              查看进度
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="liubai_dt"></div>
 
       <div class="subtitle_dt">订单进度跟踪</div>
@@ -150,12 +212,12 @@
           </svg>
           物料采购下单:
         </div>
-        <div>
+        <!-- <div>
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-buzouweijinxing"></use>
           </svg>
           唛头采购下单:
-        </div>
+        </div> -->
         <div>
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-baifenbi"></use>
@@ -187,7 +249,7 @@
           </svg>
           入库:2%&nbsp&nbsp(20/1000)
         </div>
-        <div> <svg class="icon" aria-hidden="true">
+        <!-- <div> <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-buzouweijinxing"></use>
           </svg>
           订船日期:
@@ -197,7 +259,39 @@
             <use xlink:href="#icon-buzouweijinxing"></use>
           </svg>
           装柜日期:
+        </div> -->
+
+        <div style="color:#6495ed">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzhoutiaowancheng"></use>
+          </svg>
+          唛头确认:2018-12-12 09:20
         </div>
+        
+
+        <div style="color:#6495ed">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          订柜:预计2018-12-20 18:00
+        </div>
+
+
+        <div style="color:#6495ed">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          发票制作:预计2019-12-29 18:00
+        </div>
+
+
+        <div style="color:#6495ed">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-buzouweijinxing"></use>
+          </svg>
+          用户接收发票:预计2019-12-30 18:00
+        </div>
+
         <div>
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-buzouweijinxing"></use>
@@ -217,66 +311,6 @@
 
       </div>
 
-      <div class="liubai_dt"></div>
-      <!-- <div class="mxjdinfo">*点击明细可查看明细产品进度</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>
-            218B两人位沙发,拉扣:布扣|座包:型号标配|配置:皮加布|
-          </div>
-          <div class="mx_bottomarea">
-            <div class="mxqty_dt">数量:100,¥50000</div>
-            <div class="mx_btndetail" @click="gotomxjd">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-chakan"></use>
-              </svg>
-              查看进度
-            </div>
-          </div>
-        </div>
-
-        <div id="rowmx_dt">
-          <div class="mxmtrl_dt">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-dian"></use>
-            </svg>
-            6528茶几,型号:P069(72913)
-          </div>
-          <div class="mx_bottomarea">
-            <div class="mxqty_dt">数量:100,¥30000</div>
-            <div class="mx_btndetail" @click="gotomxjd">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-chakan"></use>
-              </svg>
-              查看进度
-            </div>
-          </div>
-        </div>
-
-
-        <div id="rowmx_dt">
-          <div class="mxmtrl_dt">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-dian"></use>
-            </svg>
-            电视柜,型号:T9999
-          </div>
-          <div class="mx_bottomarea">
-            <div class="mxqty_dt">数量:100,¥20000</div>
-            <div class="mx_btndetail" @click="gotomxjd">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-chakan"></use>
-              </svg>
-              查看进度
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>

+ 14 - 1
src/router/index.js

@@ -62,6 +62,8 @@ import Symy from '@/pages/shangye/symy'
 import Dhb_mtrlinfo from '@/pages/dhb/dhb_mtrlinfo'
 import GongGao from '@/pages/gonggao'
 import GongGaoEdit from '@/pages/gonggao_edit'
+import Login from '@/pages/login'
+import Account from '@/pages/account'
 
 Vue.use(Router)
 
@@ -76,7 +78,18 @@ export default new Router({
       path: '/wkpmxlist',
       name: 'Wkpmxlist',
       component: Wkpmxlist
-    },{
+    },
+    {
+      path: '/login',
+      name: 'Login',
+      component: Login
+    },
+    {
+      path: '/account',
+      name: 'Account',
+      component: Account
+    },
+    {
       path: '/csescheckitem',
       name: 'Csescheckitem',
       component: Csescheckitem