1.项目整体样式修改

loulijun2021

2022-08-09 04c5571156dc904de0ab2478a6b73b304bc16c4c

 src/views/zlgl/gxjy.vue

@@ -1,12 +1,15 @@
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="margin-left: 10px;margin-top:10px;display: flex;flex-direction: column">
      <div style="padding-top: 10px;display: flex;flex-direction: column">
        <div style="margin-bottom: 15px;font-size: 14px">
          <i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />扫码信息
        </div>
        <div style="display: flex;align-items: center">
          <div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>扫描条码：</div>
          <div style="width: 90px;display: flex">
            <div style="color: red;width:10px">*</div>
            扫描条码：
          </div>
          <el-input
            v-model="form.orderstepqrcode"
            name="GXproduceCode"
@@ -15,8 +18,8 @@
          />
        </div>
        <!--        六项信息      -->
        <div v-if="!isIpad" style="display:flex;margin-top: 10px;align-items: center; line-height: 50px">
          <div style="display: flex;">
        <div v-if="!isIpad" style="background:#f8f8fa ;display:flex;margin-top: 10px;align-items: center; line-height: 50px">
          <div style="display: flex; margin-left: 10px">
            <div style="display: flex;margin-right: 50px">
              <div style="width: 90px">工单编码：</div>
              <div style="width: 200px">{{ form.wo_code }}</div>
@@ -47,7 +50,10 @@
            </div>
          </div>
        </div>
        <div v-if="isIpad" style="display:flex;margin-top: 10px;align-items: center;line-height: 30px; flex-direction: column">
        <div
          v-if="isIpad"
          style="display:flex;margin-top: 10px;align-items: center;line-height: 30px; flex-direction: column"
        >
          <div style="display: flex; justify-content: flex-start;width: 100%">
            <div style="display: flex;margin-right: 50px">
              <div style="width: 90px">工单编码：</div>
@@ -83,7 +89,10 @@
          <i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />检验标准信息
        </div>
        <div style="display: flex;align-items: center">
          <div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>检验标准：</div>
          <div style="width: 90px;display: flex">
            <div style="color: red;width:10px">*</div>
            检验标准：
          </div>
          <el-select
            v-model="checkStandard"
            style="width: 200px;"
@@ -98,7 +107,10 @@
              :value="item.code"
            />
          </el-select>
          <div style="width: 90px;margin-left: 50px;display: flex"><div style="color: red;width:10px">*</div>检验人员：</div>
          <div style="width: 90px;margin-left: 50px;display: flex">
            <div style="color: red;width:10px">*</div>
            检验人员：
          </div>
          <el-select
            v-model="checkUser"
            style="width: 200px;"
@@ -123,14 +135,13 @@
          <el-table
            ref="multipleTable"
            :data="JYTableData"
            :height="(tableHeight-195)+'px'"
            :height="tableHeight+'px'"
            border
            stripe
            :row-class-name="tableRowClassName"
            :style="{width: 100+'%',height:tableHeight+'px',}"
            highlight-current-row
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
            @cell-dblclick="cellDblclick"
          >
@@ -138,6 +149,7 @@
              type="index"
              label="序号"
              width="100"
              fixed
            />
            <!--            <el-table-column-->
            <!--              prop="code"-->
@@ -184,7 +196,8 @@
                />
                <div
                  v-else
                > {{ scope.row.stepcheckitem_desc }}</div>
                > {{ scope.row.stepcheckitem_desc }}
                </div>

              </template>
            </el-table-column>
@@ -244,7 +257,10 @@
        <div style="display: flex;margin-top: 20px;align-items: center">

          <div style="display: flex;margin-right: 50px;align-items: center">
            <div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>检验结果：</div>
            <div style="width: 90px;display: flex">
              <div style="color: red;width:10px">*</div>
              检验结果：
            </div>
            <el-select
              v-model="checkResult"
              style="width: 200px;"
@@ -601,7 +617,8 @@
        //   this.tabClickIndex = row.index
        //   this.tabClickLabel = column.label
        //   break
        default: return
        default:
          return
      }
    },
    // 回车事件
@@ -612,14 +629,15 @@
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
      return 'custom-row'
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 450

        this.isIpad = window.innerHeight < 769
        this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
      })
    }
  }
@@ -627,30 +645,61 @@
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-input .el-select__caret {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<!--公共页面样式-->
<style lang="scss" scoped>
$main_color: #42b983;
.el-button--text {
  font-size: 14px;
  cursor: pointer;
}

.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
  color: $main_color;
  cursor: pointer;
}

.el-icon-edit-outline {
  margin-right: 15px;
}

::v-deep .el-button--primary, .el-button--default, .el-button--info {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

::v-deep .el-button--primary {
  background-color: $main_color !important;
  height: 30px;
  display: flex;
  align-items: center;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
  //background-color: $main_color !important;
}

::v-deep .el-button--primary:hover {
::v-deep .el-button--default {
  background-color: #f8f8fa;
  border: none;
}

::v-deep .el-button--info {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
  //color: #a7a7a7;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: $main_color !important;
::v-deep .el-dialog__body {
  padding: 20px 100px !important;
}

::v-deep .dialogVisibleRoles .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .importPickerClass .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .el-dialog__footer {
@@ -658,106 +707,30 @@
  justify-content: flex-end;
}

.footerButton {
  display: flex;
  justify-content: end;
}

::v-deep .el-button--default {
  background-color: #ffffff !important;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

::v-deep .el-button--default:hover {
  color: #606266;
}

::v-deep .el-dialog__body {
  padding: 20px 100px !important;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: $main_color;
  border-color: $main_color;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
}

::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}

::v-deep .el-input__inner:focus {
  border-color: $main_color;
}

::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}

::v-deep .cell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

::v-deep .el-button--text {
  color: $main_color;
  font-size: 14px;
  cursor: pointer;
}

.operationClass {
  height: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: space-between;
}

.el-icon-share {
  color: $main_color;
  cursor: pointer;
::v-deep .el-table::before {
  height: 0;
}

.el-checkbox.is-bordered.is-checked {
  border-color: $main_color;
::v-deep .el-table__body-wrapper {
  background-color: #f8f8fa;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: $main_color;
  background: $main_color;
::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #eaecef;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: $main_color;
  background: $main_color;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: $main_color !important;
}

::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin: 10px 30px 0px 0;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px 30px 0px 0;
::v-deep .el-form--inline .el-form-item__label {
  color: #a7a7a7;
}

.body ::v-deep .el-divider {
@@ -770,29 +743,14 @@
  margin-bottom: 0;
}

::v-deep .el-input__inner:focus {
  border-color: $main_color;
.userDialogVisible ::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-select .el-input__inner:focus {
  border-color: $main_color;
}
</style>
<style>

::v-deep .el-select-dropdown__item.selected {
  color: $main_color;
}

::v-deep .el-checkbox__inner:hover {
  border-color: $main_color;
}

::v-deep .el-textarea__inner:focus {
  border-color: $main_color;
}

::v-deep .el-select .el-input .el-select__caret {
  display: flex;
  align-items: center;
  justify-content: center;
.el-table .custom-row {
  background: #f8f8fa;
}
</style>