[前端]完成复习曲线页面样式

mc1128-png · Feb 27, 2022 · 4662aad · 4662aad
1 parent 1f9b36c
commit 4662aad
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 6 deletions.
diff --git a/web/mobile/src/components/Analyse.vue b/web/mobile/src/components/Analyse.vue
@@ -1,5 +1,65 @@
 <template>
-  <div>Analyse</div>
+  <div class="analyse-wrap">
+    <!-- 复习相关 -->
+    <p class="analyse-date-text">截止北京时间 2022年2月27日23:48:01</p>
+    <!-- 卡片相关 -->
+    <div class="analyse-item">
+      <van-grid clickable :column-num="2">
+        <van-grid-item>
+          <!-- 今日复习 相对于昨日 -->
+          <div class="review-today-wrap">
+            <div class="review-diff-wrap">
+              <div>较昨日</div>
+              <div class="review-diff-text">+100</div>
+            </div>
+          </div>
+          <div class="review-today-text">1123</div>
+          <div class="review-title">今日复习次数</div>
+        </van-grid-item>
+        <van-grid-item
+          icon="chart-trending-o"
+          to="https://github.com"
+          :badge-props="{ dot: true, color: '#1989fa', offset: [10, 1] }"
+        >
+          <template #text>
+            <div class="all-data-title">累计复习次数</div>
+          </template>
+        </van-grid-item>
+        <!-- 创建卡片 -->
+        <van-grid-item>
+          <!-- 今日复习 相对于昨日 -->
+          <div class="review-today-wrap">
+            <div class="review-diff-wrap">
+              <div>较昨日</div>
+              <div class="review-diff-text">+100</div>
+            </div>
+          </div>
+          <div class="review-today-text">1123</div>
+          <div class="review-title">今日创建卡片</div>
+        </van-grid-item>
+        <van-grid-item
+          icon="bar-chart-o"
+          to="https://github.com"
+          :badge-props="{ dot: true, color: '#1989fa', offset: [10, 1] }"
+        >
+          <template #text>
+            <div class="all-data-title">累计创建卡片</div>
+          </template>
+        </van-grid-item>
+      </van-grid>
+    </div>
+    <!-- 类别数量 -->
+    <div class="analyse-item">
+      <van-grid :column-num="1">
+        <van-grid-item>
+          <div class="item-category-wrap">
+            <div>类别数量</div>
+            <div class="category-count">22</div>
+          </div>
+        </van-grid-item>
+      </van-grid>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -8,11 +68,73 @@ import { defineComponent } from "vue";
 export default defineComponent({
   name: "Analyse",
   setup() {
-    
     return {
       // 返回的数据
-      
     };
   },
 });
-</script>
+</script>
+
+<style lang="scss" scoped>
+.analyse-wrap {
+  min-height: calc(100vh - 66px);
+  margin: 0 10px;
+  .analyse-date-text {
+    color: #969790;
+    font-size: 12px;
+    margin-top: 10;
+    margin-bottom: 10;
+  }
+  .analyse-item {
+    margin-bottom: 30px;
+    // 今日复习
+    .review-today-wrap {
+      font-size: 13px;
+      .review-diff-wrap {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .review-diff-text {
+          color: #178b50;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+    .review-today-text {
+      margin-top: 5px;
+      font-size: 18px;
+      color: #4e5a65;
+      font-weight: bold;
+    }
+    .review-title {
+      margin-top: 5px;
+      font-size: 14px;
+      color: #7c7c7c;
+    }
+    // 累计复习
+    .all-data-title {
+      margin-top: 15px;
+      font-size: 14px;
+      color: #7c7c7c;
+    }
+    .item-category-wrap {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: 70%;
+      font-size: 15px;
+      color: #7c7c7c;
+      .category-count {
+        color: #178b50;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        font-weight: bold;
+        font-size: 17px;
+      }
+    }
+  }
+}
+</style>
diff --git a/web/mobile/src/components/settings.vue b/web/mobile/src/components/settings.vue
@@ -10,7 +10,7 @@
           <router-link :to="{ name: 'SignUp' }">注册</router-link>
         </van-notice-bar>
       </div>
-      <div class="user-info" else>
+      <div class="user-info" v-else>
         <van-cell-group inset>
           <van-cell class="user-info-cell">
             <template #title>

diff --git a/web/mobile/src/main.ts b/web/mobile/src/main.ts
@@ -29,7 +29,8 @@ import { Loading } from "vant";
 import { Skeleton } from "vant"; // 骨架
 import { Switch } from "vant"; // 开关
 import { Checkbox, CheckboxGroup } from "vant"; // 复选框
-import { Stepper } from 'vant';  // 步进器
+import { Grid, GridItem } from "vant"; // 宫格
+import { Stepper } from "vant"; // 步进器
 
 import Vue3TouchEvents from "vue3-touch-events"; // 滑动事件
 // 文档: https://github.com/robinrodricks/vue3-touch-events
@@ -68,5 +69,6 @@ app.use(Switch);
 app.use(Checkbox);
 app.use(CheckboxGroup);
 app.use(Stepper);
+app.use(Grid).use(GridItem);
 
 app.use(store).use(router).mount("#app");