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

<template>
  <view>
    <view class="title_box rx-bc">
      <view class="name"> 报工信息： ({{ list.length || 0 }})个</view>
    </view>

    <view
      :class="[
        'material',
        it.extInfo.reportWeight && it.extInfo.reportWeight && 'materialBor',
      ]"
      v-for="(it, idx) in list"
      :key="idx"
    >
      <view class="content_table">
        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable190 rx-cc" @click="getDelete2(idx)">
              <view class="round">{{ idx + 1 }}</view>
              <uni-icons
                custom-prefix="iconfont"
                type="icon-shanchu"
                size="16"
                color="#fa3534"
              ></uni-icons>
              物料编码
            </view>
            <view class="content rx-bc">
              <view>{{ it.code }} </view>
              <view
                class="tag_box"
                v-if="
                  Object.prototype.hasOwnProperty.call(it, 'extInfo') &&
                  Object.prototype.hasOwnProperty.call(
                    it.extInfo,
                    'productionTimes'
                  ) &&
                  Object.prototype.hasOwnProperty.call(
                    it.extInfo.productionTimes,
                    item.currentTaskDiagram.taskId
                  )
                "
              >
                {{ it.extInfo.productionTimes[item.currentTaskDiagram.taskId] }}
              </view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">名称</view>
            <view class="content rx-bc">
              <view
                >{{ it.name }}
                <text
                  v-if="[2, 23, 9, 28].includes(Number(it.rootCategoryLevelId))"
                >
                  ({{
                    it.rootCategoryLevelId == 2
                      ? "在制品"
                      : it.rootCategoryLevelId == 23
                      ? "半成品"
                      : it.rootCategoryLevelId == 9
                      ? "产品"
                      : it.rootCategoryLevelId == 28
                      ? "废品"
                      : ""
                  }})
                </text>
              </view>

              <view class="rx-ec">
                <view
                  class="tag_box"
                  v-if="it.isCache"
                  style="margin-right: -36rpx; margin-right: 4rpx"
                  >缓</view
                >
                <view
                  class="tag_box"
                  v-if="
                    Object.prototype.hasOwnProperty.call(
                      it.extInfo,
                      'isOutsource'
                    ) && it.extInfo.isOutsource == 1
                  "
                  style="margin-right: -36rpx"
                  >委外</view
                >
              </view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">型号</view>
            <view class="content rx-sc">
              <view>{{ it.modelType }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">批次号</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.batchNo }}</view>
              <input class="uni-input" v-else v-model="it.batchNo" />
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">牌号</view>
            <view class="content content_num">
              <view>{{ it.brandNum }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">物料代号</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.materielCode }}</view>
              <input
                class="uni-input"
                v-else
                v-model="it.extInfo.materielCode"
              />
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">客户代号</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.clientCode }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.clientCode" />
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc" v-if="clientEnvironmentId != 5"
              >刻码</view
            >
            <view class="lable lable150 rx-cc" v-if="clientEnvironmentId == 5"
              >识别码</view
            >
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.engrave }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.engrave" />
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">序列号</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.productSequence }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">设备</view>
            <view class="content">
              <view>{{ it.deviceName || it.extInfo.deviceName }}</view>
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">炉次号</view>

            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.heatNumber }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.heatNumber" />
            </view>
          </view>
        </view>
        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">位置</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.position }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.position" />
            </view>
          </view>
        </view>
        <view class="item rx-sc">
          <view class="rx ww45">
            <view class="lable lable150 rx-cc">是否合格</view>
            <view class="content content_num">
              <zxz-uni-data-select
                :localdata="isQualifiedList"
                v-model="it.extInfo.isQualified"
                dataValue="code"
                format="{name}"
                dataKey="code"
                filterable
                :disabled="isDetails"
                :clear="false"
                @change="handleInput"
              ></zxz-uni-data-select>
            </view>
          </view>

          <!-- 			<view class="rx ww50" v-if="it.extInfo.isQualified && it.extInfo.isQualified == 2">
						<view class="lable lable150 rx-cc ">类型</view>
						<view class="content  content_num">
							<zxz-uni-data-select :localdata="notTypeList" v-model="it.extInfo.notType" dataValue='code'
								format='{name}' dataKey="code" filterable :disabled="isDetails"
								:clear='false'></zxz-uni-data-select>
						</view>
					</view> -->
        </view>

        <!-- 				<view class="item rx-sc" v-if="it.extInfo.isQualified != 1  && it.extInfo.notType != 5 ">
					<view class="rx ">
						<view class="lable lable150 rx-cc ">原因</view>
						<view class="content content_num">
							<view v-if='isDetails'>{{it.extInfo.notReason }}</view>
							<input class="uni-input" v-else v-model="it.extInfo.notReason"></input>
						</view>
					</view>

				</view> -->
      </view>

      <view
        class="content_table2"
        v-if="
          ![1, 2, 3, 4].includes(Number(it.extInfo.notType)) &&
          clientEnvironmentId == 3
        "
      >
        <view class="head row rx-sc">
          <view class="item ww25" style="font-size: 20rpx"
            >{{ it.extInfo.newWeight ? "上道工序重量" : "物料重量" }}
            {{ it.extInfo.weightUnit }}
          </view>
          <view class="item ww25">报工重量{{ it.extInfo.weightUnit }}</view>
          <view class="item ww25" v-if="isFirstTask == 1">质检结果 </view>
          <view class="item ww25" :class="[isFirstTask == 1 ? 'ww25' : 'ww50']"
            >处置
          </view>
        </view>

        <view class="table">
          <view class="tr row rx-sc">
            <view
              class="item ww25"
              v-if="
                Object.prototype.hasOwnProperty.call(it.extInfo, 'newWeight') &&
                it.extInfo.newWeight
              "
            >
              {{ it.extInfo.newWeight }}
            </view>

            <view
              class="item ww25 content_num"
              v-if="
                !Object.prototype.hasOwnProperty.call(
                  it.extInfo,
                  'newWeight'
                ) ||
                it.extInfo.newWeight == null ||
                it.extInfo.newWeight == 0
              "
            >
              <input
                class="uni-input"
                v-model="it.extInfo.weight"
                type="digit"
              />
            </view>

            <view class="item ww25 content_num">
              <view v-if="isDetails">{{ it.extInfo.reportWeight }}</view>
              <input
                class="uni-input"
                v-else
                v-model="it.extInfo.reportWeight"
                type="digit"
                @input="handleInput"
              />
            </view>
            <view
              class="item ww25"
              @click="openNumerate(it, idx)"
              v-if="isFirstTask == 1"
            >
              <view class="numerate">点击计算</view>
            </view>

            <view
              class="item"
              v-if="isDetails"
              :class="[isFirstTask == 1 ? 'ww25' : 'ww50']"
            >
              {{ it.extInfo.taskName }}
            </view>

            <view
              class="item"
              v-else
              :class="[isFirstTask == 1 ? 'ww25' : 'ww50']"
            >
              <zxz-uni-data-select
                :localdata="stepsList"
                v-model="it.extInfo.taskId"
                dataValue="taskId"
                format="{taskTypeName}"
                dataKey="taskId"
                filterable
                @change="(e) => (it.extInfo.taskName = e.taskTypeName)"
                :clear="false"
              ></zxz-uni-data-select>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-popup
      :show="show"
      mode="center"
      v-if="show"
      :closeOnClickOverlay="false"
    >
      <view class="popup_box">
        <view class="title_box rx-bc">
          <view class="name">工序计算列表</view>
          <view class="btn_box rx-ec">
            <view class="btn" @click="handAddParam">新增</view>
          </view>
        </view>

        <view class="content_table2">
          <view class="head row rx-sc">
            <view class="item ww30">工序名称</view>
            <view class="item ww20">坯体密度</view>
            <view class="item ww20">密度系数</view>
            <view class="item ww20">重量</view>

            <view class="item ww10">操作</view>
          </view>

          <view class="table">
            <view
              class="tr row rx-sc"
              v-for="(it, idx) in paramList"
              :key="idx"
            >
              <view class="item rx-bc ww30">
                <zxz-uni-data-select
                  :localdata="stepsList"
                  v-model="it.taskId"
                  dataValue="taskId"
                  format="{taskTypeName}"
                  dataKey="taskId"
                  filterable
                  @change="(e) => (it.taskName = e.taskTypeName)"
                  :clear="false"
                ></zxz-uni-data-select>
              </view>

              <view class="item ww20 content_num">
                <input
                  class="uni-input"
                  v-model="it.billet"
                  type="digit"
                  @input="changeInp(it, idx)"
                />
              </view>

              <view class="item ww20 content_num">
                <input
                  class="uni-input"
                  v-model="it.density"
                  type="digit"
                  @input="changeInp(it, idx)"
                />
              </view>

              <view
                class="item ww20"
                v-if="idx == 0 || idx != paramList.length - 1"
              >
                < {{ it.CVIWeight }}
              </view>

              <view
                class="item ww20"
                v-if="paramList.length > 1 && idx == paramList.length - 1"
              >
                ≥ {{ it.CVIWeight }}
              </view>

              <view class="item ww10 rx-cc" @click="getDelete(idx)">
                <uni-icons
                  custom-prefix="iconfont"
                  type="icon-shanchu"
                  size="20"
                  color="#fa3534"
                ></uni-icons>
              </view>
            </view>
          </view>

          <view class="formula_box"
            >计算公式： 物料重量/坯体密度*密度系数
          </view>

          <view class="rx-cc">
            <u-button
              size="small"
              class="u-reset-button"
              style="width: 300rpx; margin: 20rpx"
              type="success"
              @click="paramSave"
              >工序列表保存</u-button
            >
          </view>

          <view class="reportWeight rx-sc">
            物料重量: {{ weight }} ; 报工重量: {{ reportWeight }}
          </view>
        </view>

        <view class="operate_box rx-sc">
          <u-button size="small" class="u-reset-button" @click="cancel"
            >取消</u-button
          >
          <u-button
            size="small"
            class="u-reset-button"
            type="success"
            @click="save"
            >确定</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getTaskInstanceList } from "@/api/pda/workOrder.js";

import { saveParam, getComputeParam } from "@/api/pda/tangu.js";
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },

    list: {
      type: Array,
      default: () => [],
    },

    isDetails: {
      type: Boolean,
      default: false,
    },

    equipmentList: {
      type: Array,
      default: () => [],
    },
  },

  watch: {
    equipmentList: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.deviceList = newVal;
        this.changeHeatNumber();
      },
    },
  },

  data() {
    return {
      taskTypeName: null,
      isFirstTask: null,

      stepsList: [],
      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境

      show: false,

      rowIt: [],

      paramList: [],
      paramObj: {},

      weight: 0,
      reportWeight: 0,

      resultObj: {},
      resultIdx: 0,

      deviceList: [],

      isQualifiedList: [
        {
          code: "1",
          name: "合格",
        },
        {
          code: "2",
          name: "不合格",
        },
      ],

      notTypeList: [
        {
          code: "1",
          name: "返工",
        },
        {
          code: "2",
          name: "返修",
        },
        {
          code: "3",
          name: "报废",
        },
        {
          code: "4",
          name: "降级使用",
        },
        {
          code: "5",
          name: "让步接收",
        },
      ],
    };
  },
  created() {
    this.taskTypeName = this.item.currentTaskDiagram.taskTypeName;
    this.isFirstTask = this.item.currentTaskDiagram.isFirstTask;
    this.getSteps();
    this.getCompute();
    setTimeout(() => {
      this.handleInput();
    }, 800);
  },
  methods: {
    getSteps() {
      getTaskInstanceList(this.item.workOrderId).then((res) => {
        res.pop();

        this.stepsList = res;
      });
    },

    getCompute() {
      getComputeParam(
        this.item.workOrderId,
        this.item.currentTaskDiagram.taskId
      ).then((res) => {
        this.paramList = [];
        this.paramList = (res && res.paramList) || [];
        this.paramObj = res || {};
      });
    },

    handAddParam() {
      // billet: null,
      // density: null,
      // result: null,

      // PIPDensity: null,
      // volume: null,
      // coefficient: null

      if (this.isFirstTask == 1) {
        this.paramList.push({
          taskId: null,
          taskName: null,
        });
      }
    },

    getDelete(idx) {
      this.paramList.splice(idx, 1);
    },

    changeInp(item, index) {
      if (Number(item.billet) && Number(item.density)) {
        this.paramList[index].CVIWeight = (
          (Number(this.weight) / item.billet) *
          item.density
        ).toFixed(2);
      }
    },

    paramSave() {
      if (this.isFirstTask == 1 && this.paramList.length > 0) {
        let bol;
        let _i;
        bol = this.paramList.every((e, i) => {
          _i = i + 1;
          return e.taskId && e.billet && e.density;
        });

        if (!bol) {
          uni.showToast({
            title: `请完善第${_i}计算数据`,
            icon: "none",
          });
          return false;
        }

        if (this.paramList.length < 1) {
          uni.showToast({
            title: `请输入二个以上计算数据`,
            icon: "none",
          });

          return false;
        }
      }
      let param = {};

      if (!Object.prototype.hasOwnProperty.call(this.paramObj, "id")) {
        param = {
          paramList: this.paramList,
          workOrderId: this.item.workOrderId,
          taskId: this.item.currentTaskDiagram.taskId,
        };
      } else {
        this.paramObj.paramList = this.paramList;
        param = this.paramObj;
      }

      saveParam(param).then((res) => {
        uni.showToast({
          icon: "none",
          title: "操作成功",
        });
        this.getCompute();
      });
    },

    openNumerate(row, idx) {
      if (!row.extInfo.reportWeight) {
        uni.showToast({
          icon: "none",
          title: "请先输入报工重量",
        });
        return false;
      }
      this.weight = row.extInfo.weight;
      this.reportWeight = row.extInfo.reportWeight;
      this.resultIdx = idx;

      this.show = true;
    },

    handleInput() {
      let arr = JSON.parse(JSON.stringify(this.list));
      this.sumweight(arr);
      // this.sunTj();
      console.log("arr11111112222", arr);
      // console.log('this.list33333',this.list)
    },
    sumweight(arr) {
      let formedWeight = 0;
      let notFormedWeight = 0;
      arr.map((s, i) => {
        if (s.extInfo.reportWeight) {
          if (s.extInfo.isQualified == 1) {
            formedWeight += s.extInfo.reportWeight * 1;
          } else {
            notFormedWeight += s.extInfo.reportWeight * 1;
          }
        } else {
          s.extInfo.reportWeight = null;
        }
      });
      console.log("chulaiuwanlo", formedWeight, notFormedWeight);
      this.$emit("weightEmit", formedWeight, notFormedWeight);
    },

    cancel() {
      this.show = false;
      this.reportWeight = 0;
      this.weight = 0;
    },

    taskChange(e) {
      console.log(e);
    },

    getDelete2(idx) {
      uni.showModal({
        title: "删除",
        content: "是否确实删除此物料！",
        confirmText: "确认", //这块是确定按钮的文字
        success: (rr) => {
          if (rr.confirm) {
            this.list.splice(idx, 1);
          }
        },
      });
    },

    save() {
      if (this.isFirstTask == 1) {
        this.resultObj = {};

        if (Number(this.reportWeight) < Number(this.paramList[0].CVIWeight)) {
          this.resultObj = this.paramList[0];
          this.setDataSave();
          return false;
        }

        if (
          Number(this.reportWeight) >=
          this.paramList[this.paramList.length - 1].CVIWeight
        ) {
          this.resultObj = this.paramList[this.paramList.length - 1];
          this.setDataSave();
          return false;
        }

        for (let i = 1; i < this.paramList.length; i++) {
          console.log(i);
          console.log(
            11,
            Number(this.paramList[i - 1].CVIWeight),
            Number(this.reportWeight)
          );
          if (
            Number(this.paramList[i - 1].CVIWeight) <
              Number(this.reportWeight) &&
            Number(this.reportWeight) < Number(this.paramList[i].CVIWeight)
          ) {
            this.resultObj = this.paramList[i];
            break;
          }
        }
        this.setDataSave();
      }
    },

    setDataSave() {
      this.$set(
        this.list[this.resultIdx].extInfo,
        "taskId",
        this.resultObj.taskId
      );
      this.$set(
        this.list[this.resultIdx].extInfo,
        "density",
        this.resultObj.density
      );
      this.$set(
        this.list[this.resultIdx].extInfo,
        "billet",
        this.resultObj.billet
      );
      this.$set(
        this.list[this.resultIdx].extInfo,
        "taskName",
        this.resultObj.taskName
      );

      this.cancel();
    },

    changeHeatNumber() {
      console.log(this.deviceList);
      this.deviceList.forEach((f) => {
        this.list.forEach((o) => {
          if (
            o.deviceId &&
            f.instanceId == o.deviceId &&
            this.deviceList.length > 1
          ) {
            o.extInfo.heatNumber = f.extInfo.heatNumber;
            this.$forceUpdate();
          } else if (this.deviceList.length == 1) {
            o.extInfo.heatNumber = this.deviceList[0].extInfo.heatNumber;
            this.$forceUpdate();
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.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;
    }
  }

  .btn_box {
    .btn {
      padding: 0 18rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: $theme-color;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 400;
      font-size: 24rpx;
      color: #fff;
      border-radius: 4rpx;
      margin-left: 24rpx;
    }
  }
}

.material {
  margin-top: 16rpx;
  border: 1rpx solid transparent;

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

    .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;
      }

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

      .lable190 {
        width: 200rpx !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;
        }
      }

      .content_H {
        min-height: 92rpx;
      }

      .pd4 {
        padding: 4rpx 8rpx;
      }

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

    .ww55 {
      width: 55%;
    }

    .ww50 {
      width: 50%;
    }

    .ww45 {
      width: 45%;
    }

    .tag_box {
      padding: 2rpx 10rpx;
      margin-right: 12rpx;
      background: #e6a23c;
      font-size: 22rpx;
      color: #fff;
      border-radius: 4rpx;
    }
  }
}

.materialBor {
  border: 1rpx solid #157a2c;
}

.content_table2 {
  width: 100%;

  .row {
    width: 100%;

    .item {
      color: #404446;
      font-size: 28rpx;
      padding-left: 12rpx;
    }

    .color157 {
      color: $theme-color;
    }

    .ww30 {
      width: 30%;
    }

    .ww20 {
      width: 20%;
    }

    .ww15 {
      width: 15%;
    }

    .ww25 {
      width: 25%;
    }

    .ww50 {
      width: 50%;
    }

    .ww10 {
      width: 10%;
    }
  }

  .head {
    height: 64rpx;
    background: #f7f9fa;
    // border-top: 2rpx solid #E3E5E5;
    border-left: 2rpx solid #e3e5e5;
    box-sizing: border-box;

    .item {
      height: 64rpx;
      line-height: 64rpx;
      border-right: 2rpx solid #e3e5e5;
      box-sizing: border-box;
      font-size: 22rpx;
    }
  }

  .tr {
    border-top: 2rpx solid #e3e5e5;
    border-left: 2rpx solid #e3e5e5;

    .item {
      font-size: 24rpx;
      min-height: 74rpx;
      display: flex;
      align-items: center;
      border-right: 2rpx solid #e3e5e5;
      box-sizing: border-box;
      white-space: normal;
      word-break: break-all;
    }

    &:last-child {
      border-bottom: 2rpx solid #e3e5e5;
    }

    .numerate {
      font-size: 22rpx;
      color: $theme-color;
    }
  }
}

.content_num {
  display: flex;
  align-items: center;
  padding: 0 4rpx;

  /deep/ .uni-input-input {
    border: 2rpx solid #f0f8f2;
    background: #f0f8f2;
    color: $theme-color;
  }
}

.round {
  width: 32rpx;
  height: 32rpx;
  line-height: 30rpx;
  text-align: center;
  border-radius: 50%;
  background: $theme-color;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  color: #fff;
  margin-right: 10rpx;
}

.popup_box {
  width: 94vw;
  padding: 16rpx 12rpx;
  box-sizing: border-box;
}

.operate_box {
  margin-top: 32rpx;
  padding: 10rpx 100rpx;

  /deep/ .u-button {
    width: 160rpx;
  }
}

.formula_box {
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  margin-top: 12rpx;
}

.reportWeight {
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  margin-top: 30rpx;

  text {
    color: $theme-color;
  }
}
</style>