diff --git a/src/main/resources/static/image/QQ图片20230508223654.png b/src/main/resources/static/image/QQ图片20230508223654.png
new file mode 100644
index 0000000..185e5d3
Binary files /dev/null and b/src/main/resources/static/image/QQ图片20230508223654.png differ
diff --git a/src/main/resources/static/image/background_picture.jpg b/src/main/resources/static/image/background_picture.jpg
new file mode 100644
index 0000000..e33855b
Binary files /dev/null and b/src/main/resources/static/image/background_picture.jpg differ
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index fff5b8c..00c4b69 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -51,10 +51,187 @@
             line-height: 1.6;
         }
 
+        #艺术字 .艺术字 {
+            width: 50%;
+            color: #36c0b9;
+            font-size: 30px;
+            font-weight: bolder;
+            text-align: center;
+            padding: 1em;
+            vertical-align: middle;
+        }
+        #艺术字 .艺术字 span {
+            font-size: 35px;
+        }
+        #bg{
+            background: url(image/background_picture.jpg) no-repeat;
+            background-attachment: fixed;
+        }
+        #mybody {
+            padding: 1rem 2rem 2rem;
+            width: 880px;
+            border-radius: 0.7em;
+            margin: 0 auto;
+            background-color: rgba(255, 255, 255, 0.9);
+            font-size: 14px;
+            color: #2c3e50;
+        }
+        article {
+            display: block;
+            unicode-bidi: isolate;
+        }
+        #事先声明 {
+            color: rgb(70, 70, 70);
+            font-size: small;
+            border: 1px solid rgba(128, 128, 128, 0.466);
+            border-left: 10px #1e90ff solid;
+            height: 50px;
+        }
+        div {
+            display: block;
+            unicode-bidi: isolate;
+        }
+        h2 {
+            display: block;
+            font-size: 1.5em;
+            margin-block-start: 0.83em;
+            margin-block-end: 0.83em;
+            margin-inline-start: 0px;
+            margin-inline-end: 0px;
+            font-weight: bold;
+            unicode-bidi: isolate;
+        }
+        p{
+            display: block;
+            margin-block-start: 1em;
+            margin-block-end: 1em;
+            margin-inline-start: 0px;
+            margin-inline-end: 0px;
+            unicode-bidi: isolate;
+        }
+        #事先声明 {
+            color: rgb(70, 70, 70);
+            font-size: small;
+            border: 1px solid rgba(128, 128, 128, 0.466);
+            border-left: 10px #1e90ff solid;
+            height: 50px;
+        }
+        #事先声明 p {
+            position: relative;
+            top: -50px;
+            left: 70px;
+        }
+        #事先声明 img {
+            position: relative;
+            top: 4px;
+            left: 4px;
+        }
+        .大圆角标签1 {
+            width: 5px;
+            height: 30px;
+            background: #f62020;
+            border-radius: 1em;
+            float: left;
+            position: relative;
+            top: 0px;
+        }
+        .大圆角标签2 {
+            width: 5px;
+            height: 30px;
+            background: #f8c708;
+            border-radius: 1em;
+            float: left;
+            position: relative;
+            top: 0px;
+        }
+        .大圆角标签3 {
+            width: 5px;
+            height: 30px;
+            background: #3f4fd9;
+            border-radius: 1em;
+            float: left;
+            position: relative;
+            top: 0px;
+        }
+        .大圆角标签4 {
+            width: 5px;
+            height: 30px;
+            background: #8ed495;
+            border-radius: 1em;
+            float: left;
+            position: relative;
+            top: 0px;
+        }
+        .大圆角标签5 {
+            width: 5px;
+            height: 30px;
+            background: #be8eb0;
+            border-radius: 1em;
+            float: left;
+            position: relative;
+            top: 0px;
+        }
+
     </style>
 </head>
 
-<body>
+<body id="bg">
+<article id="mybody">
+    <div id="事先声明">
+        <img src="image/QQ图片20230508223654.png">
+        <p>
+            <b>此条目介绍的作品或其衍生作品中有至少一项尚未完结。</b><br>
+
+        </p>
+    </div>
+    <div id="艺术字">
+        <table>
+            <tr>
+                <td class="“">“</td>
+                <td class="艺术字"><span>QQ</span>-Bot<span>使用说明</span></td>
+                <td class="”">”</td>
+            </tr>
+        </table>
+    </div>
+    <div id="作品简介1">
+        <div class="大圆角标签1"></div>
+        <h2>&nbspQQ机器人是什么？</h2>
+        <p>QQ机器人，是通过开放的接口，让开发者能够实现开发出交互形式丰富的机器人 以辅助实现频道/社群内的管理、消息互动，</a>满足群主运营者多样化、个性化的运营需求，从而提高运营效率，同时为用户带来丰富的服务和便捷的体验。</P>
+
+    </div>
+    <div id="作品简介2">
+        <div class="大圆角标签2"></div>
+        <h2>&nbspQ2：QQ机器人可以实现什么功能呢？</h2>
+        <p>QQ机器人集便捷、高效、趣味、赋能于一身：</p>
+
+        <p>    高效的社群管理功能（如：身份组分配、自动回复、签到打卡等）</p>
+        <p>   稳健的音频功能（如：听歌、听书、语音开黑、在线玩桌游等）</p>
+        <p>    有趣的游戏功能（如：猜灯谜、成语接龙、打年兽升级、攻城守家等）</P>
+
+    </div>
+    <div id="作品简介3">
+        <div class="大圆角标签3"></div>
+        <h2>&nbspQ3：QQ机器人，区别于其他机器人的亮点有哪些？</h2>
+        <p>QQ机器人目前还在不断地迭代升级，亮点满满，包括但不限于:内联能力。通过内联能力，在聊天窗口实现一键发送机器人内容，让你的机器人成为内容直接触达用户的有效通道；</P>
+
+    </div>
+    <div id="作品简介4">
+        <div class="大圆角标签4"></div>
+        <h2>&nbspQ4：QQ机器人能做什么？</h2>
+        <p>社群管理-提效率：自动回复、自动分组、打卡等，提升管理效率</p>
+        <p>用户互动-促活跃：成语接龙、猜灯谜、抽奖、RPG/SLG文字游戏等，提升频道活跃</P>
+
+    </div>
+    <div id="作品简介5">
+        <div class="大圆角标签5"></div>
+        <h2>&nbspQ5：QQ机器人的好处？</h2>
+        <p>对于频道主、群主：帮助管理的工具，提升管理效率；同时提高群的活跃度</P>
+
+    </div>
+
+<h1>项目效果演示：</h1>
+
+
 <div class="集数按钮">#01</div>
 <div class="集数按钮">#02</div>
 <div class="集数按钮">#03</div>
@@ -142,6 +319,9 @@
         <p></p>
     </div>
 </div>
+    <p>此外还可以在下表中查看群聊消息统计数据</p>
+    <a href="messagelist">群聊信息统计表</a>
+</article>