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