aiot-app/pages/pda/jobBooking/components/batchJobBom.vue

<template>
  <view>
    <!-- 单个报工 -->
    <view class="title_box rx-bc">
      <view class="name">报工信息</view>
    </view>

    <view class="material">
      <view class="content_table">
        <!-- 		<view class="item rx-sc">
					<view class="rx ">
						<view class="lable lable150 rx-cc ">报工数量</view>
						<view class="content">
							{{ tableData.length || 0 }}

						</view>
					</view>

				</view> -->

        <view class="item rx-sc">
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">要求生产数量</view>
            <view class="content rx-sc">
              <view>{{ item.formingNum }}</view>
              <view class="unit">{{ item.unit }}</view>
            </view>
          </view>

          <view class="rx ww45">
            <view class="lable rx-cc ww80">重量</view>
            <view class="content content_num">
              <view>{{ item.formingWeight }}</view>
              <view class="unit">{{ item.weightUnit }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">合格品数量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="item.workReportInfo.formedNum"
                :disabled="isDetails"
                @input="blurNum(item.workReportInfo)"
                type="digit"
              />
              <view class="unit">{{ item.unit }}</view>
            </view>
          </view>

          <view class="rx ww45">
            <view class="lable rx-cc ww80">重量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="item.workReportInfo.formedWeight"
                type="digit"
                :disabled="isDetails"
              />
              <view class="unit">{{ item.weightUnit }}</view>
            </view>
          </view>
        </view>

        <!-- <view
          class="item rx-sc"
          v-for="(not, notIndex) in notFormedList"
          :key="notIndex"
        >
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">不合格数量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="item.workReportInfo.notFormedNum"
                type="digit"
                :disabled="isDetails"
                v-if="isDetails"
                @input="changeNum"
              />

              <input
                class="uni-input"
                v-model="not.notFormedNum"
                type="number"
                v-else
                @input="changeNum(not)"
              />
              <view class="unit">{{ item.unit }}</view>
            </view>
          </view>

          <view class="rx ww45">
            <view class="lable rx-cc ww80">重量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="item.workReportInfo.notFormedWeight"
                type="digit"
                :disabled="isDetails"
                v-if="isDetails"
              />
              <input
                class="uni-input"
                v-model="not.notFormedWeight"
                type="digit"
                :disabled="isDetails"
                v-else
              />
              <view class="unit">{{ item.weightUnit }}</view>
            </view>
          </view>
        </view> -->

        <view class="item rx-sc">
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">不合格数量</view>
            <view class="content content_num">
              <!-- //详情 -->
              <input
                class="uni-input"
                v-model="item.workReportInfo.notFormedNum"
                type="digit"
                :disabled="isDetails"
                @input="changeNum(item.workReportInfo.notFormedNum)"
              />

              <view class="unit">{{ item.unit }}</view>
            </view>
          </view>

          <view class="rx ww45">
            <view class="lable rx-cc ww80">重量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="item.workReportInfo.notFormedWeight"
                type="digit"
                :disabled="isDetails"
              />

              <view class="unit">{{ item.weightUnit }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">报工备注</view>
            <view class="content content_num" style="width: 100%">
              <input
                class="uni-input"
                v-model="item.workReportInfo.remark"
                :disabled="isDetails"
                type="text"
              />
            </view>
          </view>
          <!-- v-if="clientEnvironmentId==2" -->
          <view class="rx ww45" v-if="clientEnvironmentId == 2">
            <view class="lable ww80 rx-cc">批次号</view>
            <view class="content content_num" style="width: 100%">
              {{ item.batchNo }}
              <input
                class="uni-input"
                v-model="batchNo"
                @input="batchNoNew"
                :disabled="isDetails"
                type="text"
              />
            </view>
          </view>

          <!-- 不是首工序展示这个按钮 -->
          <view
            class="unit-btn"
            @click="singleBatch"
            v-if="
              item.currentTaskDiagram &&
              item.currentTaskDiagram.isFirstTask == 1 &&
              clientEnvironmentId != 3 &&
              item.product &&
              item.product.length == 0
            "
            >创建在制品</view
          >

          <view
            class="unit-btn"
            @click="singleBatchTg"
            v-if="
              item.currentTaskDiagram &&
              item.currentTaskDiagram.isFirstTask == 1 &&
              clientEnvironmentId == 3 &&
              item.semiProductList &&
              item.semiProductList.length == 0
            "
            >创建在制品</view
          >
        </view>
      </view>
      <view class="content_table">
        <!-- <batchProductJobBom
          v-if="
            item.product &&
            item.product.length &&
            item.currentTaskDiagram.type != 4 &&
            item.currentTaskDiagram.type != 6 &&
            item.singleReport == 0
          "
          :item="item"
          :list="item.product"
          :equipmentList="item.equipmentList"
          @countNumPl="countNumPl"
        >
        </batchProductJobBom> -->

        <batchProductJobBom
          v-if="clientEnvironmentId != 3 && item.product && item.product.length"
          :item="item"
          :list="item.product"
          :equipmentList="item.equipmentList"
          @countNumPl="countNumPl"
        >
        </batchProductJobBom>

        <!-- <semiProductJobBomPL
          v-if="
            clientEnvironmentId == 3 &&
            item.semiProductList &&
            item.semiProductList.length
          "
          :item="item"
          :list="item.semiProductList"
          :equipmentList="item.equipmentList"
          @countNumPl="countNumPl"
        >
        </semiProductJobBomPL> -->

        <!-- <batchProductJobBom
          v-if="
            item.product &&
            item.product.length &&
            item.currentTaskDiagram &&
            (item.currentTaskDiagram.type == 2 ||
              item.currentTaskDiagram.type == 3 ||
              item.currentTaskDiagram.type == 6) &&
            item.singleReport == 0
          "
          :item="item"
          :list="item.product"
          :equipmentList="item.equipmentList"
          @countNumPl="countNumPl"
        >
        </batchProductJobBom> -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  createInProductBatch,
  createInProductBatchTG,
} from "@/api/pda/jobBooking.js";
// import checkboxTable from '../componentsTable/checkbox/checkbox.vue'
import batchProductJobBom from "./batchProductJobBom.vue";
import semiProductJobBomPL from "./semiProductJobBomPL.vue";
import { parameterGetByCode } from "@/api/mainData/index.js";
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    notFormed: {
      type: Array,
      default: () => [],
    },
    isDetails: {
      type: Boolean,
      default: false,
    },
    currentTask: {
      type: Object,
      default: () => {},
    },
  },

  watch: {
    notFormed: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.notFormedList = newVal;
      },
    },
    item: {
      immediate: true,
      deep: true,
      handler(newVal) {
        console.log(newVal, "newVal");
        if (newVal.product && newVal.product.length != 0) {
          let formedNum = 0;
          let notFormedNum = 0;

          newVal.product.forEach((item) => {
            if (
              !item.extInfo.isQualified ||
              item.extInfo.isQualified == 1 ||
              item.extInfo.isQualified == 3
            ) {
              formedNum = formedNum + Number(item.feedQuantity);
            } else {
              notFormedNum = notFormedNum + Number(item.feedQuantity);
            }
          });

          console.log("合格数量:" + formedNum, "不合格数量:" + notFormedNum);

          this.$set(this.item.workReportInfo, "formedNum", formedNum);
          this.$set(this.item.workReportInfo, "notFormedNum", notFormedNum);

          // console.log(this.item.workReportInfo);
          this.item.workReportInfo = this.deepCopy(this.item.workReportInfo);
          this.$forceUpdate();
        }

        // if (
        //   this.clientEnvironmentId == 3 &&
        //   newVal.semiProductList &&
        //   newVal.semiProductList.length != 0
        // ) {
        //   let formedNum = 0;
        //   let notFormedNum = 0;

        //   newVal.semiProductList.forEach((item) => {
        //     if (
        //       !item.extInfo.isQualified ||
        //       item.extInfo.isQualified == 1 ||
        //       item.extInfo.isQualified == 3
        //     ) {
        //       formedNum = formedNum + Number(item.feedQuantity);
        //     } else {
        //       notFormedNum = notFormedNum + Number(item.feedQuantity);
        //     }
        //   });

        //   console.log("合格数量:" + formedNum, "不合格数量:" + notFormedNum);

        //   this.$set(this.item.workReportInfo, "formedNum", formedNum);
        //   this.$set(this.item.workReportInfo, "notFormedNum", notFormedNum);

        //   this.item.workReportInfo = this.deepCopy(this.item.workReportInfo);
        //   this.$forceUpdate();
        // }
        // if (!this.currentTaskDiagram.isFirstTask) {
        //   this.getSemiProductList(newVal);
        // }
      },
    },
  },
  components: { semiProductJobBomPL, batchProductJobBom },
  data() {
    return {
      forValue: {},

      tableData: [],
      batchNo: "",
      notFormedList: [],
      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境
    };
  },
  created() {
    console.log(this.item, "item13131223223");
    // this.item.product = this.item.pickOutInList;
    let newList = [];
    if (
      this.item.pickOutInList.length != 0 &&
      this.item.product.length == 0 &&
      this.item.currentTaskDiagram.type == 6
    ) {
      this.item.pickOutInList.forEach((item) => {
        const data = this.deepCopy(item);
        newList.push(data);
      });
      this.$set(this.item, "product", newList);
    }

    //   this.item.product.push(...newList);
    //   console.log(this.item.product, "this.item.product");

    //   this.item.pickOutInList = [];
    //   this.$set(this.item, "product", ...newList);
    //   this.$set(this.item, "pickOutInList", []);
    // }
    if (this.isDetails) {
      this.notFormedList = this.notFormedList.map((m) => {
        return {
          notFormedNum: Number(m.quantity),
          notFormedWeight: m.weight,
          ...m,
        };
      });
    }

    this.getByCode();
  },

  methods: {
    tableDataFn(tableData) {
      console.log(tableData);
      let adultCount = 0;
      let noAdultCount = 0;

      this.arrDataStatistics(tableData);
      tableData.forEach((v) => {
        if (v.selected) {
          console.log(11111);
          if (v.extInfo.isQualified == 1) {
            adultCount += 1;
          } else {
            noAdultCount += 1;
          }
        }
      });
      this.$set(this.item.workReportInfo, "formedNum", adultCount);
      this.$set(this.item.workReportInfo, "notFormedNum", noAdultCount);
      // this.tableData = this.notFormedList;
      if (!(this.clientEnvironmentId == 3 || this.item.singleReport !== 1)) {
        this.item.semiProductList = tableData;
      }
    },

    deepCopy(obj, hash = new WeakMap()) {
      if (obj === null) return null;
      if (obj instanceof Date) return new Date(obj);
      if (obj instanceof RegExp) return new RegExp(obj);
      if (typeof obj !== "object" && typeof obj !== "function") return obj;
      if (hash.has(obj)) return hash.get(obj);

      const result = Array.isArray(obj) ? [] : {};
      hash.set(obj, result);

      return Object.keys(obj).reduce((acc, key) => {
        acc[key] = this.deepCopy(obj[key], hash);
        return acc;
      }, result);
    },

    arrDataStatistics(arr) {
      console.log(arr);

      const adultCount = arr.filter(
        (user) => user.extInfo.isQualified == 1
      ).length;
      const noAdultCount = arr.filter(
        (user) => user.extInfo.isQualified !== 1
      ).length;

      console.log(adultCount, noAdultCount);
      this.$set(this.item.workReportInfo, "formedNum", adultCount);
      this.$set(this.item.workReportInfo, "notFormedNum", noAdultCount);
    },

    getByCode() {
      parameterGetByCode({ code: "enable_quality_plus" }).then((res) => {
        if (
          res.value == "1" &&
          (this.item.currentTaskDiagram.type == 6 ||
            this.item.currentTaskDiagram.type == 2 ||
            this.item.currentTaskDiagram.type == 2)
        ) {
          uni.showModal({
            title: "提示",
            content: "质检需要去PC端进行",
            success: function (res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        }
      });
    },

    getSemiProductList(newVal) {
      console.log(newVal);
      if (newVal.semiProductList.length) {
        newVal.semiProductList.map((v) => {
          v.selected = true;
        });
        this.arrDataStatistics(newVal.semiProductList);
        this.tableData = newVal.semiProductList;
      }
      if (newVal.pickOutInList.length) {
        newVal.pickOutInList.map((v) => {
          v.selected = true;
        });
        this.arrDataStatistics(newVal.pickOutInList);
        this.tableData = newVal.pickOutInList;
      }
    },

    singleBatch() {
      console.log(this.item.workReportInfo, "11111111");

      if (!this.item.workReportInfo.formedNum)
        return uni.showToast({
          icon: "none",
          title: "请输入合格品数",
        });
      // if (
      //   !this.item.workReportInfo.notFormedNum ||
      //   this.item.workReportInfo.notFormedNum != 0
      // )
      //   return uni.showToast({
      //     icon: "none",
      //     title: "请输入不合格品数",
      //   });

      const req = {
        formedNum: this.item.workReportInfo.formedNum,
        notFormedNum: this.item.workReportInfo.notFormedNum || 0,
        taskId: this.item.workReportInfo.taskId,
        workOrderId: this.item.workReportInfo.workOrderId,
      };

      createInProductBatch(req).then((res) => {
        if (res && res.length) {
          this.forValue = res[0];

          res.map((v) => {
            v.selected = true;
          });
          this.tableData = res;
          this.item.product = res;
          console.log(this.item);
        }
      });
    },

    singleBatchTg() {
      if (!this.item.workReportInfo.formedNum)
        return uni.showToast({
          icon: "none",
          title: "请输入合格品数",
        });
      // if (
      //   !this.item.workReportInfo.notFormedNum ||
      //   this.item.workReportInfo.notFormedNum != 0
      // )
      //   return uni.showToast({
      //     icon: "none",
      //     title: "请输入不合格品数",
      //   });

      const req = {
        formedNum: this.item.workReportInfo.formedNum,
        notFormedNum: this.item.workReportInfo.notFormedNum || 0,
        taskId: this.item.workReportInfo.taskId,
        workOrderId: this.item.workReportInfo.workOrderId,
      };

      createInProductBatchTG(req).then((res) => {
        if (res && res.length) {
          this.forValue = res[0];

          res.map((v) => {
            v.selected = true;
            v.extInfo.batchReportInfo = [
              {
                allFeedQuantity: "",
                allReportWeight: "",
                taskId: "",
                taskName: "",
              },
            ];

            v.extInfo.notBatchReportInfo = [
              {
                allFeedQuantity: "",
                notType: "",
                taskId: "",
                taskName: "",
                notReason: "",
              },
            ];
          });
          this.list = res;
          this.item.semiProductList = res;
        }
      });

      // console.log(this.item, "this.itemthis.itemthis.itemthis.item12121");
    },

    /**
     * 更新批次号
     *
     * @param e 事件对象
     */
    batchNoNew(e) {
      this.item.workReportInfo.batchNo = this.item.batchNo + e.target.value;
    },

    setFormedNum(num) {
      this.item.workReportInfo.formedNum = num;

      let weight =
        Number(this.item.workReportInfo.formedNum) *
        Number(this.item.singleWeight) *
        Number(this.item.weightMultiple);

      if (["G", "g", "克"].includes(this.item.singleWeightUnit)) {
        weight = parseFloat((weight / 1000).toFixed(2));
      } else {
        weight = parseFloat(weight.toFixed(2));
      }

      this.$set(this.item.workReportInfo, "formedWeight", weight);

      this.$forceUpdate();
    },

    penalize() {
      this.$emit("penalize", null);
    },

    handleView(name) {
      uni.showToast({
        icon: "none",
        title: name || "未设置",
      });
    },

    blurNum(value) {
      let total = 0;
      //匹配非数字
      let val = value.formedNum;
      let reg = new RegExp("([^0-9]*)", "g");
      let ma = val.match(reg);
      //如果有非数字，替换成""
      if (ma.length > 0) {
        for (let k in ma) {
          if (ma[k] != "") {
            val = val.replace(ma[k], 0);
          }
        }
      }
      //可以为0，但不能以0开头
      if (val.startsWith("0") && val.length > 1) {
        val = val.substring(1, val.length);
      }
      value.formedNum = val;

      if (this.item.currentTaskDiagram.isFirstTask) {
        // formingNum 生产数量  feedQuantity   this.item.product[0] //投料数量
        if (value.formedNum > this.item.formingNum) {
          this.$set(
            this.item.workReportInfo,
            "workReportInfo",
            this.item.formingNum
          );
          this.$set(this.item.workReportInfo, "notFormedNum", 0);
          this.notForme();
          return uni.showToast({
            icon: "none",
            title: "合格品数量不能大于要求生产数量",
          });
        }
      } else {
        if (this.item.product.length) {
          const feedNumber = this.item.product.reduce((acc, pre) => {
            return pre.feedQuantity ? acc + Number(pre.feedQuantity) : acc;
          }, 0);

          console.log(this.item, "this.item.product");

          if (value.formedNum > feedNumber) {
            this.$set(this.item.workReportInfo, "formedNum", feedNumber);
            this.$set(this.item.workReportInfo, "notFormedNum", 0);
            return uni.showToast({
              icon: "none",
              title: "合格品数量不能大于投料数量",
            });
          }
          // if (value.formedNum > this.item.product[0].feedQuantity) {
          //   console.log(this.item.product[0].feedQuantity);
          //   this.$set(
          //     this.item.workReportInfo,
          //     "workReportInfo",
          //     this.item.product[0].feedQuantity
          //   );
          //   this.$set(this.notFormedList[0], "notFormedNum", 0);
          //   this.notForme();
          //   return uni.showToast({
          //     icon: "none",
          //     title: "合格品数量不能大于投料数量",
          //   });
          // }
        }
      }

      console.log(
        Number(this.item.workReportInfo.formedNum),
        "Number(this.item.workReportInfo.feedQuantity)"
      );

      console.log(Number(value.formedNum), "Number(value.formedNum)");

      if (
        this.item.product[0] &&
        this.item.product[0].feedQuantity > 0 &&
        Number(this.item.workReportInfo.formedNum)
      ) {
        console.log("555555");
        this.$set(
          this.notFormedList[0],
          "notFormedNum",
          Number(value.formedNum) - Number(this.item.workReportInfo.formedNum)
        );
        this.notForme();
      }

      let weight =
        Number(this.item.workReportInfo.formedNum) *
        Number(this.item.singleWeight) *
        Number(this.item.weightMultiple);

      if (["G", "g", "克"].includes(this.item.singleWeightUnit)) {
        weight = parseFloat((weight / 1000).toFixed(2));
      } else {
        weight = parseFloat(weight.toFixed(2));
      }

      this.$set(this.item.workReportInfo, "formedWeight", weight);

      total =
        Number(this.item.workReportInfo.formedNum) +
        Number(this.item.workReportInfo.notFormedNum);

      console.log(total);

      this.$emit("modeNum", total);

      this.$forceUpdate();
    },

    notForme() {
      let weight =
        Number(this.item.workReportInfo.notFormedNum) *
        Number(this.item.singleWeight) *
        Number(this.item.weightMultiple);
      if (
        this.item.singleWeightUnit == "G" ||
        this.item.singleWeightUnit == "g" ||
        this.item.singleWeightUnit == "克"
      ) {
        weight = parseFloat((weight / 1000).toFixed(2));
      } else {
        weight = parseFloat(weight.toFixed(2));
      }
      this.$set(this.item.workReportInfo, "notFormedWeight", weight);

      // if (
      //   this.item.product[0] &&
      //   this.item.product[0].feedQuantity > 0 &&
      //   Number(this.notFormedList[0].notFormedNum)
      // ) {
      //   this.$set(
      //     this.item.workReportInfo,
      //     "formedNum",
      //     this.item.product[0].feedQuantity -
      //       Number(this.notFormedList[0].notFormedNum)
      //   );

      //   let weight =
      //     Number(this.item.workReportInfo.formedNum) *
      //     Number(this.item.singleWeight) *
      //     Number(this.item.weightMultiple);
      //   if (
      //     this.item.singleWeightUnit == "G" ||
      //     this.item.singleWeightUnit == "g" ||
      //     this.item.singleWeightUnit == "克"
      //   ) {
      //     weight = parseFloat((weight / 1000).toFixed(2));
      //   } else {
      //     weight = parseFloat(weight.toFixed(2));
      //   }
      //   this.$set(this.item.workReportInfo, "formedWeight", weight);
      // }

      this.$forceUpdate();
    },

    changeNum(value) {
      // 不合格数量
      let val = value;
      //匹配非数字
      let reg = new RegExp("([^0-9]*)", "g");
      let ma = val.match(reg);
      //如果有非数字，替换成""
      if (ma.length > 0) {
        for (let k in ma) {
          if (ma[k] != "") {
            val = val.replace(ma[k], "0");
          }
        }
      }
      //可以为0，但不能以0开头
      if (val.startsWith("0") && val.length > 1) {
        val = val.substring(1, val.length);
      }

      // this.$set(this.item.workReportInfo, 'formedNum', val)
      value = val;

      console.log(Number(this.item.workReportInfo.formedNum), 1);
      console.log(Number(this.item.workReportInfo.notFormedNum), 2);

      let total =
        Number(this.item.workReportInfo.formedNum) +
        Number(this.item.workReportInfo.notFormedNum);

      console.log(total);

      this.$emit("modeNum", total);

      this.notForme();
      // this.blurNum()
    },
  },
};
</script>

<style lang="scss" scoped>
.unit-btn {
  background-color: #157a2c;
  height: 48rpx;
  padding: 0 20rpx;
  line-height: 48rpx;
  color: #fff;
  font-size: 12px;
}

.content_num {
  display: flex;
  align-items: center;
  padding: 0 4rpx;
  font-size: 26rpx !important;
  /deep/ .uni-input-input {
    border: 2rpx solid #f0f8f2;
    background: #f0f8f2;
    color: $theme-color;
  }
}

.item {
  display: flex;
  justify-content: space-between;
}

.title_box {
  margin-top: 20rpx;

  .name {
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    color: $theme-color;
    padding-left: 20rpx;

    position: relative;

    &:before {
      position: absolute;
      content: "";
      left: 0rpx;
      top: 0rpx;
      bottom: 0rpx;
      width: 4rpx;
      height: 28rpx;
      background: $theme-color;
      margin: auto;
    }
  }
}

.material {
  margin-top: 10rpx;

  .content_table {
    width: 100%;
    border: 2rpx solid $border-color;

    .item {
      display: flex;
      border-bottom: 2rpx solid $border-color;

      .lable {
        width: 132rpx;
        text-align: center;
        background-color: #f7f9fa;
        font-size: 26rpx;
        border-right: 2rpx solid $border-color;
        flex-shrink: 0;
      }

      .lable220 {
        width: 220rpx !important;
        font-size: 24rpx;
      }

      .lable150 {
        width: 156rpx !important;
        font-size: 24rpx;
      }

      .ww80 {
        width: 80rpx;
      }

      .content {
        width: 518rpx;
        min-height: 64rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        font-style: normal;
        font-weight: 400;
        padding: 18rpx 8rpx;
        box-sizing: border-box;
        word-wrap: break-word;
        flex-grow: 1 !important;

        .unit {
          padding: 0 4rpx;
          font-size: 24rpx;
          color: #404446;
        }

        .penalize {
          width: 160rpx;
          line-height: 60rpx;
          background: $theme-color;
          font-size: 24rpx;
          text-align: center;
          color: #fff;
        }
      }

      .pd4 {
        padding: 4rpx 8rpx;
      }

      &:last-child {
        border-bottom: none;
      }
    }

    .ww55 {
      width: 55%;
    }

    .ww45 {
      width: 45%;
    }
  }
}
</style>