提交

src/view/finance2023/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="finance2023" :style="'font-size:' + font_size + 'px'" @touchend.once="init">
+  <div
+    class="finance2023"
+    :style="'font-size:' + font_size + 'px'"
+    @touchend.once="init"
+  >
     <!-- 播放键 -->
     <svg
       class="imgbtn"
@@ -31,46 +35,23 @@
       ></path>
     </svg>
     <img src="./img/bg2023.jpg" style="width: 100%" />
+
+    <p class="users">
+      已有<span class="user_num" v-text="totalUser"></span>人参与
+    </p>
     <div
       class="main"
       :style="{
         height: look_more ? 'auto' : '400px',
       }"
     >
-      <p class="users">
-        已有<span class="user_num" v-text="totalUser"></span>人参与
-      </p>
-      <h3 class="header_title">2023年争做陕西金融好网民倡议书</h3>
-      <div class="body">
-        <p class="duan">
-          为营造健康和谐的金融舆论环境，弘扬主旋律，传递正能量，现向广大金融网民朋友发出如下倡议：
-        </p>
-        <p class="duan">
-          <b>一、坚守法律底线，争当遵纪守法的金融维护者。</b>
-          网络空间不是法外之地，要严格遵守《中华人民共和国中国人民银行法》《中华人民共和国消费者权益保护法》《全国人民代表大会常务委员会关于维护互联网安全的决定》等法律规定，不发布不实金融消息，不传播金融谣言、非法金融广告等违法信息。营造健康向上的金融网络环境，争当遵纪守法的网络金融维护者。
-        </p>
-        <p class="duan">
-          <b>二、加强金融素养，当好素质优良的金融学习者。</b>
-          要掌握金融知识，防范各种网络非法集资活动套路，了解金融活动，提高对违法违规金融活动的鉴别和防范能力。不断提升自身金融素养和自我保护意识，成为有风险防范意识、技能提升意识、网络安全意识、责任担当意识的新时代金融好网民。
-        </p>
-        <p class="duan">
-          <b>三、履行社会责任，做好弘扬正能量的金融传播者。</b>
-          不信谣、不传谣，不发布、不转发未经证实的可能会给社会和他人造成伤害的金融信息。不发表和传播惑众及危害社会的不良金融信息。主动抵制和举报各种网上非法金融广告、非法集资、电信诈骗、银行卡盗刷以及校园贷、现金贷等现象，坚决同网络违法犯罪活动作斗争，积极维护国家、社会、集体和个人合法权益。互联网金融从业人员要加强行业自律，坚持正确导向，积极传播、弘扬优秀文化和文明，要发挥带动引领作用，做网络文明的传播者和网络正能量的弘扬者。
-        </p>
-        <p class="duan">
-          <b>四、树立正确观念，争做自觉理性的金融消费者。</b>
-          要树立理性消费观念，不攀比、不盲从。要根据自身收入水平和消费能力做好收支筹划，量入为出、理性消费，不购买超出自身经济承受能力之物，远离奢靡之风。要建立正确的消费观念，正确规划生活的资金需求，合理合规使用信用卡、小额贷款等消费信贷服务，自觉抵制各类网络信贷。
-        </p>
-        <p class="duan">
-          广大金融网民朋友们，让我们从现在做起，从自己做起，积极传播正能量，争做金融好网民！
-        </p>
-      </div>
+      <img src="./img/mainbg.png" style="width: 100%" />
       <div
         class="inset"
         :style="{
           background: !look_more
-            ? 'linear-gradient(#ffffff00, #ffffff 45%)'
-            : '#ffffff00',
+            ? 'linear-gradient(#f8eac300, #f8eac3 45%)'
+            : '#f8eac300',
         }"
       >
         <div class="bottom_set">
@@ -85,11 +66,11 @@
               height="16"
             >
               <path
-                fill="#60bf9f"
+                fill="#986c3d"
                 d="M486.4 537.6C492.8 544 505.6 544 512 544s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L512 467.2 313.6 262.4C300.8 256 275.2 256 262.4 262.4S256 300.8 262.4 313.6L486.4 537.6z"
               ></path>
               <path
-                fill="#60bf9f"
+                fill="#986c3d"
                 d="M710.4 486.4 512 691.2 313.6 486.4c-12.8-12.8-32-12.8-44.8 0S256 524.8 262.4 537.6l224 224C492.8 768 505.6 768 512 768s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8S723.2 480 710.4 486.4z"
               ></path>
             </svg>
@@ -109,16 +90,20 @@
               height="16"
             >
               <path
-                fill="#60bf9f"
+                fill="#986c3d"
                 d="M486.4 537.6C492.8 544 505.6 544 512 544s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L512 467.2 313.6 262.4C300.8 256 275.2 256 262.4 262.4S256 300.8 262.4 313.6L486.4 537.6z"
               ></path>
               <path
-                fill="#60bf9f"
+                fill="#986c3d"
                 d="M710.4 486.4 512 691.2 313.6 486.4c-12.8-12.8-32-12.8-44.8 0S256 524.8 262.4 537.6l224 224C492.8 768 505.6 768 512 768s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8S723.2 480 710.4 486.4z"
               ></path>
             </svg>
           </p>
-          <div @click="createhb" class="btn">生成海报</div>
+          <div @click="createhb" class="btn">
+            <div class="inset_btn">
+              {{ img_local ? '查看海报' : '输入姓名' }}
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -143,7 +128,7 @@
   </div>
 </template>
 <script setup>
-import { saveUser, getTotal } from '@/api/2023.js';
+import { getTotal, saveUser } from '@/api/2023.js';
 import { ref } from 'vue';
 import { showImagePreview, showToast } from 'vant';
 // import { onMounted, reactive } from "vue";
@@ -160,8 +145,8 @@ const font_size = ref();
 const play_stats = ref(false);
 const canvas = document.createElement('canvas');
 const show = ref(false);
-const username = ref(localStorage.getItem('username20230712') || '');
-let img_local = localStorage.getItem('hb20230712');
+const username = ref('');
+let img_local = ref(localStorage.getItem('hb20230712'));
 let d2 = undefined;
 let isInitAudio = true;
 canvas.width = 750;
@@ -197,33 +182,45 @@ const play = () => {
 };
 
 const init = () => {
-    if(!isInitAudio || !audio.paused) return;
-    isInitAudio = false;
-    play();
-}
+  if (!isInitAudio || !audio.paused) return;
+  isInitAudio = false;
+  play();
+};
 
 const look_more = ref(false);
 
 const createhb = () => {
-  if (img_local) showImagePreview([img_local]);
+  if (img_local.value) showImagePreview([img_local.value]);
   else show.value = true;
 };
 
-const canvas_init = uname => {
+const canvas_init = (uname, num) => {
   return new Promise(resolve => {
     const img = new Image();
     img.crossOrigin = '';
     // 增加随机数选择图片
-    img.src =
-      'https://cxzx.smcic.net/topic/tool/img/' +
-      Math.ceil(Math.random() * 2) +
-      '-1.png';
+    img.src = 'https://cxzx.smcic.net/topic/tool/img/hb.jpg';
     if (!d2) d2 = canvas.getContext('2d');
     img.onload = () => {
       d2.drawImage(img, 0, 0, 750, 1334);
-      d2.font = '38px serif';
+      let line1 = [100, 250];
+      let fontsize = '30px';
+      d2.font = fontsize + ' 微软雅黑';
+      d2.fillStyle = '#ffffff';
+      d2.fillText('您是第', line1[0], line1[1]);
+      d2.font = '50px 微软雅黑';
       d2.fillStyle = '#ffffff';
-      d2.fillText(uname, 300, 500);
+      d2.fillText(uname, line1[0], 190);
+      d2.font = '50px 微软雅黑';
+      d2.fillStyle = '#ffffff';
+      d2.fillText(num, 200, line1[1]);
+      d2.font = fontsize + ' 微软雅黑';
+      d2.fillStyle = '#ffffff';
+      d2.fillText(
+        '个参与本次活动的人',
+        line1[0] + 114 + num.toString().length * 30,
+        line1[1]
+      );
       resolve();
     };
   });
@@ -239,11 +236,10 @@ const onSubmit = e => {
     userName: username.value,
   }).then(r => {
     show.value = false;
-    canvas_init(r.userName).then(() => {
+    canvas_init(r.userName, r.userOrder + r.userOrderUnreal).then(() => {
       const imgs = canvas.toDataURL('image/png');
       showImagePreview([imgs]);
-      img_local = imgs;
-      localStorage.setItem('username20230712', username.value);
+      img_local.value = imgs;
       localStorage.setItem('hb20230712', imgs);
     });
   });
@@ -307,7 +303,7 @@ setInterval(() => {
   overflow: auto;
   font-weight: 400;
   padding-bottom: 1em;
-  background-color: #268f66;
+  background-color: #e8bd88;
 }
 
 .finance2023 .imgbtn {
@@ -323,20 +319,23 @@ setInterval(() => {
 }
 
 .finance2023 .main {
-  width: 95%;
+  width: 100%;
   overflow: hidden;
   margin: 0 auto;
   color: #626262;
   border-radius: 10px;
-  padding: 1em 1em 105px 1em;
-  background-color: #f8eac3;
+  padding: 1em 1em 55px 1em;
+  /* background-color: #f8eac3; */
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
   position: relative;
 }
 .finance2023 .main .inset {
   position: absolute;
   bottom: 0;
-  width: 100%;
-  left: 0;
+  width: 92%;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   flex-direction: column-reverse;
   height: 150px;
@@ -349,8 +348,10 @@ setInterval(() => {
 .finance2023 .main .inset .bottom_set {
   width: 100%;
   height: 75px;
-  background-color: #2e946d;
-  box-shadow: 0 5px 5px #2e946d;
+  background-color: #ebc77d;
+  box-shadow: inset 0 5px 5px #ebc77d;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
   position: relative;
 }
 .finance2023 .main .inset .bottom_set .btn {
@@ -358,38 +359,32 @@ setInterval(() => {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 12px;
-  width: 4rem;
-  height: 4rem;
+  width: 7rem;
+  height: 2rem;
+  color: #666;
   text-align: center;
-  line-height: 4rem;
-  background-color: #f8eac3;
-  box-shadow: inset 0 0 5px #7e7764;
-  border-radius: 50%;
+  line-height: calc(2rem - 8px);
+  background-color: #eeac65;
+  border-radius: 5px;
+  padding: 3px;
+  box-shadow: 0 0 5px;
+}
+.finance2023 .main .inset .bottom_set .btn .inset_btn {
+  border-radius: 5px;
+  border: 1px dashed #fff;
 }
 .finance2023 .main .line_title {
   margin-top: -2em;
   text-align: center;
-  color: #60bf9f;
+  color: #986c3d;
 }
-.finance2023 .main .header_title {
+.finance2023 .users {
   text-align: center;
-  margin-bottom: 0.5em;
-}
-.finance2023 .main .users {
-  text-align: right;
-  color: #5db978;
+  color: #986c3d;
+  margin-top: -2em;
 }
-.finance2023 .main .users .user_num {
+.finance2023 .users .user_num {
   color: #fb0301;
   font-size: 1.5em;
 }
-.finance2023 .main .body {
-  padding: 0.5em 1em;
-  border-radius: 5px;
-}
-.finance2023 .main .body .duan {
-  text-indent: 2em;
-  line-height: 1.5em;
-}
 </style>