精华 DZSNS社交圈子系统更新记录汇总帖，以后所有更新记录就在这个帖子，不单开了！
一、什么是DZSNS社交圈子系统？1、DZSNS是基于DISCUZ开发的一款全能是社交建站系统，后端基于DISCUZ框架，目前适配了DZX3.5版本，DZX5.0版本；前端采用UNIAPP开发，系统拥有多端形式：PC+H5+小程序+APP
2、系统功能简介：发布动态、长文、创建圈子（普通圈、匿名圈、收费圈；后续也会出一套去圈子化，保留话题的运营模式的功能），签到功能，任务中心，VIP会员系统，流量主功能，钱包功能，聊天功能，认证功能，小程序通知，付费置顶推广等。
3、本系统可做的网站类型：门户新闻网站，短视频网站，社交图片网站，兴趣社交网站，搞笑网站，本地社区网站，行业社区网站，分类便民信息网站，交友网站，企业内容交流社区等，粉丝俱乐部网站等。
4、对接DISCUZ本身的用户系统，积分系统，粉丝系统和基础的相关功能，内容体系是单独的，不是DZ版块帖子，请大家注意。
5、对于DZSNS社交系统，我们一直以社交+的模式进行开发，社交+同城，行业的一些刚需，能盈利的功能点，我们追寻的是大厂产品的功能和逻辑，本身开发者也在运营本地的站点也用此系统，会在运营中寻找大家需要的功能点，能让大家盈利的系统才是好系统，希望大家多多指教。
二、演示图片：
https://www.dismall.com/data/attachment/forum/202605/24/160401svamyunncvnmjmuw.jpg
https://www.dismall.com/data/attachment/forum/202605/24/160401eijd3aoyryojodky.jpg
https://www.dismall.com/data/attachment/forum/202605/24/160401a2o58cq85e7x9iq9.jpg
https://www.dismall.com/data/attachment/forum/202605/24/160401lnuaarrpz5nrf5za.jpg
三、联系我们：
1、官方客服微信号：100931818（QQ同号）
2、系统应用中心地址：https://addon.dismall.com/plugins/lianpen_snsapp.html
3、DZSNS社交系统教程详细地址：https://icnq9kzq0m8i.feishu.cn/wiki/VR6zwk6DliIXNBktR7TcBjknnsv
四、更新记录、已经完成功能和未完成功能记录请看楼主回帖。 目前已经完善了圈子的基础功能，这两天已经更新了三端的微信登录功能，发布长文功能，对接了DISCUZ的违禁词库功能 DZSNS618有团购活动，折扣八折，有需要了解的可以咨询我们，这个价格很划算，活动时间是6月1日到6月18日 慢慢优化后的页面还是挺好看的，后面陆续会增加各种DIY组件
.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.ce-paragraph { line-height: 1.6em; outline: none; text-indent: 2em; font-size: 16px;}.ce-paragraph--right { text-align: right;}.ce-paragraph--center { text-align: center;}.ce-paragraph--left { text-align: left;}.ce-paragraph--justify { text-align: justify;}.ce-paragraph-text-indent { text-align: justify;}.ce-paragraph:empty::before{content: attr(data-placeholder);color: #707684;font-weight: normal;opacity: 0;}/** Show placeholder at the first paragraph if Editor is empty */.codex-editor--empty .ce-block:first-child .ce-paragraph:empty::before {opacity: 1;}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph:empty::before,.codex-editor--empty .ce-block:first-child .ce-paragraph:empty:focus::before {opacity: 0;}.ce-paragraph p:first-of-type{ margin-top: 0;}.ce-paragraph p:last-of-type{ margin-bottom: 0;}.svg-icon { width: 1em; height: 1em;}.svg-icon path,.svg-icon polygon,.svg-icon rect { fill: #4691f6;}.svg-icon circle { stroke: #4691f6; stroke-width: 1;}.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.image-tool {--bg-color: #cdd1e0;--front-color: #388ae5;--border-color: #e8e8eb;}.image-tool__image { border-radius: 3px; overflow: hidden; margin-bottom: 10px;}.image-tool__image-picture { max-width: 100%; vertical-align: bottom; display: block; margin-left: auto; margin-right: auto; }.image-tool__image-preloader { width: 50px; height: 50px; border-radius: 50%; background-size: cover; margin: auto; position: relative; background-color: #cdd1e0; background-position: center center; }.image-tool__image-preloader::after { content: ""; position: absolute; z-index: 3; width: 60px; height: 60px; border-radius: 50%; border: 2px solid #cdd1e0; border-top-color: #388ae5; left: 50%; top: 50%; margin-top: -30px; margin-left: -30px; animation: image-preloader-spin 2s infinite linear; box-sizing: border-box; }.image-tool__caption::before { position: absolute !important; content: attr(data-placeholder); color: #707684; font-weight: normal; display: none; }.image-tool__caption:empty::before { display: block; }.image-tool__caption:empty:focus::before { display: none; }.image-tool--empty .image-tool__image { display: none; }.image-tool--empty .image-tool__caption, .image-tool--loading .image-tool__caption { display: none; }.image-tool .cdx-button { display: flex; align-items: center; justify-content: center;}.image-tool .cdx-button svg { height: auto; margin: 0 6px 0 0; }.image-tool--filled .cdx-button { display: none; }.image-tool--filled .image-tool__image-preloader { display: none; }.image-tool--loading .image-tool__image { min-height: 200px; display: flex; border: 1px solid #e8e8eb; background-color: #fff; }.image-tool--loading .image-tool__image-picture { display: none; }.image-tool--loading .cdx-button { display: none; }/** * Tunes * ---------------- */.image-tool--withBorder .image-tool__image { border: 1px solid #e8e8eb; }.image-tool--withBackground .image-tool__image { padding: 15px; background: #cdd1e0; }.image-tool--withBackground .image-tool__image-picture { max-width: 60%; margin: 0 auto; }.image-tool--stretched .image-tool__image-picture { width: 100%; }.image-tool__caption { text-align: center; font-size: 14px; color: #a3a3a3; }@keyframes image-preloader-spin {0% { transform: rotate(0deg);}100% { transform: rotate(360deg);}}.inline-code {background: rgba(250, 239, 240, 0.78);color: #b44437;padding: 3px 4px;border-radius: 5px;margin: 0 1px;font-family: inherit;font-size: 0.86em;font-weight: 500;letter-spacing: 0.3px;} 增加首页热门栏目的调取计算规则：
热门热度分数 = (点赞数×10 + 评论数×5 + 浏览量×1) ÷ (当前时间 - 发布时间 + 1)^1.2 其实DZ帖子的话本身有一个热度计算公式的，如果帖子的话，可以直接考虑用那个热度值来作为维度。 嗯，后续看可以做一个DZ这个的热度公示，站长自己切换用哪种热度公式，DZ默认这种也很不错 **2026年05月26日**
1、修复APP端微信登录报错问题和不同步小程序端用户问题
2、增加个人主页用户名旁边显示实名制图标
3、PC电脑端修复第二屏和第三屏不能弹出小程序二维码的BUG
4、PC电脑端增加底部版权信息和备案号信息，后台填写设置
5、修复视频生成封面截图错位问题
头像加V后感觉好看多了，做了实名认证，填写身份证号和名称自动认证，然后在个人主页用户名旁边显示实名标记，实名用的第三方接口数脉的API
https://www.dismall.com/data/attachment/forum/202605/26/215217cxq8wuqy72n72nme.jpg
.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.ce-paragraph { line-height: 1.6em; outline: none; text-indent: 2em; font-size: 16px;}.ce-paragraph--right { text-align: right;}.ce-paragraph--center { text-align: center;}.ce-paragraph--left { text-align: left;}.ce-paragraph--justify { text-align: justify;}.ce-paragraph-text-indent { text-align: justify;}.ce-paragraph:empty::before{content: attr(data-placeholder);color: #707684;font-weight: normal;opacity: 0;}/** Show placeholder at the first paragraph if Editor is empty */.codex-editor--empty .ce-block:first-child .ce-paragraph:empty::before {opacity: 1;}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph:empty::before,.codex-editor--empty .ce-block:first-child .ce-paragraph:empty:focus::before {opacity: 0;}.ce-paragraph p:first-of-type{ margin-top: 0;}.ce-paragraph p:last-of-type{ margin-bottom: 0;}.svg-icon { width: 1em; height: 1em;}.svg-icon path,.svg-icon polygon,.svg-icon rect { fill: #4691f6;}.svg-icon circle { stroke: #4691f6; stroke-width: 1;}.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.images-style-normal .images-tool { --bg-color:#cdd1e0; --front-color:#388ae5; --border-color:#e8e8eb;}.images-style-normal .images-tool__image { border-radius:3px; overflow:hidden; margin-bottom:10px; padding-bottom:0}.images-style-normal .images-tool__image-picture { max-width:100%; vertical-align:bottom; display:block; margin:0 auto}.images-style-normal .images-tool__image-preloader { width:50px; height:50px; border-radius:50%; background-size:cover; margin:auto; position:relative; background-color:#cdd1e0; background-position:center center}.images-style-normal .images-tool__image-preloader:after { content:""; position:absolute; z-index:3; width:60px; height:60px; border-radius:50%; border:2px solid #cdd1e0; border-top-color:#388ae5; left:50%; top:50%; margin-top:-30px; margin-left:-30px; animation:image-preloader-spin 2s infinite linear; box-sizing:border-box}.images-style-normal .images-tool__images-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:10px}.images-style-normal .images-tool__image-item { position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5}.images-style-normal .images-tool__remove-button { top:5px; right:5px; width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s; z-index:10}.images-style-normal .images-tool__image-item:hover .images-tool__remove-button { opacity:1}.images-style-normal .images-tool__caption { bottom:0; left:0; margin-bottom:10px; text-align: center; font-size: 14px; color: #a3a3a3;}.images-style-normal .images-tool__caption:before { position:absolute!important; content:attr(data-placeholder); color:#707684; font-weight:400; display:none}.images-style-normal .images-tool__caption:empty:before { display:block}.images-style-normal .images-tool__caption:empty:focus:before { display:none}.images-style-normal .images-tool--empty .images-tool__image,.images-style-normal .images-tool--empty .images-tool__image-preloader { display:none}.images-style-normal .images-tool--empty .images-tool__caption,.images-style-normal .images-tool--uploading .images-tool__caption { visibility:hidden!important}.images-style-normal .images-tool .cdx-button { display:flex; align-items:center; justify-content:center}.images-style-normal .images-tool .cdx-button svg { height:auto; margin:0 6px 0 0}.images-style-normal .images-tool--filled .cdx-button,.images-style-normal .images-tool--filled .images-tool__image-preloader { display:none}.images-style-normal .images-tool--uploading .images-tool__image { min-height:200px; display:flex; border:1px solid #e8e8eb; background-color:#fff}.images-style-normal .images-tool--uploading .images-tool__image-picture,.images-style-normal .images-tool--uploading .cdx-button { display:none}.images-style-normal .images-tool--withBorder .images-tool__image { border:1px solid #e8e8eb}.images-style-normal .images-tool--withBackground .images-tool__image { padding:15px; background:#cdd1e0}.images-style-normal .images-tool--withBackground .images-tool__image-picture { max-width:60%; margin:0 auto}.images-style-normal .images-tool--stretched .images-tool__image-picture { width:100%}.images-style-normal .images-tool--caption .images-tool__caption { visibility:visible}.images-style-normal .images-tool--caption { padding-bottom:50px; text-align: center; font-size: 14px; color: #a3a3a3;}@keyframes image-preloader-spin { 0% { transform:rotate(0)}to { transform:rotate(360deg)}}.images-style-normal .images-tool__images-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:10px; min-height:100px}.images-style-normal .images-tool__image-item { position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5; transition:all .2s ease; cursor:grab}.images-style-normal .images-tool__image-item:hover { transform:translateY(-2px); box-shadow:0 4px 8px #0000001a}.images-style-normal .images-tool__image-item:active { cursor:grabbing}.images-style-normal .images-tool__image-item { -webkit-user-select:none; user-select:none}.images-style-normal .images-tool__image-item.dragging { opacity:.5; transform:scale(1.05); z-index:100}.images-style-normal .images-tool__drag-indicator { position:absolute; width:4px; background-color:#388ae5; border-radius:2px; pointer-events:none; z-index:1000}.images-style-normal .images-tool__actions-container { position:absolute; top:5px; right:5px; display:flex; flex-direction:column; align-items:center; gap:3px; opacity:0; transition:opacity .2s; z-index:10}.images-style-normal .images-tool__image-item:hover .images-tool__actions-container { opacity:1}.images-style-normal .images-tool__move-button { width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:#333; transition:all .2s}.images-style-normal .images-tool__move-button:hover,.images-style-normal .images-tool__remove-button:hover { background-color:#fff; transform:scale(1.1); box-shadow:0 2px 4px #0003}.images-style-normal .images-tool__move-button:disabled { opacity:.5; cursor:not-allowed; transform:none}/* *以下是瀑布流样式 */.images-style-waterfall .images-tool { --bg-color:#cdd1e0; --front-color:#388ae5; --border-color:#e8e8eb;}.images-style-waterfall .images-tool__image { border-radius:3px; overflow:hidden; margin-bottom:10px; padding-bottom:0}.images-style-waterfall .images-tool__image-picture { max-width:100%; vertical-align:bottom; display:block; margin:0 auto}.images-style-waterfall .images-tool__image-preloader { width:50px; height:50px; border-radius:50%; background-size:cover; margin:auto; position:relative; background-color:#cdd1e0; background-position:center center}.images-style-waterfall .images-tool__image-preloader:after { content:""; position:absolute; z-index:3; width:60px; height:60px; border-radius:50%; border:2px solid #cdd1e0; border-top-color:#388ae5; left:50%; top:50%; margin-top:-30px; margin-left:-30px; animation:image-preloader-spin 2s infinite linear; box-sizing:border-box}/* 修改为瀑布流布局 */.images-style-waterfall .images-tool__images-grid { column-count: 2; column-gap: 10px; margin-bottom: 10px;}@media (min-width: 768px) { .images-style-waterfall .images-tool__images-grid { column-count: 3; }}@media (min-width: 1024px) { .images-style-waterfall .images-tool__images-grid { column-count: 4; }}.images-style-waterfall .images-tool__image-item { break-inside: avoid; margin-bottom: 10px; position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5; transition:all .2s ease; cursor:grab}.images-style-waterfall .images-tool__image-item img { width: 100%; height: auto; display: block;}.images-style-waterfall .images-tool__remove-button { top:5px; right:5px; width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s; z-index:10}.images-style-waterfall .images-tool__image-item:hover .images-tool__remove-button { opacity:1}.images-style-waterfall .images-tool__caption { bottom:0; left:0; margin-bottom:10px; text-align: center; font-size: 14px; color: #a3a3a3;}.images-style-waterfall .images-tool__caption:before { position:absolute!important; content:attr(data-placeholder); color:#707684; font-weight:400; display:none}.images-style-waterfall .images-tool__caption:empty:before { display:block}.images-style-waterfall .images-tool__caption:empty:focus:before { display:none}.images-style-waterfall .images-tool--empty .images-tool__image,.images-style-waterfall .images-tool--empty .images-tool__image-preloader { display:none}.images-style-waterfall .images-tool--empty .images-tool__caption,.images-style-waterfall .images-tool--uploading .images-tool__caption { visibility:hidden!important}.images-style-waterfall .images-tool .cdx-button { display:flex; align-items:center; justify-content:center}.images-style-waterfall .images-tool .cdx-button svg { height:auto; margin:0 6px 0 0}.images-style-waterfall .images-tool--filled .cdx-button,.images-style-waterfall .images-tool--filled .images-tool__image-preloader { display:none}.images-style-waterfall .images-tool--uploading .images-tool__image { min-height:200px; display:flex; border:1px solid #e8e8eb; background-color:#fff}.images-style-waterfall .images-tool--uploading .images-tool__image-picture,.images-style-waterfall .images-tool--uploading .cdx-button { display:none}.images-style-waterfall .images-tool--withBorder .images-tool__image { border:1px solid #e8e8eb}.images-style-waterfall .images-tool--withBackground .images-tool__image { padding:15px; background:#cdd1e0}.images-style-waterfall .images-tool--withBackground .images-tool__image-picture { max-width:60%; margin:0 auto}.images-style-waterfall .images-tool--stretched .images-tool__image-picture { width:100%}.images-style-waterfall .images-tool--caption .images-tool__caption { visibility:visible}.images-style-waterfall .images-tool--caption { padding-bottom:50px; text-align: center; font-size: 14px; color: #a3a3a3;}@keyframes image-preloader-spin { 0% { transform:rotate(0)}to { transform:rotate(360deg)}}/* 移除重复的样式定义，保留瀑布流相关的样式 */.images-style-waterfall .images-tool__image-item:hover { transform:translateY(-2px); box-shadow:0 4px 8px #0000001a}.images-style-waterfall .images-tool__image-item:active { cursor:grabbing}.images-style-waterfall .images-tool__image-item { -webkit-user-select:none; user-select:none}.images-style-waterfall .images-tool__image-item.dragging { opacity:.5; transform:scale(1.05); z-index:100}.images-style-waterfall .images-tool__drag-indicator { position:absolute; width:4px; background-color:#388ae5; border-radius:2px; pointer-events:none; z-index:1000}.images-style-waterfall .images-tool__actions-container { position:absolute; top:5px; right:5px; display:flex; flex-direction:column; align-items:center; gap:3px; opacity:0; transition:opacity .2s; z-index:10}.images-style-waterfall .images-tool__image-item:hover .images-tool__actions-container { opacity:1}.images-style-waterfall .images-tool__move-button { width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:#333; transition:all .2s}.images-style-waterfall .images-tool__move-button:hover,.images-style-waterfall .images-tool__remove-button:hover { background-color:#fff; transform:scale(1.1); box-shadow:0 2px 4px #0003}.images-style-waterfall .images-tool__move-button:disabled { opacity:.5; cursor:not-allowed; transform:none}.inline-code {background: rgba(250, 239, 240, 0.78);color: #b44437;padding: 3px 4px;border-radius: 5px;margin: 0 1px;font-family: inherit;font-size: 0.86em;font-weight: 500;letter-spacing: 0.3px;} 准备后期重构发布页面，下面这个样式如何，大家讨论下，参照的小红书，快手，抖音的发布页面结构
.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.ce-paragraph { line-height: 1.6em; outline: none; text-indent: 2em; font-size: 16px;}.ce-paragraph--right { text-align: right;}.ce-paragraph--center { text-align: center;}.ce-paragraph--left { text-align: left;}.ce-paragraph--justify { text-align: justify;}.ce-paragraph-text-indent { text-align: justify;}.ce-paragraph:empty::before{content: attr(data-placeholder);color: #707684;font-weight: normal;opacity: 0;}/** Show placeholder at the first paragraph if Editor is empty */.codex-editor--empty .ce-block:first-child .ce-paragraph:empty::before {opacity: 1;}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph:empty::before,.codex-editor--empty .ce-block:first-child .ce-paragraph:empty:focus::before {opacity: 0;}.ce-paragraph p:first-of-type{ margin-top: 0;}.ce-paragraph p:last-of-type{ margin-bottom: 0;}.svg-icon { width: 1em; height: 1em;}.svg-icon path,.svg-icon polygon,.svg-icon rect { fill: #4691f6;}.svg-icon circle { stroke: #4691f6; stroke-width: 1;}.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.images-style-normal .images-tool { --bg-color:#cdd1e0; --front-color:#388ae5; --border-color:#e8e8eb;}.images-style-normal .images-tool__image { border-radius:3px; overflow:hidden; margin-bottom:10px; padding-bottom:0}.images-style-normal .images-tool__image-picture { max-width:100%; vertical-align:bottom; display:block; margin:0 auto}.images-style-normal .images-tool__image-preloader { width:50px; height:50px; border-radius:50%; background-size:cover; margin:auto; position:relative; background-color:#cdd1e0; background-position:center center}.images-style-normal .images-tool__image-preloader:after { content:""; position:absolute; z-index:3; width:60px; height:60px; border-radius:50%; border:2px solid #cdd1e0; border-top-color:#388ae5; left:50%; top:50%; margin-top:-30px; margin-left:-30px; animation:image-preloader-spin 2s infinite linear; box-sizing:border-box}.images-style-normal .images-tool__images-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:10px}.images-style-normal .images-tool__image-item { position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5}.images-style-normal .images-tool__remove-button { top:5px; right:5px; width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s; z-index:10}.images-style-normal .images-tool__image-item:hover .images-tool__remove-button { opacity:1}.images-style-normal .images-tool__caption { bottom:0; left:0; margin-bottom:10px; text-align: center; font-size: 14px; color: #a3a3a3;}.images-style-normal .images-tool__caption:before { position:absolute!important; content:attr(data-placeholder); color:#707684; font-weight:400; display:none}.images-style-normal .images-tool__caption:empty:before { display:block}.images-style-normal .images-tool__caption:empty:focus:before { display:none}.images-style-normal .images-tool--empty .images-tool__image,.images-style-normal .images-tool--empty .images-tool__image-preloader { display:none}.images-style-normal .images-tool--empty .images-tool__caption,.images-style-normal .images-tool--uploading .images-tool__caption { visibility:hidden!important}.images-style-normal .images-tool .cdx-button { display:flex; align-items:center; justify-content:center}.images-style-normal .images-tool .cdx-button svg { height:auto; margin:0 6px 0 0}.images-style-normal .images-tool--filled .cdx-button,.images-style-normal .images-tool--filled .images-tool__image-preloader { display:none}.images-style-normal .images-tool--uploading .images-tool__image { min-height:200px; display:flex; border:1px solid #e8e8eb; background-color:#fff}.images-style-normal .images-tool--uploading .images-tool__image-picture,.images-style-normal .images-tool--uploading .cdx-button { display:none}.images-style-normal .images-tool--withBorder .images-tool__image { border:1px solid #e8e8eb}.images-style-normal .images-tool--withBackground .images-tool__image { padding:15px; background:#cdd1e0}.images-style-normal .images-tool--withBackground .images-tool__image-picture { max-width:60%; margin:0 auto}.images-style-normal .images-tool--stretched .images-tool__image-picture { width:100%}.images-style-normal .images-tool--caption .images-tool__caption { visibility:visible}.images-style-normal .images-tool--caption { padding-bottom:50px; text-align: center; font-size: 14px; color: #a3a3a3;}@keyframes image-preloader-spin { 0% { transform:rotate(0)}to { transform:rotate(360deg)}}.images-style-normal .images-tool__images-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:10px; min-height:100px}.images-style-normal .images-tool__image-item { position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5; transition:all .2s ease; cursor:grab}.images-style-normal .images-tool__image-item:hover { transform:translateY(-2px); box-shadow:0 4px 8px #0000001a}.images-style-normal .images-tool__image-item:active { cursor:grabbing}.images-style-normal .images-tool__image-item { -webkit-user-select:none; user-select:none}.images-style-normal .images-tool__image-item.dragging { opacity:.5; transform:scale(1.05); z-index:100}.images-style-normal .images-tool__drag-indicator { position:absolute; width:4px; background-color:#388ae5; border-radius:2px; pointer-events:none; z-index:1000}.images-style-normal .images-tool__actions-container { position:absolute; top:5px; right:5px; display:flex; flex-direction:column; align-items:center; gap:3px; opacity:0; transition:opacity .2s; z-index:10}.images-style-normal .images-tool__image-item:hover .images-tool__actions-container { opacity:1}.images-style-normal .images-tool__move-button { width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:#333; transition:all .2s}.images-style-normal .images-tool__move-button:hover,.images-style-normal .images-tool__remove-button:hover { background-color:#fff; transform:scale(1.1); box-shadow:0 2px 4px #0003}.images-style-normal .images-tool__move-button:disabled { opacity:.5; cursor:not-allowed; transform:none}/* *以下是瀑布流样式 */.images-style-waterfall .images-tool { --bg-color:#cdd1e0; --front-color:#388ae5; --border-color:#e8e8eb;}.images-style-waterfall .images-tool__image { border-radius:3px; overflow:hidden; margin-bottom:10px; padding-bottom:0}.images-style-waterfall .images-tool__image-picture { max-width:100%; vertical-align:bottom; display:block; margin:0 auto}.images-style-waterfall .images-tool__image-preloader { width:50px; height:50px; border-radius:50%; background-size:cover; margin:auto; position:relative; background-color:#cdd1e0; background-position:center center}.images-style-waterfall .images-tool__image-preloader:after { content:""; position:absolute; z-index:3; width:60px; height:60px; border-radius:50%; border:2px solid #cdd1e0; border-top-color:#388ae5; left:50%; top:50%; margin-top:-30px; margin-left:-30px; animation:image-preloader-spin 2s infinite linear; box-sizing:border-box}/* 修改为瀑布流布局 */.images-style-waterfall .images-tool__images-grid { column-count: 2; column-gap: 10px; margin-bottom: 10px;}@media (min-width: 768px) { .images-style-waterfall .images-tool__images-grid { column-count: 3; }}@media (min-width: 1024px) { .images-style-waterfall .images-tool__images-grid { column-count: 4; }}.images-style-waterfall .images-tool__image-item { break-inside: avoid; margin-bottom: 10px; position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5; transition:all .2s ease; cursor:grab}.images-style-waterfall .images-tool__image-item img { width: 100%; height: auto; display: block;}.images-style-waterfall .images-tool__remove-button { top:5px; right:5px; width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s; z-index:10}.images-style-waterfall .images-tool__image-item:hover .images-tool__remove-button { opacity:1}.images-style-waterfall .images-tool__caption { bottom:0; left:0; margin-bottom:10px; text-align: center; font-size: 14px; color: #a3a3a3;}.images-style-waterfall .images-tool__caption:before { position:absolute!important; content:attr(data-placeholder); color:#707684; font-weight:400; display:none}.images-style-waterfall .images-tool__caption:empty:before { display:block}.images-style-waterfall .images-tool__caption:empty:focus:before { display:none}.images-style-waterfall .images-tool--empty .images-tool__image,.images-style-waterfall .images-tool--empty .images-tool__image-preloader { display:none}.images-style-waterfall .images-tool--empty .images-tool__caption,.images-style-waterfall .images-tool--uploading .images-tool__caption { visibility:hidden!important}.images-style-waterfall .images-tool .cdx-button { display:flex; align-items:center; justify-content:center}.images-style-waterfall .images-tool .cdx-button svg { height:auto; margin:0 6px 0 0}.images-style-waterfall .images-tool--filled .cdx-button,.images-style-waterfall .images-tool--filled .images-tool__image-preloader { display:none}.images-style-waterfall .images-tool--uploading .images-tool__image { min-height:200px; display:flex; border:1px solid #e8e8eb; background-color:#fff}.images-style-waterfall .images-tool--uploading .images-tool__image-picture,.images-style-waterfall .images-tool--uploading .cdx-button { display:none}.images-style-waterfall .images-tool--withBorder .images-tool__image { border:1px solid #e8e8eb}.images-style-waterfall .images-tool--withBackground .images-tool__image { padding:15px; background:#cdd1e0}.images-style-waterfall .images-tool--withBackground .images-tool__image-picture { max-width:60%; margin:0 auto}.images-style-waterfall .images-tool--stretched .images-tool__image-picture { width:100%}.images-style-waterfall .images-tool--caption .images-tool__caption { visibility:visible}.images-style-waterfall .images-tool--caption { padding-bottom:50px; text-align: center; font-size: 14px; color: #a3a3a3;}@keyframes image-preloader-spin { 0% { transform:rotate(0)}to { transform:rotate(360deg)}}/* 移除重复的样式定义，保留瀑布流相关的样式 */.images-style-waterfall .images-tool__image-item:hover { transform:translateY(-2px); box-shadow:0 4px 8px #0000001a}.images-style-waterfall .images-tool__image-item:active { cursor:grabbing}.images-style-waterfall .images-tool__image-item { -webkit-user-select:none; user-select:none}.images-style-waterfall .images-tool__image-item.dragging { opacity:.5; transform:scale(1.05); z-index:100}.images-style-waterfall .images-tool__drag-indicator { position:absolute; width:4px; background-color:#388ae5; border-radius:2px; pointer-events:none; z-index:1000}.images-style-waterfall .images-tool__actions-container { position:absolute; top:5px; right:5px; display:flex; flex-direction:column; align-items:center; gap:3px; opacity:0; transition:opacity .2s; z-index:10}.images-style-waterfall .images-tool__image-item:hover .images-tool__actions-container { opacity:1}.images-style-waterfall .images-tool__move-button { width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:#333; transition:all .2s}.images-style-waterfall .images-tool__move-button:hover,.images-style-waterfall .images-tool__remove-button:hover { background-color:#fff; transform:scale(1.1); box-shadow:0 2px 4px #0003}.images-style-waterfall .images-tool__move-button:disabled { opacity:.5; cursor:not-allowed; transform:none}.inline-code {background: rgba(250, 239, 240, 0.78);color: #b44437;padding: 3px 4px;border-radius: 5px;margin: 0 1px;font-family: inherit;font-size: 0.86em;font-weight: 500;letter-spacing: 0.3px;} 看起来功能很强大的样子哦，我也要快点升X5才行
页:
[1]