1
services:
2
  panel:
3
    image: 'docker.olinl.com.cn/hslr/sun-panel:latest'
4
    hostname: panel
5
    container_name: panel
6
    ports:
7
      - '3002:3002'
8
    volumes:
9
      - './conf:/app/conf'
10
      - '/var/run/docker.sock:/var/run/docker.sock' # 挂载docker.sock
11
      # - ./runtime:/app/runtime # 挂载日志目录
12
      # - /mnt/sata1-1:/os # 硬盘挂载点（根据自己需求修改）
13
    restart: always
14
# 个人配置
15
    networks:
16
      - net
17
networks:
18
  net:
19
    external: true
20
    name: lin-net

1
# ======================
2
# Basic configuration
3
# ======================
4
[base]
5
# Web run port. Default:3002
6
http_port=3002
7
# Database driver [mysql/sqlite(Default)]
8
database_drive=mysql
9
# Cache driver [redis/memory(Default)]
10
cache_drive=redis
11
# Queue driver [redis/memory(Default)]
12
queue_drive=redis
13
# File cache path (Please start with the current path './')
14
# Warning: The files that have been uploaded after the modification cannot be accessed
15
source_path=./uploads
16
# File cache path.
17
source_temp_path=./runtime/temp
18

19
# ======================
20
# Mysql database driver
21
# ======================
22
[mysql]
23
host=127.0.0.1
24
port=3306
25
username=root
26
password=root
27
db_name=sun_panel
28
wait_timeout=100
29

30
# ======================
31
# sqlite database driver
32
# ======================
33
[sqlite]
34
file_path=./database/database.db
35

36
# ======================
37
# redis database driver
38
# ======================
39
[redis]
40
address=127.0.0.1:6379
41
password=
42
prefix=sun_panel:
43
db=0

1
/* 分组毛玻璃 */
2
.item-list{
3
  backdrop-filter: blur(1px); /* 毛玻璃效果 */
4
  -webkit-backdrop-filter: blur(1px); /* 对于 Safari 等 WebKit 浏览器 */
5
  background: rgba(255, 255, 255, 0.3); /* 半透明背景色 */
6
  border-radius: 15px;
7
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
8
  border: 1px solid rgba(255, 255, 255, 0.2);
9
  padding: 10px;
10
  color: white;
11
  margin: auto;
12
}

1
/* 搜索下方三张图片 */
2
document.addEventListener('DOMContentLoaded', () => {
3
    // 创建一个 MutationObserver 实例，监听 DOM 的变化
4
    const observer = new MutationObserver((mutationsList) => {
5
        // 查找目标父容器
6
        const parentDiv = document.querySelector('#item-card-box');
7

8
        // 如果找到了目标父容器，则停止观察并执行后续逻辑
9
        if (parentDiv) {
10
            observer.disconnect(); // 停止观察
11

12
            // 图片链接数组和对应的点击链接数组
13
            const imageLinks = [
14
                { src: "https://t.alcy.cc/moez?t=1", href: "#" },
15
                { src: "https://t.alcy.cc/moez?t=2", href: "#" },
16
                { src: "https://t.alcy.cc/moez?t=3", href: "#" }
17
            ];
18

19
            // 创建一个新的 div 容器
20
            const newDiv = document.createElement('div');
21
            newDiv.classList.add('image-container'); // 添加样式类
22

23
            // 遍历图片链接数组，动态创建图片和链接元素
24
            imageLinks.forEach((item, index) => {
25
                const a = document.createElement('a'); // 创建 a 标签
26
                a.href = item.href; // 设置链接地址
27
                a.classList.add('image-link'); // 添加链接样式类
28

29
                const img = document.createElement('img'); // 创建 img 标签
30
                img.src = item.src; // 设置图片地址
31
                img.alt = `Image ${index + 1}`; // 设置图片描述
32
                img.classList.add('image-item'); // 添加图片样式类
33

34
                // 如果是第三个图片，添加点击事件
35
                // if (index === 2) {
36
                //     img.addEventListener('click', (event) => {
37
                //         event.preventDefault(); // 阻止默认跳转行为
38
                //         alert("点上瘾了是吧，这个啥也没有！"); // 自定义点击逻辑
39
                //     });
40
                // }
41

42
                // 将 img 添加到 a 标签内
43
                a.appendChild(img);
44
                // 将 a 标签添加到新 div 中
45
                newDiv.appendChild(a);
46
            });
47

48
            // 将新 div 插入到目标父容器中
49
            if (parentDiv.firstChild) {
50
                parentDiv.insertBefore(newDiv, parentDiv.firstChild); // 插入到第一个子元素前
51
            } else {
52
                parentDiv.appendChild(newDiv); // 如果没有子元素，直接追加
53
            }
54
        }
55
    });
56

57
    // 开始观察整个文档的变化
58
    observer.observe(document.body, { childList: true, subtree: true });
59
});

1
/* 搜索下方三张图片 */
2
/* 容器样式 */
3
.image-container {
4
    display: flex;
5
    justify-content: center; /* 水平居中 */
6
    align-items: center; /* 垂直居中 */
7
    gap: 50px; /* 图片之间的间距 */
8
    margin: 20px 0; /* 上下外边距 */
9
    flex-wrap: wrap; /* 当空间不足时换行 */
10
}
11

12
/* 图片链接样式 */
13
.image-link {
14
    text-decoration: none; /* 去掉下划线 */
15
    border-radius: 28px; /* 圆角 */
16
    overflow: hidden; /* 防止图片溢出 */
17
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
18
    transition: transform 0.3s ease; /* 平滑过渡 */
19
}
20

21
/* 图片样式 */
22
.image-item {
23
    width: 350px; /* 固定宽度 */
24
    height: 200px; /* 自适应高度 */
25
    border-radius: 28px; /* 圆角 */
26
    transition: transform 0.3s ease; /* 平滑过渡 */
27
}
28

29
/* 鼠标悬停时的效果 */
30
.image-link:hover .image-item {
31
    transform: scale(1.1) rotate(5deg); /* 放大并旋转 */
32
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 加深阴影 */
33
}
34

35
/* Media Query for mobile devices */
36
@media (max-width: 768px) {
37
    /* 在小屏幕上，使图片竖排 */
38
    .image-container {
39
        flex-direction: column; /* 竖向排列 */
40
        align-items: center; /* 居中对齐 */
41
        gap: 20px; /* 减少间距 */
42
    }
43

44
    /* 调整图片大小以适应小屏幕 */
45
    .image-item {
46
        width: 100%; /* 宽度为100% */
47
        max-width: 400px; /* 设置最大宽度 */
48
    }
49
}

1
/*鼠标悬停动画 */
2

3
/* 当鼠标悬停在图标信息框上时触发动画 */
4
/* 详细图标摇晃动画 */
5
.icon-info-box .rounded-2xl:hover {
6
    background: rgba(42, 42, 42, 0.7) !important;/* 背景颜色变成深灰色 */
7
    -webkit-animation: info-shake-bounce .5s alternate !important;
8
    -moz-animation: info-shake-bounce .5s alternate !important;
9
    -o-animation: info-shake-bounce .5s alternate !important;
10
    animation: info-shake-bounce .5s alternate !important;
11
}
12

13

14

15
/* 小图标摇晃动画 */
16
.icon-small-box .rounded-2xl:hover {
17
    background: rgba(42, 42, 42, 0.7) !important;/* 背景颜色变成深灰色 */
18
    -webkit-animation: small-shake-bounce .5s alternate !important;
19
    -moz-animation: small-shake-bounce .5s alternate !important;
20
    -o-animation: small-shake-bounce .5s alternate !important;
21
    animation: small-shake-bounce .5s alternate !important;
22
}
23

24

25

26
/* 定义摇详细图标晃弹跳动画的关键帧 */
27
@keyframes info-shake-bounce {
28

29
    0%,
30
    100% {
31
        transform: rotate(0);
32
    }
33

34
    25% {
35
        transform: rotate(10deg);
36
    }
37

38
    50% {
39
        transform: rotate(-10deg);
40
    }
41

42
    75% {
43
        transform: rotate(2.5deg);
44
    }
45

46
    85% {
47
        transform: rotate(-2.5deg);
48
    }
49
}
50

51

52

53
/* 定义摇小图标晃弹跳动画的关键帧 */
54
@keyframes small-shake-bounce {
55

56
    0%,
57
    100% {
58
        transform: rotate(0);
59
    }
60

61
    25% {
62
        transform: rotate(15deg);
63
    }
64

65
    50% {
66
        transform: rotate(-15deg);
67
    }
68

69
    75% {
70
        transform: rotate(5deg);
71
    }
72

73
    85% {
74
        transform: rotate(5deg);
75
    }
76
}