1063 lines
26 KiB
Vue
1063 lines
26 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="pricing_view">
|
||
|
|
<div class="pricing_view_tabs_content">
|
||
|
|
<div class="pricing_disp">
|
||
|
|
<div
|
||
|
|
v-for="item in pricing_view_tabs_list"
|
||
|
|
:key="item.index"
|
||
|
|
class="pricing_view_tabs_title"
|
||
|
|
@click="tabsIActck(item.index)"
|
||
|
|
>
|
||
|
|
<div class="item_img"><img :src="item.img" alt=""/></div>
|
||
|
|
<div
|
||
|
|
class="item_title"
|
||
|
|
:class="{ 'blue-text': tabsIndex === item.index }"
|
||
|
|
>
|
||
|
|
{{ item.title }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="showHomeAndroid == true">
|
||
|
|
<van-swipe
|
||
|
|
v-for="item in pricing_view_tabs_list"
|
||
|
|
:key="item.index"
|
||
|
|
class="pricing_view_tabs_content_mini"
|
||
|
|
v-if="item.index === tabsIndex"
|
||
|
|
:loop="false"
|
||
|
|
:width="230"
|
||
|
|
>
|
||
|
|
<van-swipe-item
|
||
|
|
v-for="i in item.childer"
|
||
|
|
:key="i.index"
|
||
|
|
:class="['item', item.index === '2' ? 'server_item' : '']"
|
||
|
|
class="item"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<div class="region">{{ i.region }}</div>
|
||
|
|
<div class="server">{{ i.server }}</div>
|
||
|
|
<div class="price">
|
||
|
|
$<span>{{ i.price }}</span
|
||
|
|
>/ 月
|
||
|
|
</div>
|
||
|
|
<div v-if="item.index != '4'" class="originalPrice">
|
||
|
|
{{ i.originalPrice }}
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-if="item.index == '3' || item.index == '4'"
|
||
|
|
class="contact_btn_box"
|
||
|
|
>
|
||
|
|
<div class="contact_btn">
|
||
|
|
<a :href="i.url"
|
||
|
|
>
|
||
|
|
<div style="height: 100%; width: 100%">
|
||
|
|
{{ i.childer[i.currentSpecIndex].btn }}
|
||
|
|
</div>
|
||
|
|
</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else class="carousel">
|
||
|
|
<div
|
||
|
|
class="left_go"
|
||
|
|
:class="['left_go', item.index === '2' ? 'left_go2' : '']"
|
||
|
|
@click="prevSpec(item.index, i.index)"
|
||
|
|
>
|
||
|
|
<a><img src="@/assets/pricing/left_go.png" alt=""/></a>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="specs_desc_box"
|
||
|
|
:class="[
|
||
|
|
'specs_desc_box',
|
||
|
|
item.index === '2' ? 'specs_desc_box2' : '',
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].specs }}</div>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].daikuan }}</div>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].dataDisk }}</div>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].dataTraffic }}</div>
|
||
|
|
<div>
|
||
|
|
{{ i.childer[i.currentSpecIndex].pricingModel }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="right_go"
|
||
|
|
:class="['right_go', item.index === '2' ? 'right_go2' : '']"
|
||
|
|
@click="nextSpec(item.index, i.index)"
|
||
|
|
>
|
||
|
|
<a><img src="@/assets/pricing/right_go.png" alt=""/></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</van-swipe-item>
|
||
|
|
</van-swipe>
|
||
|
|
</div>
|
||
|
|
<div v-if="showHomeAndroid == false">
|
||
|
|
<div
|
||
|
|
v-for="item in pricing_view_tabs_list"
|
||
|
|
:key="item.index"
|
||
|
|
class="pricing_view_tabs_content_mini"
|
||
|
|
:class="['pricing_view_tabs_content_mini', item.index === '2' ? 'server_width' : '']"
|
||
|
|
v-if="item.index === tabsIndex"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="i in item.childer"
|
||
|
|
:key="i.index"
|
||
|
|
class="item"
|
||
|
|
:class="['item', item.index === '2' ? 'server_item' : '']"
|
||
|
|
>
|
||
|
|
<div class="region">{{ i.region }}</div>
|
||
|
|
<div class="server">{{ i.server }}</div>
|
||
|
|
<div class="price">
|
||
|
|
$<span>{{ i.price }}</span
|
||
|
|
>/ 月
|
||
|
|
</div>
|
||
|
|
<div v-if="item.index != '4'" class="originalPrice">
|
||
|
|
{{ i.originalPrice }}
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-if="item.index == '3' || item.index == '4'"
|
||
|
|
class="contact_btn_box"
|
||
|
|
>
|
||
|
|
<div class="contact_btn">
|
||
|
|
<a :href="i.childer[i.currentSpecIndex].url"
|
||
|
|
>
|
||
|
|
<div style="height: 100%; width: 100%">
|
||
|
|
{{ i.childer[i.currentSpecIndex].btn }}
|
||
|
|
</div>
|
||
|
|
</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else class="carousel">
|
||
|
|
<div
|
||
|
|
class="left_go"
|
||
|
|
:class="['left_go', item.index === '2' ? 'left_go2' : '']"
|
||
|
|
@click="prevSpec(item.index, i.index)"
|
||
|
|
>
|
||
|
|
<a><img src="@/assets/pricing/left_go.png" alt=""/></a>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="specs_desc_box"
|
||
|
|
:class="[
|
||
|
|
'specs_desc_box',
|
||
|
|
item.index === '2' ? 'specs_desc_box2' : '',
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].specs }}</div>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].daikuan }}</div>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].dataDisk }}</div>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].dataTraffic }}</div>
|
||
|
|
<div>{{ i.childer[i.currentSpecIndex].pricingModel }}</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="right_go"
|
||
|
|
:class="['right_go', item.index === '2' ? 'right_go2' : '']"
|
||
|
|
@click="nextSpec(item.index, i.index)"
|
||
|
|
>
|
||
|
|
<a><img src="@/assets/pricing/right_go.png" alt=""/></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="showHomeAndroid == false" class="pricing_view_tabs_content2">
|
||
|
|
<div class="pricing_view_tabs_content2_title">
|
||
|
|
<div
|
||
|
|
v-for="item in pricing_view_tabs_list2"
|
||
|
|
@click="tabsIActck2(item.index)"
|
||
|
|
class="item"
|
||
|
|
:class="['item', item.index === tabsIndex2 ? 'item2' : '']"
|
||
|
|
>
|
||
|
|
{{ item.title }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pricing_view_tabs_content2_bar"></div>
|
||
|
|
<div
|
||
|
|
v-for="item in pricing_view_tabs_list2"
|
||
|
|
v-if="item.index == tabsIndex2"
|
||
|
|
class="pricing_view_tabs_content2_desc"
|
||
|
|
>
|
||
|
|
<div v-for="i in item.childer" class="item">
|
||
|
|
<div class="item_mini">
|
||
|
|
<div class="name">{{ i.name }}</div>
|
||
|
|
<div class="btn">
|
||
|
|
<a :href="i.url"
|
||
|
|
>
|
||
|
|
<div>{{ i.btn }}</div>
|
||
|
|
</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="img"><img :src="i.img" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="showHomeAndroid == true" class="pricing_view_tabs_content2">
|
||
|
|
<van-swipe
|
||
|
|
v-for="item in pricing_view_tabs_list"
|
||
|
|
:key="item.index"
|
||
|
|
class="pricing_view_tabs_content2_title"
|
||
|
|
v-if="item.index === tabsIndex"
|
||
|
|
:loop="false"
|
||
|
|
:width="80"
|
||
|
|
>
|
||
|
|
<van-swipe-item
|
||
|
|
v-for="item in pricing_view_tabs_list2"
|
||
|
|
@click="tabsIActck2(item.index)"
|
||
|
|
class="item"
|
||
|
|
:class="['item', item.index === tabsIndex2 ? 'item2' : '']"
|
||
|
|
:key="item.index + item.title"
|
||
|
|
>
|
||
|
|
{{ item.title }}
|
||
|
|
</van-swipe-item>
|
||
|
|
</van-swipe>
|
||
|
|
<!-- <div class="pricing_view_tabs_content2_bar"></div> -->
|
||
|
|
<van-swipe
|
||
|
|
v-for="item in pricing_view_tabs_list2"
|
||
|
|
v-if="item.index == tabsIndex2"
|
||
|
|
:key="item.index"
|
||
|
|
class="pricing_view_tabs_content2_desc"
|
||
|
|
:loop="false"
|
||
|
|
:width="250"
|
||
|
|
>
|
||
|
|
<van-swipe-item
|
||
|
|
v-for="i in item.childer"
|
||
|
|
:key="item.index"
|
||
|
|
class="item"
|
||
|
|
>
|
||
|
|
<div class="item_mini">
|
||
|
|
<div class="name">{{ i.name }}</div>
|
||
|
|
<div class="btn">
|
||
|
|
<a :href="i.url"
|
||
|
|
>
|
||
|
|
<div>{{ i.btn }}</div>
|
||
|
|
</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="img"><img :src="i.img" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</van-swipe-item>
|
||
|
|
</van-swipe>
|
||
|
|
</div>
|
||
|
|
<contactView v-if="showHomeAndroid == true"></contactView>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import contactView from '@/pages/contact.vue';
|
||
|
|
// 引入数据
|
||
|
|
import { pricing_view_tabs_list } from '@/pricingData.js'; // 使用实际路径
|
||
|
|
|
||
|
|
export default {
|
||
|
|
head() {
|
||
|
|
return {
|
||
|
|
title: '定价计划-大带宽服务器',
|
||
|
|
meta: [
|
||
|
|
{hid: 'description', name: 'description', content: '这是默认的描述内容'},
|
||
|
|
{hid: 'keywords', name: 'keywords', content: 'vue, nuxt, seo'}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
contactView
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabsIndex: "1",
|
||
|
|
tabsIndex2: "2",
|
||
|
|
currentItemIndex: 0, // 默认显示第一个区域
|
||
|
|
// currentSpecIndex: 0, // 默认显示第一个规格项
|
||
|
|
showHomeAndroid: false,
|
||
|
|
screenWidth: null,
|
||
|
|
pricing_view_tabs_list,
|
||
|
|
pricing_view_tabs_list2: [
|
||
|
|
{
|
||
|
|
index: "1",
|
||
|
|
title: "区块链",
|
||
|
|
childer: [
|
||
|
|
{
|
||
|
|
index: "1-1",
|
||
|
|
name: "区块链搭建",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "1-2",
|
||
|
|
name: "多种数据库服务",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "2",
|
||
|
|
title: "存储",
|
||
|
|
childer: [
|
||
|
|
{
|
||
|
|
index: "2-1",
|
||
|
|
name: "S3",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "2-2",
|
||
|
|
name: "块存储",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "2-3",
|
||
|
|
name: "低成本归档存储",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "3",
|
||
|
|
title: "网络服务",
|
||
|
|
childer: [
|
||
|
|
{
|
||
|
|
index: "3-1",
|
||
|
|
name: "CDN",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "3-2",
|
||
|
|
name: "高防盾(shield)",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "3-3",
|
||
|
|
name: "跨境数据传输",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "4",
|
||
|
|
title: "技术支持",
|
||
|
|
childer: [
|
||
|
|
{
|
||
|
|
index: "4-1",
|
||
|
|
name: "技术支持1",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "4-2",
|
||
|
|
name: "技术支持2",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "4-3",
|
||
|
|
name: "技术支持3",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "5",
|
||
|
|
title: "游戏",
|
||
|
|
childer: [
|
||
|
|
{
|
||
|
|
index: "5-1",
|
||
|
|
name: "Aomzon GameLife",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "5-2",
|
||
|
|
name: "Aomzon GameSparks",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "5-3",
|
||
|
|
name: "AWS游戏套件",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "6",
|
||
|
|
title: "媒体视频",
|
||
|
|
childer: [
|
||
|
|
{
|
||
|
|
index: "6-1",
|
||
|
|
name: "媒体视频",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "6-2",
|
||
|
|
name: "媒体视频",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "6-3",
|
||
|
|
name: "媒体视频",
|
||
|
|
btn: "前往询价",
|
||
|
|
url: "/contact",
|
||
|
|
img: require("@/assets/pricing/jqr.png"),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
bodyScale() {
|
||
|
|
var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
|
||
|
|
if(devicewidth<=1600){
|
||
|
|
var scale = devicewidth / 1600; // 分母——设计稿的尺寸
|
||
|
|
document.body.style.zoom = scale; //放大缩小相应倍数
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tabsIActck(index) {
|
||
|
|
this.tabsIndex = index;
|
||
|
|
},
|
||
|
|
tabsIActck2(index) {
|
||
|
|
this.tabsIndex2 = index;
|
||
|
|
},
|
||
|
|
prevSpec(itemIndex, childIndex) {
|
||
|
|
const item = this.pricing_view_tabs_list.find(
|
||
|
|
(el) => el.index === itemIndex
|
||
|
|
);
|
||
|
|
const childItem = item.childer.find((el) => el.index === childIndex);
|
||
|
|
if (childItem && childItem.childer && childItem.childer.length > 0) {
|
||
|
|
if (childItem.currentSpecIndex === 0) {
|
||
|
|
childItem.currentSpecIndex = childItem.childer.length - 1;
|
||
|
|
} else {
|
||
|
|
childItem.currentSpecIndex--;
|
||
|
|
}
|
||
|
|
// 更新 price 和 originalPrice
|
||
|
|
const spec = childItem.childer[childItem.currentSpecIndex];
|
||
|
|
childItem.price = spec.price;
|
||
|
|
childItem.originalPrice = spec.originalPrice;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
nextSpec(itemIndex, childIndex) {
|
||
|
|
const item = this.pricing_view_tabs_list.find(
|
||
|
|
(el) => el.index === itemIndex
|
||
|
|
);
|
||
|
|
const childItem = item.childer.find((el) => el.index === childIndex);
|
||
|
|
if (childItem && childItem.childer && childItem.childer.length > 0) {
|
||
|
|
if (childItem.currentSpecIndex === childItem.childer.length - 1) {
|
||
|
|
childItem.currentSpecIndex = 0;
|
||
|
|
} else {
|
||
|
|
childItem.currentSpecIndex++;
|
||
|
|
}
|
||
|
|
// 更新 price 和 originalPrice
|
||
|
|
const spec = childItem.childer[childItem.currentSpecIndex];
|
||
|
|
childItem.price = spec.price;
|
||
|
|
childItem.originalPrice = spec.originalPrice;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@media screen and (max-width: 800px) {
|
||
|
|
.my-swipe .van-swipe-item {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 150px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #39a9ed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blue-text {
|
||
|
|
color: #027AFF !important;
|
||
|
|
}
|
||
|
|
.pricing_view {
|
||
|
|
min-height: 1000px;
|
||
|
|
width: 100%;
|
||
|
|
padding-top: 5%;
|
||
|
|
}
|
||
|
|
.contact_btn_box {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
background: #fff;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
min-height: 60px;
|
||
|
|
border-top: 1px solid #45beff;
|
||
|
|
}
|
||
|
|
.contact_btn {
|
||
|
|
width: 120px;
|
||
|
|
height: 30px;
|
||
|
|
margin: 5% auto;
|
||
|
|
background-color: #fee064;
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #000;
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pricing_view_tabs_content {
|
||
|
|
width: 100%;
|
||
|
|
margin: 10% auto 0 auto;
|
||
|
|
|
||
|
|
.specs_desc_box2 {
|
||
|
|
line-height: 1.5 !important;
|
||
|
|
font-size: 14px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.server_item {
|
||
|
|
min-height: 350px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left_go2 {
|
||
|
|
margin-top: 30px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_go2 {
|
||
|
|
margin-top: 30px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carousel {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
background: #fff;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
min-height: 60px;
|
||
|
|
border-top: 1px solid #45beff;
|
||
|
|
|
||
|
|
.left_go {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-top: 15px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.specs_desc_box {
|
||
|
|
width: 120px;
|
||
|
|
min-height: 60px;
|
||
|
|
line-height: 60px;
|
||
|
|
|
||
|
|
color: #45beff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_go {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
margin-top: 15px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pricing_view_tabs_content_mini {
|
||
|
|
display: flex;
|
||
|
|
width: 99%;
|
||
|
|
min-height: 300px;
|
||
|
|
margin: 10% auto 0 auto;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
border: 1px solid #45beff;
|
||
|
|
width: 200px !important;
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-left: 10px;
|
||
|
|
background: url("@/assets/Home_IMG/home_banner2.png") no-repeat;
|
||
|
|
background-size: 180% 90%;
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
min-height: 291px;
|
||
|
|
|
||
|
|
.region {
|
||
|
|
margin-top: 25%;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 24px;
|
||
|
|
line-height: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.server {
|
||
|
|
color: #45beff;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
color: #f66607;
|
||
|
|
margin-top: 10%;
|
||
|
|
font-size: 20px;
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 24px;
|
||
|
|
margin: 0 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.originalPrice {
|
||
|
|
margin-top: 20px;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pricing_disp {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.pricing_view_tabs_title {
|
||
|
|
width: 100px;
|
||
|
|
height: 150px;
|
||
|
|
margin-right: 2%;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
.item_img {
|
||
|
|
width: 100px;
|
||
|
|
height: 150px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100px;
|
||
|
|
height: 150px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item_title {
|
||
|
|
width: 100px;
|
||
|
|
box-shadow: 0px 4px 10px rgba(0, 213, 255, 0.726);
|
||
|
|
text-align: center;
|
||
|
|
padding: 5px 0;
|
||
|
|
color: #636363;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pricing_view_tabs_content2 {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 300px;
|
||
|
|
margin-top: 15%;
|
||
|
|
|
||
|
|
.pricing_view_tabs_content2_title {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
font-size: 18px;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item2 {
|
||
|
|
color: #45beff;
|
||
|
|
border-bottom: 3px solid;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pricing_view_tabs_content2_bar {
|
||
|
|
height: 3px;
|
||
|
|
width: 90%;
|
||
|
|
background-color: #45beff;
|
||
|
|
margin: 1% auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pricing_view_tabs_content2_desc {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
min-height: 120px;
|
||
|
|
padding: 10px;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 50% !important;
|
||
|
|
box-shadow: 0px 4px 10px rgb(130, 229, 249);
|
||
|
|
margin: 0 1%;
|
||
|
|
padding-left: 10px;
|
||
|
|
padding-top: 10px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
min-height: 80px;
|
||
|
|
|
||
|
|
.item_mini {
|
||
|
|
border-left: 3px solid rgb(2, 204, 244);
|
||
|
|
min-height: 80px;
|
||
|
|
padding-left: 5%;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.name {
|
||
|
|
position: absolute;
|
||
|
|
top: 30%;
|
||
|
|
right: 6%;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
position: absolute;
|
||
|
|
bottom: -10px;
|
||
|
|
left: 0;
|
||
|
|
width: 200px;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
background: url("@/assets/Home_IMG/productAdvantages_btn.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
padding-left: 15px;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.img {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10px;
|
||
|
|
left: 10px;
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 800px) {
|
||
|
|
.blue-text {
|
||
|
|
color: #027AFF !important;
|
||
|
|
}
|
||
|
|
.pricing_view {
|
||
|
|
min-height: 1000px;
|
||
|
|
width: 100%;
|
||
|
|
padding-top: 4%;
|
||
|
|
}
|
||
|
|
.contact_btn_box {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
background: #fff;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
min-height: 60px;
|
||
|
|
border-top: 1px solid #45beff;
|
||
|
|
}
|
||
|
|
.contact_btn {
|
||
|
|
width: 120px;
|
||
|
|
height: 30px;
|
||
|
|
margin: 5% auto;
|
||
|
|
background-color: #fee064;
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #000;
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pricing_view_tabs_content {
|
||
|
|
width: 80%;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
.specs_desc_box2 {
|
||
|
|
line-height: 1.5 !important;
|
||
|
|
font-size: 14px !important;
|
||
|
|
}
|
||
|
|
.server_width{
|
||
|
|
width: 80% !important;
|
||
|
|
}
|
||
|
|
.server_item {
|
||
|
|
min-height: 370px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left_go2 {
|
||
|
|
margin-top: 30px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_go2 {
|
||
|
|
margin-top: 30px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carousel {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
background: #fff;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
min-height: 60px;
|
||
|
|
border-top: 1px solid #45beff;
|
||
|
|
|
||
|
|
.left_go {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
margin-left: 30px;
|
||
|
|
margin-top: 15px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.specs_desc_box {
|
||
|
|
width: 120px;
|
||
|
|
min-height: 60px;
|
||
|
|
line-height: 60px;
|
||
|
|
|
||
|
|
color: #45beff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_go {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
margin-top: 15px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pricing_view_tabs_content_mini {
|
||
|
|
display: flex;
|
||
|
|
width: 60%;
|
||
|
|
min-height: 300px;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 40%;
|
||
|
|
border: 1px solid #45beff;
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-left: 10px;
|
||
|
|
background: url("@/assets/Home_IMG/home_banner2.png") no-repeat;
|
||
|
|
background-size: 180% 90%;
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
min-height: 200px;
|
||
|
|
|
||
|
|
.region {
|
||
|
|
margin-top: 25%;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 24px;
|
||
|
|
line-height: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.server {
|
||
|
|
color: #45beff;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
color: #f66607;
|
||
|
|
margin-top: 10%;
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 24px;
|
||
|
|
margin: 0 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.originalPrice {
|
||
|
|
margin-top: 20px;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pricing_disp {
|
||
|
|
display: flex;
|
||
|
|
width: 60%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.pricing_view_tabs_title {
|
||
|
|
width: 200px;
|
||
|
|
height: 250px;
|
||
|
|
margin-right: 8%;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
.item_img {
|
||
|
|
width: 130px;
|
||
|
|
height: 200px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 130px;
|
||
|
|
height: 200px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item_title {
|
||
|
|
width: 150px;
|
||
|
|
box-shadow: 0px 4px 10px rgba(0, 213, 255, 0.726);
|
||
|
|
text-align: center;
|
||
|
|
padding: 5px 0;
|
||
|
|
color: #636363;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pricing_view_tabs_content2 {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 300px;
|
||
|
|
margin-top: 5%;
|
||
|
|
|
||
|
|
.pricing_view_tabs_content2_title {
|
||
|
|
display: flex;
|
||
|
|
width: 50%;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-left: 5%;
|
||
|
|
margin-right: 5%;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item2 {
|
||
|
|
color: #45beff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pricing_view_tabs_content2_bar {
|
||
|
|
height: 3px;
|
||
|
|
width: 60%;
|
||
|
|
background-color: #45beff;
|
||
|
|
margin: 1% auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pricing_view_tabs_content2_desc {
|
||
|
|
width: 70%;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 100%;
|
||
|
|
box-shadow: 0px 4px 10px rgb(130, 229, 249);
|
||
|
|
margin: 0 2%;
|
||
|
|
padding-left: 20px;
|
||
|
|
padding-top: 10px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
min-height: 130px;
|
||
|
|
|
||
|
|
.item_mini {
|
||
|
|
border-left: 3px solid rgb(2, 204, 244);
|
||
|
|
min-height: 130px;
|
||
|
|
padding-left: 5%;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.name {
|
||
|
|
position: absolute;
|
||
|
|
top: 30%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0px;
|
||
|
|
left: 0;
|
||
|
|
width: 200px;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
background: url("@/assets/Home_IMG/productAdvantages_btn.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
padding-left: 15px;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.img {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10px;
|
||
|
|
right: 10px;
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|