首页和第一页的部分完成，css部分待完善

src/components/home.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="home-container">
+    <div class="banner">
+      <video src="../../public/蜜雪冰城-雪王百科.mp4" autoplay muted loop></video>
+    </div>
+  </div>
+
+  <div class="home-body">
+    <div class="first-head">雪王简介</div>
+    <div class="intro-content">
+      <div class="pic">
+        <img src="../../public/mixue.png" alt="雪王">
+      </div>
+      <div class="txt">
+        <div class="second-head">
+          "我是手拿冰淇凌权杖的雪王"
+          <br>
+          "一生只爱冰淇凌与茶"
+        </div>
+        <ul class="xuewang-list">
+          <li v-for="(item, index) in snowKingInfo" :key="index">
+            <span class="label">{{ item.label }}</span>
+            <span class="divider"></span>
+            <span class="value">{{ item.value }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const snowKingInfo = ref([
+  { label: '生日', value: '11月22日' },
+  { label: '性格', value: '正直、友善、热情、进取' },
+  { label: '职位', value: '蜜雪冰城首席品控官兼全球品牌代言人' },
+  { label: '口头禅', value: '你爱我，我爱你，蜜雪冰城甜蜜蜜' },
+  { label: '爱好', value: '唱歌跳舞，研究冰淇淋与茶的新奇吃法' }
+])
+</script>
+
+<style scoped>
+.home-container {
+  padding: 0;
+  text-align: center;
+}
+
+.banner {
+  width: 100%;
+  height: 90vh;
+  min-height: 500px;
+}
+
+.banner video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.home-body {
+  padding: 100px 80px;
+  background: linear-gradient(180deg, #FEF7F7 0%, rgba(254, 247, 247, 0.00) 64.96%);
+}
+
+.first-head {
+  text-align: center;
+  font-size: 58px;
+  font-weight: 700;
+  color: #2E2F30;
+  margin-bottom: 68px;
+  line-height: 1.17;
+}
+
+.intro-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.pic {
+  width: 750px;
+  height: 660px;
+  border-radius: 30px;
+  overflow: hidden;
+}
+
+.pic img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s;
+}
+
+.pic:hover img {
+  transform: scale(1.05);
+}
+
+.txt {
+  width: 676px;
+}
+
+.second-head {
+  font-size: 46px;
+  font-weight: 700;
+  color: #E60012;
+  line-height: 1.33;
+  margin-bottom: 67px;
+}
+
+.xuewang-list {
+  list-style: none;
+  padding: 0;
+}
+
+.xuewang-list li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
+  color: #666;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.xuewang-list li:last-child {
+  margin-bottom: 0;
+}
+
+.xuewang-list .label {
+  color: #2E2F30;
+  font-weight: 700;
+  min-width: 80px;
+}
+
+.xuewang-list .divider {
+  width: 1px;
+  height: 18px;
+  background-color: #999;
+  margin: 0 15px;
+}
+
+.xuewang-list .value {
+  display: flex;
+  align-items: center;
+}
+
+/* 响应式适配 */
+@media (max-width: 1200px) {
+  .intro-content {
+    flex-direction: column;
+  }
+
+  .pic {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 750/660;
+  }
+
+  .txt {
+    width: 100%;
+    margin-top: 48px;
+  }
+}
+
+@media (max-width: 768px) {
+  .home-body {
+    padding: 50px 20px;
+  }
+
+  .first-head {
+    font-size: 36px;
+    margin-bottom: 40px;
+  }
+
+  .second-head {
+    font-size: 28px;
+    margin-bottom: 40px;
+  }
+
+  .xuewang-list li {
+    font-size: 18px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .xuewang-list .divider {
+    display: none;
+  }
+}
+</style>