From 88b47c0ae2f085237e981551607d5b8148072e84 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 23 十二月 2021 14:20:50 +0800
Subject: [PATCH] update: TODO#132409 重構年資radio btn
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 88 ++++++-------------------------------------
PAMapp/assets/scss/vendors/elementUI/_radio.scss | 18 ++++++++-
2 files changed, 29 insertions(+), 77 deletions(-)
diff --git a/PAMapp/assets/scss/vendors/elementUI/_radio.scss b/PAMapp/assets/scss/vendors/elementUI/_radio.scss
index 22d3686..9dfe12d 100644
--- a/PAMapp/assets/scss/vendors/elementUI/_radio.scss
+++ b/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;
+ }
}
}
}
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index 5aeb163..f29930c 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/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>
--
Gitblit v1.8.0