fixed TODO#131357 進行預約: 職業選擇畫面調整

Mila

2021-12-23 c20a0f1a1dbaa23d1b073f9a9377cac5d572f277

fixed TODO#131357 進行預約: 職業選擇畫面調整

 PAMapp/assets/scss/vendors/elementUI/_radio.scss

@@ -50,18 +50,20 @@
    }
}

.pam-single__select--col{
.pam-single__select--col {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    .el-radio-button{
        @extend .fix-chrome-click--issue;
        width: 100%;
        margin-top: 30px;
        margin-right: 10px;

        &.is-active{
            .el-radio-button__inner{
                color:$DARK_BLUE;
                font-weight: bolder;
                background-color: $CORAL;
                color: $PRIMARY_WHITE;
                transition: 0s;
            }
        }
        &:focus:not(.is-focus):not(:active):not(.is-disabled){
@@ -72,9 +74,11 @@
            color:$PRIMARY_BLACK; ;
            background-color:$PRIMARY_WHITE;
            box-shadow: none;
            width: 100%;
            font-size: 20px;
            font-weight: normal;
            transition: 0s;
            border: 1px $LIGHT_GREY solid;
            border-radius: 50px;
        }
    }
}
@@ -89,6 +93,22 @@
        background-image: url('~/assets/images/quickFilter/btn_man.svg');
    }
}
.btn_unlimited {
    .el-radio__label {
        background-image: url('~/assets/images/quickFilter/btn_unlimited.svg');
    }
}
.btn_senior {
    .el-radio__label {
        background-image: url('~/assets/images/quickFilter/btn_senior.svg');
    }
}
.btn_young {
    .el-radio__label {
        background-image: url('~/assets/images/quickFilter/btn_young.svg');
    }
}

.pam-single-btn.el-radio-group{
  .el-radio {
    padding: 10px 20px;
@@ -124,5 +144,5 @@
        }
      }
    }
}
  }
}

 PAMapp/components/careerSelect.vue

@@ -10,7 +10,7 @@
          <i class="icon-down down-icon"></i>
        </div>
      </div>
      <PopUpFrame :isOpen.sync="showJobDrawer">
      <PopUpFrame :isOpen.sync="showJobDrawer" :dialogWidth="'400px'">
        <div class="pam-career">
          <div class="subTitle">您的職業</div>
          <el-radio-group class="pam-single__select--col" v-model="career" @change="handleChange">
@@ -20,8 +20,10 @@
              {{career.title}}
            </el-radio-button>
          </el-radio-group>
          <div class="mt-10" v-if="career === '其他'">
            <input class="pam-career__other-input"
          <div class="mt-20 h-50 pam-career__other">
            <input
              v-if="career === '其他'"
              class="pam-career__other-input"
              :class="{'warning':!career_Other}"
              v-model="career_Other" >
          </div>
@@ -41,6 +43,7 @@
<script lang="ts">
  import { Component , PropSync , Vue} from "vue-property-decorator";
  import * as _ from 'lodash';

  @Component
  export default class CareerSelect extends Vue {
    @PropSync('careerSelect',{ type: String, default :''}) syncCareerSelect! :string;
@@ -127,23 +130,29 @@
      }
    }
  }
  .pam-career__other-input{
  .h-50 {
    height: 50px;
  }
  .pam-career__other {
    width: 100%;
    border: 1px #CCCCCC solid;
    width: 300px;
    padding-left: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &.warning{
      border: 1px $PRIMARY_RED solid;
    .pam-career__other-input {
      height: 50px;
      border: 1px #CCCCCC solid;
      width: 100%;
      padding-left: 15px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      &.warning{
        border: 1px $PRIMARY_RED solid;
      }
    }

  }
  .pam-career__confirm{
    width: 120px;
    height: 50px;
    margin-top: 30px;
    margin-top: 20px;
  }

</style>