Главная Обзор Помощь
Регистрация Вход
uray
/
toy_box_website
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

feat: 将主页面进行布局

uray 4 лет назад
Родитель
fbee42cc73
Сommit
668dc71a14
3 измененных файлов с 43 добавлено и 16 удалено
Единый вид Показать статистику Diff
  1. 18 10
      index.html
  2. 2 2
      src/App.vue
  3. 23 4
      src/page/home/index.vue

+ 18 - 10
index.html
Просмотреть файл 

@@ -1,13 +1,21 @@
 
+<!--
 
+ * @description: 
+ * @Author: uray(1109489444@qq.com)
 
+ * @date: 2022-04-12 17:58:56
 
+ * @lastEditors: uray(1109489444@qq.com)
 
+ * @lastEditTime: 2022-04-14 14:22:37
 
+ * @FilePath: \toy_box_website\index.html
 
+-->
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
-  <head>
 
-    <meta charset="UTF-8" />
 
-    <link rel="icon" href="/favicon.ico" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite App</title>
 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-    <script type="module" src="/src/main.ts"></script>
 
-  </body>
 
+    <head>
 
+        <meta charset="UTF-8" />
 
+        <link rel="icon" href="/favicon.ico" />
 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+        <title>Vite App</title>
 
+    </head>
 
+    <body style="margin: 0">
 
+        <div id="app"></div>
 
+        <script type="module" src="/src/main.ts"></script>
 
+    </body>
 
 </html>
 
 </html>

+ 2 - 2
src/App.vue
Просмотреть файл 

@@ -3,7 +3,7 @@
 
  * @Author: uray(1109489444@qq.com)
 
  * @Author: uray(1109489444@qq.com)
 
  * @date: 2022-04-12 17:58:56
 
  * @date: 2022-04-12 17:58:56
 
  * @lastEditors: uray(1109489444@qq.com)
 
  * @lastEditors: uray(1109489444@qq.com)
 
- * @lastEditTime: 2022-04-14 09:55:14
 
+ * @lastEditTime: 2022-04-14 14:18:53
 
  * @FilePath: \toy_box_website\src\App.vue
 
  * @FilePath: \toy_box_website\src\App.vue
 
 -->
 
 -->
 
 <template>
 
 <template>
 
@@ -26,6 +26,6 @@ export default defineComponent({
 
 
 
 <style>
 
 <style>
 
 #app {
 
 #app {
 
-    margin-top: 60px;
 
+    /* margin-top: 60px; */
 
 }
 
 }
 
 </style>
 
 </style>

+ 23 - 4
src/page/home/index.vue
Просмотреть файл 

@@ -3,15 +3,19 @@
 
  * @Author: uray(1109489444@qq.com)
 
  * @Author: uray(1109489444@qq.com)
 
  * @date: 2022-04-13 18:00:09
 
  * @date: 2022-04-13 18:00:09
 
  * @lastEditors: uray(1109489444@qq.com)
 
  * @lastEditors: uray(1109489444@qq.com)
 
- * @lastEditTime: 2022-04-14 14:08:01
 
+ * @lastEditTime: 2022-04-14 14:23:18
 
  * @FilePath: \toy_box_website\src\page\home\index.vue
 
  * @FilePath: \toy_box_website\src\page\home\index.vue
 
 -->
 
 -->
 
 
 
 <template>
 
 <template>
 
-    <div @click="onBtnClick">
 
+    <!-- <div @click="onBtnClick">
 
         <h1>首页</h1>
 
         <h1>首页</h1>
 
         <div @click="onBtnClick">点击跳转详情页面</div>
 
         <div @click="onBtnClick">点击跳转详情页面</div>
 
-    </div>
 
+    </div> -->
 
+
 
+    <div class="head"></div>
 
+    <div class="tabs"></div>
 
+    <div class="goods"></div>
 
 </template>
 
 </template>
 
 
 
 <script lang="ts">
 
 <script lang="ts">
 
@@ -27,4 +31,19 @@ export default defineComponent({
 
 });
 
 });
 
 </script>
 
 </script>
 
 
 
-<style lang="less" scoped></style>
 
+<style lang="less" scoped>
 
+.head {
 
+    height: 60px;
 
+    border: solid 1px red;
 
+    background-color: #0f0f0f;
 
+}
 
+.tabs {
 
+    height: 420px;
 
+    border: solid 1px green;
 
+}
 
+.goods {
 
+    height: calc(~"100vh - 400px");
 
+    background-color: #f5f5f5;
 
+    border: solid 1px blue;
 
+}
 
+</style>