::-webkit-scrollbar { width: 0; height: 0; color: transparent; } /* 滚动容器样式 */ .scroll-container { width: 100%; height: 100vh; box-sizing: border-box; padding: 20rpx; padding-bottom: 13vh; } /* 卡片容器样式 */ .cards-container { display: flex; flex-direction: column; gap: 20rpx; } /* 投票卡片基础样式 */ .voting-card { background-color: #fff; border-radius: 24rpx; padding: 24rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } /* 卡片头部样式 */ .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .user-info { display: flex; align-items: center; gap: 16rpx; } .avatar { width: 56rpx; height: 56rpx; border-radius: 50%; } .user-details { display: flex; flex-direction: column; gap: 4rpx; } .username { font-size: 24rpx; font-weight: 500; color: #333; } .user-status { font-size: 20rpx; color: #666; } .vote-status { font-size: 22rpx; padding: 6rpx 16rpx; border-radius: 20rpx; background-color: #f5f5f5; color: #666; } .vote-status:empty { display: none; } /* 分割线样式 */ .divider { width: 100%; height: 2rpx; background-color: #f5f5f5; margin-bottom: 24rpx; } /* 标题区域样式 */ .vote-title-section { margin-bottom: 24rpx; } .vote-title { font-size: 28rpx; font-weight: 600; color: #333; line-height: 40rpx; } .voted-tip { color: #51bdb6; font-size: 24rpx; margin-left: 10rpx; font-weight: 500; } .vote-desc { font-size: 22rpx; color: #666; margin-top: 8rpx; line-height: 32rpx; } /* 选项容器样式 */ .options-container { display: flex; flex-direction: column; gap: 16rpx; margin-bottom: 28rpx; } /* 选项项样式 */ .option-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx; border: 2rpx solid #eee; border-radius: 16rpx; position: relative; transition: all 0.2s; } .option-item.selected { border-color: #409EFF; background-color: rgba(64, 158, 255, 0.05); } .option-item.voted-option { border-color: #51bdb6; background-color: rgba(46, 125, 50, 0.05); } .option-item.disabled-option { opacity: 0.8; pointer-events: none; } /* 选项信息样式 */ .option-info { display: flex; align-items: center; gap: 16rpx; flex: 1; } .option-icon { width: 40rpx; height: 40rpx; border-radius: 50%; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #666; } .option-item.voted-option .option-icon { background-color: rgba(46, 125, 50, 0.1); color: #51bdb6; } .option-details { display: flex; flex-direction: column; gap: 4rpx; } .option-name { font-size: 24rpx; color: #333; font-weight: 500; } .your-selection { color: #51bdb6; font-size: 22rpx; margin-left: 10rpx; } .option-desc { font-size: 20rpx; color: #999; } /* 选项操作按钮样式 */ .option-action-btn { font-size: 20rpx; color: #666; padding: 4rpx 12rpx; border: 2rpx solid #eee; border-radius: 8rpx; margin-right: 16rpx; } /* 选项百分比样式 */ .option-percent { font-size: 22rpx; color: #666; margin-right: 16rpx; min-width: 60rpx; text-align: right; } /* 进度条样式 */ .progress-bar { width: 160rpx; height: 8rpx; background-color: #f5f5f5; border-radius: 4rpx; overflow: hidden; } .progress-value { height: 100%; background-color: #409EFF; transition: width 0.3s; } .option-item.voted-option .progress-value { background-color: #51bdb6; } /* 选中指示器样式 */ .vote-indicator { position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); font-size: 32rpx; color: #409EFF; display: none; } .vote-indicator.show { display: block; } .option-item.voted-option .vote-indicator { color: #51bdb6; } /* 统计信息样式 */ .vote-stats { display: flex; justify-content: space-between; font-size: 20rpx; color: #999; margin-bottom: 28rpx; } /* 投票按钮样式 */ .vote-btn { width: 100%; height: 80rpx; background-color: #51bdb6; color: #fff; border-radius: 40rpx; font-size: 24rpx; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 12rpx; } .vote-btn::after { border: none; } .vote-btn.vote-btn-disabled { background-color: #E0E0E0 !important; color: #9E9E9E !important; border-color: #E0E0E0 !important; } .btn-text { font-size: 24rpx; } /* 图标字体基础样式(需确保项目已引入iconfont) */ .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"; }