<script setup>
import "@/views/portal/assets/base.css"
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import "./index.css"
import PortalLayout from "./components/PortalLayout.vue";
import cdnArchitectPNG from './assets/cdn-architect.png'
import TButton from "@/components/ui/TButton.vue";
import TImage from "@/components/ui/TImage.vue";

const ctx = ctxRef(new Context())
</script>

<template>
	<PortalLayout active-top-menu="index" :ctx="ctx">
		<div class="block">
			<div class="inner-block">
				<div class="summary-box pl-4">
					<div class="description-box">
						<h1 class="text-4xl font-normal">CDN</h1>
						<p class="leading-7 mt-4">
							CDN是内容分发网络（Content Delivery
							Network）的简称，可以帮助我们将内容快速地分发到不同的区域和运营商，包括HTML页面、Javascript文件、CSS文件，及音视频文件等。
						</p>
						<p class="leading-7 mt-2">
							同时，CDN也能保护我们的网站免受攻击，比如常见的CC攻击和SQL注入攻击。
						</p>
						<div class="mt-4">
							<a href="/portal/products/cdn">
								<TButton label="查看CDN产品" icon="pi pi-arrow-right right" icon-pos="right"></TButton>
							</a>
						</div>
					</div>
					<div class="image-box mt-6">
						<TImage :src="cdnArchitectPNG"/>
					</div>
				</div>
			</div>
		</div>
	</PortalLayout>
</template>