refactor: 仪表盘去掉所有图片 全部用Phosphor Icons+CSS替代
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -335,12 +335,10 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
.order-type-img {
|
.order-type-icon {
|
||||||
margin-top: 0.36rem;
|
margin-top: 0.28rem;
|
||||||
}
|
font-size: 0.48rem;
|
||||||
.order-type-img img {
|
color: rgba(255, 255, 255, 0.85);
|
||||||
width: 0.68rem;
|
|
||||||
height: 0.68rem;
|
|
||||||
}
|
}
|
||||||
.product-list-box {
|
.product-list-box {
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
@@ -782,9 +780,33 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #8B949E;
|
color: #8B949E;
|
||||||
}
|
}
|
||||||
.recommend-box-open .top-statistic .top-item .top-img {
|
.recommend-box-open .top-statistic .top-item .top-img-icon {
|
||||||
width: 100%;
|
display: flex;
|
||||||
align-self: flex-end;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 0.12rem 0.16rem;
|
||||||
|
font-size: 0.48rem;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
.recommend-illustration {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 64px;
|
||||||
|
color: #3699FF;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.recommend-placeholder-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 80px;
|
||||||
|
color: #8B949E;
|
||||||
|
opacity: 0.25;
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
}
|
||||||
|
.recommend-box-open .recommend-top .left .row1 .reword img {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
.open-dialog {
|
.open-dialog {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|||||||
@@ -23,6 +23,9 @@
|
|||||||
<link rel="stylesheet" href="/{$template_catalog}/template/{$public_themes}/css/common/common.css">
|
<link rel="stylesheet" href="/{$template_catalog}/template/{$public_themes}/css/common/common.css">
|
||||||
<link rel="stylesheet" href="/{$template_catalog}/template/{$themes}/css/dark-override.css">
|
<link rel="stylesheet" href="/{$template_catalog}/template/{$themes}/css/dark-override.css">
|
||||||
<link rel="stylesheet" href="/upload/common/iconfont/iconfont.css">
|
<link rel="stylesheet" href="/upload/common/iconfont/iconfont.css">
|
||||||
|
<!-- Phosphor Icons -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css" />
|
||||||
|
|
||||||
|
|
||||||
<script src="/{$template_catalog}/template/{$public_themes}/js/common/vue.js"></script>
|
<script src="/{$template_catalog}/template/{$public_themes}/js/common/vue.js"></script>
|
||||||
|
|||||||
@@ -40,13 +40,11 @@
|
|||||||
<el-divider class="divider-box" direction="vertical"></el-divider>
|
<el-divider class="divider-box" direction="vertical"></el-divider>
|
||||||
<div class="info-second" v-loading="nameLoading">
|
<div class="info-second" v-loading="nameLoading">
|
||||||
<div class="email-box">
|
<div class="email-box">
|
||||||
<span><img src="/{$template_catalog}/template/{$themes}/img/home/email-icon.png"
|
<span><i class="ph ph-envelope" style="font-size:16px;vertical-align:middle;margin-right:4px"></i>{{lang.index_email}}</span>
|
||||||
alt="">{{lang.index_email}}</span>
|
|
||||||
<span class="phone-number">{{account.email ? account.email : '--'}}</span>
|
<span class="phone-number">{{account.email ? account.email : '--'}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="phone-box">
|
<div class="phone-box">
|
||||||
<span><img src="/{$template_catalog}/template/{$themes}/img/home/tel-icon.png"
|
<span><i class="ph ph-phone" style="font-size:16px;vertical-align:middle;margin-right:4px"></i>{{lang.index_tel}}</span>
|
||||||
alt="">{{lang.index_tel}}</span>
|
|
||||||
<span class="phone-number">{{account.phone ? account.phone : '--'}}</span>
|
<span class="phone-number">{{account.phone ? account.phone : '--'}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -55,7 +53,7 @@
|
|||||||
v-if="certificationObj.certification_open === 1">
|
v-if="certificationObj.certification_open === 1">
|
||||||
<div class="compny-box">
|
<div class="compny-box">
|
||||||
<div class="left-icon">
|
<div class="left-icon">
|
||||||
<img src="/{$template_catalog}/template/{$themes}/img/home/compny-icon.png" alt="">
|
<i class="ph ph-buildings" style="font-size:20px;color:#8B949E"></i>
|
||||||
<span class="left-type">{{lang.index_compny}}</span>
|
<span class="left-type">{{lang.index_compny}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-text">
|
<div class="right-text">
|
||||||
@@ -70,17 +68,16 @@
|
|||||||
<div class="company-name certify-bottom" :title="certificationObj.company?.certify_id">
|
<div class="company-name certify-bottom" :title="certificationObj.company?.certify_id">
|
||||||
<span
|
<span
|
||||||
class="certify-text">{{certificationObj.company?.certify_id ? certificationObj.company.certify_id : '--'}}</span>
|
class="certify-text">{{certificationObj.company?.certify_id ? certificationObj.company.certify_id : '--'}}</span>
|
||||||
<img class="cpoy-btn" v-copy="certificationObj.company.certify_id"
|
<i class="ph ph-copy cpoy-btn" v-copy="certificationObj.company.certify_id"
|
||||||
v-if="certificationObj.company?.certify_id"
|
v-if="certificationObj.company?.certify_id"
|
||||||
src="/{$template_catalog}/template/{$themes}/img/home/copy.svg" alt="">
|
style="font-size:14px;cursor:pointer;margin-left:4px;color:#8B949E"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="person-box">
|
<div class="person-box">
|
||||||
<div class="left-icon">
|
<div class="left-icon">
|
||||||
<img class="left-icon" src="/{$template_catalog}/template/{$themes}/img/home/person-icon.png"
|
<i class="ph ph-user" style="font-size:20px;color:#8B949E"></i>
|
||||||
alt="">
|
|
||||||
<span class="left-type">{{lang.index_name}}</span>
|
<span class="left-type">{{lang.index_name}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-text">
|
<div class="right-text">
|
||||||
@@ -97,8 +94,8 @@
|
|||||||
<span
|
<span
|
||||||
class="certify-text">{{certificationObj.person?.certify_id ? certificationObj.person.certify_id : '--'}}
|
class="certify-text">{{certificationObj.person?.certify_id ? certificationObj.person.certify_id : '--'}}
|
||||||
</span>
|
</span>
|
||||||
<img v-copy="certificationObj.person?.certify_id" v-if="certificationObj.person?.certify_id"
|
<i class="ph ph-copy cpoy-btn" v-copy="certificationObj.person?.certify_id" v-if="certificationObj.person?.certify_id"
|
||||||
class="cpoy-btn" src="/{$template_catalog}/template/{$themes}/img/home/copy.svg" alt="">
|
style="font-size:14px;cursor:pointer;margin-left:4px;color:#8B949E"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -175,22 +172,22 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="order-box">
|
<div class="order-box">
|
||||||
<div class="order-item order-box-1">
|
<div class="order-item order-box-1">
|
||||||
<div class="order-type-img">
|
<div class="order-type-icon">
|
||||||
<img src="/{$template_catalog}/template/{$themes}/img/home/activation-icon.png" alt="">
|
<i class="ph ph-pulse"></i>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="order-title">{{lang.index_text6}}</h3>
|
<h3 class="order-title">{{lang.index_text6}}</h3>
|
||||||
<div class="order-nums">{{account.host_active_num}}</div>
|
<div class="order-nums">{{account.host_active_num}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-item order-box-2">
|
<div class="order-item order-box-2">
|
||||||
<div class="order-type-img">
|
<div class="order-type-icon">
|
||||||
<img src="/{$template_catalog}/template/{$themes}/img/home/prduct-icon.png" alt="">
|
<i class="ph ph-cube"></i>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="order-title">{{lang.index_text7}}</h3>
|
<h3 class="order-title">{{lang.index_text7}}</h3>
|
||||||
<div class="order-nums">{{account.host_num}}</div>
|
<div class="order-nums">{{account.host_num}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-item order-box-3">
|
<div class="order-item order-box-3">
|
||||||
<div class="order-type-img">
|
<div class="order-type-icon">
|
||||||
<img src="/{$template_catalog}/template/{$themes}/img/home/no-pay-order.png" alt="">
|
<i class="ph ph-receipt"></i>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="order-title">{{lang.index_text8}}</h3>
|
<h3 class="order-title">{{lang.index_text8}}</h3>
|
||||||
<div class="order-nums">{{account.unpaid_order}}</div>
|
<div class="order-nums">{{account.unpaid_order}}</div>
|
||||||
@@ -237,15 +234,13 @@
|
|||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="row1">
|
<div class="row1">
|
||||||
<div class="title-text">{{lang.referral_title1}}</div>
|
<div class="title-text">{{lang.referral_title1}}</div>
|
||||||
<span class="reword" @click="toReferral"><img
|
<span class="reword" @click="toReferral"><i class="ph-fill ph-gift" style="font-size:16px;margin-right:4px;vertical-align:middle"></i>{{lang.referral_text14}}</span>
|
||||||
src="/{$template_catalog}/template/{$themes}/img/home/reword.png"
|
|
||||||
alt="">{{lang.referral_text14}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row2">{{lang.referral_title6}}</div>
|
<div class="row2">{{lang.referral_title6}}</div>
|
||||||
<div class="row3">{{lang.referral_text15}}</div>
|
<div class="row3">{{lang.referral_text15}}</div>
|
||||||
<div class="row4">{{lang.referral_text16}}</div>
|
<div class="row4">{{lang.referral_text16}}</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="right" src="/{$template_catalog}/template/{$themes}/img/home/credit-card.png" alt="">
|
<div class="right recommend-illustration"><i class="ph ph-credit-card"></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="url">
|
<div class="url">
|
||||||
<div class="url-text" :title="promoterData.url">{{promoterData.url}}</div>
|
<div class="url-text" :title="promoterData.url">{{promoterData.url}}</div>
|
||||||
@@ -257,7 +252,7 @@
|
|||||||
<div class="top-money">{{commonData.currency_prefix}}{{promoterData.withdrawable_amount}}</div>
|
<div class="top-money">{{commonData.currency_prefix}}{{promoterData.withdrawable_amount}}</div>
|
||||||
<div class="top-text">{{lang.referral_title2}}</div>
|
<div class="top-text">{{lang.referral_title2}}</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="top-img" src="/{$template_catalog}/template/{$themes}/img/referral/top1.png" />
|
<div class="top-img-icon" style="color:#3DD598"><i class="ph ph-wallet"></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-item">
|
<div class="top-item">
|
||||||
<div class="item-top">
|
<div class="item-top">
|
||||||
@@ -266,12 +261,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="top-text">{{lang.referral_title4}}</div>
|
<div class="top-text">{{lang.referral_title4}}</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="top-img" src="/{$template_catalog}/template/{$themes}/img/referral/top3.png" />
|
<div class="top-img-icon" style="color:#F99600"><i class="ph ph-clock-countdown"></i></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="recommend-box" v-if="!showRight || !isOpen">
|
<div class="recommend-box" v-if="!showRight || !isOpen">
|
||||||
<img src="/{$template_catalog}/template/{$themes}/img/home/recommend-img.png" alt="">
|
<div class="recommend-placeholder-icon"><i class="ph ph-megaphone"></i></div>
|
||||||
<div v-if="showRight">
|
<div v-if="showRight">
|
||||||
<h2>{{lang.index_text17}}</h2>
|
<h2>{{lang.index_text17}}</h2>
|
||||||
<p>{{lang.index_text18}}</p>
|
<p>{{lang.index_text18}}</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user