613 lines
18 KiB
Vue
613 lines
18 KiB
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>
|