From b1ece07f36b746fd8ce8fe69faf0a4c628c194ef Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Mon, 27 Feb 2023 00:18:17 +0800
Subject: [PATCH] feat: 2.0

---
 apps/web/src/assets/main.less       | 49 +++++++++++++++++++++++-
 apps/web/src/views/Course/index.vue | 59 +++++++++++++++++++++++++++--
 2 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/assets/main.less b/apps/web/src/assets/main.less
index 43fe425..6779e96 100644
--- a/apps/web/src/assets/main.less
+++ b/apps/web/src/assets/main.less
@@ -3,7 +3,23 @@
 html,
 body {
   position: relative;
-  background: var(--color-neutral-2);
+  // background: var(--color-neutral-2);
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+  height: 100vh;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
 @font-face {
@@ -20,3 +36,34 @@ input {
   outline: none;
   border: 0;
 }
+
+.g-glossy {
+  position: relative;
+  margin: auto;
+  overflow: hidden;
+  z-index: 10;
+  &::before {
+    content: '';
+    position: absolute;
+    top: -100px;
+    left: -100px;
+    right: -100px;
+    bottom: -100px;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+
+    filter: blur(10px);
+    z-index: -2;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.2);
+    z-index: -1;
+  }
+}
diff --git a/apps/web/src/views/Course/index.vue b/apps/web/src/views/Course/index.vue
index 3a77378..dc5f1c9 100644
--- a/apps/web/src/views/Course/index.vue
+++ b/apps/web/src/views/Course/index.vue
@@ -1,5 +1,58 @@
 <template>
-  <div>
-    course
+  <div class="course-list">
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
+    <div class='g-glossy'>
+      <p>Flutter 2：客户端应用开发</p>
+      <span>开发前端、移动端与桌面端应用</span>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="less" scoped>
+.course-list {
+  .g-glossy {
+    border-radius: 3px;
+    margin-bottom: 20px;
+    padding: 30px 20px;
+  }
+}
+</style>
\ No newline at end of file