no message

package.json

@@ -53,7 +53,7 @@
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
+    "webpack": "^3.12.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0"

src/common/sider.vue

@@ -67,13 +67,13 @@
           {
             path: '/shopInfo',
             name: 'shopInfo',
-            title: '商家信息',
+            title: '商户信息',
             icon: '/static/image/order-icon.png',
             children: [
               {
                 path: '/shopInfo/shopInfos',
                 name: 'shopInfos',
-                title: '订单列表',
+                title: '门店管理',
               }
             ]
           },

src/components/shopCompoents/shopAdd.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="shopAdd">
+    <el-dialog width="40%" title="新增门店" center :visible.sync="showVisible" >
+      <div class="dialog_h"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        showVisible: false
+      }
+    },
+
+    methods: {
+      init() {
+        this.showVisible = true
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+.shopAdd {
+  .el-dialog {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+  .el-dialog__header {
+    /*height: 48px;*/
+    background: #F7F7F7;
+    padding: 16px 20px;
+
+  }
+
+  .el-dialog__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000000;
+  }
+}
+</style>

src/components/shopCompoents/shopList.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="shopList">
+    <div class="header">
+      <div class="left">
+        <div class="line">
+          <div class="b_line"></div>
+          <div class="triangle"></div>
+        </div>
+        <div class="label">门店管理</div>
+      </div>
+      <div class="right">
+        <el-button class="btn" @click.stop="addShop">新增门店</el-button>
+      </div>
+    </div>
+    <el-table :data="data" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
+      <el-table-column prop="sn" label="门店编号" width="170"></el-table-column>
+      <el-table-column prop="label" label="门店名称" width="172" align="center"></el-table-column>
+      <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
+      <el-table-column prop="name" label="联系人" width="164" align="center"></el-table-column>
+      <el-table-column prop="phone" label="联系电话" width="176" align="center"></el-table-column>
+      <el-table-column label="已获运力" align="center">
+        <template slot-scope="scope">
+          <div class="imgs">
+            <img class="img"
+                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.pai-hang-bang.cn%2Fallpic%2Fhttp%3A%2F%2Fimage-ali.bianjiyi.com%2F1%2F2019%2F1019%2F09%2F15714497550118.jpg.jpg&refer=http%3A%2F%2Fwww.pai-hang-bang.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634051738&t=81df0830b2c9c3b872d6744bc6ddcec5"
+                 v-for="(item, i) in 10" :key="i" alt="">
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" @click.stop="deleteItem">修改</el-button>
+          <el-button class="btn black" size="mini" @click.stop="deleteItem">删除门店</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <shop-add ref="shopAdd"></shop-add>
+  </div>
+</template>
+
+<script>
+  import shopAdd from './shopAdd'
+  export default {
+    components:{
+      shopAdd
+    },
+    data() {
+      return {
+        data: [{
+          sn: '2108091534398953',
+          label: '一點點（文星店）',
+          address: '江苏省苏州市文星广场2楼208室',
+          name: '王先生',
+          phone: '13888586506'
+        }, {
+          sn: '2108091534398953',
+          label: '一點點（文星店）',
+          address: '江苏省苏州市文星广场2楼208室',
+          name: '王先生',
+          phone: '13888586506'
+        }],
+      }
+    },
+
+    methods: {
+      addShop(){
+        this.$refs.shopAdd.init();
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .shopList {
+    width: 100%;
+    background: #ffffff;
+    min-height: calc(100vh - 184px);
+    padding: 20px;
+    box-sizing: border-box;
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .line {
+          position: relative;
+          width: 4px;
+          height: 15px;
+          background: #FC7200;
+          border-radius: 4px;
+          overflow: hidden;
+          margin-right: 10px;
+
+          .b_line {
+            width: 100px;
+            height: 6px;
+            background: #462BF7;
+          }
+
+          .triangle {
+            width: 0;
+            height: 0;
+            border-top: 100px solid #462BF7;
+            border-left: 100px solid transparent;
+          }
+        }
+
+        .label {
+          font-size: 16px;
+          font-weight: 500;
+          color: #0D1E40;
+        }
+      }
+
+    }
+
+    .btn {
+      background: #FC7200;
+      border-color: #FC7200;
+      color: #FFF;
+
+      &.black {
+        background: #0D1E40;
+        border-color: #0D1E40;
+      }
+    }
+
+    .el-table th.el-table__cell {
+      height: 38px;
+      background: #FAFAFA;
+      padding: 0;
+      font-size: 12px;
+      color: #666666;
+    }
+
+    .el-table .el-table__cell {
+      font-size: 14px;
+      color: #222222;
+    }
+
+    .imgs {
+      display: flex;
+      align-items: center;
+      padding-left: 36px;
+      .img {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        margin-right: 10px;
+      }
+    }
+  }
+</style>

src/components/shopInfo.vue

@@ -1,34 +1,94 @@
 <template>
-  <div>
-    我是Hello World页
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <el-col :span="15">
+        <div class="tab_list">
+          <div class="tab_item" @click="tab_ac = i" :class="{'tab_item_ac':tab_ac==i?true:false}"
+               v-for="(item,i) in tab_list" :key="i">
+            <span>{{item.name}}</span>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row class="content">
+     <el-col :span="24" v-if="tab_ac === 0">
+       <shop-list></shop-list>
+     </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
+  import shopList from './shopCompoents/shopList'
+  export default {
+    name: 'HelloWorld',
+    components: {
+      shopList
+    },
+    data() {
+      return {
+        tab_list: [
+          {name: '门店管理', index: 0},
+          {name: '绑定外卖平台', index: 1},
+          {name: '绑定配送平台', index: 2},
+          {name: '绑定打印机', index: 3}
+        ],
+        tab_ac: 0,
+      }
     }
   }
-}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+<style scoped lang="scss">
+  .shopInfo {
+    .order_tab {
+      width: 100%;
+      height: 74px;
+      background: #FFF;
+
+      .tab_list {
+        width: 100%;
+        height: 74px;
+        padding-top: 20px;
+        padding-left: 36px;
+        box-sizing: border-box;
+        display: flex;
+
+        .tab_item {
+          min-width: 58px;
+          margin-right: 56px;
+          font-size: 16px;
+          font-weight: 500;
+          color: #B1B1B1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+
+          .tab_line {
+            width: 58px;
+            height: 6px;
+            background: #FFF;
+            border-radius: 3px;
+            margin: 15px auto 0;
+          }
+        }
+
+        .tab_item_ac {
+          color: #FC7200;
+
+          .tab_line {
+            background: #FC7200;
+          }
+        }
+      }
+    }
+
+    .content {
+      width: 100%;
+      margin-top: 10px;
+    }
+  }
 </style>

src/router/index.js

@@ -42,7 +42,7 @@ const router = new Router({
         {
           path: '/shopInfo/shopInfos',
           name: 'shopInfos',
-          title: '列表',
+          title: '门店管理',
           component: () => import('../components/shopInfo.vue')
         }
       ]