登陆样式 iconfont

src/layout/components/header.vue

@@ -4,9 +4,9 @@
       <div class="container">
         <lang-select />
         <router-link class="home" to="/home">
-          <img src="@assets/home.png" alt="" srcset="" />
-          首页</router-link
-        >
+          <span class="font_family">&#xe605;</span>
+          <span>首页</span>
+        </router-link>
         <span class="userinfo" v-if="userInfo">
           欢迎您 {{ userInfo.loginAccount }}
         </span>
@@ -21,13 +21,13 @@
         <div class="rightDiv">
           <div class="sjrz">
             <router-link to="/shopEnter">
-              <img src="@assets/sjrz.svg" alt="" />
+              <span class="font_family">&#xe604;</span>
               <span>商家入驻</span>
             </router-link>
           </div>
           <div class="line"></div>
           <div class="spfb">
-            <img src="@assets/spfb.svg" alt="" />
+            <span class="font_family">&#xe603;</span>
             商品发布
           </div>
           <div class="line"></div>
@@ -115,6 +115,12 @@ export default class extends Vue {
     border: 0.1rem solid #e5e5e5;
     .container {
       font-size: 1.2rem;
+      .home {
+        margin: 0 5px;
+        .font_family {
+          color: #fd5522;
+        }
+      }
       .login {
         a {
           color: #fd5522;
@@ -141,10 +147,8 @@ export default class extends Vue {
             color: #fd5522;
           }
           display: inline-block;
-          img {
-            height: 1.4rem;
-            margin-right: 0.2rem;
-            vertical-align: middle;
+          span {
+            margin-left: 5px;
           }
         }
         .line {

src/styles/index.scss

@@ -1,6 +1,7 @@
 $--font-path: "~element-ui/lib/theme-chalk/fonts";
 $--color-primary: #fd5522;
 @import "~element-ui/packages/theme-chalk/src/index";
+@import "./iconfont/iconfont.css";
 html {
   height: 100%;
 
@@ -49,6 +50,10 @@ html {
         background-color: #fd5522;
       }
     }
+    .el-form-item__content {
+      height: 100%;
+      line-height: 100%;
+    }
     .x-title {
       font-size: 18px;
       color: rgb(51, 51, 51);

src/types/global.d.ts

@@ -40,6 +40,7 @@ interface ILogin {
   loginAccount: string;
   loginPassword: string;
   validateCode: string;
+  autoLogin: boolean;
 }
 
 interface IMenu {

src/views/account/login.vue

@@ -7,64 +7,57 @@
         <span class="info">欢迎登录</span>
       </div>
     </div>
-    <div class="bgImg">
-      <div class="container pt3rem pb3rem">
-        <el-row :gutter="20">
-          <el-col :span="8" :offset="16">
-            <div class="loginDiv">
-              <div class="name"><span class="line"></span>账号登录</div>
-              <div class="inputDiv">
-                <img src="@assets/user.png" alt="" />
-                <el-input
-                  class="fr"
-                  placeholder="用户名(支持手机号)"
-                  v-model="form.loginAccount"
-                >
-                </el-input>
-              </div>
-              <div class="inputDiv">
-                <img src="@assets/lock.png" alt="" />
-                <el-input
-                  class="fr"
-                  type="password"
-                  placeholder="密码"
-                  v-model="form.loginPassword"
-                >
-                </el-input>
-              </div>
-              <div class="yzmDiv">
-                <div class="inputDiv per70">
-                  <img src="@assets/yz.png" alt="" />
-                  <el-input
-                    class="fr"
-                    placeholder="验证码"
-                    style="width:88%;"
-                    v-model="form.validateCode"
-                  >
-                  </el-input>
-                </div>
-                <div class="yzm">
-                  <img :src="verifyImg" @click="setVerifyImg" alt="" />
-                </div>
-              </div>
-              <div class="checkBoxDiv">
-                <el-checkbox v-model="form.zddl">自动登录</el-checkbox>
-              </div>
-              <div>
-                <el-button class="loginBtn" @click="submit">登录</el-button>
-              </div>
-              <div class="newDiv">
-                <router-link class="forgetPass" to="/findPassword"
-                  >忘记密码</router-link
-                >
-                <span class="line"></span>
-                <router-link class="register" to="/register"
-                  >注册新账号</router-link
-                >
-              </div>
+    <div class="bg">
+      <div class="container  ">
+        <img src="@assets/loginbg.png" />
+        <div class="loginDiv">
+          <div class="x-title">账号登录</div>
+          <el-form :model="form" :rules="rules" class="form" ref="form">
+            <el-form-item class="formItem" prop="loginAccount">
+              <img class="icon" src="@assets/user.png" alt="" />
+              <el-input
+                v-model="form.loginAccount"
+                prefix-icon="x-el-icon-user"
+                placeholder="请输入用户名(支持手机号)"
+              />
+            </el-form-item>
+            <el-form-item class="formItem" prop="loginPassword">
+              <img class="icon" src="@assets/lock.png" alt="" />
+              <el-input
+                v-model="form.loginPassword"
+                prefix-icon="x-el-icon-lock"
+                placeholder="请输入密码"
+              />
+            </el-form-item>
+            <el-form-item class="formItem yzm" prop="validateCode">
+              <img class="icon" src="@assets/yz.png" alt="" />
+              <el-input
+                v-model="form.validateCode"
+                prefix-icon="icon-yzm"
+                placeholder="请输入验证码"
+              />
+              <img
+                class="verifyImg"
+                :src="verifyImg"
+                @click="setVerifyImg"
+                alt=""
+              />
+            </el-form-item>
+            <el-form-item class="formItem autoLogin " prop="autoLogin">
+              <el-checkbox v-model="form.autoLogin">自动登陆</el-checkbox>
+            </el-form-item>
+            <el-button class="loginBtn" @click="validate">登录</el-button>
+            <div class="as">
+              <router-link class="forgetPass" to="/findPassword"
+                >忘记密码</router-link
+              >
+              <span class="line"></span>
+              <router-link class="register" to="/register"
+                >注册新账号</router-link
+              >
             </div>
-          </el-col>
-        </el-row>
+          </el-form>
+        </div>
       </div>
     </div>
   </div>
@@ -73,13 +66,22 @@
 import { Component, Vue, Watch } from "vue-property-decorator";
 import user from "@/store/modules/user";
 import { RegAccount } from "@/utils";
+import { ElForm } from "element-ui/types/form";
 @Component
 export default class extends Vue {
   private verifyImg = "";
   private form: ILogin = {
     loginAccount: "",
     loginPassword: "",
-    validateCode: ""
+    validateCode: "",
+    autoLogin: false
+  };
+  private rules = {
+    loginAccount: [
+      { required: true, message: "请输入用户名", trigger: "blur" }
+    ],
+    loginPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
+    validateCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
   };
   created() {
     this.setVerifyImg();
@@ -89,172 +91,130 @@ export default class extends Vue {
       this.$basePath
     }/captcha/info/captchaImage?t=${Date.now()}`;
   }
+  validate() {
+    (this.$refs.form as ElForm).validate(x => x && this.submit());
+  }
+
   async submit() {
-    if (!RegAccount.test(this.form.loginAccount))
-      return this.$message.error("您输入的账号错误");
-    if (!RegAccount.test(this.form.loginPassword))
-      return this.$message.error("您输入的密码错误");
-    if (this.form.validateCode.length !== 4)
-      return this.$message.error("您输入的验证码错误");
     const token = await user.setToken(this.form);
     if (!token) return this.setVerifyImg();
     this.$message.success("登陆成功");
+    (this.$refs.form as ElForm).resetFields();
     this.$router.push("/user");
   }
 }
 </script>
 <style lang="scss" scoped>
-.topDiv {
-  height: 9rem;
-  line-height: 9rem;
-  background: #fff;
-  .title {
-    font-size: 2.2rem;
-    font-weight: bold;
-    color: #fd5522;
-  }
-  .line {
-    display: inline-block;
-    height: 3rem;
-    width: 0.1rem;
-    background: #e5e5e5;
-    margin: 0 2rem;
-    vertical-align: middle;
-  }
-  .info {
-    font-size: 1.8rem;
-    font-weight: bold;
-    color: #666;
-  }
-}
-.loginDiv {
-  background: #fff;
-  padding: 1.6rem;
-  box-sizing: border-box;
-  border-radius: 0.4rem;
-  box-shadow: 2px 2px 12px #ddd;
-  .name {
-    height: 3rem;
-    line-height: 3rem;
-    font-size: 1.6rem;
-    color: #333;
-    position: relative;
-    .line {
-      display: inline-block;
-      height: 1.8rem;
-      width: 0.4rem;
-      background: #fd5522;
-      position: absolute;
-      left: -1.6rem;
-      top: 0.6rem;
-    }
-  }
-  .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;
-    cursor: pointer;
-    .yzm {
-      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;
+.bg-F5 {
+  .topDiv {
+    height: 9rem;
+    line-height: 9rem;
+    background: #fff;
+    .title {
+      font-size: 2.2rem;
+      font-weight: bold;
+      color: #fd5522;
     }
-  }
-  .newDiv {
-    height: 4rem;
-    line-height: 4rem;
-    text-align: right;
-    font-size: 1.4rem;
     .line {
-      height: 1rem;
+      display: inline-block;
+      height: 3rem;
       width: 0.1rem;
       background: #e5e5e5;
-      margin: 0 1rem;
+      margin: 0 2rem;
       vertical-align: middle;
-      display: inline-block;
     }
-    .forgetPass {
+    .info {
+      font-size: 1.8rem;
+      font-weight: bold;
       color: #666;
     }
-    .register {
-      color: #fd5522;
+  }
+
+  .bg {
+    background: #84ccc9;
+    padding: 75px 0;
+    .container {
+      overflow: hidden;
+      > img {
+        margin-left: 180px;
+        margin-top: 50px;
+        float: left;
+      }
+      .loginDiv {
+        width: 320px;
+        height: 338px;
+        margin-left: 218px;
+        float: left;
+        background: #fff;
+
+        box-sizing: border-box;
+        border-radius: 0.4rem;
+        box-shadow: 2px 2px 12px #ddd;
+        .x-title {
+          margin-top: 20px;
+        }
+        .form {
+          padding: 15px 20px;
+          .formItem {
+            height: 40px;
+            line-height: 40px;
+            box-sizing: border-box;
+            border-radius: 4px;
+            margin-bottom: 15px;
+            position: relative;
+            .icon {
+              position: absolute;
+              left: 10px;
+              top: 50%;
+              transform: translateY(-50%);
+              z-index: 1;
+              width: 12px;
+            }
+            &.autoLogin {
+              height: auto;
+            }
+          }
+          .loginBtn {
+            width: 100%;
+            background: #fd5522;
+            color: #fff;
+            border-color: #fd5522;
+          }
+          .as {
+            margin-top: 15px;
+            font-size: 1.2rem;
+            text-align: right;
+            .line {
+              height: 1rem;
+              width: 0.1rem;
+              background: #e5e5e5;
+              margin: 0 1rem;
+              vertical-align: middle;
+              display: inline-block;
+            }
+            .forgetPass {
+              color: #666;
+            }
+            .register {
+              color: #fd5522;
+            }
+          }
+        }
+      }
     }
   }
 }
-.bgImg {
-  background: url("~@assets/loginbg.png") no-repeat;
-  background-size: 100% 100%;
-}
-.bg-F5 {
-  background: #f5f5f5;
-}
-.pt3rem {
-  padding-top: 3rem;
-}
-.pb3rem {
-  padding-bottom: 3rem;
-}
-.fr {
-  float: right;
-}
-.per70 {
-  width: 70%;
-  float: left;
-}
 </style>
 <style lang="scss">
-.loginDiv {
-  .el-checkbox__input.is-checked .el-checkbox__inner {
-    background-color: #fff;
-    border-color: #e5e5e5;
-  }
-  .el-checkbox__inner::after {
-    border-color: #333;
-  }
-  .el-checkbox__inner:hover {
-    border-color: #e5e5e5;
-  }
-  .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;
-    }
+.formItem.yzm {
+  .el-input {
+    width: 150px;
+  }
+  .verifyImg {
+    height: 40px;
+    width: 108px;
+    margin-left: 10px;
+    vertical-align: middle;
   }
 }
 </style>

src/views/account/register.vue

@@ -7,228 +7,242 @@
         <span class="info">用户注册</span>
       </div>
     </div>
-    <div class="bgImg">
-      <div class="container pt3rem pb3rem">
-        <el-row :gutter="20">
-          <el-col :span="8" :offset="16">
-            <div class="loginDiv">
-              <div class="name"><span class="line"></span>用户注册</div>
-              <div class="inputDiv">
-                <img src="@assets/user.png" alt="" />
-                <el-input
-                  class="fr"
-                  placeholder="登录账号"
-                  v-model="form.loginAccount"
-                >
-                </el-input>
-              </div>
-              <div class="inputDiv">
-                <img src="@assets/lock.png" alt="" />
-                <el-input
-                  class="fr"
-                  type="password"
-                  placeholder="登录密码"
-                  v-model="form.loginPassword"
-                >
-                </el-input>
-              </div>
-              <div class="inputDiv">
-                <img src="@assets/phone.png" alt="" />
-                <el-input
-                  class="fr"
-                  placeholder="手机号码"
-                  v-model="form.phone"
-                >
-                </el-input>
-              </div>
-              <div class="yzmDiv">
-                <div class="inputDiv per70">
-                  <img src="@assets/yz.png" alt="" />
-                  <el-input class="fr" placeholder="验证码" style="width:88%;">
-                  </el-input>
-                </div>
-                <div class="yzm">获取验证码</div>
-              </div>
-              <div class="checkboxDiv">
-                <el-checkbox v-model="flag">我已阅读并同意</el-checkbox
-                ><a class="xieyi" href="javascript:;"
-                  >《用户服务协议和平台免责条款》</a
-                >
-              </div>
-              <div>
-                <el-button class="loginBtn" @click="submit">注册</el-button>
-              </div>
-            </div>
-          </el-col>
-        </el-row>
+    <div class="bg">
+      <div class="container  ">
+        <img src="@assets/loginbg.png" />
+        <div class="loginDiv">
+          <div class="x-title">用户注册</div>
+          <el-form :model="form" :rules="rules" class="form" ref="form">
+            <el-form-item class="formItem" prop="loginAccount">
+              <img class="icon" src="@assets/user.png" alt="" />
+              <el-input
+                v-model="form.loginAccount"
+                prefix-icon="x-el-icon-user"
+                placeholder="登录账号"
+              />
+            </el-form-item>
+            <el-form-item class="formItem" prop="loginPassword">
+              <img class="icon" src="@assets/lock.png" alt="" />
+              <el-input
+                v-model="form.loginPassword"
+                prefix-icon="x-el-icon-lock"
+                placeholder="登录密码"
+              />
+            </el-form-item>
+            <el-form-item class="formItem" prop="phone">
+              <img class="icon" src="@assets/phone.png" alt="" />
+              <el-input
+                v-model="form.phone"
+                prefix-icon="x-el-icon-lock"
+                placeholder="手机号码"
+              />
+            </el-form-item>
+            <el-form-item class="formItem yzm" prop="validateCode">
+              <img class="icon" src="@assets/yz.png" alt="" />
+              <el-input
+                v-model="form.validateCode"
+                prefix-icon="icon-yzm"
+                placeholder="验证码"
+              />
+              <div class="getyzm">获取验证码</div>
+            </el-form-item>
+            <el-form-item class="formItem check " prop="check">
+              <el-checkbox v-model="form.check">我已阅读并同意</el-checkbox
+              ><a class="xieyi" href="javascript:;"
+                >《用户服务协议和平台免责条款》</a
+              >
+            </el-form-item>
+
+            <el-button class="loginBtn" @click="validate">注册</el-button>
+          </el-form>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
+import user from "@/store/modules/user";
 import { RegAccount } from "@/utils";
+import { ElForm } from "element-ui/types/form";
 @Component
 export default class extends Vue {
-  private flag = false;
-  private form = {
+  private verifyImg = "";
+  private form: ILogin = {
     loginAccount: "",
     loginPassword: "",
-    phone: ""
+    validateCode: "",
+    autoLogin: false
+  };
+  private rules = {
+    loginAccount: [
+      { required: true, message: "请输入用户名", trigger: "blur" },
+      {
+        validator: (rule: any, value: string, callback: any) =>
+          callback(
+            RegAccount.test(value)
+              ? undefined
+              : new Error("用户名必须为9到16位由数字字母组合")
+          ),
+        trigger: "blur"
+      }
+    ],
+    loginPassword: [
+      { required: true, message: "请输入密码", trigger: "blur" },
+      {
+        validator: (rule: any, value: string, callback: any) =>
+          callback(
+            RegAccount.test(value)
+              ? undefined
+              : new Error("密码必须为9到16位由数字字母组合")
+          ),
+        trigger: "blur"
+      }
+    ],
+    phone: [
+      { required: true, message: "请输入手机号码", trigger: "blur" },
+      {
+        validator: (rule: any, value: string, callback: any) =>
+          callback(
+            /^1[3|4|5|7|8][0-9]\d{8}$/.test(value)
+              ? undefined
+              : new Error("请输入正确的手机号")
+          ),
+        trigger: "blur"
+      }
+    ],
+    validateCode: [
+      { required: true, message: "请输入验证码", trigger: "blur" }
+    ],
+    check: [
+      {
+        validator: (rule: any, value: boolean, callback: any) =>
+          callback(value ? undefined : new Error("请同意免责条款")),
+        trigger: "blur"
+      }
+    ]
   };
 
+  validate() {
+    (this.$refs.form as ElForm).validate(x => x && this.submit());
+  }
+
   async submit() {
-    if (!RegAccount.test(this.form.loginAccount))
-      return this.$message.error("请输入9到16位由数字字母组合的账号");
-    if (!RegAccount.test(this.form.loginPassword))
-      return this.$message.error("请输入9到16位由数字字母组合的密码");
-    if (!/^1[3456789]\d{9}$/.test(this.form.phone))
-      return this.$message.error("请正确输入手机号");
-    if (!this.flag) return this.$message.error("请同意服务条款");
     const [err] = await this.$post("/member/info/userRegister", this.form);
     if (err) return;
     this.$message.success("注册成功 请登陆");
+    (this.$refs.form as ElForm).resetFields();
     this.$router.push("/login");
   }
 }
 </script>
 <style lang="scss" scoped>
-.topDiv {
-  height: 9rem;
-  line-height: 9rem;
-  background: #fff;
-  .title {
-    font-size: 2.2rem;
-    font-weight: bold;
-    color: #fd5522;
-  }
-  .line {
-    display: inline-block;
-    height: 3rem;
-    width: 0.1rem;
-    background: #e5e5e5;
-    margin: 0 2rem;
-    vertical-align: middle;
-  }
-  .info {
-    font-size: 1.8rem;
-    font-weight: bold;
-    color: #666;
-  }
-}
-.loginDiv {
-  background: #fff;
-  padding: 1.6rem;
-  box-sizing: border-box;
-  border-radius: 0.4rem;
-  box-shadow: 2px 2px 12px #ddd;
-  .name {
-    height: 3rem;
-    line-height: 3rem;
-    font-size: 1.6rem;
-    color: #333;
-    position: relative;
-    .line {
-      display: inline-block;
-      height: 1.8rem;
-      width: 0.4rem;
-      background: #fd5522;
-      position: absolute;
-      left: -1.6rem;
-      top: 0.6rem;
-    }
-  }
-  .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%;
-      font-size: 1.4rem;
+.bg-F5 {
+  .topDiv {
+    height: 9rem;
+    line-height: 9rem;
+    background: #fff;
+    .title {
+      font-size: 2.2rem;
+      font-weight: bold;
       color: #fd5522;
-      text-align: center;
-      float: right;
-      background: #ffded5;
-      border-radius: 0.4rem;
-      margin-top: 2rem;
     }
-  }
-  .checkboxDiv {
-    margin-top: 2rem;
-  }
-
-  .loginBtn {
-    width: 100%;
-    background: #fd5522;
-    color: #fff;
-    border-color: #fd5522;
-    margin-top: 2rem;
-  }
-  .xieyi {
-    color: #fd5522;
-  }
-
-  .newDiv {
-    height: 4rem;
-    line-height: 4rem;
-    text-align: right;
-    font-size: 1.4rem;
     .line {
-      height: 1rem;
+      display: inline-block;
+      height: 3rem;
       width: 0.1rem;
       background: #e5e5e5;
-      margin: 0 1rem;
+      margin: 0 2rem;
       vertical-align: middle;
-      display: inline-block;
     }
-    .forgetPass {
+    .info {
+      font-size: 1.8rem;
+      font-weight: bold;
       color: #666;
     }
-    .register {
-      color: #fd5522;
+  }
+
+  .bg {
+    background: #84ccc9;
+    padding: 75px 0;
+    .container {
+      overflow: hidden;
+      > img {
+        margin-left: 180px;
+        margin-top: 50px;
+        float: left;
+      }
+      .loginDiv {
+        // width: 320px;
+        // height: 338px;
+        margin-left: 218px;
+        float: left;
+        background: #fff;
+
+        box-sizing: border-box;
+        border-radius: 0.4rem;
+        box-shadow: 2px 2px 12px #ddd;
+        .x-title {
+          margin-top: 20px;
+        }
+        .form {
+          padding: 15px 20px;
+          .formItem {
+            height: 40px;
+            line-height: 40px;
+            box-sizing: border-box;
+            border-radius: 4px;
+            margin-bottom: 20px;
+            position: relative;
+            .icon {
+              position: absolute;
+              left: 10px;
+              top: 50%;
+              transform: translateY(-50%);
+              z-index: 1;
+              width: 12px;
+            }
+            &.check {
+              height: auto;
+            }
+          }
+          .loginBtn {
+            width: 100%;
+            background: #fd5522;
+            color: #fff;
+            border-color: #fd5522;
+          }
+        }
+      }
+      .getyzm {
+        height: 40px;
+        line-height: 40px;
+        width: 100px;
+        font-size: 14px;
+        color: #fd5522;
+        text-align: center;
+        float: right;
+        background: #ffded5;
+        border-radius: 0.4rem;
+        cursor: pointer;
+      }
+      .xieyi {
+        color: #fd5522;
+      }
     }
   }
 }
-.bgImg {
-  background: url("~@assets/loginbg.png") no-repeat;
-  background-size: 100% 100%;
-}
-.bg-F5 {
-  background: #f5f5f5;
-}
-.pt3rem {
-  padding-top: 3rem;
-}
-.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;
+.formItem.yzm {
+  .el-input {
+    width: 200px;
+  }
+  .verifyImg {
+    height: 40px;
+    width: 108px;
+    margin-left: 10px;
+    vertical-align: middle;
   }
 }
 </style>

src/views/home/index.vue

@@ -88,7 +88,7 @@
           <span class="more">more<i class="el-icon-d-arrow-right"></i></span>
         </router-link>
       </div>
-      <div class="rmsp">
+      <!-- <div class="rmsp">
         <router-link
           :to="`/shop/${item.companyId}/${item.id}`"
           class="product"
@@ -107,14 +107,32 @@
             <div class="company mt15px">{{ item.companyName }}</div>
           </div>
         </router-link>
+      </div> -->
+      <div class="rmspList">
+        <router-link
+          :to="`/shop/${item.companyId}/${item.id}`"
+          class="product"
+          v-for="item in products"
+          :key="item.id"
+        >
+          <div class="imgDiv">
+            <img :src="`${$basePath}${item.cover}`" />
+          </div>
+          <div class="name">{{ item.name }}</div>
+          <div class="money">
+            ¥
+            <span>{{ item.price }}</span>
+          </div>
+          <div class="company ">{{ item.companyName }}</div>
+        </router-link>
       </div>
-      <div class="partTitle">
+      <div class="partTitle ppsj">
         <span class="orangeLine"></span>品牌商家<span class="more"
           >more<i class="el-icon-d-arrow-right"></i
         ></span>
       </div>
-      <div class="rmsp">
-        <div class="ppsjItem" v-for="item in 5" :key="item">
+      <div class="ppsjList">
+        <div class="item" v-for="item in 5" :key="item">
           <div class="imgDiv2">
             <img src="@assets/changjia.png" alt />
           </div>
@@ -213,9 +231,9 @@ export default class extends Vue {
 
   async created() {
     const [
-      [, { list: p }],
-      [, { demandList: d }],
-      [, { supplyList: s }],
+      { list: p },
+      { demandList: d },
+      { supplyList: s },
       ...n
     ] = await Promise.all([
       this.$post("/goods/info/hotlist"),
@@ -224,10 +242,10 @@ export default class extends Vue {
       this.$post("/interface/notice/getNoticeListTop5", { noticeType: 1 }),
       this.$post("/interface/notice/getNoticeListTop5", { noticeType: 2 }),
       this.$post("/interface/notice/getNoticeListTop5", { noticeType: 3 })
-    ]);
+    ]).then(x => x.map(([, data]) => data));
     this.products = p;
     this.infos = [d, s];
-    this.notices = n.map(([, { list }]) => list);
+    this.notices = n.map(({ list }) => list);
   }
 }
 </script>
@@ -274,6 +292,9 @@ export default class extends Vue {
   padding: 3rem 0 2rem 0;
   font-size: 1.8rem;
   color: #333;
+  &.ppsj {
+    padding-top: 2rem;
+  }
   .orangeLine {
     display: inline-block;
     height: 1.8rem;
@@ -331,22 +352,17 @@ export default class extends Vue {
   }
 }
 
-.rmsp {
+.ppsjList {
   width: 100%;
   overflow: hidden;
-  // a {
-  //   overflow: hidden;
-  //   border: 1px red solid;
-  //   display: inline-block;
-  // }
-  .rmspItem,
-  .ppsjItem {
+  .item {
     width: 18%;
     float: left;
     margin-right: 2.5%;
     background: #fff;
     border-radius: 0.4rem;
     box-sizing: border-box;
+    padding-bottom: 1.6rem;
     &:last-child {
       margin-right: 0;
     }
@@ -358,6 +374,8 @@ export default class extends Vue {
       font-weight: bold;
       margin-top: 2rem;
       overflow: hidden;
+      padding: 0 2rem;
+      box-sizing: border-box;
     }
     .company {
       height: 2rem;
@@ -365,41 +383,62 @@ export default class extends Vue {
       font-size: 1.2rem;
       color: #666;
       overflow: hidden;
+      padding: 0 2rem;
+      box-sizing: border-box;
+    }
+    img {
+      width: 100%;
     }
   }
-  .rmspItem {
+}
+.rmspList {
+  .product {
+    display: inline-block;
+    width: 216px;
+    height: 340px;
+    background: #fff;
+    overflow: hidden;
+    margin-right: 20px;
+    margin-bottom: 1rem;
+    border-radius: 0.4rem;
+    box-sizing: border-box;
     padding: 2rem;
-    height: 30rem;
+    &:nth-child(5n + 5) {
+      margin-right: 0;
+    }
     .imgDiv {
       border: 0.1rem solid #e5e5e5;
+      width: 175px;
+      height: 200px;
       text-align: center;
       line-height: 0;
+      position: relative;
       img {
-        width: 100%;
+        width: 90%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
     }
+    .name {
+      font-size: 1.4rem;
+      color: #333;
+      font-weight: bold;
+      margin-top: 15px;
+    }
     .money {
-      height: 2rem;
-      line-height: 2rem;
-      font-size: 1.8rem;
+      font-size: 1.2rem;
+      margin-top: 5px;
       color: #fd5522;
-      margin-top: 1.5rem;
-    }
-  }
-  .ppsjItem {
-    padding-bottom: 1.6rem;
-    .imgDiv {
-      img {
-        width: 100%;
+      span {
+        font-size: 1.8rem;
       }
     }
-    .name {
-      padding: 0 2rem;
-      box-sizing: border-box;
-    }
     .company {
-      padding: 0 2rem;
-      box-sizing: border-box;
+      margin-top: 10px;
+      font-size: 1.2rem;
+      color: #666;
     }
   }
 }

src/views/news/index.vue

@@ -1,7 +1,26 @@
 <template>
   <div class="bg-F5">
     <div class="container">
-      <div class="infoTabDiv">
+      <tab class="tab" titles="我的关注,我的需求" :currIndex.sync="currIndex" />
+      <load-more url="/interface/notice/getNoticeListAll" :params="params">
+        <div class="item">
+          <div class="dateDiv">
+            <div class="day">{{ item.createDay }}</div>
+            <div>{{ item.createMonth }}</div>
+          </div>
+          <router-link
+            class="conDiv"
+            :to="`/news/newsDetail?noticeId=${item.noticeId}`"
+          >
+            <div class="tit">{{ item.noticeTitle }}</div>
+            <div class="detail">
+              <div v-html="item.noticeContent"></div>
+              <span class="xq">详情<i class="el-icon-d-arrow-right"></i></span>
+            </div>
+          </router-link>
+        </div>
+      </load-more>
+      <!-- <div class="infoTabDiv">
         <el-tabs v-model="activeName" @tab-click="tabChange">
           <el-tab-pane label="通知公告" name="first">
             <div class="listDiv">
@@ -85,92 +104,103 @@
         :current-page="currentPage"
         layout="prev, pager, next,total, jumper"
         :total="total"
-      ></el-pagination>
+      ></el-pagination> -->
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      activeName: "first",
-      tzggArr: [],
-      hyzxArr: [],
-      jjbyArr: [],
-      currentPage: 1,
-      pageSize: 10,
-      total: 0
-    };
-  },
-  methods: {
-    tabChange() {
-      var that = this;
-      that.currentPage = 1;
-      if (that.activeName == "first") {
-        that.listAll(1);
-      } else if (that.activeName == "second") {
-        that.listAll(2);
-      } else if (that.activeName == "third") {
-        that.listAll(3);
-      }
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      if (that.activeName == "first") {
-        that.listAll(1);
-      } else if (that.activeName == "second") {
-        that.listAll(2);
-      } else {
-        that.listAll(3);
-      }
-    },
-    listAll(noticeType) {
-      var that = this;
-      that
-        .$post("interface/notice/getNoticeListAll", {
-          pageNum: that.currentPage1,
-          pageSize: that.pageSize1,
-          noticeType: noticeType
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            res[1].rows.forEach(function(item, index) {
-              let date = [];
-              let dateTime = [];
-              if (item.createTime) {
-                dateTime = item.createTime.split(" ");
-                date = dateTime[0].split("-");
-                item.createDay = date[2];
-                item.createMonth = date[0] + "-" + date[1];
-              }
-            });
-            that.total = res[1].total;
-            if (noticeType == 1) {
-              that.tzggArr = res[1].rows;
-            } else if (noticeType == 2) {
-              that.hyzxArr = res[1].rows;
-            } else {
-              that.jjbyArr = res[1].rows;
-            }
-          }
-        });
-    }
-  },
-  activated() {
-    if (this.$route.query.active) {
-      this.activeName = this.$route.query.active;
-      this.tabChange();
-    }
-  },
-  mounted() {
-    this.listAll(1);
-    this.listAll(2);
-    this.listAll(3);
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+@Component
+export default class extends Vue {
+  @Prop(String) private index!: string;
+  private currIndex: number = 0;
+  private params: IAny | null = null;
+  @Watch("currIndex", { immediate: true })
+  currIndexChange() {
+    this.params = { noticeType: this.currIndex + 1 };
   }
-};
+}
+// export default {
+//   name: "app",
+//   components: {},
+//   data() {
+//     return {
+//       activeName: "first",
+//       tzggArr: [],
+//       hyzxArr: [],
+//       jjbyArr: [],
+//       currentPage: 1,
+//       pageSize: 10,
+//       total: 0
+//     };
+//   },
+//   methods: {
+//     tabChange() {
+//       var that = this;
+//       that.currentPage = 1;
+//       if (that.activeName == "first") {
+//         that.listAll(1);
+//       } else if (that.activeName == "second") {
+//         that.listAll(2);
+//       } else if (that.activeName == "third") {
+//         that.listAll(3);
+//       }
+//     },
+//     handleCurrentChange(val) {
+//       this.currentPage = val;
+//       if (that.activeName == "first") {
+//         that.listAll(1);
+//       } else if (that.activeName == "second") {
+//         that.listAll(2);
+//       } else {
+//         that.listAll(3);
+//       }
+//     },
+//     listAll(noticeType) {
+//       var that = this;
+//       that
+//         .$post("interface/notice/getNoticeListAll", {
+//           pageNum: that.currentPage1,
+//           pageSize: that.pageSize1,
+//           noticeType: noticeType
+//         })
+//         .then(function(res) {
+//           console.log(res);
+//           if (!res[0]) {
+//             res[1].rows.forEach(function(item, index) {
+//               let date = [];
+//               let dateTime = [];
+//               if (item.createTime) {
+//                 dateTime = item.createTime.split(" ");
+//                 date = dateTime[0].split("-");
+//                 item.createDay = date[2];
+//                 item.createMonth = date[0] + "-" + date[1];
+//               }
+//             });
+//             that.total = res[1].total;
+//             if (noticeType == 1) {
+//               that.tzggArr = res[1].rows;
+//             } else if (noticeType == 2) {
+//               that.hyzxArr = res[1].rows;
+//             } else {
+//               that.jjbyArr = res[1].rows;
+//             }
+//           }
+//         });
+//     }
+//   },
+//   activated() {
+//     if (this.$route.query.active) {
+//       this.activeName = this.$route.query.active;
+//       this.tabChange();
+//     }
+//   },
+//   mounted() {
+//     this.listAll(1);
+//     this.listAll(2);
+//     this.listAll(3);
+//   }
+// };
 </script>
 <style scoped lang="scss">
 .listDiv {
@@ -262,24 +292,78 @@ export default {
   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;
+<style lang="scss" scoped>
+.item {
+  width: 100%;
+  min-height: 7rem;
+  position: relative;
+  padding-left: 7rem;
+  margin-top: 2rem;
+  box-sizing: border-box;
+
+  .dateDiv {
+    height: 8rem;
+    width: 8rem;
+    color: #fff;
+    text-align: center;
+    background: #fd5522;
+    border-radius: 0.5rem;
+    position: absolute;
+    left: -3.5rem;
+    top: 0;
+
+    > div {
+      font-size: 1.6rem;
+      height: 2.8rem;
+      line-height: 2.8rem;
+    }
+
+    .day {
+      height: 5rem;
+      line-height: 5rem;
+      font-size: 2.5em;
+      font-weight: bolder;
+      border-bottom: 0.1rem solid #fff;
+    }
   }
-  .el-tabs__active-bar {
-    background-color: #fd5522;
+  .conDiv {
+    width: 100%;
+    display: block;
+    height: 100%;
+    padding: 0 1rem;
+    background: #fff;
+    box-shadow: 2px 2px 12px #ddd;
+    box-sizing: border-box;
+    border-radius: 0.3rem;
+
+    .tit {
+      height: 3rem;
+      line-height: 3rem;
+      font-size: 1.6rem;
+      font-weight: bolder;
+    }
+
+    .detail {
+      height: 5rem;
+      line-height: 1.6rem;
+      div {
+        height: 3.2rem;
+        line-height: 1.6rem;
+        font-size: 1.2rem;
+        color: #666;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .xq {
+        color: #fd5522;
+        margin-left: 1rem;
+      }
+    }
   }
 }
 </style>