<script src="/themes/clientarea/QRuser/assets/libs/echarts/echarts.min.js?v={$Ver}"></script>
<style>
.card {
margin-bottom: 22px;
border: 0px solid #f1f2f3;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
}
.card-body-info {
display: flex;
align-items: center;
background-image: url(../img/avatar-bg.svg);
background-position: 110px 14px;
background-repeat: no-repeat;
background-size: auto 100%;
padding: 1.5rem;
}
.funds-items {
display: flex;
align-items: center;
width: 100%;
}
.funds-item-info {
width: 30%;
display: flex;
}
.avatar-md {
width: 48px;
height: 48px;
}
.avatar {
border-radius: 50%;
overflow: hidden;
}
.text-muted {
color: #6c757d!important;
}
.d-block {
display: block!important;
}
.funds-item-other {
display: flex;
width: 70%;
}
.card .card-body a, .clientarea-home .card .card-body a:hover {
text-decoration: none;
}
.funds-item {
flex: 1;
padding: 0px 20px;
font-size: 28px;
color: #000;
cursor: pointer;
text-decoration: none;
border-left: 1px solid #e6e8ee;
}
.funds-item-header {
font-size: 12px;
color: #888;
line-height: 1.5;
}
.funds-item .funds-num {
font-family: TCloudNumber;
}
.mr-2, .mx-2 {
margin-right: 0.5rem!important;
}
@media (max-width: 800px){
.card-body-info {
background-image: none;
}
.funds-items {
flex-direction: column;
}
.funds-item-info {
width: 100%;
display: flex;
border-bottom: 1px solid #e8e9f0;
}
.funds-item-other {
width: 100%;
display: grid;
grid-gap: 0rem;
grid-template-columns: repeat(2, auto);
}
.funds-item {
width: 100%;
font-size: 18px;
padding: 1rem 1.5rem 1rem 0;
border-left: none;
border-bottom: 1px solid #e8e9f0;
display: flex;
align-items: center;
justify-content: space-between;
}
}
</style>
<script>
  $(function () {
var credit = '{$ClientArea.index.client.credit}' // 余额
var unpaid = '{$ClientArea.index.invoice_unpaid}' // 未支付
var creditNum = parseFloat(credit.replace('{$Lang.element}', ''))
var unpaidNum = parseFloat(unpaid.replace('{$Lang.element}', ''))
var percentage = parseFloat(creditNum / (creditNum + unpaidNum)).toFixed(2)
if (creditNum === 0 || (creditNum === 0 && unpaidNum === 0)) {
percentage = 0
}
var myChart = echarts.init(document.getElementById("balanceCharts"));
var
option = {
title: {
text: '{a|' + credit + '}\n\n{c|' + '{$Lang.current_balance}' + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 16,
color: '#007bfc'
},
c: {
fontSize: 12,
color: '#000000',
padding: [5, 0]
},
}
}
},
series: [
{
type: 'gauge',
radius: '80%',
clockwise: true,
startAngle: '270',
endAngle: '-89.9999',
//调整间隔距离
splitNumber: 0,
detail: {
offsetCenter: [0, -20],
formatter: ' '
},
pointer: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: [
[0, '#228cfc'],
//计算比例
[percentage, '#228cfc'],
[1, '#efefef']
],
width: 9
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
length: 32,
lineStyle: {
color: '#fff',
width: 6
}
},
axisLabel: {
show: false
}
}
]
};
myChart.setOption(option, true);
// echarts 随屏幕大小改变大小
window.addEventListener("resize",function () {
myChart.resize();
});
// 资源列表
getSourceList()
})
function getSourceList() {
$('#sourceListBox').html(`<div class="h-100 d-flex align-items-center justify-content-center">{$Lang.data_loading}......</div>`)
$.ajax({
type: "get",
url: '/clientarea',
data: {
action: 'list'
},
success: function (data) {
$('#sourceListBox').html(data)
}
});
}
</script>
<div class="row">
<div class="col-sm-12">
<div class="app-expense-alert">
<span class="app-expense-alert__decoration">
<i class="app-expense-icon app-expense-icon-infoblue" role="img" aria-label="infoblue">
</i>
</span>
<div class="app-expense-alert__info">
{$Lang.opening_time}：{$Userinfo.user.create_time|date="Y-m-d H:i:s"} <a href="loginlog" class="btn btn-sm btn-primary"><i class="bx bx-paper-plane"></i>{$Lang.log_in}</a>
<br><br>
{if $Userinfo.user.certifi.status!=1  || $Userinfo.user.marketing_emails_opt_in != 0  || $Userinfo.user.phonenumber != $ClientArea.index.client.phonenumber  }  
<a href="security">
{$Lang.name_no}（ 
{if $Userinfo.user.certifi.status!=1}
{$Lang.name_real} 
{else/}{/if}
{if !$Userinfo.user.email} 
{$Lang.name_email} {else/}{/if}
{if $Userinfo.user.phonenumber}
{else/} {$Lang.phone_number}{/if}
 ） {$Lang.name_travel}！
</a>
{else/}{$Lang.name_yes}{/if}
</div>
<div class="app-expense-alert__operational">
</div>
</div>

<div class="card">
<div class="card-body p-0">
<div class="card-body-info">
<div class="funds-items">
<div class="funds-item-info">
<div>
<div class="zdusertx">
<div class="d-flex align-items-center justify-content-center user-center_header">
{if preg_match("/^[0-9]*[A-Za-z]+$/is", substr($Userinfo.user.username,0,1))} 
{$Userinfo.user.username|substr=0,1|upper} 
{elseif preg_match("/^[\x7f-\xff]*$/", substr($Userinfo.user.username,0,3))} 
{$Userinfo.user.username|substr=0,3}
{else}
{$Userinfo.user.username|substr=0,1|upper} 
{/if}
</div>
</div>
</div>
<div class="ml-3 zduxx">
<div class="zduserxx">
<span>{$Lang.welcomeyoubeback}</span>
<span class="user-center_name"><a href="/details">{$Userinfo.user.username}</a></span>
<span><a data-toggle="tooltip" data-original-title="{$Lang.usergroup}{$Userinfo.client_group.group_name|default="普通用户"}" class="zdyhz" style="background:{$Userinfo.client_group.group_colour|default="#666"};"><i class="bx bxs-user-detail"></i>{$Userinfo.client_group.group_name|default="普通用户"}</a></span>
<span>{$Lang.login_account}：{if $Userinfo.user.phonenumber}{$Userinfo.user.phonenumber|substr=0,3}***{$Userinfo.user.phonenumber|substr=7}{/if}</span>
<span>{$Lang.account_id}:{$Userinfo.user.id}</span>
</div>
</div>
</div>
<div class="funds-item-other">
<a href="clientarea.php?action=addfunds" class="funds-item">
<div class="funds-item-header">{$Lang.current_balance}</div>
<div class="funds-num"><small class="mr-2">{$ClientArea.index.client.credit}</small></div>
</a>
<a href="supporttickets" class="funds-item">
<div class="funds-item-header">{$Lang.pending_work_order}</div>
<div class="funds-num">{$ClientArea.index.ticket_count}</div>
</a>
<a href="billing" class="funds-item">
<div class="funds-item-header">{$Lang.unpaid_order}</div>
<div class="funds-num">{$ClientArea.index.order_count}</div>
</a>
<a href="service?groupid=305" class="funds-item">
<div class="funds-item-header">{$Lang.number_of_products}</div>
<div class="funds-num">{$ClientArea.index.host}</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-xl-7">
<div class="row">
<section class="col-md-12 col-xl-12 b-1">
<div class="card card-body">
<h4 class="card-title mt-0">{$Lang.safety_center}</h4>
<div class=" align-items-center justify-content-between zduserlj mt-020">
<div class="app-overview-card__content">
<div class="app-overview-row app-overview-grid _ov-history">
<div class="app-overview-col app-overview-grid__item-6">
<div class="app-overview-grid__box">
<a class="_ov-block-item _ov-block-item--hover" href="/verified" style="color:"#0064ff;" data-toggle="tooltip" data-original-title="{if $Userinfo.user.certifi.status!=1}{$Lang.mybd}{$Lang.smrz}{else/}{$Lang.yj}{$Lang.smrz}{/if}">
<i class="bx bx-id-card" style="color:" #0064ff;"=""></i>
{if $Userinfo.user.certifi.status!=1}{$Lang.mybd}{$Lang.smrz}{else/}{$Lang.yj}{$Lang.smrz}{/if}
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i>
</a>
</div>
</div>
<div class="app-overview-col app-overview-grid__item-6">
<div class="app-overview-grid__box">
<a class="_ov-block-item _ov-block-item--hover" href="security" data-toggle="tooltip" data-original-title="{if $Userinfo.user.certifi.status==1}{$Lang.yj}{$Lang.setpwd}{else}{$Lang.mybd}{$Lang.setpwd}{/if}">
<i class="bx bx-check-shield"></i> 
{if $Userinfo.user.certifi.status==1}{$Lang.yj}{$Lang.setpwd}{else}{$Lang.mybd}{$Lang.setpwd}{/if}
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i>
</a>
</div>
</div>
<div class="app-overview-col app-overview-grid__item-6">
<div class="app-overview-grid__box">
<a class="_ov-block-item _ov-block-item--hover" href="security" data-toggle="tooltip" data-original-title="{if $Userinfo.user.phonenumber}{$Lang.yj}{$Lang.bindphone}{else}{$Lang.mybd}{$Lang.bindphone}{/if}">
<i class="bx bx-phone-call"></i> 
{if $Userinfo.user.phonenumber}{$Lang.yj}{$Lang.bindphone}{else}{$Lang.mybd}{$Lang.bindphone}{/if}
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i>
</a>
</div>
</div>
<div class="app-overview-col app-overview-grid__item-6">
<div class="app-overview-grid__box">
<a class="_ov-block-item _ov-block-item--hover" href="security" data-toggle="tooltip" data-original-title="{if $Userinfo.user.email}{$Lang.yj}{$Lang.bindemail}{else}{$Lang.mybd}{$Lang.bindemail}{/if}">
<i class="bx bx-mail-send"></i> 
{if $Userinfo.user.email}{$Lang.yj}{$Lang.bindemail}{else}{$Lang.mybd}{$Lang.bindemail}{/if}
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="col-md-12 col-xl-12">
<div class="card card-body">
<h4 class="card-title mt-0">{$Lang.products_launched_all}</h4>
<div class="user-center_product_grid user-center_product_grid-d mt-3 mb-2" style="overflow-y: auto;width:100%">
{foreach $ClientArea.index.host_nav as $list}
<a href="service?groupid={$list.id}" class="user-center_product">
<span>
<i class="bx bxs-grid-alt"></i>
{$list.groupname}
</span>
<span>({$list.count})</span>
</a>
{/foreach}
</div>
</div>
</section>
<section class="col-md-12 col-xl-12">
<div class="card card-body" id="sourceListBox">
</div>
</section>
<section class="col-md-6 col-xl-6">
<div class="card card-body">
<h4 class="card-title mt-0">{$Lang.rebate}</h4>
<div class="app-overview-card__content">
<div class="_ov-disk-snapshot" style="background-image: url(&quot;/themes/clientarea/QRuser/static/images/cm.svg&quot;);">
<div class="_ov-disk-snapshot__inner">
<h5 class="app-overview-mb-3n">{$Lang.consumptiony}</h5>
<p class="_ov-disk-snapshot__info">{$Lang.Become}{$Setting.company_name}{$Lang.messenger}，{$Lang.register_through_promotion}{$Lang.successful_promotion}</p>
<div class="_ov-disk-snapshot__op">
<a class="app-overview-link-external" href="affiliates">{if $ClientArea.aff_msg.affStatus == 1}{$Lang.affyes}{else/}{$Lang.promoter_immediately}{/if}</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="col-md-6 col-xl-6">
<div class="card card-body">
<h4 class="card-title mt-0">{$Lang.tjserve}</h4>
<div class="app-overview-card__content">
<div class="app-overview-row app-overview-grid _ov-history">
<div class="app-overview-grid__item-12">
<div class="app-overview-grid__box">
<a href="news" target="_self" class="_ov-block-item _ov-block-item--hover"  >
<div class="_ov-block-item__inner">{$Lang.title_news}
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i></div>
</a>
</div>
</div>
<div class="app-overview-grid__item-12">
<div class="app-overview-grid__box">
<a href="knowledgebase" target="_blank" class="_ov-block-item _ov-block-item--hover"  >
<div class="_ov-block-item__inner">{$Lang.title_knowledgebase}
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i></div>
</a>
</div>
</div>
<div class="app-overview-grid__item-12">
<div class="app-overview-grid__box">
<a href="{$Setting.web_tos_url}" target="_blank" class="_ov-block-item _ov-block-item--hover"  >
<div class="_ov-block-item__inner">{$Lang.terms_service}
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i></div>
</a>
</div>
</div>
<div class="app-overview-grid__item-12">
<div class="app-overview-grid__box">
<a href="downloads" target="_blank" class="_ov-block-item _ov-block-item--hover"  >
<div class="_ov-block-item__inner">{$Lang.file_download}
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i></div>
</a>
</div>
</div>
<div class="app-overview-grid__item-24">
<div class="app-overview-grid__box">
<a href="affiliates" target="_blank" class="_ov-block-item _ov-block-item--hover"  >
<div class="_ov-block-item__inner">{$Lang.title_affiliates}：({if $ClientArea.aff_msg.affStatus == 1}{$Lang.isactive}{else/}{$Lang.noactive}{/if})
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i></div>
</a>
</div>
</div>
<div class="app-overview-grid__item-24">
<div class="app-overview-grid__box">
<a href="apimanage" target="_blank" class="_ov-block-item _ov-block-item--hover"  >
<div class="_ov-block-item__inner">{$Lang.API_management}：({if $Userinfo.user.api_open == 1}{$Lang.isactive}{else/}{$Lang.noactive}{/if})
<i class="app-overview-icon app-overview-icon-externallink" role="img" aria-label="externallink"></i></div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="col-md-5 col-xl-5 b-2">
<div class="row">
<section class="col-md-12 col-xl-12">
<div class="card card-body">
<h4 class="card-title mt-0">{$Lang.daiban}</h4>
<div class="user-center_product_grid justify-content-around align-items-center zddbsx mt-3 mb-2">
<a class="std-1" href="service?groupid=305">
<div class="text-center text-warning">{$ClientArea.product_num_day_7}</div>
<span>{$Lang.7day}</span>
</a>
<a class="std-1" href="service?groupid=305">
<div class="text-center text-warning">{$ClientArea.product_num_day_30}</div>
<span>{$Lang.30day}</span>
</a>
<a class="std-2" href="service?groupid=305">
<div class="text-center text-warning">{$ClientArea.product_money_day_30}</div>
<span>{$Lang.30day2}</span>
</a>
</div>
</div>
</section>
<section class="col-md-12 col-xl-12">
<div class="card card-body user-center_h300">
<h4 class="card-title mt-0">{$Lang.billinfo}</h4>
<div class="d-flex h100p">
<div class="d-flex flex-column align-items-center justify-content-center flex1">
<div class="w-100 h-100 d-flex justify-content-center" id="balanceCharts"></div>
</div>
<div class="d-flex flex-column justify-content-center flex1">
<span class="d-inline-flex fz-12 text-black-50 mb-2">{$Lang.records_of_consumption}</span>
<span class="d-inline-flex fz-14 text-black-80">{$Lang.consumption_this_month}：{$ClientArea.index.intotal}</span>
<span class="d-inline-flex fz-12 text-black-50 mt-4 mb-2">{$Lang.order_records}</span>
<span class="d-inline-flex fz-14 text-black-80">{$Lang.unpaid}：{$ClientArea.index.invoice_unpaid}</span>
{if $ClientArea.index.allow_recharge == '1'}
<a href="/addfunds" class="btn btn-primary mt-5 w-50">{$Lang.recharge}</a>
{/if}
</div>
</div>
</div>
</section>
<section class="col-md-12 col-xl-12">
<div class="card card-body">
<h4 class="mb-4 card-title d-flex justify-content-between">
<span>{$Lang.announcement}</span>
<a href="news" class="fs-12 font-weight-normal app-overview-b">{$Lang.view_more}</a>
</h4>
{if $ClientArea.index.news}
<ul class="verti-timeline list-unstyled">
{foreach $ClientArea.index.news as $list}
<li class="event-list active" href="newsview?id={$list.id}">
<div class="event-timeline-dot">
<i class="bx bx-right-arrow-circle font-size-18"></i>
</div>
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<h5 href="newsview?id={$list.id}" class="font-size-14">{$list.push_time|date="Y-m-d H:i"}  <i class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"></i></h5>
</div>
<div class="flex-grow-1">
<div>
<a href="newsview?id={$list.id}">
{$list.title} 
</a>
</div>
</div>
</div>
</li>
{/foreach}
{else}
<tr>
<td colspan="2">
<div class="no-data">{$Lang.nothing}</div>
</td>
</tr>
{/if}
</ul>
</div>
</section>
</div>
</div>
</div>
</div>