oil-station/fuintCashierWeb/src/views/cashier/NewComponents/newHome.vue

<template>
  <div class="new-contoner">
    <div class="left-box">
      <div class="box-top">
        <div class="o-top">
          <div class="d-s">
            <img src="./imgs/new_user.png" style="width: 28px;height: 28px;margin-right: 10px">
            <div>
              <div style="font-weight: bold">匿名</div>
              <div class="d-s">
                <span>12345679912</span>
                <img src="./imgs/fz.png" style="width: 17px;height: 17px;margin: 0px 10px">
                <img src="./imgs/vipicon.png" style="width: 23px;height: 19px;">
              </div>
            </div>
          </div>
          <div class="d-s">
            <div class="an_bor">会员充值</div>
            <div class="an_bor">重置会员</div>
            <div class="an_bor">赠送优惠券</div>
          </div>


        </div>
        <div class="t-top">
          <div class="three_box">油品:￥0.00</div>
          <div style="color: #F4F5F9">|</div>
          <div class="three_box">商品:￥0.00</div>
          <div style="color: #F4F5F9">|</div>
          <div class="three_box">合计:￥0.00</div>
        </div>
        <div class="d-top">


          <div class="d-b">

            <el-checkbox v-model="checkAll">活动优惠 <i class="el-icon-arrow-down"></i></el-checkbox>
            <div class="or_num">-￥0.00</div>
          </div>
          <!-- 下拉列表插入-->
          <div v-if="checkAll == true">
            <div class="x-d-b">
              <el-checkbox v-model="checkAll1">优惠1</el-checkbox>
              <div class="or_num">-￥0.00</div>
            </div>
            <div class="x-d-b">
              <el-checkbox v-model="checkAll2">优惠2</el-checkbox>
              <div class="or_num">-￥0.00</div>
            </div>
            <div class="x-d-b">
              <el-checkbox v-model="checkAll3">优惠3</el-checkbox>
              <div class="or_num">-￥0.00</div>
            </div>
          </div>
          <div class="d-b">
            <div class="d-s">
              <div class="checkbox" @click="changeBox1" :class="{ 'active' : boxShow1 == true }"><i
                class="el-icon-check" size="15" v-if="boxShow1 == true"></i></div>
              <div class="d_text">储值卡（账户余额:0元)</div>
            </div>
            <div class="or_num">￥0.00</div>
          </div>
          <div class="d-b">
            <div class="d-s">
              <div class="checkbox" @click="changeBox2" :class="{ 'active' : boxShow2 == true }"><i
                class="el-icon-check" size="15" v-if="boxShow2 == true"></i></div>
              <div class="d_text">囤油卡（账户余额:1000元)</div>
            </div>
            <div class="or_num">-￥220.00</div>
          </div>

        </div>
        <div class="three-top">
          <div class="addbor">
            <div class="">扫码支付</div>
            <div class="or_num">0.00</div>
          </div>
          <div class="addbor">
            <div class="">找零</div>
            <div class="or_num">0.00</div>
          </div>
          <div class="addbor">
            <div class="">加油员</div>
            <div class="or_num">0.00</div>
          </div>
        </div>
        <div class="er-box"></div>
        <div class="wrap-box">
          <div class="f-box" v-for="(item,index) in cardList" :key="index">{{ item.name }}</div>
        </div>
      </div>
      <div class="box-bottom">
        <div>
          <div class="price_">￥0.00</div>
          <div class="price_prefer">优惠合计:￥0.00元</div>
        </div>
        <div class="anniu">立即结算</div>
      </div>
    </div>
    <div class="cont-box">
      <div class="box-top">
        <div class="cont-tab">
          <div class="tab-box" v-for="(item,index) in tabList" :key="index" @click="setTabindex(index)">
            <div class="tab-name" :class="{ 'active_name' : tabIndex == index }">{{ item.name }}</div>
            <div class="gang" :class="{ 'active_gang' : tabIndex == index }"></div>
          </div>
        </div>
        <div class="tab-kuang" style="flex-wrap: wrap">
          <div class="card92" v-for="(item,index) in 3">
            <div>汽油 92#</div>
            <div class="card-title">1号枪</div>
            <div class="c-b-d">
              <img src="./imgs/92oil.png" style="width: 16px;height: 16px">
              <div>92号汽油罐</div>
            </div>
          </div>
          <div class="card95" v-for="(item,index) in 3">
            <div>汽油 95#</div>
            <div class="card-title">1号枪</div>
            <div class="c-b-d">
              <img src="./imgs/95oil.png" style="width: 16px;height: 16px">
              <div>95号汽油罐</div>
            </div>
          </div>
          <div class="card98" v-for="(item,index) in 3">
            <div>汽油 98#</div>
            <div class="card-title">1号枪</div>
            <div class="c-b-d">
              <img src="./imgs/98oil.png" style="width: 16px;height: 16px">
              <div>98号汽油罐</div>
            </div>
          </div>
          <div class="card0" v-for="(item,index) in 3">
            <div>柴油 0#</div>
            <div class="card-title">1号枪</div>
            <div class="c-b-d">
              <img src="./imgs/0oil.png" style="width: 16px;height: 16px">
              <div>0#柴油罐</div>
            </div>
          </div>


        </div>
        <div class="c-bottom">
          8号枪（21.03L/191.7936元）；10号枪（45.03L/300.2852元）
        </div>
        <div class="bottom-b-d">
          <div>订单笔数 <span style="color: #FF9655">0件</span></div>
          <div>订单金额 <span style="color: #FF9655">￥0.00</span></div>
        </div>
      </div>
      <div class="box-bottom">
        <div class="anniu-c">
          重置
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="box-top">
        <div class="r-top">非油商品</div>
        <div class="input-box">
          <input type="text" placeholder="商品名称，商品关键词，商品条码">
        </div>
        <div class="taber-top">
          <div class="goods_name">商品</div>
          <div class="stock_name">库存</div>
          <div class="u-price_name">单价</div>
          <div class="num_name">数量</div>
          <div class="orerate_name">操作</div>
        </div>
        <div class="taber-box" v-for="(item,index) in 5" :key="index">
          <div class="goods_name">
            <img src="../../../assets/images/goods.png" style="width: 30px;height: 30px">
          </div>
          <div class="stock_name">60</div>
          <div class="u-price_name">6.8</div>
          <div class="num_name">1</div>
          <div class="orerate_name">
            <span style="color: red;cursor: pointer">删除</span>
          </div>
        </div>
        <div class="bottom-b-d">
          <div>订单笔数 <span style="color: #FF9655">0件</span></div>
          <div>订单金额 <span style="color: #FF9655">￥27.00</span></div>
        </div>
      </div>
      <div class="box-bottom">
        <div class="anniu-c">
          重置
        </div>
        <div class="d-s">
          <div class="anniu-lv">取单</div>
          <div class="anniu-lan">挂单</div>
        </div>
      </div>
    </div>
    <!--    弹窗-->
    <el-dialog
      title="新增会员"
      :visible.sync="newMember"
      width="439px"
      center
    >
      <div class="tc-box">
        <div>请顾客扫码领取会员卡</div>
        <img src="./imgs/ewm.png" style="width: 180px;height: 180px;">
        <div class="red-size">微信/支付宝扫一扫</div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="newMember = false">打印二维码</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="扫码支付"
      :visible.sync="ScanCodePayment"
      width="439px"
      center
    >
      <div class="tc-box">
        <div class="title_">收款： <span style="color: #F44522">¥0.00</span></div>
        <img src="./imgs/smzf.png" style="width: 171px;height: 122px;">
        <div>请顾客出示付款码，或者刷脸支付</div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="ScanCodePayment = false">关闭</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="现金支付"
      :visible.sync="cashPayment"
      width="439px"
      center
    >
      <div class="tc-box">
        <div class="title_">应收款： <span style="color: #F44522">¥98.00</span></div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="收款金额" prop="name">
            <el-input v-model="ruleForm.name">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <div class="t-size">
            应找零：<span style="color: #F44522">¥20.00</span>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="cashPayment = false">确定收款</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="挂单"
      :visible.sync="hangingAnOrder"
      width="542px"
      center
    >
      <div class="tc-box">

        <el-form :model="ruleForms" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="挂单名称" prop="name">
            <el-input v-model="ruleForms.name">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <div class="h-size">
            挂单只可将非油商品进行挂单,挂单成功后可在取单页面进行取单操作、取单
            时，可根据挂单名称取单
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button @click="hangingAnOrder = false">取 消</el-button>
    <el-button type="primary" @click="hangingAnOrder = false">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="支付结果"
      :visible.sync="paymentResults"
      width="439px"
      center
    >
      <div class="tc-box">

        <div class="hui-box">
          <div class="hui-box-bt">
            <div>支付方式</div>
            <div>现金</div>
          </div>
          <div class="hui-box-bt">
            <div>实付金额</div>
            <div>¥0.00</div>
          </div>
          <div class="hui-box-bt">
            <div>订单金额</div>
            <div>¥10.00</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="paymentResults = false">关闭（3s)</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="取单"
      :visible.sync="pickUpTheOrder"
      width="910px"
      center
    >
      <pickUp></pickUp>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="pickUpTheOrder = false">取消</el-button>
         <el-button type="primary" @click="pickUpTheOrder = false">作废</el-button>
        <el-button type="primary" @click="pickUpTheOrder = false">取单</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="挂账"
      :visible.sync="accountPending"
      width="542px"
      center
    >
      <accountPending></accountPending>
      <span slot="footer" class="dialog-footer">
             <el-button @click="accountPending = false">取 消</el-button>
    <el-button type="primary" @click="accountPending = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="会员充值"
      :visible.sync="memberRecharge"
      width="910px"
      center
    >
      <memberRecharge></memberRecharge>
      <span slot="footer" class="dialog-footer">
             <el-button @click="memberRecharge = false">取 消</el-button>
             <el-button type="primary" @click="memberRecharge = false">确认充值</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import pickUp from './newHomeComponents/pickUpTheOrder.vue'
import accountPending from './newHomeComponents/accountPending.vue'
import memberRecharge from './newHomeComponents/memberRecharge.vue'
export default {
  data() {
    return {
      boxShow: true,
      boxShow1: true,
      boxShow2: true,
      checkList: [],
      checkAll: true,
      checkAll1: false,
      checkAll2: false,
      checkAll3: false,
      isIndeterminate: true,
      cardList: [
        {
          name: '储值卡',
          num: '0'
        },
        {
          name: '支付宝',
          num: '0'
        },
        {
          name: '微信',
          num: '0'
        },
        {
          name: '银联二维码',
          num: '0'
        },
        {
          name: '现金',
          num: '0'
        },
        {
          name: '小程序码',
          num: '0'
        },
        {
          name: '挂账',
          num: '0'
        },
        {
          name: '囤油卡',
          num: '0'
        }
      ],
      tabList: [
        {
          name: '全部',
          id: ''
        },
        {
          name: '92#',
          id: '1'
        },
        {
          name: '95#',
          id: '2'
        },
        {
          name: '98#',
          id: '3'
        },
        {
          name: '0#',
          id: '4'
        },
      ],
      tabIndex: 0,
      newMember: false,
      ScanCodePayment: false,
      cashPayment: false,
      ruleForm: {
        name: '',
      },
      ruleForms: {
        name: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      },
      hangingAnOrder: false,
      paymentResults: false,
      pickUpTheOrder: false,
      accountPending: false,
      memberRecharge: true,

    }
  },
  components:{
    pickUp,
    accountPending,
    memberRecharge
  },
  methods: {
    changeBox() {
      this.boxShow = !this.boxShow
    },
    changeBox1() {
      this.boxShow1 = !this.boxShow1
    },
    changeBox2() {
      this.boxShow2 = !this.boxShow2
    },
    setTabindex(index) {
      this.tabIndex = index
    }
  }
}
</script>

<style scoped lang="scss">
input {
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.new-contoner {
  width: 100%;
  box-sizing: border-box;
  height: 100vh;
  padding: 20px 0px;
  padding-right: 20px;
  padding-bottom: 0px;
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.left-box {
  width: 33%;
  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  overflow: hidden;
}

.cont-box {
  width: 33%;
  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  margin: 0px 20px;
  overflow: hidden;
}

.right-box {
  width: 33%;
  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  overflow: hidden;
}

.box-top {
  height: 84vh;
  background: #fff;
  margin-bottom: 5px;
  position: relative;
}

.box-bottom {
  height: 12vh;
  background: #fff;
  z-index: 9;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.o-top {
  width: 100%;
  height: 80px;
  background: #FF9655;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
  justify-content: space-between;

}

.d-s {
  display: flex;
  align-items: center;
}

.an_bor {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #FFFFFF;
  justify-content: center;
  margin: 0px 5px;
  cursor: pointer;
}

.t-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px 0px;
  border-bottom: #F4F5F9 1px solid;
}

.three_box {
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #555555;
}

.d-b {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0px;
}

.x-d-b {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0px;
  margin-left: 10%;
}

.d-top {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 40px;
  font-size: 16px;
  color: #555555;
  border-bottom: #f6f8f9 4px solid;
}

.checkbox {
  width: 15px;
  height: 15px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.d_text {
  color: #555555;
  margin-left: 10px;
  font-size: 16px;
}

.or_num {
  color: #FF9655;
}

.active {
  background: #FF9655 !important;
  color: #FFFFFF !important;
  border: 1px solid #FF9655;
}

.three-top {
  width: 100%;
  box-sizing: border-box;
  border-bottom: #f6f8f9 4px solid;
}

.addbor {
  border-bottom: 1px solid #f6f8f9;
  padding: 15px 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.er-box {
  width: 100%;

}

.wrap-box {
  height: 190px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  box-sizing: border-box;
  padding: 20px;
}

.f-box {
  width: 31%;
  height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 16px;
  color: #555555;
  margin-right: 2%;
  margin-bottom: 2%;
  border-radius: 10px;
  border: 1px solid #409EFF;
  cursor: pointer;
}

.f-acvite {
  background: #409eff !important;
  color: #fff !important;
  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
}

.anniu {
  width: 160px;
  height: 60px;
  background: linear-gradient(312deg, #FF945B 0%, #FEB37C 100%);
  border-radius: 6px 6px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.price_ {
  font-size: 24px;
  color: #333333;
  font-weight: bold;
}

.price_prefer {
  font-size: 16px;
  color: #FF4347;
}

.cont-tab {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EEEEEE;
  box-sizing: border-box;
  font-size: 14px;
  color: #999999;
  padding: 0px 20px;
  padding-top: 25px;
}

.r-top {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EEEEEE;
  padding: 0px 20px;
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 16px;
  color: #555555;
}

.input-box {
  width: 90%;
  height: 40px;
  background: #FAFAFA;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #DDDDDD;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 15px;
  margin: 15px auto;
}

.gang {
  width: 24px;
  height: 3px;
  //background: linear-gradient( 90deg, #FF8646 0%, #FFA360 100%);
  border-radius: 3px 3px 3px 3px;
}

.active_gang {
  background: linear-gradient(90deg, #FF8646 0%, #FFA360 100%) !important;
}

.tab-box {
  margin-right: 30px;
  cursor: pointer;
}

.active_name {
  font-size: 14px;
  color: #555555;
  font-weight: bold;
}

.tab-kuang {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 auto;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow: auto;
  height: 68vh;

}

.card92 {
  width: 32%;
  height: 90px;
  box-sizing: border-box;
  padding: 5px;
  background: rgba(255, 150, 85, 0.1);
  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #FF9655;
  color: #FF9655;
  font-size: 12px;
  color: #FF9655;
  overflow: hidden;
  margin-right: 1%;
  margin-bottom: 1%;
}

.card0 {
  width: 32%;
  height: 90px;
  box-sizing: border-box;
  padding: 5px;
  background: rgba(255, 181, 25, 0.1);
  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #FFB519;

  font-size: 12px;
  color: #FFB519;
  overflow: hidden;
  margin-right: 1%;
  margin-bottom: 1%;
}

.card98 {
  width: 32%;
  height: 90px;
  box-sizing: border-box;
  padding: 5px;
  background: rgba(64, 158, 255, 0.1);
  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #409EFF;
  font-size: 12px;
  color: #409EFF;
  overflow: hidden;
  margin-right: 1%;
  margin-bottom: 1%;
}

.card95 {
  width: 32%;
  height: 90px;
  box-sizing: border-box;
  padding: 5px;
  background: rgba(13, 194, 145, 0.1);
  box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #0DC291;
  font-size: 12px;
  color: #0DC291;
  overflow: hidden;
  margin-right: 1%;
  margin-bottom: 1%;
}

.card-title {
  font-size: 24px;
  color: #555555;
  margin: 6px auto;
  text-align: center;
}

.c-b-d {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-bottom {
  font-size: 14px;
  color: #333333;
  border-bottom: 2px solid #F4F5F9;
  box-sizing: border-box;
  padding: 10px 20px;

}

.bottom-b-d {
  position: absolute;
  bottom: 0px;
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 20px;
  font-size: 16px;
  color: #777777;
}

.anniu-c {
  width: 80px;
  height: 36px;
  background: #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #DDDDDD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777777;
}

.anniu-lv {
  width: 80px;
  height: 36px;
  background: linear-gradient(312deg, #9CDCA0 0%, #5BC557 100%);
  border-radius: 6px 6px 6px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.anniu-lan {
  cursor: pointer;
  width: 80px;
  height: 36px;
  background: linear-gradient(312deg, #70CAFD 0%, #0BADFE 100%, #02AAFE 100%);
  border-radius: 6px 6px 6px 6px;
  margin: 0px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.taber-top {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 20px;
  background: #f4f5f9;
  display: flex;
  align-items: center;
}

.taber-box {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  border-bottom: 1px solid #f4f5f9;
  display: flex;
  align-items: center;
}

.goods_name {
  width: 35%;


}

.stock_name {
  width: 15%;
  text-align: center;

}

.u-price_name {
  width: 15%;
  text-align: center;
}

.num_name {
  width: 15%;
  text-align: center;
}

.orerate_name {
  width: 20%;
  text-align: center;
}

.tc-box {
  text-align: center;
}

.red-size {
  font-size: 18px;
  color: #F44522;
}

.title_ {
  font-size: 28px;
  color: #333333;
  margin-bottom: 10px;
}

.r-size {
  font-size: 16px;
}

.t-size {
  width: 100%;
  text-align: right;
  font-size: 12px;
  color: #333333;
}

.h-size {
  font-size: 12px;
  color: #999999;
  margin-left: 100px;
  text-align: left;
}

.hui-box {
  width: 282px;

  background: #FAFAFA;
  margin: 15px auto;
  box-sizing: border-box;
  padding: 15px;
}

.hui-box-bt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px auto;
}
</style>