save

src/components/Modal.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import {useBaseStore} from "@/stores/base.ts"
-
-const store = useBaseStore()
-
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 </script>
@@ -14,6 +10,7 @@ const emit = defineEmits(['update:modelValue'])
         <div class="modal-mask" @click="$emit('update:modelValue',false)"></div>
         <div class="modal">
           <div class="modal-body">
+            <slot></slot>
           </div>
         </div>
       </div>
@@ -104,8 +101,8 @@ $header-height: 60rem;
     position: relative;
     background: $dark-second-bg;
     box-shadow: $dark-second-bg 0 0 10rem 1rem;
-    width: 75vw;
-    height: 70vh;
+    //width: 75vw;
+    //height: 70vh;
     border-radius: $radius;
     display: flex;
     flex-direction: column;

src/components/Ring.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="ring">
+    <svg height="100%" width="100%">
+      <circle class="circle-full" cx="45" cy="45" r="40" fill="none" stroke-width="8"
+              stroke-linecap="round"></circle>
+      <circle ref="circleEl" class="circle-detail" cx="45" cy="45" r="40" fill="none" stroke-width="8"
+              stroke-linecap="round"
+              stroke-dasharray="0,10000"></circle>
+    </svg>
+    <span class="value">remark</span>
+    <span class="desc">dfadf</span>
+  </div>
+</template>
+<script setup lang="ts">
+import {onMounted} from "vue"
+
+const props = withDefaults(defineProps<{
+  percentage?: number,
+}>(), {
+  percentage: 90,
+})
+
+const circleEl = $ref(null)
+
+onMounted(() => {
+  let circleLength = Math.floor(2 * Math.PI * 40);
+  let val = Number(props.percentage.toFixed(0));
+  circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + ",10000");
+})
+</script>
+<style scoped lang="scss">
+@import "@/assets/css/colors";
+
+$w: 90rem;
+$w2: calc($w / 2);
+
+.ring {
+  font-size: 18rem;
+  width: $w;
+  height: $w;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+  margin-bottom: 20rem;
+
+  svg {
+    position: absolute;
+
+    .circle-full {
+      stroke: $item-hover;
+    }
+
+    .circle-detail {
+      transform-origin: $w2 $w2;
+      transform: rotate(-90deg);
+      stroke: $main;
+    }
+  }
+
+  .value {
+
+  }
+
+  .desc {
+    opacity: .6;
+  }
+}
+</style>

src/components/Statistics.vue

@@ -1,15 +1,49 @@
 <script setup>
 import Modal from "@/components/Modal.vue";
 import {useBaseStore} from "@/stores/base.ts";
+import {Close} from '@icon-park/vue-next'
+import Ring from "@/components/Ring.vue";
 
 const store = useBaseStore()
 </script>
 
 <template>
   <Modal v-model="store.dictModalIsOpen2">
+    <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/>
+        </div>
+        <div class="result">
+          <div class="wrong-words">
 
+          </div>
+        </div>
+      </div>
+    </div>
   </Modal>
 </template>
 <style scoped lang="scss">
+.statistics {
+  width: 50vw;
+  height: 70vh;
 
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+  }
+
+  .content {
+
+  }
+}
 </style>