670 lines
13 KiB
Plaintext
670 lines
13 KiB
Plaintext
/* 外层容器：页面整体背景 */
|
||
.page-wrapper {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 核心：统一内容容器 */
|
||
.content-container {
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 1. 投票区域样式 */
|
||
.voting-section {
|
||
width: 100%;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.user-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.username {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.user-status {
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
/* 投票状态样式 */
|
||
.vote-status {
|
||
font-size: 22rpx;
|
||
padding: 6rpx 15rpx;
|
||
border-radius: 18rpx;
|
||
}
|
||
.status-voted {
|
||
background-color: rgba(46, 125, 50, 0.1);
|
||
color: #51bdb6;
|
||
}
|
||
.status-active {
|
||
background-color: rgba(79, 70, 229, 0.1);
|
||
color: #4F46E5;
|
||
}
|
||
.status-ended {
|
||
background-color: rgba(158, 158, 158, 0.1);
|
||
color: #757575;
|
||
}
|
||
|
||
.divider {
|
||
height: 2rpx;
|
||
background-color: #f5f5f5;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.vote-title-section {
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.vote-title {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
margin-bottom: 16rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.voted-tip {
|
||
color: #51bdb6;
|
||
font-size: 24rpx;
|
||
margin-left: 10rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.vote-desc {
|
||
font-size: 26rpx;
|
||
color: #888888;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.options-container {
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
/* 选项样式 */
|
||
.option-item {
|
||
position: relative;
|
||
padding: 28rpx;
|
||
border: 2rpx solid #f0f0f0;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
transition: all 0.2s ease;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 未投票选中样式 */
|
||
.option-item.selected:not(.voted-option) {
|
||
border-color: #4F46E5;
|
||
background-color: rgba(79, 70, 229, 0.03);
|
||
}
|
||
|
||
/* 已投票选中样式 */
|
||
.option-item.selected.voted-option {
|
||
border-color: #51bdb6 !important;
|
||
background-color: rgba(46, 125, 50, 0.1) !important;
|
||
}
|
||
|
||
/* 禁用状态 */
|
||
.option-item.disabled-option {
|
||
opacity: 0.8;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.option-info {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.option-icon.bg-gray {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
background-color: rgba(200, 200, 200, 0.1);
|
||
color: #888888;
|
||
}
|
||
|
||
/* 已投票选中项图标 */
|
||
.option-item.selected.voted-option .option-icon {
|
||
background-color: #51bdb6;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 未投票选中项图标 */
|
||
.option-item.selected:not(.voted-option) .option-icon {
|
||
background-color: #4F46E5;
|
||
color: #fff;
|
||
}
|
||
|
||
.option-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.option-name {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
/* 您的选择标签 */
|
||
.your-selection {
|
||
color: #51bdb6;
|
||
font-size: 22rpx;
|
||
margin-left: 12rpx;
|
||
font-weight: 500;
|
||
background-color: rgba(46, 125, 50, 0.1);
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.option-desc {
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
.option-action-btn {
|
||
position: absolute;
|
||
top: 16rpx;
|
||
right: 16rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
color: #666666;
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.option-percent {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 12rpx;
|
||
min-width: 60rpx;
|
||
text-align: right;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 12rpx;
|
||
background-color: #f0f0f0;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
width: 160rpx;
|
||
}
|
||
|
||
.progress-value {
|
||
height: 100%;
|
||
transition: width 0.5s ease-out;
|
||
background-color: #4F46E5;
|
||
}
|
||
|
||
/* 已投票选中项进度条 */
|
||
.option-item.selected.voted-option .progress-value {
|
||
background-color: #51bdb6 !important;
|
||
}
|
||
|
||
.vote-indicator {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
right: 24rpx;
|
||
color: #4F46E5;
|
||
font-size: 36rpx;
|
||
display: none;
|
||
}
|
||
|
||
.vote-indicator.show {
|
||
display: block;
|
||
}
|
||
|
||
/* 已投票选中项指示器 */
|
||
.option-item.selected.voted-option .vote-indicator {
|
||
color: #51bdb6;
|
||
}
|
||
|
||
.vote-stats {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.stats-text {
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
/* 1. 容器核心：Flex 布局，控制按钮和图标的位置 */
|
||
.vote-btn-wrapper {
|
||
display: flex; /* 开启 Flex 布局 */
|
||
justify-content: center;/* 按钮水平居中（Flex 主轴居中） */
|
||
align-items: center; /* 按钮和图标垂直居中对齐 */
|
||
margin-top: 10rpx;
|
||
padding: 0 16rpx; /* 左右留边距，避免图标贴容器边缘（可选） */
|
||
position: relative; /* 备用：若需微调图标位置可使用 */
|
||
}
|
||
|
||
/* 2. 投票按钮：保持原有样式，仅确保不影响 Flex 布局 */
|
||
.vote-btn {
|
||
width: 50%;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
padding: 0; /* 移除默认 padding 干扰 */
|
||
/* 移除 padding-bottom: 2vh; 避免按钮垂直偏移，影响与图标的垂直对齐 */
|
||
background-color: #4F46E5;
|
||
color: #ffffff;
|
||
border-radius: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
/* 3. 图标核心：固定在容器最右侧，与按钮垂直居中 */
|
||
.wrapper-link-icon {
|
||
/* 去掉绝对定位，改用 Flex 布局的 margin-left: auto 右靠 */
|
||
margin-left: auto; /* 关键：自动占据左侧所有空间，把图标推到最右侧 */
|
||
|
||
/* 图标样式（调整尺寸适配 rpx，与按钮协调） */
|
||
font-size: 32rpx; /* 用 rpx 适配多端，比按钮文字稍大 */
|
||
color: #1677ff;
|
||
|
||
/* 点击区域优化 + 视觉效果 */
|
||
padding: 8rpx;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||
|
||
/* 与按钮保持水平间距（避免贴太紧） */
|
||
margin-left: 16rpx; /* 若需更靠右，可增大此值；若需顶格右靠，保留 margin-left: auto 即可 */
|
||
}
|
||
|
||
/* 4. 图标点击反馈（保持原有） */
|
||
.wrapper-link-icon:active {
|
||
transform: scale(0.95);
|
||
color: #096dd9;
|
||
}
|
||
|
||
/* 以下为原有样式，保持不变 */
|
||
.vote-btn .iconfont {
|
||
font-size: 28rpx;
|
||
height: auto;
|
||
line-height: 1;
|
||
}
|
||
.vote-btn .btn-text {
|
||
line-height: 1;
|
||
}
|
||
.vote-btn::after {
|
||
border: none;
|
||
}
|
||
.vote-btn:not(.vote-btn-ended):not(.vote-btn-disabled):hover {
|
||
background-color: rgba(79, 70, 229, 0.9);
|
||
}
|
||
.vote-btn:not(.vote-btn-ended):not(.vote-btn-disabled):active {
|
||
transform: scale(0.98);
|
||
}
|
||
.vote-btn-ended, .vote-btn-disabled {
|
||
background-color: #cccccc !important;
|
||
color: #888888 !important;
|
||
cursor: not-allowed;
|
||
}
|
||
.share-btn {
|
||
/* 清除按钮默认样式 */
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
/* 去掉点击时的默认灰色背景 */
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 去除按钮点击时的默认边框和背景 */
|
||
.share-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.section-divider {
|
||
height: 2rpx;
|
||
background-color: #f5f5f5;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
/* 2. 评论区域样式 */
|
||
.comment-section {
|
||
width: 100%;
|
||
}
|
||
|
||
.comment-count {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 15rpx;
|
||
padding-bottom: 8rpx;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.comment-item {
|
||
padding: 0rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #ffffff;
|
||
margin-bottom: 0rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.top-level {
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.reply-level {
|
||
background-color: #f9f9f9;
|
||
padding: 15rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.sub-comment {
|
||
margin-left: 50rpx;
|
||
}
|
||
|
||
.sub-sub-comment {
|
||
margin-left: 100rpx;
|
||
}
|
||
|
||
.comment-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.comment-header .avatar {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.comment-header .username {
|
||
font-size: 28rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.sub-comment .username {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.comment-content {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.sub-comment .comment-content {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.comment-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.footer-left {
|
||
flex: 1;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sub-comment .footer-left {
|
||
font-size: 20rpx;
|
||
color: #aaaaaa;
|
||
}
|
||
|
||
.footer-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.like-icon-wrap, .dislike-icon-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #999;
|
||
}
|
||
|
||
.like-icon, .dislike-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.like-icon.liked {
|
||
filter: drop-shadow(0 0 0.5rpx #ff4d4f);
|
||
}
|
||
|
||
.dislike-icon.disliked {
|
||
filter: drop-shadow(0 0 0.5rpx #4F46E5);
|
||
}
|
||
|
||
.likes-count, .dislikes-count {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.replies-container {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.comment-status {
|
||
text-align: center;
|
||
padding: 40rpx 0;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.comment-divider {
|
||
height: 1px;
|
||
background-color: #f5f5f5;
|
||
margin: 12rpx 0;
|
||
margin-left: inherit;
|
||
margin-right: inherit;
|
||
}
|
||
|
||
/* 图标字体样式 */
|
||
.iconfont {
|
||
font-family: "iconfont" !important;
|
||
font-size: inherit;
|
||
font-style: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
.icon-thumbs-up:before {
|
||
content: "\e60a";
|
||
}
|
||
|
||
.icon-check-circle:before {
|
||
content: "\e610";
|
||
}
|
||
|
||
.like-icon-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.like-icon {
|
||
font-size: 16rpx;
|
||
margin-right: 4rpx;
|
||
color: #999; /* 默认颜色为灰色 */
|
||
}
|
||
|
||
/* ⭐️ 核心：用户已点赞时的样式 */
|
||
.like-icon.liked {
|
||
color: #FF4D4F; /* 示例：点赞后变为红色 */
|
||
/* 或者添加一个轻微的阴影来增强视觉效果 */
|
||
/* text-shadow: 0 0 2rpx rgba(255, 77, 79, 0.7); */
|
||
}
|
||
|
||
/* 点赞数文本：保持原样式不变 */
|
||
.likes-count {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.reply-input-container {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #FFFFFF;
|
||
border-top: 1rpx solid #EFEFEF;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16rpx 24rpx;
|
||
/* 关键：为全面屏手机底部安全区域留出空间 */
|
||
padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
|
||
/* 初始状态在屏幕下方 */
|
||
transform: translateY(100%);
|
||
/* 柔和的阴影 */
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
/* 动画效果：持续0.3秒的缓入缓出动画 */
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
|
||
/* 当容器有 'visible' 类时，滑入屏幕内 */
|
||
.reply-input-container.visible {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 输入框样式 */
|
||
.reply-input {
|
||
flex: 1;
|
||
height: 72rpx; /* 增加高度，更大气 */
|
||
background-color: #f4f5f7;
|
||
border-radius: 36rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
/* 输入框 placeholder 样式 */
|
||
.reply-input::placeholder {
|
||
color: #BDBDBD;
|
||
}
|
||
|
||
/* 提交按钮样式 */
|
||
.reply-submit-btn {
|
||
width: 120rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
background: linear-gradient(90deg, #5A67D8, #4C51BF); /* 使用渐变色 */
|
||
color: #fff;
|
||
border-radius: 36rpx;
|
||
margin-left: 16rpx;
|
||
font-size: 28rpx;
|
||
padding: 0;
|
||
border: none; /* 移除 button 默认边框 */
|
||
|
||
/* 动画效果：为背景色、透明度和缩放添加过渡 */
|
||
transition: background-color 0.3s, opacity 0.3s, transform 0.2s;
|
||
}
|
||
|
||
/* 移除按钮点击时的默认覆盖样式 */
|
||
.reply-submit-btn::after {
|
||
display: none;
|
||
}
|
||
|
||
/* 按钮的禁用样式 */
|
||
.reply-submit-btn.disabled {
|
||
background: #E0E0E0; /* 更柔和的禁用灰色 */
|
||
color: #AFAFAF;
|
||
/* 禁用时缩小一点点，提供视觉反馈 */
|
||
transform: scale(0.95);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
|
||
.primary-comment-trigger {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
padding: 10px 0;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.primary-comment-trigger .avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.primary-comment-trigger .fake-input-text {
|
||
flex: 1;
|
||
background-color: #f7f7f7;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
border-radius: 18px;
|
||
padding: 0 15px;
|
||
color: #aaa;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 原有样式不变... */ |