update: TODO#132409 重構年資radio btn

Mila

2021-12-23 88b47c0ae2f085237e981551607d5b8148072e84

update: TODO#132409 重構年資radio btn

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

@@ -18,19 +18,33 @@
        .el-radio__label {
            text-align: center;
            color: $PRIMARY_BLACK;
            display: block;
            line-height: 110px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-left: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 100%;
            @extend .mdTxt;

            .subtitle {
                margin-top: 10px;
                @extend .smTxt_bold;
                color: $PRUDENTIAL_GREY;
            }
        }

        &.is-checked {
            background-color: $PEACH;
            .el-radio__label {
                color: $PRIMARY_WHITE;

                .subtitle {
                    color: $PRIMARY_WHITE;
                    font-weight: lighter;
                }
            }
        }
    }

 PAMapp/components/QuickFilter/QuickFilterSelector.vue

@@ -33,31 +33,23 @@
            </el-checkbox-group>
        </div>
        <!-------------------- 年資 -------------------->
        <div class="quickBtnBlock pam-radio-group"
        <div class="quickBtnBlock"
            v-else-if="questionOption.name === 'seniority'"
        >
            <div
                v-for="(i, index) in questionOption.detail"
                :key="index"
                class="pam-radio"
            <el-radio-group
                class="pam-quickFilter-radio pam-radio-group"
                v-model="pickedItem.seniority"
            >
                <input
                    :id="i.value"
                    type="radio"
                    name="seniority"
                    :value="i.value"
                    class="el-radio-input"
                    v-model="pickedItem.seniority"
                >
                <label
                    :for="i.value"
                    class="el-radio-label"
                <el-radio
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
                    :label="i.value"
                    :class="i.className"
                >
                    <p>{{i.name}}</p>
                    <p class="subtitle">{{i.subTitle}}</p>
                </label>
            </div>
                    <div>{{i.name}}</div>
                    <div class="subtitle">{{i.subTitle}}</div>
                </el-radio>
            </el-radio-group>
        </div>
        <!-------------------- 性別 -------------------->
        <div class="quickBtnBlock"
@@ -151,7 +143,6 @@
        }
    }


    //////////////////////////////////////////////////////////////////
    private getGender(): string {
        return this.filterSingleSelected('gender');
@@ -190,60 +181,7 @@

    .pam-radio-group {
        height: 240px;

        .pam-radio {
            width: 48%;
            height: 110px;

            .el-radio-input {
                display: none;
            }

            .el-radio-label {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                box-shadow: 0 0 6px #22222229;
                border-radius: 10px;
                -webkit-tap-highlight-color: transparent;
                font-size: 20px;
                font-weight: bold;
                color: $PRIMARY_BLACK;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                cursor: pointer;

                .subtitle {
                    @extend .smTxt_bold;
                    color: $PRUDENTIAL_GREY;
                }

                &.btn_unlimited {
                    background-image: url('~/assets/images/quickFilter/btn_unlimited.svg');
                }

                &.btn_senior {
                    background-image: url('~/assets/images/quickFilter/btn_senior.svg');
                }

                &.btn_young {
                    background-image: url('~/assets/images/quickFilter/btn_young.svg');
                }
            }

            .el-radio-input:checked ~ .el-radio-label {
                background-color: $PEACH;
                color: $PRIMARY_WHITE;
                .subtitle {
                    color: $PRIMARY_WHITE;
                    font-weight: lighter;
                }
            }
        }
        flex-wrap: wrap;
    }

</style>