初始化代码

2025-09-03 18:05:48 +08:00
parent e5712b2e97
commit 4414fe517b
70 changed files with 2404 additions and 9 deletions
--- a/src/views/homepage/index.vue
+++ b/src/views/homepage/index.vue
@ -0,0 +1,78 @@
+<script setup>
+import Swiper from '@/components/swiper/index.vue'
+
+import {ref, onMounted} from 'vue'
+const currentPage = ref(1)
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <div class="banner">
+      <div class="banner-link"><span>进入演示系统</span></div>
+    </div>
+    <div class="swiper">
+      <Swiper
+        id="home_swiper"
+        title="产品体系"
+        v-model="currentPage"
+        :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+        :page-size="4"
+        :show-pagination="true"
+        :auto-play="true"
+      >
+        <template #default="{item, index, isActive}">
+          <div class="my-card" :class="{active: isActive}">
+            <h2>{{ item }}</h2>
+          </div>
+        </template>
+      </Swiper>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  .banner {
+    width: 100%;
+    height: 800px;
+    position: relative;
+    background-image: url('/static/images/main/banner.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    &-link {
+      width: 174px;
+      height: 48px;
+      line-height: 48px;
+      text-align: center;
+      position: absolute;
+      top: 721px;
+      left: 873px;
+      border: 1px solid #1fe1ff;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      &:hover {
+        transform: scale(1.05);
+      }
+      span {
+        font-family: 'PingFang SC';
+        font-weight: 600;
+        font-size: 20px;
+        letter-spacing: 0.06em;
+        color: $white;
+      }
+    }
+  }
+
+  .swiper {
+    width: 100%;
+    height: 800px;
+    .my-card {
+      background: #d9d9d9;
+      height: 100%;
+    }
+  }
+}
+</style>