no message

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

@ -24,7 +24,9 @@
<view class="g_flex_row_between color-group-wrap"> <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" <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 }" :class="{ 'color-item-selected': selectedColorIndex === index }"
:style="{ backgroundColor: item.value }" style="margin-top: 10px;" @click="selectColor(index)"></view> style="margin-top: 10px;" @click="selectColor(index)">
<view class="inner" :style="{ backgroundColor: item.value }"></view>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -180,35 +182,45 @@ export default {
.color-item { .color-item {
position: relative; position: relative;
transition: all 0.2s ease; 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 { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: -4px; top: 0;
left: -4px; left: 0;
right: -4px; right: 0;
bottom: -4px; bottom: 0;
border-radius: 12px; border-radius: 8px;
border: 2px solid transparent; border: 2px solid transparent;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
} }
.color-item-selected { .color-item-selected {
transform: scale(1.1);
&::after { &::after {
border-color: #999; border-color: #999;
} }
.inner {
transform: scale(0.85);
animation: selectedPulse 0.3s ease; animation: selectedPulse 0.3s ease;
} }
}
} }
@keyframes selectedPulse { @keyframes selectedPulse {
0% { 0% {
transform: scale(1); transform: scale(1);
} }
50% { 50% {
transform: scale(1.15); transform: scale(0.75);
} }
100% { 100% {
transform: scale(1.1); transform: scale(0.85);
} }
} }

Loading…
Cancel
Save