raylinx/pages/knowledge-center.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>