<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>