yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: hgcloud_home 仪表盘重构 - 图片替换Phosphor Icons + CSS全面优化
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- home.php: 13处img标签替换为Phosphor Icons + CDN引入
- home.css: 头像渐变圆形/卡片12px圆角+微阴影/订单卡片渐变/空状态图标
This commit is contained in:
yiqiu
2026-03-20 21:27:56 +08:00
parent 5e150bcc82
commit c70c0ab203
2 changed files with 88 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
clientarea/home/hgcloud_home/css/home.css
View File

@@ -19,7 +19,8 @@
box-sizing: border-box; box-sizing: border-box;
padding: 0.25rem; padding: 0.25rem;
background-color: #fff; background-color: #fff;
border-radius: 0.04rem; border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
} }
.info-first { .info-first {
height: 0.6rem; height: 0.6rem;
@@ -30,13 +31,14 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 0.36rem; font-size: 0.28rem;
background: #fff; background: linear-gradient(135deg, #3B82F6, #8B5CF6);
width: 0.6rem; width: 0.52rem;
height: 0.6rem; height: 0.52rem;
border-radius: 0.03rem; border-radius: 50%;
color: #FFFFFF; color: #FFFFFF;
font-weight: bold; font-weight: bold;
flex-shrink: 0;
} }
.name-box { .name-box {
display: flex; display: flex;
@@ -87,11 +89,10 @@
font-size: 0.14rem; font-size: 0.14rem;
color: #8692B0; color: #8692B0;
} }
.info-three .compny-box .left-icon img, .info-three .compny-box .left-icon i,
.info-three .person-box .left-icon img { .info-three .person-box .left-icon i {
vertical-align: middle; font-size: 20px;
width: 0.24rem; color: #8692B0;
height: 0.24rem;
flex-shrink: 0; flex-shrink: 0;
} }
.info-three .compny-box .right-text .certify-id, .info-three .compny-box .right-text .certify-id,
@@ -151,10 +152,10 @@
margin-left: 0.25rem; margin-left: 0.25rem;
color: #1E2736; color: #1E2736;
} }
.info-second > div img { .info-second > div i.ph {
margin-right: 0.05rem; margin-right: 0.05rem;
vertical-align: middle; vertical-align: middle;
width: 0.16rem; font-size: 16px;
} }
.statistics-content { .statistics-content {
display: flex; display: flex;
@@ -165,8 +166,9 @@
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
padding: 0.24rem; padding: 0.24rem;
border-radius: 0.04rem; border-radius: 12px;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
} }
.money-top { .money-top {
display: flex; display: flex;
@@ -177,7 +179,7 @@
position: relative; position: relative;
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
border-radius: 0.04rem; border-radius: 10px;
background: #F6F6FA; background: #F6F6FA;
padding: 0.16rem; padding: 0.16rem;
display: flex; display: flex;
@@ -319,12 +321,10 @@
.statistics-bottom { .statistics-bottom {
margin-top: -0.16rem; margin-top: -0.16rem;
display: flex; display: flex;
padding: 0.26rem 5.32rem 0.26rem 0.24rem; padding: 0.26rem 0.24rem;
border-radius: 0.04rem; border-radius: 12px;
background: url("../img/index_bg.png") no-repeat;
background-size: auto 100%;
background-position: right center;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
} }
.statistics-bottom .statistics-item { .statistics-bottom .statistics-item {
flex: 1; flex: 1;
@@ -372,8 +372,13 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-radius: 0.03rem; border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.order-box .order-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
} }
.order-box .order-title { .order-box .order-title {
color: #FFFFFF; color: #FFFFFF;
@@ -386,27 +391,26 @@
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
} }
.order-box .order-type-img { .order-box .order-type-icon {
margin-top: 0.36rem; margin-top: 0.28rem;
} font-size: 0.48rem;
.order-box .order-type-img img { color: rgba(255, 255, 255, 0.85);
width: 0.68rem;
height: 0.68rem;
} }
.order-box .order-box-1 { .order-box .order-box-1 {
background: #7239EA; background: linear-gradient(145deg, #7239EA, #9B6BFF);
} }
.order-box .order-box-2 { .order-box .order-box-2 {
background: #3699FF; background: linear-gradient(145deg, #3699FF, #60B0FF);
} }
.order-box .order-box-3 { .order-box .order-box-3 {
background: #3DD598; background: linear-gradient(145deg, #3DD598, #60E8B5);
} }
.product-list-box { .product-list-box {
flex: 1; flex: 1;
background-color: #fff; background-color: #fff;
border-radius: 0.04rem; border-radius: 12px;
padding: 0.24rem; padding: 0.24rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
} }
.product-list-box .title-text { .product-list-box .title-text {
font-size: 0.14rem; font-size: 0.14rem;
@@ -426,8 +430,9 @@
box-sizing: border-box; box-sizing: border-box;
padding: 0.24rem; padding: 0.24rem;
width: 4.5rem; width: 4.5rem;
border-radius: 0.04rem; border-radius: 12px;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
} }
.recommend-box { .recommend-box {
width: 3.65rem; width: 3.65rem;
@@ -447,8 +452,24 @@
font-size: 0.14rem; font-size: 0.14rem;
} }
.recommend-box img { .recommend-box img {
width: 3.65rem; display: none;
height: 2.56rem; }
.recommend-placeholder-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
color: #8692B0;
opacity: 0.15;
padding: 0.4rem 0;
}
.recommend-illustration {
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
color: var(--color-primary);
opacity: 0.3;
} }
.recommend-people { .recommend-people {
margin-top: 0.3rem; margin-top: 0.3rem;
@@ -507,9 +528,10 @@
color: #8692B0; color: #8692B0;
} }
.WorkOrder-content { .WorkOrder-content {
padding: 0.3rem 0.3rem 0 0.3rem; padding: 16px;
border-radius: 0.03rem; border-radius: 10px;
border: 1px solid #E6E7EB; border: 1px solid #EEEEEE;
background: #FAFBFC;
} }
.WorkOrder-item { .WorkOrder-item {
display: flex; display: flex;
@@ -611,11 +633,19 @@
} }
.no-product { .no-product {
text-align: center; text-align: center;
margin-top: 1.06rem;
padding-bottom: 1.72rem;
background-color: #fff; background-color: #fff;
border-radius: 0.04rem; border-radius: 12px;
padding: 0.24rem; padding: 60px 24px 80px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.no-product::before {
content: '\e4b6';
font-family: 'Phosphor';
font-size: 72px;
color: #8692B0;
opacity: 0.15;
display: block;
margin-bottom: 16px;
} }
.no-product h2 { .no-product h2 {
font-weight: 400; font-weight: 400;

43
clientarea/home/hgcloud_home/home.php
View File

@@ -1,4 +1,7 @@
<link rel="stylesheet" href="/{$template_catalog_home}/template/{$themes_home}/css/home.css"> <link rel="stylesheet" href="/{$template_catalog_home}/template/{$themes_home}/css/home.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" />
</head> </head>
<body> <body>
@@ -40,13 +43,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_home}/template/{$themes}/img/email-icon.png" <span><i class="ph ph-envelope"></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_home}/template/{$themes}/img/tel-icon.png" <span><i class="ph ph-phone"></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 +56,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_home}/template/{$themes}/img/compny-icon.png" alt=""> <i class="ph ph-buildings"></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 +71,15 @@
<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"></i>
src="/{$template_catalog_home}/template/{$themes}/img/copy.svg" alt="">
</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_home}/template/{$themes}/img/person-icon.png" <i class="ph ph-user"></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">
@@ -98,8 +97,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"
class="cpoy-btn" src="/{$template_catalog_home}/template/{$themes}/img/copy.svg" alt=""> v-if="certificationObj.person?.certify_id"></i>
</div> </div>
</div> </div>
</div> </div>
@@ -192,23 +191,17 @@
</div> </div>
<div class="order-box"> <div class="order-box">
<div class="order-item order-box-1" @click="goProductList('using')"> <div class="order-item order-box-1" @click="goProductList('using')">
<div class="order-type-img"> <div class="order-type-icon"><i class="ph ph-pulse"></i></div>
<img src="/{$template_catalog_home}/template/{$themes}/img/activation-icon.png" alt="">
</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" @click="goProductList()"> <div class="order-item order-box-2" @click="goProductList()">
<div class="order-type-img"> <div class="order-type-icon"><i class="ph ph-cube"></i></div>
<img src="/{$template_catalog_home}/template/{$themes}/img/prduct-icon.png" alt="">
</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" @click="goOrderList('Unpaid')"> <div class="order-item order-box-3" @click="goOrderList('Unpaid')">
<div class="order-type-img"> <div class="order-type-icon"><i class="ph ph-receipt"></i></div>
<img src="/{$template_catalog_home}/template/{$themes}/img/no-pay-order.png" alt="">
</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>
</div> </div>
@@ -280,15 +273,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"></i>{{lang.referral_text14}}</span>
src="/{$template_catalog_home}/template/{$themes}/img/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_home}/template/{$themes}/img/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>
@@ -307,7 +298,7 @@
</div> </div>
</div> </div>
<div class="recommend-box" v-if="!showRight || !isOpen"> <div class="recommend-box" v-if="!showRight || !isOpen">
<img src="/{$template_catalog_home}/template/{$themes}/img/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>