552 lines
13 KiB
Vue
552 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="banner">
|
|||
|
|
<div class="banner_title">
|
|||
|
|
锐联云管家 <span> Services we offer </span>
|
|||
|
|
</div>
|
|||
|
|
<div class="blue_bar"></div>
|
|||
|
|
<div class="banner_item">
|
|||
|
|
<div v-for="item in banner_item_List" :key="item.index" class="item"
|
|||
|
|
:style="showHomeAndroid == true && item.index === '2' ? 'margin-left: 39%;' : ''">
|
|||
|
|
<div class="item_title">{{ item.title }}</div>
|
|||
|
|
<div v-for="i in item.childer" class="item_container">
|
|||
|
|
<div class="icon"><img :src="i.icon" alt=""/></div>
|
|||
|
|
<div class="desc">{{ i.desc }}</div>
|
|||
|
|
<div class="desc">{{ i.desc2 }}</div>
|
|||
|
|
<div class="desc">{{ i.desc3 }}</div>
|
|||
|
|
<div class="desc">{{ i.desc4 }}</div>
|
|||
|
|
<div v-if="i.index === '2-1'" class="play_icon_box">
|
|||
|
|
<div v-for="play in i.childer" class="play_icon">
|
|||
|
|
<img :src="play.icon" alt=""/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="activationProcess">
|
|||
|
|
<div class="activationProcess_title">开通流程</div>
|
|||
|
|
<div class="blue_bar"></div>
|
|||
|
|
<div class="infoBanner">
|
|||
|
|
我们欢迎您来交流技术或业务问题，即使不立即购买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="/contact"
|
|||
|
|
>
|
|||
|
|
<div style="height: 100%; width: 100%">点击此处联系我们</div>
|
|||
|
|
</a
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
head() {
|
|||
|
|
return {
|
|||
|
|
title: 'AWS 服务',
|
|||
|
|
meta: [
|
|||
|
|
{hid: 'description', name: 'description', content: '这是默认的描述内容'},
|
|||
|
|
{hid: 'keywords', name: 'keywords', content: 'vue, nuxt, seo'}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showHomeAndroid: false,
|
|||
|
|
screenWidth: null,
|
|||
|
|
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",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
banner_item_List: [
|
|||
|
|
{
|
|||
|
|
index: "1",
|
|||
|
|
title: "AWS账户开通",
|
|||
|
|
childer: [
|
|||
|
|
{
|
|||
|
|
index: "1-1",
|
|||
|
|
icon: require("@/assets/AwsServices/server1.png"),
|
|||
|
|
desc: "免实名免备案",
|
|||
|
|
desc2: "一秒开户",
|
|||
|
|
desc3: "技术支持",
|
|||
|
|
desc4: "代充代付",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
index: "2",
|
|||
|
|
title: "AWS账户代付",
|
|||
|
|
childer: [
|
|||
|
|
{
|
|||
|
|
index: "2-1",
|
|||
|
|
icon: require("@/assets/AwsServices/server2.png"),
|
|||
|
|
desc: "全渠道支付",
|
|||
|
|
desc2: "秒付账单",
|
|||
|
|
childer: [
|
|||
|
|
{index: "2-1-1", icon: require("@/assets/cases/pay1.png")},
|
|||
|
|
{index: "2-1-2", icon: require("@/assets/cases/pay2.png")},
|
|||
|
|
{index: "2-1-3", icon: require("@/assets/cases/pay3.png")},
|
|||
|
|
{
|
|||
|
|
index: "2-1-4",
|
|||
|
|
icon: require("@/assets/cases/pay4.png"),
|
|||
|
|
},
|
|||
|
|
{index: "2-1-5", icon: require("@/assets/cases/pay5.png")},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
index: "3",
|
|||
|
|
title: "AWS账号解封",
|
|||
|
|
childer: [
|
|||
|
|
{
|
|||
|
|
index: "2-1",
|
|||
|
|
icon: require("@/assets/AwsServices/server3.png"),
|
|||
|
|
desc: "技术专线联系",
|
|||
|
|
desc2: "秒解秒付账单",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
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 lang="scss" scoped>
|
|||
|
|
@media screen and (max-width: 800px) {
|
|||
|
|
.banner {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 600px;
|
|||
|
|
background: url("@/assets/Home_IMG/home_banner2.png") no-repeat;
|
|||
|
|
background-size: 500% 100%;
|
|||
|
|
padding-top: 20%;
|
|||
|
|
|
|||
|
|
&_title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
width: 50%;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
color: rgb(0, 157, 255);
|
|||
|
|
font-weight: bold;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
color: #000000;
|
|||
|
|
display: block;
|
|||
|
|
font-weight: lighter;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blue_bar {
|
|||
|
|
background: rgb(0, 157, 255);
|
|||
|
|
width: 20%;
|
|||
|
|
height: 3px;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_item {
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 3% auto;
|
|||
|
|
padding-bottom: 20px;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: 60%;
|
|||
|
|
height: 100px;
|
|||
|
|
background-color: rgb(0, 157, 255);
|
|||
|
|
margin: 3% 5% 55% 2%;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_title {
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 2.5;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_container {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 90%;
|
|||
|
|
height: 250px;
|
|||
|
|
box-shadow: 0px -2px 10px rgba(0, 213, 255, 0.726);
|
|||
|
|
background-color: #fff;
|
|||
|
|
left: 15px;
|
|||
|
|
border-bottom: 20px solid rgb(0, 157, 255);
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 2%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.play_icon_box {
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 10%;
|
|||
|
|
justify-content: center;
|
|||
|
|
.play_icon {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.activationProcess {
|
|||
|
|
margin-top: 4%;
|
|||
|
|
padding-bottom: 4%;
|
|||
|
|
|
|||
|
|
&_title {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 34px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.activationProcess_content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap; /* 让元素可以换行 */
|
|||
|
|
margin-top: 20px;
|
|||
|
|
padding: 3%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: 50%; /* 每个项目的固定宽度 */
|
|||
|
|
margin: 20px 0; /* 每个项目的外边距 */
|
|||
|
|
text-align: center; /* 使文字和图标居中 */
|
|||
|
|
border-right: 2px solid #007bff; /* 右边加分割线 */
|
|||
|
|
padding: 20px 10px;
|
|||
|
|
box-sizing: border-box; /* 确保 padding 不影响宽度 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.item:nth-child(1) {
|
|||
|
|
border-left: 2px solid #007bff; /* 去掉最后一个元素的右边框 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item:nth-child(3) {
|
|||
|
|
border-left: 2px solid #007bff; /* 去掉最后一个元素的右边框 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.index {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
line-height: 50px;
|
|||
|
|
background: #007bff; /* 蓝色编号 */
|
|||
|
|
margin-bottom: 10px; /* 编号和图标之间的间距 */
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon img {
|
|||
|
|
width: 80px; /* 控制图标大小 */
|
|||
|
|
height: 80px;
|
|||
|
|
margin-bottom: 10px; /* 图标和标题之间的间距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 5px; /* 中文标题和英文标题的间距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title_english {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #007bff; /* 蓝色英文标题 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blue_bar{
|
|||
|
|
width: 90%; /* 设置下划线的宽度 */
|
|||
|
|
height: 2px; /* 设置下划线的高度 */
|
|||
|
|
background-color: #1685f8; /* 蓝色下划线 */
|
|||
|
|
margin: 0 auto 10px auto; /* 居中对齐 */
|
|||
|
|
}
|
|||
|
|
&_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: 0 auto;
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infoBanner {
|
|||
|
|
font-size: 14px; /* 调整描述的字体大小 */
|
|||
|
|
line-height: 1.5; /* 调整行高 */
|
|||
|
|
color: #666; /* 调整文字颜色 */
|
|||
|
|
max-width: 90%; /* 可选：限制文字宽度 */
|
|||
|
|
margin: 0 auto; /* 使描述文字居中 */
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media screen and (min-width: 800px) {
|
|||
|
|
.banner {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 420px;
|
|||
|
|
//background: url("@/assets/Home_IMG/home_banner2.png");
|
|||
|
|
padding-top: 7%;
|
|||
|
|
|
|||
|
|
&_title {
|
|||
|
|
font-size: 30px;
|
|||
|
|
line-height: 2;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
width: 50%;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
color: rgb(0, 157, 255);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blue_bar {
|
|||
|
|
background: rgb(0, 157, 255);
|
|||
|
|
width: 50%;
|
|||
|
|
height: 3px;
|
|||
|
|
margin: 0 auto 2% auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_item {
|
|||
|
|
width: 70%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: 27%;
|
|||
|
|
height: 200px;
|
|||
|
|
background-color: rgb(0, 157, 255);
|
|||
|
|
margin: 0 5% 0 2%;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_title {
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 2.5;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_container {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 90%;
|
|||
|
|
height: 230px;
|
|||
|
|
box-shadow: 0px -2px 10px rgba(0, 213, 255, 0.726);
|
|||
|
|
background-color: #fff;
|
|||
|
|
left: 15px;
|
|||
|
|
border-bottom: 20px solid rgb(0, 157, 255);
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 2%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.play_icon_box {
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 10%;
|
|||
|
|
justify-content: center;
|
|||
|
|
.play_icon {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.activationProcess {
|
|||
|
|
margin-top: 4%;
|
|||
|
|
padding-bottom: 4%;
|
|||
|
|
|
|||
|
|
&_title {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 34px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_content {
|
|||
|
|
width: 70%;
|
|||
|
|
margin: 2% auto 0 auto;
|
|||
|
|
display: flex;
|
|||
|
|
border-left: 1px solid #0059ff;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: 20%;
|
|||
|
|
min-height: 260px;
|
|||
|
|
padding: 0 24px;
|
|||
|
|
border-right: 1px solid #0059ff;
|
|||
|
|
|
|||
|
|
.index {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
line-height: 60px;
|
|||
|
|
background-color: #027aff;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
margin-left: 30%;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
img{
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title_english {
|
|||
|
|
color: #1685f8;
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_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: 30px 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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|