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

的撒法
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-22 22:35:44 +08:00
parent 28d2efb4f2
commit 0f9f96c596
3 changed files with 153 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
index.html
View File

@@ -1,83 +1,58 @@
{include file="header"}
<!-- 当前页面 -->
<link rel="stylesheet" href="/web/BlackFruit-web/css/index.css">
<link rel="stylesheet" href="/web/BlackFruit-web/css/viewer.min.css">
<!-- 首页脚本 -->
{include file="header"}
<!-- 当前页面 -->
<link rel="stylesheet" href="/web/BlackFruit-web/css/index.css">
<link rel="stylesheet" href="/web/BlackFruit-web/css/viewer.min.css">
<script src="/web/BlackFruit-web/js/index.js"></script>
<!-- 3D 地球依赖：Three.js 和 three-globe（顺序不能反） -->
<script src="https://unpkg.com/three@0.155.0/build/three.min.js"></script>
<script src="https://unpkg.com/three-globe@2.45.0/dist/three-globe.min.js"></script>
<!-- TopoJSON 客户端，用于将 land-110m 拓扑数据转换为 GeoJSON 多边形 -->
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
<!-- 3D 地球效果脚本（基于 three-globe） -->
<script src="/web/BlackFruit-web/js/globe.js"></script>
<script src="/web/BlackFruit-web/js/viewer.min.js"></script>
</head>
<body id="index">
</head>
<body id="index">
<header>{include file="public/header"}</header>
<!-- banner：去掉图片轮播，仅保留文案轮播 + 右侧地球 -->
<!-- banner（恢复 Swiper 轮播结构，数据由 $data.banner 提供；未配置时使用静态占位） -->
<section class="section banner">
<div class="banner-cont">
<div class="banner-text">
<div class="section-content">
{if isset($data.banner) && !empty($data.banner)}
{php}$__firstBanner = $data['banner'][0];{/php}
<div class="banner-copy">
<div id="bannerTags" class="banner-tags">
{if !empty($__firstBanner.tags)}
{php}
$__tags = preg_split('/[,，]/', $__firstBanner['tags']);
{/php}
{foreach $__tags as $__t}
{php}$__t_trim = trim($__t);{/php}
{if $__t_trim != ''}
<span class="banner-tag-pill">{$__t_trim}</span>
{/if}
{/foreach}
{/if}
</div>
<h1 id="bannerTitle">{$__firstBanner.title|default=''}</h1>
<p class="banner-desc" id="bannerDesc">{$__firstBanner.description|default=''}</p>
{if !empty($__firstBanner.button_text)}
<a
class="btn btn2 btn-normal"
href="{$__firstBanner.button_link|default=$__firstBanner.url|default='javascript:;'}"
id="bannerButton"
{if !empty($__firstBanner.button_blank)}target="_blank"{else}target="_self"{/if}
>
{$__firstBanner.button_text}
</a>
{else /}
<a
class="btn btn2 btn-normal"
href="javascript:;"
id="bannerButton"
style="display: none;"
></a>
{/if}
</div>
{else /}
<!-- 兼容未提供 banner 配置时的占位结构，仍由前端 JS 填充 -->
<div class="banner-copy">
<div id="bannerTags" class="banner-tags"></div>
<h1 id="bannerTitle"></h1>
<p class="banner-desc" id="bannerDesc"></p>
<a
class="btn btn2 btn-normal"
href="javascript:;"
id="bannerButton"
style="display: none;"
></a>
</div>
{/if}
<!-- 3D 地球容器（Three.js 渲染输出挂载到这里），与下方卡片区域共用 section-content 对齐 -->
<div id="bannerGlobe" class="banner-globe"></div>
<div class="swiper banner-cont">
<div class="swiper-wrapper">
{if ( isset($data.banner) ) }
{foreach $data.banner as $key=>$value}
<div class="swiper-slide">
<a href="{$value.url|default='javascript:;'}">
<img class="img-responsive img center-block" src="{$value.img}" alt="">
</a>
</div>
{/foreach}
{else /}
<div class="swiper-slide">
<img class="img-responsive img center-block" src="/web/BlackFruit-web/assets/img/index/1@2x.png" alt="">
<div class="section-content">
<h1>中小企业的云计算底座</h1>
<p class="banner-desc">主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。</p>
<div class="btn btn2 btn-normal">立即查看</div>
</div>
</div>
<div class="swiper-slide">
<img class="img-responsive img center-block" src="/web/BlackFruit-web/assets/img/index/1@2x.png" alt="">
<div class="section-content">
<h1>中小企业的云计算底座</h1>
<p class="banner-desc">主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。</p>
<div class="btn btn2 btn-normal">立即查看</div>
</div>
</div>
<div class="swiper-slide">
<img class="img-responsive img center-block" src="/web/BlackFruit-web/assets/img/index/1@2x.png" alt="">
<div class="section-content">
<h1>中小企业的云计算底座</h1>
<p class="banner-desc">主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。</p>
<div class="btn btn2 btn-normal">立即查看</div>
</div>
</div>
{/if}
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<div class="banner-s">
<div class="section-content banner-list">