diff --git a/src/assets/imgs/ic_data.png b/src/assets/imgs/ic_data.png
new file mode 100644
index 0000000000000000000000000000000000000000..50874a9a0cd84cf99964188f85691572ca5730e8
Binary files /dev/null and b/src/assets/imgs/ic_data.png differ
diff --git a/src/assets/imgs/ic_delete.png b/src/assets/imgs/ic_delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..9514770107bcd57d3a74df0d16d6ef42821ae29f
Binary files /dev/null and b/src/assets/imgs/ic_delete.png differ
diff --git a/src/assets/imgs/ic_edit.png b/src/assets/imgs/ic_edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9f532c0c5d647d0d827104213f67c8747c0a9eb
Binary files /dev/null and b/src/assets/imgs/ic_edit.png differ
diff --git a/src/components/commodity-card.vue b/src/components/commodity-card.vue
index 831a7ffb42290f604336eb2e120e4ccdbe1668db..0cd889e5a11a9cd43e68151018b56ce0d657f40c 100644
--- a/src/components/commodity-card.vue
+++ b/src/components/commodity-card.vue
@@ -14,7 +14,7 @@
     </div>
     <div class="com_card_btn">
         <el-button size="small">加入购物车</el-button>
-        <el-button size="small">查看详情</el-button>
+        <el-button size="small" @click="goUrl(cellData.id)">查看详情</el-button>
     </div>
   </div>
 </template>
@@ -32,7 +32,7 @@ export default {
   methods: {
     goUrl(parame) {
       if (this.url != "") {
-        this.$router.push(this.url + parame);
+        this.$router.push(this.url + "/" + parame);
       }
     }
   },
@@ -42,11 +42,10 @@ export default {
 
 <style scoped>
 .com_card {
-  width: 200px;
+  width: 290px;
   height: 300px;
   padding: 10px;
   background-color: #ddd;
-  margin: 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
diff --git a/src/components/commodity-cell.vue b/src/components/commodity-cell.vue
index d00d3f6a5e86cb376ce7f0203a5e53a2f4b1a6ea..52587233d3c1964a9a15e7551311c48ae029ce8d 100644
--- a/src/components/commodity-cell.vue
+++ b/src/components/commodity-cell.vue
@@ -67,7 +67,7 @@ export default {
   methods: {
     goUrl(parame) {
       if (this.url != "") {
-        this.$router.push(this.url + parame);
+        this.$router.push(this.url + "/" + parame);
       }
     }
   },
@@ -149,12 +149,14 @@ export default {
   padding: 1px 8px 2px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 12px;
   border-radius: 15px;
   position: relative;
   top: -2px;
 }
 .map_service {
   background-color: #626DE9;
+  border: solid 1px #626DE9;
   color: #fff;
 }
 .shared {
diff --git a/src/components/commodity-list.vue b/src/components/commodity-list.vue
index 216477f5ec21ae71c681af76374e2d3ec1cf6c84..9e7d82a6b687688ad033ab146170c6b895d681f1 100644
--- a/src/components/commodity-list.vue
+++ b/src/components/commodity-list.vue
@@ -2,8 +2,12 @@
   <div>
     <div v-if="name=='应用商店'" ref="commodityList" class="commodity_card">
       <div ref="commodityCardIn" class="commodity_card_list">
-        <commodity-card v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-card>
-        <commodity-card v-for="item in datas" :cellData="item" :url="url" :key="'s' + item.id"></commodity-card>
+        <div v-for="item in datas" :key="item.id" class="commodity_card_item">
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
+        <div v-for="item in datas" :key="'s' + item.id" class="commodity_card_item">
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
       </div>
     </div>
     <div v-else class="commodity_cell">
@@ -115,11 +119,13 @@ export default {
       this.pagination.total = this.datas.length;
     },
     pageResize() {
-      let listWidth = this.$refs.commodityList.clientWidth;
-      let rowCardNum = Math.floor(listWidth / 220);
-      this.$refs.commodityCardIn.style.width = rowCardNum * 220 + "px";
-      this.$refs.commodityCardIn.style.marginLeft =
-        (listWidth - rowCardNum * 220) / 2 + "px";
+      let listWidth = this.$refs.commodityCardIn.clientWidth;
+      let rowCardNum = Math.floor(listWidth / 310);
+      let cardArr = this.$refs.commodityCardIn.children;
+      console.log(rowCardNum, listWidth / rowCardNum);
+      for (let i = 0; i < cardArr.length; i++) {
+        cardArr[i].style.width = (listWidth / rowCardNum) - 1 + "px";
+      }
       console.log(this.$refs.commodityCardIn);
     }
   },
@@ -166,9 +172,16 @@ export default {
 .commodity_card {
 }
 .commodity_card_list {
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
 }
+.commodity_card_item {
+  margin: 10px 0;
+}
+.commodity_card_item_in {
+  margin: 0 auto;
+}
 </style>
 <style>
 .com_page_control .el-button {
diff --git a/src/components/shopping-cart/shopping-cart-cell.vue b/src/components/shopping-cart/shopping-cart-cell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..553c6d86768164b7127c876a582d0405fbf3ca89
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-cell.vue
@@ -0,0 +1,352 @@
+<template>
+  <div class="shopping_cell">
+    <el-row class="shopping_cell_row">
+      <el-col :span="2" class="shopping_cell_check">
+        <el-checkbox v-if="!readOnly" v-model="checkedItem" @change="getState"></el-checkbox>
+        <div v-else class="shopping_cell_expired">
+          <span>已下架</span>
+        </div>
+      </el-col>
+      <el-col :span="9">
+        <div class="shopping_cell_item">
+          <img
+            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            class="shopping_cell_img"
+          />
+          <div class="shopping_cell_msg">
+            <div class="shopping_cell_name">
+              {{ cellItem.name + ccce }}
+              <span
+                v-if="cellItem.mapService"
+                class="tags map_service"
+              >mapService</span>
+              <span v-if="cellItem.state == 1" class="tags shared">共享</span>
+              <span v-else-if="cellItem.state ==  2" class="tags restricted">受限</span>
+              <span v-else class="tags sensitive">敏感</span>
+            </div>
+            <div class="shopping_cell_msg_other">
+              <div class="shopping_cell_type">{{ cellItem.type }}</div>
+              <div class="shopping_cell_creator">{{ cellItem.creator }}</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="5">
+        <div class="shopping_cell_specification">
+          <div class="shopping_cell_specification_val">
+            <div class="shopping_cell_specification_val_specification">规格：访问次数：20/日，访问量：100/日</div>
+            <div class="shopping_cell_specification_val_type">申请方式：按月</div>
+            <div class="shopping_cell_specification_edit">
+              <el-popover placement="right" width="280" v-model="visible">
+                <div>
+                  <div class="shopping_cell_specification_title">规格：</div>
+                  <div>
+                    <el-button
+                      v-for="(item, index) in specificationBtns"
+                      :key="'specification' + index"
+                      :class="specification == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
+                      size="mini"
+                    >{{ item }}</el-button>
+                  </div>
+                  <div class="shopping_cell_specification_title">申请方式：</div>
+                  <div>
+                    <el-button
+                      v-for="(item, index) in specificationApplicationBtns"
+                      :key="'specification' + index"
+                      :class="specificationApplication == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
+                      size="mini"
+                    >{{ item }}</el-button>
+                  </div>
+                </div>
+                <div style="text-align: right; margin: 0">
+                  <el-button
+                    class="shopping_cell_specification_cancel"
+                    size="mini"
+                    type="text"
+                    @click="visible = false"
+                  >取消</el-button>
+                  <el-button
+                    class="shopping_cell_specification_submit"
+                    size="mini"
+                    @click="visible = false"
+                  >确定</el-button>
+                </div>
+                <el-button v-if="!readOnly" circle size="mini" slot="reference">
+                  <img :src="specificationEdit" />
+                </el-button>
+              </el-popover>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4" class="shopping_cell_num">
+        <el-input-number :disabled="readOnly" v-model="numItem" size="mini" :min="1"></el-input-number>
+      </el-col>
+      <el-col :span="4" class="shopping_cell_options">
+        <el-checkbox v-if="!readOnly" v-model="checkedSubscription">订阅该服务</el-checkbox>
+        <div class="shopping_cell_options_del">
+          <el-button size="mini">删除</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    cellItem: { type: Object, default: {} },
+    cellIndex: { type: Number, default: null },
+    cellCheck: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    cellCheck(newV, oldV) {
+      // do something
+      console.log(newV, oldV);
+    }
+  },
+  data: () => ({
+    checkedItem: false,
+    numItem: 1,
+    specificationEdit: require("../../assets/imgs/ic_edit.png"),
+    checkedSubscription: false,
+    visible: false,
+    specification: 1,
+    specificationApplication: 0,
+    specificationBtns: [
+      "1.访问次数：20/日  访问量：100/日",
+      "2.访问次数：200/日  访问量：1000/日",
+      "3.访问次数：无上限  访问量：无上限"
+    ],
+    specificationApplicationBtns: ["按月购买", "按年购买"]
+  }),
+  computed: {},
+  watch: {},
+  methods: {
+    getState(val) {
+      this.$emit("changeState", { state: val, index: this.cellIndex });
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.shopping_cell {
+  height: 110px;
+  border-bottom: 2px #f4f7fc solid;
+  margin: 10px 0;
+}
+.shopping_cell:nth-last-child(1) {
+  border-bottom: 0;
+  margin: 10px 0;
+}
+.shopping_cell_row {
+}
+.shopping_cell_item {
+  display: flex;
+  justify-content: flex-start;
+}
+.shopping_cell_check {
+  text-align: center;
+  padding-top: 35px;
+}
+.shopping_cell_expired {
+  display: inline-block;
+  text-align: center;
+  padding: 2px 6px;
+  width: 50px;
+  background-color: #e3e5ef;
+  border-radius: 5px;
+  font-size: 12px;
+  color: #8890a7;
+}
+.shopping_cell_img {
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+}
+.shopping_cell_msg {
+  width: calc(100% - 120px);
+  margin-left: 10px;
+  position: relative;
+}
+.shopping_cell_name {
+  width: 100%;
+  line-height: 24px;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+}
+.shopping_cell_msg_other {
+  position: absolute;
+  bottom: 0;
+}
+.shopping_cell_type {
+  color: #8890a7;
+  font-size: 14px;
+  line-height: 22px;
+}
+.shopping_cell_creator {
+  color: #8890a7;
+  font-size: 14px;
+  line-height: 22px;
+}
+.tags {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 1px 8px 2px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  border-radius: 15px;
+  position: relative;
+  top: -2px;
+}
+.map_service {
+  background-color: #626de9;
+  border: solid 1px #626de9;
+  color: #fff;
+}
+.shared {
+  background-color: #e7fdfc;
+  border: solid 1px #8bd6d0;
+  color: #25bdb1;
+}
+.restricted {
+  background-color: #fffee8;
+  border: solid 1px #e4c884;
+  color: #ef9433;
+}
+.sensitive {
+  background-color: #ffefef;
+  border: solid 1px #d7a4a9;
+  color: #e15260;
+}
+.shopping_cell_specification {
+  width: 80%;
+  height: 100px;
+  margin: 0 10%;
+  background-color: #f9fafc;
+  border-radius: 8px;
+  padding: 10px;
+  position: relative;
+}
+.shopping_cell_specification_val {
+  color: #8890a7;
+  font-size: 14px;
+}
+.shopping_cell_specification_val_type {
+  margin-top: 10px;
+}
+.shopping_cell_num {
+  text-align: center;
+  padding-top: 32px;
+}
+.shopping_cell_options {
+  text-align: center;
+  padding-top: 20px;
+}
+.shopping_cell_specification_edit {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+.shopping_cell_options_del {
+  margin-top: 15px;
+}
+.shopping_cell_specification_title {
+  margin: 10px 0;
+}
+.shopping_cell_specification_btn {
+  margin: 0 10px 10px;
+}
+.shopping_cell_specification_btn.active {
+  background-color: #515fe7;
+  color: #f4f7fc;
+}
+.shopping_cell_specification_submit {
+  background-color: #e56600;
+  color: #f4f7fc;
+  margin-left: 20px;
+}
+.shopping_cell_specification_cancel {
+  color: #58617a;
+}
+</style>
+<style>
+.shopping_cell_specification_edit .el-button {
+  border: 0;
+  width: 28px;
+  height: 28px;
+}
+.shopping_cell_num .el-input-number--mini {
+  width: 100px;
+}
+.shopping_cell_num .el-input-number__decrease {
+  border-radius: 8px 0 0 8px;
+  color: #8390ee;
+  font-size: 16px;
+}
+.shopping_cell_num .el-input-number__increase {
+  border-radius: 0 8px 8px 0;
+  color: #8390ee;
+  font-size: 16px;
+}
+.shopping_cell_options .el-button {
+  border: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #77192d;
+}
+.shopping_cell_options .el-checkbox {
+  color: #8890a7;
+}
+.shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #687087;
+}
+.shopping_cell_options .el-checkbox__inner:hover {
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #d0d6f4;
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__inner::after {
+  border: 1px solid #666;
+  border-left: 0;
+  border-top: 0;
+}
+.shopping_cell_check .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_cell_check .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_cell_check .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.el-popover,
+.el-radio-button:first-child:last-child .el-radio-button__inner {
+  border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/shopping-cart/shopping-cart-com.vue b/src/components/shopping-cart/shopping-cart-com.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0955ad407984d5dd987f2d00ad145f7d3b2b48e
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-com.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="shopping_list shopping_list_all">
+      <ShoppingCartList :showHead="true" :readOnly="false" class="shopping_all_list" />
+    </div>
+    <div class="shopping_list shopping_list_fail">
+      <div class="expired_service">已失效服务</div>
+      <ShoppingCartList :showHead="false" :readOnly="true" class="shopping_all_list" />
+    </div>
+    <div class="shopping_list shopping_list_options">
+      <ShoppingCartOptions />
+    </div>
+  </div>
+</template>
+
+<script>
+import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
+import ShoppingCartOptions from "@/components/shopping-cart/shopping-cart-options";
+export default {
+  components: {
+    ShoppingCartList,
+    ShoppingCartOptions
+  },
+  props: {},
+  data: () => ({
+    
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.shopping_list {
+  border-radius: 12px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.shopping_list_all {
+
+}
+.shopping_list_fail {
+}
+.shopping_list_options {
+}
+.shopping_all_list {
+}
+.shopping_fail_head {
+  background-color: #eff1f8;
+  height: 40px;  
+}
+.shopping_options {
+  height: 84px;
+}
+.expired_service {
+  height: 48px;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 10px 50px;
+  line-height: 28px;
+  background-color: #eff1f8;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/shopping-cart/shopping-cart-list.vue b/src/components/shopping-cart/shopping-cart-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2bf8d5cae59c471b9667a58ecc7e66829c82b933
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-list.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div v-if="showHead" class="shopping_all_head">
+      <el-row>
+        <el-col :span="2" class="shopping_all_head_item">
+          <el-checkbox v-model="checkedAll" @change="checkAll">全选</el-checkbox>
+        </el-col>
+        <el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
+        <el-col :span="5" class="shopping_all_head_item">规格</el-col>
+        <el-col :span="4" class="shopping_all_head_item">数量</el-col>
+        <el-col :span="4" class="shopping_all_head_item">操作</el-col>
+      </el-row>
+    </div>
+    <div class="shopping_list_page">
+      <ShoppingCartCell
+        v-for="(item, index) in list"
+        :cellItem="item"
+        :cellIndex="index"
+        :cellCheck="checkList[index]"
+        :key="item.id"
+        :readOnly="readOnly"
+        @changeState="changeState"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ShoppingCartCell from "@/components/shopping-cart/shopping-cart-cell";
+export default {
+  components: {
+    ShoppingCartCell
+  },
+  props: {
+    showHead: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    checkedAll: false,
+    checkList: [false, false, false],
+    list: [
+      {
+        id: 0,
+        name: "水路货物周转量情况",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅0",
+        state: 1,
+        mapService: 1
+      },
+      {
+        id: 1,
+        name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅1",
+        state: 1
+      },
+      {
+        id: 2,
+        name: "水路货物周转量情况水路货物周转量情况",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅2",
+        state: 1,
+        mapService: 1
+      }
+    ]
+  }),
+  mounted() {},
+  methods: {
+    changeState(val) {
+      console.log(val)
+      this.checkList[val.index] = val.state;
+      console.log(this.checkList)
+      if (this.checkList.indexOf(false) == -1) {
+        this.checkedAll = true;
+      } else {
+        this.checkedAll = false;
+      }
+    },
+    checkAll(val) {
+      console.log(val)
+      for (let i = 0; i < this.checkList.length; i++) {
+        this.checkList[i] = val;
+      }
+      console.log(this.checkList)
+    }
+  }
+};
+</script>
+<style scoped>
+.shopping_all_head {
+  background-color: #e5f0ff;
+  height: 48px;
+  padding: 0 20px;
+  font-weight: 700;
+  line-height: 48px;
+}
+.shopping_all_head_item {
+  text-align: center;
+}
+.shopping_list_page {
+  padding: 10px 20px 0;
+}
+</style>
+<style>
+.shopping_all_head_item .el-checkbox {
+  font-weight: 700;
+}
+.shopping_all_head_item .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #626de9;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/shopping-cart/shopping-cart-options.vue b/src/components/shopping-cart/shopping-cart-options.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef75f278abff97435566c0216ff8e7ce0818c167
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-options.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="shopping_cart_options">
+    <el-row>
+      <el-col :span="2" class="shopping_cart_options_cell">
+        <el-checkbox v-model="checkedAll">全选</el-checkbox>
+      </el-col>
+      <el-col :span="3" class="shopping_cart_options_del">删除选中服务</el-col>
+      <el-col :span="15" class="shopping_cart_options_num">共 4 项服务，已选择 <span>3</span> 项</el-col>
+      <el-col :span="4" class="shopping_cart_options_cell">
+        <el-button class="shopping_cart_options_cell_btn">一键申请</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data: () => ({
+    checkedAll: false
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.shopping_cart_options {
+  height: 80px;
+  padding: 0 20px;
+  font-weight: 700;
+  line-height: 80px;
+}
+.shopping_cart_options_cell {
+    text-align: center;
+}
+.shopping_cart_options_del {
+    color: #0f2683;
+}
+.shopping_cart_options_num {
+    text-align: right;
+    font-size: 14px;
+    font-weight: 500;
+    color: #58617a;
+}
+.shopping_cart_options_num span {
+    color: #e56600;
+}
+.shopping_cart_options_cell_btn {
+    width: 90%;
+    margin: 0 10%;
+    background-color: #e56600;
+    color: #fcefd6;
+}
+</style>
+<style>
+.shopping_cart_options_cell .el-checkbox {
+  font-weight: 700;
+}
+.shopping_cart_options_cell .el-checkbox__inner:hover {
+    border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
+    border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #626de9;
+    border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-checked+.el-checkbox__label {
+    color: #626de9;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shop_list_app_store.vue b/src/pages/shop_list_app_store.vue
index 64a9bb8975b85b1571438ae0b56d1df8c957fdac..9fa987e2c236ea4463d7d4d6da9c56c231b76247 100644
--- a/src/pages/shop_list_app_store.vue
+++ b/src/pages/shop_list_app_store.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="应用商店" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="应用商店" url="yysdDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_comprehensive_app.vue b/src/pages/shop_list_comprehensive_app.vue
index ffbfe4095c8fe7a6fb4001a275b077903f132f18..f2c228402c5ccc14affa544a57f0d8bce503d114 100644
--- a/src/pages/shop_list_comprehensive_app.vue
+++ b/src/pages/shop_list_comprehensive_app.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="综合应用" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="综合应用" url="zhyyfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_data.vue b/src/pages/shop_list_data.vue
index 6378df5b1f77ee3c4adc63ac58c3758736595f8c..4a8adba84d70c6d495c0256a1299a5e38ba66bf5 100644
--- a/src/pages/shop_list_data.vue
+++ b/src/pages/shop_list_data.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="数据服务" url="sjfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="数据服务" url="sjfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_space_time.vue b/src/pages/shop_list_space_time.vue
index ae10980c1bc9be985b24a9090f606baf27c95dbe..892fd4830df61ad610aba376ea0d1aab740cd094 100644
--- a/src/pages/shop_list_space_time.vue
+++ b/src/pages/shop_list_space_time.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="时空服务" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="时空服务" url="skfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shopping_cart.vue b/src/pages/shopping_cart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2bebbaaa0efc6e741d3d0b923c4f552f1693f2fb
--- /dev/null
+++ b/src/pages/shopping_cart.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="shopping">
+    <div class="shopping_title">我的购物车</div>
+    <ShoppingCart />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import ShoppingCart from "@/components/shopping-cart/shopping-cart-com";
+
+export default {
+  components: {
+    ShoppingCart
+  },
+  data: () => ({
+    datas: {}
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.shopping {
+  width: 1200px;
+  margin: 0 auto;
+}
+.shopping_title {
+  height: 40px;
+  line-height: 40px;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index bc47553f6f8d4ed640d982fd1ec804dc1712a578..12bb250cee44b8a1398d79cba31ffd566f326196 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,11 @@ export default new Router({
               name: "shopAppStoreList",
               component: () => import("@/pages/shop_list_app_store"),
             },
+            {
+              path: "/shop/shopping_cart", // 购物车页
+              name: "shoppingCart",
+              component: () => import("@/pages/shopping_cart"),
+            },
           ],
         },
         {