diff --git a/src/components/shop-list-new.vue b/src/components/shop-list-new.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b5619944f6d6f351a8b054fd138822482b9fc11
--- /dev/null
+++ b/src/components/shop-list-new.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="shop_list">
+    <h3 class="shop_list-title">
+      <span v-text="name"></span>
+      <a
+        @click.prevent="goto"
+        :style="{ cursor: to ? 'pointer' : 'text' }"
+      ></a>
+    </h3>
+
+    <ul class="shop_cards">
+      <li
+        v-for="(item, index) in data"
+        :key="'card_' + index"
+      >
+        <shop-card
+          :data="item"
+          :showImg="showImg"
+          :showSummary="showSummary"
+          :detail-path="detailPath"
+        ></shop-card>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import shopCard from "./shop-card";
+
+export default {
+  components: {
+    shopCard,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    to: {
+      type: String,
+      required: true,
+    },
+    detailPath: {
+      type: String,
+      required: true,
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    showImg: {
+      type: Boolean,
+      default: false,
+    },
+    showSummary: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    goto() {
+      if (this.to) {
+        this.$router.push(this.to);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.shop_list-title {
+  margin: 13px 20px;
+}
+.shop_list-title > span {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 18px;
+  font-weight: bold;
+  color: #0d1847;
+  line-height: 27px;
+}
+.shop_list-title > a {
+  display: inline-block;
+  vertical-align: middle;
+  background-image: url("../assets/imgs/home_btn_enter.png");
+  width: 28px;
+  height: 28px;
+  background-size: 100%;
+  vertical-align: -9px;
+  margin-left: 5px;
+}
+.shop_list-title > a:hover {
+  background-image: url("../assets/imgs/home_btn_enter_hov.png");
+}
+.shop_cards {
+  /* display: flex;
+  justify-content: space-between;
+  align-items: flex-start; */
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+.shop_cards > li {
+  width: calc((100% - 80px) / 4);
+  display: block;
+  float: left;
+  margin: 10px 10px;
+}
+</style>
diff --git a/src/pages/service_shop/services_shop.vue b/src/pages/service_shop/services_shop.vue
index 3a9b1fef572efd4e6cc4e8e67d26f40bb92c6a5d..84ae9988760c2094b1009b1e69961de93bf9a54e 100644
--- a/src/pages/service_shop/services_shop.vue
+++ b/src/pages/service_shop/services_shop.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import shopList from "@/components/shop-list";
+import shopList from "@/components/shop-list-new";
 import helper from "@/services/helper";
 
 export default {