|
|
@@ -0,0 +1,342 @@
|
|
|
+<template>
|
|
|
+ <div class="finance2023" :style="'font-size:' + font_size + 'px'">
|
|
|
+ <!-- 播放键 -->
|
|
|
+ <svg
|
|
|
+ class="imgbtn rotating"
|
|
|
+ @click="play"
|
|
|
+ :style="{
|
|
|
+ 'animation-play-state': play_stats ? 'running' : 'paused',
|
|
|
+ }"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="899"
|
|
|
+ width="32"
|
|
|
+ height="32"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M512 17.066667c273.339733 0 494.933333 221.5936 494.933333 494.933333S785.339733 1006.933333 512 1006.933333 17.066667 785.339733 17.066667 512 238.660267 17.066667 512 17.066667z"
|
|
|
+ opacity=".502"
|
|
|
+ p-id="900"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m0-972.8C257.501867 51.2 51.2 257.501867 51.2 512s206.301867 460.8 460.8 460.8 460.8-206.301867 460.8-460.8S766.498133 51.2 512 51.2z"
|
|
|
+ fill="#FFFFFF"
|
|
|
+ p-id="901"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M530.568533 170.666667c4.8128 34.1504 5.495467 77.2096 41.2672 120.2688 27.4944 32.802133 58.453333 62.173867 79.7696 88.832C679.799467 414.6176 699.733333 458.359467 699.733333 502.784c0 71.0656-34.372267 141.431467-57.770666 180.394667h-10.990934c16.503467-36.898133 49.5104-97.723733 46.7456-162.628267-1.365333-36.232533-15.121067-75.178667-38.485333-103.867733-26.146133-33.501867-70.161067-60.142933-108.663467-62.8736v387.447466c0 30.754133-18.568533 58.7776-45.380266 79.274667C459.0592 841.028267 424.669867 853.333333 394.410667 853.333333c-19.2512 0-37.137067-6.144-49.5104-16.401066-13.073067-10.257067-20.6336-25.275733-20.6336-43.042134 0-28.023467 19.2512-56.046933 45.380266-76.544 26.146133-21.179733 59.136-34.850133 86.647467-34.850133 24.081067 0 44.6976 3.413333 57.088 15.035733V170.666667h17.186133z"
|
|
|
+ fill="#FFFFFF"
|
|
|
+ p-id="902"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <img src="./img/bg2023.jpg" style="width: 100%" />
|
|
|
+ <div
|
|
|
+ class="main"
|
|
|
+ :style="{
|
|
|
+ height: look_more ? 'auto' : '400px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <p class="users">已有<span class="user_num">23195</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>
|
|
|
+ <div
|
|
|
+ class="inset"
|
|
|
+ :style="{
|
|
|
+ background: !look_more
|
|
|
+ ? 'linear-gradient(#ffffff00, #ffffff 45%)'
|
|
|
+ : '#ffffff00',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="bottom_set">
|
|
|
+ <p class="line_title" v-if="!look_more" @click="look_more = true">
|
|
|
+ <span style="vertical-align: middle">阅读全文</span>
|
|
|
+ <svg
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ style="display: inline-block; vertical-align: middle"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill="#60bf9f"
|
|
|
+ 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"
|
|
|
+ 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>
|
|
|
+ <p v-if="look_more" @click="look_more = false" class="line_title">
|
|
|
+ <span style="vertical-align: middle">收起</span>
|
|
|
+ <svg
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ style="
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ "
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill="#60bf9f"
|
|
|
+ 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"
|
|
|
+ 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>
|
|
|
+ <van-button
|
|
|
+ round
|
|
|
+ @click="createhb"
|
|
|
+ class="btn"
|
|
|
+ size="small"
|
|
|
+ type="warning"
|
|
|
+ >
|
|
|
+ 生成海报
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-dialog
|
|
|
+ v-model:show="show"
|
|
|
+ title=" "
|
|
|
+ show-cancel-button
|
|
|
+ :beforeClose="onSubmit"
|
|
|
+ >
|
|
|
+ <van-form>
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-field
|
|
|
+ v-model="username"
|
|
|
+ name="昵称"
|
|
|
+ label="昵称"
|
|
|
+ placeholder="请输入昵称"
|
|
|
+ :rules="[{ required: true, message: '请填写昵称' }]"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ </van-form>
|
|
|
+ </van-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { saveUser } from '@/api/2023.js';
|
|
|
+import { ref } from 'vue';
|
|
|
+import { showImagePreview, showToast } from 'vant';
|
|
|
+// import { onMounted, reactive } from "vue";
|
|
|
+// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
|
|
|
+/**
|
|
|
+ * window.$originData.orginParames.title 页面标题
|
|
|
+ * window.$originData.orginParames.parameters 固定参数值
|
|
|
+ * window.$originData.urlParames url参数
|
|
|
+ */
|
|
|
+let s = window.$originData.orginParames.availWidth / 25;
|
|
|
+s > 40 ? (s = 40) : '';
|
|
|
+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 img_local = localStorage.getItem('hb20230712');
|
|
|
+let d2 = undefined;
|
|
|
+canvas.width = 750;
|
|
|
+canvas.height = 1334;
|
|
|
+
|
|
|
+const audio = new Audio('https://cxzx.smcic.net/topic/tool/media/bgm.mp3');
|
|
|
+audio.loop = true; // 循环播放
|
|
|
+audio.autoplay = 'autoplay';
|
|
|
+audio.oncanplay = () => {
|
|
|
+ window.WeixinJSBridge &&
|
|
|
+ window.WeixinJSBridge.invoke(
|
|
|
+ 'getNetworkType',
|
|
|
+ {},
|
|
|
+ () => {
|
|
|
+ audio.play();
|
|
|
+ // play_stats.value = true;
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+};
|
|
|
+audio.onplaying = () => (play_stats.value = !audio.paused);
|
|
|
+audio.onpause = () => (play_stats.value = !audio.paused);
|
|
|
+const play = () => {
|
|
|
+ if (audio.paused) {
|
|
|
+ // 播放
|
|
|
+ audio.play();
|
|
|
+ } else {
|
|
|
+ // 暂停
|
|
|
+ audio.pause();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const look_more = ref(false);
|
|
|
+
|
|
|
+const createhb = () => {
|
|
|
+ if(img_local) showImagePreview([img_local]);
|
|
|
+ else show.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const canvas_init = uname => {
|
|
|
+ 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';
|
|
|
+ if (!d2) d2 = canvas.getContext('2d');
|
|
|
+ img.onload = () => {
|
|
|
+ d2.drawImage(img, 0, 0, 750, 1334);
|
|
|
+ d2.font = '38px serif';
|
|
|
+ d2.fillStyle = '#ffffff';
|
|
|
+ d2.fillText(uname, 300, 500);
|
|
|
+ resolve();
|
|
|
+ };
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const onSubmit = e => {
|
|
|
+ if (e === 'cancel') return true;
|
|
|
+ if (!username.value) {
|
|
|
+ showToast('请输入昵称');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ saveUser({
|
|
|
+ userName: username.value,
|
|
|
+ }).then(r => {
|
|
|
+ show.value = false;
|
|
|
+ canvas_init(r.userName).then(() => {
|
|
|
+ const imgs = canvas.toDataURL('image/png');
|
|
|
+ showImagePreview([imgs]);
|
|
|
+ localStorage.setItem('username20230712', username.value);
|
|
|
+ localStorage.setItem('hb20230712', imgs);
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped="sass">
|
|
|
+@import url(./base.sass);
|
|
|
+.finance2023 {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: auto;
|
|
|
+ font-weight: 400;
|
|
|
+ padding-bottom: 1em;
|
|
|
+ background-color: #268f66;
|
|
|
+
|
|
|
+ .imgbtn {
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ right: 16px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 95%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #626262;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 1em 1em 105px 1em;
|
|
|
+ background-color: #f8eac3;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .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%);
|
|
|
+
|
|
|
+ .bottom_set {
|
|
|
+ width: 100%;
|
|
|
+ height: 75px;
|
|
|
+ background-color: #2e946d;
|
|
|
+ box-shadow: 0 5px 5px #2e946d;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line_title {
|
|
|
+ margin-top: -2em;
|
|
|
+ text-align: center;
|
|
|
+ color: #60bf9f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header_title {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 0.5em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .users {
|
|
|
+ text-align: right;
|
|
|
+ color: #5db978;
|
|
|
+
|
|
|
+ .user_num {
|
|
|
+ color: #fb0301;
|
|
|
+ font-size: 1.5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ padding: 0.5em 1em;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ .duan {
|
|
|
+ text-indent: 2em;
|
|
|
+ line-height: 1.5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liyongli
