logpm_page/src/views/financialsector/Financialse/FinancialBill.vue

<template>
  <div>
    <el-form>
      <el-form-item label="计费类型">
        <el-input />
      </el-form-item>
    </el-form>

    <el-divider content-position="left">整车计费</el-divider>
    <div class="flex">
      <el-form inline>
        <el-form-item label="车型"></el-form-item>
        <el-form-item label="整车计费（ 元/车 ）">
          <el-input-number :min="0" :controls="false" :precision="2" :value-on-clear="0" />
        </el-form-item>
      </el-form>

      <div class="el_table_operation">
        <span class="el_table_operation_span_a">-</span>
      </div>

      <div class="el_table_operation">
        <span class="el_table_operation_span_b">+</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
// 标题
:deep(.el-divider__text.is-left) {
  font-size: 20px;
  font-weight: bold;
  color: var(--el-color-primary);
}

:deep(.el-input-number .el-input__inner) {
  text-align: left;
}

.el_table_operation {
  width: 70px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .el_table_operation_span_a,
  .el_table_operation_span_b {
    font-size: 20px;
    font-weight: bold;
    width: 40%;
    border: 2px solid #f00;
    color: #f00;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
    box-sizing: border-box;
    height: 100%;
  }
  .el_table_operation_span_b {
    border: 2px solid #0d83b7;
    color: #0d83b7;
  }

  .el_table_operation_span_a:hover {
    background-color: #f00;
    color: #ccc;
  }
  .el_table_operation_span_b:hover {
    background-color: #0d83b7;
    color: #ccc;
  }
}
</style>