231 lines
5.8 KiB
Vue
231 lines
5.8 KiB
Vue
<template>
|
||
<div>
|
||
<div class="KnowledgeCenter_view">
|
||
<div class="KnowledgeCenter_view_title">知识中心</div>
|
||
<div class="KnowledgeCenter_view_bar"></div>
|
||
<div class="KnowledgeCenter_view_content">
|
||
<div class="content_banner">
|
||
<img src="@/assets/KnowledgeCenter/banner1.jpg" alt=""/>
|
||
</div>
|
||
<div class="content_item">
|
||
<div v-for="i in KnowledgeCenterList" class="item">
|
||
<div class="item_desc">
|
||
<div class="item_title">
|
||
<a :href="i.url">{{ i.title }}</a>
|
||
</div>
|
||
<div class="item_text">{{ i.desc }}</div>
|
||
<div class="item_text">{{ i.desc2 }}</div>
|
||
<div class="item_text">{{ i.desc3 }}</div>
|
||
</div>
|
||
<div class="item_text_link"><a :href="i.url">详情 <i class="el-icon-d-arrow-right"></i></a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
KnowledgeCenterList: [
|
||
{
|
||
index: "1",
|
||
title: "一篇文章了解AWS",
|
||
desc: "先来总结，AWS是全球云计算领域毋庸置疑的领导者，AWS是全球最全面、应用最广泛的云服务平台，提供超过200项功能齐全的服务，覆盖计算、存储、数据库、网络、机器学习、人工智能物联网等多个领域，它的全球数据中心网络遍布世界各地，支持数百万客户降低成本、提高敏捷性并加速创新。",
|
||
url: "/KnowledgeBase/AliyunGlobalOverview",
|
||
},
|
||
{
|
||
index: "2",
|
||
title: "AWS账号可以公用或者转借给别人用吗",
|
||
desc: "Amazon Web Services(AWS)账号是专为个人或组织设计的，以确保安全性和合规性。根据AWS的服务条款，AWS账号不应该被共享或转借给他人使用。每个AWS账号都有其独特的访问密钥和安全凭证，这些凭证用于访问和管理AWS服务。如果需要与团队成员或合作伙伴合作，AWS提供了多种方法来实现这一点，而无需共享主账号的访问密钥。",
|
||
url: "",
|
||
},
|
||
{
|
||
index: "1",
|
||
title: "AWS如何收费?一篇文章解答疑问",
|
||
desc: "AWS的收费方式分多钟情况，这主要与用户购买AWS服务时选择的实例类型有关，大致有以下几种：",
|
||
desc2:
|
||
"按需付费：这是AWS的默认定价模式，用户根据每小时或每秒的实际使用量付费，最低60s，无需长期承诺或预付费用，适合需求不断变化的业务。",
|
||
desc3:
|
||
"预留实例：用户可以预购1年或3年的实例，相较于按需付费，可以享受较大折扣，适用于长期稳定运行的工作负载，但因为预购了所有时间，所以中间出现空缺就会损失这一部分的时间。",
|
||
url: "",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@media screen and (max-width: 800px) {
|
||
a {
|
||
text-decoration: none;
|
||
color: rgb(40, 40, 40);
|
||
}
|
||
a:hover {
|
||
color: rgb(94, 94, 94);
|
||
}
|
||
.KnowledgeCenter_view {
|
||
width: 100%;
|
||
min-height: 1000px;
|
||
padding-top: 30%;
|
||
|
||
&_title {
|
||
font-size: 30px;
|
||
text-align: center;
|
||
line-height: 2;
|
||
display: none;
|
||
}
|
||
|
||
.item_text_link {
|
||
color: #00bbff;
|
||
float: right;
|
||
height: 20px;
|
||
|
||
a {
|
||
color: #00bbff;
|
||
}
|
||
}
|
||
|
||
&_bar {
|
||
background: rgb(0, 157, 255);
|
||
width: 40%;
|
||
height: 3px;
|
||
margin: 0 auto 2% auto;
|
||
display: none;
|
||
}
|
||
|
||
&_content {
|
||
display: flex;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.content_banner {
|
||
width: 30%;
|
||
height: 700px;
|
||
display: none;
|
||
|
||
img {
|
||
width: 90%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.content_item {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
|
||
.item {
|
||
box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);
|
||
padding: 24px 24px 30px 24px;
|
||
width: 90%;
|
||
min-height: 120px;
|
||
line-height: 1.5;
|
||
margin: 0 auto 5% auto;
|
||
overflow: visible;
|
||
&_desc {
|
||
border-left: 2px solid rgb(0, 157, 255);
|
||
padding-left: 20px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 6; /* 限制在5行 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
&_title {
|
||
color: rgb(0, 157, 255);
|
||
font-size: 20px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
&_text {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 800px) {
|
||
a {
|
||
text-decoration: none;
|
||
color: rgb(40, 40, 40);
|
||
}
|
||
a:hover {
|
||
color: rgb(94, 94, 94);
|
||
}
|
||
|
||
.KnowledgeCenter_view {
|
||
width: 100%;
|
||
min-height: 1000px;
|
||
padding-top: 7%;
|
||
|
||
.item_text_link {
|
||
display: none;
|
||
}
|
||
|
||
&_title {
|
||
font-size: 30px;
|
||
text-align: center;
|
||
margin-bottom: 1%;
|
||
}
|
||
|
||
&_bar {
|
||
background: rgb(0, 157, 255);
|
||
width: 40%;
|
||
height: 3px;
|
||
margin: 0 auto 2% auto;
|
||
}
|
||
|
||
&_content {
|
||
display: flex;
|
||
width: 60%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.content_banner {
|
||
width: 30%;
|
||
height: 700px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 90%;
|
||
}
|
||
}
|
||
|
||
.content_item {
|
||
width: 100%;
|
||
margin: 0 50px;
|
||
|
||
.item {
|
||
box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);
|
||
padding: 24px;
|
||
width: 100%;
|
||
min-height: 120px;
|
||
margin-bottom: 5%;
|
||
line-height: 1.5;
|
||
|
||
&_desc {
|
||
border-left: 2px solid rgb(0, 157, 255);
|
||
padding-left: 20px;
|
||
}
|
||
|
||
&_title {
|
||
color: rgb(0, 157, 255);
|
||
font-size: 20px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
&_text {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|