feature:官网框架搭建

package.json

@@ -8,17 +8,40 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "bootstrap": "^5.3.0-alpha1",
+    "bootstrap-vue": "^2.23.1",
+    "bootstrap-vue-next": "^0.26.18",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "element-plus": "^2.9.1",
+    "element-ui": "^2.15.14",
+    "montserrat": "^1.0.1",
+    "timeline-vuejs": "^1.1.7",
+    "v-timeline": "0.0.0",
+    "vue": "^3.2.13",
+    "vue-baidu-map": "^0.21.22",
+    "vue-horizontal-timeline": "^0.12.0",
+    "vue-i18n": "^9.14.2",
+    "vue-router": "^4.5.0",
+    "vue-timeline": "^0.1.0",
+    "vue3-google-map": "^0.21.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.12.16",
+    "@babel/preset-env": "^7.26.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "babel-loader": "^9.2.1",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.2.1",
+    "less-loader": "^12.2.0",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.4",
+    "vue-loader": "^17.4.2",
+    "vue-template-compiler": "^2.7.16"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -1,15 +1,14 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <LayOut/>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import LayOut from './components/DefaultLayOut'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    LayOut,
   }
 }
 </script>

src/components/DefaultLayOut.vue

@@ -0,0 +1,29 @@
+<template>
+  <!-- 固定的 Header -->
+  <Header></Header>
+  <!-- 动态的内容部分 -->
+  <router-view></router-view>
+  <!-- 固定的 Start -->
+  <Start></Start>
+  <!-- 固定的 Bottom -->
+  <Bottom></Bottom>
+</template>
+
+<script>
+import Header from '@/components/PageHeader'
+import Bottom from '@/components/PageBottom'
+import Start from '@/components/Start'
+export default {
+  name: "PageLayOut",
+  components:{
+    Header,
+    Start,
+    Bottom
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Features.vue

@@ -0,0 +1,517 @@
+<template>
+  <div class="feature">
+    <div class="top"
+         :style="{ backgroundImage: `url(${require('@/assets/images/feature.png')})` }">
+      <h1 class="title">强大的功能为您的网站提供优势</h1>
+      <h4 class="subTitle">
+        LightCDN不停探索不一样的功能，致力于完善强大的CDN加速所需。我们的服务能够显著增强您的网站速度，超越其极限，为您的访问者提供最佳体验。通过不断创新和优化，LightCDN确保您的网站始终以最高效的方式运行，使您的用户享受到一致的浏览体验。</h4>
+    </div>
+    <div class="features">
+      <div class="odd">
+        <div class="description">
+          <h2 class="title">性能展示</h2>
+          <h4 class="subTitle">CDN 的性能主要体现在网页加载速度上。如果未接入
+            CDN，文件载入速度会较慢，客户可能还未等网站打开就已经失去耐心离开了。LightCDN
+            的目标是通过高效的全局缓存和内容优化，为您的用户提供最佳的访问体验。</h4>
+          <div class="advantage">
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+          </div>
+        </div>
+        <div class="showImg">
+          <img :src="require('@/assets/images/feature1.png')" alt="">
+        </div>
+      </div>
+      <div class="even">
+        <div class="showImg">
+          <img :src="require('@/assets/images/feature1.png')" alt="">
+        </div>
+        <div class="description">
+          <h2 class="title">性能展示</h2>
+          <h4 class="subTitle">CDN 的性能主要体现在网页加载速度上。如果未接入
+            CDN，文件载入速度会较慢，客户可能还未等网站打开就已经失去耐心离开了。LightCDN
+            的目标是通过高效的全局缓存和内容优化，为您的用户提供最佳的访问体验。</h4>
+          <div class="advantage">
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="odd">
+        <div class="description">
+          <h2 class="title">性能展示</h2>
+          <h4 class="subTitle">CDN 的性能主要体现在网页加载速度上。如果未接入
+            CDN，文件载入速度会较慢，客户可能还未等网站打开就已经失去耐心离开了。LightCDN
+            的目标是通过高效的全局缓存和内容优化，为您的用户提供最佳的访问体验。</h4>
+          <div class="advantage">
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+          </div>
+        </div>
+        <div class="showImg">
+          <img :src="require('@/assets/images/feature1.png')" alt="">
+        </div>
+      </div>
+      <div class="even">
+        <div class="showImg">
+          <img :src="require('@/assets/images/feature1.png')" alt="">
+        </div>
+        <div class="description">
+          <h2 class="title">性能展示</h2>
+          <h4 class="subTitle">CDN 的性能主要体现在网页加载速度上。如果未接入
+            CDN，文件载入速度会较慢，客户可能还未等网站打开就已经失去耐心离开了。LightCDN
+            的目标是通过高效的全局缓存和内容优化，为您的用户提供最佳的访问体验。</h4>
+          <div class="advantage">
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+            <div class="list">
+              <img :src="require('@/assets/images/idea.png')" alt="">
+              <h4>最优网络调用</h4>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="controlPanel">
+      <h3 class="title">简单易懂的控制面板</h3>
+      <h4 class="subTitle">把握关键的数据，用简单的方式输出，了解的更为全面</h4>
+      <div>
+        <!-- Tabs -->
+        <div class="tabs">
+          <div
+              class="tab"
+              v-for="(info, index) in infos"
+              :key="index"
+              @click="selectTab(index)"
+              :class="{ active: currentIndex === index }"
+          >
+            <img :src="info.image" alt="">
+            <h4 :class="{ active: currentIndex === index }">{{ info.tabTitle }}</h4>
+          </div>
+        </div>
+
+        <!-- Swiper -->
+        <div class="swiper-container">
+          <div
+              class="swiper"
+              v-for="(info, index) in infos"
+              :key="index"
+              v-show="currentIndex === index"
+          >
+            <img :src="info.src" alt="">
+            <div class="description">
+              <h3>{{ info.title }}</h3>
+              <p>{{ info.subTitle }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: "features",
+  data() {
+    return {
+      currentIndex: 0,
+      timer: null,
+      infos: [
+        {
+          image: require('@/assets/images/tab1.png'),
+          tabTitle: "容易上手的CDN配置",
+          src: require('@/assets/images/ability1.png'),
+          title: "完善的安全功能",
+          subTitle: "在功能设计上，LightCDN致力于为您提供简便的操作体验。所有复杂功能都被拆解成简单易用的形式，只需一键开启，即可轻松使用，无需繁琐的过程。\n" +
+              "完善的安全功能\n" +
+              "不仅支持地域限制，还提供Token认证、Web应用防火墙（WAF）、防爬虫等专项防御措施。我们还提供免费的SSL证书，帮助您构建全链路的安全保障体系。"
+        },
+        {
+          image: require('@/assets/images/tab1.png'),
+          tabTitle: "容易上手的CDN配置",
+          src: require('@/assets/images/ability1.png'),
+          title: "可视化分析",
+          subTitle: "我们追求极致的简便，无需创建空间（“zone”）。只需提供一个有效的源站和您的加速域名，即可快速完成CDN配置。"
+        },
+        {
+          image: require('@/assets/images/tab1.png'),
+          tabTitle: "容易上手的CDN配置",
+          src: require('@/assets/images/ability1.png'),
+          title: "容易上手的配置",
+          subTitle: "我111111111111"
+        },
+        {
+          image: require('@/assets/images/tab1.png'),
+          tabTitle: "容易上手的CDN配置",
+          src: require('@/assets/images/ability1.png'),
+          title: "功能一键开启",
+          subTitle: "222222222222222222"
+        }
+      ],
+    }
+  },
+  methods: {
+    selectTab(index) {
+      this.currentIndex = index;
+      this.resetTimer();
+    },
+    startTimer() {
+      this.timer = setInterval(() => {
+        this.currentIndex = (this.currentIndex + 1) % this.infos.length;
+      }, 2000); // 3秒切换一次
+    },
+    resetTimer() {
+      clearInterval(this.timer);
+      this.startTimer();
+    }
+  },
+  mounted() {
+    this.startTimer();
+  },
+  beforeUnmount() {
+    clearInterval(this.timer);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.feature .top {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 465px;
+  padding: 120px 0px;
+  background: center no-repeat;
+  background-size: cover;
+
+  .title {
+    width: 665px;
+    min-height: 115px;
+    line-height: 115px;
+    margin-left: 54px;
+    font-family: "PingFang SC";
+    text-align: left;
+    font-size: 38px;
+    color: #ff9437;;
+  }
+
+  .subTitle {
+    max-width: 665px;
+    min-height: 144px;
+    margin-left: 54px;
+    font-size: 17px;
+    text-align: left;
+  }
+}
+
+.feature .features {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 1715px;
+  width: 100%;
+  padding: 80px 0px 0px;
+  background-color: #fbfbfb;
+
+  .odd {
+    display: flex;
+    min-height: 374px;
+    margin: 43px 0px 0px;
+    padding: 0px 50px;
+
+    .description {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 30px 15px 0px 0px;
+      width: 50%;
+
+      .title {
+        min-height: 39px;
+        max-width: 526px;
+        font-size: 24px;
+      }
+
+      .subTitle {
+        min-height: 108px;
+        max-width: 526px;
+        font-size: 18px;
+        color: #9AA1AE;
+        text-align: left;
+      }
+
+      .advantage {
+        display: flex;
+        flex-wrap: wrap;
+        max-width: 526px;
+
+        .list {
+          display: flex;
+          align-items: center;
+          min-width: 200px;
+          padding: 0;
+          margin: 20px 0px;
+          height: 32px;
+
+          img {
+            height: 25px;
+            width: 28px;
+          }
+
+          h4 {
+            height: 32px;
+            padding-left: 12px;
+            margin-bottom: -16px;
+            color: #14161D;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+
+    .showImg {
+      display: flex;
+      align-items: flex-start;
+
+      img {
+        width: 100%;
+        height: 100%;
+        //padding-top: 30px;
+      }
+    }
+  }
+
+  .even {
+    display: flex;
+    min-height: 374px;
+    margin: 43px 0px 0px;
+    padding: 0px 50px;
+
+    .description {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 30px 0px 0px 55px;
+      width: 50%;
+
+      .title {
+        text-align: left;
+        min-height: 39px;
+        max-width: 526px;
+        font-size: 24px;
+      }
+
+      .subTitle {
+        min-height: 108px;
+        max-width: 526px;
+        font-size: 18px;
+        color: #9AA1AE;
+        text-align: left;
+      }
+
+      .advantage {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        max-width: 526px;
+
+        .list {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          min-width: 200px;
+          padding: 0;
+          margin: 20px 0px;
+          height: 32px;
+
+          img {
+            height: 25px;
+            width: 28px;
+          }
+
+          h4 {
+            height: 32px;
+            padding-left: 12px;
+            margin-bottom: -16px;
+            color: #14161D;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+
+    .showImg {
+      display: flex;
+      align-items: flex-start;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.feature .controlPanel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 807px;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 80px 67px 0px;
+
+  .title {
+    color: #21242B;
+    font: 32px "Montserrat-Bold";
+    margin: 0px 0px 16px;
+  }
+
+  .subTitle {
+    color: #9AA1AE;
+    font: 20px "Montserrat-Medium", -apple-system
+  }
+
+  .tabs {
+    display: flex;
+    justify-content: center;
+    flex-wrap: nowrap;
+    height: 180px;
+    padding: 30px 0px 0px;
+
+    .tab {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 260px;
+
+      .active {
+        color: #e6a23c;
+      }
+
+      img {
+        width: 70px;
+        height: 70px;
+      }
+
+      h4 {
+        min-height: 31px;
+        min-width: 180px;
+        margin-top: 10px;
+        color: #14161D;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .swiper {
+    position: absolute;
+    top: 318px;
+    left: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0px 200px 0px;
+    animation: slideIn 0.5s forwards;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .description {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 20px 60px 20px 120px;
+
+      h3 {
+        height: 44px;
+        width: 423px;
+        font-size: 28px;
+        color: #14161D;
+        margin: 0px 0px 10px;
+      }
+
+      p {
+        width: 423px;
+        height: 98px;
+        color: #5A5A5A;
+      }
+    }
+  }
+
+}
+
+@keyframes slideIn {
+  from {
+    left: 100%;
+  }
+  to {
+    left: 0;
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Home.vue

@@ -0,0 +1,577 @@
+<template>
+  <div class="official">
+    <!-- 幻灯片部分/大图部分 -->
+    <div class="carousel" :style="{ backgroundImage: `url(${require('@/assets/images/feature.png')})` }">
+      <h1 class="title">{{ $t('official.让您的企业更快地走向全球') }}</h1>
+      <div class="center">
+        <el-button type="warning" class="startButton">{{ $t('official.免费开始') }}</el-button>
+      </div>
+      <p class="comment">{{ $t('official.1分钟内完成设置。无需信用卡。') }}</p>
+    </div>
+
+    <!-- 数字部分 -->
+    <div class="number" style="background-color: #f2f2f2">
+      <div v-for="(image, index) in images" :key="index" class="number-item">
+        <img
+            :src="image.src"
+            :alt="image.alt"
+            :style="{ animationPlayState: currentIndex === index ? 'running' : 'paused' }"
+        />
+        <div class="text-container">
+          <span class="text1">{{ image.value }}</span>
+          <h4 class="text2">{{ image.label }}</h4>
+        </div>
+      </div>
+    </div>
+    <!--    网络覆盖-->
+    <div class="netShow"></div>
+    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+      <input
+          type="radio"
+          class="btn-check"
+          name="btnradio"
+          id="btnradio1"
+          autocomplete="off"
+          v-model="selectedOption"
+          value="standardNet"
+      />
+      <label class="btn btn-outline-primary" for="btnradio1"
+             style="padding: 6px 12px">Standard network</label>
+
+      <input
+          type="radio"
+          class="btn-check"
+          name="btnradio"
+          id="btnradio2"
+          autocomplete="off"
+          v-model="selectedOption"
+          value="coreNet"
+      />
+      <label class="btn btn-outline-primary" for="btnradio2"
+             style="padding: 6px 12px">Core network</label>
+    </div>
+
+    <!-- 条件渲染 -->
+    <div v-if="selectedOption === 'standardNet'" class="standardNet">1</div>
+    <div v-if="selectedOption === 'coreNet'" class="coreNet">2</div>
+
+
+    <!--    产品优势-->
+    <div class="advantage">
+      <h3 class="modelTitle">Provide advantages for your website</h3>
+      <h4 class="modelSubTitle">Powerful functions , enhance your internet image</h4>
+      <div class="homeFunction">
+        <div v-for="(image, index) in advantageImages" :key="index">
+          <img :src="image.src" alt="" class="img" @mouseenter="moveImage(index)"
+               @mouseleave="resetImage(index)"
+               :ref="`image${index}`"/>
+          <b class="modelText1">{{ image.text1 }}</b>
+          <p class="modelTest2">{{ image.text2 }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!--    企业合作-->
+    <div class="corporateCp">
+      <h3 class="modelTitle">与行业领先企业同行，共同探索多方共赢的数据资产变现模式。</h3>
+      <h4 class="modelSubTitle">立足中国，为全球客户提供高品质服务</h4>
+      <div class="corporate">
+        <div v-for="i in 10" :key="i" :style="{ transform: `translateX(${currentPosition}px)` }">{{ i }}</div>
+      </div>
+    </div>
+
+    <!--    如何开始CDN-->
+    <div class="step">
+      <h3 class="stepTitle">How to complete CDN in five minutes</h3>
+      <h4 class="stepSubTitle">Simplify the configuration process,make CDN acceleration a simple matter</h4>
+      <div class="detailStep">
+        <div class="detail">
+          <div v-for="(step, index) in steps"
+               :key="step.label"
+               :class="{'step1': index === 0, 'step2': index === 1, 'step3': index === 2, 'active': currentStep === index}"
+               :style="currentStep === index ? activeStyle : {}"
+          >
+            <label :style="currentStep === index ? activeLabelStyle : {}">{{ step.label }}</label>
+            <span>{{ step.description }}</span>
+          </div>
+        </div>
+        <div>
+          <div v-for="(image,index) in stepImages"
+               :key="image"
+               class="stepShow"
+               :style="currentStep === index ? { display: 'block' } : {}"
+          >
+            <img :src=image.src
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import i18n from '../i18n.js'
+
+export default {
+  name: "OfficialWeb",
+  data() {
+    return {
+      menuItems: [
+        {label: "首页", path: "/"},
+        {label: "特点", path: "/a"},
+        {label: "网络", path: "/b"},
+        {label: "关于我们", path: "/contact"}
+      ],
+      languageIconSrc: require('@/assets/images/language.png'),
+      hoverLanguageIconSrc: require('@/assets/images/changeLanguage.png'),
+      languageTextColor: '#333',
+      hoverTextColor: 'rgb(255, 143, 44)',
+      isHovering: false,
+      images: [
+        {src: require('@/assets/images/number1.png'), alt: 'Number 1', value: "10000+", label: "Trusted By Costomers"},
+        {src: require('@/assets/images/number2.png'), alt: 'Number 2', value: "30Tbps+", label: "BandWidth Support"},
+        {src: require('@/assets/images/number3.png'), alt: 'Number 3', value: "30ms", label: "10ms Faster Than Akamai"},
+        {src: require('@/assets/images/number4.png'), alt: 'Number 4', value: "$0.005/GB", label: "Unique Unit Price"},
+      ],
+      currentIndex: 0, // 当前播放的图片索引
+      selectedOption: 'standardNet', // 默认选中 Standard network
+      advantage: require('@/assets/images/advantage1.png'),
+      advantageImages: [
+        {
+          src: require('@/assets/images/advantage1.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage2.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage3.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage4.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage5.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage6.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        }
+      ],
+      currentPosition: 0,
+      divWidth: 200,
+      maxMoves: 0,
+      autoCorporatePlayInterval: null, // 定时器
+      autoPlayInterval: null,
+      currentStep: 0, // 当前步骤索引
+      steps: [
+        {label: '1', description: 'Create a CDN account'},
+        {label: '2', description: 'Two step acceleration configuration'},
+        {label: '3', description: 'Visual data view and advanced settings'}
+      ],
+      activeStyle: {
+        color: 'rgb(255, 143, 44)',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+      },
+      activeLabelStyle: {
+        border: '3px solid rgb(255,143,44)',
+        textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',
+      },
+      stepImages: [
+        {src: require('@/assets/images/step1.png')},
+        {src: require('@/assets/images/step2.png')},
+        {src: require('@/assets/images/step3.png')}
+      ]
+
+    }
+  },
+  methods: {
+    toggleLanguageIcon(isHovering) {
+      this.isHovering = isHovering;
+      this.languageIconSrc = isHovering ? this.hoverLanguageIconSrc : require('@/assets/images/language.png');
+      this.languageTextColor = isHovering ? this.hoverTextColor : '#333';
+    },
+    // 切换到下一张图片
+    nextImage() {
+      this.currentIndex = (this.currentIndex + 1) % this.images.length;
+    },
+    nextCorporate() {
+      this.currentPosition -= this.divWidth;
+      // 如果移动超出范围，重置位置
+      if (this.currentPosition < -this.maxMoves * this.divWidth) {
+        this.currentPosition = 0;
+      }
+    },
+    // 开始自动播放
+    startAutoPlay() {
+      this.autoPlayInterval = setInterval(this.nextImage, 4000); // 每隔 4 秒切换一次
+    },
+    startAutoCorporatePlay() {
+      const corporate = this.$el.querySelector('.corporate');
+      this.divWidth = corporate.querySelector('div').clientWidth; // 动态获取 div 宽度
+      this.maxMoves = corporate.children.length - Math.floor(corporate.clientWidth / this.divWidth);
+      this.autoCorporatePlayInterval = setInterval(this.nextCorporate, 3000); // 每隔 3 秒切换一次
+    },
+    moveImage(index) {
+      this.$refs[`image${index}`][0].style.transform = 'translateY(-20px)';
+    },
+    resetImage(index) {
+      this.$refs[`image${index}`][0].style.transform = 'translateY(0)';
+    },
+    changeLangEn() {
+      i18n.global.locale = 'en';
+    },
+    changeLangZh() {
+      i18n.global.locale = 'zh';
+    },
+    playSteps() {
+      setInterval(() => {
+        if (this.currentStep < this.steps.length - 1) {
+          this.currentStep++;
+        } else {
+          this.currentStep = 0;
+        }
+      }, 3000); // 每3秒播放下一个步骤
+    },
+    navigateTo(path) {
+      const fullPath = window.location.origin + path; // 获取完整路径
+      window.open(fullPath, '_blank'); // 在新标签页中打开
+    }
+  },
+  mounted() {
+    this.startAutoPlay(); // 组件挂载后开始自动播放
+    this.startAutoCorporatePlay();
+    this.playSteps();
+  },
+  beforeUnmount() {
+    // 组件销毁前清除定时器
+    if (this.autoPlayInterval) {
+      clearInterval(this.autoPlayInterval);
+    }
+    if (this.autoCorporatePlayInterval) {
+      clearInterval(this.autoCorporatePlayInterval);
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// 媒体查询
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+// 幻灯片部分
+.official .carousel {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 895px;
+  padding: 200px 0px;
+  background: center no-repeat;
+  background-size: cover;
+
+  .title {
+    display: flex;
+    align-items: center;
+    color: #000000D9;
+    height: 115px;
+    margin-left: 120px;
+    padding: 10px 0px;
+    font: 36px "Montserrat-Bold";
+  }
+
+  .center {
+    height: 99px;
+    display: flex;
+    align-items: center;
+
+    .startButton {
+      display: flex;
+      align-items: center;
+      width: 224px;
+      height: 66px;
+      margin-left: 120px;
+      border-radius: 5px;
+      background: #FF8417;
+      color: #FFFFFF;
+      //text-shadow: white 5px 3px 3px;
+      font: 20px "Montserrat-Bold";
+    }
+  }
+
+  .comment {
+    height: 28px;
+    color: #9AA1AE;
+    font-size: 18px;
+    text-align: left;
+    margin-left: 120px;
+
+  }
+}
+
+// 数字部分
+.number {
+  height: 260px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 36px;
+
+  img {
+    width: 60px;
+    height: 60px;
+    animation: rotate 4s linear infinite;
+    animation-play-state: paused;
+  }
+
+  .number-item {
+    display: flex;
+    align-items: center;
+
+    .text-container {
+      display: flex;
+      justify-content: space-around;
+      flex-direction: column;
+
+      .text1 {
+        display: flex;
+        justify-content: flex-start;
+        font-size: 24px;
+        font-weight: bold;
+      }
+
+      .text2 {
+        display: flex;
+        justify-content: flex-start;
+        font-size: 16px;
+        font-weight: normal;
+      }
+    }
+
+  }
+}
+
+// 定义旋转动画
+@keyframes rotate {
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(90deg);
+  }
+  100% {
+    transform: rotateY(0deg);
+  }
+}
+
+
+.netShow {
+  min-height: 700px;
+  width: 100%;
+  background: white url("@/assets/images/network.png") no-repeat center;
+  align-items: center;
+}
+
+.standardNet {
+  background-color: pink;
+  min-height: 700px;
+}
+
+.coreNet {
+  background-color: red;
+  min-height: 400px;
+}
+
+.advantage {
+  min-height: 878px;
+  padding: 80px 24px 0px;
+
+  .modelTitle {
+    color: #21242B;
+    font: 32px "Montserrat-Bold";
+    margin: 0px 0px 16px;
+  }
+
+  .modelSubTitle {
+    color: #9AA1AE;
+    font: 20px "Montserrat-Medium", -apple-system
+  }
+
+  .homeFunction {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    min-height: 704px;
+    padding: 50px 0px 0px;
+
+    div {
+      margin: 0px 67px 50px;
+      width: 312px;
+      height: 286px;
+    }
+
+    .img {
+      display: flex;
+      flex-direction: column;
+      height: 148px;
+      line-height: 148px;
+      margin: 0 auto;
+      width: 175px;
+      transition: transform 0.3s ease;
+    }
+
+    .modelText1 {
+      display: flex;
+      flex-direction: column;
+      height: 38px;
+      width: 312px;
+      font: 24px "Montserrat-Medium", -apple-system;
+      margin: 0px 0px 6px;
+      color: #14161D;
+    }
+
+    .modelText2 {
+      display: flex;
+      flex-direction: column;
+      height: 56px;
+      width: 312px;
+      color: #FF8417;
+      font: 18px "Montserrat-Medium", -apple-system;
+    }
+  }
+}
+
+.corporateCp {
+  height: 472px;
+  background-color: #f2f2f2;
+  padding: 80px 24px 0px;
+
+  .modelTitle {
+    color: #21242B;
+    font: 32px Montserrat-Bold;
+    margin: 0px 0px 16px;
+  }
+
+  .modelSubTitle {
+    color: #9AA1AE;
+    font: 20px Montserrat-Medium, -apple-system
+  }
+
+  .corporate {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    white-space: nowrap;
+    width: 1200px;
+    overflow: hidden;
+    margin: 30px auto 0; // 上边距为 30px，左右边距为 auto，下边距为 0
+
+    div {
+      display: flex;
+      align-items: center;
+      background-color: pink;
+      justify-content: center;
+      width: 200px;
+      height: 150px;
+      flex-shrink: 0;
+      transition: transform 0.5s ease-in-out;
+    }
+  }
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  height: 712px;
+  background-color: white;
+  padding: 80px 0px 50px;
+
+  .stepTitle {
+    color: #21242B;
+    font: 32px Montserrat-Bold;
+    margin: 0px 0px 16px;
+  }
+
+  .stepSubTitle {
+    color: #9AA1AE;
+    font: 20px "Montserrat-Medium", -apple-system
+  }
+
+  .detailStep {
+    display: flex;
+    justify-content: space-around;
+    height: 520px;
+    padding: 35px 0px 0px 67px;
+
+    .detail {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      div {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 485.5px;
+        min-height: 121.45px;
+        background-color: #F5F5F5;
+        padding: 0px 0px 0px 66.5px;
+        margin-bottom: 20px;
+        border-radius: 10px;
+        font-weight: 1000;
+        //background: radial-gradient(circle,#DCDCDC, #F5F5F5);
+
+        label {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 57px;
+          height: 48px;
+          margin: 0 20px;
+          border: 3px solid black;
+          border-radius: 10px;
+          padding: 10px;
+          font: 32px "Montserrat-Bold";
+          box-sizing: border-box;
+        }
+
+        span {
+          display: flex;
+          justify-content: flex-start;
+          flex-wrap: wrap;
+          align-items: center;
+          width: 355.7px;
+          height: 28.5px;
+          text-align: left;
+          font: 20px "Montserrat-Bold";
+        }
+
+      }
+
+    }
+
+    .stepShow {
+      display: none;
+      align-items: center;
+    }
+  }
+}
+
+</style>

src/components/NetWork.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="network">
+    <!--    网络覆盖-->
+    <div class="netShow"></div>
+    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+      <input
+          type="radio"
+          class="btn-check"
+          name="btnradio"
+          id="btnradio1"
+          autocomplete="off"
+          v-model="selectedOption"
+          value="standardNet"
+      />
+      <label class="btn btn-outline-primary" for="btnradio1">Standard network</label>
+
+      <input
+          type="radio"
+          class="btn-check"
+          name="btnradio"
+          id="btnradio2"
+          autocomplete="off"
+          v-model="selectedOption"
+          value="coreNet"
+      />
+      <label class="btn btn-outline-primary" for="btnradio2">Core network</label>
+    </div>
+
+    <!-- 条件渲染 -->
+    <div v-if="selectedOption === 'standardNet'" class="standardNet">1</div>
+    <div v-if="selectedOption === 'coreNet'" class="coreNet">2</div>
+
+    <div class="compare">
+      <h3 class="title">Let's compare the difference between using Fastly and not using it</h3>
+      <div class="difference">
+        <div>
+          <div class="fast" :class="{ 'has-background': showFastBackground }">
+            <el-progress
+                :percentage="fastPercentage"
+                class="progress"
+                :class="{display: hideFast}"
+                color=#e6a23c>
+
+            </el-progress>
+          </div>
+          <h4 class="use">Acceleration with Fastly</h4>
+        </div>
+        <div>
+          <div class="slow" :class="{ 'has-background': showSlowBackground }">
+            <el-progress
+                :percentage="slowPercentage"
+                class="progress"
+                :class="{display:hideSlow}"
+                color=#D3D3D3>
+            </el-progress>
+          </div>
+          <h4 class="notUse">Without Fastly</h4>
+        </div>
+      </div>
+    </div>
+
+    <div class="advantage">
+      <h3 class="title">Comprehensive security solutions</h3>
+      <h4 class="subTitle">No additional fees,enjoy security protection</h4>
+      <div class="homeFunction">
+        <div v-for="(image, index) in advantageImages" :key="index">
+          <img :src="image.src" alt="" class="img" @mouseenter="moveImage(index)"
+               @mouseleave="resetImage(index)"
+               :ref="`image${index}`"/>
+          <b class="modelText1">{{ image.text1 }}</b>
+          <p class="modelTest2">{{ image.text2 }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NetWork",
+  data() {
+    return {
+      selectedOption: 'standardNet', // 默认选中 Standard network
+      fastPercentage: 0,
+      slowPercentage: 0,
+      showFastBackground: false,
+      showSlowBackground: false,
+      isProgressStarted: false, // 标记进度条是否已开始
+      hideFast: false,
+      hideSlow: false,
+      advantageImages: [
+        {
+          src: require('@/assets/images/advantage1.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage2.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage3.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage4.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage5.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        },
+        {
+          src: require('@/assets/images/advantage6.png'),
+          text1: 'Two-step Creation',
+          text2: 'Fast and convenient, saving tedious construction'
+        }
+      ],
+    };
+  },
+  mounted() {
+    this.observeCompareElement();
+  },
+  beforeUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  methods: {
+    startProgress() {
+      if (this.isProgressStarted) {
+        this.fastPercentage = 0;
+        this.slowPercentage = 0;
+        this.showFastBackground = false; // 移除背景图
+        this.showSlowBackground = false
+      }
+
+      this.isProgressStarted = true; // 标记进度条已开始
+
+      const fastInterval = setInterval(() => {
+        if (this.fastPercentage < 100) {
+          this.fastPercentage += 10;
+        } else {
+          clearInterval(fastInterval);
+          this.showFastBackground = true; // 添加背景图
+          this.hideFast = true
+        }
+      }, 100);
+
+      const slowInterval = setInterval(() => {
+        if (this.slowPercentage < 100) {
+          this.slowPercentage += 5;
+        } else {
+          clearInterval(slowInterval);
+          this.showSlowBackground = true;
+          this.hideSlow = true
+        }
+      }, 200);
+    },
+    observeCompareElement() {
+      const compareElement = this.$el.querySelector('.compare');
+      this.observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                this.startProgress();
+                this.observer.disconnect(); // 停止观察，确保只执行一次
+              }
+            });
+          },
+          {threshold: 0.5} // 当 50% 的元素进入视口时触发
+      );
+      this.observer.observe(compareElement);
+    },
+    moveImage(index) {
+      this.$refs[`image${index}`][0].style.transform = 'translateY(-20px)';
+    },
+    resetImage(index) {
+      this.$refs[`image${index}`][0].style.transform = 'translateY(0)';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.network {
+  .netShow {
+    height: 700px;
+    width: 100%;
+    background: white url("@/assets/images/network.png") no-repeat center;
+    align-items: center;
+  }
+
+  .standardNet {
+    background-color: pink;
+    height: 700px;
+  }
+
+  .coreNet {
+    background-color: red;
+    height: 400px;
+  }
+
+  .compare {
+    display: flex;
+    flex-direction: column;
+    min-height: 689px;
+    background-color: #f3f7fa;
+
+    .title {
+      margin: 0px 23px;
+      padding: 80px 24px;
+      color: #21242B;
+      font: 32px Montserrat-Bold;
+      margin: 0px 0px 16px;
+    }
+
+    .difference {
+      display: flex;
+      align-items: center;
+
+      div {
+        width: 50%;
+        margin: 0 auto;
+        border-radius: 10px;
+      }
+
+      .fast {
+        position: relative;
+        width: 660px;
+        height: 338px;
+        background-color: #f0f3f6;
+        box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.3);
+
+        &.has-background {
+          background-image: url("@/assets/images/success.png"); // 替换为你的背景图路径
+          background-size: cover;
+          background-position: center;
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+          }
+        }
+
+        .progress {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          margin: 119px 0px 100px 0px;
+          color: #e6a23c;
+
+          &.display {
+            display: none;
+          }
+        }
+      }
+
+      .slow {
+        position: relative;
+        width: 660px;
+        height: 338px;
+        background-color: #f0f3f6;
+        box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.3);
+
+        &.has-background {
+          background-image: url("@/assets/images/failure.png"); // 替换为你的背景图路径
+          background-size: cover;
+          background-position: center;
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+          }
+        }
+
+        .progress {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          margin: 119px 0px 100px 0px;
+
+          &.display {
+            display: none;
+          }
+        }
+      }
+
+      .use {
+        margin-top: 20px;
+        color: #ff9536;
+        font-size: 22px;
+        font-weight: bold;
+      }
+
+      .notUse {
+        margin-top: 20px;
+        color: #9aa1ae;
+        font-size: 22px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .advantage {
+    min-height: 700px;
+    padding: 80px 24px 0px;
+    background-color: #f3f7fa;
+
+    .title {
+      color: #21242B;
+      font: 32px "Montserrat-Bold";
+      margin: 0px 0px 16px;
+    }
+
+    .subTitle {
+      color: #9AA1AE;
+      font: 20px "Montserrat-Medium", -apple-system
+    }
+
+    .homeFunction {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      min-height: 704px;
+      padding: 50px 0px 0px;
+
+      div {
+        margin: 0px 67px 50px;
+        width: 312px;
+        height: 286px;
+      }
+
+      .img {
+        display: flex;
+        flex-direction: column;
+        height: 148px;
+        line-height: 148px;
+        margin: 0 auto;
+        width: 175px;
+        transition: transform 0.3s ease;
+      }
+
+      .modelText1 {
+        display: flex;
+        flex-direction: column;
+        height: 38px;
+        width: 312px;
+        font: 24px "Montserrat-Medium", -apple-system;
+        margin: 0px 0px 6px;
+        color: #14161D;
+      }
+
+      .modelText2 {
+        display: flex;
+        flex-direction: column;
+        height: 56px;
+        width: 312px;
+        color: #FF8417;
+        font: 18px "Montserrat-Medium", -apple-system;
+      }
+    }
+  }
+}
+</style>

src/components/PageBottom.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="bottom">
+    <div class="link">
+      <div>
+        <img :src="require('@/assets/images/fasten.png')" alt="Logo" class="logo-icon">
+        <h3 class="logo-text">{{ $t('official.上海沄淇科技有限公司') }}</h3>
+      </div>
+      <div class="function">
+        <h4>Products</h4>
+        <table>
+          <tr>
+            <td><a href="#">Features</a></td>
+          </tr>
+          <tr>
+            <td><a href="#">NetWork</a></td>
+          </tr>
+          <tr>
+            <td><a href="#">Pricing</a></td>
+          </tr>
+        </table>
+      </div>
+      <div class="function">
+        <h4>Company</h4>
+        <table>
+          <tr>
+            <td><a href="#">About Us</a></td>
+          </tr>
+          <tr>
+            <td><a href="#">Document</a></td>
+          </tr>
+        </table>
+      </div>
+      <div class="function">
+        <h4>Legal</h4>
+        <table>
+          <tr>
+            <td><a href="#">Terms Of Service</a></td>
+          </tr>
+          <tr>
+            <td><a href="#">Privacy Policy</a></td>
+          </tr>
+        </table>
+      </div>
+      <div class="function">
+        <h4>Contact with us</h4>
+        <table>
+          <tr>
+            <td><a href="#">support@lightcdn.com</a></td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="copyright">©2025 LightCDN inc.All rights reserved.</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PageBottom"
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.bottom {
+  position: relative;
+  height: 482px;
+
+  .link {
+    position: absolute;
+    top: 55px;
+    display: flex;
+    height: 401px;
+    margin: 0px 55px;
+    padding: 0px 24px;
+
+    div {
+      display: flex;
+      justify-content: flex-start;
+      padding-left: 20px;
+      width: 248px;
+      height: 243px;
+    }
+
+    div:nth-child(1) {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      padding-left: 0px;
+      padding-top: 30px;
+
+      .logo-icon {
+        height: 44px;
+        width: 46px;
+      }
+
+      .logo-text {
+        font-size: 18px;
+        font-weight: bold;
+        margin-left: 10px;
+        color: #333;
+      }
+    }
+
+    .function {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      padding-top: 30px;
+
+      h4 {
+        font: 18px "Montserrat-Bold";
+        color: #21242B;
+        font-weight: bold;
+      }
+
+      td {
+        padding-top: 30px;
+      }
+
+      a {
+        font: 16px "Montserrat-Medium";
+        color: #21242B;
+        text-decoration: none;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .copyright {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    margin-left: -172px;
+    color: #777777;
+  }
+}
+</style>

src/components/PageHeader.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="header">
+    <!--logo部分-->
+    <div class="logo-content">
+      <img :src="require('@/assets/images/fasten.png')" alt="Logo" class="logo-icon">
+      <h3 class="logo-text">{{ $t('official.上海沄淇科技有限公司') }}</h3>
+    </div>
+
+    <!-- 菜单部分 -->
+    <div class="header-container">
+      <ul class="menu">
+        <li v-for="(item, index) in menuItems"
+            :key="index"
+            class="menu-item"
+            :class="{ active: activeIndex === index }">
+          <a @click="handleClick(index, item.path)">{{ item.label }}</a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 右侧功能区 -->
+    <div class="header-right">
+      <div class="language-selector" @mouseenter="toggleLanguageIcon(true)"
+           @mouseleave="toggleLanguageIcon(false)">
+        <el-dropdown>
+          <div class="language-content">
+            <img
+                :src="languageIconSrc"
+                alt="Language"
+                class="language-icon">
+            <h3
+                :style="{ color: languageTextColor }"
+                class="language-text">
+              {{ $t('official.语言') }}</h3>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item class="dropdown-item" @click="changeLangEn">{{
+                  $t('official.English')
+                }}
+              </el-dropdown-item>
+              <el-dropdown-item class="dropdown-item" @click="changeLangZh">{{
+                  $t('official.简体中文')
+                }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <div class="login">
+        <a href="javascript:" class="login-link">{{ $t('official.登录') }}</a>
+        <el-button type="warning" class="button">{{ $t('official.注册') }}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menuItems: [
+        {label: "首页", path: "/"},
+        {label: "特点", path: "/feature"},
+        {label: "网络", path: "/network"},
+        {label: "关于我们", path: "/about"}
+      ],
+      activeIndex: 0,
+      languageIconSrc: require('@/assets/images/language.png'),
+      hoverLanguageIconSrc: require('@/assets/images/changeLanguage.png'),
+      languageTextColor: '#333',
+      hoverTextColor: 'rgb(255, 143, 44)',
+      isHovering: false,
+    };
+  },
+  methods: {
+    toggleLanguageIcon(isHovering) {
+      this.isHovering = isHovering;
+      this.languageIconSrc = isHovering ? this.hoverLanguageIconSrc : require('@/assets/images/language.png');
+      this.languageTextColor = isHovering ? this.hoverTextColor : '#333';
+    },
+    changeLangEn() {
+      this.$i18n.locale = 'en';
+    },
+    changeLangZh() {
+      this.$i18n.locale = 'zh';
+    },
+    handleClick(index, path) {
+      this.activeIndex = index; // 更新选中的索引
+      localStorage.setItem("activeIndex", index);
+      this.navigateTo(path);
+    },
+    navigateTo(path) {
+      // this.$router.push(path);
+      window.location.href = path;
+    }
+  },
+  mounted() {
+    // 页面加载时，从 localStorage 恢复高亮状态
+    const savedIndex = localStorage.getItem("activeIndex");
+    if (savedIndex !== null) {
+      this.activeIndex = parseInt(savedIndex, 10);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// 媒体查询
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.header {
+  position: fixed !important;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 104px;
+  display: flex;
+  justify-content: space-between;
+
+  padding: 0 30px;
+  overflow-x: auto;
+  z-index: 1000;
+  background-color: white;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
+  .logo-content {
+    display: flex;
+    align-items: center;
+
+    .logo-icon {
+      height: 44px;
+      width: 46px;
+    }
+
+    .logo-text {
+      font-size: 18px;
+      font-weight: bold;
+      margin-left: 10px;
+      color: #333;
+    }
+
+    width: 250px;
+  }
+
+  // 菜单部分
+  .header-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    padding: 0 20px;
+
+    .menu {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      list-style: none;
+      cursor: pointer;
+      justify-content: space-around;
+
+      .menu-item {
+        flex-grow: 1;
+        cursor: pointer;
+        transition: background-color 0.3s, color 0.3s;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        outline: none;
+
+        &:hover {
+          background-color: #f2f2f2;
+          color: rgb(255, 143, 44);
+        }
+
+        a {
+          text-decoration: none;
+          color: inherit;
+        }
+      }
+
+      .active {
+        background-color: #f2f2f2;
+        color: rgb(255, 143, 44);
+
+        a {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  // 右侧部分
+  .header-right {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 20px;
+    padding-right: 20px;
+
+    .language-selector {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      transition: color 0.3s;
+      padding: 10px;
+
+      .language-content {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        outline: none;
+
+        &:focus {
+          outline: none;
+        }
+
+        .language-icon {
+          width: 18px;
+          height: 16px;
+        }
+
+        .language-text {
+          font-size: 14px;
+          font-weight: 400;
+          color: #333;
+          transition: color 0.3s;
+        }
+      }
+    }
+
+    .login {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      .login-link {
+        margin: 0px 5px;
+        padding: 10px 10px;
+        text-decoration: none;
+        font-size: 14px;
+        color: #333;
+        transition: color 0.3s;
+
+        &:hover {
+          color: rgb(255, 143, 44);
+        }
+      }
+
+      .button {
+        width: 96px;
+        height: 40px;
+        margin: 0px 5px;
+        padding: 10px 10px;
+        font-size: 16px;
+        border-radius: 4px;
+        background-color: rgb(255, 143, 44);
+        transition: background-color 0.3s;
+
+        &:hover {
+          background-color: rgb(255, 128, 0);
+        }
+      }
+    }
+  }
+}
+
+//下拉框变色
+:deep(.dropdown-item.el-dropdown-menu__item) {
+  width: 80px;
+  transition: background-color 0.5s, color 0.5s;
+
+  &:hover {
+    background-color: rgb(255, 143, 44);
+    color: white;
+  }
+}
+</style>

src/components/Start.vue

@@ -0,0 +1,57 @@
+<template>
+  <!--    开始-->
+  <div class="homeStart">
+    <h2 class="modelTitle">Southeast Asia/Africa/Middle East,with nodes in all five continents</h2>
+    <p class="modelSubTitle">Enhance your online influence and surpass your competitiors</p>
+    <el-button class="start">START!!</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: "Start"
+}
+</script>
+
+<style lang="scss" scoped>
+.homeStart {
+  height: 280px;
+  background-color: #ff902d;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .modelTitle {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 48px;
+    color: #FFFFFF;
+    font: 32px "JetBrains Mono ExtraBold";
+    margin: 10px 0px 16px;
+  }
+
+  .modelSubTitle {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    height: 22px;
+    color: #FFFFFF;
+    font: 14px "JetBrains Mono ExtraBold";
+    margin: -5px 0px 15px;
+  }
+
+  .start {
+    height: 66px;
+    width: 262px;
+    color: #D75A00;
+    font: 24px "Montserrat-Reguar";
+    margin: 0px auto;
+    padding: 6px 16px;
+  }
+}
+</style>

src/i18n.js

@@ -0,0 +1,14 @@
+import { createI18n } from 'vue-i18n';
+import en from '@/locales/en';
+import zh from '@/locales/zh';
+
+const i18n = createI18n({
+    locale: navigator.language.slice(0, 2) || 'zh', // 默认语言
+    fallbackLocale: 'zh', // 回退语言
+    messages: {
+        en: en,
+        zh: zh,
+    },
+});
+
+export default i18n;

src/locales/en.js

@@ -0,0 +1,16 @@
+export default {
+    official:{
+        "上海沄淇科技有限公司":"miraclecloud",
+        "登录":"login",
+        "注册":"enroll",
+        "简体中文":"Chinese Simplified",
+        "语言":"language",
+        "English":"English",
+        "让您的企业更快地走向全球":"Let Your Business Reach Global Faster",
+        "免费开始":"Get Started Free",
+        "1分钟内完成设置。无需信用卡。":"Set-up in 1 minutes. No Credit Card required."
+    },
+    about:{
+        "关于我们":"About Us"
+    }
+}

src/locales/zh.js

@@ -0,0 +1,16 @@
+export default {
+    official:{
+        "上海沄淇科技有限公司":"上海沄淇科技有限公司",
+        "登录":"登录",
+        "注册":"注册",
+        "简体中文":"简体中文",
+        "English":"English",
+        "语言":"语言",
+        "让您的企业更快地走向全球":"让您的企业更快地走向全球",
+        "免费开始":"免费开始",
+        "1分钟内完成设置。无需信用卡。":"1分钟内完成设置。无需信用卡。"
+    },
+    about:{
+        "关于我们":"关于我们"
+    }
+}

src/main.js

@@ -1,4 +1,28 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
+import i18n from '@/i18n';
+import ElementPlus from 'element-plus';
+import { BootstrapVueNext } from 'bootstrap-vue-next';
+import 'element-ui/lib/theme-chalk/index.css';
+import 'element-plus/dist/index.css';
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import router from "./router/index";
+import VueHorizontalTimeline from 'vue-horizontal-timeline';
 
-createApp(App).mount('#app')
+const app = createApp(App);
+
+// 引入Google Fonts
+const link = document.createElement('link');
+link.href = 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap';
+link.rel = 'stylesheet';
+document.head.appendChild(link);
+
+// 使用插件
+app.use(ElementPlus);
+app.use(i18n);
+app.use(BootstrapVueNext);
+app.use(router)
+app.use(VueHorizontalTimeline)
+// 挂载应用
+app.mount('#app');

src/router/index.js

@@ -0,0 +1,55 @@
+// router/index.js
+import {createRouter, createWebHistory} from 'vue-router';
+import Home from '@/components/Home';
+import About from '@/components/About';
+import NetWork from '@/components/NetWork';
+import Features from "@/components/Features";
+
+const routes = [
+    {
+        path: '/',
+        component: Home,
+        // meta: {reload: true}
+    },
+    {
+        path: '/about',
+        component: About,
+        // meta: {reload: true}
+    },
+    {
+        path: '/network',
+        component: NetWork,
+        // meta: {reload: true}
+    },
+    {
+        path: '/feature',
+        component: Features,
+        // meta: {reload: true}
+
+    },
+];
+
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+
+// // 监听路由变化
+// router.beforeEach((to, from, next) => {
+//     if (to.meta.reload) {
+//         if (!sessionStorage.getItem('isReloading')) {
+//             // 设置标记，表示正在刷新
+//             sessionStorage.setItem('isReloading', 'true');
+//             window.location.href = to.fullPath; // 强制刷新
+//         } else {
+//             // 清除标记，避免下次刷新
+//             sessionStorage.removeItem('isReloading');
+//             next();
+//         }
+//     } else {
+//         next();
+//     }
+// });
+export default router;