290 lines
26 KiB
Vue
290 lines
26 KiB
Vue
|
<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
|
|||
|
|
<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
|
|||
|
|
<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: Array,
|
|||
|
|
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>
|
|||
|
|
|