feat: 只需要一屏下载页

EOEFANS · Jan 19, 2023 · ac47625 · ac47625
1 parent 1021455
commit ac47625
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>eoefans</title>
+    <title>eoefans 下载页</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/src/assets/img/gogo.jpeg b/src/assets/img/gogo.jpeg
diff --git a/src/assets/img/minuo.jpg b/src/assets/img/minuo.jpg
diff --git a/src/assets/img/momo.jpg b/src/assets/img/momo.jpg
diff --git a/src/assets/img/un.jpg b/src/assets/img/un.jpg
diff --git a/src/assets/img/wan.jpg b/src/assets/img/wan.jpg
diff --git a/src/views/Layout.vue b/src/views/Layout.vue
@@ -6,29 +6,29 @@ import 'fullpage.js/dist/fullpage.min.css'
 import Page1 from './Page1/Page1.vue'
 
 onMounted(() => {
-  Object.freeze(
-    new Fullpage('#fullpage', {
-      normalScrollElements: ''
-      // scrollOverflow: false,
-      // loopHorizontal: false, // 水平滚动时是否loop
-      // verticalCentered: false, // 水平滚动下的块是否垂直居中
-      // controlArrows: false, // 水平滚动下是否显示左右切换箭头
-      // credits: {
-      //   enabled: false,
-      //   label: ''
-      // }
-    })
-  )
+  // Object.freeze(
+  //   new Fullpage('#fullpage', {
+  //     normalScrollElements: ''
+  //     // scrollOverflow: false,
+  //     // loopHorizontal: false, // 水平滚动时是否loop
+  //     // verticalCentered: false, // 水平滚动下的块是否垂直居中
+  //     // controlArrows: false, // 水平滚动下是否显示左右切换箭头
+  //     // credits: {
+  //     //   enabled: false,
+  //     //   label: ''
+  //     // }
+  //   })
+  // )
 })
 </script>
 <template>
   <div id="fullpage">
     <div class="section">
       <Page1></Page1>
     </div>
-    <div class="section">Some section2</div>
+    <!-- <div class="section">Some section2</div>
     <div class="section">Some section3</div>
-    <div class="section">Some section4</div>
+    <div class="section">Some section4</div> -->
   </div>
 </template>
 <style scoped lang="less">

diff --git a/src/views/Page1/Page1.vue b/src/views/Page1/Page1.vue
@@ -1,39 +1,43 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 
-const mainIntroduce = ref('介绍主文案')
+const mainIntroduce = ref('E个魂的APP')
 </script>
 <template>
   <div class="Page1">
+    <div class="mask"></div>
     <section class="introduce-section">
-      <div class="main-introduce" :data-word="mainIntroduce"></div>
-      <!-- <div class="">
+      <div class="main-introduce">eoefans App</div>
+      <div class="sub-introduce">
         "一个魂儿"系A-SOUL女子偶像团体粉丝名 本app非商业用途，仅提供A-soul及相关社区服务 官方B站：《A-SOUL_Official》、抖音：《五个魂儿啊》
       </div>
-      <div class="to-download">前往下载</div> -->
+      <!-- TODO: 左边搞些介绍 随动？ -->
+      <!-- TODO:搞个圆形的轮播图下载在右边 -->
+      <div class="to-download">前往下载</div>
     </section>
   </div>
 </template>
 <style scoped lang="less">
 .Page1 {
-  // border: 1px solid black;
+  position: relative;
   width: 100%;
   height: 100vh;
+  background-image: url('../../assets/img/home-bg.jpg');
+  background-size: cover;
+  .mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
 }
 .main-introduce {
   position: relative;
-  font-size: 30px;
-  &::before {
-    content: attr(data-word);
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  &::after {
-    content: attr(data-word);
-    position: absolute;
-    top: 0;
-    left: -3px;
-  }
+  font-size: 90px;
+  color: #fff;
+}
+.sub-introduce {
+  font-size: 20px;
+  color: #74727a;
 }
 </style>
diff --git a/src/views/Page2/Page2.vue b/src/views/Page2/Page2.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+</script>
+<template>
+ <div class="Page2">
+    <header> 特色功能</header>
+
+</div>
+</template>
+<style scoped lang="less">
+.Page2{
+
+}
+
+</style>