init

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

assets/CSS/styles.css

@@ -0,0 +1,23 @@
+:root {
+  --footer-bg-color: #ffffff;
+  --footer-text-color: #000;
+  --footer-padding: 1rem;
+  --footer-link-color: #ff6702;
+  --font-size-title: clamp(5rem, 10vw, 15rem);
+  --font-size-subtitle: clamp(1.5rem, 6vw, 4rem); /* 初始较大，逐步缩小 */
+  --font-size-subtitle2: clamp(2.5rem, 6vw, 6rem); /* 初始较大，逐步缩小 */
+  --font-size-paragraph: clamp(1rem, 3vw, 1.2rem); /* 初始较大，逐步缩小 */
+  --footer-size-paragraph: clamp(0.6rem, 1vw, 1.2rem);
+  --button-font-size: clamp(1rem, 2vw, 1.2rem); /* 初始较大，逐步缩小 */
+  --min-width-leftBox: 50%;
+  --max-width-leftBox: 100%;
+  --min-width-rightBox: 0%;
+  --max-width-rightBox: 50%;
+  --dynamic-width-leftBox: clamp(var(--min-width-leftBox), 50vw, var(--max-width-leftBox));
+  --dynamic-width-rightBox: clamp(var(--min-width-rightBox), 50vw, var(--max-width-rightBox));
+
+  --font-size-title2: clamp(0.5rem, 5vw, 2rem); /* 动态计算标题的字体大小 */
+  --font-size-subtitle3: clamp(0.3rem, 3vw, 1.3rem); /* 动态计算副标题的字体大小 */
+  --font-size-paragraph2: clamp(0.2rem, 1vw, 1.25rem); /* 动态计算段落的字体大小 */
+  --font-size-title3: clamp(1.7rem, 5vw, 2rem)
+}

components/FooterMenu.vue

@@ -0,0 +1,353 @@
+<template>
+  <div>
+    <div class="footer">
+      <div class="footer-top">
+        <div class="footer-top-left">
+          <div class="footer-top-left-logo"><img src="../assets/logo2.png">
+            <div class="footer-logo">Buddy’s Cloud</div>
+          </div>
+          <p>不只是您的AWS云服务代理商， 更是您云上旅程的可靠伙伴</p>
+          <p>Trusted AWS partners on the cloud, Tailor-made AWS cloud solutions</p>
+        </div>
+        <div class="footer-top-right">
+          <ul class="footer-top-right-ul">
+            <li class="title">服务器类型</li>
+            <li>
+              <router-link to="/contactUs">大带宽服务器</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">轻量云服务器</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">站群服务器</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">高防服务器</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">ec2服务器</router-link>
+            </li>
+          </ul>
+          <ul class="footer-top-right-ul">
+            <li class="title">网络</li>
+            <li>
+              <router-link to="/contactUs">CDN</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">高防盾</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">跨境数据传输</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">全球骨干网</router-link>
+            </li>
+          </ul>
+          <ul class="footer-top-right-ul">
+            <li class="title">服务</li>
+            <li>
+              <router-link to="/contactUs">账户开通</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">账单代付</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">账户解锁</router-link>
+            </li>
+          </ul>
+          <ul>
+            <li class="title2" style="border-bottom: 2px solid white;margin-top: 10px">
+              关于我们
+            </li>
+            <li>
+              <router-link to="/contactUs">新闻资讯</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">站点地图</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">联系我们</router-link>
+            </li>
+          </ul>
+          <ul>
+            <li class="title2 display-none" style="border-bottom: 2px solid white;margin-top: 10px"></li>
+            <li>
+              <router-link to="/contactUs">博客</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">隐私政策</router-link>
+            </li>
+            <li>
+              <router-link to="/contactUs">新闻稿</router-link>
+            </li>
+          </ul>
+        </div>
+
+      </div>
+      <div class="footer-bottom">
+        <div class="footer-social">
+          <a :href="contactLinks.telegram" target="_blank">
+            <img src="../assets/icon/Send.png" alt="telegram"/>
+          </a>
+          <a :href="contactLinks.phone" target="_blank">
+            <img src="../assets/icon/Phone.png" alt="phone"/>
+          </a>
+          <a :href="contactLinks.wechat" target="_blank">
+            <img src="../assets/icon/Wexin.png" alt="wechat"/>
+          </a>
+          <a :href="contactLinks.facebook" target="_blank">
+            <img src="../assets/icon/Facebook.png" alt="facebook"/>
+          </a>
+          <a :href="contactLinks.email" target="_blank">
+            <img src="../assets/icon/Email.png" alt="email"/>
+          </a>
+        </div>
+      </div>
+
+    </div>
+    <div class="footer2">
+      <p>
+        <router-link to="/contactUs">隐私</router-link>
+        |
+        <router-link to="/contactUs">网站条款</router-link>
+        |
+        <router-link to="/contactUs">Cookie 首选项</router-link>
+        |
+        &copy; 2022 Raylinx Inc. 或其附属公司. 保留所有权利.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {contactLinks} from "../static/js/contact_link.js";
+import '../assets/CSS/styles.css';
+export default {
+  computed: {
+    contactLinks() {
+      return contactLinks
+    }
+  },
+  setup() {
+
+
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.footer {
+  background-color: #ff6702;
+  color: white;
+  padding: 3rem 5%;
+}
+
+.footer-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.footer-top-left {
+  width: 30%;
+}
+
+.footer-top-left-logo {
+  display: flex;
+  align-items: flex-end;
+}
+
+.footer-logo {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+
+.footer-top-right {
+  display: flex;
+  justify-content: left;
+  width: 60%;
+}
+
+.footer-top-right ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.footer-top-right-ul {
+  margin-right: clamp(1rem, 8rem, 8rem);
+  padding-top: 2%;
+}
+
+.footer-top-right li.title {
+  height: 30px;
+  font-size: clamp(0.2rem, 1vw, 1.3rem);
+  color: #ffffff;
+  margin-top: 6%;
+}
+
+.footer-top-right li.title2 {
+  height: 40px;
+  font-size: clamp(0.2rem, 1vw, 1.3rem);
+  color: #ffffff;
+  margin-top: 6%;
+}
+
+.footer-top-right li {
+  font-size: clamp(0.2rem, 1vw, 1rem);;
+  margin-bottom: 1rem;
+  color: rgba(255, 255, 255, 0.76);
+}
+
+.footer-top-right li a {
+  font-size: clamp(0.2rem, 1vw, 1rem);;
+  margin-bottom: 1rem;
+  color: rgba(255, 255, 255, 0.76);
+}
+
+.footer-bottom {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.footer-social img {
+  width: 50px;
+  height: 50px;
+  margin-right: 20px;
+}
+
+/* Footer Section */
+.footer2 {
+  background-color: var(--footer-bg-color);
+  color: #777777;
+  text-align: center;
+  font-size: var(--footer-size-paragraph); /* 动态调整字体大小 */
+  bottom: 0;
+  width: 100%;
+  display: flex; /* 添加 flex 布局 */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  height: auto; /* 如果没有固定高度，允许内容根据内容自动调整 */
+}
+
+.footer2 p {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--footer-size-paragraph);
+}
+
+.footer2 a {
+  color: #777777;
+  text-decoration: none;
+  margin: 0 0.5rem;
+  font-size: var(--footer-size-paragraph);
+}
+
+.footer2 a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 800px) {
+  .footer {
+    background-color: #ff6702;
+    color: white;
+    padding: 0;
+  }
+
+  .footer-top {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  .footer-top-left {
+    width: 100%;
+    margin: 5% 0 3% 0;
+    border-bottom: 1px solid;
+    padding-bottom: 2%;
+  }
+
+  .footer-logo {
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .footer-top-left-logo img {
+    width: 140px;
+    height: 88px;
+  }
+
+  .footer-top-left p {
+    font-size: 0.9rem;
+    margin: 0;
+    color: rgba(255, 255, 255, 0.76);
+  }
+
+  .footer-top-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    width: 100%;
+  }
+
+  .footer-top-right li.title {
+    height: auto;
+    font-size: max(1.2rem, min(1vw, 1.3rem));
+    color: #ffffff;
+    margin-top: 0;
+    width: 100%;
+    display: block;
+  }
+
+  .footer-top-right li.title2 {
+    height: auto;
+    font-size: max(1.2rem, min(1vw, 1.3rem));
+    color: #ffffff;
+    margin-top: 0;
+    width: 20%;
+    display: block;
+  }
+
+  .footer-top-right ul {
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  .footer-top-right-ul li {
+    display: inline-block;
+  }
+
+  .footer-top-right li a {
+    font-size: max(1rem, min(1vw, 1rem));
+    margin-bottom: 0;
+  }
+
+  .footer-top-right ul li {
+    display: inline-block;
+  }
+
+  .display-none {
+    display: none !important;
+  }
+
+  .footer-bottom {
+    border-top: 1px solid #fff;
+    display: flex;
+    justify-content: center;
+    width: 90%;
+    margin: 0 auto;
+    padding: 2% 0;
+  }
+  .footer-social img{
+    width: 50px;
+    height: 50px;
+    margin-right: 0;
+  }
+}
+</style>

components/MenuClickButton.vue

@@ -0,0 +1,92 @@
+<template>
+<!--  <div @click="toggleMenu">-->
+    <label  class="burger" for="burger">
+      <input type="checkbox" id="burger" v-model="isMenuChecked" @change="toggleMenu">
+      <span></span>
+      <span></span>
+      <span></span>
+    </label>
+<!--  </div>-->
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "MenuClickButton",
+  computed: {
+    ...mapState({
+      isMenuChecked: (state) => state.isMenuChecked, // Get menu state from Vuex
+    }),
+  },
+  methods: {
+    toggleMenu() {
+      this.$emit('toggle'); // 触发父组件的 toggleMenu 方法
+    }
+  }
+}
+</script>
+
+<style scoped>
+.burger {
+  position: relative;
+  width: 45px;
+  height: 45px;
+  cursor: pointer;
+  display: block;
+  background: #ff6702;
+  border-radius: 50%;
+}
+
+.burger input {
+  display: none;
+}
+
+.burger span {
+  display: block;
+  position: absolute;
+  height: 5px;
+  width: 80%;
+  background: #ffffff;
+  border-radius: 9px;
+  opacity: 1;
+  left: 5px;
+  transform: rotate(0deg);
+  transition: .25s ease-in-out;
+}
+
+.burger span:nth-of-type(1) {
+  top: 20%;
+  transform-origin: left center;
+}
+
+.burger span:nth-of-type(2) {
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: left center;
+}
+
+.burger span:nth-of-type(3) {
+  top: 80%;
+  transform-origin: left center;
+  transform: translateY(-100%);
+}
+
+.burger input:checked ~ span:nth-of-type(1) {
+  transform: rotate(45deg);
+  top: 8px;
+  left: 10px;
+}
+
+.burger input:checked ~ span:nth-of-type(2) {
+  width: 0;
+  opacity: 0;
+}
+
+.burger input:checked ~ span:nth-of-type(3) {
+  transform: rotate(-45deg);
+  top: 33px;
+  left: 8px;
+}
+
+</style>

components/NavMenu.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="navbar">
+    <!-- Mobile view -->
+    <div v-if="isMobile" class="navbar-brand-drawer">
+      <div class="drawer-logo">
+        <img src="../assets/logo.png" alt="Logo" />
+      </div>
+      <div style="display: flex; justify-content: center; align-items: center;">
+        <div class="drawer-icons">
+          <a :href="contactLinks.telegram" target="_blank">
+          <img src="../assets/icon/tg.png" alt="Telegram" />
+          </a>
+        </div>
+        <div class="drawer-icons">
+          <a :href="contactLinks.phone" target="_blank">
+          <img src="../assets/icon/Phone2.png" alt="Phone" />
+          </a>
+        </div>
+        <div class="drawer-icons">
+          <a :href="contactLinks.email" target="_blank">
+          <img src="../assets/icon/Globe.png" alt="Globe" />
+          </a>
+        </div>
+        <MenuClickButton
+          class="MenuClickButton"
+          ref="menuButton"
+          @toggle="toggleMenu"
+          :burgerBackgroundColor="'#ff6702'"
+          :spanBackgroundColor="'#ffffff'"
+        />
+      </div>
+    </div>
+
+    <!-- Drawer Menu -->
+    <div v-if="isMenuChecked" class="drawer-menu" ref="drawerMenu">
+      <ul class="navbar-list2">
+        <nuxt-link to="/home">
+          <li>首页</li>
+        </nuxt-link>
+        <nuxt-link to="/calculatePrice">
+          <li>AWS价格计算</li>
+        </nuxt-link>
+        <nuxt-link to="/aboutUs">
+          <li>关于我们</li>
+        </nuxt-link>
+        <nuxt-link to="/contactUs">
+          <li>联系我们</li>
+        </nuxt-link>
+      </ul>
+      <div class="drawer-menu-icon">
+        <img src="../assets/icon/img.png" alt="Icon" />
+      </div>
+    </div>
+
+    <!-- Desktop Menu -->
+    <div v-else class="pc-menu">
+      <ul class="navbar-list">
+        <li><nuxt-link to="/home">首页</nuxt-link></li>
+        <li><nuxt-link to="/calculatePrice">AWS价格计算</nuxt-link></li>
+        <li><img src="../assets/logo.png" alt="Buddy.com" class="logo" /></li>
+        <li><nuxt-link to="/aboutUs">关于我们</nuxt-link></li>
+        <li><nuxt-link to="/contactUs">联系我们</nuxt-link></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuClickButton from "../components/MenuClickButton.vue";
+import { mapState, mapActions } from "vuex";
+import { contactLinks } from '../static/js/contact_link.js';
+
+export default {
+  components: {
+    MenuClickButton,
+  },
+  data() {
+    return {
+      isMobile: false, // Check if mobile
+      contactLinks,
+    };
+  },
+  computed: {
+    ...mapState({
+      isMenuChecked: (state) => state.isMenuChecked, // Get menu state from Vuex
+    }),
+  },
+  mounted() {
+    // Check if it's mobile
+    this.isMobile = window.innerWidth <= 800;
+    window.addEventListener("resize", this.handleResize); // Resize event listener
+    document.addEventListener("click", this.handleClickOutside); // Global click event listener
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.handleResize); // Clean up resize event listener
+    document.removeEventListener("click", this.handleClickOutside); // Clean up global click event listener
+  },
+  methods: {
+    ...mapActions(["toggleMenu"]), // Map Vuex action to toggle menu
+    handleResize() {
+      this.isMobile = window.innerWidth <= 800; // Update mobile state
+    },
+    handleClickOutside(event) {
+      const menu = document.querySelector('.drawer-menu');  // 直接选择 drawer-menu
+      const menuButton = document.querySelector('.MenuClickButton'); // 直接选择 MenuClickButton
+      if (menu && !menu.contains(event.target) && menuButton && !menuButton.contains(event.target)) {
+        this.$store.dispatch('toggleMenu'); // 关闭菜单
+      }
+    }
+  },
+};
+</script>
+
+<style scoped>
+.navbar {
+  border-bottom: 1px solid #ff6702;
+  padding: 0.3rem;
+}
+
+.navbar-list {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0 auto;
+}
+
+.navbar-list li {
+  margin: 0 26px;
+}
+
+.navbar-list a {
+  color: #ff6702;
+  text-decoration: none;
+  font-size: 15px;
+}
+
+.navbar-list a:hover {
+  text-decoration: none;
+  color: rgba(237, 97, 5, 0.7);
+}
+
+.logo {
+  width: 100px;
+  height: auto;
+}
+
+.pc-menu {
+  margin: 0 auto;
+}
+
+/* Drawer Menu Styles */
+.drawer-menu {
+  background-color: rgba(255, 255, 255, 0.8);
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  transition: all 0.2s;
+  border-top: 1.5px solid #ff6702;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+/* Mobile View */
+@media (max-width: 800px) {
+  .navbar-brand-drawer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .MenuClickButton {
+    float: right;
+  }
+
+  .navbar-list {
+    display: none; /* Hide desktop menu */
+  }
+
+  .navbar-list2 {
+    list-style-type: none;
+    padding: 4%;
+  }
+
+  .navbar-list2 li {
+    margin: 0 26px 10px 26px;
+    height: 50px;
+    border: 2px solid #ff6702;
+    border-radius: 5px;
+    line-height: 50px;
+    padding-left: 3%;
+    background: white;
+  }
+
+  .navbar-list2 a {
+    color: #ff6702;
+    text-decoration: none;
+    font-size: 15px;
+  }
+
+  .navbar-list2 a:hover {
+    text-decoration: none;
+    color: rgba(237, 97, 5, 0.7);
+  }
+
+  .drawer-menu-icon {
+    width: 100%;
+    height: 18px;
+    position: absolute;
+    top: 90%;
+    right: 1%;
+    border-bottom: 1px solid #ff6702;
+  }
+
+  .drawer-menu-icon img {
+    width: 36px;
+    height: 100%;
+    float: right;
+  }
+
+  .drawer-icons img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .drawer-logo img {
+    width: 100px;
+    height: auto;
+    margin-bottom: 10px;
+  }
+}
+</style>

nuxt.config.js

@@ -0,0 +1,43 @@
+export default {
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: 'buddy-nuxt-project',
+    htmlAttrs: {
+      lang: 'en'
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: '' },
+      { name: 'format-detection', content: 'telephone=no' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [
+  ],
+
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+  ],
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [
+  ],
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+    // https://go.nuxtjs.dev/bootstrap
+    'bootstrap-vue/nuxt',
+  ],
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+  }
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "buddy-nuxt-project",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "bootstrap": "^4.6.2",
+    "bootstrap-vue": "^2.22.0",
+    "core-js": "^3.25.3",
+    "nuxt": "^2.15.8",
+    "vue": "^2.7.10",
+    "vue-server-renderer": "^2.7.10",
+    "vue-template-compiler": "^2.7.10"
+  },
+  "devDependencies": {}
+}

pages/aboutUs.vue

@@ -0,0 +1,274 @@
+<template>
+  <div>
+    <NavMenu></NavMenu>
+    <div>
+      <div class="about-section">
+
+        <div class="about-content">
+          <div class="about-content-desc">
+            <h1 class="about-title">关于Buddy's Cloud</h1>
+            <span class="desc-title">定位:可信任的伙伴</span>
+            <p class="about-description-chinese">
+              在云计算的广阔海洋中，所有寻求合适云服务的企业和个人都需要一个可靠的伙伴，作为灯塔提供引导支持，Buddy’s Cloud
+              就像一个温暖的灯塔，我们不仅是云服务的代理商，更是寻求可用云服务的用户在数字世界中的忠实伙伴，我们一直在这里，不管您何时来访，都能找到我们的友谊，收获适合您的云服务。
+            </p>
+            <p class="about-description-english">
+              In the vast ocean of cloud computing, all businesses and individuals looking for the right cloud services
+              need a reliable partner to provide guidance as a beacon. Buddy's Cloud is like a warm beacon, we are not
+              only a reseller of cloud services, but also a user of reliable cloud services. We are always here to
+              continue our friendship and harvest whatever is right for you, no matter when you visit cloud services.
+            </p>
+          </div>
+          <div class="about-content2">
+            <div class="photo-left">
+<!--              <img src="../assets/back/ri2.jpg" alt="">-->
+            </div>
+            <div class="desc2-right">
+              <div class="about-text">
+                <h2>初试与展望</h2>
+                <p>Buddy's
+                  Cloud的创立来自于一个简单而质朴的想法:在技术的复杂世界里，每个人都需要一个可信赖的伙伴，一个一同成长的依靠。我们的创始人，一位资深的技术爱好者和行业分析师，在使用aws云服务的过程中发现，许多用户在选择适合的云服务时感到困惑和不安--不知道何种服务应该使用，何种代理可以信任。因此，他决定创建一个网站，作为永远可以信任的伙伴，帮助用户简化选择过程，提供永远可靠的服务，量身定制云解决方案。</p>
+              </div>
+
+
+              <div class="about-text">
+                <h2>品牌提升</h2>
+                <p>Buddy's
+                  Cloud的使命是成为用户在云服务海洋中的领航者和可信任的伙伴，我们致力于理解每位客户的独特需求，提供个性化的建议和支持，确保他们能够找到最适合自己的云服务，并随着客户一同成长。</p>
+              </div>
+
+
+              <div class="about-text">
+                <h2>个人化服务</h2>
+                <p>在Buddy's
+                  Cloud，我们相信没有一种云解决方案能够适合所有人，这就是为什么我们提供个性化的咨询服务，帮助客户了解他们的需求，并从众多云服务中选择最合适的。我们的服务不仅限于技术层面，更包括帮助客户理解云服务，助力他们的业务成长。</p>
+              </div>
+
+            </div>
+          </div>
+          <div class="about-content2">
+            <div class="desc2-right">
+              <div class="about-text">
+                <h2>持续的合作伙伴</h2>
+                <p>Buddy's
+                  Cloud的成功建立在与客户建立长期关系的基础上，我们视每一位客户为合作伙伴，与他们一起成长，共同面对技术挑战和市场变化。</p>
+              </div>
+
+
+              <div class="about-text">
+                <h2>未来愿景</h2>
+                <p>展望未来，Buddy's
+                  Cloud将继续作为云服务领域的领导者，不断创新和改进我我们将持续扩大我们的合作伙伴网络，为客户提供更多选择和更厂们的服务。泛的服务。</p>
+              </div>
+
+
+              <div class="about-text">
+                <h2>技术专长与人文关怀</h2>
+                <p>我们深知，技术的力量和意义在于其能够改善人们的生活，目Buddy's
+                  Cloud专注于将最新的云技术与对客户的深切关怀结合起来，我们的专家团队不仅拥有深厚的技术知识，更拥有倾听和理解客户需求的热情。</p>
+              </div>
+
+              <div class="about-text">
+                <h2>结语</h2>
+                <p>在Buddy's Cloud，我们不仅仅是你的云服务代理商，更是你数字旅程中的伙伴。<br>
+                  让我们一起在云计算的天空中翱翔，发现新的可能性，实现你的业务目标。</p>
+              </div>
+            </div>
+            <div class="photo-left2">
+            </div>
+          </div>
+          <div class="end-about">
+            <div>Buddy's Cloud - Your Partner in the cloud Journey.</div>
+            <div>你云中旅程的伙伴</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <FooterMenu></FooterMenu>
+  </div>
+</template>
+
+<script>
+import NavMenu from "../components/NavMenu.vue";
+import FooterMenu from "../components/FooterMenu.vue";
+
+export default {
+  components: {NavMenu, FooterMenu}
+}
+</script>
+
+<style scoped>
+.about-section {
+  font-family: Arial, sans-serif;
+  width: 80%;
+  margin: 0 auto;
+  padding: 5rem 0;
+}
+
+.desc-title {
+  color: #ff6702;
+  font-weight: bold;
+  font-size: clamp(1.1rem, 1.7vw, 5rem);
+}
+
+.about-title {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 5rem;
+  color: #ff6702;
+}
+
+.about-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  line-height: 1.6;
+  text-align: justify;
+}
+
+.about-description-chinese,
+.about-description-english {
+  font-size: 1.1rem;
+  margin: 1rem 0;
+}
+
+.about-description-chinese {
+  font-size: clamp(0.7rem, 1.1vw, 3rem);
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.about-description-english {
+  font-size: clamp(0.7rem, 1.1vw, 3rem);
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.about-content2 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 4rem;
+  align-items: stretch;
+  margin-top: 3rem;
+}
+
+.photo-left {
+  width: 30%;
+  height: auto;
+  background: url("../assets/back/ri2.jpg") no-repeat;
+  background-size: 100% 100%;
+}
+.photo-left2 {
+  width: 30%;
+  height: auto;
+  background: url("../assets/back/chengshi.jpg") no-repeat;
+  background-size: 100% 100%;
+}
+.photo-left img {
+  width: 100%;
+  height: 100%;
+}
+
+.desc2-right {
+  width: 80%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.about-text {
+  margin-top: 1rem;
+}
+
+.about-text h2 {
+  font-size: clamp(1.1rem, 1.7vw, 5rem);
+  color: #ff6702;
+  font-weight: bold;
+}
+
+.about-text p {
+  font-size: clamp(0.7rem, 1.1vw, 3rem);
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.end-about {
+  margin-top: 5rem;
+  width: 100%;
+  border-top: 2px solid #ff6702;
+  font-size: clamp(1.1rem, 1.7vw, 5rem);
+  font-weight: bold;
+  color: #ff6702;
+  text-align: center;
+}
+
+@media (max-width: 800px) {
+  .about-section{
+    width: 100%;
+    padding: 0;
+  }
+  .about-content2 {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    align-items: stretch;
+    margin-top: 1rem;
+
+  }
+
+  .about-title {
+    text-align: center;
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+    color: white;
+  }
+  .about-content-desc{
+    background: #ff6702;
+    color: white;
+    padding: 1rem;
+  }
+  .desc-title{
+    color:white;
+  }
+  .about-description-chinese{
+    color: white;
+  }
+  .about-description-english{
+    color: white;
+  }
+  .about-text{
+    margin-top: 0;
+  }
+  .about-text p{
+    margin-bottom: 0;
+  }
+  .about-content2{
+    padding:0 1rem;
+  }
+  .photo-left {
+    width: 50%;
+    height: auto;
+    background: url("../assets/back/ri2.jpg") no-repeat;
+    background-size: 200% 110%;
+    background-position: right center;
+  }
+  .photo-left2 {
+    width: 40%;
+    height: auto;
+    background: url("../assets/back/chengshi.jpg") no-repeat;
+    background-size: 200% 100%;
+  }
+  .end-about {
+    margin-top: 1rem;
+    width: 100%;
+    border-top: 2px solid #ff6702;
+    font-weight: bold;
+    color: #ff6702;
+    text-align: center;
+  }
+  .about-text h2{
+    margin: 0.5rem 0 0.2rem 0;
+  }
+}
+</style>

pages/calculatePrice.vue

@@ -0,0 +1,262 @@
+<!--价格计算page-->
+<template>
+  <div>
+    <NavMenu></NavMenu>
+    <div class="pricbackground">
+      <div class="pricbackground-top">
+        <div class="pricimgs-leftBox">
+        </div>
+        <div class="pricimgs-rightBox">
+          <div class="pricimgs-rightBox_padding_top">
+            <div class="pricimgs-rightBox-wh"><img src="../assets/icon/img_1.png"></div>
+            <div class="pricimgs-rightBox-subtitle">
+
+              <div>如何选择合适的配置</div>
+              <div>How to choose the right configuration</div>
+            </div>
+          </div>
+          <div class="pricimgs-rightBox-CloudMassage">
+            <div>我们不仅是AWS服务代理商，作为伙伴，我们还希望能帮助您理解云服务，助力您的业务</div>
+            <div>We are not only an AWS service reseller, but as a partner, we also want to helpyou understand cloud
+              services and help your business
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <div class="pricbackground-between">
+        <div class="pricbackground-between-jgpz"><span
+            class="pricbackground-between-jg">Buddy's Cloud价格: 官网价格x<span
+            class="pricbackground-between-jg-bl">96</span>%</span> <span class="pricbackground-between-pz"><a :href="contactLinks.PriceCalculator"
+                                                                                                              target="_blank">点击前往AWS官网查看配置 <svg
+            t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="4090" width="200" height="200"><path
+            d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
+            fill="#fff" p-id="4091"></path></svg></a></span>
+        </div>
+        <div class="pricbackground-between-kf"><img src="../assets/icon/Message.png" alt="zx"><a :href="contactLinks.PriceC_CustomerService"
+                                                                                                 target="_blank">价格详情咨询客服</a>
+        </div>
+      </div>
+
+    </div>
+    <FooterMenu></FooterMenu>
+  </div>
+</template>
+
+<script>
+import '../assets/CSS/styles.css';
+import NavMenu from "../components/NavMenu.vue";
+import FooterMenu from "../components/FooterMenu.vue";
+import { contactLinks } from '../static/js/contact_link.js';
+
+
+export default {
+  components: {NavMenu, FooterMenu},
+  setup() {
+    return {
+      contactLinks
+    }
+  }
+}
+</script>
+
+<style>
+.pricbackground {
+  width: 100%;
+  height: 80%;
+  background-color: #ff6702;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  z-index: 1;
+  border-bottom: 1px solid #ffffff;
+  padding-top: 5rem;
+}
+
+.pricbackground-top {
+  width: 80%;
+  height: 55%;
+  color: white;
+  margin: 0 auto;
+  display: flex;
+  justify-content: left;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.pricimgs-leftBox {
+  transition: width 0.5s ease; /* 平滑过渡 */
+  width: 40%;
+  height: 500px;
+  padding-right: 5%;
+  background: url("../assets/helloIMG/priceleft.jpg") no-repeat;
+  background-size: 90% 100%;
+}
+
+
+.pricimgs-rightBox {
+  transition: width 0.5s ease; /* 平滑过渡 */
+  width: 50%;
+  height: 100%;
+  z-index: 2;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  /* background-color: rgb(1, 7, 13); */
+}
+
+.pricimgs-rightBox-wh {
+  width: 100px;
+  height: 150px;
+}
+
+.pricimgs-rightBox-wh img {
+  width: 100%;
+  height: 100%;
+}
+
+.pricimgs-rightBox-subtitle {
+  font-size: clamp(1.2rem, 2vw, 2rem); /* 使用 clamp() 调整字体大小 */
+  font-weight: bold;
+  width: 100%;
+  margin-block: 10px;
+}
+
+.pricimgs-rightBox-CloudMassage {
+  font-size: clamp(0.9rem, 1.5vw, 1.5rem); /* 动态调整段落字体 */
+  font-weight: 400;
+  width: 100%;
+}
+
+.pricbackground-between {
+  width: 80%;
+  height: 20%;
+}
+
+.pricbackground-between-jgpz {
+  border-block-end-style: solid;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-top: 2%;
+}
+
+.pricbackground-between-jg {
+  font-size: clamp(1rem, 2vw, 2rem);
+}
+
+.pricbackground-between-jg-bl {
+  font-size: clamp(2rem, 3vw, 3rem);
+}
+
+.pricbackground-between-pz svg {
+  width: 25px;
+  height: 25px;
+  margin-bottom: 6px;
+}
+
+.pricbackground-between-pz {
+  font-size: max(0.7rem, min(1vw, 1.2rem));
+}
+
+.pricbackground-between-pz a {
+  font-size: max(0.7rem, min(1vw, 1.2rem));
+  color: white;
+}
+
+.pricbackground-between-kf {
+  font-size: var(--font-size-paragraph);
+  text-align: center;
+  margin: 20px;
+}
+
+.pricbackground-between-kf a {
+  font-size: var(--font-size-paragraph);
+  text-align: center;
+  margin: 20px;
+  color: white;
+}
+
+.pricbackground-between-kf img {
+  width: 5%;
+}
+
+@media (max-width: 800px) {
+  .pricbackground-top {
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  .pricbackground {
+    padding-top: 1rem;
+    border: none;
+  }
+
+  .pricimgs-leftBox {
+    width: 100%;
+    height: clamp(200px, 5vh, 400px);
+    padding: 0;
+    background: url("../assets/helloIMG/priceleft2.jpg") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .pricimgs-rightBox {
+    width: 100%;
+    border-bottom: 3px solid #ffffff;
+    border-right: 3px solid #ffffff;
+    border-left: 3px solid #ffffff;
+    padding: 1rem;
+  }
+
+  .pricimgs-rightBox_padding_top {
+    display: flex;
+    justify-content: left;
+    align-items: flex-end;
+  }
+  .pricimgs-rightBox-wh{
+    width: 90px;
+    height: 100px;
+  }
+  .pricimgs-rightBox-subtitle{
+    text-align: right;
+  }
+  .pricimgs-rightBox-CloudMassage{
+    text-align: center;
+    margin-top: 5%;
+    color: rgba(255, 255, 255, 0.84);
+  }
+  .pricbackground-between-jgpz {
+    border-bottom-style: solid;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 2%;
+    padding-bottom: 2%;
+  }
+  .pricbackground-between-pz a{
+    color: rgba(255, 255, 255, 0.8);
+  }
+  .pricbackground-between-pz a svg{
+    width: 18px;
+    height: 18px;
+    margin-bottom: 2px;
+  }
+  .pricbackground-between-pz a:hover{
+    text-decoration: none;
+  }
+  .pricbackground-between-kf{
+    margin: 6px;
+  }
+  .pricbackground-between-kf img {
+    width: 13%;
+  }
+  .pricbackground-between-kf a {
+    margin: 5px;
+  }
+}
+</style>

pages/contactUs.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <NavMenu v-if="isContactPage"></NavMenu>
+
+    <div class="contact-view">
+      <div class="contact-view-bg">
+        <div class="contact-form-container">
+          <div class="contact-title">
+            <span class="chinese-title">联系我们</span>
+            <span class="english-title">Send us a message</span>
+          </div>
+          <form action="https://formspree.io/f/mrbzdeeg" class="contact-form">
+            <div class="contact-form-group">
+              <label for="name">昵称 <span> Enter your name </span></label>
+              <input type="text" id="name"/>
+            </div>
+            <div class="contact-form-group">
+              <label for="email">邮箱 <span> Enter your email </span></label>
+              <input type="email" id="email"/>
+            </div>
+            <div class="contact-form-group">
+              <label for="message">留言 <span>Your message </span></label>
+              <textarea id="message"></textarea>
+            </div>
+            <button type="submit" class="submit-button">发送</button>
+          </form>
+          <p class="response-text">我们将尽快给您回复 We will respond as soon as possible</p>
+        </div>
+      </div>
+    </div>
+    <FooterMenu v-if="isContactPage"></FooterMenu>
+  </div>
+</template>
+
+<script>
+import NavMenu from "../components/NavMenu.vue";
+import FooterMenu from "../components/FooterMenu.vue";
+
+export default {
+  components: {
+    NavMenu,
+    FooterMenu
+  },
+  computed: {
+    // Use computed property to check if the current route is '/contactUs'
+    isContactPage() {
+      return this.$route.path === '/contactUs';
+    }
+  }
+};
+</script>
+
+<style scoped>
+.contact-view-bg {
+  width: 100%;
+  height: 100vh;
+  background: url("../assets/back/ri.jpg") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: left;
+  padding: 0 clamp(2rem, 10vw, 16rem);
+  align-items: center;
+}
+
+.contact-form-container {
+  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
+  padding: 40px;
+  width: 40%;
+  border-radius: 10px;
+}
+
+.contact-title {
+  text-align: left;
+  margin-bottom: 20px;
+}
+
+.chinese-title {
+  font-size: 1.8rem;
+  color: #ff6702;
+  display: block;
+}
+
+.english-title {
+  font-size: 1.2rem;
+  color: #ff6702;
+}
+
+.contact-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.contact-form-group {
+  margin-bottom: 20px;
+}
+
+.contact-form-group label {
+  font-size: 1.2rem;
+  color: #ff6702;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.contact-form-group label span {
+  font-size: 1rem;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.contact-form-group input,
+.contact-form-group textarea {
+  width: 100%;
+  padding: 10px;
+  font-size: 1rem;
+  border: 1px solid #ff6702;
+  border-radius: 5px;
+}
+
+.contact-form-group textarea {
+  height: 120px;
+}
+
+.contact-form-group input:focus,
+.contact-form-group textarea:focus {
+  border-color: #ff6702; /* 设置选中时的边框颜色 */
+  outline: none; /* 去除默认的聚焦框 */
+}
+
+.submit-button {
+  background-color: #ff6702;
+  color: white;
+  padding: 10px;
+  font-size: 1rem;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.submit-button:hover {
+  background-color: #e45a00;
+}
+
+.response-text {
+  text-align: center;
+  font-size: 1rem;
+  color: #333;
+  margin-top: 20px;
+}
+
+@media (max-width: 850px) {
+  .contact-view-bg {
+    background: url("../assets/back/ri2.jpg") no-repeat;
+    background-size: 100% 100%;
+    padding: 0;
+  }
+
+  .contact-form-container {
+    width: 90%;
+    margin: 0 auto;
+    height: 68%;
+  }
+}
+</style>

pages/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <div>
+    <!-- Banner Section -->
+    <div class="banner-view">
+      <div class="banner-view-leftBox">
+        <div class="banner-view-title">Buddy’S</div>
+        <div class="banner-view-CloudTitle">Buddy‘s Cloud</div>
+        <div class="banner-view-CloudMassage">Hey buddy!<br/>
+          Welcome back ,we have prepared a suitable AWS plan for you
+        </div>
+        <!--      <div class="banner-view-buttons">-->
+        <!--        <button>进入首页</button> <button>联系我们</button>-->
+        <!--      </div>-->
+      </div>
+      <div class="banner-view-rightBox">
+        <img src="../assets/helloIMG/StartHere.png" alt="buddy.com"/>
+      </div>
+    </div>
+
+    <!-- Welcome Message Section -->
+    <div class="welcomeMessage-view">
+      <div class="welcomeMessage-content">
+        <p class="welcomeMessage-content-title">Buddy’s Cloud</p>
+        <p class="welcomeMessage-content-text">More than just your AWS cloud service reseller, but also a reliable
+          partner for your cloud journey</p>
+        <div class="welcomeMessage-content-buttons">
+          <button @click="goToHomePage">进入首页</button>
+          <button @click="goToContactPage">联系我们</button>
+        </div>
+
+      </div>
+      <div class="footer">
+        <p>
+          <a href="#">隐私</a> |
+          <a href="#">网站条款</a> |
+          <a href="#">Cookie 首选项</a> |
+          &copy; 2022 Raylinx Inc. 或其附属公司. 保留所有权利.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import '../assets/CSS/styles.css';
+
+export default {
+  name: 'IndexPage',
+  methods: {
+    goToHomePage() {
+      this.$router.push(`/home`);
+    },
+    goToContactPage() {
+      this.$router.push(`/contactUs`);
+    }
+  }
+//   data() {
+//     return {
+//       showHomeAndroid: false,
+//       screenWidth: null,
+//     }
+//   },
+//   methods: {
+//     bodyScale() {
+//       var devicewidth = document.documentElement.clientWidth; // 获取当前分辨率下的可视区域宽度
+//       if(devicewidth <= 1600) {
+//         var scale = devicewidth / 1600; // 分母——设计稿的尺寸
+//         requestAnimationFrame(() => {
+//           document.body.style.zoom = scale; // 放大缩小相应倍数
+//         });
+//       }
+//     },
+//   },
+//
+//   mounted() {
+//     this.screenWidth = document.body.clientWidth; // 在客户端设置
+//     window.onresize = () => {
+//       setTimeout(() => {
+//         this.screenWidth = document.body.clientWidth;
+//       }, 0);  // 使用0延时将任务放入事件循环的尾部
+//     };
+//   },
+//
+//   watch: {
+//     screenWidth: {
+//       handler: function (val) {
+//         setTimeout(() => { // 使用setTimeout异步处理
+//           if (val >= 800) {
+//             this.bodyScale();
+//             this.showHomeAndroid = false;
+//             // console.log(this.showHomeAndroid);
+//           } else if (val < 800) {
+//             // this.bodyScale();
+//             this.showHomeAndroid = true;
+//             // console.log(this.showHomeAndroid);
+//           }
+//           // this.$forceUpdate();
+//         }, 0);
+//       },
+//       immediate: true,
+//       deep: true,
+//     },
+//   },
+}
+</script>
+
+<style scoped>
+
+
+/* Banner Section */
+.banner-view {
+  width: 100%;
+  height: 70vh;
+  background-color: #ff6702;
+  color: white;
+  padding: 0 5rem;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  z-index: 1;
+}
+
+.banner-view-rightBox {
+  width: var(--dynamic-width-rightBox); /* 使用 root 中的动态宽度 */
+  transition: width 0.5s ease; /* 平滑过渡 */
+  z-index: 2;
+}
+
+.banner-view-rightBox img {
+  width: 100%;
+  height: var(--dynamic-width-rightBox);
+  margin: 0 auto;
+}
+
+.banner-view-leftBox {
+  width: var(--dynamic-width-leftBox); /* 使用 root 中的动态宽度 */
+  transition: width 0.5s ease; /* 平滑过渡 */
+  position: absolute;
+  left: 5%;
+}
+
+.banner-view-title {
+  font-size: var(--font-size-title); /* 使用 clamp() 调整字体大小 */
+  font-weight: bold;
+}
+
+.banner-view-CloudTitle {
+  font-size: var(--font-size-subtitle); /* 动态调整字体大小 */
+  font-weight: 500;
+  margin-left: 10px;
+}
+
+.banner-view-CloudMassage {
+  font-size: var(--font-size-paragraph); /* 动态调整段落字体 */
+  font-weight: 400;
+  width: 60%;
+  margin-left: 10px;
+}
+
+.banner-view-buttons {
+  margin-left: 10px;
+  margin-top: 5%;
+}
+
+.banner-view-buttons button {
+  border-radius: 10px;
+  padding: 5px;
+  border: none;
+  color: #ff6702;
+  text-align: center;
+  width: 15%;
+  margin-right: 5%;
+  font-size: var(--button-font-size); /* 使用 clamp() 调整按钮字体 */
+}
+
+/* Welcome Message Section */
+.welcomeMessage-view {
+  width: 100%;
+  height: 30vh;
+  background-color: #ffffff;
+  color: #000;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.welcomeMessage-content {
+  font-size: var(--font-size-paragraph); /* 动态调整段落字体 */
+}
+
+.welcomeMessage-content-title {
+  font-size: var(--font-size-subtitle); /* 动态调整标题字体 */
+  font-weight: 500;
+  color: #ff6702;
+}
+
+.welcomeMessage-content-buttons {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  width: 40%;
+  padding: 0 2%;
+}
+
+.welcomeMessage-content-buttons button {
+  background-color: #ff6702;
+  text-align: center;
+  width: 50%;
+  border-radius: 10px;
+  padding: 5px;
+  border: none;
+  font-size: var(--button-font-size); /* 使用 clamp() 调整按钮字体 */
+  color: #fff;
+}
+
+/* Footer Section */
+.footer {
+  background-color: var(--footer-bg-color);
+  color: var(--footer-text-color);
+  text-align: center;
+  font-size: var(--footer-size-paragraph); /* 动态调整字体大小 */
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex; /* 添加 flex 布局 */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  height: auto; /* 如果没有固定高度，允许内容根据内容自动调整 */
+}
+
+.footer p {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--footer-size-paragraph);
+}
+
+.footer a {
+  color: var(--footer-link-color);
+  text-decoration: none;
+  margin: 0 0.5rem;
+  font-size: var(--footer-size-paragraph);
+}
+
+.footer a:hover {
+  text-decoration: underline;
+}
+
+/* 当页面宽度小于 800px 时，动态调整宽度 */
+@media (max-width: 800px) {
+  .banner-view {
+    display: block;
+    z-index: 1;
+    padding: 1rem;
+  }
+
+  .banner-view-leftBox {
+    width: 100%; /* 当宽度小于 800px 时，左边盒子宽度变为100% */
+    position: relative;
+  }
+
+  .banner-view-CloudMassage {
+    width: 90%;
+  }
+
+  .banner-view-rightBox {
+    width: 90%;
+    z-index: 2;
+    margin: 0 auto;
+  }
+
+  .welcomeMessage-content-buttons {
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    width: 50%;
+    padding: 0 2%;
+  }
+
+  .welcomeMessage-view {
+    width: 100%;
+    height: 25vh;
+    background-color: #ffffff;
+    color: #000;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+}
+</style>

static/js/contact_link.js

@@ -0,0 +1,18 @@
+// contact_link.js
+
+export const contactLinks = {
+  telegram: "https://t.me/your_telegram",
+  phone: "tel:+1234567890", // Replace with your phone number
+  wechat: "https://weixin.qq.com", // WeChat link
+  facebook: "https://www.facebook.com/yourpage", // Replace with your Facebook page URL
+  email: "mailto:someone@example.com", // Replace with your email address
+
+//   首页箭头按钮
+  Arrow:"https://t.me/your_telegram",
+//   首页“联系客服”按钮
+  CustomerService:"https://t.me/your_telegram",
+// 价格计算页面 "AWS官网"
+  PriceCalculator:"https://calculator.aws/",
+//   价格计算页面联系客服按钮
+  PriceC_CustomerService:"https://t.me/your_telegram"
+};

store/README.md

@@ -0,0 +1,10 @@
+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

store/index.js

@@ -0,0 +1,17 @@
+// store/index.js
+export const state = () => ({
+  isMenuChecked: false, // 记录菜单是否展开的状态
+});
+
+export const mutations = {
+  toggleMenu(state) {
+    state.isMenuChecked = !state.isMenuChecked;
+    console.log('state.isMenuChecked:', state.isMenuChecked);
+  }
+};
+
+export const actions = {
+  toggleMenu({ commit }) {
+    commit('toggleMenu'); // 调用 mutation 切换菜单状态
+  },
+};