Add readme

2024-08-04 13:21:52 +08:00 · 2024-08-04 13:21:52 +08:00 · 941f3982b6
parent f8b98bf8e8
commit 941f3982b6
4 changed files with 45 additions and 4 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>湖南大学望麓社区莫相思姐姐的日记贴</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/App.vue
+++ b/src/App.vue
@ -22,4 +22,8 @@ body {
  margin: 0;
  padding: 0;
 }
+
+#app {
+  padding: 1em;
+}
 </style>
--- a/src/components/PostList.vue
+++ b/src/components/PostList.vue
@ -1,5 +1,13 @@
 <template>
  <div class="post-list">
+    <div key="top" class="post-item">
+      <div class="ribbon">
+        <a href="#">置顶</a>
+      </div>
+      <h3>Read Me</h3>
+      <small>{{ currentTime }}</small>
+      <p>此项目用来展示<a href="https://wlzb.net/community/forum.php?mod=viewthread&tid=174403&extra=&page=1">望麓自卑BBS</a>莫相思的日记贴。<br> 如本项目侵犯到您的利益，请联系本人删除，谢谢(#^.^#)。<br>dugulingping#outlook.com</p>
+    </div>
    <div v-for="post in posts" :key="post.id" class="post-item">
      <h3>{{ post.author }}</h3>
      <small>{{ new Date(post.create_time).toLocaleString() }}</small>
@ -25,6 +33,7 @@ export default {
      isLoading.value = true
      try {
        const response = await axios.get(`https://moxiangsi.srv.ink/api/posts?page=${page.value}&limit=10`)
+        // const response = await axios.get(`http://localhost:8080/api/posts?page=${page.value}&limit=10`)
        posts.value.push(...response.data)
        page.value++
      } catch (error) {
@ -63,10 +72,12 @@ export default {

    return {
      posts,
-      observer
+      observer,
+      currentTime: new Date().toLocaleString(),
    }
  }
 }
+// export default {
 </script>

 <style scoped>
@ -110,6 +121,33 @@ export default {

  .post-item {
    padding: 10px;
+    color: #1a1a1a;
  }
 }
+/* HTML: <div class="ribbon">Your text content</div> */
+.ribbon {
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+}
+.ribbon {
+  --f: .5em; /* control the folded part */
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  line-height: 1.8;
+  padding-inline: 1lh;
+  padding-bottom: var(--f);
+  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
+  clip-path: polygon(
+      100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
+  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
+  transform-origin: 0% 100%;
+  background-color: #BD1550; /* the main color  */
+}
+.ribbon a{
+  color: #fff;
+  text-decoration: none;
+}
 </style>
--- a/src/style.css
+++ b/src/style.css
@ -4,7 +4,7 @@
  font-weight: 400;

  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  color: #1a1a1a;
  background-color: #242424;

  font-synthesis: none;
@ -61,7 +61,6 @@ button:focus-visible {
 #app {
  max-width: 1280px;
  margin: 0 auto;
-  padding: 2rem;
  text-align: center;
 }