## Opt - 首页网站备案信息

pages/login/index.vue

@@ -24,7 +24,7 @@
             ref="uForm">
       <view class="view-class pa">
         <!-- <view class="account-s">
-        
+
         </view> -->
         <u-form-item label=""
                      prop="username">
@@ -104,6 +104,27 @@
               @click="toLogin">{{'登录'}}</u-button>
     <view class="paswwrod_btn"
           @click="submit">{{'忘记密码'}}</view>
+
+
+
+    <view class="beian-container">
+      <div style="height: 25px;"> </div>
+      <div class="beian-content">
+        <a class="beian-link jicpb"
+           href="https://beian.miit.gov.cn"
+           target="_blank"
+           title="工信部备案查询">
+          京ICP备17001692号-8
+        </a>
+        <span class="beian-separator">|</span>
+        <a class="beian-link jgawb"
+           href="https://beian.mps.gov.cn/#/query/webSearch?code=11022902000496"
+           target="_blank"
+           title="公安部备案查询">
+          京公网安备11022902000496号
+        </a>
+      </div>
+    </view>
   </view>
 </template>
 
@@ -349,4 +370,87 @@ body {
 .pa {
   padding: 7px 20rpx;
 }
-</style>
+
+
+
+
+
+/* 备案容器 */
+.beian-container {
+  background-color: #ffffff; /* 深色背景 */
+  padding: 16px 0;
+  text-align: center;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-top: 20px;
+  border-radius: 8px 8px 0 0;
+}
+
+/* 备案内容 */
+.beian-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+/* 备案链接 */
+.beian-link {
+  color: #749AE3;
+  text-decoration: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  display: inline-block;
+}
+
+/* 悬停效果 */
+.beian-link:hover {
+  color: #fff;
+  background-color: rgba(116, 154, 227, 0.2);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(116, 154, 227, 0.3);
+}
+
+/* 分隔符 */
+.beian-separator {
+  color: #749AE3;
+  opacity: 0.6;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 480px) {
+  .beian-content {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .beian-separator {
+    display: none;
+  }
+
+  .beian-link {
+    font-size: 11px;
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.beian-container {
+  animation: fadeIn 0.5s ease-out;
+}
+</style>