477 lines
15 KiB
Vue
477 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <div class="banner">-->
|
||
<!-- <div class="banner_btn">-->
|
||
<!-- <a href="">-->
|
||
<!-- <div>免费加入Raylinx订阅计划</div>-->
|
||
<!-- </a>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<div class="cases_content">
|
||
<div class="cases_content_tabs">
|
||
<van-swipe class="cases_content_tabs_title" :loop="false"
|
||
:width="120">
|
||
<van-swipe-item
|
||
v-for="item in cases_tabs_List"
|
||
:class="{ active: item.index === tabs_index }"
|
||
class="item"
|
||
:key="item.index"
|
||
@click="tabs_click(item.index)"
|
||
>
|
||
{{ item.name }}
|
||
</van-swipe-item>
|
||
</van-swipe>
|
||
<div class="cases_content_tabs_mini">
|
||
<div v-for="item in cases_tabs_List">
|
||
<div
|
||
v-for="i in item.childer"
|
||
v-if="item.index == tabs_index"
|
||
class="cases_content_tabs_desc"
|
||
>
|
||
<div class="item_img"><img :src="i.img" alt=""/></div>
|
||
<div class="item">
|
||
<div class="item_bar"></div>
|
||
<div>
|
||
<div class="item_name">
|
||
<!-- <nuxt-link :to="i.href">-->
|
||
|
||
<div>{{ i.name }}</div>
|
||
<!-- </nuxt-link-->
|
||
<!-- >-->
|
||
</div>
|
||
<div class="item_desc">{{ i.desc }}</div>
|
||
<div class="item_blue_desc">{{ i.blue_desc }}</div>
|
||
<div class="item_blue_name">{{ i.blue_name }}</div>
|
||
<!-- <div class="item_text_link">-->
|
||
<!-- <nuxt-link :to="i.href">详情 <i class="el-icon-d-arrow-right"></i></nuxt-link></div>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
head() {
|
||
return {
|
||
title: '客户案例',
|
||
meta: [
|
||
{hid: 'description', name: 'description', content: '这是默认的描述内容'},
|
||
{hid: 'keywords', name: 'keywords', content: 'vue, nuxt, seo'}
|
||
]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
cases_tabs_List: [
|
||
{
|
||
index: "1",
|
||
name: "软件与网络",
|
||
childer: [
|
||
{
|
||
index: "1-1",
|
||
img: require("@/assets/cases/CodeBit.jpg"),
|
||
name: "CodeBit",
|
||
desc: "CodeBit 参与了 AWS 合作伙伴转型计划，以改善其向巴西非营利和公共部门客户销售软件、云迁移服务和解决方案的方式。参与该计划后，CodeBit推出了一款互联网安全应用程序，提升了销售和营销能力，并实现了 28% 的年度营收增长。",
|
||
blue_desc:
|
||
"在参与该计划之前，我们没有组建专门负责市场定位和向客户推广产品的正式团队。AWS 合作伙伴转型计划让我们改变了公司的组织方式，并组建了一支新的商业团队，专注于改进我们销售产品的方式。",
|
||
blue_name: "Heitor Cunha(CodeBit 创始人)",
|
||
href: '/Cases/_codebit',
|
||
},
|
||
{
|
||
index: "1-2",
|
||
img: require("@/assets/cases/Roper.jpg"),
|
||
name: "Roper Technologies",
|
||
desc: "Roper Technologies经营着市场领先的业务，设计和开发垂直软件和技术支持的产品，为各种利基市场的客户提供服务。Roper 希望增强和统一其多年来收购的公司组合中对数字环境的可见性。为了采取更积极主动的方法对抗勒索软件并实现其网络安全工作的现代化，Roper 在其子公司中实施了CrowdStrike FalcoCloud Security 和 CrowdStrike Falcon Complete 托管检测和响应(MDR)。这使团队能够全天候实时监控环境，全面了解其基础设施，并通过单一管理平台集中安全性。Roper现在能够更好地阻止恶意活动避免恶意活动影响其业务，识别和缓解漏洞，并最大限度地提高其网络安全团队的效率。",
|
||
blue_desc: "",
|
||
blue_name: "",
|
||
href: '/Cases/_roper',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
index: "2",
|
||
name: "金融与货币",
|
||
childer: [
|
||
{
|
||
index: "2-1",
|
||
img: require("@/assets/cases/CitizensBank.jpg"),
|
||
name: "Citizens Bank ",
|
||
desc: "Citizens Bank 希望为客户提供更快的银行体验和个性化服务，但其昂贵的传统平台对创新提出了挑战。通过与 AWS 合作伙伴 MongoDB 的合作，该银行可以通过在其传统平台之上构建自定义数据缓存来迁移到现代技术堆栈。具有数据缓存的新架构改变了操作，降低了成本，增强了对数据的访问，从而加快了处理任务，并提高了数据可用性。除了提供客户行为洞察外，新设置还优化了资源，为 Citizens Bank 客户提供创新和个性化的体验。",
|
||
blue_desc:
|
||
"",
|
||
blue_name: "",
|
||
href: '/Cases/_Citizens_Bank',
|
||
},
|
||
{
|
||
index: "2-2",
|
||
img: require("@/assets/cases/AXA.jpg"),
|
||
name: "AXA Konzern AG",
|
||
desc: "AXA Konzern AG （AXA Germany） 是德国一家大型一级保险提供商，隶属于 AXA 集团。它拥有 8,000 多名员工、740 万客户，年收入约为 120 亿欧元。AXA Germany 一直在本地数据中心运行其人寿保险平台和后台系统，自 2015 年以来，一直在使用 MSG。Life Factory，行业公认的人寿保险保单管理系统。该解决方案由 msg insur：it 提供，它是 AWS 合作伙伴 msg 的子公司，msg 是一家总部位于德国的组织，专门为不同行业开发 IT 解决方案。",
|
||
blue_desc: "",
|
||
blue_name: "",
|
||
href: '/Cases/_AXA',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
index: "3",
|
||
name: "旅行与酒店",
|
||
childer: [
|
||
{
|
||
index: "3-1",
|
||
img: require("@/assets/cases/ARC.jpg"),
|
||
name: "Airlines Reporting Corporation",
|
||
desc: "领先的旅行情报提供商 Airlines Reporting Corporation （ARC） 在 Amazon Web Services （AWS） 上的成功数字化转型之旅引起了其合作伙伴公司 ATPCO 的注意。当 ATPCO 向 ARC 寻求帮助进行自身转型时，ARC 求助于 AWS 合作伙伴 Wavicle Data Solutions （Wavicle）。Wavicle的专家工程团队提供了一个灵活的事件驱动型流媒体解决方案，使ATPCO能够在比预期更短的时间内快速响应不断变化的客户需求。基于该项目的成功，ARC 打算与 Wavicle 合作，开展其转型之旅的下一阶段——将人工智能等创新的 AWS 解决方案添加到其已经高性能的系统中。",
|
||
blue_desc:
|
||
"",
|
||
blue_name: "",
|
||
href: '/Cases/_ARC',
|
||
},
|
||
{
|
||
index: "3-2",
|
||
img: require("@/assets/cases/TUI.jpg"),
|
||
name: "TUI",
|
||
desc: "TUI 集团是德国的一家全球旅游平台公司，业务范围涵盖整个旅游价值链。该公司希望根据旅行者以前的选择甚至在他们首次访问该公司的网站时，为旅行者提供个性化的体验。该公司利用机器学习（ML）模型帮助创建个性化的体验，但发现开发这些模型花费了太多的时间。通过与 AWS 合作伙伴 Data Reply 合作，该公司得以加快创建和部署机器学习模型的速度，并提高了个性化程度。这一做法在第一年就创造了 700 万欧元的收益。",
|
||
blue_desc: "",
|
||
blue_name: "",
|
||
href: '/Cases/_TUI',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
index: "4",
|
||
name: "媒体与娱乐",
|
||
childer: [
|
||
{
|
||
index: "4-1",
|
||
img: require("@/assets/cases/tripledot.jpg"),
|
||
name: "Tripledot Studios",
|
||
desc: "移动游戏公司 Tripledot Studios 借助 AWS 合作伙伴 Orca Security 显著提高了其数据安全性。以前，Tripledot 的小型 DevOps 团队依靠手动流程来实现安全性，这既耗时又效率低下。Orca 的无代理平台与 AWS 服务集成，提供了对云风险的全面理解，并简化了风险优先级排序。这导致了安全风险的降低，消除了手动流程，并完全覆盖了漏洞。自动化安全解决方案还有助于高效解决问题和软件更新。随着 Tripledot 的持续增长，这一战略举措加强了其安全态势。",
|
||
blue_desc:
|
||
"",
|
||
blue_name: "",
|
||
href: '/Cases/_Tripledot',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
index: "5",
|
||
name: "运输与物流",
|
||
childer: [
|
||
{
|
||
index: "5-1",
|
||
img: require("@/assets/cases/amnex.jpg"),
|
||
name: "Amnex Infotechnologies",
|
||
desc: "Amnex Infotechnologies （Amnex） 是具有智慧城市能力的 AWS 合作伙伴，它通过鼓励人们乘坐公共汽车而不是私家车出行，帮助印度纳西克市解决污染问题。该市使用 Amnex 基于物联网的智能交通管理系统 （ITMS） 提高了公交网络的效率，该系统在 Amazon Web Services （AWS） 上运行。ITMS 利用 Amazon EC2 实例和 AWS Lambda 无服务器功能，帮助每公里增加了 150% 的路线收入，因为每月有超过 100 万额外的公民每天乘坐公共汽车上下班。",
|
||
blue_desc:
|
||
"",
|
||
blue_name: "",
|
||
href: '/Cases/_Amnex',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
tabs_index: "1",
|
||
};
|
||
},
|
||
methods: {
|
||
tabs_click(index) {
|
||
this.tabs_index = index;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
a {
|
||
text-decoration: none;
|
||
|
||
div {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
::v-deep .van-swipe__indicators{
|
||
display: none;
|
||
}
|
||
@media screen and (max-width: 800px) {
|
||
.banner {
|
||
display: none;
|
||
}
|
||
::v-deep .van-swipe__indicators {
|
||
display: none !important;
|
||
}
|
||
.con-d-arrow-right {
|
||
width: 50px;
|
||
}
|
||
.cases_content {
|
||
width: 100%;
|
||
min-height: 600px;
|
||
padding-top: 2%;
|
||
margin-top: 30%;
|
||
|
||
&_tabs {
|
||
width: 100%;
|
||
|
||
&_title {
|
||
display: flex;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
border-bottom: 2px solid rgb(0 174 255);
|
||
padding-bottom: 10px;
|
||
|
||
.item {
|
||
margin-right: 8%;
|
||
cursor: pointer;
|
||
width: 80px !important;
|
||
}
|
||
|
||
.item_bg {
|
||
background-color: #d2efff;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.item_text_link {
|
||
color: #00bbff;
|
||
float: right;
|
||
margin-top: 5px;
|
||
|
||
a {
|
||
color: #00bbff;
|
||
}
|
||
}
|
||
.active {
|
||
color: rgb(0 174 255);
|
||
padding: 2px 10px;
|
||
/* 其他样式可以根据需要添加 */
|
||
}
|
||
.cases_content_tabs_mini {
|
||
width: 80%;
|
||
margin: 2% auto;
|
||
min-height: 600px;
|
||
}
|
||
.cases_content_tabs_desc {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: 5%;
|
||
//position: relative;
|
||
|
||
.item_img {
|
||
width: 350px;
|
||
height: 230px;
|
||
display: none;
|
||
|
||
img {
|
||
width: 350px;
|
||
height: 230px;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
width: 100%;
|
||
min-height: 180px;
|
||
background-color: #fff;
|
||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
|
||
padding: 12px 24px;
|
||
display: flex;
|
||
|
||
.item_bar {
|
||
height: 100%;
|
||
width: 2px;
|
||
border: 1px solid rgb(0, 136, 255);
|
||
background-color: rgb(0, 136, 255);
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.item_name {
|
||
color: rgb(0, 136, 255);
|
||
font-size: 24px;
|
||
|
||
a {
|
||
color: rgb(0, 136, 255);
|
||
}
|
||
|
||
a:hover {
|
||
color: rgb(125, 194, 255);
|
||
}
|
||
}
|
||
|
||
.item_desc {
|
||
font-size: 14px;
|
||
margin-top: 3%;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 6; /* 限制在5行 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.item_blue_desc {
|
||
font-size: 14px;
|
||
color: rgb(0, 136, 255);
|
||
margin-top: 2%;
|
||
display: none;
|
||
}
|
||
|
||
.item_blue_name {
|
||
font-size: 14px;
|
||
color: rgb(0, 136, 255);
|
||
float: right;
|
||
line-height: 2;
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 800px) {
|
||
.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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cases_content {
|
||
width: 100%;
|
||
min-height: 600px;
|
||
padding-top: 7%;
|
||
&_tabs {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
|
||
&_title {
|
||
display: flex;
|
||
width: 60%;
|
||
margin: 0 auto;
|
||
|
||
.item {
|
||
margin-right: 8%;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
|
||
.item_bg {
|
||
background-color: #d2efff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
background-color: rgba(138, 218, 255, 0.596);
|
||
padding: 2px 10px;
|
||
/* 其他样式可以根据需要添加 */
|
||
}
|
||
.cases_content_tabs_mini {
|
||
width: 80%;
|
||
margin: 2% auto;
|
||
min-height: 600px;
|
||
box-shadow: 0px 4px 10px rgba(0, 213, 255, 0.726);
|
||
padding: 24px;
|
||
}
|
||
.cases_content_tabs_desc {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: 5%;
|
||
position: relative;
|
||
|
||
.item_img {
|
||
width: 350px;
|
||
height: 230px;
|
||
|
||
img {
|
||
width: 350px;
|
||
height: 230px;
|
||
}
|
||
}
|
||
|
||
.item_text_link {
|
||
display: none;
|
||
}
|
||
|
||
.item {
|
||
width: 65%;
|
||
height: 180px;
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
background-color: #fff;
|
||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
|
||
padding: 12px 24px;
|
||
display: flex;
|
||
|
||
.item_bar {
|
||
height: 100%;
|
||
width: 2px;
|
||
border: 1px solid rgb(0, 136, 255);
|
||
background-color: rgb(0, 136, 255);
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.item_name {
|
||
color: rgb(0, 136, 255);
|
||
font-size: 24px;
|
||
|
||
a {
|
||
color: rgb(0, 136, 255);
|
||
}
|
||
|
||
a:hover {
|
||
color: rgb(125, 194, 255);
|
||
}
|
||
}
|
||
|
||
.item_desc {
|
||
font-size: 14px;
|
||
margin-top: 3%;
|
||
}
|
||
|
||
.item_blue_desc {
|
||
font-size: 14px;
|
||
color: rgb(0, 136, 255);
|
||
margin-top: 2%;
|
||
}
|
||
|
||
.item_blue_name {
|
||
font-size: 14px;
|
||
color: rgb(0, 136, 255);
|
||
float: right;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|