Commit ec1664a9 by lijiabin

【需求 21096】 styles: 修改发表评论的样式

parent 37502d24
...@@ -73,7 +73,8 @@ ...@@ -73,7 +73,8 @@
> >
<template #submit> <template #submit>
<button <button
class="cursor-pointer disabled:opacity-50 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full text-sm hover:shadow-lg transition-all" type="button"
class="comment-publish-btn cursor-pointer disabled:opacity-50 px-6 py-2 text-white rounded-full text-sm hover:shadow-lg transition-all"
:disabled="!myComment?.trim() || loading" :disabled="!myComment?.trim() || loading"
@click="handleMyComment" @click="handleMyComment"
> >
...@@ -314,7 +315,8 @@ ...@@ -314,7 +315,8 @@
> >
<template #submit> <template #submit>
<button <button
class="cursor-pointer disabled:opacity-50 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full text-sm hover:shadow-lg transition-all" type="button"
class="comment-publish-btn cursor-pointer disabled:opacity-50 px-6 py-2 text-white rounded-full text-sm hover:shadow-lg transition-all"
:disabled="!commentToOther.trim() || commentToOtherLoading" :disabled="!commentToOther.trim() || commentToOtherLoading"
@click="handleComment(index)" @click="handleComment(index)"
> >
...@@ -617,6 +619,28 @@ defineExpose({ ...@@ -617,6 +619,28 @@ defineExpose({
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/**
* 发表按钮:不用纯 Uno 渐变工具类。
* 旧版内核 / 部分企业微信 WebView 对「依赖 CSS 变量的 linear-gradient」解析失败时,
* 背景会变成透明或无效,原生 button 呈白底,易出现「只剩阴影、几乎看不见按钮」。
* 这里用实色 background-color 作兜底,并写死 hex + -webkit- 前缀渐变。
*/
.comment-publish-btn {
-webkit-appearance: none;
appearance: none;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.35);
/* 与 Tailwind blue-500 / purple-500 接近的实色兜底 */
background-color: #6366f1;
background-image: -webkit-linear-gradient(left, #3b82f6, #a855f7);
background-image: linear-gradient(to right, #3b82f6, #a855f7);
color: #ffffff;
}
.comment-publish-btn:disabled {
cursor: not-allowed;
}
/* 进入 & 离开公共属性 */ /* 进入 & 离开公共属性 */
.fadeToComment-enter-active, .fadeToComment-enter-active,
.fadeToComment-leave-active { .fadeToComment-leave-active {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment