feat(mobile): 添加移动端首页流程图组件并修复图片alt属性

- 在移动端首页添加流程图组件展示技术架构
- 新增移动端User组件和两个箭头SVG资源文件
- 修复桌面端User组件图片的alt属性以提高可访问性
- 实现移动端流程图完整布局和样式

app/assets/svg/home/arrow5.svg

@@ -0,0 +1,10 @@
+<svg width="15" height="61" viewBox="0 0 15 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.17773 0V58.4254" stroke="url(#paint0_linear_1096_3535)" stroke-width="2.87077"/>
+<path d="M7.03339 60.1484L13.1245 54.3351H0.942295L7.03339 60.1484Z" fill="#B6B4FF"/>
+<defs>
+<linearGradient id="paint0_linear_1096_3535" x1="7.74133" y1="10.5382" x2="-14.6073" y2="58.9002" gradientUnits="userSpaceOnUse">
+<stop stop-color="#564EFF"/>
+<stop offset="1" stop-color="#D2D0FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/home/arrow6.svg

@@ -0,0 +1,10 @@
+<svg width="15" height="197" viewBox="0 0 15 197" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.7168 0V193.395" stroke="url(#paint0_linear_1096_3541)" stroke-width="2.87077"/>
+<path d="M7.03339 196.645L13.1245 190.831H0.942295L7.03339 196.645Z" fill="#B6B4FF"/>
+<defs>
+<linearGradient id="paint0_linear_1096_3541" x1="7.28039" y1="12.3803" x2="-15.0684" y2="60.7424" gradientUnits="userSpaceOnUse">
+<stop stop-color="#564EFF"/>
+<stop offset="1" stop-color="#D2D0FF"/>
+</linearGradient>
+</defs>
+</svg>

app/components/home/User.vue

@@ -2,7 +2,7 @@
   <div class="user-item">
     <img width="72" :src="src" class="user1-img" alt="user" />
     <div class="user1-text">{{ text }}</div>
-    <img v-if="tailSrc" class="user-tail" :src="tailSrc" alt="" aria-hidden="true" />
+    <img v-if="tailSrc" class="user-tail" :src="tailSrc" alt="user" aria-hidden="true" />
   </div>
 </template>
 <script setup>

app/components/mobile/home/Flowchart.vue

@@ -1,3 +1,461 @@
-<template></template>
-<script setup></script>
-<style lang="scss" scoped></style>
+<template>
+  <section class="h5-flowchart-container">
+    <div class="flowchart-users">
+      <User text="正常访客" :src="user1Icon" class="user1" />
+      <User text="DDos" :src="user2Icon" :tail-src="user2Tail" class="user2" />
+      <User text="异常访客" :src="user3Icon" :tail-src="user3Tail" class="user3" />
+      <User text="... ..." :src="user4Icon" :tail-src="user4Tail" class="user4" />
+    </div>
+    <div class="flowchart-arrow">
+      <img width="148" class="arrow1" src="~/assets/svg/home/arrow.svg" alt="arrow" />
+      <div class="text1 text-box">浏览器域名</div>
+      <div class="text2 text-box">DNS引流</div>
+      <div class="text3 text-box">SDK引流</div>
+      <div class="text4 text-box">移动端/PC/客户端APP（Android、ios、Windows）</div>
+    </div>
+    <div class="flowchart-block">
+      <div class="block-ads">
+        <div class="block-title">
+          清洗系统（ADS）集群
+        </div>
+        <div class="ads-contnet">
+          <div class="ads-text">近源清洗</div>
+          <div class="ads-text">BGP调度</div>
+          <div class="ads-text">SYN\ UDP\ACK......</div>
+        </div>
+      </div>
+      <div class="block-arrow1">
+        <img width="14" height="20" src="~/assets/svg/home/arrow1.svg" alt="arrow1">
+      </div>
+      <div class="block-yun">
+        <div class="block-title">
+          云端纵深防御平台
+        </div>
+        <div class="yun-contnet">
+          <div class="yun-item">
+            <div class="yun-item-title">WAF</div>
+            <div class="yun-item-desc">防漏洞、防入侵、防爬虫、<br>防盗链Web蜜网、敏感词替换......</div>
+          </div>
+          <div class="yun-item">
+            <div class="yun-item-title">CC防护</div>
+            <div class="yun-item-desc">经典防御策略模式，精准访问控制（DIY）</div>
+          </div>
+          <div class="yun-item">
+            <div class="yun-item-title">DDoS防护</div>
+            <div class="yun-item-desc">节点调度网络（Web、TCP、SDK）</div>
+          </div>
+          <div class="yun-item">
+            <div class="yun-item-title">性能优化</div>
+            <div class="yun-item-desc">页面压缩、异步加载、移动端跳转全链路优化、Web自适应、高级缓存</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flowchart-footer">
+      <div class="footer-left">
+        <div class="left-top">
+          <div class="footer-text left-text">安全联动</div>
+          <img class="top-img" src="~/assets/svg/home/arrow5.svg" alt="arrow5" />
+        </div>
+        <div class="left-content">
+          <div class="block-title">
+            大数据安全运营分析中心
+          </div>
+          <div class="center-content">
+            <div class="center-row">
+              <div class="center-item half">
+                <div class="item-title">AI实时决策引擎</div>
+                <div class="item-desc">日志管理、漏洞扫描</div>
+              </div>
+              <div class="center-item half">
+                <div class="item-title">语义语法分析引擎</div>
+                <div class="item-desc">运营分析、安全值守</div>
+              </div>
+            </div>
+            <div class="center-row">
+              <div class="center-item half">
+                <div class="item-title">规则监测引擎</div>
+                <div class="item-desc">威胁情报、安全重保</div>
+              </div>
+              <div class="center-item half">
+                <div class="item-title">威胁情报</div>
+                <div class="item-desc">渗透测试、大屏展示</div>
+              </div>
+            </div>
+            <div class="center-item full">
+              <div class="item-title">安全分析统计</div>
+              <div class="item-desc">cc攻击分析、漏洞入侵分析、BOT面板、实时态势......</div>
+            </div>
+            <div class="center-item full">
+              <div class="item-title">业务访问分析统计</div>
+              <div class="item-desc">访问分析、热点URL、热点子域名、请求分布、状态码、流量宽带......</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer-right">
+        <div class="right-top">
+          <div class="footer-text right-text">洁净流量</div>
+          <img class="right-img" src="~/assets/svg/home/arrow6.svg" alt="arrow6 " />
+        </div>
+        <div class="right-server">
+          <img width="72" height="56" class="server-img" src="~/assets/svg/home/server.svg" alt="server" />
+          <img width="14" class="arrow4" src="~/assets/svg/home/arrow4.svg" alt="arrow4">
+        </div>
+        <div class="server-text">
+          源服务器
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+import User from '~/components/mobile/home/User.vue'
+import user1Icon from '~/assets/svg/home/user1.svg'
+import user2Icon from '~/assets/svg/home/user2.svg'
+import user3Icon from '~/assets/svg/home/user3.svg'
+import user4Icon from '~/assets/svg/home/user4.svg'
+import user2Tail from '~/assets/svg/home/user2-tail.svg'
+import user3Tail from '~/assets/svg/home/user3-tail.svg'
+import user4Tail from '~/assets/svg/home/user4-tail.svg'
+</script>
+<style lang="scss" scoped>
+.h5-flowchart-container {
+  width: 343PX;
+  position: relative;
+  box-sizing: border-box;
+  margin: 0 auto;
+
+  .flowchart-users {
+    position: relative;
+
+    .user1 {
+      position: absolute;
+      top: 0;
+      left: 75PX;
+      z-index: 1;
+    }
+
+    .user2 {
+      position: absolute;
+      top: 0;
+      right: 112PX;
+    }
+
+    .user3 {
+      position: absolute;
+      top: 0;
+      right: 56PX;
+    }
+
+    .user4 {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+  }
+
+  .flowchart-arrow {
+    position: relative;
+    color: #FFF;
+    font-size: 10PX;
+    font-weight: 400;
+
+    .arrow1 {
+      position: absolute;
+      top: 35PX;
+      left: 26PX;
+      z-index: 0;
+    }
+
+    .text-box {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 3PX;
+      border: 1PX solid #8457FF;
+      background: #3F327D;
+    }
+
+    .text1 {
+      left: 0;
+      top: 70PX;
+      width: 88PX;
+      height: 20PX;
+    }
+
+    .text2 {
+      left: 6PX;
+      top: 102PX;
+      width: 65PX;
+      height: 18PX;
+    }
+
+    .text3 {
+      left: 142PX;
+      top: 104PX;
+      width: 52PX;
+      height: 17PX;
+    }
+
+    .text4 {
+      right: 0;
+      top: 56PX;
+      width: 159PX;
+      height: 34PX;
+    }
+  }
+
+  .block-title {
+    width: 100%;
+    height: 20PX;
+    background: rgba(128, 119, 255, 0.50);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12PX;
+    color: #FFF;
+    font-weight: 400;
+  }
+
+  .flowchart-block {
+    width: 100%;
+    padding-top: 138PX;
+
+    .block-ads {
+      width: 100%;
+      border-radius: 4PX;
+      border: 1PX solid #8B74FF;
+      background: rgba(63, 51, 125, 0.30);
+      color: #FFF;
+      font-weight: 400;
+      line-height: 6PX;
+
+      .ads-contnet {
+        font-size: 10PX;
+        height: 40PX;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        // gap: 76PX;
+
+        .ads-text {
+          display: flex;
+          width: 99PX;
+          height: 20PX;
+          justify-content: center;
+          align-items: center;
+          border-radius: 3PX;
+          background: rgba(139, 116, 255, 0.50);
+        }
+      }
+    }
+
+
+
+    .block-yun {
+      width: 100%;
+      border-radius: 4PX;
+      border: 1PX solid #8077FF;
+      background: rgba(63, 51, 125, 0.30);
+    }
+
+    .yun-contnet {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 8PX;
+      padding: 8PX 0;
+      position: relative;
+
+
+      .yun-item {
+        border-radius: 4PX;
+        background: rgba(139, 116, 255, 0.50);
+        display: flex;
+        flex-direction: column;
+        width: 160PX;
+        height: 70PX;
+        padding: 6PX;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 1;
+
+        .yun-item-title {
+          color: #FFF;
+          font-size: 12px;
+          font-weight: 700;
+        }
+
+        .yun-item-desc {
+          color: #FFF;
+          font-size: 10px;
+          font-weight: 400;
+          text-align: left;
+          flex: 1;
+        }
+      }
+    }
+
+
+
+    .block-arrow1 {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  .flowchart-footer {
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+
+    .footer-text {
+      position: absolute;
+      display: flex;
+      width: 80PX;
+      height: 18PX;
+      justify-content: center;
+      align-items: center;
+      border-radius: 2PX;
+      border: 1PX solid #CBC9FF;
+      background: #3F337D;
+      box-shadow: 0 5.5PX 10PX 0 rgba(181, 179, 227, 0.30);
+      color: #FFF;
+      font-size: 12PX;
+      font-weight: 400;
+      z-index: 1;
+    }
+
+    .left-text {
+      top: 16PX;
+      left: 128PX;
+    }
+
+    .right-text {
+      top: 61PX;
+      left: 9PX;
+    }
+  }
+
+  .footer-left {
+    width: 254PX;
+
+    .left-top {
+      position: relative;
+
+      .top-img {
+        position: relative;
+        left: 156PX;
+      }
+    }
+
+    .left-content {
+      width: 100%;
+      border-radius: 4PX;
+      border: 1PX solid #8077FF;
+      background: rgba(63, 51, 125, 0.30);
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+
+      .center-content {
+        flex: 1;
+        padding: 6PX 10PX 17PX;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 6PX;
+
+        .center-row {
+          display: flex;
+          justify-content: space-between;
+          gap: 6PX;
+          width: 100%;
+        }
+
+        .center-item {
+          display: flex;
+          width: 236PX;
+          height: 54PX;
+          background: rgba(139, 116, 255, 0.50);
+          border-radius: 10PX;
+          align-items: center;
+          flex-direction: column;
+          justify-content: center;
+          box-sizing: border-box;
+          padding: 0 6PX;
+          gap: 2PX;
+
+          &.half {
+            width: 114px;
+          }
+
+          &.full {
+            width: 100%;
+          }
+
+          .item-title {
+            color: #FFF;
+            font-size: 12PX;
+            font-weight: 700;
+          }
+
+          .item-desc {
+            color: #FFF;
+            font-size: 10PX;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+
+  .footer-right {
+    width: 89PX;
+
+    .right-top {
+      position: relative;
+    }
+
+    .right-img {
+      position: relative;
+      left: 40PX;
+    }
+
+    .right-server {
+      position: relative;
+    }
+
+    .arrow4 {
+      position: absolute;
+      left: 0;
+      top: 34PX;
+    }
+
+    .server-img {
+      position: relative;
+      left: 9PX;
+      z-index: 1;
+    }
+
+    .server-text {
+      display: flex;
+      width: 80PX;
+      height: 24PX;
+      justify-content: center;
+      align-items: center;
+      border-radius: 2PX;
+      border: 1PX solid #CBC9FF;
+      background: #3F337D;
+      box-shadow: 0 5.5PX 10PX 0 rgba(181, 179, 227, 0.30);
+      color: #FFF;
+      font-size: 12PX;
+      font-weight: 400;
+      margin: 24PX 0 0 8PX;
+    }
+  }
+}
+</style>

app/components/mobile/home/User.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="h5-user-item">
+    <img width="22" :src="src" class="user1-img" alt="user" />
+    <div class="user1-text">{{ text }}</div>
+    <img v-if="tailSrc" class="user-tail" :src="tailSrc" alt="user" aria-hidden="true" />
+  </div>
+</template>
+<script setup>
+import defaultUserSrc from '~/assets/svg/home/user1.svg'
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: "正常访客",
+    required: true,
+  },
+  src: {
+    type: String,
+    default: defaultUserSrc,
+    required: true,
+  },
+  tailSrc: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+<style lang="scss" scoped>
+.h5-user-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+
+  .user1-text {
+    display: flex;
+    width: 46PX;
+    height: 15PX;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 4PX;
+    border: 1PX solid #A39DFF;
+    background: #3F337D;
+    color: #FFF;
+    font-size: 10PX;
+    font-weight: 400;
+    line-height: 10PX;
+  }
+
+  .user-tail {
+    position: absolute;
+    width: 3PX;
+    height: 30PX;
+    top: 100%;
+    right: 48%;
+    transform: translateX(-50%);
+    pointer-events: none;
+    z-index: 0;
+  }
+}
+</style>

app/pages/mobile/index.vue

@@ -17,6 +17,7 @@
       <h2>全景技术架构让技术成为增长引擎</h2>
       <p>从基础设施、数据引擎、服务中台到业务应用，层层协同，将算力、数据与能力统一管理</p>
     </section>
+    <Flowchart class="mb-flowchart" />
   </section>
 </template>
 
@@ -24,6 +25,7 @@
 import homeVideo from '~/assets/video/home.webm'
 import ProductTabs from '~/components/mobile/home/ProductTabs.vue'
 import PlansSection from '~/components/mobile/home/PlansSection.vue'
+import Flowchart from '~/components/mobile/home/Flowchart.vue'
 </script>
 
 <style scoped lang="scss">
@@ -121,5 +123,10 @@ import PlansSection from '~/components/mobile/home/PlansSection.vue'
       line-height: 16px;
     }
   }
+
+  .mb-flowchart {
+    margin-top: 24px;
+    padding-bottom: 32px;
+  }
 }
 </style>