提交

src/view/finance2023/base.sass

@@ -1,41 +0,0 @@
-
-// 按钮动画
-@-webkit-keyframes rotating {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@-moz-keyframes rotating {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@-o-keyframes rotating {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@keyframes rotating {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}

src/view/finance2023/index.vue

@@ -2,7 +2,7 @@
   <div class="finance2023" :style="'font-size:' + font_size + 'px'">
     <!-- 播放键 -->
     <svg
-      class="imgbtn rotating"
+      class="imgbtn"
       @click="play"
       :style="{
         'animation-play-state': play_stats ? 'running' : 'paused',
@@ -116,15 +116,7 @@
               ></path>
             </svg>
           </p>
-          <van-button
-            round
-            @click="createhb"
-            class="btn"
-            size="small"
-            type="warning"
-          >
-            生成海报
-          </van-button>
+          <div @click="createhb" class="btn">生成海报</div>
         </div>
       </div>
     </div>
@@ -165,7 +157,7 @@ const font_size = ref();
 const play_stats = ref(false);
 const canvas = document.createElement('canvas');
 const show = ref(false);
-const username = ref( localStorage.getItem('username20230712') || '');
+const username = ref(localStorage.getItem('username20230712') || '');
 const img_local = localStorage.getItem('hb20230712');
 let d2 = undefined;
 canvas.width = 750;
@@ -201,8 +193,8 @@ const play = () => {
 const look_more = ref(false);
 
 const createhb = () => {
-    if(img_local) showImagePreview([img_local]);
-    else show.value = true;
+  if (img_local) showImagePreview([img_local]);
+  else show.value = true;
 };
 
 const canvas_init = uname => {
@@ -244,99 +236,138 @@ const onSubmit = e => {
   });
 };
 </script>
-<style scoped="sass">
-@import url(./base.sass);
-.finance2023 {
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
-  font-weight: 400;
-  padding-bottom: 1em;
-  background-color: #268f66;
+<style>
+/* 按钮动画 */
+@-webkit-keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
 
-  .imgbtn {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    z-index: 10;
+  to {
+    transform: rotate(1turn);
   }
+}
 
-  .rotating {
-    -webkit-animation: rotating 1.2s linear infinite;
-    -moz-animation: rotating 1.2s linear infinite;
-    -o-animation: rotating 1.2s linear infinite;
-    animation: rotating 1.2s linear infinite;
+@-moz-keyframes rotating {
+  0% {
+    transform: rotate(0deg);
   }
 
-  .main {
-    width: 95%;
-    overflow: hidden;
-    margin: 0 auto;
-    color: #626262;
-    border-radius: 10px;
-    padding: 1em 1em 105px 1em;
-    background-color: #f8eac3;
-    position: relative;
+  to {
+    transform: rotate(1turn);
+  }
+}
 
-    .inset {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      left: 0;
-      display: flex;
-      flex-direction: column-reverse;
-      height: 150px;
-      background: -webkit-linear-gradient(#ffffff00, #ffffff 45%);
-      background: -o-linear-gradient(#ffffff00, #ffffff 45%);
-      background: -moz-linear-gradient(#ffffff00, #ffffff 45%);
-      background: linear-gradient(#ffffff00, #ffffff 45%);
+@-o-keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
 
-      .bottom_set {
-        width: 100%;
-        height: 75px;
-        background-color: #2e946d;
-        box-shadow: 0 5px 5px #2e946d;
-        position: relative;
+  to {
+    transform: rotate(1turn);
+  }
+}
 
-        .btn {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        }
-      }
-    }
-    .line_title {
-      margin-top: -2em;
-      text-align: center;
-      color: #60bf9f;
-    }
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
 
-    .header_title {
-      text-align: center;
-      margin-bottom: 0.5em;
-    }
+  to {
+    transform: rotate(1turn);
+  }
+}
 
-    .users {
-      text-align: right;
-      color: #5db978;
+.finance2023 {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  font-weight: 400;
+  padding-bottom: 1em;
+  background-color: #268f66;
+}
 
-      .user_num {
-        color: #fb0301;
-        font-size: 1.5em;
-      }
-    }
+.finance2023 .imgbtn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 10;
+  transform-origin: center;
+  -webkit-animation: rotating 1.2s linear infinite;
+  -moz-animation: rotating 1.2s linear infinite;
+  -o-animation: rotating 1.2s linear infinite;
+  animation: rotating 1.2s linear infinite;
+}
 
-    .body {
-      padding: 0.5em 1em;
-      background-color: #ffffff;
-      border-radius: 5px;
+.finance2023 .main {
+  width: 95%;
+  overflow: hidden;
+  margin: 0 auto;
+  color: #626262;
+  border-radius: 10px;
+  padding: 1em 1em 105px 1em;
+  background-color: #f8eac3;
+  position: relative;
+}
+.finance2023 .main .inset {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  display: flex;
+  flex-direction: column-reverse;
+  height: 150px;
+  background: -webkit-linear-gradient(#ffffff00, #ffffff 45%);
+  background: -o-linear-gradient(#ffffff00, #ffffff 45%);
+  background: -moz-linear-gradient(#ffffff00, #ffffff 45%);
+  background: linear-gradient(#ffffff00, #ffffff 45%);
+}
 
-      .duan {
-        text-indent: 2em;
-        line-height: 1.5em;
-      }
-    }
-  }
+.finance2023 .main .inset .bottom_set {
+  width: 100%;
+  height: 75px;
+  background-color: #2e946d;
+  box-shadow: 0 5px 5px #2e946d;
+  position: relative;
+}
+.finance2023 .main .inset .bottom_set .btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  width: 4rem;
+  height: 4rem;
+  text-align: center;
+  line-height: 4rem;
+  background-color: #f8eac3;
+  box-shadow: inset 0 0 5px #f8eac3;
+  border-radius: 50%;
+}
+.finance2023 .main .line_title {
+  margin-top: -2em;
+  text-align: center;
+  color: #60bf9f;
+}
+.finance2023 .main .header_title {
+  text-align: center;
+  margin-bottom: 0.5em;
+}
+.finance2023 .main .users {
+  text-align: right;
+  color: #5db978;
+}
+.finance2023 .main .users .user_num {
+  color: #fb0301;
+  font-size: 1.5em;
+}
+.finance2023 .main .body {
+  padding: 0.5em 1em;
+  background-color: #ffffff;
+  border-radius: 5px;
+}
+.finance2023 .main .body .duan {
+  text-indent: 2em;
+  line-height: 1.5em;
 }
 </style>