1968 lines
54 KiB
Vue
1968 lines
54 KiB
Vue
<template>
|
||
<div>
|
||
<div v-if="showHomeAndroid == false" class="homeView" ref="homeView">
|
||
<div class="banner">
|
||
<div class="banner_btn">
|
||
<a href="">
|
||
<div>免费加入Raylinx订阅计划</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="advantage">
|
||
<div class="advantage_mini">
|
||
<div class="advantage_title">我们的优势</div>
|
||
<div class="blue_bar"></div>
|
||
<div class="advantage_content">
|
||
<div v-for="item in advantage_content_List" class="advantage_content_row">
|
||
<div v-for="i in item.childer" class="item">
|
||
<div class="icon"><img :src="i.icon" alt=""/></div>
|
||
<div class="title">{{ i.title }}</div>
|
||
<div class="desc">{{ i.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="activationProcess">
|
||
<div class="activationProcess_title">开通流程</div>
|
||
<div class="blue_bar"></div>
|
||
<div class="infoBanner">
|
||
我们欢迎您来交流技术或业务问题，<br>即使不立即购买AWS产品，您也可也享受我们的服务
|
||
</div>
|
||
<div class="activationProcess_content">
|
||
<div v-for="i in activationProcess_content_List" class="item">
|
||
<div class="index">{{ i.index }}</div>
|
||
<div class="icon"><img :src="i.icon" alt=""/></div>
|
||
<div class="title">{{ i.title }}</div>
|
||
<div class="title_english">{{ i.title_english }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="activationProcess_btn">
|
||
<a href="">
|
||
<div style="height: 100%; width: 100%">点击此处联系我们</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="hotProducts">
|
||
<div class="hotProducts_title">热门产品</div>
|
||
<div class="blue_bar"></div>
|
||
<div class="hotProducts_content">
|
||
<div class="hotProducts_content_carousel">
|
||
<el-carousel height="550px" arrow="always">
|
||
<el-carousel-item v-for="item in hotProducts_content_carousel_List" :key="item">
|
||
<div v-for="item2 in item.childer" class="item">
|
||
<div v-for="i in item2.childer" class="item_mini">
|
||
<div class="title">{{ i.title }}</div>
|
||
<div class="desc">{{ i.desc }}</div>
|
||
<div class="icon"><img :src="i.icon" alt=""/></div>
|
||
<div class="btn">
|
||
<a :href="i.href">
|
||
<div>立即查看</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="productAdvantages">
|
||
<div class="productAdvantages_title">AWS产品优势</div>
|
||
<div class="blue_bar"></div>
|
||
<div class="productAdvantages_content">
|
||
<div class="productAdvantages_content_mini">
|
||
<div class="title">高信任度</div>
|
||
<div class="disp_content">
|
||
<div class="bar"></div>
|
||
<div class="desc">
|
||
<div class="desc_title">High level of trust</div>
|
||
<div class="desc_content">
|
||
AWS全球每个月有数百万活跃客户，90%世界《财富》100
|
||
强的巨头企业，大多数世界500强的企业都选择亚马逊云科技作为他们的云服务提供商，各种规模、各个行业、各种应用场录，都有大量亚马逊云科技的客户。<br/>
|
||
<div style="margin-top: 3%;">
|
||
Alibaba Cloud International has millions of monthly active
|
||
customers worldwide, 90% of the word's Fortune 100 companies
|
||
Giant enterprises, most of the worid's top 500 enterprises
|
||
chooseAmazon Web Services as him Our cloud service providers
|
||
areavailable in all sizes, industries, and application
|
||
scenarios A large number of Amazon Web Servicescustomers.
|
||
</div>
|
||
</div>
|
||
<div class="desc_btn">
|
||
<a href="">
|
||
<div>前往AWS官网</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="productAdvantages_content_mini2">
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="icon_title">
|
||
<div class="icon">
|
||
<img :src="this.productAdvantages_content_mini2_List[0].childer[0]
|
||
.icon
|
||
" alt=""/>
|
||
</div>
|
||
<div class="title">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[0].childer[0]
|
||
.title
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="english_title">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[0].childer[0]
|
||
.english_title
|
||
}}
|
||
</div>
|
||
<div class="desc">
|
||
AWS提供所有云计算厂家中最多种类计算示例，并台提供弹径扣展服务，让会产付以包括超过<span
|
||
style="color: red">400多种</span>计根据实际需求灵活调整资源规模，从而降低成本并提高效率，
|
||
</div>
|
||
<div class="btn">
|
||
<a href="">
|
||
<div>前往AWS官网</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="icon_title">
|
||
<div class="icon">
|
||
<img :src="this.productAdvantages_content_mini2_List[1].childer[0]
|
||
.icon
|
||
" alt=""/>
|
||
</div>
|
||
<div class="title">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[1].childer[0]
|
||
.title
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="english_title">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[1].childer[0]
|
||
.english_title
|
||
}}
|
||
</div>
|
||
<div class="desc">
|
||
AWS一年的平均宕机时间比规模次大的云端供应商少<span
|
||
style="color: red">7倍</span>之多，同时独特的可用区概念使得每个可用区都有独立的电力、冷却和物理安全性，并通过几个的超低延迟络连接，可满足高级别别的安全性、合规性和数据保护要求
|
||
</div>
|
||
<div class="btn">
|
||
<a href="">
|
||
<div>前往AWS官网</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="icon_title">
|
||
<div class="icon">
|
||
<img :src="this.productAdvantages_content_mini2_List[0].childer[1]
|
||
.icon
|
||
" alt=""/>
|
||
</div>
|
||
<div class="title">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[0].childer[1]
|
||
.title
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="english_title">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[0].childer[1]
|
||
.english_title
|
||
}}
|
||
</div>
|
||
<div class="desc">
|
||
AWS在全球<span style="color: red">33个</span>地理区域内拥有超讨<span
|
||
style="color: red">105个</span>司用区，提供广泛地域覆盖和低延迟服务客户根据业务需求选择最合适的部署区域，实现全球业务拓展，并确保在各地提供一致的性能和可靠性，满足不同市场的业务需求
|
||
</div>
|
||
<div class="btn">
|
||
<a href="">
|
||
<div>前往AWS官网</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="icon_title">
|
||
<div class="icon">
|
||
<img :src="this.productAdvantages_content_mini2_List[1].childer[1]
|
||
.icon
|
||
" alt=""/>
|
||
</div>
|
||
<div class="title">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[1].childer[1]
|
||
.title
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="english_title">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[1].childer[1]
|
||
.english_title
|
||
}}
|
||
</div>
|
||
<div class="desc">
|
||
{{
|
||
this.productAdvantages_content_mini2_List[1].childer[1].desc
|
||
}}
|
||
</div>
|
||
<div class="btn">
|
||
<a href="">
|
||
<div>前往AWS官网</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sceneInfo">
|
||
<div class="sceneInfo_title">AWS应用场景</div>
|
||
<div class="blue_bar"></div>
|
||
<div class="sceneInfo_content">
|
||
<div class="sceneInfo_content_carousel">
|
||
<el-carousel height="500px" :interval="5000" arrow="always">
|
||
<el-carousel-item v-for="item in sceneInfo_content_carousel_List" :key="item">
|
||
<div class="item">
|
||
<div class="img"><img :src="item.img" alt=""/></div>
|
||
<div class="desc_content">
|
||
<div class="title">{{ item.title }}</div>
|
||
<div class="desc">{{ item.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="partnerModule">
|
||
<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="banner-section">
|
||
<div class="banner-content">
|
||
<img class="banner-image" src="@/assets/iphoneHome/home_banner.jpg" alt="Banner"/>
|
||
|
||
</div>
|
||
<div class="banner-text">
|
||
<p class="bac">免费加入Raylinx订阅计划</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="process-section">
|
||
<h2 class="section-title">开通流程</h2>
|
||
<p>我们致力于解决交流技术及业务问题，<br>立即开户快速享受AWS产品。</p>
|
||
<div class="process-steps box-with-right-border">
|
||
|
||
<div style="display: flex; justify-content: center;justify-items: center;margin-top: 10px;"
|
||
v-for="step1 in setpsList" :key="step1.index">
|
||
<div style="border-left: 4px solid #007bff; height: 150px;"></div>
|
||
<div class="step1" v-for="step2 in step1.childer" :key="step2.index"
|
||
style="border-right: 4px solid #007bff; height: 150px;width: 140px;/* 右边蓝色边框 */">
|
||
<div class="step-icon">
|
||
<img :src="step2.icon" alt="步骤图标"/>
|
||
</div>
|
||
<div class="step-text">
|
||
<h4>{{ step2.index }}</h4>
|
||
<p>{{ step2.title }}</p>
|
||
<span style="color:#007bff;">{{ step2.subtitle }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="hot-products sty">
|
||
<h2 class="section-title">热门产品</h2>
|
||
|
||
<!-- 轮播图 -->
|
||
<el-carousel :interval="4000" arrow="always" style="height: 360px;">
|
||
<el-carousel-item v-for="(product, index) in products" :key="index"
|
||
style="display: flex; justify-content: center;justify-items: center;height: 330px; padding-bottom: 20px;">
|
||
<div class="product-card">
|
||
<!-- 产品图片 -->
|
||
<img :src="product.image" alt="产品图片" class="product-image"/>
|
||
<h3 class="product-title">{{ product.title }}</h3>
|
||
<p class="product-description">{{ product.description }}</p>
|
||
<button class="view-button">立即查看</button>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
|
||
|
||
<div class="our-advantages">
|
||
<h2 class="section-title">我们的优势</h2>
|
||
<ul class="advantage-list">
|
||
<li v-for="(advantage, index) in advantages" :key="index">
|
||
<img :src="advantage.icon" :alt="advantage.title"/>
|
||
<h3>{{ advantage.title }}</h3>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<h2 class="section-title" style="text-align: center; margin-left: 45px;">产品优势</h2>
|
||
|
||
<div class="container">
|
||
|
||
<div class="content">
|
||
<div class="section">
|
||
<div class="title">高信任度</div>
|
||
<div class="title2">High level of trust</div>
|
||
<div class="description">AWS每天有数百万活跃客户，90%世界《财富》100 强的巨头企业，大多数世界 500
|
||
强的企业都选择AWS这种行业领先的云服务提供商，各种规模、各个行业、各种应用场景，都有大量云服务场景的案例。
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<div class="description">aws Cloud International has millions of monthly active customers worldwide, 90%
|
||
of the world's Fortune 100 companies Giant enterprises, most of the world's top500 enterprises choose
|
||
Amazon Web Services as him Our cloud service providersare available in all sizes, industries, and
|
||
application scenarios A large number of Amazon Web Servicescustomers.
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<div class="footer-bord">
|
||
<div class="footer-item">灵活性和弹性</div>
|
||
<div class="footer-item2">Flexibility and resiliency</div>
|
||
</div>
|
||
|
||
<div class="footer-bord">
|
||
<div class="footer-item">稳定性和安全性</div>
|
||
<div class="footer-item2" style="margin-right: 25px;">Stability and security</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="footer">
|
||
|
||
<div class="footer-bord">
|
||
<div class="footer-item">广泛性和全球性</div>
|
||
<div class="footer-item2 ">Broad and global</div>
|
||
</div>
|
||
<div class="footer-bord">
|
||
<div class="footer-item">创新性和领先性</div>
|
||
<div class="footer-item2">Sinnovative and leading</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="services-main">
|
||
<div class="services">
|
||
<div class="section" v-for="(item, index) in sections" :key="index">
|
||
<div class="section-title1">
|
||
<div class="section-title3">Online games</div>
|
||
<div class="section-title2">{{ item.title }}</div>
|
||
</div>
|
||
<p class="section-content" v-for="paragraph in item.paragraphs" :key="paragraph">{{ paragraph }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="companyInfo">
|
||
<div class="companyInfo_title">
|
||
<span>Raylinx锐联国际</span>
|
||
</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>
|
||
<div :class="{ desc: true, highlight: i.index === '1' }">
|
||
{{ i.desc }}
|
||
</div>
|
||
</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>
|
||
<div class="desc">{{ i.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
showHomeAndroid: false,
|
||
screenWidth: null,
|
||
// modules: [Navigation],
|
||
advantage_content_List: [
|
||
{
|
||
index: "1",
|
||
row: "1",
|
||
childer: [
|
||
{
|
||
index: "1-1",
|
||
title: "优质服务",
|
||
desc: "全面的服务和支持，提供全面的云计算服务和技术支持，一对一的技术对接，包括培训、咨询和解决方案架构等，帮助客户快速解决问题并最大程度地发挥云计算的优势。",
|
||
icon: require("@/assets/Home_IMG/advantage1-1.png"),
|
||
},
|
||
{
|
||
index: "1-2",
|
||
title: "价格优势",
|
||
desc: "代理商专有权限，提供相较于官网更低的价格，我们有专业的销售跟您对接，透明的折扣，透明的账单，帮助客户节省更多的成本",
|
||
icon: require("@/assets/Home_IMG/advantage1-2.png"),
|
||
},
|
||
{
|
||
index: "1-3",
|
||
title: "全通道付款",
|
||
desc: "我们支持全通道付款：人民币、美金、USDT、比特币、支付宝、对公转账等。",
|
||
icon: require("@/assets/Home_IMG/advantage1-3.png"),
|
||
},
|
||
{
|
||
index: "1-4",
|
||
title: "免除实名",
|
||
desc: "我们代为开通账户，免除实名认证，免除绑定海外信用卡，账户挂在我们的组织下，由我们为您代付账单。",
|
||
icon: require("@/assets/Home_IMG/advantage1-4.png"),
|
||
},
|
||
],
|
||
},
|
||
{
|
||
index: "2",
|
||
row: "2",
|
||
childer: [
|
||
{
|
||
index: "2-1",
|
||
title: "原厂技术",
|
||
desc: " 除了我们给您提供的技术支持外，还可与AWS原厂技术直接联系，任何AWS技术问题都可以找到解决办法，最大程度保证您的数据安全和业务稳定。",
|
||
icon: require("@/assets/Home_IMG/advantage2-1.png"),
|
||
},
|
||
{
|
||
index: "2-2",
|
||
title: "稳定运营",
|
||
desc: "超过十年的AWS代理运营 经验，团队规模超过百人，专业 技术和销售为您提供最优质的服 务，解答所有疑问，服务满意度 计入考核，您不用担心服务态度。",
|
||
icon: require("@/assets/Home_IMG/advantage2-2.png"),
|
||
},
|
||
{
|
||
index: "2-3",
|
||
title: "即开即用",
|
||
desc: "7×24h专业技术支持，不用担心时差、客服在线时间，永远有人为您的业务保驾护航，随时享受快捷上云服务。",
|
||
icon: require("@/assets/Home_IMG/advantage2-3.png"),
|
||
},
|
||
{
|
||
index: "2-4",
|
||
title: "隐私保护",
|
||
desc: "您在我们这里的业务信息保存在专业的CRM系统中，运行在高防AWS云服务器上，您不用担心隐私安全。",
|
||
icon: require("@/assets/Home_IMG/advantage2-4.png"),
|
||
},
|
||
],
|
||
},
|
||
],
|
||
activationProcess_content_List: [
|
||
{
|
||
index: "01",
|
||
icon: require("@/assets/Home_IMG/activationProcess-01.png"),
|
||
title: "选定服务",
|
||
title_english: "Select Service",
|
||
},
|
||
{
|
||
index: "02",
|
||
icon: require("@/assets/Home_IMG/activationProcess-02.png"),
|
||
title: "联系销售",
|
||
title_english: "Contact Sales",
|
||
},
|
||
{
|
||
index: "03",
|
||
icon: require("@/assets/Home_IMG/activationProcess-03.png"),
|
||
title: "沟通业务",
|
||
title_english: "Communication business",
|
||
},
|
||
{
|
||
index: "04",
|
||
icon: require("@/assets/Home_IMG/activationProcess-04.png"),
|
||
title: "开通账户",
|
||
title_english: "Open an account",
|
||
},
|
||
],
|
||
hotProducts_content_carousel_List: [
|
||
{
|
||
index: "1",
|
||
childer: [
|
||
{
|
||
index: "1-1",
|
||
row: "1-1",
|
||
childer: [
|
||
{
|
||
index: "1-1-1",
|
||
title: "轻量云",
|
||
desc: "灵活配置、经济实惠",
|
||
icon: require("@/assets/Home_IMG/hotProducts1-1-1.png"),
|
||
href: "",
|
||
},
|
||
{
|
||
index: "1-1-2",
|
||
title: "ec2服务器",
|
||
desc: "大带宽服务器、高性能",
|
||
icon: require("@/assets/Home_IMG/hotProducts1-1-2.png"),
|
||
href: "",
|
||
},
|
||
{
|
||
index: "1-1-3",
|
||
title: "站群服务器",
|
||
desc: "支持同时运行多个网站",
|
||
icon: require("@/assets/Home_IMG/hotProducts1-1-3.png"),
|
||
href: "",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
index: "1-2",
|
||
row: "1-2",
|
||
childer: [
|
||
{
|
||
index: "1-2-1",
|
||
title: "高防服务器",
|
||
desc: "有效抵御各种网络攻击",
|
||
icon: require("@/assets/Home_IMG/hotProducts1-2-1.png"),
|
||
href: "",
|
||
},
|
||
{
|
||
index: "1-2-2",
|
||
title: "云储存",
|
||
desc: "可拓展对象存储、低成本归档存储",
|
||
icon: require("@/assets/Home_IMG/hotProducts1-2-2.png"),
|
||
href: "",
|
||
},
|
||
{
|
||
index: "1-2-3",
|
||
title: "网络服务",
|
||
desc: "游戏托管、跨境数据传输",
|
||
icon: require("@/assets/Home_IMG/hotProducts1-2-3.png"),
|
||
href: "",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
// {
|
||
// index: "2",
|
||
// childer: [],
|
||
// },
|
||
],
|
||
productAdvantages_content_mini2_List: [
|
||
{
|
||
index: "1",
|
||
row: "1",
|
||
childer: [
|
||
{
|
||
index: "1-1",
|
||
icon: require("@/assets/Home_IMG/productAdvantages1.png"),
|
||
title: "灵活性和弹性",
|
||
english_title: "Flexibility and resiliency",
|
||
desc: "AWS提供所有云计算厂家中最多种类计算示例，并台提供弹径扣展服务，让会产付以包括超过400多种计根据实际需求灵活调整资源规模，从而降低成本并提高效率，",
|
||
},
|
||
{
|
||
index: "1-2",
|
||
icon: require("@/assets/Home_IMG/productAdvantages1.png"),
|
||
title: "广泛性和全球性",
|
||
english_title: "Broad and alobal",
|
||
desc: "AWS在全球33个地理区域内拥有超讨105个可用区，提供广泛地域覆盖和低延迟服务客户根据业务需求选择最合适的部署区域，实现全球业务拓展，并确保在各地提供一致的性能和可靠性，满足不同市场的业务需求",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
index: "2",
|
||
row: "2",
|
||
childer: [
|
||
{
|
||
index: "2-1",
|
||
icon: require("@/assets/Home_IMG/productAdvantages1.png"),
|
||
title: "稳定性和安全性",
|
||
english_title: "Stability and security",
|
||
desc: "AWS一年的平均宕机时间比规模次大的云端供应商少7倍之多，同时独特的可用区概念使得每个可用区都有独立的电力、冷却和物理安全性，并通过几个的超低延迟络连接，可满足高级别别的安全性、合规性和数据保护要求",
|
||
},
|
||
{
|
||
index: "2-2",
|
||
icon: require("@/assets/Home_IMG/productAdvantages1.png"),
|
||
title: "创新性和领先性",
|
||
english_title: "Innovative and leading",
|
||
desc: "不断推出新的服务和功能，如人工智能，物网和大数据分析等，帮助客户实现业务创新和数字化转型",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
sceneInfo_content_carousel_List: [
|
||
{
|
||
index: "1",
|
||
img: require("@/assets/Home_IMG/sceneInfo1.jpg"),
|
||
title: "在线游戏",
|
||
desc: "通过 EC2弹性扩展功能应对突发高流量和高并发需求，结合Amazon GameLift管理服务器，确保游戏服务器的高可用性和低延迟，云服务器可以集成CDN加速游戏内容的分发，减少加载时间以提高玩家体验，并且提供数据存储解决方案，包括自动备份功能，保护游戏数据的安全",
|
||
},
|
||
{
|
||
index: "2",
|
||
img: require("@/assets/Home_IMG/sceneInfo2.jpg"),
|
||
title: "金融交易",
|
||
desc: "通过 EC2弹性扩展功能应对突发高流量和高并发需求，结合Amazon GameLift管理服务器，确保游戏服务器的高可用性和低延迟，云服务器可以集成CDN加速游戏内容的分发，减少加载时间以提高玩家体验，并且提供数据存储解决方案，包括自动备份功能，保护游戏数据的安全",
|
||
},
|
||
{
|
||
index: "3",
|
||
img: require("@/assets/Home_IMG/sceneInfo3.jpg"),
|
||
title: "软件开发",
|
||
desc: "通过 EC2弹性扩展功能应对突发高流量和高并发需求，结合Amazon GameLift管理服务器，确保游戏服务器的高可用性和低延迟，云服务器可以集成CDN加速游戏内容的分发，减少加载时间以提高玩家体验，并且提供数据存储解决方案，包括自动备份功能，保护游戏数据的安全",
|
||
},
|
||
{
|
||
index: "4",
|
||
img: require("@/assets/Home_IMG/sceneInfo4.jpg"),
|
||
title: "跨境电商",
|
||
desc: "通过 EC2弹性扩展功能应对突发高流量和高并发需求，结合Amazon GameLift管理服务器，确保游戏服务器的高可用性和低延迟，云服务器可以集成CDN加速游戏内容的分发，减少加载时间以提高玩家体验，并且提供数据存储解决方案，包括自动备份功能，保护游戏数据的安全",
|
||
},
|
||
{
|
||
index: "5",
|
||
img: require("@/assets/Home_IMG/sceneInfo5.jpg"),
|
||
title: "人工智能",
|
||
desc: "通过 EC2弹性扩展功能应对突发高流量和高并发需求，结合Amazon GameLift管理服务器，确保游戏服务器的高可用性和低延迟，云服务器可以集成CDN加速游戏内容的分发，减少加载时间以提高玩家体验，并且提供数据存储解决方案，包括自动备份功能，保护游戏数据的安全",
|
||
},
|
||
],
|
||
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'
|
||
},
|
||
],
|
||
|
||
|
||
// iphone
|
||
setpsList: [
|
||
{
|
||
index: '1',
|
||
row: "1",
|
||
childer: [
|
||
{
|
||
index: '1-1',
|
||
title: '选定服务',
|
||
subtitle: 'Select Service',
|
||
icon: '@/assets/Home_IMG/activationProcess-01.png'
|
||
},
|
||
{
|
||
index: '1-2',
|
||
title: '联系销售',
|
||
subtitle: 'Contact Sales',
|
||
icon: '@/assets/Home_IMG/activationProcess-02.png'
|
||
},
|
||
]
|
||
},
|
||
{
|
||
index: '2',
|
||
row: "2",
|
||
childer: [
|
||
{
|
||
index: '2-1',
|
||
title: '沟通业务',
|
||
subtitle: 'Communication business',
|
||
icon: '@/assets/Home_IMG/activationProcess-03.png'
|
||
},
|
||
{
|
||
index: '2-2',
|
||
title: '开通账户',
|
||
subtitle: 'Open an account',
|
||
icon: '@/assets/Home_IMG/activationProcess-04.png'
|
||
},
|
||
]
|
||
}
|
||
],
|
||
|
||
|
||
products: [
|
||
{
|
||
title: '轻量云',
|
||
description: '灵活配置，经济实惠',
|
||
image: '@/assets/Home_IMG/hotProducts1-1-1.png', // 图片路径
|
||
},
|
||
{
|
||
title: '高性能服务器',
|
||
description: '超强性能，满足大规模计算',
|
||
image: '@/assets/cloud2.png',
|
||
},
|
||
{
|
||
title: '存储服务',
|
||
description: '安全可靠，海量存储',
|
||
image: '@/assets/cloud3.png',
|
||
},
|
||
],
|
||
|
||
|
||
advantages: [
|
||
{title: '优质服务', icon: ''},
|
||
{title: '价格优势', icon: ''},
|
||
{title: '全通道付款', icon: ''},
|
||
{title: '免除实名', icon: ''},
|
||
{title: '原厂技术', icon: ''},
|
||
{title: '稳定运营', icon: ''},
|
||
{title: '即开即用', icon: ''},
|
||
{title: '隐私保护', icon: ''},
|
||
],
|
||
|
||
|
||
sections: [
|
||
{
|
||
title: '在线游戏',
|
||
title2: 'Online games',
|
||
paragraphs: [
|
||
'通过 EC2弹性扩展功能，应对突发高流量和高并发需求，结合Amazon GameLift管理服务器确保游戏服务器的高可用性和低延迟，云服务器可以集成CDN，加速游戏内容的分发，减少加载时间以提高玩家体验，并且提供数据存储解决方案，包括自动备份功能，保护游戏数据的安全。'
|
||
]
|
||
},
|
||
{
|
||
title: '金融交易',
|
||
title2: 'Online games',
|
||
paragraphs: [
|
||
'使用EC2、S3等产品来处理和分析海量交易数据AWVS的强大计算能力和大数据处理能力帮助FINRA高效地进行监管和合规分析，当金融行业面临网络安全威胁时，云服务器提供的DDoS攻击防护、DNS劫持检测和入侵防护服务，强化了金融交易的安全性。'
|
||
]
|
||
},
|
||
{
|
||
title: '跨境电商',
|
||
title2: 'Online games',
|
||
paragraphs: [
|
||
'可利用的多种服务如Amazon EC2、Glue、Amazon EMR等来支持其电子商务平台和后端系统，管理库存和物流情况，利用邮件分发功能实现电子邮件营销等产品推广手段，建立安全的支付通道，实现全业务流程的服务。'
|
||
]
|
||
},
|
||
{
|
||
title: '数据开发',
|
||
title2: 'Online games',
|
||
paragraphs: [
|
||
'使用 Amazon EMR 和Amazon Redshift 处理和分析大规模数据，提供各种数据库服务，如关系型数据库、NoSQL数据库等，方便开发者根据项目需求选择合适的数据库解决方案，支持多项目同时进行，且环境隔离，提供多层次的安全措施，包括网络安全、数据加密、身份认证等，保护开发过程中的数据安全。'
|
||
]
|
||
},
|
||
{
|
||
title: '人工智能',
|
||
title2: 'Online games',
|
||
paragraphs: [
|
||
'使用的多种服务如AmazonEC2、S3、RDS等云服务器提供强大的计算能力，特别是GPU云服务器，可服务于AI训练、推理、科学计算等场景，并且能够帮助快速部罢基础环境，降低操作和管理的复杂度，以及有保证的的隐私性。'
|
||
]
|
||
},
|
||
|
||
],
|
||
|
||
|
||
};
|
||
|
||
|
||
},
|
||
methods: {
|
||
bodyScale() {
|
||
var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
|
||
if(devicewidth<=1600){
|
||
var scale = devicewidth / 1600; // 分母——设计稿的尺寸
|
||
document.body.style.zoom = scale; //放大缩小相应倍数
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
this.screenWidth = document.body.clientWidth;// 在客户端设置
|
||
window.onresize = () => {
|
||
return (() => {
|
||
this.screenWidth = document.body.clientWidth;
|
||
})();
|
||
};
|
||
},
|
||
watch: {
|
||
screenWidth: {
|
||
handler: function (val) {
|
||
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();
|
||
},
|
||
immediate: true,
|
||
deep: true,
|
||
},
|
||
},
|
||
|
||
|
||
// name: 'BannerSection',
|
||
// name: 'HotProducts'
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@media (max-width: 768px) {
|
||
|
||
.bac {
|
||
margin: 0 auto;
|
||
margin-top: 30px;
|
||
background-color: #007bff;
|
||
color: white;
|
||
line-height: 30px;
|
||
width: 45%;
|
||
font-size: 13px;
|
||
box-shadow: 0px 0px 10px #007bff;
|
||
}
|
||
.section-title {
|
||
width: 75%;
|
||
font-size: 26px;
|
||
margin-bottom: 10px;
|
||
color: #000000;
|
||
border-bottom: 2px solid #007bff;
|
||
display: inline-block;
|
||
padding-bottom: 5px;
|
||
font-weight: 500;
|
||
|
||
}
|
||
|
||
.banner-section {
|
||
margin-top: 60px;
|
||
text-align: center;
|
||
|
||
padding: 20px 0;
|
||
|
||
.banner-content {
|
||
position: relative;
|
||
|
||
.banner-image {
|
||
width: 100%;
|
||
// height: 300px;
|
||
}
|
||
|
||
.banner-text {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #fff;
|
||
text-align: center;
|
||
|
||
|
||
h2 {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.join-button {
|
||
background-color: #007bff;
|
||
color: #fff;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
|
||
&:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.process-section {
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
background-color: #fff;
|
||
|
||
h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
color: #007bff;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.process-steps {
|
||
// display: flex;
|
||
// justify-content: space-around;
|
||
// flex-wrap: wrap;
|
||
// .step1 {
|
||
// border-left: 4px solid #007bff;
|
||
// }
|
||
|
||
.step2 {
|
||
width: 45%;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
|
||
.step-icon img {
|
||
width: 50px;
|
||
height: 50px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.step-text h4 {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #007bff;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.step-text p {
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
color: #333;
|
||
}
|
||
|
||
.step-text span {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
.hot-products {
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
|
||
.product-card {
|
||
display: flex;
|
||
width: 60%;
|
||
margin-top: 30px;
|
||
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #f9f9f9;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
box-shadow: 10px 10px 20px #70cbff;
|
||
}
|
||
|
||
.product-image {
|
||
width: 100%;
|
||
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.product-title {
|
||
font-size: 18px;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.product-description {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.view-button {
|
||
background-color: #007bff;
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.view-button:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
|
||
|
||
::v-deep .el-carousel__item is-active is-animating {
|
||
height: 500px;
|
||
}
|
||
|
||
::v-deep .el-carousel__arrow--right {
|
||
background-color: transparent;
|
||
height: 70px;
|
||
width: 20px;
|
||
margin-left: 0px;
|
||
margin-bottom: 20px;
|
||
background-color: #0059ff;
|
||
border-radius: 0%;
|
||
}
|
||
|
||
::v-deep .el-icon-arrow-right {
|
||
display: none;
|
||
|
||
}
|
||
|
||
|
||
::v-deep .el-carousel__arrow--left {
|
||
background-color: transparent;
|
||
height: 70px;
|
||
width: 20px;
|
||
margin-left: 0px;
|
||
margin-bottom: 20px;
|
||
background-color: #0059ff;
|
||
border-radius: 0%;
|
||
}
|
||
|
||
::v-deep .el-icon-arrow-left {
|
||
|
||
display: none;
|
||
|
||
}
|
||
|
||
|
||
.our-advantages {
|
||
text-align: center;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
|
||
.advantage-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
li {
|
||
list-style: none;
|
||
flex: 1 1 35%;
|
||
margin: 10px;
|
||
text-align: center;
|
||
|
||
h3 {
|
||
color: #007bff;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.container {
|
||
|
||
// background: #ffffff;
|
||
padding: 20px;
|
||
font-family: Arial, sans-serif;
|
||
|
||
|
||
.header {
|
||
font-size: 24px;
|
||
color: blue;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.content {
|
||
background: white;
|
||
padding: 15px;
|
||
border-left: 3px solid #007bff;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 20px;
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
color: #167fff;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.title2 {
|
||
font-size: 14px;
|
||
color: #000000;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.description {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
|
||
.footer-bord {
|
||
border-left: 3px solid #007bff;
|
||
text-align: left;
|
||
}
|
||
|
||
.footer-item {
|
||
|
||
font-size: 18px;
|
||
color: #167fff;
|
||
font-weight: 600;
|
||
padding: 5px 10px;
|
||
|
||
}
|
||
|
||
.footer-item2 {
|
||
margin-left: 10px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.services-main {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
justify-items: center;
|
||
|
||
.services {
|
||
display: flex;
|
||
width: 80%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 20px;
|
||
|
||
.section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
border-radius: 8px;
|
||
// box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
width: 100%;
|
||
|
||
.section-title1 {
|
||
writing-mode: vertical-rl;
|
||
text-orientation: upright;
|
||
font-size: 20px;
|
||
color: #007bff;
|
||
margin-bottom: 10px;
|
||
border-top: solid 3px #007bff;
|
||
font-weight: 550;
|
||
width: 50px;
|
||
}
|
||
|
||
.section-title2 {
|
||
margin-top: 10px;
|
||
|
||
}
|
||
|
||
.section-title3 {
|
||
writing-mode: horizontal-tb;
|
||
/* 默认值，通常不需要显式设置 */
|
||
text-orientation: mixed;
|
||
/* 默认值，通常不需要显式设置 */
|
||
margin-top: 14px;
|
||
font-size: 12px;
|
||
font-weight: 550;
|
||
transform: rotate(90deg);
|
||
/* 设置旋转的中心点为文字块的中心，默认为元素的中心 */
|
||
transform-origin: center;
|
||
|
||
|
||
width: 50%;
|
||
|
||
}
|
||
|
||
.section-content {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.companyInfo {
|
||
width: 100%;
|
||
min-height: 750px;
|
||
padding-top: 3%;
|
||
|
||
&_title {
|
||
font-size: 20px;
|
||
text-align: center;
|
||
|
||
span {
|
||
font-size: 35px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
&_content {
|
||
display: block;
|
||
width: 80%;
|
||
margin: 4% auto 0 auto;
|
||
|
||
&_mini1 {
|
||
width: 90%;
|
||
height: 230px;
|
||
box-shadow: 12px 7px 5px 3px rgba(4, 141, 200, 0.2);
|
||
padding: 24px;
|
||
|
||
|
||
.companyInfo_content_mini1 {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.title {
|
||
color: #000;
|
||
font-size: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.item {
|
||
margin-left: 8%;
|
||
}
|
||
|
||
.highlight {
|
||
color: #1f8fcc;
|
||
}
|
||
|
||
.date {
|
||
color: #666;
|
||
|
||
.date_blue {
|
||
color: #1f8fcc;
|
||
font-size: 25px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
margin-left: 10%;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
|
||
.bar_black {
|
||
|
||
height: 50px;
|
||
|
||
}
|
||
|
||
&_mini2 {
|
||
width: 90%;
|
||
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: #1f8fcc;
|
||
}
|
||
|
||
.date {
|
||
color: #666;
|
||
|
||
.date_blue {
|
||
color: #1f8fcc;
|
||
font-size: 25px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
margin-left: 10%;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
@media (min-width: 768px) {
|
||
|
||
.homeView {
|
||
min-height: 1000px;
|
||
}
|
||
|
||
.banner {
|
||
width: 100%;
|
||
height: 620px;
|
||
background: url("@/assets/Home_IMG/home_banner1.jpg") no-repeat;
|
||
background-size: 100% 645px;
|
||
position: relative;
|
||
|
||
&_btn {
|
||
background: url("@/assets/Home_IMG/activationProcess_btn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 330px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
position: absolute;
|
||
top: 340px;
|
||
left: 230px;
|
||
text-align: center;
|
||
|
||
a {
|
||
font-size: 20px;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
|
||
div {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.disp_content {
|
||
display: flex;
|
||
}
|
||
|
||
.blue_bar {
|
||
width: 40%;
|
||
height: 2px;
|
||
background-color: #0059ff;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.advantage {
|
||
width: 100%;
|
||
min-height: 710px;
|
||
padding-bottom: 5%;
|
||
|
||
&_title {
|
||
text-align: center;
|
||
font-size: 34px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
&_mini {
|
||
width: 85%;
|
||
margin: 0 auto;
|
||
margin-top: 2%;
|
||
}
|
||
|
||
&_content {
|
||
min-height: 400px;
|
||
|
||
&_row {
|
||
display: flex;
|
||
margin-top: 5%;
|
||
|
||
.item {
|
||
width: 400px;
|
||
height: 200px;
|
||
margin-right: 20px;
|
||
margin-left: 20px;
|
||
box-shadow: 10px 10px 12px 9px rgba(4, 141, 200, 0.22);
|
||
position: relative;
|
||
padding: 24px;
|
||
|
||
.icon {
|
||
width: 90px;
|
||
height: 90px;
|
||
border-radius: 100%;
|
||
background-color: #fff;
|
||
box-shadow: 5px 1px 10px rgba(0, 0, 0, 0.2);
|
||
position: absolute;
|
||
top: -25px;
|
||
left: -25px;
|
||
|
||
img {
|
||
width: 90px;
|
||
height: 90px;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
color: #1685f8;
|
||
font-size: 25px;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
margin-top: 10%;
|
||
}
|
||
|
||
.desc {
|
||
margin-top: 5%;
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.activationProcess {
|
||
&_title {
|
||
text-align: center;
|
||
font-size: 34px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
&_content {
|
||
width: 75%;
|
||
margin: 2% auto 0 auto;
|
||
display: flex;
|
||
border-left: 1px solid #0059ff;
|
||
|
||
.item {
|
||
width: 20%;
|
||
min-height: 350px;
|
||
padding: 0 24px;
|
||
border-right: 1px solid #0059ff;
|
||
|
||
.index {
|
||
width: 70px;
|
||
height: 70px;
|
||
background-color: #027aff;
|
||
color: #fff;
|
||
font-size: 50px;
|
||
text-align: center;
|
||
}
|
||
|
||
.icon {
|
||
margin-left: 20%;
|
||
margin-top: 10%;
|
||
}
|
||
|
||
.title {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.title_english {
|
||
color: #1685f8;
|
||
font-size: 25px;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_btn {
|
||
background: url("@/assets/Home_IMG/activationProcess_btn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 270px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
margin: 50px auto;
|
||
|
||
a {
|
||
color: #fff;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.infoBanner {
|
||
background: url("@/assets/Home_IMG/activationProcess_banner.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
width: 60%;
|
||
text-align: center;
|
||
line-height: 45px;
|
||
margin: 0.5% auto;
|
||
height: 45px;
|
||
}
|
||
}
|
||
|
||
.hotProducts {
|
||
width: 100%;
|
||
min-height: 600px;
|
||
background: url("@/assets/Home_IMG/home_banner2.png");
|
||
padding-top: 6%;
|
||
padding-bottom: 5%;
|
||
|
||
|
||
&_title {
|
||
text-align: center;
|
||
font-size: 34px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.hotProducts_content_carousel {
|
||
margin-top: 20px;
|
||
|
||
.el-carousel__item {
|
||
width: 80%;
|
||
z-index: 0;
|
||
margin-left: 10%;
|
||
margin-right: 10%;
|
||
background: #f7f7f7;
|
||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.item {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 5%;
|
||
|
||
.item_mini {
|
||
width: 20%;
|
||
height: 170px;
|
||
padding: 12px;
|
||
position: relative;
|
||
box-shadow: 10px 10px 12px 9px rgba(4, 141, 200, 0.1);
|
||
margin-left: 3%;
|
||
margin-right: 3%;
|
||
text-align: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 23px;
|
||
}
|
||
|
||
.desc {
|
||
color: #1685f8;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.icon {
|
||
width: 150px;
|
||
height: 150px;
|
||
position: absolute;
|
||
left: -50px;
|
||
top: -20px;
|
||
|
||
img {
|
||
width: 150px;
|
||
height: 250px;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 120px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
background-color: #ffd92e;
|
||
position: absolute;
|
||
right: 30px;
|
||
bottom: 30px;
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: #000;
|
||
|
||
div {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: #fff;
|
||
|
||
div {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.productAdvantages {
|
||
width: 100%;
|
||
min-height: 600px;
|
||
padding-top: 3%;
|
||
padding-bottom: 5%;
|
||
|
||
&_title {
|
||
text-align: center;
|
||
font-size: 34px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
&_content {
|
||
display: flex;
|
||
width: 90%;
|
||
margin: 1% auto 0 auto;
|
||
|
||
&_mini {
|
||
margin-left: 5%;
|
||
margin-top: 160px;
|
||
|
||
.title {
|
||
color: #60b7f6;
|
||
font-size: 34px;
|
||
font-size: 60px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.bar {
|
||
width: 4px;
|
||
height: 440px;
|
||
background-color: #0059ff;
|
||
margin-top: 2%;
|
||
}
|
||
|
||
.desc {
|
||
margin-left: 30px;
|
||
|
||
.desc_title {
|
||
font-size: 30px;
|
||
margin-top: 10px;
|
||
margin-bottom: 6%;
|
||
}
|
||
|
||
.desc_content {
|
||
width: 470px;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.desc_btn {
|
||
background: url("@/assets/Home_IMG/productAdvantages_btn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 300px;
|
||
height: 70px;
|
||
color: #fff;
|
||
line-height: 70px;
|
||
text-align: left;
|
||
padding-left: 30px;
|
||
margin-left: -18px;
|
||
margin-top: 35px;
|
||
font-size: 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_mini2 {
|
||
margin-left: 5%;
|
||
|
||
.row {
|
||
display: flex;
|
||
|
||
.item {
|
||
width: 40%;
|
||
height: 270px;
|
||
border: 4px solid #60b7f6;
|
||
margin: 4% 2% 0 2%;
|
||
padding: 12px;
|
||
position: relative;
|
||
|
||
.icon_title {
|
||
display: flex;
|
||
margin-top: -10px;
|
||
|
||
.icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
|
||
img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 25px;
|
||
font-weight: 600;
|
||
margin-top: 30px;
|
||
color: #60b7f6;
|
||
}
|
||
}
|
||
|
||
.english_title {
|
||
font-size: 18px;
|
||
color: #606060;
|
||
margin-top: -10px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.desc {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
margin-top: 5%;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.btn {
|
||
background: url("@/assets/Home_IMG/productAdvantages_btn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 200px;
|
||
height: 50px;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
padding-left: 20px;
|
||
line-height: 50px;
|
||
position: absolute;
|
||
left: 5px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sceneInfo {
|
||
width: 100%;
|
||
min-height: 600px;
|
||
padding-top: 6%;
|
||
padding-bottom: 6%;
|
||
background: url("@/assets/Home_IMG/home_banner2.png");
|
||
|
||
&_title {
|
||
text-align: center;
|
||
font-size: 34px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
&_content {
|
||
width: 80%;
|
||
margin: 1% auto 0 auto;
|
||
|
||
.item {
|
||
position: relative;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.desc_content {
|
||
position: absolute;
|
||
bottom: 5%;
|
||
color: #fff;
|
||
width: 90%;
|
||
left: 5%;
|
||
right: 5%;
|
||
bottom: 60px;
|
||
|
||
.desc {
|
||
width: 50%;
|
||
background-color: rgba(98, 98, 98, 0.5);
|
||
padding: 12px;
|
||
margin-top: 2%;
|
||
}
|
||
|
||
.title {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.partnerModule {
|
||
background: url("@/assets/Home_IMG/partnerModule.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
min-height: 500px;
|
||
padding-bottom: 5%;
|
||
}
|
||
|
||
.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: #1f8fcc;
|
||
}
|
||
|
||
.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: #1f8fcc;
|
||
}
|
||
|
||
.date {
|
||
color: #666;
|
||
|
||
.date_blue {
|
||
color: #1f8fcc;
|
||
font-size: 25px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
margin-left: 10%;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
</style>
|