提交

public/index.html

@@ -6,6 +6,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
   <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+  <script
+      type="text/javascript"
+      src="http://api.map.baidu.com/api?v=2.0&ak=tRYGyu9yuGOVk2HNdf5fBxcjV3TmtDMA"
+    ></script>
   <title>中国钢制家具产业聚集网</title>
 </head>
 

src/layout/components/footer.vue

@@ -1,6 +1,40 @@
 <template>
   <div class="footer">
-    footer
+    <div class="tableC">
+      <div class="topDiv">
+        <div class="item">
+          <img src="@assets/zhinan.png" alt="" />
+          <div>
+            <span class="line"></span>新手指南<span class="line2"></span>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@assets/shangjiafuwu.png" alt="" />
+          <div>
+            <span class="line"></span>商家服务<span class="line2"></span>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@assets/wenti.png" alt="" />
+          <div>
+            <span class="line"></span>常见问题<span class="line2"></span>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@assets/women.png" alt="" />
+          <div>
+            <span class="line"></span>关于我们<span class="line2"></span>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@assets/kefu.png" alt="" />
+          <div>
+            <span class="line"></span>平台客服<span class="line3"></span>
+          </div>
+        </div>
+      </div>
+      <div class="bottomDiv">技术支持：神州数码通用软件(洛阳)有限公司</div>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -11,8 +45,49 @@ export default class extends Vue {}
 <style scoped lang="scss">
 .footer {
   width: 100%;
-  height: 11rem;
-  background: #444;
-  color: #fff;
+  height: 19rem;
+  background: #ececec;
+  text-align: center;
+  display: table;
+  .tableC {
+    display: table-cell;
+    vertical-align: middle;
+    .topDiv {
+      .item {
+        display: inline-block;
+        vertical-align: middle;
+        img {
+          height: 3rem;
+        }
+        div {
+          font-size: 1.4rem;
+          color: #333;
+          .line,
+          .line2,
+          .line3 {
+            display: inline-block;
+            width: 0.1rem;
+            height: 1.4rem;
+          }
+          .line {
+            background: #333;
+            margin-right: 2.4rem;
+          }
+          .line2 {
+            margin-left: 2.4rem;
+          }
+          .line3 {
+            background: #333;
+            margin-left: 2.4rem;
+          }
+        }
+      }
+    }
+    .bottomDiv {
+      font-size: 1.4rem;
+      color: #666;
+      margin-top: 3rem;
+    }
+  }
 }
 </style>

src/layout/components/header.vue

@@ -1,22 +1,159 @@
 <template>
   <div class="header">
-    header
-    <lang-select />
+    <div class="topDiv">
+      <div class="container">
+        <lang-select />
+        <div class="login">请登录</div>
+        <div class="register">免费注册</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>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import langSelect from "@/components/LangSelect.vue";
-@Component({
+export default {
+  name: "app",
   components: {
     langSelect
+  },
+  data() {
+    return {
+      homeSearchVal: "",
+      homeSearchOption: "1"
+    };
   }
-})
-export default class extends Vue {}
+};
 </script>
 <style scoped lang="scss">
 .header {
-  height: 6rem;
+  .topDiv {
+    height: 4rem;
+    line-height: 4rem;
+    font-size: 1.2rem;
+    background: #f5f5f5;
+    border: 0.1rem solid #e5e5e5;
+    .container {
+      .login {
+        color: #fd5522;
+        margin-right: 2rem;
+        margin-left: 2rem;
+        display: inline-block;
+      }
+      .register {
+        color: #333;
+        display: inline-block;
+      }
+      .rightDiv {
+        height: 4rem;
+        float: right;
+        color: #fd5522;
+        div {
+          margin-right: 2rem;
+          vertical-align: middle;
+        }
+        .sjrz,
+        .spfb {
+          color: #fd5522;
+          display: inline-block;
+          img {
+            height: 1.4rem;
+            margin-right: 0.2rem;
+            vertical-align: middle;
+          }
+        }
+        .line {
+          height: 1.4rem;
+          width: 0.1rem;
+          background: #e5e5e5;
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .logoDiv {
+    padding: 3rem 0;
+    .logoTitle {
+      height: 4rem;
+      line-height: 4rem;
+      font-size: 2.4rem;
+      margin-right: 1rem;
+      display: inline;
+      vertical-align: middle;
+    }
+    .searchDiv {
+      height: 4rem;
+      line-height: 4rem;
+      width: 55rem;
+      font-size: 1.4rem;
+      display: inline-block;
+      border-radius: 2rem;
+      border: 1px solid #fd5522;
+      overflow: hidden;
+      vertical-align: middle;
+      .searchFl {
+        width: 8rem;
+        color: #fd5522;
+      }
+      .line {
+        display: inline-block;
+        height: 1.8rem;
+        width: 0.1rem;
+        background: #fd5522;
+        vertical-align: middle;
+      }
+      .el-icon-search {
+        color: #fd5522;
+      }
+      .input-with-select {
+        width: 38.9rem;
+      }
+      .searchBtn {
+        width: 8rem;
+        font-size: 1.6rem;
+        background: #fd5522;
+        color: #fff;
+        border: 0;
+        border-radius: 0;
+      }
+    }
+  }
 }
 </style>

src/router/index.ts

@@ -137,6 +137,16 @@ const router = new VueRouter({
           path: "/news",
           component: () => import("../views/news/index.vue"),
           meta: { title: "news" }
+        },
+        {
+          path: "/merchantEntry",
+          component: () => import("../views/home/merchantEntry.vue"),
+          meta: { title: "merchantEntry" }
+        },
+        {
+          path: "/merchantEntry/apply",
+          component: () => import("../views/home/merchantEntryApply.vue"),
+          meta: { title: "merchantEntryApply" }
         }
       ]
     },

src/styles/index.scss

@@ -46,6 +46,10 @@ html {
       float: right;
     }
 
+    .bg-F5{
+      background: #F5F5F5;
+    }
+
     a {
       text-decoration: none;
       color: #333;
@@ -62,4 +66,54 @@ html {
       outline: none;
     }
   }
+}
+.el-pagination.is-background .el-pager li:not(.disabled).active{
+  background: #fd5522;
+}
+.el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: #fd5522;
+}
+.searchDiv{
+  .el-select .el-input {
+    color: #fd5522;
+    .el-input__inner{
+      border: 0;
+      color: #fd5522;
+    }
+  }
+  .input-with-select{
+    .el-input__inner{
+      border: 0;
+    }
+  }
+}
+.bannerDiv{
+  .bannerD{
+    .el-carousel__container{
+      height:100%;
+    }
+  }
+  .el-carousel__button{
+    background-color: #fd5522;
+  }
+}
+.qyrzgs th{
+  background:#fd5522;
+  color: #FFF;
+  padding: 0.6rem 0;
+}
+.qyrzg tr.el-table__row--striped td{
+  background: #FFF6F4;
+}
+.formPanel{
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
 }

src/views/home/index.vue

@@ -1,10 +1,657 @@
 <template>
-  <div>
-    首页
+  <div class="bg-F5">
+    <div class="container">
+      <el-row class="mt2rem" :gutter="20">
+        <el-col :span="4">
+          <div class="menuDiv">
+            <ul class="menuUl">
+              <li
+                v-for="(item, index) in 8"
+                :key="index"
+                :class="{ active: activeIndex === index }"
+                @mouseover="menuMouseOver(index)"
+                @mouseleave="menuMouseLeave(index)"
+              >
+                <router-link to="home">
+                  <span class="menuLine"></span>文件柜
+                  <i class="el-icon-arrow-right"></i>
+                </router-link>
+              </li>
+            </ul>
+            <div class="menuCon" v-if="activeIndex != 'a'">
+              <u class="menuConUl">
+                <li v-for="(item, index) in 10" :key="index">选项</li>
+              </u>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="14" class="bannerDiv">
+          <el-carousel class="bannerD" :autoplay="false">
+            <el-carousel-item v-for="item in 4" :key="item">
+              <img class="banner" src="@assets/shangpin.png" att />
+            </el-carousel-item>
+          </el-carousel>
+        </el-col>
+        <el-col :span="6">
+          <div class="loginDiv">
+            <div class="txDiv">
+              <img src="@assets/qiyeruzhu.png" alt />
+            </div>
+            <div class="username">您还未登录哦！</div>
+            <div class="btnDiv">
+              <el-button class="leftBtn">登录</el-button>
+              <el-button class="rightBtn">注册</el-button>
+            </div>
+          </div>
+          <div class="noticeDiv">
+            <div class="noticeTitle">
+              通知公告
+              <span class="more">more&gt;&gt;</span>
+            </div>
+            <div class="notice" v-for="item in 5" :key="item">
+              通知公告通知公告通知公告
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="partTitle"><span class="orangeLine"></span>服务能力</div>
+      <div class="fwnl">
+        <div class="fwnlItem">
+          <div class="numDiv">
+            <img src="@assets/qiyeruzhu.png" alt />
+            <span>1536</span>
+          </div>
+          <div class="titleDiv">
+            <span>1536</span>
+            家钢制家具生产企业入驻
+          </div>
+          <div class="line"></div>
+        </div>
+        <div class="fwnlItem">
+          <div class="numDiv">
+            <img src="@assets/chanpin.png" alt />
+            <span>1536</span>
+          </div>
+          <div class="titleDiv">
+            <span>1536</span>
+            个钢制家具产品入驻
+          </div>
+          <div class="line"></div>
+        </div>
+        <div class="fwnlItem">
+          <div class="numDiv">
+            <img src="@assets/huiyuan.png" alt />
+            <span>1536</span>
+          </div>
+          <div class="titleDiv">
+            <span>1536</span>
+            位平台会员注册
+          </div>
+          <div class="line"></div>
+        </div>
+        <div class="fwnlItem">
+          <div class="numDiv">
+            <img src="@assets/yingyee.png" alt />
+            <span>1536</span>
+          </div>
+          <div class="titleDiv">
+            <span>1536</span>
+            万在线电商营业额
+          </div>
+          <div class="line"></div>
+        </div>
+      </div>
+      <!-- 广告位 -->
+      <div class="ggzw bg-84">办公系列广告占位</div>
+      <div class="partTitle"><span class="orangeLine"></span>热门商品</div>
+      <div class="rmsp">
+        <div class="rmspItem" v-for="item in 5" :key="item">
+          <div class="imgDiv">
+            <img src="@assets/shangpin.png" alt />
+          </div>
+          <div class="name">文件柜B20-J</div>
+          <div class="money">
+            ¥
+            <span>1833</span>
+          </div>
+          <div class="company">洛阳花都家具集团有限公司</div>
+        </div>
+      </div>
+      <div class="partTitle"><span class="orangeLine"></span>品牌商家</div>
+      <div class="rmsp">
+        <div class="ppsjItem" v-for="item in 5" :key="item">
+          <div class="imgDiv2">
+            <img src="@assets/changjia.png" alt />
+          </div>
+          <div class="name">洛阳科飞亚有限公司</div>
+          <div class="company">主营商品:文件柜，办公柜，文件柜，办公柜</div>
+        </div>
+      </div>
+      <div class="partTitle"><span class="orangeLine"></span>需求供应</div>
+      <el-row :gutter="20" class="xqgy">
+        <el-col :span="4">
+          <div class="menuDiv">
+            <ul class="menuUl">
+              <li
+                v-for="(item, index) in 8"
+                :key="index"
+                :class="{ active: activeIndex2 === index }"
+                @mouseover="menuMouseOver2(index)"
+                @mouseleave="menuMouseLeave2(index)"
+              >
+                <router-link to="home">
+                  <span class="menuLine"></span>文件柜
+                  <i class="el-icon-arrow-right"></i>
+                </router-link>
+              </li>
+            </ul>
+            <div class="menuCon" v-if="activeIndex != 'a'">
+              <u class="menuConUl">
+                <li v-for="(item, index) in 10" :key="index">选项</li>
+              </u>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="xqDiv">
+            <div class="xqTitle">
+              <img src="@assets/xuqiu.png" alt />需求
+              <span class="more">more&gt;&gt;</span>
+            </div>
+            <div class="xq" v-for="item in 10" :key="item">
+              <div class="con">【求购】通知公告通知公告通知公告</div>
+              <div class="date">2020-01-01</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="xqDiv">
+            <div class="xqTitle">
+              <img src="@assets/gongyingshang.png" alt />供应商
+              <span class="more">more&gt;&gt;</span>
+            </div>
+            <div class="xq" v-for="item in 10" :key="item">
+              <div class="con">【供应】通知公告通知公告通知公告</div>
+              <div class="date">2020-01-01</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 广告位 -->
+      <div class="ggzw bg-88 mt2rem">智能家具保险柜广告占位</div>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="partTitle"><span class="orangeLine"></span>行业资讯</div>
+          <div class="hyzxDiv">
+            <div class="topDiv">
+              <div class="leftDiv">
+                <div>
+                  <img src="@assets/shangpin.png" alt />
+                </div>
+              </div>
+              <div class="rightDiv">
+                <div class="title">文件柜快速找资料的小妙招</div>
+                <div class="content">
+                  第一界钢制家具企业交流会在上海举行第一界钢制家具企业交流会在上海举行
+                </div>
+                <div class="date">2010-01-18</div>
+              </div>
+            </div>
+            <ul class="bottomUl">
+              <li>关于新型电子存储柜的草图关于新型电子存储柜的草图</li>
+              <li>关于新型电子存储柜的草图关于新型电子存储柜的草图</li>
+              <li>关于新型电子存储柜的草图关于新型电子存储柜的草图</li>
+              <li>关于新型电子存储柜的草图关于新型电子存储柜的草图</li>
+            </ul>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="partTitle"><span class="orangeLine"></span>家具保养</div>
+          <div class="hyzxDiv">
+            <div class="topDiv">
+              <div class="leftDiv">
+                <div>
+                  <img src="@assets/shangpin.png" alt />
+                </div>
+              </div>
+              <div class="rightDiv">
+                <div class="title">文件柜快速找资料的小妙招</div>
+                <div class="content">
+                  第一界钢制家具企业交流会在上海举行第一界钢制家具企业交流会在上海举行
+                </div>
+                <div class="date">2010-01-18</div>
+              </div>
+            </div>
+            <ul class="bottomUl">
+              <li>关于新型电子存储柜的草图关于新型电子存储柜的草图</li>
+              <li>关于新型电子存储柜的草图关于新型电子存储柜的草图</li>
+              <li>关于新型电子存储柜的草图关于新型电子存储柜的草图</li>
+              <li>关于新型电子存储柜的草图关于新型电子存储柜的草图</li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
+<script>
+import { Component, Vue } from "vue-property-decorator";
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      shangpin: [],
+      activeIndex: "a",
+      activeIndex2: "a"
+    };
+  },
+  methods: {
+    menuMouseOver(index) {
+      console.log(index);
+      this.activeIndex = index;
+    },
+    menuMouseLeave(index) {
+      console.log(index);
+      this.activeIndex = "a";
+    },
+    menuMouseOver2(index) {
+      console.log(index);
+      this.activeIndex = index;
+    },
+    menuMouseLeave2(index) {
+      console.log(index);
+      this.activeIndex = "a";
+    }
+  }
+};
 </script>
+<style lang="scss" scoped>
+.menuDiv {
+  width: 100%;
+  position: relative;
+  .menuUl {
+    list-style: none;
+    width: 100%;
+    background: #fff;
+    li {
+      height: 4.8rem;
+      line-height: 4.8rem;
+      font-size: 1.4rem;
+      color: #333;
+      border-bottom: 0.1rem solid #e5e5e5;
+      padding: 0 1.6rem;
+      box-sizing: border-box;
+      position: relative;
+      &.active {
+        background: #ffddd3;
+        a {
+          color: #fd5522;
+        }
+        i {
+          color: #fd5522;
+        }
+        .menuLine {
+          background: #fd5522;
+        }
+      }
+      .menuLine {
+        display: inline-block;
+        height: 1.4rem;
+        width: 0.2rem;
+        background: #fff;
+        position: absolute;
+        left: 0;
+        top: 1.6rem;
+      }
+      i {
+        float: right;
+        margin-top: 1.8rem;
+      }
+    }
+  }
+  .menuCon {
+    width: 60rem;
+    height: 100%;
+    background: #fff;
+    padding: 1.6rem;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    right: -60rem;
+    z-index: 99;
+    .menuConUl {
+      list-style: none;
+      overflow: hidden;
+      li {
+        float: left;
+        font-size: 1.2rem;
+        color: #333;
+        margin-right: 1rem;
+      }
+    }
+  }
+}
+.bannerD {
+  height: 39rem;
+  .banner {
+    width: 100%;
+    height: 100%;
+  }
+}
+.loginDiv {
+  height: 16rem;
+  background: #fff;
+  border-radius: 0.4rem;
+  text-align: center;
+  padding: 2rem;
+  box-sizing: border-box;
+  .txDiv {
+    img {
+      height: 5.8rem;
+      width: 5.8rem;
+      border-radius: 50%;
+    }
+  }
+  .username {
+    height: 2.4rem;
+    line-height: 2.4rem;
+    font-size: 1.2rem;
+    color: #666;
+  }
+  .btnDiv {
+    padding-top: 2rem;
+    font-size: 1.4rem;
+    .leftBtn {
+      width: 40%;
+      height: 2.8rem;
+      line-height: 2.8rem;
+      color: #fff;
+      background: #fd5522;
+      margin-right: 1rem;
+      padding: 0;
+      border: 0;
+    }
+    .rightBtn {
+      width: 40%;
+      height: 2.8rem;
+      line-height: 2.8rem;
+      color: #fd5522;
+      border-color: #fd5522;
+      background: #fff;
+      padding: 0;
+      border: 0;
+    }
+  }
+}
+.noticeDiv {
+  margin-top: 1rem;
+  height: 22rem;
+  background: #fff;
+  border-radius: 0.4rem;
+  padding: 2rem;
+  box-sizing: border-box;
+  .noticeTitle {
+    height: 3rem;
+    line-height: 3rem;
+    font-size: 1.6rem;
+    color: #333;
+    .more {
+      display: inline-block;
+      line-height: 3rem;
+      font-size: 1.4rem;
+      color: #999;
+      float: right;
+    }
+  }
+  .notice {
+    height: 3rem;
+    line-height: 3rem;
+    overflow: hidden;
+    font-size: 1.4rem;
+    color: #666;
+  }
+}
+.partTitle {
+  padding: 3rem 0 2rem 0;
+  font-size: 1.8rem;
+  color: #333;
+  .orangeLine {
+    display: inline-block;
+    height: 1.8rem;
+    width: 0.3rem;
+    background: #fd5522;
+    vertical-align: middle;
+    border-radius: 0.15rem;
+    margin-right: 1rem;
+  }
+}
+.fwnl {
+  width: 100%;
+  height: 17rem;
+  display: table;
+  background: #fff;
+  text-align: center;
+  .fwnlItem {
+    width: 25%;
+    display: table-cell;
+    vertical-align: middle;
+    position: relative;
+    .numDiv {
+      margin-bottom: 1rem;
+      img {
+        height: 3rem;
+        vertical-align: bottom;
+      }
+      span {
+        font-size: 1.8rem;
+        color: #fd5522;
+        vertical-align: bottom;
+      }
+    }
+    .titleDiv {
+      font-size: 1.6rem;
+      color: #333;
+    }
+    .line {
+      width: 0.1rem;
+      height: 4rem;
+      background: #e5e5e5;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      margin-top: -2rem;
+    }
+  }
+}
+.ggzw {
+  height: 13rem;
+  line-height: 13rem;
+  font-size: 2.6rem;
+  font-weight: bold;
+  color: #fff;
+  text-align: center;
+}
+.rmsp {
+  width: 100%;
+  overflow: hidden;
+  .rmspItem,
+  .ppsjItem {
+    width: 18%;
+    float: left;
+    margin-right: 2.5%;
+    background: #fff;
+    border-radius: 0.4rem;
+    box-sizing: border-box;
+    &:last-child {
+      margin-right: 0;
+    }
+    .name {
+      height: 2rem;
+      line-height: 2rem;
+      font-size: 1.4rem;
+      color: #333;
+      margin-top: 1rem;
+      overflow: hidden;
+    }
+    .company {
+      height: 4rem;
+      line-height: 2rem;
+      font-size: 1.2rem;
+      color: #666;
+      overflow: hidden;
+    }
+  }
+  .rmspItem {
+    padding: 1.6rem;
+    .imgDiv {
+      border: 0.1rem solid #e5e5e5;
+      text-align: center;
+      img {
+        width: 100%;
+      }
+    }
+    .money {
+      height: 2rem;
+      line-height: 2rem;
+      font-size: 1.2rem;
+      color: #fd5522;
+    }
+  }
+  .ppsjItem {
+    padding-bottom: 1.6rem;
+    .imgDiv {
+      img {
+        width: 100%;
+      }
+    }
+    .name {
+      padding: 0 1.6rem;
+      box-sizing: border-box;
+    }
+    .company {
+      padding: 0 1.6rem;
+      box-sizing: border-box;
+    }
+  }
+}
+.xqgy {
+  .xqDiv {
+    background: #fff;
+    padding: 2rem;
+    box-sizing: border-box;
+    .xqTitle {
+      height: 3rem;
+      line-height: 3rem;
+      font-size: 1.6rem;
+      color: #fd5522;
+      img {
+        height: 1.6rem;
+        vertical-align: middle;
+        margin-right: 0.4rem;
+      }
+      .more {
+        display: inline-block;
+        line-height: 3rem;
+        font-size: 1.4rem;
+        color: #999;
+        float: right;
+      }
+    }
+    .xq {
+      height: 3rem;
+      line-height: 3rem;
+      overflow: hidden;
+      .con {
+        width: 80%;
+        float: left;
+        height: 100%;
+        font-size: 1.4rem;
+        color: #333;
+        padding-right: 1rem;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+      .date {
+        width: 20%;
+        float: left;
+        height: 100%;
+        font-size: 1.2rem;
+        color: #666;
+        text-align: right;
+      }
+    }
+  }
+}
+.hyzxDiv {
+  background: #fff;
+  border-radius: 0.4rem;
+  padding: 1.6rem;
+  box-sizing: border-box;
+  .topDiv {
+    width: 100%;
+    display: table;
+    border: 0.1rem solid #e5e5e5;
+    .leftDiv {
+      display: table-cell;
+      width: 30%;
+      text-align: center;
+      vertical-align: top;
+      div {
+        width: 80%;
+        display: inline-block;
+        border: 0.1rem solid #e5e5e5;
+        img {
+          width: 100%;
+        }
+      }
+    }
+    .rightDiv {
+      display: table-cell;
+      width: 70%;
+      padding-left: 1rem;
+      box-sizing: border-box;
+      vertical-align: top;
+      .title {
+        font-size: 1.6rem;
+        color: #333;
+        height: 3rem;
+        line-height: 3rem;
+        overflow: hidden;
+      }
+      .content {
+        height: 5rem;
+        line-height: 2rem;
+        font-size: 1.2rem;
+        color: #666;
+        overflow: hidden;
+      }
+      .date {
+        font-size: 1.2rem;
+        color: #666;
+        line-height: 2.4rem;
+      }
+    }
+  }
+  .bottomUl {
+    list-style: none;
+    padding-top: 1rem;
+    li {
+      height: 3rem;
+      line-height: 3rem;
+      font-size: 1.4rem;
+      color: #333;
+      overflow: hidden;
+    }
+  }
+}
+.bg-88 {
+  background: #889fe9;
+}
+.bg-84 {
+  background: #84ccc9;
+}
+.mt2rem {
+  margin-top: 2rem;
+}
+</style>

src/views/home/merchantEntry.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div class="bannerDiv">商家入驻申请</div>
+    <div class="container">
+      <div class="partTitle"><span class="orangeLine"></span>企业认证公示</div>
+      <div class="cxtj">
+        <span>企业名称：</span>
+        <el-input
+          v-model="name"
+          clearable
+          size="small"
+          placeholder="请输入企业名称"
+          style="width:38rem;"
+        ></el-input>
+        <span class="ml2rem">审核状态：</span>
+        <el-select
+          v-model="shStatus"
+          clearable
+          size="small"
+          placeholder="请选择"
+          style="width:14rem;"
+        >
+          <el-option
+            v-for="item in statusArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        <el-button class="searchBtn" size="small">查询</el-button>
+      </div>
+      <el-table class="qyrzgs" stripe :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 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 prop="address" label="驳回理由"></el-table-column>
+        <el-table-column
+          prop="date"
+          label="审核日期"
+          width="180"
+        ></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>
+    </div>
+  </div>
+</template>
+<script>
+import { Component, Vue } from "vue-property-decorator";
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      name: "",
+      shStatus: "",
+      statusArr: [
+        {
+          value: "选项1",
+          label: "黄金糕"
+        },
+        {
+          value: "选项2",
+          label: "双皮奶"
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎"
+        },
+        {
+          value: "选项4",
+          label: "龙须面"
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭"
+        }
+      ],
+      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;
+      this.requestData();
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.bannerDiv {
+  height: 21rem;
+}
+.partTitle {
+  padding: 3rem 0 2rem 0;
+  font-size: 1.8rem;
+  color: #333;
+  .orangeLine {
+    display: inline-block;
+    height: 1.8rem;
+    width: 0.3rem;
+    background: #fd5522;
+    vertical-align: middle;
+    border-radius: 0.15rem;
+    margin-right: 1rem;
+  }
+}
+.cxtj {
+  span {
+    display: inline-block;
+    height: 3.6rem;
+    line-height: 3.6rem;
+    font-size: 1.4rem;
+    color: #333;
+    margin-right: 1rem;
+  }
+  .searchBtn {
+    margin-left: 1rem;
+    background: #fd5522;
+    color: #fff;
+    border-color: #fd5522;
+  }
+}
+.qyrzgs {
+  width: 100%;
+  margin-top: 2rem;
+}
+.pageDiv {
+  text-align: right;
+  margin-top: 0.5rem;
+  padding: 2rem 0;
+}
+.ml2rem {
+  margin-left: 2rem;
+}
+</style>

src/views/home/merchantEntryApply.vue

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="partTitle"><span class="orangeLine"></span>商户入驻申请</div>
+      <el-form class="formPanel" ref="form" :model="form" label-width="280px">
+        <div class="formTitle">
+          账户信息
+          <span class="subTitle">账号用于登录商户平台</span>
+        </div>
+        <el-form-item class="formItem" label="用户名">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="请设置密码">
+          <el-input v-model="form.password"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="请确认密码">
+          <el-input v-model="form.surepassword"></el-input>
+        </el-form-item>
+
+        <div class="line"></div>
+        <div class="formTitle">企业基本信息</div>
+        <el-form-item class="formItem" label="企业名称">
+          <el-input v-model="form.qyname"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业类型">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业所在地">
+          <el-select
+            class="quyuSel"
+            v-model="form.sheng"
+            placeholder="请选择活动区域"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+          <el-select
+            class="quyuSel"
+            v-model="form.shi"
+            placeholder="请选择活动区域"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+          <el-select
+            class="quyuSel"
+            v-model="form.qu"
+            placeholder="请选择活动区域"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="formItem" label="详细地址">
+          <el-input v-model="form.address"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="经纬度选择">
+          <div class="longLatDiv">
+            <span>经度</span>
+            <el-input class="input" v-model="form.long"></el-input>
+          </div>
+          <div class="longLatDiv">
+            <span>经度</span>
+            <el-input class="input" v-model="form.lat"></el-input>
+          </div>
+          <el-button class="submitBtn" @click="chooseMap">选择</el-button>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业法人">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="联系电话">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="成立日期">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="统一社会信用代码">
+          <el-input v-model="form.qytype"></el-input>
+        </el-form-item>
+        <el-form-item class="formItem" label="营业执照">
+          <el-upload class="avatar-uploader" action="" :show-file-list="false">
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
+            <div class="uploadIconDiv" v-else>
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+              <div class="txt">上传图片</div>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业默认图片">
+          <el-upload class="avatar-uploader" action="" :show-file-list="false">
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
+            <div class="uploadIconDiv" v-else>
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+              <div class="txt">上传图片</div>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业宣传图片">
+          <el-upload class="avatar-uploader" action="" :show-file-list="false">
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
+            <div class="uploadIconDiv" v-else>
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+              <div class="txt">上传图片</div>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item class="formItem" label="企业介绍">
+          <el-input type="textarea" v-model="form.qytype"></el-input>
+        </el-form-item>
+        <div class="line"></div>
+        <el-form-item class="formItem tc">
+          <el-button class="submitBtn" @click="onSubmit"
+            >提交注册信息</el-button
+          >
+        </el-form-item>
+      </el-form>
+      <div id="mapDiv">
+        <div id="map"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Component, Vue } from "vue-property-decorator";
+import BMap from "BMap";
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      form: {
+        name: "",
+        password: "",
+        surepassword: "",
+        qyname: "",
+        qytype: "",
+        sheng: "",
+        shi: "",
+        qu: "",
+        address: "",
+        imageUrl: "",
+        long: "",
+        lat: ""
+      },
+      mapVisible: false
+    };
+  },
+  methods: {
+    onSubmit() {},
+    chooseMap() {
+      // this.mapVisible = true;
+      document.getElementById("mapDiv").style.opacity = 1;
+      document.getElementById("mapDiv").style.zIndex = 99;
+    },
+    createMap() {
+      var that = this;
+      var map = new BMap.Map("map", { minZoom: 8, maxZoom: 16 });
+      var point = new BMap.Point(112.471384, 34.6251625);
+      map.centerAndZoom(point, 13);
+      map.addControl(
+        new BMap.MapTypeControl({
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
+        })
+      );
+      map.enableScrollWheelZoom(true);
+      return map;
+    }
+  },
+  mounted() {
+    var that = this;
+
+    this.createMap();
+  }
+};
+</script>
+<style scoped lang="scss">
+.partTitle {
+  padding: 3rem 0 2rem 0;
+  font-size: 1.8rem;
+  color: #333;
+  .orangeLine {
+    display: inline-block;
+    height: 1.8rem;
+    width: 0.3rem;
+    background: #fd5522;
+    vertical-align: middle;
+    border-radius: 0.15rem;
+    margin-right: 1rem;
+  }
+}
+.formPanel {
+  background: #fff;
+  padding: 2rem;
+  box-sizing: border-box;
+  z-index: 1;
+  .formItem {
+    width: 80%;
+    .quyuSel {
+      width: 31%;
+      margin-right: 3.5%;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .formTitle {
+    font-size: 1.6rem;
+    color: #333;
+    padding-bottom: 4rem;
+    .subTitle {
+      color: #999;
+    }
+  }
+  .line {
+    width: 100%;
+    height: 0.1rem;
+    background: #e5e5e5;
+    margin: 3rem 0 2rem 0;
+  }
+  .submitBtn {
+    color: #fff;
+    background: #fd5522;
+    border-color: #fd5522;
+  }
+  .longLatDiv {
+    width: 40%;
+    float: left;
+    margin-right: 1rem;
+    .input {
+      width: 80%;
+      margin-left: 1rem;
+    }
+  }
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.uploadIconDiv {
+  width: 12rem;
+  height: 12rem;
+  text-align: center;
+  padding: 3.4rem 0;
+  box-sizing: border-box;
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+  }
+  .txt {
+    height: 2.4rem;
+    line-height: 2.4rem;
+    font-size: 1.4rem;
+    color: #333;
+  }
+}
+#mapDiv{
+  // position: absolute;
+  // top: 0;
+  // bottom:0;
+  // left: 0;
+  // right: 0;
+  width: 100%;
+  height: 50rem;
+  // opacity: 0;
+  z-index:0;
+}
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.tc {
+  text-align: center;
+}
+</style>

vue.config.js

@@ -1,7 +1,10 @@
 module.exports = {
   publicPath: process.env.VUE_APP_publicPath,
   configureWebpack: {
-    devtool: "source-map"
+    devtool: "source-map",
+    externals: {
+      BMap: "BMap"
+    }
   },
   chainWebpack: config => {
     config.resolve.alias.set("@assets", "@/assets");