<template>
<div>
    <div class="top-jiesuan">
          <span>全部商品</span>
          <div>
          <span>已选商品价格：</span>
          <span>{{sumprice.toFixed(2)}}</span>
          <button>结算</button>
          </div>
    </div>
    <div class="xian"></div>
    <div class="jsbiaotou">
        <div class="jsbtleft">
           <p>
           <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" >全选</el-checkbox>
           
           </p>
           <p>商品信息</p>
        </div>
        <div class="jsbtright">
            <p>单价</p>
            <p>数量</p>
            <p>金额</p>
            <p>操作</p>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:'topjiesuan',
    props:{
        sumprice:Number
    },
    data(){
        return{
            checkAll: false,
            isIndeterminate: true,
            checkedCities: [],
        }
    },
     methods: {
    //   handleCheckAllChange(val) {
    //     this.checkedCities = val ? cityOptions : [];
    //     this.isIndeterminate = false;
    //   }
     }
}
</script>

<style>
.top-jiesuan{
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
}
.top-jiesuan span:nth-child(1){
    color: #e2231a;
    font-size: 20px;
    font-weight: bold;
}
.top-jiesuan div span:nth-child(1){
    color: black;
    font-size: 15px;
    font-weight: normal;
}
.top-jiesuan div span:nth-child(2){
    color:#e2231a;
    font-size: 20px;
    font-weight: 500;
    margin-right: 10px;
}
.top-jiesuan button{
    border-radius: 0;
  right: 0;
  width: 50px;
  height: 25px;
  line-height: 25px;
  border: none;
  background-color: #e1251b;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  
}
.top-jiesuan button:hover{
  background-color: #bd1108;
}
.xian{
    width: 95%;
    height: 1px;
    background-color:rgb(209, 208, 208);
    margin: 0 auto;
    margin-bottom: 5px;
}
.jsbiaotou{
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
.jsbiaotou .jsbtleft{
    display: flex;
    justify-content: start;
}
.jsbiaotou .jsbtright{
    display: flex;
    justify-content: start;
    margin-right: 50px;
    
}
.jsbiaotou .jsbtleft p:last-child{
    margin-left: 50px;
}
.jsbiaotou .jsbtright p{
    margin-left: 100px;
}
.el-checkbox:checked  .el-checkbox__label{
  color: #e2231a!important;
}
</style>