添加资质

src/components/m-footer/index.module.less

@@ -56,6 +56,10 @@
     color: rgba(255, 255, 255, 0.5);
     padding: 16px 0 calc(20px);
     text-align: center;
+
+    a {
+      color: rgba(255, 255, 255, 0.5);
+    }
   }
 
   .logoUrl {

src/components/m-footer/index.tsx

@@ -45,8 +45,19 @@ export default defineComponent({
         </div>
 
         <div class={styles.copyright}>
+          <a target="_blank" href="https://beian.miit.gov.cn/">
+            网站备案：鄂ICP备2021020787号-1
+          </a>
+          <br />
+          增值电信业务经营许可证：鄂B2-20231246
+          <br />
+          教育移动互联网应用备案：教APP备4200224号
+          <br />
+          网络安全等级保护备案号：42010043158-24001 <br />
+          Copyright © 2024 武汉酷乐秀网络科技有限公司 版权所有
+          {/* <br />
           Copyright © 2022 武汉酷乐秀网络科技有限公司 <br />
-          All Rights Reserved.鄂ICP备2021020787号-1
+          All Rights Reserved.鄂ICP备2021020787号-1 */}
         </div>
       </div>
     );

src/views/about-us/index.module.less

@@ -72,4 +72,86 @@
   img {
     padding-top: 19px;
   }
+}
+
+.section3 {
+  padding: 27px 0 48px;
+  // background-color: #fff;
+  background: linear-gradient(180deg, #EDFDFF 0%, #FFFFFF 13%, #FFFFFF 92%, #DDF0F2 100%);
+
+  .title {
+    padding-bottom: 16px;
+
+    span {
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: -6px;
+        right: -15px;
+        width: 89px;
+        height: 39px;
+        background: url('./images/title-2.png') no-repeat center;
+        background-size: contain;
+        z-index: -1;
+      }
+    }
+  }
+
+  .imgGroup {
+    // height: 260px;
+    // width: 273px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    // .z1 {
+    //   width: 182px;
+    //   height: 261px;
+    // }
+
+    // .z2 {
+    //   height: 250px;
+    //   width: 171px;
+    // }
+
+    // .z3 {
+    //   width: 273px;
+    //   height: 170px;
+    // }
+
+    // .z4 {
+    //   width: 170px;
+    //   height: 229px;
+    // }
+    img {
+      width: 310px;
+      height: 268px;
+      pointer-events: none;
+      user-select: none;
+    }
+
+    p {
+      padding-top: 6px;
+      font-size: 14px;
+      color: #000000;
+      line-height: 20px;
+      padding-bottom: 56px;
+    }
+  }
+
+  --van-swipe-indicator-inactive-background: #C6E2E6;
+
+  :global {
+    .van-swipe__indicators {
+      bottom: 0;
+    }
+
+    .van-swipe__indicator--active {
+      background: linear-gradient(124deg, #008FAD 0%, #00AEA5 100%), #0088C5;
+      width: 12px;
+      border-radius: 10px;
+    }
+  }
 }

src/views/about-us/index.tsx

@@ -1,7 +1,12 @@
 import { defineComponent } from 'vue';
+import { Swipe, SwipeItem } from 'vant';
 import styles from './index.module.less';
 import MHeader from '@/components/m-header';
 import MFooter from '@/components/m-footer';
+import z1 from './images/1.png';
+import z2 from './images/2.png';
+import z3 from './images/3.png';
+import z4 from './images/4.png';
 
 import img2 from './images/img2.png';
 
@@ -38,6 +43,63 @@ export default defineComponent({
           </div>
         </div>
 
+        <div class={styles.section3}>
+          <div class={[styles.title]}>
+            <span>资质认证</span>
+          </div>
+
+          <Swipe loop={false}>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img
+                  src={z1}
+                  class={styles.z1}
+                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
+                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
+                  onDragstart={(e: DragEvent) => e.preventDefault()}
+                />
+                <p>增值电信业务经营许可证</p>
+              </div>
+            </SwipeItem>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img
+                  src={z2}
+                  class={styles.z2}
+                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
+                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
+                  onDragstart={(e: DragEvent) => e.preventDefault()}
+                />
+                <p>网络文化经营许可证</p>
+              </div>
+            </SwipeItem>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img
+                  src={z3}
+                  class={styles.z3}
+                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
+                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
+                  onDragstart={(e: DragEvent) => e.preventDefault()}
+                />
+                <p>信息系统安全等级保护备案证明</p>
+              </div>
+            </SwipeItem>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img
+                  src={z4}
+                  class={styles.z4}
+                  onTouchstart={(e: TouchEvent) => e.preventDefault()}
+                  onContextmenu={(e: MouseEvent) => e.preventDefault()}
+                  onDragstart={(e: DragEvent) => e.preventDefault()}
+                />
+                <p>计算机软件著作权登记证书</p>
+              </div>
+            </SwipeItem>
+          </Swipe>
+        </div>
+
         <div class={styles.section2}>
           <div class={[styles.title]}>
             <span>选择我们你将得到</span>