no message

cyl/job_im
jscyl13849007907 2 days ago
parent 3202b8f47e
commit 3c002f1e3e

@ -23,8 +23,10 @@
<view class="g_fs_16 g_c_0">自定义主题色</view>
<view class="g_flex_row_between color-group-wrap">
<view v-for="(item, index) in colorGroup" :key="index" class="g_w_48 g_h_48 g_radius_8 color-item"
:class="{ 'color-item-selected': selectedColorIndex === index }"
:style="{ backgroundColor: item.value }" style="margin-top: 10px;" @click="selectColor(index)"></view>
:class="{ 'color-item-selected': selectedColorIndex === index }"
style="margin-top: 10px;" @click="selectColor(index)">
<view class="inner" :style="{ backgroundColor: item.value }"></view>
</view>
</view>
</view>
</view>
@ -180,24 +182,34 @@ export default {
.color-item {
position: relative;
transition: all 0.2s ease;
padding: 2px;
box-sizing: border-box;
.inner {
width: 100%;
height: 100%;
border-radius: 6px;
transition: all 0.2s ease;
}
&::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 12px;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
border: 2px solid transparent;
transition: all 0.2s ease;
}
}
.color-item-selected {
transform: scale(1.1);
&::after {
border-color: #999;
}
animation: selectedPulse 0.3s ease;
.inner {
transform: scale(0.85);
animation: selectedPulse 0.3s ease;
}
}
}
@keyframes selectedPulse {
@ -205,10 +217,10 @@ export default {
transform: scale(1);
}
50% {
transform: scale(1.15);
transform: scale(0.75);
}
100% {
transform: scale(1.1);
transform: scale(0.85);
}
}

Loading…
Cancel
Save