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>
|