|
|
@@ -1,19 +1,154 @@
|
|
|
<template>
|
|
|
- <div class="home">
|
|
|
- <h2>欢迎使用Prototype Design, 请您根据您的需要设计您的Prototype</h2>
|
|
|
- </div>
|
|
|
+ <a-layout>
|
|
|
+ <a-layout-header style="background: #fff; padding: 0;">
|
|
|
+ <a-row type="flex" align="middle" justify="space-between" style="margin: 0 24px;">
|
|
|
+ <a-col>
|
|
|
+ <a-image :width="120" src="@/assets/img/logo.png" />
|
|
|
+ </a-col>
|
|
|
+ <a-col>
|
|
|
+ <a-menu mode="horizontal" theme="light">
|
|
|
+ <a-menu-item key="home">
|
|
|
+ 首页
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="products">
|
|
|
+ 产品
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="about">
|
|
|
+ 关于我们
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="contact">
|
|
|
+ 联系我们
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </a-col>
|
|
|
+ <a-col>
|
|
|
+ <a-button type="link" style="margin-right: 16px;">登录</a-button>
|
|
|
+ <a-button type="primary">注册</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-layout-header>
|
|
|
+ <a-layout-content style="margin: 24px;">
|
|
|
+ <a-carousel autoplay>
|
|
|
+ <a-carousel-item>
|
|
|
+ <a-image :width="'100%'" src="@/assets/img/banner1.png" />
|
|
|
+ </a-carousel-item>
|
|
|
+ <a-carousel-item>
|
|
|
+ <a-image :width="'100%'" src="@/assets/img/banner2.png" />
|
|
|
+ </a-carousel-item>
|
|
|
+ </a-carousel>
|
|
|
+ <a-row :gutter="16" style="margin-top: 24px;">
|
|
|
+ <a-col :span="24">
|
|
|
+ <h2>产品展示</h2>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="8" v-for="product in products" :key="product.id">
|
|
|
+ <a-card hoverable>
|
|
|
+ <a-image :width="'100%'" :src="product.image" />
|
|
|
+ <a-card-meta :title="product.name" :description="product.description"></a-card-meta>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <h2>特色推荐</h2>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="8" v-for="featured in featuredProducts" :key="featured.id">
|
|
|
+ <a-card hoverable>
|
|
|
+ <a-image :width="'100%'" :src="featured.image" />
|
|
|
+ <a-card-meta :title="featured.name" :description="featured.description"></a-card-meta>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <h2>新闻动态</h2>
|
|
|
+ <a-list :data-source="news" :bordered="false">
|
|
|
+ <a-list-item v-for="article in news" :key="article.id">
|
|
|
+ <a-card>
|
|
|
+ <a-card-meta :title="article.title" :description="article.content"></a-card-meta>
|
|
|
+ </a-card>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <h2>客户评价</h2>
|
|
|
+ <a-list :data-source="reviews" :bordered="false">
|
|
|
+ <a-list-item v-for="review in reviews" :key="review.id">
|
|
|
+ <a-card>
|
|
|
+ <a-card-meta :title="review.user" :description="review.comment"></a-card-meta>
|
|
|
+ </a-card>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-layout-content>
|
|
|
+ <a-layout-footer style="text-align: center;">
|
|
|
+ <p>版权所有 © 2025 公司名称. 保留所有权利.</p>
|
|
|
+ <p>联系方式: <a href="mailto:support@example.com">support@example.com</a></p>
|
|
|
+ <p>
|
|
|
+ <a href="https://www.facebook.com">Facebook</a> |
|
|
|
+ <a href="https://www.twitter.com">Twitter</a> |
|
|
|
+ <a href="https://www.linkedin.com">LinkedIn</a>
|
|
|
+ </p>
|
|
|
+ <p><a href="/sitemap">网站地图</a></p>
|
|
|
+ </a-layout-footer>
|
|
|
+ </a-layout>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
-export default {}
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ products: [
|
|
|
+ { id: 1, image: '@/assets/img/product1.png', name: '产品1', description: '这是产品1的描述' },
|
|
|
+ { id: 2, image: '@/assets/img/product2.png', name: '产品2', description: '这是产品2的描述' },
|
|
|
+ { id: 3, image: '@/assets/img/product3.png', name: '产品3', description: '这是产品3的描述' }
|
|
|
+ ],
|
|
|
+ featuredProducts: [
|
|
|
+ { id: 1, image: '@/assets/img/featured1.png', name: '特色产品1', description: '这是特色产品1的描述' },
|
|
|
+ { id: 2, image: '@/assets/img/featured2.png', name: '特色产品2', description: '这是特色产品2的描述' },
|
|
|
+ { id: 3, image: '@/assets/img/featured3.png', name: '特色产品3', description: '这是特色产品3的描述' }
|
|
|
+ ],
|
|
|
+ news: [
|
|
|
+ { id: 1, title: '新闻标题1', content: '这是新闻1的内容' },
|
|
|
+ { id: 2, title: '新闻标题2', content: '这是新闻2的内容' }
|
|
|
+ ],
|
|
|
+ reviews: [
|
|
|
+ { id: 1, user: '用户1', comment: '非常好的产品！' },
|
|
|
+ { id: 2, user: '用户2', comment: '服务很好！' }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
-<style>
|
|
|
-.home {
|
|
|
- height: 100vh;
|
|
|
- width: 100vw;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.ant-layout-header {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-layout-content {
|
|
|
+ margin-top: 64px;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-carousel :deep(.slick-slide) {
|
|
|
+ text-align: center;
|
|
|
+ height: 400px;
|
|
|
+ line-height: 400px;
|
|
|
+ background: #364d79;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-carousel :deep(.slick-slide h3) {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+h2 {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-list-item {
|
|
|
+ margin-bottom: 16px;
|
|
|
}
|
|
|
</style>
|
genlitex