raylinx/pages/about.vue

<template>
  <div>
    <div v-if="showHomeAndroid == false" class="aboutUsView">
      <div class="aboutUsView_title">关于我们 <span>About Raylinx</span></div>
      <div class="blue_bar"></div>
      <div class="aboutUsView_content">
        <div class="img_logo">
          <img src="@/assets/about/raylinx.logo.png" alt=""/>
        </div>
        <div class="desc">
          选择“Raylinx"作为网站名字，寓意着像射线一样直指问题核心，提供直接、明亮的指导和解决方案，同时“Linx"暗示着云(Cloud)和连接(Link)的结合。我们的宗旨是提供直指核心的AWS连接方案，管家级一站式上云服务，为您的业务保驾护航。
        </div>
      </div>
      <div class="aboutUsView_IMG">
        <div
          class="image-container"
          v-for="(item, i) in aboutUsView_IMG_List"
          :key="i"
          @mouseenter="expandImage(i)"
          @mouseleave="resetImages"
          :style="getContainerStyle(i)"
        >
          <img :src="item.Img" alt="Image" class="image"/>
        </div>
      </div>
      <div class="cantact">
        <div class="cantact_bar"></div>
        <div class="cantact_item">
          <div @mouseenter="ShowBOX(i.title)"
               @mouseleave="IsShowBOX(i.title)" v-for="i in cantact_Icon_List" class="contact_item_box">
            <a :href="i.url">
              <div style="width: 100%; height: 100%"><img :src="i.icon" alt=""/></div>
            </a>
            <div v-if="i.imgshow" class="IMGBOX">
              <img :src="i.img" alt="i.title">
            </div>
          </div>
        </div>
      </div>
      <div class="companyInfo">
        <div class="companyInfo_title">
          <span>Raylinx锐联国际</span>——直指核心的AWS连接方案，管家级一站式上云服务
        </div>
        <div class="companyInfo_content">
          <div class="companyInfo_content_mini1">
            <div class="title">Raylinx纪要</div>
            <div v-for="i in companyInfo_content_mini1_List" class="item">
              <div class="date">
                <span class="date_blue">{{ i.date }}</span>{{ i.date2 }}
              </div>
              <a :href="i.url" style="color: #333333"><div :class="{ desc: true, highlight: i.index === '1' }">
                {{ i.desc }}
              </div>
              </a>
            </div>
          </div>
          <div class="bar_black"></div>
          <div class="companyInfo_content_mini2">
            <div class="title">Raylinx与AWS</div>
            <div v-for="i in companyInfo_content_mini2_List" class="item">
              <div class="date">
                <span class="date_blue">{{ i.date }}</span>{{ i.date2 }}
              </div>
              <a :href="i.url" style="color: #333333"><div class="desc">{{ i.desc }}</div></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showHomeAndroid == true">
      <div class="about_banner">
        <div>选择“Raylinx”作为网站名字</div>
        <div>寓意着像射线一样直指问题核心</div>
        <div>提供直接、明亮的指导和解决方案</div>
        <div>同时“Linx”暗示着云(Cloud)和连接(Link)的结合</div>
        <div>我们的宗旨是提供直指核心的AWS连接方案</div>
        <div>管家级一站式上云服务</div>
        <div>为您的业务保驾护航</div>
      </div>
      <div class="advantage-module bg">
        <div class="module-section RightFloat">
          <div class="RightBorder">
            <h2>理想愿景</h2>
            <p>
              在不断发展的云计算领域，AWS一直是行业的领导者，提供了广泛的服务和解决方案，支持企业和个人用户实现他们的技术目标。然而，随着市场的扩张，众多用户对AWS的服务内容、优势及其应用方法仍缺乏足够的了解。raylinx看到了这一点，认为AWS应当成为所有用户都能享受的便利服务，决定创建一个专注于推广AWS云服务的网站，旨在通过Raylinx的服务将复杂的云服务内容简化，直指问题核心，让用户在我们的服务下轻松理解并利用AWS的强大功能。</p>
          </div>
        </div>

        <div class="module-section RightFloat MarginRight">
          <div class="LeftBorder">
            <h2>起点</h2>
            <p>
              故事始于两位AWVS认证专家，他们对云服务充满热情，认为每个企业和个人都应能够快捷访问并使用AWVS云服务，以提升业务效率和创新力。他们意识到市场上需要一种更友好、更直观的方式来普及AWVS的服务，于是决定创立一个云上管家平台-raylinx.com，在这里，客户能享受到管家一样的贴心服务，不仅可以学习各种云服务器知识，还有专业的团队沟通业务，解决技术问题。</p>
          </div>
        </div>

        <div class="module-section RightFloat MarginRight">
          <div class="LeftBorder">
            <h2>发展历程</h2>
            <p>
              开始时，raylinx.com只个简易的博客，分享关于AWS的基础教程和新闻动态。但随着时间推移它逐渐发展成为一个全方位的宣传平台，包括详细的服务介绍、案例研究、最佳实践、在线知识平台、以及个性化咨询服务。</p>
          </div>
        </div>
      </div>
      <div class="advantage-module bg2">
        <div class="module-section RightFloat">
          <div class="RightBorder">
            <h2>社区建设</h2>
            <p>
              网站迅速吸引了一批忠实的追随者，包括T专业人士、开发者和企业决策者，他们在这里学习如何优化他们的AWVS经验。rayinx.com还开设了在线论坛鼓励用户之间的交流，分享经验教训和成功案例。</p>
          </div>
        </div>

        <div class="module-section RightFloat MarginRight">
          <div class="LeftBorder">
            <h2>合作与扩展</h2>
            <p>
              随着网站影响力的增长，raylinx.com开始与AWS直接合作，提供特定的培训项目，并成为AWS官方认可的全球代理与
              合作伙伴。网站还与多家知名T服务商建立合作关系，共同举办线上和线下的研讨会和工作坊。</p>
          </div>
        </div>

      </div>
      <div class="advantage-module bg3">
        <div class="module-section RightFloat MarginRight">
          <div class="LeftBorder">
            <h2>未来展望</h2>
            <p>
              raylinx.com致力于成为AWS云服务的是首选平台不断更新和完善服务体系，给用户最全面最细致的云管家体验，并且利用AWS开发更多的网站功能适应快速变化的技术环境，未来，它还计划开发更多交互式学习工具和定制化解决方案，帮助各类用户最大化地利用云服务。</p>
          </div>
        </div>

        <div class="module-section RightFloat MarginRight">
          <div class="LeftBorder">
            <h2>核心价值</h2>
            <p>
              <span>简化复杂性:</span>通过生动的解释和示例，直指业务问题的核心，为客户寻找最适合的个性化云服务器组合。<br/>
              <span>管家服务:</span>通过细致贴心的服务，让客户最大化利用AWVS的功能，享受云服务的便利。<br/>
              <span>促进学习:</span>提供各种学习材料和交流平台，让用户理解云服务，理解AWS，从而享受它的便利。<br/>
            </p>
          </div>
        </div>

        <div class="module-section RightFloat MarginRight">
          <div class="LeftBorder">
            <h2>总结</h2>
            <p>
              raylinx.com是一个专注于推厂AWS云服务的网站旨在直至核心，将复杂的业务问题简单化，让每个人都能轻松接触并利用AWS的强大功能。通过提供管家级云服务，专业的技术支持和个性化咨询raylinx.com正在努力成为连接AWS和用户需求的桥梁，推动整个行业的发展和创新。</p>
          </div>
        </div>

      </div>
      <contactView></contactView>
    </div>
  </div>
</template>

<script>
import contactView from '@/pages/contact.vue';

export default {
  head() {
    return {
      title: '关于我们',
      meta: [
        {hid: 'description', name: 'description', content: '这是默认的描述内容'},
        {hid: 'keywords', name: 'keywords', content: 'vue, nuxt, seo'}
      ]
    }
  },
  components: {
    contactView
  },
  data() {
    return {
      activeIndex: 0, // 默认第一个图片展开
      baseWidth: 100, // 初始宽度
      aboutUsView_IMG_List: [
        {Img: require("@/assets/about/about1.jpg"), isHovered: true},
        {Img: require("@/assets/about/about1.jpg"), isHovered: false},
        {Img: require("@/assets/about/about1.jpg"), isHovered: false},
        {Img: require("@/assets/about/about1.jpg"), isHovered: false},
      ],
      cantact_Icon_List: [
        {index: "1", icon: require("@/assets/Home_IMG/TG1.png"), url: "https://t.me/raylinxjim"},
        {
          index: "2",
          icon: require("@/assets/cases/pay1.png"),
          url: "/contact",
          title: "微信",
          img: require("@/assets/widgetApp/weixi.png"),
          imgshow: false,
        },
        {
          index: "3",
          icon: require("@/assets/Home_IMG/whatsApp1.png"),
          url: "/contact",
        },
        {
          index: "4",
          icon: require("@/assets/Home_IMG/fb2.png"),
          url: "https://www.facebook.com/profile.php?id=61565734855142"
        },
        {index: "5", icon: require("@/assets/pricing/twiite.png"), url: "/contact"},
        {index: "5", icon: require("@/assets/pricing/whatsApp.png"), url: "https://api.whatsapp.com/send/?phone=12125188846&text&type=phone_number&app_absent=0"},
        {index: "5", icon: require("@/assets/pricing/email.png"), url: "/contact"},
        {index: "5", icon: require("@/assets/pricing/ins.png"), url: "https://www.instagram.com/raylinxcloud/"},
      ],
      companyInfo_content_mini1_List: [
        {
          index: "1",
          date: "20",
          date2: "2024.08",
          desc: "Rayinx公司召开内部会议，致力于提供卓越的AWS云服务体验",
          url:"/News/RaylinxInternalMeetingAws"
        },
        {
          index: "2",
          date: "29",
          date2: "2024.05",
          desc: "Raylinx积极参与亚马逊云科技中国峰会，开启服务客户新征程",
          url:"/News/RaylinxAmazonSummitChina"
        },
      ],
      companyInfo_content_mini2_List: [
        {
          index: "1",
          date: "15",
          date2: "2024.06",
          desc: "Raylinx携手亚马逊云科技，共赴数字化升级与AI赋能之旅",
          url:'/News/RaylinxAwsDigitalAiJourney'
        },
        {
          index: "2",
          date: "27",
          date2: "2023.12",
          desc: "拥抱数字化转型，Raylinx与亚马逊云科技共启创新之旅",
          url:'/News/RaylinxDigitalTransformation'
        },
      ],
      showHomeAndroid: false,
      screenWidth: null,
    };
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;// 在客户端设置
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },

  methods: {
    ShowBOX(title) {
      for (let i = 0; i < this.cantact_Icon_List.length; i++) {
        if (this.cantact_Icon_List[i].title === title && this.cantact_Icon_List[i].img != null) {
          this.cantact_Icon_List[i].imgshow = true;
        } else if (this.cantact_Icon_List[i].title === title) {
          this.cantact_Icon_List[i].imgshow = false;
        }
      }
    },
    IsShowBOX(title) {
      for (let i = 0; i < this.cantact_Icon_List.length; i++) {
        if (this.cantact_Icon_List[i].title === title && this.cantact_Icon_List[i].img != null) {
          this.cantact_Icon_List[i].imgshow = false;
          break;  // Stop the loop once the correct item is found and processed
        }
      }
    },

    expandImage(index) {
      this.activeIndex = index;
    },

    resetImages() {
      this.activeIndex = 0; // 鼠标移出时，默认恢复第一个图片展开
    },

    getContainerStyle(index) {
      const diff = Math.abs(this.activeIndex - index) * 20;
      const width = this.activeIndex === index ? 1600 : this.baseWidth - diff;
      return {
        width: width + "px",
        height: "400px",
        overflow: "hidden",
        transition: "width 0.5s ease",
      };
    },

    bodyScale() {
      var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      if(devicewidth<=1600){
        var scale = devicewidth / 1600; // 分母——设计稿的尺寸
        document.body.style.zoom = scale; //放大缩小相应倍数
      }
    },
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        if (val >= 800) {
          this.bodyScale();
          this.showHomeAndroid = false;
        } else if (val < 800) {
          this.showHomeAndroid = true;
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 800px) {

  /* 模块容器 */
  .advantage-module {
    padding: 20px 20px 0 0;

  }
  .bg {
    background: url("@/assets/about/about_bg.jpg") no-repeat;
    background-size: 70% 500px;
    background-position: 0 50%;
    min-height: 800px;
  }
  .bg2 {
    background: url("@/assets/about/about_bg2.jpg") no-repeat;
    background-size: 90% 300px;
    background-position: 90% 80%;
    min-height: 400px;
  }
  .bg3 {
    background: url("@/assets/contact_android/contact_bg.jpg") no-repeat;
    background-size: 70% 500px;
    background-position: 90% 70%;
    min-height: 750px;
  }
  /* 模块部分 */
  .module-section {
    background-color: #ffffff;
    padding: 5px 0 10px 20px;
    border-radius: 3px;
    box-shadow: 0px 5px 8px rgb(0 165 255 / 51%);
    width: 80%;
    min-height: 100px;
    margin-bottom: 50px;
  }
  .RightFloat {
    float: right;
  }
  .module-section div {
    width: 90%;
    height: 100%;

    span {
      font-weight: bold;
    }
  }
  .MarginRight {
    margin-right: 8%;
  }
  .RightBorder {
    border-right: 2px solid #1f8fcc;
    padding-right: 10px;
  }
  .LeftBorder {
    border-left: 2px solid #1f8fcc;
    padding-left: 10px;
  }
  /* 标题样式 */
  .module-section h2 {
    color: rgba(28, 120, 227, 0.85);
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: lighter;
  }

  /* 文本样式 */
  .module-section p {
    color: #333333;
    line-height: 1;
  }

  .about_banner {
    margin-top: 20%;
    padding: 10px 0 0 0;
    background: url("@/assets/contact_android/contact_bg2.jpg") no-repeat;
    background-size: 100% 120%;
    width: 100%;
    height: 300px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;

    div {
      margin-left: 24px;
    }
  }
}

@media screen and (min-width: 800px) {
  .contact_item_box {
    position: relative;
  }
  .companyInfo {
    width: 100%;
    min-height: 500px;
    padding-top: 3%;

    &_title {
      font-size: 20px;
      text-align: center;

      span {
        font-size: 35px;
        font-weight: 500;
      }
    }

    &_content {
      display: flex;
      width: 80%;
      margin: 4% auto 0 auto;

      &_mini1 {
        width: 43%;
        box-shadow: 12px 7px 5px 3px rgba(4, 141, 200, 0.2);
        padding: 24px;

        .title {
          color: #000;
          font-size: 24px;
          text-align: center;
        }

        .item {
          margin-left: 8%;
        }

        .highlight {
          color: #027AFF;
        }

        .date {
          color: #666;

          .date_blue {
            color: #1f8fcc;
            font-size: 25px;
            margin-right: 2px;
          }
        }

        .desc {
          margin-left: 10%;
          line-height: 2;
        }
      }

      .bar_black {
        width: 3px;
        height: 100px;
        background-color: #d2d2d2;
        margin: 3% 1%;
      }

      &_mini2 {
        width: 43%;
        box-shadow: 10px 10px 12px 2px rgba(61, 61, 62, 0.2);
        padding: 24px;
        background-color: #d2efff;

        .title {
          color: #000;
          font-size: 24px;
          text-align: center;
        }

        .item {
          margin-left: 8%;
        }

        .highlight {
          color: #027AFF;
        }

        .date {
          color: #666;

          .date_blue {
            color: #1f8fcc;
            font-size: 25px;
            margin-right: 2px;
          }
        }

        .desc {
          margin-left: 10%;
          line-height: 2;
        }
      }
    }
  }
  .IMGBOX {
    width: 150px;
    height: 150px;
    box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);
    position: absolute;
    top: -150px;
    left: -30px;

    img {
      width: 150px !important;
      height: 150px !important;
    }
  }
  .image-container {
    display: inline-block;
    margin-left: 2%;
  }

  .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .aboutUsView {
    width: 100%;
    min-height: 1000px;
    margin-top: 7%;

    &_title {
      font-size: 30px;
      text-align: center;
      //line-height: 2;
      margin-bottom: 1%;
      span {
        color: rgb(0, 157, 255);
      }
    }

    .blue_bar {
      background: rgb(0, 157, 255);
      width: 50%;
      height: 3px;
      margin: 0 auto 2% auto;
    }

    .aboutUsView_content {
      width: 50%;
      margin: 0 auto;
      padding: 24px 60px;
      border: 1px solid rgb(0, 157, 255);
      min-height: 150px;

      .img_logo {
        width: 300px;
        height: 150px;

        img {
          width: 300px;
          height: 150px;
        }
      }

      .desc {
        width: 100%;
        font-size: 16px;
        color: rgb(0, 157, 255);
        margin-top: 2%;
        line-height: 1.5;
      }
    }

    .aboutUsView_IMG {
      display: flex;
      width: 70%;
      margin: 3% auto;
    }
  }

  .cantact {
    &_bar {
      height: 3px;
      width: 40%;
      background-color: rgb(0, 157, 255);
      margin: 0 auto;
    }

    .cantact_item {
      display: flex;
      width: 58%;
      margin: 1% auto;
      justify-content: center;
      div {
        margin: 0 2% 0 2%;
      }

      img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>