fix

fix CustomPoem

.gitignore

@@ -28,3 +28,4 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+/package-lock.json

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>

src/assets/main.css

@@ -28,8 +28,6 @@ a,
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
 }

src/components/ContentCard.vue

@@ -1,20 +1,19 @@
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue'
-import Post from '../utils/Post.js';
 
 export default defineComponent({
   props: {
-        post: { type: Post, required: true },
+    post: { type: null, required: true }
   },
   data() {
     return {
       childPost: {}
-        };
+    }
   },
   created() {
-        this.childPost = this.post;
+    this.childPost = this.post
-    },
+  }
-});
+})
 </script>
 <template>
   <div class="card">
@@ -31,7 +30,7 @@ export default defineComponent({
 <style scoped>
 .card {
   box-sizing: border-box;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.24);
   border-radius: 4px;
   padding: 8px;
   cursor: pointer;
@@ -44,14 +43,13 @@ export default defineComponent({
   line-height: 24px;
   /* margin-bottom: 4px; */
   padding-bottom: 4px;
-    border-bottom: 1px solid rgba(0, 0, 0, .24);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.24);
 }
 
 .card .title:hover {
   color: burlywood;
 }
 
-
 .card .content {
   padding: 4px;
   /* height: 100%; */

src/components/CustomCalendar.js

@@ -1,21 +1,19 @@
-
+const weekDayNumber = 7
-
+const week_zh_cn = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-const weekDayNumber = 7;
+const week_en_us = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
-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.year = year
-        this.month = month;
+    this.month = month
-        this.day = day;
+    this.day = day
-        this.content = content;
+    this.content = content
-        this.isCurrentMonth = isCurrentMonth;
+    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()
@@ -28,54 +26,48 @@ const defaultDay = defaultDate.getDate()
  * @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);
+    currentDays = new Array(42)
-    } else if (currentDays.length != 42) {
+  } else if (currentDays.length !== 42) {
-        console.log(currentDays);
+    console.log(currentDays)
-        throw new Error(currentDays)
+    throw new Error('currentDays:' + currentDays)
   } else {
-        currentDays = [...currentDays];
+    currentDays = [...currentDays]
   }
 
-    const days = currentDays;
+  const days = currentDays
-    const lastDayOfLastMonth = new Date(year, month, 0);
+  const lastDayOfLastMonth = new Date(year, month, 0)
-    const firstDayOfMonth = new Date(year, month, 1);
+  const firstDayOfMonth = new Date(year, month, 1)
-    const lastDayOfMonth = new Date(year, month + 1, 0);
+  const lastDayOfMonth = new Date(year, month + 1, 0)
-    const currentDaysOfMonth = lastDayOfMonth.getDate();
+  const currentDaysOfMonth = lastDayOfMonth.getDate()
-    const daysOfLastMonth = lastDayOfLastMonth.getDate();
+  const daysOfLastMonth = lastDayOfLastMonth.getDate()
 
   for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
-        const weekDay = firstDayOfMonth.getDay() - 1;
+    const weekDay = firstDayOfMonth.getDay() - 1
-        days[i] = new Day(year, month - 1, daysOfLastMonth - weekDay + i, week_zh_cn[i]);
+    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;
+    const weekDay = (firstDayOfMonth.getDay() + i) % weekDayNumber
-        days[firstDayOfMonth.getDay() + i] = new Day(year, month, i + 1, week_zh_cn[weekDay], true);
+    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;
+      days[firstDayOfMonth.getDay() + i].isCurrentDay = true
     }
   }
 
   for (let i = currentDaysOfMonth + firstDayOfMonth.getDay(); i < days.length; i++) {
-        const extraDay = i - currentDaysOfMonth - firstDayOfMonth.getDay() + 1;
+    const extraDay = i - currentDaysOfMonth - firstDayOfMonth.getDay() + 1
-        const weekDay = i % weekDayNumber;
+    const weekDay = i % weekDayNumber
-        days[i] = new Day(year, month + 1, extraDay, week_zh_cn[weekDay]);
+    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 }
-
-
-
-
-
-
-
-
-
-

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;
   }

src/components/CustomPoem.vue

@@ -1,15 +1,8 @@
-<script>
+<script setup>
-import { defineComponent } from 'vue';
+import { reactive } from 'vue'
-
+const poem = reactive({
-export default defineComponent({
+  title: '雨霖铃·寒蝉凄切',
-    props: {
+  body: [
-        poemTitle: {
-            type: String,
-            default: '雨霖铃·寒蝉凄切'
-        },
-        poemBody: {
-            type: Array,
-            default: () => [
     '寒蝉凄切，对长亭晚，骤雨初歇。',
     '都门帐饮无绪，留恋处，兰舟催发。',
     '执手相看泪眼，竟无语凝噎。',
@@ -18,25 +11,23 @@ export default defineComponent({
     '今宵酒醒何处？杨柳岸，晓风残月。',
     '此去经年，应是良辰好景虚设。',
     '便纵有千种风情，更与何人说？'
-            ],
+  ]
-        }
+})
-    },
-    data() {
-        return {
 
-        };
+console.log(poem.body)
-    },
-});
 </script>
 
 <template>
   <div class="poem">
-        <h2 class="poem-title">
+    <h2 class="poem_title">{{ poem.title }}</h2>
-            {{ this.poemTitle }}
+    <ul class="poem_body">
-        </h2>
+      <li v-for="(line, index) in poem.body" :key="index">
-        <ul class="poem-body">
+        <span
-            <li v-for="{poem, index} in this.poemBody" :key="index">
+          v-for="(char, charIndex) in line.split('')"
-                {{ poem }}
+          :key="charIndex"
+          :style="{ animationDelay: charIndex * 0.1 + 's' }"
+          >{{ char }}</span
+        >
       </li>
     </ul>
   </div>
@@ -44,7 +35,7 @@ export default defineComponent({
 
 <style scoped>
 * {
-    /* box-sizing: border-box; */
+  box-sizing: border-box;
   font-family: 'Ma Shan Zheng', cursive;
   margin: 0;
   padding: 0;
@@ -60,24 +51,33 @@ ul {
   width: 280px;
   border-radius: 4px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-}
-
-.poem-title {
   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 {
+    > li {
       margin: 5px auto;
     }
+
+    > li span {
+      opacity: 0;
+      animation: fadeIn 1s forwards;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
 }
 </style>

src/components/PersonInfo.vue

@@ -1,23 +0,0 @@
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-    props: {
-    },
-    data() {
-        return {
-
-        };
-    },
-});
-</script>
-
-<template>
-    <div>
-        PersonInfoHHHHH
-    </div>
-</template>
-
-<style scoped>
-
-</style>

src/components/TestApi.vue

@@ -1,5 +1,5 @@
 <script>
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   data() {
@@ -9,27 +9,27 @@ export default defineComponent({
   },
   methods: {
     testapi() {
-            fetch("http://127.0.0.1:3000/user")
+      fetch('http://127.0.0.1:3000/user')
-                .then(res => res.json())
+        .then((res) => res.json())
-                .then(data => {
+        .then((data) => {
-                    this.test = data;
+          this.test = data
         })
-                .catch(err => console.log('Request Failed', err))
+        .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].name }}<br />
-        {{ this.test[0].birth }}<br>
+    {{ this.test[0].birth }}<br />
-        {{ this.test[0].gender }}<br>
+    {{ this.test[0].gender }}<br />
-        {{ this.test[0].name }}<br>
+    {{ this.test[0].name }}<br />
-        {{ this.test[0].password }}<br>
+    {{ this.test[0].password }}<br />
-        {{ this.test[0].register_date }}<br>
+    {{ this.test[0].register_date }}<br />
-        {{ this.test[0].status }}<br>
+    {{ this.test[0].status }}<br />
   </p>
 </template>
 

src/components/XiaoMiLogin.vue

@@ -1,15 +1,16 @@
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue'
+
 export default defineComponent({
   props: {
     welcome: {
       type: String,
-            default: '你好',
+      default: '你好'
     },
     url: {
       type: String,
-            default: 'http://127.0.0.1:3000/login',
+      default: 'http://127.0.0.1:3000/login'
-        },
+    }
   },
   data() {
     return {
@@ -20,69 +21,79 @@ export default defineComponent({
       accountShow: true,
       passwordShow: true,
       account: '',
-            password: '',
+      password: ''
-        };
+    }
   },
   watch: {
     account(val) {
-            val.length > 0 ? (this.showAccountError = false, this.accountShow = false) :
+      if (val.length > 0) {
-                (this.showAccountError = false, this.accountShow = false);
+        this.showAccountError = false
+        this.accountShow = false
+      } else {
+        this.showAccountError = false
+        this.accountShow = false
+      }
     },
     password(val) {
-            val.length > 0 ? (this.showPasswordError = false, this.passwordShow = false) :
+      if (val.length > 0) {
-                (this.showPasswordError = false, this.passwordShow = false);
+        this.showPasswordError = false
-        },
+        this.passwordShow = false
+      } else {
+        this.showPasswordError = false
+        this.passwordShow = false
+      }
+    }
   },
   methods: {
     accountFocus() {
       if (this.account.length <= 0) {
-                this.accountShow = true;
+        this.accountShow = true
-                this.accountAbove = true;
+        this.accountAbove = true
-                this.showAccountError = true;
+        this.showAccountError = true
       }
     },
     accountBlur() {
       if (this.account.length <= 0) {
-                this.accountShow = false;
+        this.accountShow = false
-                this.accountAbove = false;
+        this.accountAbove = false
-                this.showAccountError = false;
+        this.showAccountError = false
       }
     },
     passwordFocus() {
       if (this.password.length <= 0) {
-                this.passwordShow = true;
+        this.passwordShow = true
-                this.passwordAbove = true;
+        this.passwordAbove = true
-                this.showPasswordError = true;
+        this.showPasswordError = true
       }
     },
     passwordBlur() {
       if (this.password.length <= 0) {
-                this.passwordShow = false;
+        this.passwordShow = false
-                this.passwordAbove = false;
+        this.passwordAbove = false
-                this.showPasswordError = false;
+        this.showPasswordError = false
       }
     },
     async login() {
       const payload = {
         account: this.account,
         password: this.password
-            };
+      }
       try {
-                console.log(this.url);
+        console.log(this.url)
         const response = await fetch(this.url, {
-                    method: "POST",
+          method: 'POST',
-                    mode: "cors",
+          mode: 'cors',
-                    cache: "default",
+          cache: 'default',
           headers: {
             'Content-Type': 'application/json; charset=utf-8'
           },
           credentials: 'include',
           body: JSON.stringify(payload)
-                });
+        })
-                const data = await response.json();
+        const data = await response.json()
-                console.log(data);
+        console.log(data)
       } catch (err) {
-                console.error(err);
+        console.error(err)
       }
     }
   }
@@ -109,7 +120,10 @@ export default defineComponent({
               />
               <label
                 class="floating-label"
-                                :class="{ 'floating-label-above': accountAbove, 'floating-label-error': showAccountError }"
+                :class="{
+                  'floating-label-above': accountAbove,
+                  'floating-label-error': showAccountError
+                }"
                 for="account"
                 >邮箱/手机号码</label
               >
@@ -135,7 +149,10 @@ export default defineComponent({
               />
               <label
                 class="floating-label"
-                                :class="{ 'floating-label-above': passwordAbove, 'floating-label-error': showPasswordError }"
+                :class="{
+                  'floating-label-above': passwordAbove,
+                  'floating-label-error': showPasswordError
+                }"
                 for="password"
                 >密码</label
               >
@@ -147,12 +164,7 @@ export default defineComponent({
       <div class="accept-terms">
         <label for="agreement" class="accept">
           <span class="agreement-checkbox">
-                        <input
+            <input class="accept-checkbox-input" type="checkbox" name="agreement" id="agreement" />
-                            class="accept-checkbox-input"
-                            type="checkbox"
-                            name="agreement"
-                            id="agreement"
-                        />
             <span class="agreement-inner"></span>
           </span>
           <span class="accept-text"
@@ -212,7 +224,6 @@ export default defineComponent({
   position: relative;
   border-radius: 4px;
   overflow: hidden;
-    transform: all 0.1s ease;
 }
 
 .form-field-error {
@@ -243,11 +254,6 @@ export default defineComponent({
   color: red;
 }
 
-.form-helper {
-    font-size: 12px;
-    color: red;
-}
-
 .accept-terms {
   height: 25px;
   line-height: 20px;
@@ -262,7 +268,7 @@ export default defineComponent({
   display: inline-flex;
 }
 
-.accept>span {
+.accept > span {
   display: block;
 }
 
@@ -306,7 +312,7 @@ export default defineComponent({
 }
 
 .form-action::after {
-    content: "";
+  content: '';
   display: block;
   clear: both;
 }

src/views/HomeView.vue

@@ -1,9 +1,55 @@
-<script setup>
+<script setup></script>
-import CustomCalendar from '../components/CustomCalendar.vue'
-</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>