gameapi-client/src/views/components/DashboardCardNo.vue

290 lines
26 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="dashboard">
<div class="dashboard-header">
<div style="font-size: 16px;font-weight: 700;">{{ t('今天即时焦点') }}</div>
<div >
<!-- <span style="color: #4CAF50; font-weight: bold;">账户余额888.00 U</span>
<span style="color: rgba(0,0,0,0.2); margin: 0 8px;">|</span> -->
<span style="color: #409eff;">{{ t('操作手册') }}</span>
</div>
</div>
<div class="dashboard-cards">
<!-- 第一行 -->
<el-row :gutter="20">
<el-col :lg="6" :xs="24" :md="12" style="margin-bottom: 20px;" v-for="(card, index) in cards" :key="index">
<el-card :class="['card', card.cardClass]">
<div class="card-content">
<div class="card-left">
<div class="card-title">{{ card.title }}</div>
<div class="card-value">
<span class="" :style="card.cardClass =='pink' ? '':card.cardClass =='green'?'':'cursor: pointer;'" @click="goPage(card.cardClass)">{{ card.value }}</span>
</div>
<div class="card-subtitle" v-html="card.subtitle" @click="handleClick"></div>
</div>
<div class="card-right">
<svg v-if="card.cardClass =='orange'" t="1743131819746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4568" width="30" height="30"><path d="M521.3 692.7c0-37.4 10-72.5 27.5-102.7-4.1-1.4-8.2-2.8-12.2-4.2-4.8-1.6-35.2-15.3-16.2-73l-0.3 0c49.5-51 87.3-133.1 87.3-213.9 0-124.2-82.6-189.3-178.6-189.3-96-0.1-178.2 65.1-178.2 189.3 0 81.1 37.7 163.5 87.5 214.4 19.4 50.9-15.4 69.8-22.6 72.5C215 622.2 97 688.5 97 753.9l0 24.5c0 89.2 172.8 109.4 332.8 109.4 69 0 139.9-3.8 198.4-15.2C564.5 837.9 521.3 770.3 521.3 692.7z" fill="#ffffff" p-id="4569"></path><path d="M853.6 565.4c-34-34-79.2-52.7-127.3-52.7-48.1 0-93.3 18.7-127.3 52.7-34 34-52.7 79.2-52.7 127.3 0 48.1 18.7 93.3 52.7 127.3 34 34 79.2 52.7 127.3 52.7 48.1 0 93.3-18.7 127.3-52.7 34-34 52.7-79.2 52.7-127.3C906.4 644.6 887.6 599.4 853.6 565.4zM829.7 705.6c0 7.1-5.8 12.9-12.9 12.9l-64.6 0 0 64.6c0 7.1-5.8 12.9-12.9 12.9l-25.8 0c-7.1 0-12.9-5.8-12.9-12.9l0-64.6L636 718.5c-7.1 0-12.9-5.8-12.9-12.9l0-25.8c0-7.1 5.8-12.9 12.9-12.9l64.6 0 0-64.6c0-7.1 5.8-12.9 12.9-12.9l25.8 0c7.1 0 12.9 5.8 12.9 12.9l0 64.6 64.6 0c7.1 0 12.9 5.8 12.9 12.9L829.7 705.6z" fill="#ffffff" p-id="4570"></path></svg>
<svg v-if="card.cardClass =='blue'" t="1743228343951" class="icon" viewBox="0 0 1462 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4342" width="30" height="30"><path d="M512.402 480.88a451.552 451.552 0 0 0-262.856 466.18c-53.39-6.51-128.21-18.505-188.476-39.349C20.479 892.133 0 866.901 0 832.526a407.815 407.815 0 0 1 324.658-398.747 225.044 225.044 0 0 1-142.326-208.954A225.044 225.044 0 0 1 407.157 0a224.953 224.953 0 0 1 140.717 49.66c0.658 0.512 1.024 1.244 1.536 1.829s1.243 0.95 1.682 1.609a271.706 271.706 0 0 0-125.504 228.92c0 78.624 33.57 149.201 86.814 198.935z m567.768-47.028A407.889 407.889 0 0 1 1404.9 832.6c0 34.301-20.478 59.534-60.557 74.966-63.63 21.941-142.472 34.082-197.472 40.518l-1.097 0.146a451.552 451.552 0 0 0-262.71-467.35 271.78 271.78 0 0 0-34.01-424.929l5.925-4.9C895.205 18.138 945.669 0.073 997.597 0a225.118 225.118 0 0 1 224.972 224.825 225.118 225.118 0 0 1-142.326 208.954z m-296.94 65.97a407.815 407.815 0 0 1 324.586 398.747c0 34.375-20.406 59.607-60.558 74.966-107.147 37.008-268.488 50.392-350.915 50.392-75.624 0-232.504-10.24-340.967-48.49l-1.463-0.659c-26.915-12.652-60.485-28.523-60.485-76.209A407.889 407.889 0 0 1 618.16 499.823 225.044 225.044 0 0 1 475.76 290.868 225.118 225.118 0 0 1 700.66 66.043a225.118 225.118 0 0 1 224.898 224.825A225.118 225.118 0 0 1 783.23 499.823z" fill="#ffffff" p-id="4343"></path></svg>
<svg v-if="card.cardClass =='pink'" t="1743228448132" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6318" width="30" height="30"><path d="M33.79062092 527.60346436h959.86045061v86.5044967h-959.86045061v-86.5044967z m0-331.85419237h232.70763117v86.62155288H33.79062092v-86.62155288z m756.18274522 14.51496291h203.56064924V282.37082487H789.97336614v-72.10658997zM179.17436236 65.93399884H848.15027394V152.43849555H179.17436236v-86.50449671zM33.79062092 859.34060057h959.86045061v86.50449671h-959.86045061v-86.50449671z m0 0" p-id="6319" fill="#ffffff"></path><path d="M179.17436236 65.93399884H266.38119596v548.05690607h-87.2068336V65.93399884z m581.76907796 0H848.15027394v548.05690607h-87.20683361V65.93399884z m145.38374142 144.33023606h87.20683364v735.58086238h-87.20683364V210.2642349zM33.79062092 195.74927199h87.20683361v750.09582529h-87.20683361V195.74927199z" p-id="6320" fill="#ffffff"></path><path d="M460.69440913 181.11725292h0.2341123l69.9995792 69.41429843c11.00327833 11.00327833 11.00327833 28.79581353 0 39.68203571-11.00327833 11.00327833-29.02992583 11.00327833-40.03320416 0L420.89531727 220.79928861v-0.23411228l39.79909186-39.44792341z" p-id="6321" fill="#ffffff"></path><path d="M510.79444239 302.97270768c-8.42804297 0-16.85608595-3.16051609-23.17711818-9.48154835l-73.16009533-72.57481457v-0.23411228l46.23718025-45.88601181h0.2341123l73.16009533 72.57481457c6.20397609 6.20397609 9.59860451 14.39790675 9.59860451 23.06006205 0 8.77921144-3.39462843 16.97314212-9.59860451 23.06006204-6.43808838 6.32103224-14.86613137 9.48154834-23.29417437 9.48154835z m-83.46103672-82.05636292l66.01967001 65.43438927c8.66215528 8.66215528 22.70889359 10.06682911 32.3074981 2.4581792 5.7357515-4.56518994 8.89626759-11.23739066 8.89626759-18.37781594 0-6.32103224-2.45817918-12.17383986-6.906313-16.62197367l-66.72200694-66.25378231h-0.2341123l-33.36100346 33.12689117c-0.11705614 0-0.11705614 0.11705614 0 0.23411228z" p-id="6322" fill="#ffffff"></path><path d="M600.81062368 220.68223248v0.23411228l-69.99957919 69.41429845c-11.00327833 11.00327833-29.02992583 11.00327833-40.03320417 0-11.00327833-11.00327833-11.00327833-28.79581353 0-39.6820357l69.9995792-69.41429844h0.23411228l39.79909188 39.44792341z" p-id="6323" fill="#ffffff"></path><path d="M510.79444239 302.97270768c-8.42804297 0-16.85608595-3.16051609-23.17711818-9.48154835-6.20397609-6.20397609-9.59860451-14.39790675-9.59860451-23.06006204 0-8.77921144 3.39462843-16.97314212 9.59860451-23.06006205l73.16009531-72.57481457h0.23411228l46.35423643 45.88601181v0.23411228l-73.27715147 72.57481457c-6.43808838 6.32103224-14.86613137 9.48154834-23.29417437 9.48154835z m49.98297713-115.41736637l-66.25378232 65.66850154c-3.7457969 3.7457969-6.43808838 8.42804297-7.14042532 13.57851372-1.17056154 8.19393068 1.87289845 16.15374905 8.07687454 21.42127591 9.59860451 8.07687452 23.99651127 6.90631299 32.89277884-1.98995461l66.01967002-65.43438926v-0.23411228L560.89447569 187.55534131h-0.11705617z" p-id="6324" fill="#ffffff"></path><path d="M482.93507811 270.6652096h55.83578476c0.11705614 0 0.11705614 0.11705614 0.11705612 0.11705616V298.75868622c0 0.11705614-0.11705614 0.11705614-0.11705612 0.11705612H482.93507811c-0.11705614 0-0.11705614-0.11705614-0.11705615-0.11705612v-27.97642046l0.11705615-0.11705616z" p-id="6325" fill="#ffffff"></path><path d="M543.33605283 303.55798844h-64.84910851c-0.11705614 0-0.11705614-0.11705614-0.11705618-0.11705614v-37.10680034c0-0.11705614 0.11705614-0.11705614 0.11705618-0.11705617h64.84910851c0.11705614 0 0.11705614 0.11705614 0.11705615 0.11705617V303.4409323s0 0.11705614-0.11705615 0.11705614z m-55.83578477-9.13037989h46.70540483c0.11705614 0 0.11705614-0.11705614 0.11705617-0.11705613v-18.84604058c0-0.11705614-0.11705614-0.11705614-0.11705617-0.11705614h-46.70540483c-0.11705614 0-0.11705614 0.11705614-0.11705618 0.11705614v18.84604058l0.11705618 0.11705613z" p-id="6326" fill="#ffffff"></path><path d="M539.12203131 298.75868622h70.11663536c0.11705614 0 0.11705614 0.11705614 0.11705616 0.11705612v55.48461629c0 0.11705614-0.11705614 0.11705614-0.11705616 0.11705616h-69.99957922c-0.11705614 0-0.11705614 0.11705614-0.11705614 0.11705616v27.62525199c0 0.11705614 0.11705614 0.11705614 0.11705614 0.11705614h69.99957922c0.11705614 0 0.11705614 0.11705614 0.11705616 0.11705616V438.05550768c0 0.11705614-0.11705614 0.11705614-0.11705616 0.11705616h-69.99957922c-0.11705614 0-0.11705614 0.11705614-0.11705614 0.11705616v55.60167241h-56.06989705c-0.11705614 0-0.11705614-0.11705614-0.11705615-0.11705612V438.28962c0-0.11705614-0.11705614-0.11705614-0.11705615-0.11705616H412.70138658c-0.11705614 0-0.11705614-0.11705614-0.11705613-0.11705616v-55.4846163c0-0.11705614 0.11705614-0.11705614 0.11705613-0.11705614h69.99957922c0.11705614 0 0.11705614-0.11705614 0.11705616-0.11705616v-27.62525198c0-0.11705614-0.11705614-0.11705614-0.11705616-0.11705615H412.70138658c-0.11705614 0-0.11705614-0.11705614-0.11705613-0.11705616v-55.48461629c0-0.11705614 0.11705614-0.11705614 0.11705613-0.11705616h70.23369153" p-id="6327" fill="#ffffff"></path><path d="M539.12203131 499.97821235c-1.75584229 0-2.80934765-0.58528075-3.39462843-1.52172997h-57.24045856c-0.11705614 0-0.11705614-0.11705614-0.11705618-0.11705616v-55.48461629c0-0.11705614-0.11705614-0.11705614-0.11705614-0.11705615h-69.99957921c-0.11705614 0-0.11705614-0.11705614-0.11705614-0.11705613v-64.61499621c0-0.11705614 0.11705614-0.11705614 0.11705614-0.11705615H478.252832c0.11705614 0 0.11705614-0.11705614 0.11705614-0.11705613v-18.49487209c0-0.11705614-0.11705614-0.11705614-0.11705614-0.11705618h-69.99957921c-0.11705614 0-0.11705614-0.11705614-0.11705614-0.11705616v-64.61499618c0-0.11705614 0.11705614-0.11705614 0.11705614-0.11705613h74.56476917c0.11705614 0 0.11705614 0.11705614 0.11705615 0.11705613v8.77921145c0 0.11705614-0.11705614 0.11705614-0.11705615 0.11705615H417.38363269c-0.11705614 0-0.11705614 0.11705614-0.11705614 0.11705615v46.35423639c0 0.11705614 0.11705614 0.11705614 0.11705614 0.11705614h69.99957919c0.11705614 0 0.11705614 0.11705614 0.11705618 0.11705616v36.75563189c0 0.11705614-0.11705614 0.11705614-0.11705618 0.11705614H417.38363269c-0.11705614 0-0.11705614 0.11705614-0.11705614 0.11705617V433.37326157c0 0.11705614 0.11705614 0.11705614 0.11705614 0.11705616h69.99957919c0.11705614 0 0.11705614 0.11705614 0.11705618 0.11705618v55.48461627c0 0.11705614 0.11705614 0.11705614 0.11705615 0.11705616h46.82246101c0.11705614 0 0.11705614-0.11705614 0.11705615-0.11705616v-55.48461627c0-0.11705614 0.11705614-0.11705614 0.11705615-0.11705618H604.67347672c0.11705614 0 0.11705614-0.11705614 0.11705616-0.11705616v-46.35423638c0-0.11705614-0.11705614-0.11705614-0.11705616-0.11705617h-69.9995792c-0.11705614 0-0.11705614-0.11705614-0.11705615-0.11705614v-36.75563189c0-0.11705614 0.11705614-0.11705614 0.11705615-0.11705616H604.67347672c0.11705614 0 0.11705614-0.11705614 0.11705616-0.11705614V303.4409323c0-0.11705614-0.11705614-0.11705614-0.11705616-0.11705615h-65.43438927c-0.11705614 0-0.11705614-0.11705614-0.11705614-0.11705615v-8.77921145c0-0.11705614 0.11705614-0.11705614 0.11705614-0.11705613h74.56476915c0.11705614 0 0.11705614 0.11705614 0.11705619 0.11705613v64.61499618c0 0.11705614-0.11705614 0.11705614-0.11705619 0.11705616H543.80427742c-0.11705614 0-0.11705614 0.11705614-0.11705615 0.11705618v18.49487209c0 0.11705614 0.11705614 0.11705614 0.11705615 0.11705613h69.99957918c0.11705614 0 0.11705614 0.11705614 0.11705619 0.11705615v64.61499621c0 0.11705614-0.11705614 0.11705614-0.11705619 0.11705615H543.80427742c-0.11705614 0-0.11705614 0.11705614-0.11705615 0.11705613v52.67526863h-0.11705617c-0.11705614 1.87289845-0.93644921 4.44813379-4.44813379 4.44813379z" p-id="6328" fill="#ffffff"></path></svg>
<svg v-if="card.cardClass =='yellow'" t="1743228514088" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7708" width="48" height="48"><path d="M807.424 353.28v76.8c-8.704-5.12-17.408-9.216-26.624-13.312 16.896-16.896 26.112-39.424 26.624-63.488zM706.56 399.36c-15.36-2.56-30.208-4.096-45.568-4.608-66.56-0.512-131.072 19.968-185.344 58.368h-22.016c-194.56 0-352.256-80.896-352.256-177.664V217.6C101.376 120.32 259.072 40.96 453.632 40.96s354.304 79.36 354.304 176.64V276.48c0 45.568-39.936 91.648-101.376 122.368v0.512z" p-id="7709" fill="#ffffff"></path><path d="M413.184 510.976c-27.648 32.256-48.128 70.144-60.416 111.104-145.408-22.016-250.88-88.576-250.88-168.448V353.28c0 91.648 137.216 147.968 311.808 155.648v2.048z" p-id="7710" fill="#ffffff"></path><path d="M341.504 682.496c-2.048 12.288-3.584 24.576-4.096 36.864 0.512 26.624 4.096 53.248 10.752 78.848-141.824-24.064-246.272-89.6-246.272-168.448v-100.352c0 77.312 98.304 130.56 238.592 151.04l1.024 2.048z" p-id="7711" fill="#ffffff"></path><path d="M370.688 858.624c23.552 48.128 58.88 89.6 102.4 120.832h-19.456c-194.56 0-352.256-79.36-352.256-176.64v-98.304c0 85.504 115.2 138.24 269.312 154.112z m285.696-405.504c-146.432-0.512-265.216 117.76-265.728 263.68s117.76 265.216 263.68 265.728c146.432 0.512 265.216-117.76 265.728-263.68v-1.536c0-145.408-117.76-263.68-263.68-264.192z m91.648 98.304l20.48-38.912c2.048-3.072 4.608-5.632 8.192-6.656 3.584-1.536 7.168-1.536 10.752 0 33.28 20.48 60.928 48.128 80.896 81.408 1.536 3.072 1.536 7.168 0 10.24-1.024 3.584-3.072 6.656-6.656 8.192l-39.424 20.992c-6.144 3.072-13.312 1.024-17.408-4.608-13.824-22.528-32.256-40.96-54.272-54.784-6.144-3.584-8.704-11.776-5.12-17.92l2.56 2.048z m68.608 166.4c0 88.064-70.656 159.232-158.72 159.232s-159.232-70.656-159.232-158.72 70.656-159.232 158.72-159.232h1.024c86.016 1.024 155.136 70.656 156.16 156.672l2.048 2.048z m-224.256-233.984c1.536-3.072 4.608-5.632 8.192-6.656 37.888-9.216 77.312-9.216 115.2 0 3.584 1.024 6.656 3.072 8.704 6.656 1.536 3.072 1.536 6.656 0 10.24l-12.288 41.984c-2.048 6.144-8.192 9.728-14.848 8.704-12.8-2.56-26.112-4.096-38.912-4.096-13.312 0-26.112 1.536-38.912 4.096-6.656 1.536-13.824-2.56-15.36-9.216l-12.8-41.984c-2.048-3.584-2.56-7.68-1.024-11.264l2.048 1.536z m-147.456 103.424c20.48-33.28 48.128-61.44 81.408-81.408 3.072-1.536 6.656-1.536 10.24 0 3.584 1.024 6.656 3.072 8.192 6.656l20.992 38.912c3.072 6.144 1.024 13.824-4.608 17.408-22.016 13.824-40.96 32.768-54.784 54.784-4.096 5.632-11.264 7.68-17.408 4.608l-38.912-20.992c-3.072-1.536-5.632-4.608-6.656-8.192-1.024-4.096-0.512-8.704 1.536-11.776z m-22.528 194.56c-3.072-1.536-5.632-4.096-6.656-7.68-4.096-16.896-6.144-34.304-6.656-51.712v-11.264c0.512-17.408 2.56-34.816 6.656-51.712 0.512-4.096 3.072-7.168 6.656-8.704 3.584-1.536 7.168-1.536 10.752 0l41.984 12.8c6.656 2.048 10.752 8.704 9.216 15.36-2.56 12.8-4.096 25.6-4.096 38.4 0 13.312 1.536 26.112 4.608 38.912 1.536 6.656-2.56 13.824-9.216 15.36l-42.496 12.8c-4.096 0.512-7.68 0-10.752-2.56z m144.896 100.352l-21.504 39.424c-1.536 3.072-4.608 5.632-8.192 6.656-3.072 1.536-6.656 1.536-10.24 0-33.792-20.48-61.952-49.152-81.92-82.944-1.536-3.072-1.536-6.656 0-10.24 1.024-3.584 3.072-6.656 6.656-8.192l39.424-20.992c6.144-3.072 13.824-1.024 17.408 4.608 13.312 22.016 31.744 40.96 53.76 55.296 4.608 3.584 6.144 10.752 4.608 16.384z m155.136 68.096c-2.048 3.072-5.12 5.632-8.704 6.656-37.888 9.216-77.312 9.216-115.2 0-3.584-1.024-6.656-3.072-8.192-6.656-1.536-3.072-1.536-6.656 0-10.24l12.8-43.008c2.048-6.656 8.704-10.24 15.36-9.216 25.6 5.632 51.712 5.632 77.312 0 6.656-1.536 13.824 2.56 15.36 9.216l12.8 43.008c1.536 3.584 0.512 7.168-1.536 10.24z m144.384-104.96c-19.968 33.28-48.128 61.44-80.896 81.408-3.584 1.536-7.168 1.536-10.752 0-3.584-1.024-6.656-3.072-8.192-6.656l-20.992-39.424c-3.072-6.144-1.024-13.824 4.608-17.408 22.016-13.824 40.96-32.768 54.784-54.272 3.584-5.632 11.264-7.68 17.408-4.608l39.424 20.992c3.072 1.536 5.632 4.608 6.656 8.192 1.024 4.096 0.512 8.704-2.048 11.776z m23.552-63.488c-3.584 1.536-7.168 1.536-10.752 0l-42.496-12.8c-6.656-2.048-10.752-8.704-9.216-15.36 6.144-25.6 6.144-52.224 0-77.312-1.536-6.656 2.56-13.824 9.216-15.36l42.496-12.8c3.584-1.536 7.168-1.536 10.752 0 3.072 2.048 5.12 4.608 6.144 8.192 9.216 37.888 9.216 77.312 0 115.2 0 3.584-2.56 7.68-6.144 10.24z" p-id="7712" fill="#ffffff"></path><path d="M655.872 567.296c-82.432 0-149.504 67.072-149.504 149.504s67.072 149.504 149.504 149.504 149.504-67.072 149.504-149.504-67.072-149.504-149.504-149.504z" p-id="7713" fill="#ffffff"></path></svg>
<svg v-if="card.cardClass =='green'" t="1743228588732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8830" width="48" height="48"><path d="M957.952 544.256c-15.872 0-26.112-10.752-26.112-27.136V167.424c0-29.696-23.552-53.76-52.224-53.76H145.92c-28.672 0-52.224 24.064-52.224 53.76v684.544c0 29.696 23.552 53.76 52.224 53.76h366.592c15.872 0 26.112 10.752 26.112 27.136S528.384 960 512.512 960H145.92c-57.856 0-104.96-48.64-104.96-107.52V167.424c0-59.392 47.104-107.52 104.96-107.52h733.184c57.856 0 104.96 48.64 104.96 107.52V517.12c0 16.384-10.752 27.136-26.112 27.136z m-495.104-8.192v288.768c0 13.312-13.312 27.136-26.112 27.136-13.312 0-26.112-13.312-26.112-27.136V536.064c0-13.312 13.312-27.136 26.112-27.136 12.8 0 26.112 13.824 26.112 27.136zM276.992 678.4v145.92c0 13.312-13.312 27.136-26.112 27.136-13.312 0-26.112-13.312-26.112-27.136V678.4c0-13.312 13.312-27.136 26.112-27.136 12.8 0.512 26.112 13.824 26.112 27.136z m86.528-328.192L214.016 530.432c-10.24 10.752-26.112 10.752-36.864 2.56-10.24-10.752-13.312-27.136-2.56-37.888l167.424-199.168v-2.56c2.56 0 2.56-2.56 5.12-2.56h2.56c7.68-5.632 20.992-2.56 28.672 5.632L543.232 463.36 744.96 221.184l2.56-2.56h-96.768c-10.24 0-20.992-13.312-20.992-27.136 0-16.384 10.24-27.136 20.992-27.136H819.2c5.12 0 13.312 5.632 15.872 10.752 2.56 2.56 5.12 5.632 5.12 10.752V358.4c0 10.752-10.24 21.504-26.112 21.504-15.872 0-26.112-8.192-26.112-21.504V256L573.44 506.368c-5.12 8.192-15.872 13.312-23.552 13.312h-7.68c-5.12 0-10.24-2.56-13.312-5.632L363.52 350.208z m253.952 153.6c13.312 0 26.112 13.312 26.112 27.136v80.896c0 13.312-13.312 27.136-26.112 27.136-13.312 0-26.112-13.312-26.112-27.136v-80.896c0-16.384 12.8-27.136 26.112-27.136z m131.072-5.632v-43.008c0-16.384 13.312-27.136 26.112-27.136 15.872 0 26.112 13.312 26.112 27.136v43.008c0 13.312-13.312 27.136-26.112 27.136-13.312 0-26.112-13.312-26.112-27.136z m-10.24 202.752l79.872 78.336 79.872-78.336h44.544l-91.648 92.16h67.072v22.528h-79.872v44.032h79.872v22.528h-79.872v70.656H798.72v-70.656h-79.36v-22.528h79.36v-44.032h-79.36v-22.528h66.56l-91.648-92.16h44.032z" fill="#ffffff" p-id="8831"></path></svg>
<svg v-if="card.cardClass =='purple'" t="1743228653635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10043" width="48" height="48"><path d="M57.419 883.505h912.25c30.012 0 54.331-24.32 54.331-54.331V657.901c0-14.489-11.384-25.872-25.872-25.872h-2.587v-2.587-2.07c-50.709-13.971-85.895-59.506-85.895-112.285 0-52.261 35.186-98.314 85.895-112.285v-4.657h2.587c14.488 0 25.872-11.383 25.872-25.872V201.001c0-30.012-24.32-54.331-54.331-54.331H57.419c-30.012 0-54.331 24.32-54.331 54.331v171.273c0 14.489 11.384 25.872 25.872 25.872h2.587v4.657c50.709 13.971 85.895 59.506 85.895 112.285 0 52.261-35.186 98.314-85.895 112.285v4.657H28.96c-14.488 0-25.872 11.383-25.872 25.872v171.273c0 30.01 24.32 54.33 54.331 54.33z m-2.587-209.046l1.552-0.517c67.267-23.802 112.285-87.448 112.285-158.854 0-70.889-45.017-135.052-112.285-158.854l-1.552-0.517v-125.74c0-17.076 13.971-31.046 31.046-31.046h855.331c17.076 0 31.047 13.971 31.047 31.046v125.739l-1.552 0.517c-67.267 23.802-112.285 87.448-112.285 158.854 0 70.889 45.017 135.052 112.285 158.854l1.552 0.517v125.739c0 17.076-13.971 31.047-31.047 31.047H85.878c-17.076 0-31.046-13.971-31.046-31.047V674.459z" fill="#ffffff" p-id="10044"></path><path d="M616.773 577.698h-89.517v-64.163h89.517c13.453 0 24.32-10.866 24.32-24.32 0-13.453-10.866-24.32-24.32-24.32h-89.517v-6.727l105.558-110.215c4.657-4.657 6.727-10.866 6.727-17.593s-2.587-12.419-7.244-17.076-10.866-6.727-17.076-6.727c-6.727 0-12.419 2.587-17.076 7.762L506.04 411.08l-97.279-97.278c-4.657-4.657-10.866-7.244-17.076-7.244-6.727 0-12.419 2.587-17.076 7.244-9.831 9.832-9.831 24.837-0.517 34.151l105.041 105.558v10.866h-87.448c-13.453 0-24.32 10.866-24.32 24.32 0 13.453 10.866 24.32 24.32 24.32h87.448v64.163h-87.448c-13.453 0-24.32 10.866-24.32 24.32s10.866 24.32 24.32 24.32h87.448v58.988c0 13.453 10.866 24.319 24.32 24.319s24.32-10.866 24.32-24.319V625.82h89.517c13.453 0 24.32-10.866 24.32-24.32s-11.383-23.802-24.837-23.802z" fill="#ffffff" p-id="10045"></path></svg>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
import { ref,h } from 'vue';
import { ElRow, ElCol, ElCard, ElIcon } from 'element-plus';
const { proxy } = getCurrentInstance();
const props = defineProps({
cardData: {
type: Object,
default: () => ({})
},
currencyType: {
type: String,
default: ''
}
})
// 卡片数据
const cards = ref([
{
title: proxy.t('今日新增率'),
value: props?.cardData?.newMembersRate || 0,
percentage: (props?.cardData?.newMembersRate || 0) + '%',
subtitle: proxy.t('新增会员数量')+`<a href="#" class="link" data-type="first" >${props?.cardData?.newMembers || 0}</a>`+proxy.t('人')
+proxy.t('会员总数')+ `<a href="#" class="link" data-type="proxy">${props?.cardData?.totalMembers || 0}</a>`+proxy.t(''),
cardClass: 'orange'
},
{
title: proxy.t(''),
value: `${props?.cardData?.totalBetAmount||0}(U)`,
percentage: '',
subtitle: proxy.t('')+`<a href="#" class="link" data-type="totalCharge" >${(props?.cardData?.totalBets||0)}</a>`+proxy.t('人'),
cardClass: 'blue',
},
{
title: proxy.t('今日输赢'),
value: `${props?.cardData?.totalProfitLoss||0}(U)`,
percentage: '',
subtitle: '',
cardClass: 'pink',
},
{
title: proxy.t('今日杀率'),
value: `${props?.cardData?.killRate ||0}%`,
percentage: (props?.cardData?.betRate||0)+'%',
subtitle: '',
cardClass: 'yellow',
}
]);
const handleClick = (e) => {
// const type = e.target.dataset.type
// let path = '';
// let typeDay = '';
// let activeName = '';
// let timeType = '';
// if (type == 'first') {
// path = '/member/member';
// typeDay = 'day';
// timeType = 3;
// }else if (type == 'proxy') {
// path = '/agent/agent-info';
// typeDay = 'day';
// timeType = '';
// }else if (type == 'totalCharge') {
// path = '/member/member';
// typeDay = '';
// timeType = 3;
// }else if (type == 'totalAgent') {
// path = '/agent/agent-info';
// typeDay = '';
// timeType = '';
// }else if (type == 'differenceRecharge') {
// path = '/finance/recharge-order';
// typeDay = 'day';
// timeType = '';
// }else if (type == 'differenceWithdrawal') {
// path = '/finance/withdrawal';
// typeDay = 'day';
// timeType = '';
// activeName = 'allWithdrawal';
// }else if (type == 'betOnNoteOrder') {
// path = '/game/details';
// typeDay = 'day';
// timeType = '';
// activeName = 'details';
// }else if (type == 'discountParticipants') {
// path = '/discounts/discount-details';
// typeDay = 'day';
// timeType = '';
// activeName = '';
// }
// else if (type == 'discountTask') {
// path = '/discounts/task';
// typeDay = '';
// timeType = '';
// activeName = '';
// }else if (type == 'discountActivity') {
// path = '/discounts/activity-center';
// typeDay = '';
// timeType = '';
// activeName = '';
// }
// proxy.$router.push({
// path: path,
// query: {
// activeName: activeName,
// operateTimeType: typeDay,
// timeType:timeType,
// currencyType:props.currencyType,
// }
// });
}
// proxy.t('利润')+(props?.cardData?.profit||0)+' '+
const goPage = (cardClass) => {
// let path = '';
// let typeDay = '';
// if (cardClass == 'orange'){
// path = '/member/member';
// typeDay = 'day';
// }else if (cardClass == 'blue'){
// path = '/member/member';
// typeDay = '';
// }else if (cardClass == 'yellow'){
// path = '/game/details';
// typeDay = 'day';
// }else if (cardClass == 'purple'){
// path = '/discounts/discount-details';
// typeDay = 'day';
// }
// proxy.$router.push({
// path: path,
// query: {
// activeName: 'details',
// operateTimeType: typeDay
// }
// });
}
</script>
<style scoped>
.dashboard {
padding: 20px;
width: 100%;
}
.dashboard-header {
margin-bottom: 20px;
width: 100%;
display: flex;
border-bottom: 1px solid #dfdfdf;
justify-content: space-between;
padding-bottom: 10px;
}
:deep(.el-card__body){
width: 100% !important;
}
.dashboard-cards .el-card {
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-content{
display: flex;
align-items: center;
justify-content: space-between;
}
.card-left {
color: white;
flex: 1;
}
.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.card-value {
font-size: 24px;
font-weight: bold;
}
.card-value span{
font-size: 24px;
font-weight: bold;
}
.card-subtitle {
font-size: 13px;
color: #f4f4f5;
margin-top: 10px;
min-height: 30px;
}
:deep(.card-subtitle a){
text-decoration: none !important;
}
.percentage {
font-size: 14px;
color: #fff;
border: 1px solid #fff;
padding: 2px;
border-radius: 4px;
margin-left: 5px;
}
.card-right {
display: flex;
justify-content: flex-end;
}
.card-right svg {
font-size: 35px;
width: 35px;
height: 35px;
color: white;
transition: transform 0.3s;
}
.card-right svg:hover {
width: 35px;
height: 35px;
transform: scale(1.2);
}
.card.orange {
background-color: #ef9b21;
}
.card.blue {
background-color: #409eff;
}
.card.green {
background-color: #03a94d;
}
.card.pink {
background-color: #ec2796;
}
.card.purple {
background-color: #aa3ae5;
}
.card.yellow {
background-color: #0c64eb;
}
</style>