Compare commits

...

4 Commits

Author SHA1 Message Date
yiqiu
46adb018e0 重构样式
All checks were successful
continuous-integration/drone/push Build is passing
2025-12-25 14:01:36 +08:00
yiqiu
8d862e3a11 紧急修复:为 nav-right 添加 flex-shrink 和 min-height 防止高度坍塌
问题根源:
- 虽然设置了 align-items: stretch 和 height: 100%,但 nav-right 仍被计算为 0px
- 原因是 flex 容器中的 nav-right 被隐式设置为 flex-shrink: 1(默认值),导致在计算时被压缩
- 同时缺少 min-height 导致可能的进一步坍塌

关键修复属性:
- flex-shrink: 0 - 防止 flex 项在 nav-header 中被压缩
- min-height: 50px/48px/44px - 设置明确的最小高度作为备份(对应各断点的 nav-header 高度)

修改范围:
767px 断点(common.css + index.css):
  - .nav-header .nav-right 添加 flex-shrink: 0; min-height: 50px;
  - .nav-right 添加 flex-shrink: 0; min-height: 50px;

575px 断点(common.css + index.css):
  - 同上,但 min-height: 48px

360px 断点(index.css):
  - 同上,但 min-height: 44px

基础规则保持不变

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 17:41:27 +08:00
yiqiu
ccf44c7fda 修复导航栏高度问题:在 common.css 中为所有移动端断点添加 align-items/height 规则
核心问题:
- common.css 的 767px/575px 媒体查询中只设置了 nav-header 高度,但没有设置 nav-right 的 flex 拉伸属性
- 导致 nav-right 虽然有 height: 100% 但被 align-items: center(base rule)所影响
- 注册按钮(no-login)作为 nav-desktop-link 类被全局 display: none !important 隐藏

修复内容:
767px 断点:
- 添加 .nav-header { display: flex !important; align-items: stretch !important; }
- 添加 .nav-header .nav-left { display: flex !important; align-items: stretch !important; }
- 添加 .nav-header .nav-right { display: flex !important; align-items: stretch !important; height: 100% !important; }
- 添加 .nav-right { display: flex !important; align-items: stretch !important; height: 100% !important; }
- 添加 .no-login.nav-desktop-link { display: flex !important; height: 100% !important; align-items: stretch !important; }

575px 断点:
- 为所有导航栏元素添加相同的 flex 和高度规则

基础规则:
- 为 .nav-right 添加 flex-shrink: 0 防止 flex 容器缩小

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 17:35:54 +08:00
yiqiu
075046b9d6 修复移动端注册按钮高度问题:575px 和 360px 断点添加 !important 标记
CSS Cascade 问题解决:
- 在 common.css 中存在 `.nav-desktop-link { display: none !important; }` 规则
- 该规则影响 `.no-login.nav-desktop-link` 元素导致其高度坍塌为 0px
- 添加 `!important` 标记到所有 nav-right 和 nav-header .nav-right 规则中

修改内容:
- 575px 断点:
  * `#index .nav-header .nav-right` 添加 !important 到 display/align-items/height
  * `#index .nav-right` 添加 !important 到 align-items/height,改为 stretch 对齐
- 360px 断点:
  * `#index .nav-header .nav-right` 添加 !important 到 display/align-items/height
  * `#index .nav-right` 添加 !important 到 align-items/height,改为 stretch 对齐

所有三个移动端断点 (767px、575px、360px) 现已全部修复

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 17:23:45 +08:00
9 changed files with 526 additions and 360 deletions

View File

@@ -122,6 +122,7 @@
align-items: stretch;
font-size: 14px;
height: 100%;
flex-shrink: 0;
}
.nav-right .control {
@@ -1292,6 +1293,31 @@
.nav-header {
height: 50px !important;
padding: 0 12px;
display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
}
.nav-header .nav-left {
display: flex !important;
align-items: stretch !important;
flex: 0 1 auto;
}
.nav-header .nav-right {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
flex-shrink: 0;
min-height: 50px;
}
.nav-right {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
flex-shrink: 0;
min-height: 50px;
}
.nav-header .nav-left .nav-icon img {
@@ -1315,6 +1341,13 @@
display: none !important;
}
/* 注册按钮容器强制显示 */
.no-login.nav-desktop-link {
display: flex !important;
height: 100% !important;
align-items: stretch !important;
}
.nav-menu .nav-item {
padding: 0 8px;
font-size: 13px;
@@ -1483,6 +1516,31 @@
.nav-header {
height: 48px !important;
padding: 0 10px;
display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
}
.nav-header .nav-left {
display: flex !important;
align-items: stretch !important;
flex: 0 1 auto;
}
.nav-header .nav-right {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
flex-shrink: 0;
min-height: 48px;
}
.nav-right {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
flex-shrink: 0;
min-height: 48px;
}
.nav-header .nav-left .nav-icon img {
@@ -1491,6 +1549,13 @@
margin-right: 8px;
}
/* 注册按钮容器强制显示 */
.no-login.nav-desktop-link {
display: flex !important;
height: 100% !important;
align-items: stretch !important;
}
.nav-menu .nav-item {
padding: 0 6px;
font-size: 12px;

View File

@@ -266,6 +266,7 @@
/* banner 轮播容器 */
.banner-cont .swiper-slide {
position: relative;
/* 桌面端高度 */
height: 650px;
width: 100%;
/* 深色科技渐变背景 */
@@ -2496,9 +2497,12 @@ html {
}
#index .nav-header .nav-right {
display: flex;
align-items: stretch;
height: 100%;
display: flex !important;
align-items: stretch !important;
height: 100% !important;
flex-wrap: nowrap !important;
flex-shrink: 0;
min-height: 50px;
}
#index .nav-menu {
@@ -2519,10 +2523,12 @@ html {
#index .nav-right {
display: flex !important;
align-items: stretch;
align-items: stretch !important;
justify-content: flex-end;
gap: 6px;
height: 100%;
height: 100% !important;
flex-shrink: 0;
min-height: 50px;
}
#index .nav-right .nav-text-link {
@@ -3060,9 +3066,11 @@ html {
}
#index .nav-header .nav-right {
display: flex;
align-items: stretch;
height: 100%;
display: flex !important;
align-items: stretch !important;
height: 100% !important;
flex-shrink: 0;
min-height: 48px;
}
#index .nav-header .nav-left .nav-icon {
@@ -3078,10 +3086,12 @@ html {
#index .nav-right {
display: flex !important;
align-items: center;
align-items: stretch !important;
justify-content: flex-end;
gap: 4px;
height: 100%;
height: 100% !important;
flex-shrink: 0;
min-height: 48px;
}
#index .nav-right .nav-text-link {
@@ -3471,7 +3481,7 @@ html {
}
/* ===== 快速入口 - 四宫格中等版 ===== */
.banner . banner-s {
.banner .banner-s {
margin-top: 16px;
padding: 8px 8px;
}
@@ -3564,9 +3574,11 @@ html {
}
#index .nav-header .nav-right {
display: flex;
align-items: stretch;
height: 100%;
display: flex !important;
align-items: stretch !important;
height: 100% !important;
flex-shrink: 0;
min-height: 44px;
}
#index .nav-header .nav-left .nav-icon {
@@ -3590,10 +3602,12 @@ html {
#index .nav-right {
display: flex !important;
align-items: center;
align-items: stretch !important;
justify-content: flex-end;
gap: 4px;
height: 100%;
height: 100% !important;
flex-shrink: 0;
min-height: 44px;
}
/* 移动端隐藏登录按钮和分隔符,只显示注册按钮 */
@@ -3704,7 +3718,7 @@ html {
}
/* ===== 快速入口 - 四宫格极简版 ===== */
.banner . banner-s {
.banner .banner-s {
margin-top: 12px;
padding: 8px 6px;
}
@@ -4512,3 +4526,123 @@ html {
background: rgba(56, 189, 248, 0.3);
box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}
/* Mobile Overrides for Index Page */
@media (max-width: 768px) {
/* Banner Adjustment */
.banner-cont .swiper-slide {
height: auto !important;
min-height: 400px;
padding-bottom: 60px;
/* Space for pagination */
}
.banner-cont .swiper-slide .section-content {
position: relative;
top: auto;
left: auto;
transform: none;
padding: 80px 20px 40px;
text-align: center;
}
.banner-cont .swiper-slide .section-content .title-wrapper {
max-width: 100%;
margin-bottom: 20px;
}
.banner-cont .swiper-slide h1 {
font-size: 32px;
line-height: 1.3;
}
.banner-tags {
justify-content: center;
margin-bottom: 12px;
}
.banner-cont .banner-desc {
font-size: 15px;
margin: 0 auto 30px;
line-height: 1.6;
}
/* Feature Cards (Banner-S) */
.banner .banner-s {
margin-top: 0;
padding-top: 0;
padding-bottom: 40px;
}
.banner .banner-s .banner-list {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
padding: 0 15px;
}
.banner-s .banner-list .banner-item {
max-width: 100%;
min-width: 0;
flex: auto;
}
/* Hot Products - Card View */
.products-table thead {
display: none;
}
.products-table,
.products-table tbody,
.products-table tr,
.products-table td {
display: block;
width: 100%;
}
.products-table tr {
margin-bottom: 15px;
background: rgba(30, 41, 59, 0.4);
border: 1px solid rgba(148, 163, 184, 0.1);
border-radius: 12px;
padding: 15px;
}
.products-table td {
text-align: right;
padding: 8px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}
.products-table td:last-child {
border-bottom: none;
}
.products-table td::before {
content: attr(data-label);
float: left;
font-weight: 600;
color: rgba(148, 163, 184, 0.8);
}
/* Solution Wrapper - Stacked */
.solution-wrapper {
display: flex;
flex-direction: column;
}
.solution-tabs {
display: none;
/* Hide desktop tabs */
}
/* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
For now, let's assume we stack them or show a simple list.
Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification.
Let's style the active one well first, or maybe show all?
*/
}

View File

@@ -18,7 +18,8 @@
<div class="swiper-wrapper">
{if ( isset($data.banner) ) }
{foreach $data.banner as $key=>$value}
<div class="swiper-slide" style="background-image: url('{$value.img|default='/web/BlackFruit-web/assets/img/index/1@2x.png'}');">
<div class="swiper-slide"
style="background-image: url('{$value.img|default='/web/BlackFruit-web/assets/img/index/1@2x.png'}');">
<div class="section-content">
<div class="title-wrapper">
{if !empty($value.tags)}
@@ -43,11 +44,8 @@
{/if}
{if !empty($value.button_text)}
<a
class="btn btn2 btn-normal"
href="{$value.button_link|default=$value.url|default='javascript:;'}"
{if !empty($value.button_blank) || !empty($value.blank)}target="_blank"{/if}
>
<a class="btn btn2 btn-normal" href="{$value.button_link|default=$value.url|default='javascript:;'}" {if
!empty($value.button_blank) || !empty($value.blank)}target="_blank" {/if}>
{$value.button_text}
</a>
{/if}
@@ -101,28 +99,32 @@
<div class="banner-s">
<div class="section-content banner-list">
<div class="banner-item" id="cloud-box">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon" class="banner-item-icon">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon"
class="banner-item-icon">
<div class="banner-item-content">
<h5>新用户最低可<span class="highlight">5折</span>优惠</h5>
<p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
</div>
</div>
<div class="banner-item" id="domain-box">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon" class="banner-item-icon">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon"
class="banner-item-icon">
<div class="banner-item-content">
<h5>域名<span class="highlight">低至9元</span></h5>
<p class="title-desc mt-10 mb-10">优选主流域名注册服务</p>
</div>
</div>
<div class="banner-item" id="cps-box">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon" class="banner-item-icon">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon"
class="banner-item-icon">
<div class="banner-item-content">
<h5>推广最高<span class="highlight">30%</span>佣金</h5>
<p class="title-desc mt-10 mb-10">多种产品高额返佣</p>
</div>
</div>
<div class="banner-item" id="logon-box">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon" class="banner-item-icon">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon"
class="banner-item-icon">
<div class="banner-item-content">
<h5>注册送<span class="highlight">2000元</span>礼包</h5>
<p class="title-desc mt-10 mb-10">免费注册领取专属礼包</p>
@@ -461,6 +463,38 @@
</div>
<div class="honor-list" id="certBox">
<!-- 荣誉证书动态插入这里 -->
{if ( isset($data.honor) ) }
{foreach $data.honor as $key=>$value}
<div class="honor-item">
<div class="honor-icon">
<img src="{$value.img}" alt="{$value.name}">
</div>
<h4 class="honor-name">{$value.name}</h4>
</div>
{/foreach}
{/if}
</div>
</div>
</div>
<!-- 合作伙伴 -->
<div class="honor-section partner-section" style="background-color: #f8f9fa;">
<div class="section-content">
<div class="honor-title">
<h3>合作伙伴</h3>
<p class="honor-subtitle">携手共进,合作共赢</p>
</div>
<div class="honor-list" id="partnerBox">
{if ( isset($data.partner) ) }
{foreach $data.partner as $key=>$value}
<div class="honor-item">
<div class="honor-icon">
<img src="{$value.img}" alt="{$value.name}">
</div>
<h4 class="honor-name">{$value.name}</h4>
</div>
{/foreach}
{/if}
</div>
</div>
</div>
@@ -498,13 +532,13 @@
</section>
<div style="height: 0;">
<img id="viewer" alt="" style="display: none;">
<div class="d-none">
<img id="viewer" alt="">
</div>
<script>
// 回到顶部功能
$(document).ready(function() {
$(document).ready(function () {
// 点击回到顶部
$("#backTop").click(function () {
$("html, body").animate({ scrollTop: 0 }, 300);
@@ -526,4 +560,4 @@
});
</script>
{include file="footer"}
{include file="footer"}

View File

@@ -98,11 +98,24 @@ $(function () {
`);
});
}
// 合作伙伴
if (commentObj.partner && commentObj.partner.length > 0) {
commentObj.partner.forEach((item) => {
$("#partnerBox").append(`
<div class="honor-item">
<div class="honor-icon">
<img src="${item.img}" alt="${item.name}">
</div>
<h4 class="honor-name">${item.name}</h4>
</div>
`);
});
}
}
// 获取通用配置信息
function getCommentInfo() {
$.ajax({
url: "/console/v1/common",
url: "/console/v1/theme/config",
method: "get",
headers: {
Authorization: "Bearer" + " " + localStorage.jwt,

View File

@@ -55,6 +55,7 @@ class ThemeController extends PluginAdminBaseController
'side' => $param['side'] ?? [],
'feedback_type' => $param['feedback_type'] ?? [],
'honor' => $param['honor'] ?? [],
'partner' => $param['partner'] ?? [],
];
$model = new ThemeConfigModel();

View File

@@ -41,6 +41,7 @@ class ThemeController extends PluginBaseController
'dcim_product_link' => $config['site_config']['dcim_product_link'] ?? '',
// 以下字段需与 /console/v1/common 保持一致的扁平结构
'honor' => $config['honor'] ?? ($config['site_config']['honor'] ?? []),
'partner' => $config['partner'] ?? ($config['site_config']['partner'] ?? []),
'friendly_link' => $config['friendly_link'] ?? [],
'banner' => $config['banner'] ?? [],
'header_nav' => $config['header_nav'] ?? [],

View File

@@ -11,34 +11,19 @@
</div>
<div class="form-item">
<label>联系电话</label>
<t-input
v-model="fullConfig.site_config.enterprise_telephone"
placeholder="400-000-0000"
></t-input>
<t-input v-model="fullConfig.site_config.enterprise_telephone" placeholder="400-000-0000"></t-input>
</div>
<div class="form-item">
<label>联系邮箱</label>
<t-input
v-model="fullConfig.site_config.enterprise_mailbox"
placeholder="support@example.com"
></t-input>
<t-input v-model="fullConfig.site_config.enterprise_mailbox" placeholder="support@example.com"></t-input>
</div>
<div class="form-item form-item--full">
<label>Logo 地址</label>
<div class="upload-row">
<t-input
v-model="fullConfig.site_config.official_website_logo"
placeholder="/upload/logo.png"
></t-input>
<t-upload
theme="custom"
:action="uploadUrl"
:headers="uploadHeaders"
:format-response="uploadFormatResponse"
:show-upload-progress="false"
:max="1"
@success="(ctx) => handleUpload(['site_config', 'official_website_logo'], ctx)"
>
<t-input v-model="fullConfig.site_config.official_website_logo" placeholder="/upload/logo.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@success="(ctx) => handleUpload(['site_config', 'official_website_logo'], ctx)">
<t-button size="small" class="ml-10">
<t-icon name="upload" size="small" /> 上传
</t-button>
@@ -48,19 +33,10 @@
<div class="form-item form-item--full">
<label>二维码地址</label>
<div class="upload-row">
<t-input
v-model="fullConfig.site_config.enterprise_qrcode"
placeholder="/upload/qrcode.png"
></t-input>
<t-upload
theme="custom"
:action="uploadUrl"
:headers="uploadHeaders"
:format-response="uploadFormatResponse"
:show-upload-progress="false"
:max="1"
@success="(ctx) => handleUpload(['site_config', 'enterprise_qrcode'], ctx)"
>
<t-input v-model="fullConfig.site_config.enterprise_qrcode" placeholder="/upload/qrcode.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@success="(ctx) => handleUpload(['site_config', 'enterprise_qrcode'], ctx)">
<t-button size="small" class="ml-10">
<t-icon name="upload" size="small" /> 上传
</t-button>
@@ -69,10 +45,8 @@
</div>
<div class="form-item">
<label>在线客服链接</label>
<t-input
v-model="fullConfig.site_config.online_customer_service_link"
placeholder="http://www.test.com"
></t-input>
<t-input v-model="fullConfig.site_config.online_customer_service_link"
placeholder="http://www.test.com"></t-input>
</div>
<div class="form-item">
<label>ICP 号</label>
@@ -80,66 +54,41 @@
</div>
<div class="form-item">
<label>ICP 链接</label>
<t-input
v-model="fullConfig.site_config.icp_info_link"
placeholder="https://beian.miit.gov.cn"
></t-input>
<t-input v-model="fullConfig.site_config.icp_info_link" placeholder="https://beian.miit.gov.cn"></t-input>
</div>
<div class="form-item">
<label>公安备案号</label>
<t-input
v-model="fullConfig.site_config.public_security_network_preparation"
placeholder="京公网安备XXXX号"
></t-input>
<t-input v-model="fullConfig.site_config.public_security_network_preparation"
placeholder="京公网安备XXXX号"></t-input>
</div>
<div class="form-item">
<label>公安备案链接</label>
<t-input
v-model="fullConfig.site_config.public_security_network_preparation_link"
placeholder="https://beian.mps.gov.cn"
></t-input>
<t-input v-model="fullConfig.site_config.public_security_network_preparation_link"
placeholder="https://beian.mps.gov.cn"></t-input>
</div>
<div class="form-item">
<label>电信增值许可证</label>
<t-input
v-model="fullConfig.site_config.telecom_appreciation"
placeholder="增值电信业务经营许可证"
></t-input>
<t-input v-model="fullConfig.site_config.telecom_appreciation" placeholder="增值电信业务经营许可证"></t-input>
</div>
<div class="form-item">
<label>用户协议链接</label>
<t-input
v-model="fullConfig.site_config.terms_service_url"
placeholder="/agreement/service.html"
></t-input>
<t-input v-model="fullConfig.site_config.terms_service_url" placeholder="/agreement/service.html"></t-input>
</div>
<div class="form-item">
<label>隐私政策链接</label>
<t-input
v-model="fullConfig.site_config.terms_privacy_url"
placeholder="/agreement/privacy.html"
></t-input>
<t-input v-model="fullConfig.site_config.terms_privacy_url" placeholder="/agreement/privacy.html"></t-input>
</div>
<div class="form-item">
<label>云产品购买链接</label>
<t-input
v-model="fullConfig.site_config.cloud_product_link"
placeholder="/cart/goods.htm?id=1"
></t-input>
<t-input v-model="fullConfig.site_config.cloud_product_link" placeholder="/cart/goods.htm?id=1"></t-input>
</div>
<div class="form-item">
<label>物理机/DCIM 链接</label>
<t-input
v-model="fullConfig.site_config.dcim_product_link"
placeholder="/cart/goods.htm?id=2"
></t-input>
<t-input v-model="fullConfig.site_config.dcim_product_link" placeholder="/cart/goods.htm?id=2"></t-input>
</div>
<div class="form-item form-item--full">
<label>版权信息</label>
<t-input
v-model="fullConfig.site_config.copyright_info"
placeholder="© 2025 主题云"
></t-input>
<t-input v-model="fullConfig.site_config.copyright_info" placeholder="© 2025 主题云"></t-input>
</div>
</div>
</t-card>
@@ -168,15 +117,9 @@
<label>图标地址</label>
<div class="upload-row">
<t-input v-model="item.icon" placeholder="/upload/side-phone.png"></t-input>
<t-upload
theme="custom"
:action="uploadUrl"
:headers="uploadHeaders"
:format-response="uploadFormatResponse"
:show-upload-progress="false"
:max="1"
@success="(ctx) => handleUpload(['side', index, 'icon'], ctx)"
>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@success="(ctx) => handleUpload(['side', index, 'icon'], ctx)">
<t-button size="small" class="ml-10">
<t-icon name="upload" size="small" /> 上传
</t-button>
@@ -185,11 +128,8 @@
</div>
<div class="form-item form-item--full">
<label>内容(支持 HTML</label>
<t-textarea
v-model="item.content"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="<p>7x24 小时不间断服务</p>"
></t-textarea>
<t-textarea v-model="item.content" :autosize="{ minRows: 2, maxRows: 4 }"
placeholder="<p>7x24 小时不间断服务</p>"></t-textarea>
</div>
</div>
</div>
@@ -203,11 +143,7 @@
<div v-if="!fullConfig.feedback_type.length" class="empty-tip">
还没有反馈类型,点击下方按钮添加。
</div>
<div
class="config-item"
v-for="(item, index) in fullConfig.feedback_type"
:key="'feedback-' + index"
>
<div class="config-item" v-for="(item, index) in fullConfig.feedback_type" :key="'feedback-' + index">
<div class="config-item__header">
<h4>类型 {{ index + 1 }}</h4>
<t-button size="small" theme="danger" variant="outline" @click="removeFeedbackType(index)">
@@ -246,11 +182,8 @@
</div>
<div class="form-item form-item--full">
<label>描述</label>
<t-textarea
v-model="fullConfig.seo.description"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="站点描述"
></t-textarea>
<t-textarea v-model="fullConfig.seo.description" :autosize="{ minRows: 2, maxRows: 4 }"
placeholder="站点描述"></t-textarea>
</div>
</div>
</t-card>
@@ -276,19 +209,10 @@
<div class="form-item form-item--full">
<label>图片地址</label>
<div class="upload-row">
<t-input
v-model="banner.img"
placeholder="/upload/banner-1.png"
></t-input>
<t-upload
theme="custom"
:action="uploadUrl"
:headers="uploadHeaders"
:format-response="uploadFormatResponse"
:show-upload-progress="false"
:max="1"
@success="(ctx) => handleUpload(['banner', index, 'img'], ctx)"
>
<t-input v-model="banner.img" placeholder="/upload/banner-1.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@success="(ctx) => handleUpload(['banner', index, 'img'], ctx)">
<t-button size="small" class="ml-10">
<t-icon name="upload" size="small" /> 上传
</t-button>
@@ -301,10 +225,7 @@
</div>
<div class="form-item form-item--full">
<label>标签</label>
<t-input
v-model="banner.tags"
placeholder="如:高速,低价,安全(多个标签用逗号分隔)"
></t-input>
<t-input v-model="banner.tags" placeholder="如:高速,低价,安全(多个标签用逗号分隔)"></t-input>
</div>
<div class="form-item">
<label>跳转链接</label>
@@ -351,15 +272,9 @@
<label>图片地址</label>
<div class="upload-row">
<t-input v-model="item.img" placeholder="/upload/honor.png"></t-input>
<t-upload
theme="custom"
:action="uploadUrl"
:headers="uploadHeaders"
:format-response="uploadFormatResponse"
:show-upload-progress="false"
:max="1"
@success="(ctx) => handleUpload(['honor', index, 'img'], ctx)"
>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@success="(ctx) => handleUpload(['honor', index, 'img'], ctx)">
<t-button size="small" class="ml-10">
<t-icon name="upload" size="small" /> 上传
</t-button>
@@ -370,6 +285,44 @@
</div>
<t-button theme="primary" variant="outline" @click="addHonor">新增荣誉</t-button>
</t-card>
<t-card class="theme-card" title="合作伙伴" bordered>
<div v-if="!fullConfig.partner.length" class="empty-tip">
用于首页"合作伙伴"模块partner
</div>
<div class="config-item" v-for="(item, index) in fullConfig.partner" :key="'partner-' + index">
<div class="config-item__header">
<h4>伙伴 {{ index + 1 }}</h4>
<t-button size="small" theme="danger" variant="outline" @click="removePartner(index)">
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-item">
<label>名称</label>
<t-input v-model="item.name" placeholder="客户名称"></t-input>
</div>
<div class="form-item">
<label>描述</label>
<t-input v-model="item.description" placeholder="典型案例"></t-input>
</div>
<div class="form-item form-item--full">
<label>图片地址</label>
<div class="upload-row">
<t-input v-model="item.img" placeholder="/upload/case.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@success="(ctx) => handleUpload(['partner', index, 'img'], ctx)">
<t-button size="small" class="ml-10">
<t-icon name="upload" size="small" /> 上传
</t-button>
</t-upload>
</div>
</div>
</div>
</div>
<t-button theme="primary" variant="outline" @click="addPartner">新增伙伴</t-button>
</t-card>
</t-tab-panel>
<t-tab-panel value="nav" label="导航配置">
@@ -380,10 +333,7 @@
<div class="form-grid">
<div class="form-item form-item--full">
<label>Logo 点击跳转地址</label>
<t-input
v-model="homeNav.file_address"
placeholder="index.html 或 /index.html"
></t-input>
<t-input v-model="homeNav.file_address" placeholder="index.html 或 /index.html"></t-input>
</div>
</div>
@@ -391,12 +341,7 @@
<div v-if="headerNavList.length <= 1" class="empty-tip">
还没有自定义导航,请点击下方按钮新增。
</div>
<div
class="config-item"
v-for="(item, index) in headerNavList"
:key="'nav-' + index"
v-if="index > 0"
>
<div class="config-item" v-for="(item, index) in headerNavList" :key="'nav-' + index" v-if="index > 0">
<div class="config-item__header">
<h4>导航 {{ index }}</h4>
<t-button size="small" theme="danger" variant="outline" @click="removeHeaderNav(index)">
@@ -422,19 +367,11 @@
<div v-if="!getHeaderChildren(item).length" class="empty-tip">
还没有子菜单,点击下方按钮新增。
</div>
<div
class="config-item"
v-for="(child, cIndex) in getHeaderChildren(item)"
:key="'nav-' + index + '-child-' + cIndex"
>
<div class="config-item" v-for="(child, cIndex) in getHeaderChildren(item)"
:key="'nav-' + index + '-child-' + cIndex">
<div class="config-item__header">
<h4>子菜单 {{ cIndex + 1 }}</h4>
<t-button
size="small"
theme="danger"
variant="outline"
@click="removeHeaderNavChild(index, cIndex)"
>
<t-button size="small" theme="danger" variant="outline" @click="removeHeaderNavChild(index, cIndex)">
删除
</t-button>
</div>
@@ -455,17 +392,10 @@
<label>图标地址</label>
<div class="upload-row">
<t-input v-model="child.icon" placeholder="/upload/nav-icon.png"></t-input>
<t-upload
theme="custom"
:action="uploadUrl"
:headers="uploadHeaders"
:format-response="uploadFormatResponse"
:show-upload-progress="false"
:max="1"
@success="
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1" @success="
(ctx) => handleUpload(['header_nav', index, 'children', cIndex, 'icon'], ctx)
"
>
">
<t-button size="small" class="ml-10">
<t-icon name="upload" size="small" /> 上传
</t-button>
@@ -474,21 +404,12 @@
</div>
<div class="form-item form-item--full">
<label>描述</label>
<t-textarea
v-model="child.description"
:autosize="{ minRows: 2, maxRows: 3 }"
placeholder="如:高可用的弹性计算服务"
></t-textarea>
<t-textarea v-model="child.description" :autosize="{ minRows: 2, maxRows: 3 }"
placeholder="如:高可用的弹性计算服务"></t-textarea>
</div>
</div>
</div>
<t-button
class="mt-10"
theme="primary"
size="small"
variant="outline"
@click="addHeaderNavChild(index)"
>
<t-button class="mt-10" theme="primary" size="small" variant="outline" @click="addHeaderNavChild(index)">
新增子菜单
</t-button>
</div>
@@ -507,11 +428,7 @@
<div v-if="!footerNavList.length" class="empty-tip">
还没有底部栏目,点击下方按钮新增。
</div>
<div
class="config-item"
v-for="(group, index) in footerNavList"
:key="'footer-' + index"
>
<div class="config-item" v-for="(group, index) in footerNavList" :key="'footer-' + index">
<div class="config-item__header">
<h4>栏目 {{ index + 1 }}</h4>
<t-button size="small" theme="danger" variant="outline" @click="removeFooterNav(index)">
@@ -528,19 +445,11 @@
<div v-if="!getFooterChildren(group).length" class="empty-tip">
还没有链接,点击下方按钮新增。
</div>
<div
class="config-item"
v-for="(link, cIndex) in getFooterChildren(group)"
:key="'footer-' + index + '-child-' + cIndex"
>
<div class="config-item" v-for="(link, cIndex) in getFooterChildren(group)"
:key="'footer-' + index + '-child-' + cIndex">
<div class="config-item__header">
<h4>链接 {{ cIndex + 1 }}</h4>
<t-button
size="small"
theme="danger"
variant="outline"
@click="removeFooterNavChild(index, cIndex)"
>
<t-button size="small" theme="danger" variant="outline" @click="removeFooterNavChild(index, cIndex)">
删除
</t-button>
</div>
@@ -559,13 +468,7 @@
</div>
</div>
</div>
<t-button
class="mt-10"
theme="primary"
size="small"
variant="outline"
@click="addFooterNavChild(index)"
>
<t-button class="mt-10" theme="primary" size="small" variant="outline" @click="addFooterNavChild(index)">
新增链接
</t-button>
</div>
@@ -605,11 +508,7 @@
<p class="theme-tip">
用于暂未在 UI 中开放的配置项(如复杂导航结构 header_nav/footer_nav 等)。如非必要,建议优先使用上方表单编辑。
</p>
<t-textarea
v-model="advancedText"
:autosize="{ minRows: 14 }"
class="theme-textarea"
></t-textarea>
<t-textarea v-model="advancedText" :autosize="{ minRows: 14 }" class="theme-textarea"></t-textarea>
<div class="mt-10">
<t-button variant="outline" @click="syncJson">同步当前配置</t-button>
<t-button class="ml-10" @click="applyAdvanced">应用 JSON</t-button>
@@ -678,6 +577,7 @@
side: [],
feedback_type: [],
honor: [],
partner: [],
});
new Vue({
@@ -751,18 +651,23 @@
side: Array.isArray(data.side)
? data.side
: Array.isArray(data.side_floating_window)
? data.side_floating_window
: [],
? data.side_floating_window
: [],
feedback_type: Array.isArray(data.feedback_type)
? data.feedback_type
: Array.isArray(data.site_config && data.site_config.feedback_type)
? data.site_config.feedback_type
: [],
? data.site_config.feedback_type
: [],
honor: Array.isArray(data.honor)
? data.honor
: Array.isArray(data.site_config && data.site_config.honor)
? data.site_config.honor
: [],
? data.site_config.honor
: [],
partner: Array.isArray(data.partner)
? data.partner
: Array.isArray(data.site_config && data.site_config.partner)
? data.site_config.partner
: [],
};
if (!Array.isArray(merged.header_nav) || merged.header_nav.length === 0) {
@@ -903,6 +808,12 @@
removeHonor(index) {
this.fullConfig.honor.splice(index, 1);
},
addPartner() {
this.fullConfig.partner.push({ name: "", description: "", img: "" });
},
removePartner(index) {
this.fullConfig.partner.splice(index, 1);
},
addFeedbackType() {
if (!Array.isArray(this.fullConfig.feedback_type)) {
this.fullConfig.feedback_type = [];
@@ -1043,4 +954,4 @@
},
});
})();
</script>
</script>

View File

@@ -1,19 +1,23 @@
<div class="register-advert ">
<a href="regist.htm"><img class="img-responsive" src="/web/BlackFruit-web/assets/img/index/register@2x.png" alt=""></a>
<a href="regist.htm"><img class="img-responsive" src="/web/BlackFruit-web/assets/img/index/register@2x.png"
alt=""></a>
</div>
<div class=" section-promise">
<div class="promise section-content section-p">
<div class="promise-box"><img src="/web/BlackFruit-web/assets/img/index/promise-1.png"> <span class="ml-20">3天 无忧退款</span>
<div class="promise-box"><img src="/web/BlackFruit-web/assets/img/index/promise-1.png"> <span class="ml-20">3天
无忧退款</span>
</div>
<div class="promise-box"><img src="/web/BlackFruit-web/assets/img/index/promise-2.png"> <span class="ml-20">0元 免费备案</span>
<div class="promise-box"><img src="/web/BlackFruit-web/assets/img/index/promise-2.png"> <span class="ml-20">0元
免费备案</span>
</div>
<div class="promise-box"><img src="/web/BlackFruit-web/assets/img/index/promise-3.png"> <span class="ml-20">1V1 专属客服</span>
<div class="promise-box"><img src="/web/BlackFruit-web/assets/img/index/promise-3.png"> <span class="ml-20">1V1
专属客服</span>
</div>
<div class="promise-box"><img src="/web/BlackFruit-web/assets/img/index/promise-4.png"> <span class="ml-20">7*24
小时服务</span></div>
</div>
</div>
<div class="section-content section-p">
<footer class="section-content section-p">
<div class="footer-content">
@@ -76,68 +80,70 @@
</div>
</div>
<div class="footer-nav-box">
<div class="footer-nav-head">其他</div>
<div class="footer-nav-cont">
<div class="footer-nav-item">
<a class="link-hover" id="terms_service_url" href="{$data.terms_service_url|default='/agreement/service.html'}">用户协议</a>
</div>
<div class="footer-nav-item">
<a class="link-hover" id="terms_privacy_url" href="{$data.terms_privacy_url|default='/agreement/privacy.html'}">隐私政策</a>
</div>
<div class="footer-nav-item"><a class="link-hover" href="/agreement.htm?id=26">Cookies政策</a></div>
<div class="footer-nav-item"><a class="link-hover" href="/agreement.htm?id=27">法律声明</a></div>
</div>
</div>
<div class="footer-nav-box">
<div class="footer-nav-head">其他</div>
<div class="footer-nav-cont">
<div class="footer-nav-item">
<a class="link-hover" id="terms_service_url"
href="{$data.terms_service_url|default='/agreement/service.html'}">用户协议</a>
</div>
<div class="footer-nav-item">
<a class="link-hover" id="terms_privacy_url"
href="{$data.terms_privacy_url|default='/agreement/privacy.html'}">隐私政策</a>
</div>
<div class="footer-nav-item"><a class="link-hover" href="/agreement.htm?id=26">Cookies政策</a></div>
<div class="footer-nav-item"><a class="link-hover" href="/agreement.htm?id=27">法律声明</a></div>
</div>
</div>
{/if}
</div>
<div class="footer-nav-right">
<div class="footer-nav-box">
<div class="footer-nav-head">联系我们</div>
<div class="footer-nav-cont">
<div class="footer-nav-item" id="enterprise_name">{$data.enterprise_name|default=''}</div>
<div class="footer-nav-item mt-20" id="enterprise_telephone">
{if !empty($data.enterprise_telephone)}联系电话:{$data.enterprise_telephone}{/if}
</div>
<div class="footer-nav-item" id="enterprise_mailbox">
{if !empty($data.enterprise_mailbox)}联系邮箱:{$data.enterprise_mailbox}{/if}
</div>
</div>
<div class="qr-code">
<img src="{$data.enterprise_qrcode|default=''}" alt="" id="enterprise_qrcode">
</div>
</div>
</div>
<div class="footer-nav-right">
<div class="footer-nav-box">
<div class="footer-nav-head">联系我们</div>
<div class="footer-nav-cont">
<div class="footer-nav-item" id="enterprise_name">{$data.enterprise_name|default=''}</div>
<div class="footer-nav-item mt-20" id="enterprise_telephone">
{if !empty($data.enterprise_telephone)}联系电话:{$data.enterprise_telephone}{/if}
</div>
<div class="footer-nav-item" id="enterprise_mailbox">
{if !empty($data.enterprise_mailbox)}联系邮箱:{$data.enterprise_mailbox}{/if}
</div>
</div>
<div class="qr-code">
<img src="{$data.enterprise_qrcode|default=''}" alt="" id="enterprise_qrcode">
</div>
</div>
</div>
</div>
{if ( isset($data.friendly_link) && !empty($data.friendly_link) ) }
<div class="footer-link">
<span>友情链接:</span>
{foreach $data.friendly_link as $key=>$value}
<a href={$value.url} target="_blank" rel="nofollow">{$value.name}</a>
{/foreach}
</div>
{else /}
<div class="footer-link" id="footerLink">
<span>友情链接:</span>
</div>
{/if}
<div class="footer-record" id="footerRecord">
<div class="left-info">
{if !empty($data.icp_info)}
<a href="{$data.icp_info_link|default=''}" target="_blank" rel="nofollow">{$data.icp_info}</a>
{/if}
{if !empty($data.public_security_network_preparation)}
<a href="{$data.public_security_network_preparation_link|default=''}" target="_blank" rel="nofollow">
{$data.public_security_network_preparation}
</a>
{/if}
{if !empty($data.telecom_appreciation)}
<span>{$data.telecom_appreciation}</span>
{/if}
</div>
<span>{$data.copyright_info|default=''}</span>
</div>
</div>
</div>
{if ( isset($data.friendly_link) && !empty($data.friendly_link) ) }
<div class="footer-link">
<span>友情链接:</span>
{foreach $data.friendly_link as $key=>$value}
<a href={$value.url} target="_blank" rel="nofollow">{$value.name}</a>
{/foreach}
</div>
{else /}
<div class="footer-link" id="footerLink">
<span>友情链接:</span>
</div>
{/if}
<div class="footer-record" id="footerRecord">
<div class="left-info">
{if !empty($data.icp_info)}
<a href="{$data.icp_info_link|default=''}" target="_blank" rel="nofollow">{$data.icp_info}</a>
{/if}
{if !empty($data.public_security_network_preparation)}
<a href="{$data.public_security_network_preparation_link|default=''}" target="_blank" rel="nofollow">
{$data.public_security_network_preparation}
</a>
{/if}
{if !empty($data.telecom_appreciation)}
<span>{$data.telecom_appreciation}</span>
{/if}
</div>
<span>{$data.copyright_info|default=''}</span>
</div>
</div>
</footer>

View File

@@ -1,30 +1,31 @@
<div class="nav-shadow">
<div class="section-content nav-header">
<nav class="section-content nav-header">
<div class="nav-left">
{php}
// 顶部导航与 Logo 走服务端渲染,兼容未配置时的默认值
$__homeNav = isset($data['header_nav'][0])
? $data['header_nav'][0]
: ['file_address' => 'index.html', 'blank' => false];
? $data['header_nav'][0]
: ['file_address' => 'index.html', 'blank' => false];
{/php}
<div class="nav-icon">
<a href="{$__homeNav.file_address|default='index.html'}" {if !empty($__homeNav.blank)}target="_blank"{/if}>
<img src="{$data.official_website_logo|default='/web/BlackFruit-web/assets/img/index/logo.png'}" alt="" id="logo">
<a href="{$__homeNav.file_address|default='index.html'}" {if !empty($__homeNav.blank)}target="_blank" {/if}>
<img src="{$data.official_website_logo|default='/web/BlackFruit-web/assets/img/index/logo.png'}" alt="Logo"
id="logo">
</a>
</div>
<div class="nav-menu">
{if isset($data.header_nav) && !empty($data.header_nav)}
{foreach $data.header_nav as $k=>$item}
{if $k > 0}
{if !empty($item.file_address)}
<a href="{$item.file_address}" {if !empty($item.blank)}target="_blank"{/if}>
<div class="nav-item">{$item.name}</div>
</a>
{else /}
<div class="nav-item">{$item.name}</div>
{/if}
{/if}
{/foreach}
{foreach $data.header_nav as $k=>$item}
{if $k > 0}
{if !empty($item.file_address)}
<a href="{$item.file_address}" {if !empty($item.blank)}target="_blank" {/if}>
<div class="nav-item">{$item.name}</div>
</a>
{else /}
<div class="nav-item">{$item.name}</div>
{/if}
{/if}
{/foreach}
{/if}
</div>
</div>
@@ -33,18 +34,18 @@
<span class="nav-divider nav-desktop-link">|</span>
<a href="/home.htm" class="nav-text-link nav-desktop-link">控制台</a>
<span class="nav-divider nav-desktop-link">|</span>
<div class="no-login nav-desktop-link" style="display: none;">
<div class="no-login nav-desktop-link d-none">
<span class="nav-text-link" id="loginBtn">登录</span>
<span class="nav-divider">|</span>
<div class="btn btn-normal" id="registBtn"><span class="regist-text">立即注册</span></div>
</div>
<div class="login-in nav-desktop-link" style="display: none;">
<div class="login-in nav-desktop-link d-none">
<div id="headImg" class="head-img"></div>
<span class="ml-10 font-el1 name" id="username"></span>
<div class="login-menu animated fadeIn">
<div class="login-menu-item" id="accountBtn">账户信息
<span class="no-real-name real-name" id="noCertification">未实名</span>
<span class="real-name " id="isCertification" style="display: none;">已实名</span>
<span class="real-name d-none" id="isCertification">已实名</span>
</div>
<div class="login-menu-item" id="financeBtn">未付款订单</div>
<div class="login-menu-item" id="ticketBtn">我的工单</div>
@@ -52,43 +53,43 @@
</div>
</div>
<!-- 移动端汉堡菜单按钮 -->
<div class="mobile-menu-toggle" id="mobileMenuToggle">
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
</nav>
<div class="nav-cont">
<div class="section-content">
{if isset($data.header_nav) && !empty($data.header_nav)}
{foreach $data.header_nav as $k=>$item}
{if $k > 0}
{if isset($item.children) && !empty($item.children)}
<div class="nav-cont-menu animated slideInDown">
<div class="nav-content">
{foreach $item.children as $child}
<a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}"
{if !empty($child.blank)}target="_blank"{/if}>
<div class="nav-item-box">
{if !empty($child.icon)}
<img src="{$child.icon}" alt="">
{/if}
<div class="item-box-title">
<div class="title">{$child.name}</div>
<div class="desc">{$child.description}</div>
</div>
</div>
</a>
{/foreach}
</div>
{foreach $data.header_nav as $k=>$item}
{if $k > 0}
{if isset($item.children) && !empty($item.children)}
<div class="nav-cont-menu animated slideInDown">
<div class="nav-content">
{foreach $item.children as $child}
<a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}" {if
!empty($child.blank)}target="_blank" {/if}>
<div class="nav-item-box">
{if !empty($child.icon)}
<img src="{$child.icon}" alt="">
{/if}
<div class="item-box-title">
<div class="title">{$child.name}</div>
<div class="desc">{$child.description}</div>
</div>
{else /}
<div class="nav-cont-menu nav-cont-empty"></div>
{/if}
{/if}
{/foreach}
</div>
</a>
{/foreach}
</div>
</div>
{else /}
<div class="nav-cont-menu nav-cont-empty"></div>
{/if}
{/if}
{/foreach}
{/if}
</div>
</div>
@@ -111,19 +112,19 @@
<div class="mobile-sidebar-body">
<!-- 主导航菜单 -->
{if isset($data.header_nav) && !empty($data.header_nav)}
{foreach $data.header_nav as $k=>$item}
{if $k > 0}
<div class="mobile-nav-item">
{if !empty($item.file_address)}
<a href="{$item.file_address}" {if !empty($item.blank)}target="_blank"{/if} class="mobile-nav-link">
{$item.name}
</a>
{else /}
<div class="mobile-nav-link">{$item.name}</div>
{/if}
</div>
{/if}
{/foreach}
{foreach $data.header_nav as $k=>$item}
{if $k > 0}
<div class="mobile-nav-item">
{if !empty($item.file_address)}
<a href="{$item.file_address}" {if !empty($item.blank)}target="_blank" {/if} class="mobile-nav-link">
{$item.name}
</a>
{else /}
<div class="mobile-nav-link">{$item.name}</div>
{/if}
</div>
{/if}
{/foreach}
{/if}
<!-- 分隔线 -->
<div class="mobile-nav-divider"></div>
@@ -248,4 +249,4 @@
</div>
{/if}
</div>
</div>
</div>