完成结果弹框

src/App.vue

@@ -192,7 +192,7 @@ const show = $ref(false)
     </div>
     <Side/>
     <Statistics></Statistics>
-    <!--    <DictModal/>-->
+<!--    <DictModal/>-->
   </div>
 </template>
 

src/assets/css/anim.scss

@@ -14,4 +14,14 @@
   以便能够正确地计算移动的动画。 */
 .list-leave-active {
   position: absolute;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }

src/assets/css/colors.scss

@@ -8,4 +8,5 @@ $main: rgb(12, 140, 233);
 $second: rgb(75, 110, 175);
 $item-hover: rgb(75, 75, 75);
 $space: 20rem;
-$footer-height: 40rem;
+$footer-height: 40rem;
+$card-radius: 8rem;

src/assets/css/style.scss

@@ -1,7 +1,6 @@
 @import "@icon-park/vue-next/styles/index.css";
 @import "colors";
 @import "anim";
-@import "hover.css";
 
 html, body {
   padding: 0;
@@ -40,14 +39,34 @@ footer {
   gap: $space;
 }
 
-.my-button {
-  font-size: 13rem;
+.i-icon {
   cursor: pointer;
-  border-radius: 4rem;
+}
+
+.my-button {
+  //font-size: 13rem;
+  cursor: pointer;
+  border-radius: 6rem;
   padding: 0 15rem;
   height: 28rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: $main;
+  line-height: 18rem;
+  transition: all .3s;
+  background: rgb(75, 85, 99);
+
+  &:hover {
+    opacity: .7;
+  }
+
+  &.large {
+    height: 50rem;
+    font-size: 18rem;
+    padding: 0 18rem;
+  }
+
+  &.primary {
+    background: $main;
+  }
 }

src/components/Modal.vue

@@ -1,14 +1,24 @@
 <script setup lang="ts">
+import {Close} from "@icon-park/vue-next"
+
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
+
+function close() {
+  emit('update:modelValue', false)
+}
 </script>
 
 <template>
   <Teleport to="body">
     <Transition name="bounce">
       <div class="modal-root" v-if="props.modelValue">
-        <div class="modal-mask" @click="$emit('update:modelValue',false)"></div>
+        <div class="modal-mask" @click="close"></div>
         <div class="modal">
+          <Close @click="close"
+                 class="close"
+                 theme="outline" size="20" fill="#929596"
+                 :strokeWidth="2"/>
           <div class="modal-body">
             <slot></slot>
           </div>
@@ -135,5 +145,11 @@ $header-height: 60rem;
       display: flex;
     }
   }
+
+  .close {
+    position: absolute;
+    right: 20rem;
+    top: 20rem;
+  }
 }
 </style>

src/components/Statistics.vue

@@ -1,8 +1,9 @@
 <script setup>
 import Modal from "@/components/Modal.vue";
 import {useBaseStore} from "@/stores/base.ts";
-import {Close} from '@icon-park/vue-next'
+import {Close, ShareThree, KeyboardOne, Tea, Like} from '@icon-park/vue-next'
 import Ring from "@/components/Ring.vue";
+import Tooltip from "@/components/Tooltip.vue";
 
 const store = useBaseStore()
 </script>
@@ -12,38 +13,171 @@ const store = useBaseStore()
     <div class="statistics">
       <header>
         <div class="title">新概念英语-2 第3章</div>
-        <close @click="store.dictModalIsOpen2 = false" theme="outline" size="20" fill="#929596"
-               :strokeWidth="2"/>
       </header>
       <div class="content">
         <div class="rings">
           <Ring/>
           <Ring/>
-          <Ring/>
+          <Ring style="margin-bottom: 0;"/>
         </div>
         <div class="result">
-          <div class="wrong-words">
+          <div class="wrong-words-wrapper">
+            <div class="wrong-words">
+              <div class="word" v-for="i in 500">Yes</div>
+            </div>
+          </div>
 
+          <div class="notice">
+            <like theme="filled" size="20" fill="#ffffff" :strokeWidth="2"/>
+            表现不错，全对了！
           </div>
         </div>
+        <div class="shares">
+          <Tooltip title="分享给朋友">
+            <share-three theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
+          </Tooltip>
+          <Tooltip title="分享给朋友">
+            <tea theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
+          </Tooltip>
+          <Tooltip title="分享给朋友">
+            <share-three theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
+          </Tooltip>
+        </div>
+      </div>
+      <div class="footer">
+        <Tooltip title="Ctrl + Enter键默写本章节">
+          <div class="my-button large">
+            默写本章节
+            <div class="key-notice">
+              <keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>
+              <span>Ctrl + Enter</span>
+            </div>
+          </div>
+        </Tooltip>
+        <Tooltip title="按Enter键重复本章节">
+          <div class="my-button large">
+            重复本章节
+            <div class="key-notice">
+              <keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>
+              <span>Enter</span>
+            </div>
+          </div>
+        </Tooltip>
+        <Tooltip title="按Tab键进行下一章节">
+          <div class="my-button large  ">
+            下一章节
+            <div class="key-notice">
+              <keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>
+              <span>Tab</span>
+            </div>
+          </div>
+        </Tooltip>
       </div>
     </div>
   </Modal>
+  <canvas></canvas>
 </template>
 <style scoped lang="scss">
+@import "@/assets/css/style";
+
 .statistics {
   width: 50vw;
-  height: 70vh;
+  padding: $space;
+  background: $dark-second-bg;
+  border-radius: $card-radius;
+
+  $header-height: 40rem;
+  $footer-height: 60rem;
 
   header {
     display: flex;
     align-items: center;
     justify-content: center;
-
+    height: $header-height;
+    font-size: 24rem;
+    margin-bottom: 15rem;
   }
 
   .content {
+    display: flex;
+    gap: $space;
+    margin-bottom: 15rem;
 
+    .result {
+      flex: 1;
+      box-sizing: border-box;
+      overflow: hidden;
+
+      .wrong-words-wrapper {
+        border-radius: $card-radius $card-radius 0 0;
+        background: $item-hover;
+        padding-top: $space;
+
+      }
+
+      .wrong-words {
+        padding: $space;
+        padding-top: 0;
+        height: 30vh;
+        box-sizing: border-box;
+        overflow: auto;
+        display: flex;
+        margin-right: 5rem;
+        flex-wrap: wrap;
+        gap: 10rem;
+        align-items: flex-start;
+
+        .word {
+          display: inline-block;
+          border-radius: 6rem;
+          padding: 5rem 15rem;
+          background: $dark-second-bg;
+        }
+      }
+
+      .notice {
+        border-radius: 0 0 $card-radius $card-radius;
+        background: $main;
+        height: 40rem;
+        display: flex;
+        gap: 10rem;
+        align-items: center;
+        padding-left: $space;
+      }
+    }
+
+    .shares {
+      display: flex;
+      flex-direction: column;
+      gap: $space;
+    }
+  }
+
+  .footer {
+    height: $footer-height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20rem;
+
+    .key-notice {
+      margin-left: 10rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12rem;
+      gap: 2rem;
+    }
   }
 }
+
+canvas {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}
+
 </style>

src/components/Tooltip.vue

@@ -0,0 +1,66 @@
+<script lang="jsx">
+import {nextTick, Teleport, Transition} from "vue";
+
+export default {
+  name: "Tooltip",
+  props: {
+    title: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    showPop(e) {
+      e.stopPropagation()
+      let rect = e.target.getBoundingClientRect()
+      this.show = true
+      nextTick(() => {
+        let tip = this.$refs.tip.getBoundingClientRect()
+        this.$refs.tip.style.top = rect.top - tip.height - 10 + 'px'
+        let tipWidth = tip.width
+        let rectWidth = rect.width
+        this.$refs.tip.style.left = rect.left - (tipWidth - rectWidth) / 2 + 'px'
+      })
+    },
+  },
+  render() {
+    let Vnode = this.$slots.default()[0]
+    return <>
+      <Teleport to="body">
+        <Transition name="fade">
+          {
+              this.show && (
+                  <div ref="tip" class="tip">
+                    {this.title}
+                  </div>
+              )
+          }
+        </Transition>
+      </Teleport>
+      <Vnode ref='tip'
+             onmouseenter={(e) => this.showPop(e)}
+             onmouseleave={() => this.show = false}
+      />
+    </>
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/style";
+
+.tip {
+  position: fixed;
+  font-size: 14rem;
+  z-index: 999;
+  border-radius: 4rem;
+  padding: 10rem;
+  background: $item-hover;
+}
+</style>