bugfix: 顧問結案頁面中的未結案原因select中的icon修正

charlie

2022-01-21 b9658b7c42ca15e11153f782949c33a9b2d6a07a

bugfix: 顧問結案頁面中的未結案原因select中的icon修正

 PAMapp/assets/icon/style.css

@@ -10,7 +10,7 @@
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
[class^="icon-"], [class*=" icon-"], [class*="el-icon-arrow-up"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
@@ -76,8 +76,8 @@
.icon-circle-right:before {
  content: "\e90b";
}
.icon-close:before {
  content: "\e90c";
.icon-down:before, .el-icon-arrow-up:before {
  content: "\e910";
}
.icon-comment:before {
  content: "\e90d";

 PAMapp/assets/scss/vendors/_elementUI.scss

@@ -15,4 +15,5 @@
@import './elementUI/tree';
@import './elementUI/upload';
@import './elementUI/textarea';
@import './elementUI/dateTimePicker';
@import './elementUI/dateTimePicker';
@import './elementUI/select';

 PAMapp/assets/scss/vendors/elementUI/_select.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,28 @@
.pam-select.el-select {
  width: 100%;

  .el-input {

    &__inner {
      padding-left: 20px;
      height: 46px;
      border: 1px solid #707070;
      border-radius: 5px;
      font-size: 20px;
    }
    &__icon {
      color: #ED1B2E;
      font-size: 25px;
      transform: none;
    }
  }
  .is-focus {
    .el-input__inner {
      border-color: #707070;
    }
  }
}

.el-select-dropdown__item {
  padding: 0 10px;
}

 PAMapp/components/Ui/UiSelect.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,26 @@
 <template>
  <el-select v-model="syncedCloseReason" class="pam-select" ref="select">
    <el-option
      v-for="(item,index) in options"
      :key="index"
      :label="item.key"
      :value="item.value">
      {{ item.key }}
    </el-option>
  </el-select>
</template>

<script lang="ts">
import { Vue, Component, PropSync, Prop} from 'nuxt-property-decorator';

@Component
export default class UiSelect extends Vue {

  @PropSync('closeReason', { type: String, default: 'other' })
  syncedCloseReason!: string;

  @Prop({ type:Array , default:()=>[] })
  options!: object[];

}
</script>

 PAMapp/pages/appointment/_appointmentId/close/index.vue

@@ -55,26 +55,16 @@
        <el-row
          class="pam-paragraph">
          <UiField label="未成交原因" :labelSize="20" class="required">
            <UiSelect :closeReason.sync="appointmentCloseInfo.closedReason"
              :options="appointmentFailReason"/>
          </UiField>
            <div class="appointment-client-detail-close__select-box">
              <select
                class="appointment-client-detail-close__select"
                name="closedReason" id="closedReason" v-model="appointmentCloseInfo.closedReason">
                <option :value="failReason.value" v-for="(failReason, index) in appointmentFailReason" :key="index">
                  {{ failReason.key }}
                </option>
              </select>
              <i class="icon-down down-icon"></i>
            </div>
            <div class="mt-10">
              <input
                v-if="appointmentCloseInfo.closedReason === 'other'
                    || appointmentCloseInfo.closedReason === 'no_suitable_commodity'"
                class="appointment-client-detail-close__input"
                v-model="appointmentCloseInfo.closedOtherReason"
                placeholder="請輸入原因，限50字。"
                type="text">
            </div>
          <input
            v-if="appointmentCloseInfo.closedReason === 'other'
                || appointmentCloseInfo.closedReason === 'no_suitable_commodity'"
            class="appointment-client-detail-close__input mt-10"
            v-model="appointmentCloseInfo.closedOtherReason"
            placeholder="請輸入原因，限50字。"
            type="text">
        </el-row>
      </template>

@@ -244,8 +234,7 @@

<style lang="scss" scoped>
.appointment-close__remark,
.appointment-client-detail-close__input,
.appointment-client-detail-close__select {
.appointment-client-detail-close__input {
  border-radius: 5px;
  border   : 1px solid #707070;
  font-size: 20px;
@@ -257,18 +246,6 @@
  }
  &.is-invalid {
    border-color: $PRIMARY_RED !important;
  }
}
.appointment-client-detail-close__select-box {
  position: relative;

  & .appointment-client-detail-close__select{
    appearance: none;
  }
  & .down-icon {
    position: absolute;
    right: 7px;
    bottom: 10px;
  }
}
.invite-review{