|
|
|
|
@ -14,24 +14,18 @@ |
|
|
|
|
<div class="appraise-header-title">您的反馈对我们完善服务十分重要</div> |
|
|
|
|
<div class="appraise-main"> |
|
|
|
|
<div class="appraise-item-box flex flex-1"> |
|
|
|
|
<a |
|
|
|
|
<div |
|
|
|
|
v-for="(item, index) in checkBoxList" |
|
|
|
|
:key="index" |
|
|
|
|
href="javascript:;" |
|
|
|
|
:key="item.id ?? index" |
|
|
|
|
class="cells-check-label" |
|
|
|
|
@change.stop="changeCheck(item)" |
|
|
|
|
role="radio" |
|
|
|
|
:aria-checked="isChecked(item)" |
|
|
|
|
@click.stop.prevent="changeCheck(item)" |
|
|
|
|
> |
|
|
|
|
<input |
|
|
|
|
:id="'s' + index" |
|
|
|
|
v-model="item.checked" |
|
|
|
|
type="radio" |
|
|
|
|
class="check-radio" |
|
|
|
|
name="radio1" |
|
|
|
|
/> |
|
|
|
|
<label class="cell-ft text-checked" :for="'s' + index"> |
|
|
|
|
<div class="cell-ft text-checked" :class="{ 'is-checked': isChecked(item) }"> |
|
|
|
|
<span class="icon-checked-txt">{{ item.content }}</span> |
|
|
|
|
</label> |
|
|
|
|
</a> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="appraise-item-other"> |
|
|
|
|
<textarea |
|
|
|
|
@ -96,8 +90,21 @@ const source = computed(() => store.source) |
|
|
|
|
const mescrollContent = computed(() => store.mescrollContent) |
|
|
|
|
|
|
|
|
|
// —— 方法 —— |
|
|
|
|
const isChecked = (item) => { |
|
|
|
|
if (!item || !checkedItem.value) return false |
|
|
|
|
if (checkedItem.value === item) return true |
|
|
|
|
if (checkedItem.value.id != null && item.id != null) { |
|
|
|
|
return checkedItem.value.id === item.id |
|
|
|
|
} |
|
|
|
|
return checkedItem.value.content === item.content |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const changeCheck = (item) => { |
|
|
|
|
// 选中的值 |
|
|
|
|
if (!item) return |
|
|
|
|
// 整块点击选中,避免 display:none 的 radio + label 在微信/移动端点不中 |
|
|
|
|
checkBoxList.value.forEach((row) => { |
|
|
|
|
row.checked = row === item || (row.id != null && row.id === item.id) |
|
|
|
|
}) |
|
|
|
|
checkedItem.value = item |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -304,6 +311,8 @@ getReasonList() |
|
|
|
|
margin-right: 4rem; |
|
|
|
|
margin-bottom: 10rem; |
|
|
|
|
display: inherit; |
|
|
|
|
cursor: pointer; |
|
|
|
|
-webkit-tap-highlight-color: transparent; |
|
|
|
|
} |
|
|
|
|
.appraise-item-box .cells-check-label .cell-ft { |
|
|
|
|
border: 1rem solid #5a9cff; |
|
|
|
|
@ -313,16 +322,18 @@ getReasonList() |
|
|
|
|
line-height: 15rem; |
|
|
|
|
color: #5a9cff; |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 2rem 2rem; |
|
|
|
|
padding: 5rem 3rem; |
|
|
|
|
display: inline-block; |
|
|
|
|
} |
|
|
|
|
.appraise-item-box .cells-check-label .cell-ft, |
|
|
|
|
.appraise-item-box .cells-check-label .cell-ft .icon-checked-txt { |
|
|
|
|
pointer-events: none; |
|
|
|
|
} |
|
|
|
|
.appraise-item-box .cells-check-label .check-radio { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
.appraise-item-box .cells-check-label .check-radio:checked + .text-checked { |
|
|
|
|
.appraise-item-box .cells-check-label .check-radio:checked + .text-checked, |
|
|
|
|
.appraise-item-box .cells-check-label .text-checked.is-checked { |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #5a9cff; |
|
|
|
|
} |
|
|
|
|
@ -415,7 +426,11 @@ getReasonList() |
|
|
|
|
.appraise-item-box |
|
|
|
|
.cells-check-label |
|
|
|
|
.check-radio:checked |
|
|
|
|
+ .text-checked { |
|
|
|
|
+ .text-checked, |
|
|
|
|
.elder-wrapper |
|
|
|
|
.appraise-item-box |
|
|
|
|
.cells-check-label |
|
|
|
|
.text-checked.is-checked { |
|
|
|
|
font-family: PingFangSC-Medium; |
|
|
|
|
font-size: 12rem; |
|
|
|
|
color: #025cea; |
|
|
|
|
|