update about page and other files

MortarHQ · Mar 31, 2024 · 90b3030 · 90b3030
1 parent a7ad1c7
commit 90b3030
Show file tree

Hide file tree

Showing 11 changed files with 692 additions and 131 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "element-plus": "^2.6.3",
     "pinia": "^2.1.7",
+    "sass": "^1.72.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -1,91 +1,16 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from "vue-router";
-import HelloWorld from "./components/HelloWorld.vue";
 </script>
 
 <template>
-  <header>
-    <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>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+  <main>
+    <RouterView />
+  </main>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
+main {
+  margin: 0 auto;
+  max-width: 1440px;
 }
 </style>
diff --git a/src/assets/appreciationList.json b/src/assets/appreciationList.json
@@ -0,0 +1,35 @@
+[
+    {
+        "name": "landmine",
+        "avatar": "https://avatars.githubusercontent.com/u/90912817",
+        "contribute": "服主",
+        "date": "2022-2024",
+        "describe": "感谢各位的支持与贡献\n欢迎新玩家加入！",
+        "link": "https://github.com/landminehq"
+    },
+    {
+        "name": "WaterOfChaos",
+        "contribute": "管理【无偿】",
+        "date": "2022-2024"
+    },
+    {
+        "name": "bai_fan_zhou_jing",
+        "contribute": "管理【无偿】",
+        "date": "2023-2024"
+    },
+    {
+        "name": "bai_fan_zhou_jing",
+        "contribute": "无偿捐助 14.52",
+        "date": "2024-03"
+    },
+    {
+        "name": "gayaqi",
+        "contribute": "无偿捐助 20",
+        "date": "2024-03"
+    },
+    {
+        "name": "alaya",
+        "contribute": "无偿捐助 10",
+        "date": "2024-03-31"
+    }
+]
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,17 +1,23 @@
-@import "./base.css";
+/* @import "./base.css"; */
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  transition: 0.4s;
+}
 
 #app {
-  max-width: 1280px;
+  width: 100%;
+  min-height: 100%;
   margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+  padding: 0;
 }
 
 a,
 .green {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
   padding: 3px;
 }
 
@@ -20,16 +26,3 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/src/components/AppreciationCard.vue b/src/components/AppreciationCard.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="appreciationCardContainer">
+    <header>
+      <IconAvatar :avatar="props.avatar" />
+      <div class="name">
+        <font>
+          <a :href="props.link" :target="props.link ? '_blank' : '_self'">{{
+            props.name
+          }}</a>
+        </font>
+        <font>{{ props.contribute }}</font>
+      </div>
+      <time :datetime="props.date">{{ props.date }}</time>
+    </header>
+    <main>
+      <font>
+        {{ props.describe }}
+      </font>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconAvatar from "./icons/IconAvatar.vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+    default: "userName",
+  },
+  contribute: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  date: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  avatar: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  describe: {
+    type: String,
+    required: false,
+    default: "没有留下描述……",
+  },
+  link: {
+    type: String,
+    required: false,
+    default: "#",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.appreciationCardContainer {
+  display: flex;
+  width: 400px;
+  height: auto;
+  padding-top: var(--Size-common-component-size-small, 24px);
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+
+  border-radius: var(--Radius-border-radius-round, 20px);
+  background: var(--Color-Background-bg-color, #fff);
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
+
+  header {
+    position: relative;
+    display: flex;
+    padding: 0px var(--Size-common-component-size-small, 24px);
+    align-items: flex-start;
+    align-self: stretch;
+
+    & > :first-child {
+      width: 95px;
+      height: 95px;
+
+      border-radius: 95px;
+      background: url(<path-to-image>) lightgray 50% / cover no-repeat;
+    }
+
+    & > .name {
+      display: flex;
+      padding: 16px;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+
+      font {
+        &:first-of-type > a {
+          color: var(--Color-Text-text-color-primary, #303133);
+          font-family: Inter;
+          font-size: 24px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+        }
+
+        &:last-of-type {
+          color: var(--Color-Text-text-color-secondary, #909399);
+          font-family: Inter;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+        }
+      }
+    }
+
+    & > time {
+      right: 24px;
+      position: absolute;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-start;
+      flex: 1 0 0;
+      align-self: stretch;
+
+      color: var(--Color-Text-text-color-disabled, #c0c4cc);
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+      text-align: right;
+    }
+  }
+
+  main {
+    display: flex;
+    padding: var(--Size-common-component-size-small, 24px) 32px;
+    align-items: flex-start;
+    align-self: stretch;
+
+    & > font {
+      color: var(--Color-Text-text-color-placeholder, #a8abb2);
+      font-family: Inter;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+      white-space: pre;
+    }
+  }
+}
+</style>
diff --git a/src/components/icons/IconAvatar.vue b/src/components/icons/IconAvatar.vue
@@ -0,0 +1,48 @@
+<template>
+  <svg
+    v-if="!props.avatar"
+    width="95"
+    height="95"
+    viewBox="0 0 95 95"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <circle id="Ellipse 1" cx="47.5" cy="47.5" r="47.5" fill="url(#pattern0)" />
+    <defs>
+      <pattern
+        id="pattern0"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use xlink:href="#image0_902_17" transform="scale(0.015625)" />
+      </pattern>
+      <image
+        id="image0_902_17"
+        data-name="Checker.png"
+        width="64"
+        height="64"
+        xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAONJREFUeF7t20EOhEAIRFG4/6F7DvEnYeFzryQIv6pBd2behOu9dPvsbog+k+NLgArQAqmJcw9iAAhSgZKB3IJkkAySQTJ4CiE+gA8oBeg0mH3Ai084P89HhqwEqIA209ICsQdjAeaZIgaAYKxBDMCAYy8fXwAIgiAIcoJpJEYGI4VjB3YrbC9gL2AvkCB43cM5PgZgAAZgQFnNZAhdGykQBEEQBEEQDBmgAm2glM/z+QUYisYUGoldO7kY32IEAzCg6RgIRgjFAsw+AgRBMNYgBmCAT2TCYfoPPz/HCqQCX1eBHzHnv7C7WhBSAAAAAElFTkSuQmCC"
+      />
+    </defs>
+  </svg>
+  <img class="avatarImg" v-else :src="props.avatar" alt="avatar" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  avatar: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.avatarImg {
+  width: 100%;
+  height: 100%;
+}
+</style>