提交

src/views/account/findPassword.vue

@@ -1,10 +1,170 @@
 <template>
-  <div>
-    找回密码
+  <div class="bg-F5">
+    <div class="topDiv">
+      <div class="container">
+        <span class="title">中国钢制家具产业聚集网</span>
+        <span class="line"></span>
+        <span class="info">忘记密码</span>
+      </div>
+    </div>
+    <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>
+              <el-input
+                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">
+              </el-input>
+            </div>
+            <div>
+              <el-input
+                placeholder="验证码"
+                prefix-icon="el-icon-lock"
+                style="width:70%;"
+                v-model="form.yzm">
+              </el-input>
+              <div class="yzm">获取验证码</div>
+            </div>
+            <div>
+              <el-input
+                type="password"
+                placeholder="新密码"
+                prefix-icon="el-icon-lock"
+                v-model="form.password">
+              </el-input>
+            </div>
+            <div>
+              <el-button class="loginBtn">提交</el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </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 {
+      form: {
+        username:'',
+        password:'',
+        yzm:'',
+        zddl:false,
+        phone:'',
+      },
+    };
+  },
+  methods: {},
+}
 </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;
+      }
+    }
+    div{
+      margin-top: 1rem;
+      .yzm{
+        height: 4rem;
+        line-height: 4rem;
+        width: 28%;
+        font-size: 1.4rem;
+        color:#fd5522;
+        text-align:center;
+        float: right;
+        background: #FFDED5;
+        border-radius:0.4rem;
+      }
+      .loginBtn{
+        width: 100%;
+        background:#fd5522;
+        color: #FFF;
+        border-color: #fd5522;
+      }
+    }
+    .newDiv{
+      height: 4rem;
+      line-height: 4rem;
+      text-align: right;
+      font-size: 1.4rem;
+      .line{
+        height: 1rem;
+        width:0.1rem;
+        background:#e5e5e5;
+        margin: 0 1rem;
+        vertical-align: middle;
+        display: inline-block;
+      }
+      .forgetPass{
+        color: #666;
+      }
+      .register{
+        color:#fd5522;
+      }
+    }
+  }
+  .bg-F5{
+    background: #F5F5F5;
+  }
+  .pt3rem{
+    padding-top: 3rem;
+  }
+  .pb3rem{
+    padding-bottom: 3rem;
+  }
+</style>

src/views/account/login.vue

@@ -1,10 +1,167 @@
 <template>
-  <div>
-    登陆
+  <div class="bg-F5">
+    <div class="topDiv">
+      <div class="container">
+        <span class="title">中国钢制家具产业聚集网</span>
+        <span class="line"></span>
+        <span class="info">欢迎登录</span>
+      </div>
+    </div>
+    <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>
+              <el-input
+                placeholder="用户名(支持手机号)"
+                prefix-icon="el-icon-user"
+                v-model="form.username">
+              </el-input>
+            </div>
+            <div>
+              <el-input
+                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>
+            <div>
+              <el-checkbox v-model="form.zddl">自动登录</el-checkbox>
+            </div>
+            <div>
+              <el-button class="loginBtn">登录</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>
+        </el-col>
+      </el-row>
+    </div>
   </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 {
+      form: {
+        username:'',
+        password:'',
+        yzm:'',
+        zddl:false,
+      },
+    };
+  },
+  methods: {},
+}
 </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;
+      }
+    }
+    div{
+      margin-top: 1rem;
+      .yzm{
+        height: 4rem;
+        line-height: 4rem;
+        width: 28%;
+        float: right;
+        background: #EEEEEE;
+        border-radius:0.4rem;
+      }
+      .loginBtn{
+        width: 100%;
+        background:#fd5522;
+        color: #FFF;
+        border-color: #fd5522;
+      }
+    }
+    .newDiv{
+      height: 4rem;
+      line-height: 4rem;
+      text-align: right;
+      font-size: 1.4rem;
+      .line{
+        height: 1rem;
+        width:0.1rem;
+        background:#e5e5e5;
+        margin: 0 1rem;
+        vertical-align: middle;
+        display: inline-block;
+      }
+      .forgetPass{
+        color: #666;
+      }
+      .register{
+        color:#fd5522;
+      }
+    }
+  }
+  .bg-F5{
+    background: #F5F5F5;
+  }
+  .pt3rem{
+    padding-top: 3rem;
+  }
+  .pb3rem{
+    padding-bottom: 3rem;
+  }
+</style>

src/views/account/register.vue

@@ -1,10 +1,176 @@
 <template>
-  <div>
-    注册
+  <div class="bg-F5">
+    <div class="topDiv">
+      <div class="container">
+        <span class="title">中国钢制家具产业聚集网</span>
+        <span class="line"></span>
+        <span class="info">用户注册</span>
+      </div>
+    </div>
+    <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>
+              <el-input
+                placeholder="登录账号"
+                prefix-icon="el-icon-user"
+                v-model="form.username">
+              </el-input>
+            </div>
+            <div>
+              <el-input
+                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">
+              </el-input>
+            </div>
+            <div>
+              <el-input
+                placeholder="验证码"
+                prefix-icon="el-icon-lock"
+                style="width:70%;"
+                v-model="form.yzm">
+              </el-input>
+              <div class="yzm">获取验证码</div>
+            </div>
+            <div>
+              <el-checkbox v-model="form.zddl">我已阅读并同意</el-checkbox><a class="xieyi" href="javascript:;">《用户服务协议和平台免责条款》</a>
+            </div>
+            <div>
+              <el-button class="loginBtn">注册</el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </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 {
+      form: {
+        username:'',
+        password:'',
+        yzm:'',
+        zddl:false,
+        phone:'',
+      },
+    };
+  },
+  methods: {},
+}
 </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;
+      }
+    }
+    div{
+      margin-top: 1rem;
+      .yzm{
+        height: 4rem;
+        line-height: 4rem;
+        width: 28%;
+        font-size: 1.4rem;
+        color:#fd5522;
+        text-align:center;
+        float: right;
+        background: #FFDED5;
+        border-radius:0.4rem;
+      }
+      .loginBtn{
+        width: 100%;
+        background:#fd5522;
+        color: #FFF;
+        border-color: #fd5522;
+      }
+      .xieyi{
+        color: #fd5522;
+      }
+    }
+    .newDiv{
+      height: 4rem;
+      line-height: 4rem;
+      text-align: right;
+      font-size: 1.4rem;
+      .line{
+        height: 1rem;
+        width:0.1rem;
+        background:#e5e5e5;
+        margin: 0 1rem;
+        vertical-align: middle;
+        display: inline-block;
+      }
+      .forgetPass{
+        color: #666;
+      }
+      .register{
+        color:#fd5522;
+      }
+    }
+  }
+  .bg-F5{
+    background: #F5F5F5;
+  }
+  .pt3rem{
+    padding-top: 3rem;
+  }
+  .pb3rem{
+    padding-bottom: 3rem;
+  }
+</style>

src/views/home/index.vue

@@ -1,5 +1,54 @@
 <template>
   <div class="bg-F5">
+    <div class="header">
+      <div class="topDiv">
+        <div class="container">
+          <lang-select />
+          <div class="login">
+            <router-link to="/login">请登录</router-link>
+          </div>
+          <div class="register">
+            <router-link to="/register">免费注册</router-link>
+          </div>
+          <div class="rightDiv">
+            <div class="sjrz">
+              <router-link to="/merchantEntry">
+                <img src="@assets/sjrz.png" alt="" />
+                商家入驻
+              </router-link>
+            </div>
+            <div class="line"></div>
+            <div class="spfb">
+              <img src="@assets/spfb.png" alt="" />
+              商品发布
+            </div>
+            <div class="line"></div>
+            <div class="spfb">
+              个人中心
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="logoDiv container">
+        <div class="logoTitle">中国钢制家具产业聚集网</div>
+        <div class="searchDiv">
+          <el-select class="searchFl" v-model="homeSearchOption" placeholder="">
+            <el-option label="产品" value="1"></el-option>
+            <el-option label="企业" value="2"></el-option>
+          </el-select>
+          <span class="line"></span>
+          <el-input
+            placeholder="请输入内容"
+            v-model="homeSearchVal"
+            class="input-with-select"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <el-button class="searchBtn">搜索</el-button>
+        </div>
+      </div>
+      <y-nav />
+    </div>
     <div class="container">
       <el-row class="mt2rem" :gutter="20">
         <el-col :span="4">
@@ -39,8 +88,12 @@
             </div>
             <div class="username">您还未登录哦！</div>
             <div class="btnDiv">
+              <router-link to="/login">
               <el-button class="leftBtn">登录</el-button>
+              </router-link>
+              <router-link to="/register">
               <el-button class="rightBtn">注册</el-button>
+              </router-link>
             </div>
           </div>
           <div class="noticeDiv">
@@ -236,14 +289,21 @@
 </template>
 <script>
 import { Component, Vue } from "vue-property-decorator";
+import langSelect from "@/components/LangSelect.vue";
+import yNav from "@/layout/components/nav.vue";
 export default {
   name: "app",
-  components: {},
+  components: {
+    langSelect,
+    yNav,
+  },
   data() {
     return {
       shangpin: [],
       activeIndex: "a",
-      activeIndex2: "a"
+      activeIndex2: "a",
+      homeSearchVal: "",
+      homeSearchOption: "1"
     };
   },
   methods: {
@@ -380,7 +440,7 @@ export default {
       border-color: #fd5522;
       background: #fff;
       padding: 0;
-      border: 0;
+      // border: 0;
     }
   }
 }

src/views/home/merchantEntry.vue

@@ -1,6 +1,59 @@
 <template>
-  <div>
-    <div class="bannerDiv">商家入驻申请</div>
+  <div class="bg-F5">
+    <div class="header">
+      <div class="topDiv">
+        <div class="container">
+          <lang-select />
+          <div class="login">
+            <router-link to="/login">请登录</router-link>
+          </div>
+          <div class="register">
+            <router-link to="/register">免费注册</router-link>
+          </div>
+          <div class="rightDiv">
+            <div class="sjrz">
+              <router-link to="/merchantEntry">
+                <img src="@assets/sjrz.png" alt="" />
+                商家入驻
+              </router-link>
+            </div>
+            <div class="line"></div>
+            <div class="spfb">
+              <img src="@assets/spfb.png" alt="" />
+              商品发布
+            </div>
+            <div class="line"></div>
+            <div class="spfb">
+              个人中心
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="logoDiv container">
+        <div class="logoTitle">中国钢制家具产业聚集网</div>
+        <div class="searchDiv">
+          <el-select class="searchFl" v-model="homeSearchOption" placeholder="">
+            <el-option label="产品" value="1"></el-option>
+            <el-option label="企业" value="2"></el-option>
+          </el-select>
+          <span class="line"></span>
+          <el-input
+            placeholder="请输入内容"
+            v-model="homeSearchVal"
+            class="input-with-select"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <el-button class="searchBtn">搜索</el-button>
+        </div>
+      </div>
+      <y-nav />
+    </div>
+    <div class="bannerDiv">
+      <div class="container">
+        <router-link to="/merchantEntry/apply">商家入驻申请</router-link>
+      </div>
+    </div>
     <div class="container">
       <div class="partTitle"><span class="orangeLine"></span>企业认证公示</div>
       <div class="cxtj">
@@ -58,11 +111,17 @@
 </template>
 <script>
 import { Component, Vue } from "vue-property-decorator";
+import langSelect from "@/components/LangSelect.vue";
+import yNav from "@/layout/components/nav.vue";
 export default {
   name: "app",
-  components: {},
+  components: {
+    yNav,
+  },
   data() {
     return {
+      homeSearchVal: "",
+      homeSearchOption: "1",
       name: "",
       shStatus: "",
       statusArr: [