提交

src/layout/components/header.vue

@@ -27,7 +27,9 @@
           </div>
           <div class="line"></div>
           <div class="spfb">
-            个人中心
+            <router-link to="/user">
+              个人中心
+            </router-link>
           </div>
         </div>
       </div>

src/router/index.ts

@@ -61,6 +61,11 @@ const router = new VueRouter({
           component: () => import("../views/account/findPassword.vue"),
           meta: { title: "findPassword", NoHeader: true }
         },
+        {
+          path: "/user/editPassword",
+          component: () => import("../views/account/user/editPassword.vue"),
+          meta: { title: "editPassword" }
+        },
         {
           path: "/user",
           component: () => import("../views/account/user/index.vue"),

src/views/account/findPassword.vue

@@ -12,37 +12,39 @@
         <el-col :span="8" :offset="16">
           <div class="loginDiv">
             <div class="name"><span class="line"></span>重设密码</div>
-            <div>
+            <div class="inputDiv">
+              <img src="@assets/user.png" alt="" />
               <el-input
+                class="fr"
                 placeholder="登录账号"
-                prefix-icon="el-icon-user"
                 v-model="form.username"
               >
               </el-input>
             </div>
-            <div>
-              <el-input
-                placeholder="手机号码"
-                prefix-icon="el-icon-mobile-phone"
-                v-model="form.phone"
-              >
+            <div class="inputDiv">
+              <img src="@assets/phone.png" alt="" />
+              <el-input class="fr" placeholder="手机号码" v-model="form.phone">
               </el-input>
             </div>
-            <div>
-              <el-input
-                placeholder="验证码"
-                prefix-icon="el-icon-lock"
-                style="width:70%;"
-                v-model="form.yzm"
-              >
-              </el-input>
+            <div class="yzmDiv">
+              <div class="inputDiv per70">
+                <img src="@assets/yz.png" alt="" />
+                <el-input
+                  class="fr"
+                  placeholder="验证码"
+                  style="width:89%;"
+                  v-model="form.yzm"
+                >
+                </el-input>
+              </div>
               <div class="yzm">获取验证码</div>
             </div>
-            <div>
+            <div class="inputDiv">
+              <img src="@assets/lock.png" alt="" />
               <el-input
+                class="fr"
                 type="password"
                 placeholder="新密码"
-                prefix-icon="el-icon-lock"
                 v-model="form.password"
               >
               </el-input>
@@ -121,8 +123,20 @@ export default {
       top: 0.6rem;
     }
   }
-  div {
-    margin-top: 1rem;
+  .inputDiv {
+    height: 4rem;
+    line-height: 4rem;
+    border: 0.1rem solid #acacac;
+    border-radius: 0.4rem;
+    margin-top: 2rem;
+    img {
+      height: 1.6rem;
+      vertical-align: middle;
+      margin-left: 0.6rem;
+    }
+  }
+  .yzmDiv {
+    overflow: hidden;
     .yzm {
       height: 4rem;
       line-height: 4rem;
@@ -133,12 +147,16 @@ export default {
       float: right;
       background: #ffded5;
       border-radius: 0.4rem;
+      margin-top: 2rem;
     }
+  }
+  div {
     .loginBtn {
       width: 100%;
       background: #fd5522;
       color: #fff;
       border-color: #fd5522;
+      margin-top: 2rem;
     }
   }
   .newDiv {
@@ -171,4 +189,21 @@ export default {
 .pb3rem {
   padding-bottom: 3rem;
 }
+.fr {
+  float: right;
+}
+.per70 {
+  width: 70%;
+  float: left;
+}
+</style>
+<style lang="scss">
+.inputDiv .el-input {
+  width: 92%;
+  float: right;
+  .el-input__inner {
+    border: 0;
+    padding-left: 0.6rem;
+  }
+}
 </style>

src/views/account/login.vue

@@ -12,34 +12,41 @@
         <el-col :span="8" :offset="16">
           <div class="loginDiv">
             <div class="name"><span class="line"></span>账号登录</div>
-            <div>
+            <div class="inputDiv">
+              <img src="@assets/user.png" alt="" />
               <el-input
+                class="fr"
                 placeholder="用户名(支持手机号)"
-                prefix-icon="el-icon-user"
                 v-model="form.username"
               >
               </el-input>
             </div>
-            <div>
+            <div class="inputDiv">
+              <img src="@assets/lock.png" alt="" />
               <el-input
+                class="fr"
                 type="password"
                 placeholder="密码"
-                prefix-icon="el-icon-lock"
                 v-model="form.password"
               >
               </el-input>
             </div>
-            <div>
-              <el-input
-                placeholder="验证码"
-                prefix-icon="el-icon-lock"
-                style="width:70%;"
-                v-model="form.yzm"
-              >
-              </el-input>
-              <div class="yzm">NSVP</div>
+            <div class="yzmDiv">
+              <div class="inputDiv per70">
+                <img src="@assets/yz.png" alt="" />
+                <el-input
+                  class="fr"
+                  placeholder="验证码"
+                  style="width:89%;"
+                  v-model="form.yzm"
+                >
+                </el-input>
+              </div>
+              <div class="yzm">
+                <img src="@assets/yzm.png" alt="" />
+              </div>
             </div>
-            <div>
+            <div class="checkBoxDiv">
               <el-checkbox v-model="form.zddl">自动登录</el-checkbox>
             </div>
             <div>
@@ -124,21 +131,45 @@ export default {
       top: 0.6rem;
     }
   }
-  div {
-    margin-top: 1rem;
+  .inputDiv {
+    height: 4rem;
+    line-height: 4rem;
+    border: 0.1rem solid #acacac;
+    border-radius: 0.4rem;
+    margin-top: 2rem;
+    img {
+      height: 1.6rem;
+      vertical-align: middle;
+      margin-left: 0.6rem;
+    }
+  }
+  .yzmDiv {
+    overflow: hidden;
     .yzm {
       height: 4rem;
-      line-height: 4rem;
       width: 28%;
       float: right;
       background: #eeeeee;
       border-radius: 0.4rem;
+      margin-top: 2rem;
+      img {
+        height: 100%;
+        width: 100%;
+      }
     }
+  }
+  .checkBoxDiv {
+    height: 4rem;
+    line-height: 4rem;
+    margin-top: 1rem;
+  }
+  div {
     .loginBtn {
       width: 100%;
       background: #fd5522;
       color: #fff;
       border-color: #fd5522;
+      margin-top: 2rem;
     }
   }
   .newDiv {
@@ -171,6 +202,13 @@ export default {
 .pb3rem {
   padding-bottom: 3rem;
 }
+.fr {
+  float: right;
+}
+.per70 {
+  width: 70%;
+  float: left;
+}
 </style>
 <style lang="scss">
 .loginDiv {
@@ -187,5 +225,13 @@ export default {
   .el-checkbox__input.is-checked + .el-checkbox__label {
     color: #333;
   }
+  .inputDiv .el-input {
+    width: 92%;
+    float: right;
+    .el-input__inner {
+      border: 0;
+      padding-left: 0.6rem;
+    }
+  }
 }
 </style>

src/views/account/register.vue

@@ -12,42 +12,44 @@
         <el-col :span="8" :offset="16">
           <div class="loginDiv">
             <div class="name"><span class="line"></span>用户注册</div>
-            <div>
+            <div class="inputDiv">
+              <img src="@assets/user.png" alt="" />
               <el-input
+                class="fr"
                 placeholder="登录账号"
-                prefix-icon="el-icon-user"
                 v-model="form.username"
               >
               </el-input>
             </div>
-            <div>
+            <div class="inputDiv">
+              <img src="@assets/lock.png" alt="" />
               <el-input
+                class="fr"
                 type="password"
                 placeholder="登录密码"
-                prefix-icon="el-icon-lock"
                 v-model="form.password"
               >
               </el-input>
             </div>
-            <div>
-              <el-input
-                placeholder="手机号码"
-                prefix-icon="el-icon-mobile-phone"
-                v-model="form.phone"
-              >
+            <div class="inputDiv">
+              <img src="@assets/phone.png" alt="" />
+              <el-input class="fr" placeholder="手机号码" v-model="form.phone">
               </el-input>
             </div>
-            <div>
-              <el-input
-                placeholder="验证码"
-                prefix-icon="el-icon-lock"
-                style="width:70%;"
-                v-model="form.yzm"
-              >
-              </el-input>
+            <div class="yzmDiv">
+              <div class="inputDiv per70">
+                <img src="@assets/yz.png" alt="" />
+                <el-input
+                  class="fr"
+                  placeholder="验证码"
+                  style="width:89%;"
+                  v-model="form.yzm"
+                >
+                </el-input>
+              </div>
               <div class="yzm">获取验证码</div>
             </div>
-            <div>
+            <div class="checkboxDiv">
               <el-checkbox v-model="form.zddl">我已阅读并同意</el-checkbox
               ><a class="xieyi" href="javascript:;"
                 >《用户服务协议和平台免责条款》</a
@@ -127,8 +129,20 @@ export default {
       top: 0.6rem;
     }
   }
-  div {
-    margin-top: 1rem;
+  .inputDiv {
+    height: 4rem;
+    line-height: 4rem;
+    border: 0.1rem solid #acacac;
+    border-radius: 0.4rem;
+    margin-top: 2rem;
+    img {
+      height: 1.6rem;
+      vertical-align: middle;
+      margin-left: 0.6rem;
+    }
+  }
+  .yzmDiv {
+    overflow: hidden;
     .yzm {
       height: 4rem;
       line-height: 4rem;
@@ -139,12 +153,19 @@ export default {
       float: right;
       background: #ffded5;
       border-radius: 0.4rem;
+      margin-top: 2rem;
     }
+  }
+  .checkboxDiv {
+    margin-top: 2rem;
+  }
+  div {
     .loginBtn {
       width: 100%;
       background: #fd5522;
       color: #fff;
       border-color: #fd5522;
+      margin-top: 2rem;
     }
     .xieyi {
       color: #fd5522;
@@ -180,4 +201,21 @@ export default {
 .pb3rem {
   padding-bottom: 3rem;
 }
+.fr {
+  float: right;
+}
+.per70 {
+  width: 70%;
+  float: left;
+}
+</style>
+<style lang="scss">
+.inputDiv .el-input {
+  width: 92%;
+  float: right;
+  .el-input__inner {
+    border: 0;
+    padding-left: 0.6rem;
+  }
+}
 </style>

src/views/account/user/editPassword.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="bg-F5">
+    <div class="container">
+      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
+        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
+      </el-breadcrumb>
+      <div class="editPanel">
+        <div class="partTitle"><span class="orangeLine"></span>修改密码</div>
+        <div class="editDiv">
+          <div class="editD">
+            <div class="editItem">
+              <img src="@assets/user.png" alt="" />
+              <span>用户名：</span>
+              <el-input
+                v-model="username"
+                placeholder="请输入用户名/登录账号"
+              ></el-input>
+            </div>
+            <div class="editItem">
+              <img src="@assets/lock.png" alt="" />
+              <span>旧密码：</span>
+              <el-input
+                v-model="oldPassword"
+                type="password"
+                placeholder="请输入旧密码"
+              ></el-input>
+            </div>
+            <div class="editItem">
+              <img src="@assets/lock.png" alt="" />
+              <span>新密码：</span>
+              <el-input
+                v-model="newPassword"
+                placeholder="请输入新密码"
+              ></el-input>
+            </div>
+            <div class="editItem">
+              <img src="@assets/lock.png" alt="" />
+              <span>确认密码：</span>
+              <el-input
+                v-model="surePassword"
+                placeholder="请再次输入新密码"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+        <div class="btnDiv">
+          <el-button class="submitBtn" type="text" size="small">提交</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Component, Vue, Watch } from "vue-property-decorator";
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      username: "",
+      oldPassword: "",
+      newPassword: "",
+      surePassword: ""
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.requestData();
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.breadcrumb {
+  height: 4rem;
+  line-height: 4rem;
+}
+.partTitle {
+  padding-top: 2rem;
+  font-size: 1.6rem;
+  color: #fd5522;
+  .orangeLine {
+    display: inline-block;
+    height: 1.8rem;
+    width: 0.3rem;
+    background: #fd5522;
+    vertical-align: middle;
+    border-radius: 0.15rem;
+    margin-right: 1rem;
+  }
+}
+.editPanel {
+  background: #fff;
+  border-radius: 0.4rem;
+  .editDiv {
+    padding: 2rem;
+    box-sizing: border-box;
+    .editD {
+      width: 100%;
+      background: #fff5f2;
+      padding: 2rem;
+      box-sizing: border-box;
+      .editItem {
+        height: 6rem;
+        line-height: 6rem;
+        border-bottom: 0.1rem solid #e5e5e5;
+        padding: 0 0.6rem;
+        box-sizing: border-box;
+        img {
+          height: 1.4rem;
+          vertical-align: middle;
+          margin-right: 1rem;
+        }
+        span {
+          font-size: 1.4rem;
+          color: #333;
+        }
+      }
+    }
+  }
+  .btnDiv {
+    text-align: center;
+    padding-bottom: 2rem;
+    .submitBtn {
+      height: 3.6rem;
+      line-height: 3.6rem;
+      font-size: 1.4rem;
+      background: #fd5522;
+      color: #fff;
+      border: 0.1rem solid #fd5522;
+      padding: 0 2rem;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.editItem .el-input {
+  width: 60% !important;
+  .el-input__inner {
+    border: 0;
+    background: #fff5f2;
+  }
+}
+</style>

src/views/account/user/index.vue

@@ -1,11 +1,292 @@
 <template>
-  <div>
-    会员中心
-    <router-view />
+  <div class="bg-F5">
+    <div class="container">
+      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="userDiv">
+            <div class="txDiv">
+              <img src="@assets/touxiang02.png" alt="" />
+            </div>
+            <div class="welInfo">
+              <span class="user">神码洛阳，</span>
+              <span class="wel">欢迎您</span>
+            </div>
+            <div class="btnDiv">
+              <router-link to="/user/editPassword">
+                <el-button class="edit">修改信息</el-button>
+              </router-link>
+              <el-button class="logOut">退出登录</el-button>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="18">
+          <img class="rightImg" src="@assets/userbg.png" alt="" />
+        </el-col>
+      </el-row>
+      <div class="infoTabDiv">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="我的关注" name="first">
+            <el-table class="qyrzgs" border :data="tableData">
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50"
+              ></el-table-column>
+              <el-table-column
+                prop="name"
+                label="商家名称"
+                width="180"
+              ></el-table-column>
+              <el-table-column
+                prop="address"
+                label="主营产品"
+              ></el-table-column>
+              <el-table-column
+                prop="address"
+                label="关注日期"
+              ></el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button
+                    class="textBtn"
+                    @click="handleClick(scope.row)"
+                    type="text"
+                    size="small"
+                    >进入店铺</el-button
+                  >
+                  <span class="editline"></span>
+                  <el-button class="textBtn" type="text" size="small"
+                    >取消关注</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              class="pageDiv"
+              background
+              @current-change="handleCurrentChange"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              layout="prev, pager, next,total, jumper"
+              :total="total"
+            ></el-pagination>
+          </el-tab-pane>
+          <el-tab-pane label="我的需求" name="second">
+            <el-table class="qyrzgs" border :data="tableData">
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50"
+              ></el-table-column>
+              <el-table-column prop="name" label="商品类别"></el-table-column>
+              <el-table-column prop="address" label="概要"></el-table-column>
+              <el-table-column
+                prop="address"
+                label="发布时间"
+              ></el-table-column>
+              <el-table-column
+                prop="address"
+                label="目前状态"
+              ></el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button
+                    class="textBtn"
+                    @click="handleClick(scope.row)"
+                    type="text"
+                    size="small"
+                    >进入店铺</el-button
+                  >
+                  <span class="editline"></span>
+                  <el-button class="textBtn" type="text" size="small"
+                    >取消关注</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              class="pageDiv"
+              background
+              @current-change="handleCurrentChange"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              layout="prev, pager, next,total, jumper"
+              :total="total"
+            ></el-pagination>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+    <!-- <router-view /> -->
   </div>
 </template>
-<script lang="ts">
+<script>
 import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      activeName: "first",
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄"
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄"
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄"
+        }
+      ],
+      pageSize: 10,
+      currentPage: 1,
+      total: 24
+    };
+  },
+  methods: {
+    handleCurrentChange(val) {
+      this.currentPage = val;
+    },
+    handleClick(row) {
+      console.log(row);
+    }
+  }
+};
 </script>
+<style scoped lang="scss">
+.breadcrumb {
+  height: 4rem;
+  line-height: 4rem;
+}
+.userDiv {
+  width: 100%;
+  height: 19rem;
+  background: #fff;
+  border-radius: 0.4rem;
+  text-align: center;
+  .txDiv {
+    img {
+      width: 5.8rem;
+      border-radius: 50%;
+      margin-top: 3rem;
+    }
+  }
+  .welInfo {
+    height: 3rem;
+    line-height: 3rem;
+    font-size: 1.2rem;
+    .user {
+      color: #fd5522;
+    }
+    .wel {
+      color: #333;
+    }
+  }
+  .btnDiv {
+    padding-top: 2rem;
+    .edit {
+      height: 3rem;
+      line-height: 3rem;
+      color: #fff;
+      background: #fd5522;
+      border: 0.1rem solid #fd5522;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-right: 1rem;
+    }
+    .logOut {
+      height: 3rem;
+      line-height: 3rem;
+      color: #fd5522;
+      background: #fff;
+      padding-top: 0;
+      padding-bottom: 0;
+      border: 0.1rem solid #fd5522;
+    }
+  }
+}
+.rightImg {
+  width: 100%;
+  height: 19rem;
+  border-radius: 0.4rem;
+}
+.editline {
+  display: inline-block;
+  height: 1rem;
+  width: 0.1rem;
+  background: #aaaaaa;
+  margin: 0 0.6rem;
+}
+.textBtn {
+  color: #606266;
+}
+.pageDiv {
+  text-align: right;
+  margin-top: 0.5rem;
+  padding: 3rem 0;
+}
+</style>
+<style lang="scss">
+.infoTabDiv {
+  .el-tabs__nav-scroll {
+    padding: 0 1.6rem;
+    box-sizing: border-box;
+  }
+  .el-tabs__item {
+    height: 5rem;
+    line-height: 5rem;
+  }
+  .el-tabs__item:hover {
+    color: #fd5522;
+  }
+  .el-tabs__item.is-active {
+    color: #fd5522;
+  }
+  .el-tabs__active-bar {
+    background-color: #fd5522;
+  }
+}
+.qyrzgs th {
+  background: #fd5522;
+  color: #fff;
+  padding: 0.6rem 0;
+  text-align: center;
+}
+.qyrzgs.el-table td {
+  padding: 0.2rem 0;
+}
+.qyrzgs.el-table--border th,
+.el-table--border td {
+  border-right: 1px solid #eae1dc;
+  border-bottom: 1px solid #eae1dc;
+}
+.qyrzgs.el-table--border {
+  border: 0.1rem solid #fd5522;
+}
+
+.qyrzgs .cell {
+  text-align: center;
+}
+.pageDiv.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background: #fd5522;
+}
+.pageDiv.el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: #fd5522;
+}
+</style>