From 627384bfb95616a1089e597b2c98e17f70120cc9 Mon Sep 17 00:00:00 2001
From: rsgltzyd <rsgltzyd@hotmail.com>
Date: Tue, 17 Sep 2024 19:49:30 +0800
Subject: [PATCH] fix fix CustomPoem

---
 .gitignore                        |   1 +
 .prettierrc.json => .prettierrc   |   0
 src/App.vue                       |   3 -
 src/assets/main.css               |   2 -
 src/components/ContentCard.vue    |  96 +++---
 src/components/CustomCalendar.js  | 114 ++++---
 src/components/CustomCalendar.vue |  19 +-
 src/components/CustomPoem.vue     | 114 +++----
 src/components/PersonInfo.vue     |  23 --
 src/components/TestApi.vue        |  54 ++--
 src/components/XiaoMiLogin.vue    | 508 +++++++++++++++---------------
 src/views/HomeView.vue            |  54 +++-
 12 files changed, 509 insertions(+), 479 deletions(-)
 rename .prettierrc.json => .prettierrc (100%)
 delete mode 100644 src/components/PersonInfo.vue

diff --git a/.gitignore b/.gitignore
index 8ee54e8..ce3a11c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+/package-lock.json
diff --git a/.prettierrc.json b/.prettierrc
similarity index 100%
rename from .prettierrc.json
rename to .prettierrc
diff --git a/src/App.vue b/src/App.vue
index e864195..76d8321 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
@@ -8,8 +7,6 @@ import HelloWorld from './components/HelloWorld.vue'
     <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
diff --git a/src/assets/main.css b/src/assets/main.css
index 36fb845..3d1340f 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -28,8 +28,6 @@ a,
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
 }
diff --git a/src/components/ContentCard.vue b/src/components/ContentCard.vue
index 30dab3c..a3676c7 100644
--- a/src/components/ContentCard.vue
+++ b/src/components/ContentCard.vue
@@ -1,76 +1,74 @@
 <script>
-import { defineComponent } from 'vue';
-import Post from '../utils/Post.js';
+import { defineComponent } from 'vue'
 
 export default defineComponent({
-    props: {
-        post: { type: Post, required: true },
-    },
-    data() {
-        return {
-            childPost: {}
-        };
-    },
-    created() {
-        this.childPost = this.post;
-    },
-});
+  props: {
+    post: { type: null, required: true }
+  },
+  data() {
+    return {
+      childPost: {}
+    }
+  },
+  created() {
+    this.childPost = this.post
+  }
+})
 </script>
 <template>
-    <div class="card">
-        <div class="title">
-            <h2>{{ childPost.title }}</h2>
-        </div>
-
-        <div class="content">
-            <p>{{ childPost.content }}</p>
-        </div>
+  <div class="card">
+    <div class="title">
+      <h2>{{ childPost.title }}</h2>
     </div>
+
+    <div class="content">
+      <p>{{ childPost.content }}</p>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .card {
-    box-sizing: border-box;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24);
-    border-radius: 4px;
-    padding: 8px;
-    cursor: pointer;
-    margin: 10px 0;
-    /* height: 100px; */
+  box-sizing: border-box;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.24);
+  border-radius: 4px;
+  padding: 8px;
+  cursor: pointer;
+  margin: 10px 0;
+  /* height: 100px; */
 }
 
 .card .title {
-    /* height: 24px; */
-    line-height: 24px;
-    /* margin-bottom: 4px; */
-    padding-bottom: 4px;
-    border-bottom: 1px solid rgba(0, 0, 0, .24);
+  /* height: 24px; */
+  line-height: 24px;
+  /* margin-bottom: 4px; */
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.24);
 }
 
 .card .title:hover {
-    color: burlywood;
+  color: burlywood;
 }
 
-
 .card .content {
-    padding: 4px;
-    /* height: 100%; */
-    /* max-height: calc(100% - 36px); */
+  padding: 4px;
+  /* height: 100%; */
+  /* max-height: calc(100% - 36px); */
 }
 
 .card .content p {
-    /* 单行显示 */
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-break: break-all;
-    white-space: nowrap;
-    /* 多行显示 */
-    /* word-break: break-all;
+  /* 单行显示 */
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  white-space: nowrap;
+  /* 多行显示 */
+  /* word-break: break-all;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical; */
-    /*  */
-    /* height: 100%; */
+  /*  */
+  /* height: 100%; */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/CustomCalendar.js b/src/components/CustomCalendar.js
index 425fc56..138c6d6 100644
--- a/src/components/CustomCalendar.js
+++ b/src/components/CustomCalendar.js
@@ -1,21 +1,19 @@
-
-
-const weekDayNumber = 7;
-const week_zh_cn = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
-const week_en_us = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+const weekDayNumber = 7
+const week_zh_cn = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+const week_en_us = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
 
 class Day {
-    constructor(year, month, day, content, isCurrentMonth = false, isCurrentDay = false) {
-        this.year = year;
-        this.month = month;
-        this.day = day;
-        this.content = content;
-        this.isCurrentMonth = isCurrentMonth;
-        this.isCurrentDay = isCurrentDay
-    }
+  constructor(year, month, day, content, isCurrentMonth = false, isCurrentDay = false) {
+    this.year = year
+    this.month = month
+    this.day = day
+    this.content = content
+    this.isCurrentMonth = isCurrentMonth
+    this.isCurrentDay = isCurrentDay
+  }
 }
 
-const defaultDate = new Date();
+const defaultDate = new Date()
 const defaultYear = defaultDate.getFullYear()
 const defaultMonth = defaultDate.getMonth()
 const defaultDay = defaultDate.getDate()
@@ -24,58 +22,52 @@ const defaultDay = defaultDate.getDate()
  * 初始化日历
  * @param {[Day]} currentDays
  * @param {number} [year = defaultYear]
- * @param {number} [month = defaultMonth] 
- * @param {number} [day = defaultDay] 
+ * @param {number} [month = defaultMonth]
+ * @param {number} [day = defaultDay]
  * @returns {[Day]}
  */
-function initDay(currentDays = new Array(42), year = defaultYear, month = defaultMonth, day = defaultDay) {
+function initDay(
+  currentDays = new Array(42),
+  year = defaultYear,
+  month = defaultMonth,
+  day = defaultDay
+) {
+  if (!Array.isArray(currentDays)) {
+    currentDays = new Array(42)
+  } else if (currentDays.length !== 42) {
+    console.log(currentDays)
+    throw new Error('currentDays:' + currentDays)
+  } else {
+    currentDays = [...currentDays]
+  }
 
-    if (!Array.isArray(currentDays)) {
-        currentDays = new Array(42);
-    } else if (currentDays.length != 42) {
-        console.log(currentDays);
-        throw new Error(currentDays)
-    } else {
-        currentDays = [...currentDays];
+  const days = currentDays
+  const lastDayOfLastMonth = new Date(year, month, 0)
+  const firstDayOfMonth = new Date(year, month, 1)
+  const lastDayOfMonth = new Date(year, month + 1, 0)
+  const currentDaysOfMonth = lastDayOfMonth.getDate()
+  const daysOfLastMonth = lastDayOfLastMonth.getDate()
+
+  for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
+    const weekDay = firstDayOfMonth.getDay() - 1
+    days[i] = new Day(year, month - 1, daysOfLastMonth - weekDay + i, week_zh_cn[i])
+  }
+
+  for (let i = 0; i < currentDaysOfMonth; i++) {
+    const weekDay = (firstDayOfMonth.getDay() + i) % weekDayNumber
+    days[firstDayOfMonth.getDay() + i] = new Day(year, month, i + 1, week_zh_cn[weekDay], true)
+    if (i === day - 1) {
+      days[firstDayOfMonth.getDay() + i].isCurrentDay = true
     }
+  }
 
-    const days = currentDays;
-    const lastDayOfLastMonth = new Date(year, month, 0);
-    const firstDayOfMonth = new Date(year, month, 1);
-    const lastDayOfMonth = new Date(year, month + 1, 0);
-    const currentDaysOfMonth = lastDayOfMonth.getDate();
-    const daysOfLastMonth = lastDayOfLastMonth.getDate();
+  for (let i = currentDaysOfMonth + firstDayOfMonth.getDay(); i < days.length; i++) {
+    const extraDay = i - currentDaysOfMonth - firstDayOfMonth.getDay() + 1
+    const weekDay = i % weekDayNumber
+    days[i] = new Day(year, month + 1, extraDay, week_zh_cn[weekDay])
+  }
 
-    for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
-        const weekDay = firstDayOfMonth.getDay() - 1;
-        days[i] = new Day(year, month - 1, daysOfLastMonth - weekDay + i, week_zh_cn[i]);
-    }
-
-    for (let i = 0; i < currentDaysOfMonth; i++) {
-        const weekDay = (firstDayOfMonth.getDay() + i) % weekDayNumber;
-        days[firstDayOfMonth.getDay() + i] = new Day(year, month, i + 1, week_zh_cn[weekDay], true);
-        if (i === day - 1) {
-            days[firstDayOfMonth.getDay() + i].isCurrentDay = true;
-        }
-    }
-
-    for (let i = currentDaysOfMonth + firstDayOfMonth.getDay(); i < days.length; i++) {
-        const extraDay = i - currentDaysOfMonth - firstDayOfMonth.getDay() + 1;
-        const weekDay = i % weekDayNumber;
-        days[i] = new Day(year, month + 1, extraDay, week_zh_cn[weekDay]);
-    }
-
-    return currentDays;
+  return currentDays
 }
 
-export { week_zh_cn, week_en_us, defaultYear, defaultMonth, defaultDay, initDay };
-
-
-
-
-
-
-
-
-
-
+export { week_zh_cn, week_en_us, defaultYear, defaultMonth, defaultDay, initDay }
diff --git a/src/components/CustomCalendar.vue b/src/components/CustomCalendar.vue
index 1c70180..b0c8608 100644
--- a/src/components/CustomCalendar.vue
+++ b/src/components/CustomCalendar.vue
@@ -14,11 +14,21 @@ const day = ref(defaultDay)
 
 const editMonth = {
   add: () => {
-    month.value >= 11 ? ((month.value = 0), (year.value += 1)) : (month.value += 1)
+    if (month.value >= 11) {
+      month.value = 0
+      year.value += 1
+    } else {
+      month.value += 1
+    }
     dayArray.value = initDay(dayArray.value, year.value, month.value, day.value)
   },
   sub: () => {
-    month.value <= 0 ? ((month.value = 11), (year.value -= 1)) : (month.value -= 1)
+    if (month.value <= 0) {
+      month.value = 11
+      year.value -= 1
+    } else {
+      month.value -= 1
+    }
     dayArray.value = initDay(dayArray.value, year.value, month.value, day.value)
   }
 }
@@ -73,8 +83,10 @@ const handleDayClick = (date) => {
     justify-content: space-around;
     width: 100%;
   }
+
   text-align: center;
 }
+
 #calendar .title {
   > button {
     height: 20px;
@@ -89,6 +101,7 @@ const handleDayClick = (date) => {
 .content {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
+
   > div {
     outline: 1px solid;
     display: flex;
@@ -103,6 +116,7 @@ const handleDayClick = (date) => {
   #calendar {
     width: 280px;
   }
+
   .content {
     height: 240px;
   }
@@ -112,6 +126,7 @@ const handleDayClick = (date) => {
   #calendar {
     max-width: 350px;
   }
+
   .content {
     height: 300px;
   }
diff --git a/src/components/CustomPoem.vue b/src/components/CustomPoem.vue
index eb0f102..fa40998 100644
--- a/src/components/CustomPoem.vue
+++ b/src/components/CustomPoem.vue
@@ -1,83 +1,83 @@
-<script>
-import { defineComponent } from 'vue';
+<script setup>
+import { reactive } from 'vue'
+const poem = reactive({
+  title: '雨霖铃·寒蝉凄切',
+  body: [
+    '寒蝉凄切，对长亭晚，骤雨初歇。',
+    '都门帐饮无绪，留恋处，兰舟催发。',
+    '执手相看泪眼，竟无语凝噎。',
+    '念去去，千里烟波，暮霭沉沉楚天阔。',
+    '多情自古伤离别，更那堪，冷落清秋节！',
+    '今宵酒醒何处？杨柳岸，晓风残月。',
+    '此去经年，应是良辰好景虚设。',
+    '便纵有千种风情，更与何人说？'
+  ]
+})
 
-export default defineComponent({
-    props: {
-        poemTitle: {
-            type: String,
-            default: '雨霖铃·寒蝉凄切'
-        },
-        poemBody: {
-            type: Array,
-            default: () => [
-                '寒蝉凄切，对长亭晚，骤雨初歇。',
-                '都门帐饮无绪，留恋处，兰舟催发。',
-                '执手相看泪眼，竟无语凝噎。',
-                '念去去，千里烟波，暮霭沉沉楚天阔。',
-                '多情自古伤离别，更那堪，冷落清秋节！',
-                '今宵酒醒何处？杨柳岸，晓风残月。',
-                '此去经年，应是良辰好景虚设。',
-                '便纵有千种风情，更与何人说？'
-            ],
-        }
-    },
-    data() {
-        return {
-
-        };
-    },
-});
+console.log(poem.body)
 </script>
 
 <template>
-    <div class="poem">
-        <h2 class="poem-title">
-            {{ this.poemTitle }}
-        </h2>
-        <ul class="poem-body">
-            <li v-for="{poem, index} in this.poemBody" :key="index">
-                {{ poem }}
-            </li>
-        </ul>
-    </div>
+  <div class="poem">
+    <h2 class="poem_title">{{ poem.title }}</h2>
+    <ul class="poem_body">
+      <li v-for="(line, index) in poem.body" :key="index">
+        <span
+          v-for="(char, charIndex) in line.split('')"
+          :key="charIndex"
+          :style="{ animationDelay: charIndex * 0.1 + 's' }"
+          >{{ char }}</span
+        >
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style scoped>
 * {
-    /* box-sizing: border-box; */
-    font-family: 'Ma Shan Zheng', cursive;
-    margin: 0;
-    padding: 0;
-    color: #000;
+  box-sizing: border-box;
+  font-family: 'Ma Shan Zheng', cursive;
+  margin: 0;
+  padding: 0;
+  color: #000;
 }
 
 ol,
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 .poem {
-    width: 280px;
-    border-radius: 4px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-}
-
-.poem-title {
-    text-align: center;
+  width: 280px;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  text-align: center;
+  > .poem_title {
     white-space: nowrap;
     padding-top: 10px;
     font-size: 24px;
     width: 100%;
-}
-
-.poem-body {
+  }
+  > .poem_body {
     text-align: center;
     white-space: nowrap;
     font-size: 16px;
     padding: 10px 0;
 
-    >li {
-        margin: 5px auto;
+    > li {
+      margin: 5px auto;
     }
+
+    > li span {
+      opacity: 0;
+      animation: fadeIn 1s forwards;
+    }
+  }
 }
-</style>
\ No newline at end of file
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/PersonInfo.vue b/src/components/PersonInfo.vue
deleted file mode 100644
index 0708e9b..0000000
--- a/src/components/PersonInfo.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-    props: {
-    },
-    data() {
-        return {
-
-        };
-    },
-});
-</script>
-
-<template>
-    <div>
-        PersonInfoHHHHH
-    </div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/TestApi.vue b/src/components/TestApi.vue
index 7620fb7..89e2c23 100644
--- a/src/components/TestApi.vue
+++ b/src/components/TestApi.vue
@@ -1,36 +1,36 @@
 <script>
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue'
 
 export default defineComponent({
-    data() {
-        return {
-            test: ''
-        }
-    },
-    methods: {
-        testapi() {
-            fetch("http://127.0.0.1:3000/user")
-                .then(res => res.json())
-                .then(data => {
-                    this.test = data;
-                })
-                .catch(err => console.log('Request Failed', err))
-        }
+  data() {
+    return {
+      test: ''
     }
-});
+  },
+  methods: {
+    testapi() {
+      fetch('http://127.0.0.1:3000/user')
+        .then((res) => res.json())
+        .then((data) => {
+          this.test = data
+        })
+        .catch((err) => console.log('Request Failed', err))
+    }
+  }
+})
 </script>
 
 <template>
-    <button @click="testapi">测试接口调用</button>
-    <p v-if="this.test != ''">
-        {{ this.test[0].name }}<br>
-        {{ this.test[0].birth }}<br>
-        {{ this.test[0].gender }}<br>
-        {{ this.test[0].name }}<br>
-        {{ this.test[0].password }}<br>
-        {{ this.test[0].register_date }}<br>
-        {{ this.test[0].status }}<br>
-    </p>
+  <button @click="testapi">测试接口调用</button>
+  <p v-if="this.test != ''">
+    {{ this.test[0].name }}<br />
+    {{ this.test[0].birth }}<br />
+    {{ this.test[0].gender }}<br />
+    {{ this.test[0].name }}<br />
+    {{ this.test[0].password }}<br />
+    {{ this.test[0].register_date }}<br />
+    {{ this.test[0].status }}<br />
+  </p>
 </template>
 
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/src/components/XiaoMiLogin.vue b/src/components/XiaoMiLogin.vue
index 3cfd7d6..0426fb4 100644
--- a/src/components/XiaoMiLogin.vue
+++ b/src/components/XiaoMiLogin.vue
@@ -1,340 +1,346 @@
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue'
+
 export default defineComponent({
-    props: {
-        welcome: {
-            type: String,
-            default: '你好',
-        },
-        url: {
-            type: String,
-            default: 'http://127.0.0.1:3000/login',
-        },
+  props: {
+    welcome: {
+      type: String,
+      default: '你好'
     },
-    data() {
-        return {
-            showAccountError: false,
-            showPasswordError: false,
-            accountAbove: false,
-            passwordAbove: false,
-            accountShow: true,
-            passwordShow: true,
-            account: '',
-            password: '',
-        };
-    },
-    watch: {
-        account(val) {
-            val.length > 0 ? (this.showAccountError = false, this.accountShow = false) :
-                (this.showAccountError = false, this.accountShow = false);
-        },
-        password(val) {
-            val.length > 0 ? (this.showPasswordError = false, this.passwordShow = false) :
-                (this.showPasswordError = false, this.passwordShow = false);
-        },
-    },
-    methods: {
-        accountFocus() {
-            if (this.account.length <= 0) {
-                this.accountShow = true;
-                this.accountAbove = true;
-                this.showAccountError = true;
-            }
-        },
-        accountBlur() {
-            if (this.account.length <= 0) {
-                this.accountShow = false;
-                this.accountAbove = false;
-                this.showAccountError = false;
-            }
-        },
-        passwordFocus() {
-            if (this.password.length <= 0) {
-                this.passwordShow = true;
-                this.passwordAbove = true;
-                this.showPasswordError = true;
-            }
-        },
-        passwordBlur() {
-            if (this.password.length <= 0) {
-                this.passwordShow = false;
-                this.passwordAbove = false;
-                this.showPasswordError = false;
-            }
-        },
-        async login() {
-            const payload = {
-                account: this.account,
-                password: this.password
-            };
-            try {
-                console.log(this.url);
-                const response = await fetch(this.url, {
-                    method: "POST",
-                    mode: "cors",
-                    cache: "default",
-                    headers: {
-                        'Content-Type': 'application/json; charset=utf-8'
-                    },
-                    credentials: 'include',
-                    body: JSON.stringify(payload)
-                });
-                const data = await response.json();
-                console.log(data);
-            } catch (err) {
-                console.error(err);
-            }
-        }
+    url: {
+      type: String,
+      default: 'http://127.0.0.1:3000/login'
     }
+  },
+  data() {
+    return {
+      showAccountError: false,
+      showPasswordError: false,
+      accountAbove: false,
+      passwordAbove: false,
+      accountShow: true,
+      passwordShow: true,
+      account: '',
+      password: ''
+    }
+  },
+  watch: {
+    account(val) {
+      if (val.length > 0) {
+        this.showAccountError = false
+        this.accountShow = false
+      } else {
+        this.showAccountError = false
+        this.accountShow = false
+      }
+    },
+    password(val) {
+      if (val.length > 0) {
+        this.showPasswordError = false
+        this.passwordShow = false
+      } else {
+        this.showPasswordError = false
+        this.passwordShow = false
+      }
+    }
+  },
+  methods: {
+    accountFocus() {
+      if (this.account.length <= 0) {
+        this.accountShow = true
+        this.accountAbove = true
+        this.showAccountError = true
+      }
+    },
+    accountBlur() {
+      if (this.account.length <= 0) {
+        this.accountShow = false
+        this.accountAbove = false
+        this.showAccountError = false
+      }
+    },
+    passwordFocus() {
+      if (this.password.length <= 0) {
+        this.passwordShow = true
+        this.passwordAbove = true
+        this.showPasswordError = true
+      }
+    },
+    passwordBlur() {
+      if (this.password.length <= 0) {
+        this.passwordShow = false
+        this.passwordAbove = false
+        this.showPasswordError = false
+      }
+    },
+    async login() {
+      const payload = {
+        account: this.account,
+        password: this.password
+      }
+      try {
+        console.log(this.url)
+        const response = await fetch(this.url, {
+          method: 'POST',
+          mode: 'cors',
+          cache: 'default',
+          headers: {
+            'Content-Type': 'application/json; charset=utf-8'
+          },
+          credentials: 'include',
+          body: JSON.stringify(payload)
+        })
+        const data = await response.json()
+        console.log(data)
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  }
 })
 </script>
 <template>
-    <div class="login-from">
-        <p class="title">{{ welcome }}</p>
-        <form @submit.prevent="login">
-            <div class="account">
-                <div class="form-field" :class="{ 'form-field-error': showAccountError }">
-                    <div class="form-control">
-                        <div>
-                            <input
-                                v-model="account"
-                                @focus="accountFocus"
-                                @blur="accountBlur"
-                                class="account-input"
-                                type="text"
-                                name="account"
-                                id="account"
-                                autocomplete="off"
-                                required
-                            />
-                            <label
-                                class="floating-label"
-                                :class="{ 'floating-label-above': accountAbove, 'floating-label-error': showAccountError }"
-                                for="account"
-                                >邮箱/手机号码</label
-                            >
-                        </div>
-                    </div>
-                </div>
-                <div v-if="showAccountError" class="floating-label-error">请输入账号</div>
+  <div class="login-from">
+    <p class="title">{{ welcome }}</p>
+    <form @submit.prevent="login">
+      <div class="account">
+        <div class="form-field" :class="{ 'form-field-error': showAccountError }">
+          <div class="form-control">
+            <div>
+              <input
+                v-model="account"
+                @focus="accountFocus"
+                @blur="accountBlur"
+                class="account-input"
+                type="text"
+                name="account"
+                id="account"
+                autocomplete="off"
+                required
+              />
+              <label
+                class="floating-label"
+                :class="{
+                  'floating-label-above': accountAbove,
+                  'floating-label-error': showAccountError
+                }"
+                for="account"
+                >邮箱/手机号码</label
+              >
             </div>
-            <div class="password">
-                <div class="form-field" :class="{ 'form-field-error': showPasswordError }">
-                    <div class="form-control">
-                        <div>
-                            <input
-                                v-model="password"
-                                @focus="passwordFocus"
-                                @blur="passwordBlur"
-                                class="password-input"
-                                type="password"
-                                name="password"
-                                id="password"
-                                autocomplete="off"
-                                required
-                            />
-                            <label
-                                class="floating-label"
-                                :class="{ 'floating-label-above': passwordAbove, 'floating-label-error': showPasswordError }"
-                                for="password"
-                                >密码</label
-                            >
-                        </div>
-                    </div>
-                </div>
-                <div v-if="showPasswordError" class="floating-label-error">请输入密码</div>
+          </div>
+        </div>
+        <div v-if="showAccountError" class="floating-label-error">请输入账号</div>
+      </div>
+      <div class="password">
+        <div class="form-field" :class="{ 'form-field-error': showPasswordError }">
+          <div class="form-control">
+            <div>
+              <input
+                v-model="password"
+                @focus="passwordFocus"
+                @blur="passwordBlur"
+                class="password-input"
+                type="password"
+                name="password"
+                id="password"
+                autocomplete="off"
+                required
+              />
+              <label
+                class="floating-label"
+                :class="{
+                  'floating-label-above': passwordAbove,
+                  'floating-label-error': showPasswordError
+                }"
+                for="password"
+                >密码</label
+              >
             </div>
-            <div class="accept-terms">
-                <label for="agreement" class="accept">
-                    <span class="agreement-checkbox">
-                        <input
-                            class="accept-checkbox-input"
-                            type="checkbox"
-                            name="agreement"
-                            id="agreement"
-                        />
-                        <span class="agreement-inner"></span>
-                    </span>
-                    <span class="accept-text"
-                        >已阅读并同意小米账号<span>用户协议</span><span>隐私政策</span></span
-                    >
-                </label>
-            </div>
-            <button class="login-button" type="submit">登录</button>
-            <div class="form-action">
-                <div class="form-action-start">忘记密码?</div>
-                <div class="form-action-end">手机号登录</div>
-            </div>
-        </form>
-    </div>
+          </div>
+        </div>
+        <div v-if="showPasswordError" class="floating-label-error">请输入密码</div>
+      </div>
+      <div class="accept-terms">
+        <label for="agreement" class="accept">
+          <span class="agreement-checkbox">
+            <input class="accept-checkbox-input" type="checkbox" name="agreement" id="agreement" />
+            <span class="agreement-inner"></span>
+          </span>
+          <span class="accept-text"
+            >已阅读并同意小米账号<span>用户协议</span><span>隐私政策</span></span
+          >
+        </label>
+      </div>
+      <button class="login-button" type="submit">登录</button>
+      <div class="form-action">
+        <div class="form-action-start">忘记密码?</div>
+        <div class="form-action-end">手机号登录</div>
+      </div>
+    </form>
+  </div>
 </template>
 <style scoped>
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .title {
-    color: #000;
-    text-align: center;
+  color: #000;
+  text-align: center;
 }
 
 .login-from {
-    width: 400px;
-    padding: 20px;
-    border-radius: 4px;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
+  width: 400px;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
 }
 
 .password,
 .account {
-    width: 360px;
-    margin: 10px auto;
+  width: 360px;
+  margin: 10px auto;
 }
 
 .password-input,
 .account-input {
-    background-color: rgba(0, 0, 0, 0);
-    height: 60px;
-    width: 100%;
-    padding: 30px 20px 10px;
-    display: block;
-    border-width: 0;
+  background-color: rgba(0, 0, 0, 0);
+  height: 60px;
+  width: 100%;
+  padding: 30px 20px 10px;
+  display: block;
+  border-width: 0;
 }
 
 .password-input:focus-visible,
 .account-input:focus-visible {
-    outline-color: rgb(255, 92, 0);
+  outline-color: rgb(255, 92, 0);
 }
 
 .form-field {
-    background-color: rgb(249, 249, 249);
-    /* background-color: #000; */
-    position: relative;
-    border-radius: 4px;
-    overflow: hidden;
-    transform: all 0.1s ease;
+  background-color: rgb(249, 249, 249);
+  /* background-color: #000; */
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
 .form-field-error {
-    background-color: rgb(252, 242, 243);
+  background-color: rgb(252, 242, 243);
 }
 
 .form-control {
-    position: relative;
+  position: relative;
 }
 
 .floating-label {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    font-size: 17px;
-    height: 20px;
-    line-height: 20px;
-    transition: all 0.15s ease-in-out 0.15s;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  font-size: 17px;
+  height: 20px;
+  line-height: 20px;
+  transition: all 0.15s ease-in-out 0.15s;
 }
 
 .floating-label-above {
-    top: 10px;
-    font-size: 12px;
-    color: #aaa;
+  top: 10px;
+  font-size: 12px;
+  color: #aaa;
 }
 
 .floating-label-error {
-    color: red;
-}
-
-.form-helper {
-    font-size: 12px;
-    color: red;
+  color: red;
 }
 
 .accept-terms {
-    height: 25px;
-    line-height: 20px;
+  height: 25px;
+  line-height: 20px;
 }
 
 .accept {
-    top: 20px;
-    color: #aaa;
-    font-size: 14px;
-    cursor: pointer;
-    line-height: 20px;
-    display: inline-flex;
+  top: 20px;
+  color: #aaa;
+  font-size: 14px;
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-flex;
 }
 
-.accept>span {
-    display: block;
+.accept > span {
+  display: block;
 }
 
 .agreement-checkbox {
-    position: relative;
-    height: 20px;
-    width: 20px;
-    line-height: 1;
+  position: relative;
+  height: 20px;
+  width: 20px;
+  line-height: 1;
 }
 
 .accept-checkbox-input {
-    background-color: rgba(0, 0, 0, 0);
-    border-color: transparent;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
+  background-color: rgba(0, 0, 0, 0);
+  border-color: transparent;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
 }
 
 .agreement-inner {
-    position: absolute;
-    display: block;
-    /* height: 20px; */
-    width: 20px;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+  position: absolute;
+  display: block;
+  /* height: 20px; */
+  width: 20px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
 }
 
 .accept-text {
-    padding-left: 4px;
-    padding-right: 4px;
-    display: block;
+  padding-left: 4px;
+  padding-right: 4px;
+  display: block;
 }
 
 .form-action {
-    display: block;
+  display: block;
 }
 
 .form-action::after {
-    content: "";
-    display: block;
-    clear: both;
+  content: '';
+  display: block;
+  clear: both;
 }
 
 .form-action-start {
-    float: left;
+  float: left;
 }
 
 .form-action-end {
-    float: right;
+  float: right;
 }
 
 .login-button {
-    width: 100%;
-    padding: 10px;
-    height: 60px;
-    margin-top: 10px;
-    margin-bottom: 10px;
+  width: 100%;
+  padding: 10px;
+  height: 60px;
+  margin-top: 10px;
+  margin-bottom: 10px;
 
-    border-width: 0;
-    background-color: #ff5c02;
-    border-radius: 4px;
-    font-size: 18px;
-    color: rgba(255, 255, 255);
-    cursor: pointer;
+  border-width: 0;
+  background-color: #ff5c02;
+  border-radius: 4px;
+  font-size: 18px;
+  color: rgba(255, 255, 255);
+  cursor: pointer;
 }
 
 .login-button:hover {
-    opacity: 0.9;
+  opacity: 0.9;
 }
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 72c1143..6b1311f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,9 +1,55 @@
-<script setup>
-import CustomCalendar from '../components/CustomCalendar.vue'
-</script>
+<script setup></script>
 
 <template>
   <main>
-    <CustomCalendar />
+    <article>
+      <h1>An Exciting Blog Post</h1>
+      <p>
+        Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth
+        tatsoi tomatillo melon azuki bean garlic.
+      </p>
+
+      <p>
+        Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
+        fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea
+        peanut soko zucchini.
+      </p>
+
+      <p>
+        Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth
+        water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato
+        scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel
+        kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn
+        pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot
+        carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell
+        pepper artichoke.
+      </p>
+
+      <p>
+        Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya
+        nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce
+        water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi
+        leek soko chicory celtuce parsley jícama salsify.
+      </p>
+
+      <p>
+        Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram
+        celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot
+        horseradish carrot squash brussels sprout chard.
+      </p>
+    </article>
+
+    <aside>
+      <h2>Photography</h2>
+      <ul class="photos"></ul>
+    </aside>
   </main>
 </template>
+
+<style>
+main {
+  width: 80%;
+  display: flex;
+  flex: 3 1;
+}
+</style>