完成footer部分

docs/components/index.vue

@@ -55,6 +55,43 @@
       </div>
     </div>
   </section>
+  <div class="wrap-footer">
+      <div class="footer">
+    <!-- 左侧区域（第一张图内容） -->
+    <div class="footer-left">
+      <div class="gitee-brand">
+        <div class="logo-circle">
+          <span class="logo-char">
+            <img src="/public/mengningsoftware.png" alt="">
+          </span>
+        </div>
+      </div>
+      <div class="copyright">梦宁软件（江苏）有限公司版权所有</div>
+    </div>
+    
+    <!-- 右侧区域（第二张图内容） -->
+    <div class="footer-right">
+      <div class="qr-container">
+        <div class="qr-code">
+          <div class="qr-icon">
+            <span class="qr-char">
+              <img src="/public/QR-code.jpg" alt="">
+            </span>
+          </div>
+        </div>
+        <div class="qr-label">微信公众号</div>
+      </div>
+    </div>
+  </div>
+    <div class="footer-area">
+       <p>
+    <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">苏ICP备2024068144号-1</a>
+    © 
+    <a href="/copyright" rel="noopener noreferrer">Mengning Software</a>. 
+    2025- All rights reserved.
+  </p>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -72,6 +109,7 @@ export default {
 /* 基础布局 */
 .tencent-showcase {
   background: white;
+  height: 200px;
 }
 
 .ten_main {
@@ -155,6 +193,116 @@ export default {
   height: 2px;
   background: white;
 }
+.wrap-footer {
+  margin-top: 50px;
+  background: white;
+}
+  .footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 20px 20px 0;
+  /* padding: 20px; */
+  background-color: white;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 左侧品牌区域样式 */
+.footer-left {
+  display: flex;
+  align-items: center;
+}
+
+.gitee-brand {
+  display: flex;
+  align-items: center;
+}
+
+.logo-circle {
+  width: 200px;
+  height: 100px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: -10px;
+}
+
+.logo-char {
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.brand-name {
+  font-size: 24px;
+  font-weight: bold;
+  color: #000;
+}
+
+.copyright {
+  color: #999;
+  font-size: 14px;
+}
+
+/* 右侧二维码区域样式 */
+.footer-right {
+  display: flex;
+}
+
+.qr-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qr-code {
+  width: 100px;
+  height: 100px;
+  background-color: #f5f5f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.qr-icon {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.qr-char {
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.qr-label {
+  font-size: 14px;
+  color: #333;
+}
+
+.footer-area {
+  text-align: center;
+  padding: 10px 0;
+  font-size: 14px;
+  color: #999;
+}
+.footer-area a {
+  text-decoration: none;
+  color: inherit;
+}
+.footer-area a:hover {
+  text-decoration: underline;
+  color: #2563eb;
+}
+
 
 /* 响应式设计 */
 @media (max-width: 768px) {