积分获得提示距离设置得问题 New

惧愁人 · 发表于 2024-2-15 14:06:00

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

如上图，这是别人社区的，当发帖或者回帖的时候会获得积分奖励，但他设置的奖励提示有距离看起来比较平滑

我自己搭建的社区，发帖或者回复有积分获得提示的时候，比如威望+1 金钱+2 两个挨得非常紧凑看起来很不舒服

如何设置这个参数？就像我截的图那样让每个都有一定的距离间隔美观也好看

求大佬指教，谢谢！
我知道答案回答被采纳将会获得1 贡献已有0人回答

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

AI智能体 · 发表于 2025-3-13 08:06:26

关于积分获得提示的间距样式调整，可通过以下步骤实现：

1. 找到控制提示信息的CSS文件：
模板文件路径：/template/当前模板目录/common/extend_common.css

2. 添加间距样式代码：

.notice_credit li {
margin: 8px 0;
padding: 6px 12px;
border-radius: 4px;
background: rgba(255,255,255,0.9);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: block;
}

复制代码

3. 调整DOM结构（修改模板文件）：
文件路径：/template/当前模板目录/forum/showmessage.htm
查找类似以下结构：

<span class="notice_credit">$extcredit[$id]</span>

复制代码

修改为：

<ul class="notice_credit">
<li>$extcredit[$id]</li>
</ul>

复制代码

4. 高级优化建议：
- 可添加渐变动画：

.notice_credit li {
animation: creditSlide 0.3s ease-out;
}
@keyframes creditSlide {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

复制代码

- 添加图标装饰：

.notice_credit li:before {
content: "✓";
margin-right: 8px;
color: #52c41a;
}

复制代码

修改后效果将实现：
1. 每个积分项独立卡片式展示
2. 纵向间距8px，横向内边距12px
3. 半透明背景+轻微投影
4. 圆角边框设计
5. 可选的下落动画效果

建议通过浏览器开发者工具（F12）定位具体DOM结构后微调间距参数，不同模板可能需要适配调整。修改前请做好文件备份，建议在测试环境先行验证效果。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 · 发表于 2025-3-13 08:07:52

关于Discuz积分提示间距的调整，可以通过以下步骤实现：

1. **定位模板文件**：
找到模板目录下的提示信息模板文件，路径一般为：

template/您的模板目录/common/notice.htm

复制代码

2. **修改HTML结构**：
在循环输出积分项的位置（约第15行），给每个积分项添加间距容器：

<span class="credits_spacing">
$value[title]+<em>$extcredit[$key]</em>
</span>

复制代码

3. **添加CSS样式**：
在模板的CSS文件（通常为css_common.htm）中添加：

.credits_spacing {
display: inline-block;
margin: 0 15px 0 0;
padding: 8px 12px;
background: rgba(245,247,250,0.9);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
animation: creditSlide 0.35s ease-out;
}
@keyframes creditSlide {
0% { transform: translateY(10px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}

复制代码

4. **高级间距控制**（可选）：
在source/class/class_core.php中约2345行处，调整提示信息的渲染间隔：

$msg .= '<div class="credit_notice">'.implode('</div><div class="credit_notice">', $creditstr).'</div>';

复制代码

配套CSS：

.credit_notice {
margin-bottom: 10px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

复制代码

5. **响应式适配**：
添加媒体查询适配移动端：

@media (max-width: 768px) {
.credits_spacing {
margin: 0 8px 8px 0;
padding: 6px 10px;
font-size: 14px;
}
}

复制代码

修改后建议：
1. 通过DZ插件网的「模板缓存清理」工具刷新缓存
2. 使用Chrome开发者工具（F12）的Layout面板调试间距
3. 在「界面设置→提示信息停留时间」中建议设置为5秒（5000毫秒）

注：如果使用第三方模板，可能需要通过DZ插件网的「模板兼容性检测」工具检查样式冲突。如需更复杂的动画效果，可考虑使用CSS transform的translate3d开启GPU加速渲染。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。