From 449084cb30b77ebb7ad77f1bb4cdc6942ff0d266 Mon Sep 17 00:00:00 2001 From: charlie <charlie@lvguanqingdeMacBook-Pro.local> Date: 星期四, 20 一月 2022 16:33:25 +0800 Subject: [PATCH] update & fixbug:顧問結案頁面下拉icon樣式調整、必填項樣式、跑版修正 --- PAMapp/pages/appointment/_appointmentId/close/index.vue | 63 ++++++++++++++++++++++--------- 1 files changed, 45 insertions(+), 18 deletions(-) diff --git a/PAMapp/pages/appointment/_appointmentId/close/index.vue b/PAMapp/pages/appointment/_appointmentId/close/index.vue index 09d6b8b..973e48a 100644 --- a/PAMapp/pages/appointment/_appointmentId/close/index.vue +++ b/PAMapp/pages/appointment/_appointmentId/close/index.vue @@ -15,7 +15,7 @@ <el-row type="flex" class="pam-paragraph" style="flex-direction: column"> - <UiField label="靽頨怠�����" :labelSize="20"> + <UiField label="靽頨怠�����" :labelSize="20" class="required"> <input class="appointment-client-detail-close__input" :class="{'is-invalid':!identityIdValid}" @@ -31,7 +31,7 @@ <el-row type="flex" class="pam-paragraph"> - <UiField label="���誨蝣噗lan Code" :labelSize="20"> + <UiField label="���誨蝣噗lan Code" :labelSize="20" class="required"> <input class="appointment-client-detail-close__input" v-model="appointmentCloseInfo.planCode" @@ -43,7 +43,7 @@ <el-row type="flex" class="pam-paragraph"> - <UiField label="�脖辣����" :labelSize="20"> + <UiField label="�脖辣����" :labelSize="20" class="required"> <DateTimePicker @changeDateTime="appointmentCloseDate = $event"></DateTimePicker> </UiField> </el-row> @@ -52,8 +52,9 @@ <template v-if="appointmentCloseInfo.selectCloseOption === 'close'"> <el-row class="pam-paragraph"> - <UiField label="���漱����" :labelSize="20"> + <UiField label="���漱����" :labelSize="20" class="required"> </UiField> + <div class="appointment-client-detail-close__selectbox"> <select class="appointment-client-detail-close__select" name="closedReason" id="closedReason" v-model="appointmentCloseInfo.closedReason"> @@ -61,17 +62,18 @@ {{ failReason.key }} </option> </select> + <i class="icon-down down-icon"></i> + </div> + <div style="display: flex" class="mt-10"> - <div style="display: flex" 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" + v-model="appointmentCloseInfo.closedOtherReason" + placeholder="隢撓�������50摮��" + type="text"> + </div> </el-row> </template> @@ -221,17 +223,16 @@ selectCloseOption, policyholderIdentityId, planCode, - remark, closedReason, closedOtherReason } = this.appointmentCloseInfo; // this.appointmentCloseInfo.policyEntryDate 銝行��齒瘜��澆 this.appointmentCloseDate if (selectCloseOption === 'done') { - return !policyholderIdentityId || !this.identityIdValid || !planCode || !this.appointmentCloseDate || !remark + return !policyholderIdentityId || !this.identityIdValid || !planCode || !this.appointmentCloseDate } else if (closedReason === 'other' || closedReason === 'no_suitable_commodity') { - return !closedOtherReason || !remark + return !closedOtherReason } - return !remark + return false } get identityIdValid() { @@ -252,11 +253,24 @@ font-size: 20px; padding : 10px 20px; width : 100%; + box-sizing: border-box; &::placeholder { color: $MID_GREY; } &.is-invalid { border-color: $PRIMARY_RED !important; + } +} +.appointment-client-detail-close__selectbox { + position: relative; + + & .appointment-client-detail-close__select{ + appearance: none; + } + & .down-icon { + position: absolute; + right: 7px; + bottom: 10px; } } .invite-review{ @@ -269,4 +283,17 @@ @extend .text--primary; height: 16px; } + .required { + position: relative; + + &::before { + content: '*'; + font-size: 20px; + font-weight: bold; + position: absolute; + color: #FF0000; + transform: translateX(-5px); + z-index: 5; + } + } </style> -- Gitblit v1.8.0