完成结果弹框

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;
+  }
 }