fix: 修复图片布局溢出问题并优化样式

- 修改CSS以解决图片容器溢出问题
- 使用flex布局优化图片排列
- 更新静态资源路径为动态变量
- 隐藏示例项目并启用动态列表渲染

css/public.less

@@ -293,8 +293,13 @@ body {
         }
 
         .picture {
-            overflow: auto;
+            overflow-x: auto;
+            // white-space: nowrap;
+            display: flex;
+            flex-wrap: nowrap;
+            gap: 10px;
             margin-bottom: 15px;
+            max-width: 100%;
 
             .picture-videos {
                 position: relative;
@@ -313,9 +318,10 @@ body {
                 height: 100px;
                 border-radius: 10px;
                 display: block;
+                flex-shrink: 0;
 
                 &:not(:last-child) {
-                    margin-right: 10px;
+                    // margin-right: 10px;
                 }
             }
         }