建站培训班,wordpress扫码才能访问,外贸网站推广软件,网站建设与推广是什么我本来用的是uniapp官方提供的组件uni-rate组件#xff0c;但修改成我想要的样式有点麻烦#xff0c;于是我就自己手写一个#xff0c;比用组件简单一点#xff1b; dom结构
text classformTit must请您对本次活动进行评价/text
view cl… 我本来用的是uniapp官方提供的组件uni-rate组件但修改成我想要的样式有点麻烦于是我就自己手写一个比用组件简单一点 dom结构
text classformTit must请您对本次活动进行评价/text
view classevaluate mb-40rpxview classrow v-for(val, index) in starName :keyindexview classprogress :classstar index ? selected : clicksetStar(index 1) /viewtext classtit :classstar index 1 ? active : {{ val }}/text/view
/view js部分
// 评价
const star ref(2); //评价默认2星
const starName [差, 一般, 较好, 好];
const setStar (val: any) {star.value val;
}; css部分我用的是scss tailwindcss不懂的可以去看看很方便写入类名就可以改变样式
.formTit {apply block text-#363A44 text-32rpx font-bold mb-20rpx mt-40rpx;}.must {::after {font-size: 32rpx;color: #f00;content: *;}
}
.evaluate {apply w-full flex justify-between items-center;.row {apply w-full flex flex-col justify-center items-center;width: calc((100% - 6rpx) / 4);:nth-of-type(1) {.progress {border-radius: 12rpx 0 0 12rpx;}}:nth-of-type(4) {.progress {border-radius: 0 12rpx 12rpx 0;}}}.progress {apply w-full bg-#eef5ff h-40rpx;}.selected {background-color: #428ffc;}.tit {apply w-full text-32rpx text-#9B9B9B text-center pt-20rpx;}.active {apply text-#363a44 font-bold;color: #363a44;}}
