feat: 活动页面基础ui

open-isle-cli/src/assets/global.css

@@ -14,7 +14,7 @@
   --menu-text-color: black;
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   --normal-background-color: rgb(241, 241, 241);
-  --login-background-color: rgb(241, 241, 241);
+  --login-background-color: rgb(248, 248, 248);
   --login-background-color-hover: #e0e0e0;
   --text-color: black;
   --blockquote-text-color: #6a737d;
@@ -22,6 +22,7 @@
   --page-max-width: 1200px;
   --page-max-width-mobile: 900px;
   --article-info-background-color: #f0f0f0;
+  --activity-card-background-color: #f0f0f0;
 }
 
 [data-theme='dark'] {
@@ -42,6 +43,7 @@
   --text-color: #eee;
   --blockquote-text-color: #999;
   --article-info-background-color: #747373;
+  --activity-card-background-color: #585858;
 }
 
 body {

open-isle-cli/src/views/ActivityListPageView.vue

@@ -1,19 +1,37 @@
 <template>
   <div class="activity-list-page">
-    <h1>活动列表</h1>
-    <ul>
-      <li v-for="a in activities" :key="a.id">{{ a.title }}</li>
-    </ul>
+    <div class="activity-list-page-card" v-for="a in activities" :key="a.id">
+      <div class="activity-list-page-card-normal">
+      <div v-if="a.icon" class="activity-card-normal-left">
+        <img :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
+      </div>
+      <div class="activity-card-normal-right">
+        <div class="activity-card-normal-right-header">
+          <div class="activity-list-page-card-title">{{ a.title }}</div>
+          <div v-if="a.ended" class="activity-list-page-card-state-end">已结束</div>
+          <div v-else class="activity-list-page-card-state-ongoing">进行中</div>
+        </div>
+        <div class="activity-list-page-card-content">{{ a.content }}</div>
+        <div class="activity-list-page-card-footer">
+          <div class="activity-list-page-card-footer-start-time">
+            <i class="fas fa-clock"></i>
+            <span>开始于 {{ TimeManager.format(a.startTime) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { API_BASE_URL } from '../main'
+import TimeManager from '../utils/time'
 
 export default {
   name: 'ActivityListPageView',
   data() {
-    return { activities: [] }
+    return { activities: [], TimeManager }
   },
   async mounted() {
     const res = await fetch(`${API_BASE_URL}/api/activities`)
@@ -26,6 +44,77 @@ export default {
 
 <style scoped>
 .activity-list-page {
-  padding: 10px;
+  background-color: var(--background-color);
+  padding: 20px;
+  height: calc(100vh - var(--header-height) - 40px);
 }
+
+.activity-list-page-card {
+  padding: 10px;
+  width: calc(100% - 20px);
+  gap: 10px;
+  background-color: var(--activity-card-background-color);  
+  border-radius: 20px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.activity-card-left-avatar-img {
+  width: 150px;
+  height: 150px;
+  border-radius: 10%;
+  object-fit: cover;
+  background-color: var(--background-color);
+}
+
+.activity-card-normal-right-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.activity-list-page-card-normal {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.activity-list-page-card-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.activity-list-page-card-content {
+  font-size: 1.0rem;
+  margin-top: 10px;
+  opacity: 0.8;
+}
+
+.activity-list-page-card-footer {
+  margin-top: 10px;
+}
+
+.activity-list-page-card-state-end,
+.activity-list-page-card-state-ongoing {
+  font-size: 0.8rem;
+}
+
+.activity-list-page-card-state-end {
+  color: var(--text-color);
+  opacity: 0.5;
+}
+
+.activity-list-page-card-state-ongoing {
+  color: var(--primary-color);
+}
+
+.activity-list-page-card-footer-start-time {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+
 </style>

src/main/java/com/openisle/config/ActivityInitializer.java

@@ -16,8 +16,10 @@ public class ActivityInitializer implements CommandLineRunner {
     public void run(String... args) {
         if (activityRepository.findByType(ActivityType.MILK_TEA) == null) {
             Activity a = new Activity();
-            a.setTitle("建站送奶茶活动");
+            a.setTitle("🎡建站送奶茶活动");
             a.setType(ActivityType.MILK_TEA);
+            a.setIcon("https://icons.veryicon.com/png/o/food--drinks/delicious-food-1/coffee-36.png");
+            a.setContent("为了有利于建站推广以及激励发布内容，我们推出了建站送奶茶的活动，前50名达到level 1的用户，可以联系站长获取奶茶/咖啡一杯");
             activityRepository.save(a);
         }
     }

src/main/java/com/openisle/model/Activity.java

@@ -26,6 +26,8 @@ public class Activity {
 
     private String icon;
 
+    private String content;
+
     @Column(name = "start_time", nullable = false)
     @CreationTimestamp
     private LocalDateTime startTime;