Merge branch 'dev'
This commit is contained in:
26
.gitea/workflows/dev-ci.yaml
Normal file
26
.gitea/workflows/dev-ci.yaml
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
name: Gitea Actions Official-website
|
||||||
|
run-name: Deploy to ${{ inputs.deploy_target }} by @${{ gitea.actor }}
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- dev
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deploy-dev:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Setup SSH
|
||||||
|
run: |
|
||||||
|
mkdir -p ~/.ssh
|
||||||
|
echo "${{ secrets.SERVER_SSH_KEY }}" > ~/.ssh/id_rsa
|
||||||
|
chmod 600 ~/.ssh/id_rsa
|
||||||
|
ssh-keyscan -H ${{ secrets.SERVER_HOST }} >> ~/.ssh/known_hosts
|
||||||
|
- name: Deploy application
|
||||||
|
run: |
|
||||||
|
ssh ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }} << 'EOF'
|
||||||
|
set -e
|
||||||
|
cd /www/wwwroot/dev.ow.f2b211.com
|
||||||
|
|
||||||
|
# 拉取最新代码
|
||||||
|
git pull --rebase
|
||||||
|
EOF
|
||||||
24
.zed/settings.json
Normal file
24
.zed/settings.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
// Folder-specific settings
|
||||||
|
//
|
||||||
|
// For a full list of overridable settings, and general information on folder-specific settings,
|
||||||
|
// see the documentation: https://zed.dev/docs/configuring-zed#settings-files
|
||||||
|
{
|
||||||
|
"languages": {
|
||||||
|
"PHP": {
|
||||||
|
"language_servers": ["intelephense","!phpactor"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lsp": {
|
||||||
|
"intelephense": {
|
||||||
|
"initialization_options": {
|
||||||
|
"stubs": [
|
||||||
|
"wordpress",
|
||||||
|
"laravel",
|
||||||
|
"symfony",
|
||||||
|
"codeigniter",
|
||||||
|
"thinkphp"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -101,6 +101,8 @@ class BannerItem
|
|||||||
'rel_prod_cate_id',
|
'rel_prod_cate_id',
|
||||||
'title',
|
'title',
|
||||||
'title_txt_color',
|
'title_txt_color',
|
||||||
|
'short_title',
|
||||||
|
'short_title_txt_color',
|
||||||
'desc',
|
'desc',
|
||||||
'desc_txt_color',
|
'desc_txt_color',
|
||||||
'type',
|
'type',
|
||||||
@@ -156,6 +158,8 @@ class BannerItem
|
|||||||
'rel_prod_cate_id',
|
'rel_prod_cate_id',
|
||||||
'title',
|
'title',
|
||||||
'title_txt_color',
|
'title_txt_color',
|
||||||
|
'short_title',
|
||||||
|
'short_title_txt_color',
|
||||||
'desc',
|
'desc',
|
||||||
'desc_txt_color',
|
'desc_txt_color',
|
||||||
'type',
|
'type',
|
||||||
@@ -240,6 +244,7 @@ class BannerItem
|
|||||||
'banner_name' => '分类名称',
|
'banner_name' => '分类名称',
|
||||||
'title' => '横幅名称',
|
'title' => '横幅名称',
|
||||||
'title_txt_color' => '横幅名称字体颜色',
|
'title_txt_color' => '横幅名称字体颜色',
|
||||||
|
'short_title' => '横幅简称',
|
||||||
'desc' => '描述',
|
'desc' => '描述',
|
||||||
'desc_txt_color' => '描述字体颜色',
|
'desc_txt_color' => '描述字体颜色',
|
||||||
'type' => '前台显示类型',
|
'type' => '前台显示类型',
|
||||||
@@ -271,6 +276,7 @@ class BannerItem
|
|||||||
'banner.name' => 'banner_name',
|
'banner.name' => 'banner_name',
|
||||||
'item.title',
|
'item.title',
|
||||||
'item.title_txt_color',
|
'item.title_txt_color',
|
||||||
|
'item.short_title',
|
||||||
'item.desc',
|
'item.desc',
|
||||||
'item.desc_txt_color',
|
'item.desc_txt_color',
|
||||||
'item.type',
|
'item.type',
|
||||||
|
|||||||
@@ -21,6 +21,8 @@ class SysBannerItemBaseModel extends BaseModel
|
|||||||
'banner_id' => 'int',
|
'banner_id' => 'int',
|
||||||
'title' => 'string',
|
'title' => 'string',
|
||||||
'title_txt_color' => 'string',
|
'title_txt_color' => 'string',
|
||||||
|
'short_title' => 'string',
|
||||||
|
'short_title_txt_color' => 'string',
|
||||||
'desc' => 'string',
|
'desc' => 'string',
|
||||||
'desc_txt_color' => 'string',
|
'desc_txt_color' => 'string',
|
||||||
'type' => 'string',
|
'type' => 'string',
|
||||||
|
|||||||
127
app/index/controller/TopicPowerProdline.php
Normal file
127
app/index/controller/TopicPowerProdline.php
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
namespace app\index\controller;
|
||||||
|
|
||||||
|
use app\index\model\SysBannerModel;
|
||||||
|
use think\facade\View;
|
||||||
|
use think\Request;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 专题 - 电力品线控制器
|
||||||
|
*/
|
||||||
|
class TopicPowerProdline extends Common
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* 重写控制器初始化
|
||||||
|
*/
|
||||||
|
public function initialize()
|
||||||
|
{
|
||||||
|
// 获取国家/语言列表
|
||||||
|
$languages = $this->getLanguages();
|
||||||
|
// 输出国家/语言列表
|
||||||
|
if (get_platform() == 'mobile') {
|
||||||
|
View::assign('header_languages', $languages);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取当前语言
|
||||||
|
$current_language = $this->getCurrentLanguage($languages);
|
||||||
|
if (!empty($current_language)) {
|
||||||
|
$this->lang_id = $current_language['id'];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取产品分类
|
||||||
|
$categorys = $this->getProductCategory($this->lang_id);
|
||||||
|
// 输出产品分类
|
||||||
|
View::assign('header_categorys', $categorys);
|
||||||
|
|
||||||
|
// 获取系统配置
|
||||||
|
$configs = $this->getSysConfig($this->lang_id, ['basic', 'contact', 'media']);
|
||||||
|
$this->basic_config = $configs['basic'];
|
||||||
|
// 输出系统配置
|
||||||
|
View::assign('basic_config', $configs['basic']);
|
||||||
|
View::assign('contact_config', $configs['contact']);
|
||||||
|
View::assign('media_config', $configs['media']);
|
||||||
|
|
||||||
|
// 获取底部导航
|
||||||
|
$footer_navigation = $this->getNavigation('NAV_67f60be43df8d', $this->lang_id);
|
||||||
|
// 输出底部导航
|
||||||
|
View::assign('footer_navigation', $footer_navigation);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 专题 - 电力品线首页
|
||||||
|
*/
|
||||||
|
public function index()
|
||||||
|
{
|
||||||
|
$banners = SysBannerModel::with([
|
||||||
|
'items' => function ($query) {
|
||||||
|
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])
|
||||||
|
->order(['sort' => 'asc', 'id' => 'desc'])
|
||||||
|
->enabled(true);
|
||||||
|
}
|
||||||
|
])
|
||||||
|
->atPlatform(request()->from)
|
||||||
|
->uniqueLabel([
|
||||||
|
'BANNER_691e729f2428d',
|
||||||
|
'BANNER_691e732e4ad69',
|
||||||
|
'BANNER_691e752d2bbe2',
|
||||||
|
'BANNER_691e75561c4d3',
|
||||||
|
'BANNER_691e75ec9391c',
|
||||||
|
'BANNER_691e7616545bf',
|
||||||
|
'BANNER_691e763fc08f4',
|
||||||
|
'BANNER_691e765a27eba',
|
||||||
|
'BANNER_691e76b6af393',
|
||||||
|
])
|
||||||
|
->language($this->lang_id)
|
||||||
|
->enabled(true)
|
||||||
|
->order(['sort' => 'asc', 'id' => 'desc'])
|
||||||
|
->select();
|
||||||
|
|
||||||
|
$data = [];
|
||||||
|
if (!$banners->isEmpty()) {
|
||||||
|
$banners_map = [];
|
||||||
|
foreach ($banners as $banner) {
|
||||||
|
$banners_map[$banner->unique_label] = $banner;
|
||||||
|
}
|
||||||
|
// 焦点轮播图
|
||||||
|
$focus_image = data_get($banners_map, 'BANNER_691e729f2428d')?->items->toArray();
|
||||||
|
if (!empty($focus_image)) $data['focus_image'] = $focus_image;
|
||||||
|
|
||||||
|
// 分类
|
||||||
|
$category = data_get($banners_map, 'BANNER_691e732e4ad69')?->items->toArray();
|
||||||
|
if (!empty($category)) $data['category'] = $category;
|
||||||
|
|
||||||
|
// 为什么选择奥睿科相关数据
|
||||||
|
$why_choose = data_get($banners_map, 'BANNER_691e752d2bbe2')?->items->toArray();
|
||||||
|
if (!empty($why_choose)) $data['why_choose'] = $why_choose;
|
||||||
|
|
||||||
|
// 差旅充
|
||||||
|
$travel_charger = data_get($banners_map, 'BANNER_691e75561c4d3')?->items->toArray();
|
||||||
|
if (!empty($travel_charger)) $data['travel_charger'] = $travel_charger;
|
||||||
|
|
||||||
|
// 家居充
|
||||||
|
$home_charger = data_get($banners_map, 'BANNER_691e75ec9391c')?->items->toArray();
|
||||||
|
if (!empty($home_charger)) $data['home_charger'] = $home_charger;
|
||||||
|
|
||||||
|
// 桌面充
|
||||||
|
$desktop_charger = data_get($banners_map, 'BANNER_691e7616545bf')?->items->toArray();
|
||||||
|
if (!empty($desktop_charger)) $data['desktop_charger'] = $desktop_charger;
|
||||||
|
|
||||||
|
// 墙充
|
||||||
|
$wall_charger = data_get($banners_map, 'BANNER_691e763fc08f4')?->items->toArray();
|
||||||
|
if (!empty($wall_charger)) $data['wall_charger'] = $wall_charger;
|
||||||
|
|
||||||
|
// 转换器
|
||||||
|
$converter = data_get($banners_map, 'BANNER_691e765a27eba')?->items->toArray();
|
||||||
|
if (!empty($converter)) $data['converter'] = $converter;
|
||||||
|
|
||||||
|
// 底部介绍
|
||||||
|
$footer_info = data_get($banners_map, 'BANNER_691e76b6af393')?->items->toArray();
|
||||||
|
if (!empty($footer_info)) $data['footer_info'] = $footer_info;
|
||||||
|
}
|
||||||
|
View::assign('data', $data);
|
||||||
|
|
||||||
|
return View::fetch('index');
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -105,6 +105,12 @@ Route::group('topic', function () {
|
|||||||
// 专题-Nas软件下载页
|
// 专题-Nas软件下载页
|
||||||
Route::get('download', 'TopicNas/download');
|
Route::get('download', 'TopicNas/download');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 专题 - 电力品线
|
||||||
|
Route::group("power_prodline", function() {
|
||||||
|
// 专题 - 电力品线首页
|
||||||
|
Route::get('index', 'TopicPowerProdline/index');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 数据迁移
|
// 数据迁移
|
||||||
|
|||||||
749
app/index/view/mobile/topic_power_prodline/index.html
Normal file
749
app/index/view/mobile/topic_power_prodline/index.html
Normal file
@@ -0,0 +1,749 @@
|
|||||||
|
{extend name="public/base" /}
|
||||||
|
{block name="style"}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/index.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/swiper.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/nav.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/advantage.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/mask.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_list.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_card.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css">
|
||||||
|
|
||||||
|
{/block}
|
||||||
|
{block name="header"}
|
||||||
|
<!-- 重置header头为空 -->
|
||||||
|
{/block}
|
||||||
|
{block name="main"}
|
||||||
|
<a class="header" href="/">
|
||||||
|
<div class="header-img">
|
||||||
|
<img src="__IMAGES__/logo.png" alt="">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<!-- 轮播核心容器 -->
|
||||||
|
<div class="swiper-container auto-swiper-container" >
|
||||||
|
{notempty name="data.focus_image"}
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
{volist name="data.focus_image" id="fo"}
|
||||||
|
<a class="swiper-slide auto-swiper-slide" href="{$fo.link}">
|
||||||
|
<img src="{$fo.image}" alt="{$fo.title}" />
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
<!-- 分类 -->
|
||||||
|
{notempty name="data.category"}
|
||||||
|
<div class="nav-box">
|
||||||
|
{volist name="data.category" id="ca"}
|
||||||
|
<a class="nav-item" href="{$ca.link}">
|
||||||
|
<img src="{$ca.image}" alt="{$ca.title}">
|
||||||
|
<p {:style(['color'=>$ca.title_txt_color])}>{$ca.title}</p>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 500万 -->
|
||||||
|
{notempty name="data.why_choose"}
|
||||||
|
<div class="advantage-section">
|
||||||
|
{assign name="why_choose_title" value=":array_shift($data.why_choose)" /}
|
||||||
|
<h2 class="advantage-section__title">{$why_choose_title.title|default=''}</h2>
|
||||||
|
<div class="advantage-section__list">
|
||||||
|
{volist name="data.why_choose" id="ch"}
|
||||||
|
|
||||||
|
<div class="advantage-card-wrap">
|
||||||
|
<div class="advantage-card" data-target="design">
|
||||||
|
<img src="{$ch.image}" alt="{$ch.title}:{$ch.short_title}" class="advantage-card__img">
|
||||||
|
<div class="advantage-card__content">
|
||||||
|
<!-- 标题+箭头容器：水平+垂直双居中，内部文字左、箭头右 -->
|
||||||
|
<div class="advantage-card__heading-wrap">
|
||||||
|
<div class="advantage-card__heading" {:style(['color'=>$ch.title_txt_color])}>{$ch.title}</div>
|
||||||
|
<img src="__IMAGES__/jiant.png" alt="" class="card-arrow">
|
||||||
|
</div>
|
||||||
|
<div class="advantage-card__description" {:style(['color'=>$ch.short_title_txt_color])}>{$ch.short_title}</div>
|
||||||
|
<div style="display:none;" class="mack-conten-text">{$ch.desc|raw}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 产品差旅充 -->
|
||||||
|
{notempty name="data.travel_charger"}
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="tc_title" value=":array_shift($data.travel_charger)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$tc_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$tc_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
<div class="product-container" >
|
||||||
|
{assign name="tc_first_section_lf" value=":array_shift($data.travel_charger)" /}
|
||||||
|
{notempty name="tc_first_section_lf"}
|
||||||
|
<a class="product-left" href="{$tc_first_section_lf.link}">
|
||||||
|
<img src="{$tc_first_section_lf.image}" alt="{$tc_first_section_lf.title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
|
<div class="product-img-hover product-img-1">
|
||||||
|
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="tc_first_section_lr" value=":array_shift($data.travel_charger)" /}
|
||||||
|
{notempty name="tc_first_section_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$tc_first_section_lr.image}" alt="{$tc_first_section_lr.title}" class="right-content right-img">
|
||||||
|
<video src="{$tc_first_section_lr.video}" class="right-content right-video" muted loop playsinline>
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
<button class="video-play-btn">
|
||||||
|
<span class="play-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<path d="M9 7L16 12L9 17V7Z" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<!-- 暂停图标（默认隐藏） -->
|
||||||
|
<span class="pause-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<rect x="8" y="7" width="3" height="10" fill="white" />
|
||||||
|
<rect x="13" y="7" width="3" height="10" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{assign name="tc_second_section" value=":array_splice($data.travel_charger, 0, 4)" /}
|
||||||
|
{notempty name="tc_second_section"}
|
||||||
|
<div class="product-card-box">
|
||||||
|
<div class="product-card-container">
|
||||||
|
{volist name="tc_second_section" id="tss"}
|
||||||
|
<a class="product-card-wrap" href="{$tss.link}">
|
||||||
|
<div class="product-card" >
|
||||||
|
<div class="product-card-img">
|
||||||
|
<img src="{$tss.image}" alt="{$tss.title}">
|
||||||
|
</div>
|
||||||
|
<div class="product-card-text">
|
||||||
|
<div class="product-card-title" {:style(['color'=>$tss.title_txt_color])}>{$tss.title}</div>
|
||||||
|
<div class="product-card-desc" {:style(['color'=>$tss.short_title_txt_color])}>{$tss.short_title}</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-card-link">
|
||||||
|
<img src="__IMAGES__/ljgd.png" alt="查看更多">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{assign name="tc_three_section" value=":array_shift($data.travel_charger)" /}
|
||||||
|
{notempty name="tc_three_section"}
|
||||||
|
<a href="{$tc_three_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 产品 家居充-->
|
||||||
|
{notempty name="data.home_charger"}
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="hc_title" value=":array_shift($data.home_charger)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$hc_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$hc_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
<div class="product-container">
|
||||||
|
{assign name="hc_first_section_lf" value=":array_shift($data.home_charger)" /}
|
||||||
|
{notempty name="hc_first_section_lf"}
|
||||||
|
<a class="product-left" href="{$hc_first_section_lf.link}">
|
||||||
|
<img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
|
<div class="product-img-hover product-img-1">
|
||||||
|
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="hc_first_section_lr" value=":array_shift($data.home_charger)" /}
|
||||||
|
{notempty name="hc_first_section_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$hc_first_section_lr.image}" alt="{$hc_first_section_lr.title}" class="right-content right-img">
|
||||||
|
<video src="{$hc_first_section_lr.video}" class="right-content right-video" muted loop playsinline >
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
<button class="video-play-btn">
|
||||||
|
<span class="play-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<path d="M9 7L16 12L9 17V7Z" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<!-- 暂停图标（默认隐藏） -->
|
||||||
|
<span class="pause-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<rect x="8" y="7" width="3" height="10" fill="white" />
|
||||||
|
<rect x="13" y="7" width="3" height="10" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{assign name="hc_second_section" value=":array_splice($data.home_charger, 0, 4)" /}
|
||||||
|
{notempty name="hc_second_section"}
|
||||||
|
<div class="product-card-box">
|
||||||
|
<div class="product-card-container">
|
||||||
|
{volist name="hc_second_section" id="hcs"}
|
||||||
|
<a class="product-card-wrap" href="{$hcs.link}">
|
||||||
|
<div class="product-card" href="#">
|
||||||
|
<div class="product-card-img">
|
||||||
|
<img src="{$hcs.image}" alt="{$hcs.short_title}">
|
||||||
|
</div>
|
||||||
|
<div class="product-card-text">
|
||||||
|
<div class="product-card-title">{$hcs.title}</div>
|
||||||
|
<div class="product-card-desc">{$hcs.short_title}</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-card-link">
|
||||||
|
<img src="__IMAGES__/ljgd.png" alt="查看更多">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="hc_three_section" value=":array_shift($data.home_charger)" /}
|
||||||
|
{notempty name="hc_three_section"}
|
||||||
|
<a href="{$hc_three_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 产品 桌面充（悬浮图上右超出）底部列表样式不一样(左文右图) -->
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="dc_title" value=":array_shift($data.desktop_charger)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$dc_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$dc_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
<div class="product-container">
|
||||||
|
{assign name="dc_first_section_lf" value=":array_shift($data.desktop_charger)" /}
|
||||||
|
{notempty name="dc_first_section_lf"}
|
||||||
|
<a class="product-left" href="{$dc_first_section_lf.link}">
|
||||||
|
<img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
|
||||||
|
<div class="product-img-hover product-img-2" >
|
||||||
|
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="dc_first_section_lr" value=":array_shift($data.desktop_charger)" /}
|
||||||
|
{notempty name="dc_first_section_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$dc_first_section_lr.image}"
|
||||||
|
alt="使用场景" class="right-content right-img">
|
||||||
|
<!--muted loop playsinline controls-->
|
||||||
|
<video
|
||||||
|
src="{$dc_first_section_lr.video}"
|
||||||
|
class="right-content right-video" muted loop playsinline >
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
<button class="video-play-btn">
|
||||||
|
<span class="play-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<path d="M9 7L16 12L9 17V7Z" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<!-- 暂停图标（默认隐藏） -->
|
||||||
|
<span class="pause-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<rect x="8" y="7" width="3" height="10" fill="white" />
|
||||||
|
<rect x="13" y="7" width="3" height="10" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
|
||||||
|
{notempty name="dc_second_section"}
|
||||||
|
<div class="product-card-box">
|
||||||
|
<div class="product-card-container2">
|
||||||
|
{volist name="dc_second_section" id="dcs"}
|
||||||
|
<a class="product-card2" href="{$dcs.link}">
|
||||||
|
<div class="product-text2">
|
||||||
|
<!-- 新增内部容器，确保所有内容左对齐一致性 -->
|
||||||
|
<div class="product-text-content2">
|
||||||
|
<div class="product-card-title2">{$dcs.title}</div> <!-- 测试超出一行省略 -->
|
||||||
|
<div class="product-card-desc2">{$dcs.short_title}</div> <!-- 测试超出2行省略 -->
|
||||||
|
<div class="product-card-link2">
|
||||||
|
<img src="__IMAGES__/ljgd.png" alt="了解更多">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-card-img2">
|
||||||
|
<img src="{$dcs.image}" alt="{$dcs.title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
|
||||||
|
{notempty name="dc_three_section"}
|
||||||
|
<a href="{$dc_three_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
<!-- 墙插 -->
|
||||||
|
{notempty name="data.wall_charger"}
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="wc_title" value=":array_shift($data.wall_charger)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$wc_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$wc_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
<div class="product-container">
|
||||||
|
{assign name="wc_first_section_lf" value=":array_shift($data.wall_charger)" /}
|
||||||
|
{notempty name="wc_first_section_lf"}
|
||||||
|
<a class="product-left" href="{$wc_first_section_lf.link}">
|
||||||
|
<img src="{$wc_first_section_lf.image}" alt="{$wc_first_section_lf.title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
|
<div class="product-img-hover product-img-1">
|
||||||
|
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="wc_first_section_lr" value=":array_shift($data.wall_charger)" /}
|
||||||
|
{notempty name="wc_first_section_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$wc_first_section_lr.image}" alt="{$wc_first_section_lr.title}" class="right-content right-img">
|
||||||
|
<video src="{$wc_first_section_lr.video}" class="right-content right-video" muted loop playsinline>
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
<button class="video-play-btn">
|
||||||
|
<span class="play-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<path d="M9 7L16 12L9 17V7Z" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<!-- 暂停图标（默认隐藏） -->
|
||||||
|
<span class="pause-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<rect x="8" y="7" width="3" height="10" fill="white" />
|
||||||
|
<rect x="13" y="7" width="3" height="10" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{assign name="wc_more_section" value=":array_shift($data.wall_charger)" /}
|
||||||
|
{notempty name="wc_more_section"}
|
||||||
|
<a href="{$wc_more_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{notempty name="data.converter"}
|
||||||
|
<!-- 转换器 -->
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="ct_title" value=":array_shift($data.converter)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$ct_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$ct_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
{assign name="ct_more_section" value=":array_pop($data.converter)" /}
|
||||||
|
{assign name="ct_chunk_section" value=":array_chunk($data.converter, 2)" /}
|
||||||
|
{assign name="ct_chunk_section_len" value=":count($ct_chunk_section)" /}
|
||||||
|
{volist name="ct_chunk_section" id="cts" key="k"}
|
||||||
|
<div class="product-container">
|
||||||
|
{assign name="cts_lf" value=":array_shift($cts)" /}
|
||||||
|
{notempty name="cts_lf"}
|
||||||
|
<a class="product-left" href="{$cts_lf.link}">
|
||||||
|
<img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
|
<!--style="display:flex;justify-content: center;"-->
|
||||||
|
<div class="product-img-hover product-img-1" >
|
||||||
|
<!-- style="width:70%"-->
|
||||||
|
<img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="cts_lr" value=":array_shift($cts)" /}
|
||||||
|
{notempty name="cts_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$cts_lr.image}" alt="{$cts_lr.title}" class="right-content right-img">
|
||||||
|
<video src="{$cts_lr.video}" class="right-content right-video" muted loop playsinline>
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
<!-- 播放图标 -->
|
||||||
|
<button class="video-play-btn">
|
||||||
|
<span class="play-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<path d="M9 7L16 12L9 17V7Z" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<!-- 暂停图标（默认隐藏） -->
|
||||||
|
<span class="pause-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
|
||||||
|
<rect x="8" y="7" width="3" height="10" fill="white" />
|
||||||
|
<rect x="13" y="7" width="3" height="10" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{neq name="k" value="$ct_chunk_section_len"}
|
||||||
|
<div class="line"></div>
|
||||||
|
{/neq}
|
||||||
|
{/volist}
|
||||||
|
{notempty name="ct_more_section"}
|
||||||
|
<a href="{$ct_more_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{notempty name="data.footer_info"}
|
||||||
|
<!-- 底部 -->
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footer-img">
|
||||||
|
<img src="{$data.footer_info.0.image}" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 蒙版 -->
|
||||||
|
<div class="mask" id="mask">
|
||||||
|
<div class="mask-content" >
|
||||||
|
<span class="close-btn">×</span>
|
||||||
|
<div class="mask-scroll-content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/block}
|
||||||
|
{block name="script"}
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
let swiper=null;
|
||||||
|
const advantageItems = document.querySelectorAll('.advantage-card');
|
||||||
|
let scrollTop = 0; // 保存页面滚动位置
|
||||||
|
let closeBtnHtml = null; // 关闭按钮元素（全局变量，避免重复创建）
|
||||||
|
const mask = document.getElementById('mask');
|
||||||
|
const maskContent = document.querySelector('.mask-content');
|
||||||
|
const maskScrollContent = document.querySelector('.mask-scroll-content'); // 滚动容器（关键！）
|
||||||
|
const closeBtn = document.querySelector('.close-btn')
|
||||||
|
// 初始化：确保 maskScrollContent 存在于 maskContent 中（避免被清空）
|
||||||
|
if (!maskScrollContent) {
|
||||||
|
// 如果页面没有 mask-scroll-content，动态创建（确保结构稳定）
|
||||||
|
const scrollContent = document.createElement('div');
|
||||||
|
scrollContent.className = 'mask-scroll-content';
|
||||||
|
maskContent.appendChild(scrollContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createCloseBtn() {
|
||||||
|
if (closeBtnHtml) {
|
||||||
|
closeBtnHtml.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
closeBtnHtml = document.createElement('span');
|
||||||
|
closeBtnHtml.className = 'close-btn';
|
||||||
|
closeBtnHtml.innerHTML = '×';
|
||||||
|
|
||||||
|
closeBtnHtml.addEventListener('click', hideMask);
|
||||||
|
|
||||||
|
// 挂载到 maskContent（而非 scrollContent），避免被滚动影响位置
|
||||||
|
maskContent.prepend(closeBtnHtml);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showMask(contentHtml) {
|
||||||
|
// 保存页面滚动位置
|
||||||
|
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
|
||||||
|
// 关键：将内容填充到 scrollContent 中（而非直接替换 maskContent）
|
||||||
|
maskScrollContent.innerHTML = contentHtml;
|
||||||
|
createCloseBtn();
|
||||||
|
|
||||||
|
// 显示蒙版
|
||||||
|
mask.style.display = 'flex';
|
||||||
|
|
||||||
|
// 禁止滚动（复用你的逻辑）
|
||||||
|
document.documentElement.classList.add('no-scroll');
|
||||||
|
document.body.classList.add('no-scroll');
|
||||||
|
document.body.style.top = `-${scrollTop}px`;
|
||||||
|
|
||||||
|
// 额外：打开蒙版时就重置滚动位置（避免残留上次滚动状态）
|
||||||
|
maskScrollContent.scrollTop = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideMask() {
|
||||||
|
// 关键步骤 1：先重置 scrollContent 的滚动位置（此时元素还未被销毁）
|
||||||
|
maskScrollContent.scrollTop = 0;
|
||||||
|
|
||||||
|
// 关键步骤 2：清空 scrollContent 的内容（而非 maskContent）
|
||||||
|
maskScrollContent.innerHTML = "";
|
||||||
|
|
||||||
|
// 隐藏蒙版
|
||||||
|
mask.style.display = 'none';
|
||||||
|
|
||||||
|
// 恢复滚动（复用你的逻辑）
|
||||||
|
document.documentElement.classList.remove('no-scroll');
|
||||||
|
document.body.classList.remove('no-scroll');
|
||||||
|
document.body.style.top = '';
|
||||||
|
|
||||||
|
// 还原页面滚动位置
|
||||||
|
window.scrollTo(0, scrollTop);
|
||||||
|
|
||||||
|
// 移除关闭按钮（可选，避免残留）
|
||||||
|
if (closeBtnHtml) {
|
||||||
|
closeBtnHtml.remove();
|
||||||
|
closeBtnHtml = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 点击卡片显示详情
|
||||||
|
advantageItems.forEach((item) => {
|
||||||
|
item.addEventListener('click', (e) => {
|
||||||
|
// 获取当前点击卡片内的.mack-conten-text元素
|
||||||
|
const currentMackContent = e.currentTarget.querySelector('.mack-conten-text');
|
||||||
|
if (currentMackContent) {
|
||||||
|
// 关键修改：获取该元素的子内容（innerHTML 本身就是内部HTML，不含当前元素标签）
|
||||||
|
// 若想更彻底，可遍历子节点拼接内容（兼容特殊场景）
|
||||||
|
let contentHtml = '';
|
||||||
|
Array.from(currentMackContent.childNodes).forEach(child => {
|
||||||
|
// 只保留元素节点和文本节点（过滤空节点）
|
||||||
|
if (child.nodeType === 1 || child.nodeType === 3) {
|
||||||
|
contentHtml += child.outerHTML || child.textContent;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 显示蒙版并传入纯净的子内容
|
||||||
|
showMask(contentHtml);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 关闭按钮事件
|
||||||
|
closeBtn.addEventListener('click', hideMask);
|
||||||
|
// 点击蒙版背景关闭（可选）
|
||||||
|
mask.addEventListener('click', (e) => {
|
||||||
|
if (e.target === mask) hideMask();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ESC 键关闭（可选）
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && mask.style.display === 'flex') hideMask();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关键：拦截蒙版的 touchmove 事件，阻止滚动穿透（移动端核心）
|
||||||
|
mask.addEventListener(
|
||||||
|
'touchmove',
|
||||||
|
(e) => {
|
||||||
|
// 只有点击蒙版背景（不是内容区域）才阻止滚动
|
||||||
|
if (e.target === mask) {
|
||||||
|
e.preventDefault(); // 阻止默认触摸滚动行为
|
||||||
|
e.stopPropagation(); // 阻止事件冒泡
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ passive: false }
|
||||||
|
); // passive: false 必须，否则 preventDefault 无效
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// 初始化所有视频容器
|
||||||
|
function initVideoContainers() {
|
||||||
|
const productRights = document.querySelectorAll('.product-right');
|
||||||
|
// 支持的视频格式
|
||||||
|
const supportedVideoFormats = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.flv', '.wmv'];
|
||||||
|
productRights.forEach((container, index) => {
|
||||||
|
const video = container.querySelector('.right-video');
|
||||||
|
const btn = container.querySelector('.video-play-btn');
|
||||||
|
const img = container.querySelector('.right-img');
|
||||||
|
if (!video || !btn || !img) return;
|
||||||
|
const videoSrc = video.src.trim()
|
||||||
|
console.log(videoSrc,'=videoSrc=')
|
||||||
|
// 修复：正确检测有效视频地址
|
||||||
|
// 排除空字符串、null、undefined
|
||||||
|
const hasValidVideo = !!videoSrc && videoSrc.trim() !== '' && videoSrc !== 'undefined' && videoSrc !== 'null';
|
||||||
|
|
||||||
|
// 验证视频格式是否有效
|
||||||
|
const isValidFormat = supportedVideoFormats.some(format =>
|
||||||
|
videoSrc.toLowerCase().endsWith(format) ||
|
||||||
|
(videoSrc.includes('?') && videoSrc.toLowerCase().split('?')[0].endsWith(format))
|
||||||
|
);
|
||||||
|
|
||||||
|
// 初始化状态：无视频或格式无效则保持图片显示，永不切换
|
||||||
|
if (!hasValidVideo || !isValidFormat) {
|
||||||
|
img.style.display = 'block';
|
||||||
|
video.style.display = 'none';
|
||||||
|
btn.style.display = 'none';
|
||||||
|
// 绑定空方法，防止调用报错
|
||||||
|
video.switchMedia = function() {};
|
||||||
|
console.log(`容器${index}：无有效视频(src="${videoSrc}")，保持图片显示`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 有有效视频的情况
|
||||||
|
console.log(`容器${index}：有有效视频(src="${videoSrc}")，初始化播放逻辑`);
|
||||||
|
|
||||||
|
// 初始状态
|
||||||
|
video.style.display = 'none';
|
||||||
|
video.pause();
|
||||||
|
img.style.display = 'block';
|
||||||
|
btn.style.display = 'none';
|
||||||
|
btn.style.opacity = '0';
|
||||||
|
|
||||||
|
// 同步状态函数
|
||||||
|
function syncMediaState() {
|
||||||
|
if (img.style.display === 'block') {
|
||||||
|
btn.style.display = 'none';
|
||||||
|
btn.style.opacity = '0';
|
||||||
|
} else {
|
||||||
|
btn.style.display = 'block';
|
||||||
|
btn.style.opacity = '1';
|
||||||
|
btn.classList.toggle('paused', !video.paused && !video.ended);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮点击事件
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
if (video.paused) {
|
||||||
|
video.play().catch(() => syncMediaState());
|
||||||
|
} else {
|
||||||
|
video.pause();
|
||||||
|
}
|
||||||
|
syncMediaState();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 视频事件监听
|
||||||
|
['play', 'pause', 'ended', 'playing', 'waiting'].forEach(event => {
|
||||||
|
video.addEventListener(event, syncMediaState);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动切换函数
|
||||||
|
video.switchMedia = function(showVideo) {
|
||||||
|
// 只处理有有效视频的情况
|
||||||
|
if (showVideo) {
|
||||||
|
img.style.display = 'none';
|
||||||
|
video.style.display = 'block';
|
||||||
|
video.play().catch(() => {
|
||||||
|
console.log(`容器${index}：自动播放失败，需要用户交互`);
|
||||||
|
syncMediaState();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
video.pause();
|
||||||
|
img.style.display = 'block';
|
||||||
|
video.style.display = 'none';
|
||||||
|
}
|
||||||
|
syncMediaState();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始同步
|
||||||
|
syncMediaState();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滚动监听 - 优化版
|
||||||
|
function setupScrollWatcher() {
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
function updateVideoVisibility() {
|
||||||
|
const productRights = document.querySelectorAll('.product-right');
|
||||||
|
|
||||||
|
productRights.forEach(container => {
|
||||||
|
const video = container.querySelector('.right-video');
|
||||||
|
if (!video || !video.switchMedia) return;
|
||||||
|
|
||||||
|
// 检查是否在视口中
|
||||||
|
const rect = container.getBoundingClientRect();
|
||||||
|
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
|
||||||
|
const isInView = rect.top < viewHeight * 0.7 && rect.bottom > viewHeight * 0.3;
|
||||||
|
|
||||||
|
// 只对有有效视频的元素调用switchMedia
|
||||||
|
video.switchMedia(isInView);
|
||||||
|
});
|
||||||
|
|
||||||
|
ticking = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用requestAnimationFrame优化性能
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(updateVideoVisibility);
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
initVideoContainers();
|
||||||
|
setupScrollWatcher();
|
||||||
|
|
||||||
|
// 初始检查一次
|
||||||
|
setTimeout(() => {
|
||||||
|
const event = new Event('scroll');
|
||||||
|
window.dispatchEvent(event);
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
if (typeof Swiper === 'undefined') {
|
||||||
|
console.error('Swiper加载失败，请刷新页面重试');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
swiper = new Swiper('.auto-swiper-container', {
|
||||||
|
autoplay: {
|
||||||
|
delay: 3000, // 3秒切换
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
|
loop: false,
|
||||||
|
slidesPerView: 1,
|
||||||
|
spaceBetween: 0,
|
||||||
|
// 启用分页指示标（核心配置）
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination', // 对应 HTML 中的指示标容器
|
||||||
|
clickable: true, // 允许点击指示标切换
|
||||||
|
// dynamicBullets: true, // 动态指示标（当前激活放大）
|
||||||
|
//dynamicMainBullets: 3, // 动态模式显示3个核心指示标
|
||||||
|
},
|
||||||
|
navigation: false,
|
||||||
|
scrollbar: false,
|
||||||
|
on: {
|
||||||
|
resize: function () {
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
swiper.update();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化时触发滚动事件，确保状态正确
|
||||||
|
window.dispatchEvent(new Event('scroll'));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
{/block}
|
||||||
586
app/index/view/pc/topic_power_prodline/index.html
Normal file
586
app/index/view/pc/topic_power_prodline/index.html
Normal file
@@ -0,0 +1,586 @@
|
|||||||
|
{extend name="public/nas_base" /}
|
||||||
|
{block name="style"}
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/index.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/swiper.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/nav.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/advantage.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/mask.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_list.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_card.css">
|
||||||
|
<link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css">
|
||||||
|
{/block}
|
||||||
|
{block name="header"}
|
||||||
|
<!-- 重置header头为空 -->
|
||||||
|
{/block}
|
||||||
|
{block name="main"}
|
||||||
|
<a class="header" href="/">
|
||||||
|
<div class="header-img">
|
||||||
|
<!-- <img src="__IMAGES__/logo.png" alt=""> -->
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<!-- 轮播核心容器 -->
|
||||||
|
<div class="swiper-container auto-swiper-container" >
|
||||||
|
{notempty name="data.focus_image"}
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
{volist name="data.focus_image" id="fo"}
|
||||||
|
<a class="swiper-slide auto-swiper-slide" href="{$fo.link}">
|
||||||
|
<img src="{$fo.image}" alt="{$fo.title}" />
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
<!-- 分类 -->
|
||||||
|
{notempty name="data.category"}
|
||||||
|
<div class="nav-box">
|
||||||
|
{volist name="data.category" id="ca"}
|
||||||
|
<a class="nav-item" href="{$ca.link}">
|
||||||
|
<img src="{$ca.image}" alt="{$ca.title}">
|
||||||
|
<p {:style(['color'=>$ca.title_txt_color])}>{$ca.title}</p>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 500万 -->
|
||||||
|
{notempty name="data.why_choose"}
|
||||||
|
<div class="advantage-section">
|
||||||
|
{assign name="why_choose_title" value=":array_shift($data.why_choose)" /}
|
||||||
|
<h2 class="advantage-section__title">{$why_choose_title.title|default=''}</h2>
|
||||||
|
<div class="advantage-section__list">
|
||||||
|
{volist name="data.why_choose" id="ch"}
|
||||||
|
|
||||||
|
<div class="advantage-card-wrap">
|
||||||
|
<div class="advantage-card" data-target="design">
|
||||||
|
<img src="{$ch.image}" alt="{$ch.title}:{$ch.short_title}" class="advantage-card__img">
|
||||||
|
<div class="advantage-card__content">
|
||||||
|
<!-- 标题+箭头容器：水平+垂直双居中，内部文字左、箭头右 -->
|
||||||
|
<div class="advantage-card__heading-wrap">
|
||||||
|
<div class="advantage-card__heading" {:style(['color'=>$ch.title_txt_color])}>{$ch.title}</div>
|
||||||
|
<img src="__IMAGES__/jiant.png" alt="" class="card-arrow">
|
||||||
|
</div>
|
||||||
|
<div class="advantage-card__description" {:style(['color'=>$ch.short_title_txt_color])}>{$ch.short_title}</div>
|
||||||
|
<div style="display:none;" class="mack-conten-text">{$ch.desc|raw}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 产品差旅充 -->
|
||||||
|
{notempty name="data.travel_charger"}
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="tc_title" value=":array_shift($data.travel_charger)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$tc_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$tc_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
<div class="product-container" >
|
||||||
|
{assign name="tc_first_section_lf" value=":array_shift($data.travel_charger)" /}
|
||||||
|
{notempty name="tc_first_section_lf"}
|
||||||
|
<a class="product-left" href="{$tc_first_section_lf.link}">
|
||||||
|
<img src="{$tc_first_section_lf.image}" alt="{$tc_first_section_lf.title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
|
<div class="product-img-hover product-img-1">
|
||||||
|
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="tc_first_section_lr" value=":array_shift($data.travel_charger)" /}
|
||||||
|
{notempty name="tc_first_section_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$tc_first_section_lr.image}" alt="{$tc_first_section_lr.title}" class="right-content right-img">
|
||||||
|
<video src="{$tc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{assign name="tc_second_section" value=":array_splice($data.travel_charger, 0, 4)" /}
|
||||||
|
{notempty name="tc_second_section"}
|
||||||
|
<div class="product-card-box">
|
||||||
|
<div class="product-card-container">
|
||||||
|
{volist name="tc_second_section" id="tss"}
|
||||||
|
<a class="product-card-wrap" href="{$tss.link}">
|
||||||
|
<div class="product-card" >
|
||||||
|
<div class="product-card-img">
|
||||||
|
<img src="{$tss.image}" alt="{$tss.title}">
|
||||||
|
</div>
|
||||||
|
<div class="product-card-text">
|
||||||
|
<div class="product-card-title" {:style(['color'=>$tss.title_txt_color])}>{$tss.title}</div>
|
||||||
|
<div class="product-card-desc" {:style(['color'=>$tss.short_title_txt_color])}>{$tss.short_title}</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-card-link">
|
||||||
|
<img src="__IMAGES__/ljgd.png" alt="查看更多">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{assign name="tc_three_section" value=":array_shift($data.travel_charger)" /}
|
||||||
|
{notempty name="tc_three_section"}
|
||||||
|
<a href="{$tc_three_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 产品 家居充-->
|
||||||
|
{notempty name="data.home_charger"}
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="hc_title" value=":array_shift($data.home_charger)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$hc_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$hc_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
<div class="product-container">
|
||||||
|
{assign name="hc_first_section_lf" value=":array_shift($data.home_charger)" /}
|
||||||
|
{notempty name="hc_first_section_lf"}
|
||||||
|
<a class="product-left" href="{$hc_first_section_lf.link}">
|
||||||
|
<img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
|
<div class="product-img-hover product-img-1">
|
||||||
|
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="hc_first_section_lr" value=":array_shift($data.home_charger)" /}
|
||||||
|
{notempty name="hc_first_section_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$hc_first_section_lr.image}" alt="{$hc_first_section_lr.title}" class="right-content right-img">
|
||||||
|
<video src="{$hc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{assign name="hc_second_section" value=":array_splice($data.home_charger, 0, 4)" /}
|
||||||
|
{notempty name="hc_second_section"}
|
||||||
|
<div class="product-card-box">
|
||||||
|
<div class="product-card-container">
|
||||||
|
{volist name="hc_second_section" id="hcs"}
|
||||||
|
<a class="product-card-wrap" href="{$hcs.link}">
|
||||||
|
<div class="product-card" href="#">
|
||||||
|
<div class="product-card-img">
|
||||||
|
<img src="{$hcs.image}" alt="{$hcs.short_title}">
|
||||||
|
</div>
|
||||||
|
<div class="product-card-text">
|
||||||
|
<div class="product-card-title">{$hcs.title}</div>
|
||||||
|
<div class="product-card-desc">{$hcs.short_title}</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-card-link">
|
||||||
|
<img src="__IMAGES__/ljgd.png" alt="查看更多">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="hc_three_section" value=":array_shift($data.home_charger)" /}
|
||||||
|
{notempty name="hc_three_section"}
|
||||||
|
<a href="{$hc_three_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 产品 桌面充（悬浮图上右超出）底部列表样式不一样(左文右图) -->
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="dc_title" value=":array_shift($data.desktop_charger)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$dc_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$dc_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
<div class="product-container">
|
||||||
|
{assign name="dc_first_section_lf" value=":array_shift($data.desktop_charger)" /}
|
||||||
|
{notempty name="dc_first_section_lf"}
|
||||||
|
<a class="product-left" href="{$dc_first_section_lf.link}">
|
||||||
|
<img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
|
||||||
|
<div class="product-img-hover product-img-2" >
|
||||||
|
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="dc_first_section_lr" value=":array_shift($data.desktop_charger)" /}
|
||||||
|
{notempty name="dc_first_section_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$dc_first_section_lr.image}"
|
||||||
|
alt="使用场景" class="right-content right-img">
|
||||||
|
<!--muted loop playsinline controls-->
|
||||||
|
<video
|
||||||
|
src="{$dc_first_section_lr.video}"
|
||||||
|
class="right-content right-video" style="display: none;">
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
|
||||||
|
{notempty name="dc_second_section"}
|
||||||
|
<div class="product-card-box">
|
||||||
|
<div class="product-card-container2">
|
||||||
|
{volist name="dc_second_section" id="dcs"}
|
||||||
|
<a class="product-card2" href="{$dcs.link}">
|
||||||
|
<div class="product-text2">
|
||||||
|
<!-- 新增内部容器，确保所有内容左对齐一致性 -->
|
||||||
|
<div class="product-text-content2">
|
||||||
|
<div class="product-card-title2">{$dcs.title}</div> <!-- 测试超出一行省略 -->
|
||||||
|
<div class="product-card-desc2">{$dcs.short_title}</div> <!-- 测试超出2行省略 -->
|
||||||
|
<div class="product-card-link2">
|
||||||
|
<img src="__IMAGES__/ljgd.png" alt="了解更多">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-card-img2">
|
||||||
|
<img src="{$dcs.image}" alt="{$dcs.title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
|
||||||
|
{notempty name="dc_three_section"}
|
||||||
|
<a href="{$dc_three_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
<!-- 墙插 -->
|
||||||
|
{notempty name="data.wall_charger"}
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="wc_title" value=":array_shift($data.wall_charger)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$wc_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$wc_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
<div class="product-container">
|
||||||
|
{assign name="wc_first_section_lf" value=":array_shift($data.wall_charger)" /}
|
||||||
|
{notempty name="wc_first_section_lf"}
|
||||||
|
<a class="product-left" href="{$wc_first_section_lf.link}">
|
||||||
|
<img src="{$wc_first_section_lf.image}" alt="{$wc_first_section_lf.title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
|
<div class="product-img-hover product-img-1">
|
||||||
|
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="wc_first_section_lr" value=":array_shift($data.wall_charger)" /}
|
||||||
|
{notempty name="wc_first_section_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$wc_first_section_lr.image}" alt="{$wc_first_section_lr.title}" class="right-content right-img">
|
||||||
|
<video src="{$wc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{assign name="wc_more_section" value=":array_shift($data.wall_charger)" /}
|
||||||
|
{notempty name="wc_more_section"}
|
||||||
|
<a href="{$wc_more_section.link}" class="more">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{notempty name="data.converter"}
|
||||||
|
<!-- 转换器 -->
|
||||||
|
<div class="product-box">
|
||||||
|
{assign name="ct_title" value=":array_shift($data.converter)" /}
|
||||||
|
<div class="product-title">
|
||||||
|
<h2 class="product-title-h2">{$ct_title.title|default=''}</h2>
|
||||||
|
<p class="product-title-p">{$ct_title.short_title|default=''}</p>
|
||||||
|
</div>
|
||||||
|
{assign name="ct_more_section" value=":array_pop($data.converter)" /}
|
||||||
|
{assign name="ct_chunk_section" value=":array_chunk($data.converter, 2)" /}
|
||||||
|
{assign name="ct_chunk_section_len" value=":count($ct_chunk_section)" /}
|
||||||
|
{volist name="ct_chunk_section" id="cts" key="k"}
|
||||||
|
<div class="product-container">
|
||||||
|
{assign name="cts_lf" value=":array_shift($cts)" /}
|
||||||
|
{notempty name="cts_lf"}
|
||||||
|
<a class="product-left" href="{$cts_lf.link}">
|
||||||
|
<img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
|
||||||
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
|
<!--style="display:flex;justify-content: center;"-->
|
||||||
|
<div class="product-img-hover product-img-1" >
|
||||||
|
<!-- style="width:70%"-->
|
||||||
|
<img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{assign name="cts_lr" value=":array_shift($cts)" /}
|
||||||
|
{notempty name="cts_lr"}
|
||||||
|
<div class="product-right">
|
||||||
|
<img src="{$cts_lr.image}" alt="{$cts_lr.title}" class="right-content right-img">
|
||||||
|
<video src="{$cts_lr.video}" class="right-content right-video" muted loop playsinline controls>
|
||||||
|
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{neq name="k" value="$ct_chunk_section_len"}
|
||||||
|
<div class="line"></div>
|
||||||
|
{/neq}
|
||||||
|
{/volist}
|
||||||
|
{notempty name="ct_more_section"}
|
||||||
|
<a href="{$ct_more_section.link}" class="more" style="padding: clamp(1.5rem, 3vw, 3rem) 0">
|
||||||
|
<div class="more-img">
|
||||||
|
查看更多
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{notempty name="data.footer_info"}
|
||||||
|
<!-- 底部 -->
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footer-img">
|
||||||
|
<img src="{$data.footer_info.0.image}" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 蒙版 -->
|
||||||
|
<div class="mask" id="mask">
|
||||||
|
<div class="mask-content" >
|
||||||
|
<span class="close-btn">×</span>
|
||||||
|
<div class="mask-scroll-content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/block}
|
||||||
|
{block name="script"}
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
let swiper=null;
|
||||||
|
const advantageItems = document.querySelectorAll('.advantage-card');
|
||||||
|
let scrollTop = 0; // 保存页面滚动位置
|
||||||
|
let closeBtnHtml = null; // 关闭按钮元素（全局变量，避免重复创建）
|
||||||
|
const mask = document.getElementById('mask');
|
||||||
|
const maskContent = document.querySelector('.mask-content');
|
||||||
|
const maskScrollContent = document.querySelector('.mask-scroll-content'); // 滚动容器（关键！）
|
||||||
|
const closeBtn = document.querySelector('.close-btn')
|
||||||
|
// 初始化：确保 maskScrollContent 存在于 maskContent 中（避免被清空）
|
||||||
|
if (!maskScrollContent) {
|
||||||
|
// 如果页面没有 mask-scroll-content，动态创建（确保结构稳定）
|
||||||
|
const scrollContent = document.createElement('div');
|
||||||
|
scrollContent.className = 'mask-scroll-content';
|
||||||
|
maskContent.appendChild(scrollContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function createCloseBtn() {
|
||||||
|
if (closeBtnHtml) {
|
||||||
|
closeBtnHtml.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
closeBtnHtml = document.createElement('span');
|
||||||
|
closeBtnHtml.className = 'close-btn';
|
||||||
|
closeBtnHtml.innerHTML = '×';
|
||||||
|
|
||||||
|
closeBtnHtml.addEventListener('click', hideMask);
|
||||||
|
|
||||||
|
// 挂载到 maskContent（而非 scrollContent），避免被滚动影响位置
|
||||||
|
maskContent.prepend(closeBtnHtml);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showMask(contentHtml) {
|
||||||
|
// 保存页面滚动位置
|
||||||
|
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
|
||||||
|
// 关键：将内容填充到 scrollContent 中（而非直接替换 maskContent）
|
||||||
|
maskScrollContent.innerHTML = contentHtml;
|
||||||
|
createCloseBtn();
|
||||||
|
|
||||||
|
// 显示蒙版
|
||||||
|
mask.style.display = 'flex';
|
||||||
|
|
||||||
|
// 禁止滚动（复用你的逻辑）
|
||||||
|
document.documentElement.classList.add('no-scroll');
|
||||||
|
document.body.classList.add('no-scroll');
|
||||||
|
document.body.style.top = `-${scrollTop}px`;
|
||||||
|
|
||||||
|
// 额外：打开蒙版时就重置滚动位置（避免残留上次滚动状态）
|
||||||
|
maskScrollContent.scrollTop = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideMask() {
|
||||||
|
// 关键步骤 1：先重置 scrollContent 的滚动位置（此时元素还未被销毁）
|
||||||
|
maskScrollContent.scrollTop = 0;
|
||||||
|
|
||||||
|
// 关键步骤 2：清空 scrollContent 的内容（而非 maskContent）
|
||||||
|
maskScrollContent.innerHTML = "";
|
||||||
|
|
||||||
|
// 隐藏蒙版
|
||||||
|
mask.style.display = 'none';
|
||||||
|
|
||||||
|
// 恢复滚动（复用你的逻辑）
|
||||||
|
document.documentElement.classList.remove('no-scroll');
|
||||||
|
document.body.classList.remove('no-scroll');
|
||||||
|
document.body.style.top = '';
|
||||||
|
|
||||||
|
// 还原页面滚动位置
|
||||||
|
window.scrollTo(0, scrollTop);
|
||||||
|
|
||||||
|
// 移除关闭按钮（可选，避免残留）
|
||||||
|
if (closeBtnHtml) {
|
||||||
|
closeBtnHtml.remove();
|
||||||
|
closeBtnHtml = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 点击卡片显示详情
|
||||||
|
advantageItems.forEach((item) => {
|
||||||
|
item.addEventListener('click', (e) => {
|
||||||
|
// 获取当前点击卡片内的.mack-conten-text元素
|
||||||
|
const currentMackContent = e.currentTarget.querySelector('.mack-conten-text');
|
||||||
|
if (currentMackContent) {
|
||||||
|
// 关键修改：获取该元素的子内容（innerHTML 本身就是内部HTML，不含当前元素标签）
|
||||||
|
// 若想更彻底，可遍历子节点拼接内容（兼容特殊场景）
|
||||||
|
let contentHtml = '';
|
||||||
|
Array.from(currentMackContent.childNodes).forEach(child => {
|
||||||
|
// 只保留元素节点和文本节点（过滤空节点）
|
||||||
|
if (child.nodeType === 1 || child.nodeType === 3) {
|
||||||
|
contentHtml += child.outerHTML || child.textContent;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 显示蒙版并传入纯净的子内容
|
||||||
|
showMask(contentHtml);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 关闭按钮事件
|
||||||
|
closeBtn.addEventListener('click', hideMask);
|
||||||
|
// 点击蒙版背景关闭（可选）
|
||||||
|
mask.addEventListener('click', (e) => {
|
||||||
|
if (e.target === mask) hideMask();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ESC 键关闭（可选）
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && mask.style.display === 'flex') hideMask();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关键：拦截蒙版的 touchmove 事件，阻止滚动穿透（移动端核心）
|
||||||
|
mask.addEventListener(
|
||||||
|
'touchmove',
|
||||||
|
(e) => {
|
||||||
|
// 只有点击蒙版背景（不是内容区域）才阻止滚动
|
||||||
|
if (e.target === mask) {
|
||||||
|
e.preventDefault(); // 阻止默认触摸滚动行为
|
||||||
|
e.stopPropagation(); // 阻止事件冒泡
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ passive: false }
|
||||||
|
); // passive: false 必须，否则 preventDefault 无效
|
||||||
|
|
||||||
|
const allVideos = document.querySelectorAll('.right-video');
|
||||||
|
// 停止所有视频播放
|
||||||
|
function stopAllVideos() {
|
||||||
|
allVideos.forEach((video) => {
|
||||||
|
video.pause();
|
||||||
|
video.style.display = 'none';
|
||||||
|
// 显示对应图片
|
||||||
|
const img = video.parentElement.querySelector('.right-img');
|
||||||
|
if (img) img.style.display = 'block';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滚动切换图片/视频（核心逻辑）
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
const productRights = document.querySelectorAll('.product-right');
|
||||||
|
let activeVideo = null;
|
||||||
|
// 找出当前在视口中的视频容器
|
||||||
|
productRights.forEach((rightContainer) => {
|
||||||
|
const img = rightContainer.querySelector('.right-img');
|
||||||
|
const video = rightContainer.querySelector('.right-video');
|
||||||
|
const videoSrc = video.src.trim()
|
||||||
|
if (!img || !video) return;
|
||||||
|
if(!videoSrc) return;
|
||||||
|
const rect = rightContainer.getBoundingClientRect();
|
||||||
|
// 视口判断：容器进入视口50%以上视为活跃
|
||||||
|
const isInView =
|
||||||
|
rect.top < window.innerHeight * 0.7 &&
|
||||||
|
rect.bottom > window.innerHeight * 0.3;
|
||||||
|
|
||||||
|
if (isInView) {
|
||||||
|
activeVideo = video;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理活跃视频
|
||||||
|
if (activeVideo) {
|
||||||
|
stopAllVideos(); // 先停止其他视频
|
||||||
|
const img = activeVideo.parentElement.querySelector('.right-img');
|
||||||
|
img.style.display = 'none';
|
||||||
|
activeVideo.style.display = 'block';
|
||||||
|
|
||||||
|
// 自动播放（兼容原生控制栏，用户手动暂停后不会强制播放）
|
||||||
|
if (activeVideo.paused) {
|
||||||
|
activeVideo.play().catch((err) => {
|
||||||
|
console.log('视频播放失败（浏览器限制）：', err);
|
||||||
|
// 播放失败时回退到图片
|
||||||
|
activeVideo.style.display = 'none';
|
||||||
|
img.style.display = 'block';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
stopAllVideos(); // 无活跃视频时停止所有播放
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
if (typeof Swiper === 'undefined') {
|
||||||
|
console.error('Swiper加载失败，请刷新页面重试');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
swiper = new Swiper('.auto-swiper-container', {
|
||||||
|
autoplay: {
|
||||||
|
delay: 3000, // 3秒切换
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
|
loop: false,
|
||||||
|
slidesPerView: 1,
|
||||||
|
spaceBetween: 0,
|
||||||
|
// 启用分页指示标（核心配置）
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination', // 对应 HTML 中的指示标容器
|
||||||
|
clickable: true, // 允许点击指示标切换
|
||||||
|
// dynamicBullets: true, // 动态指示标（当前激活放大）
|
||||||
|
//dynamicMainBullets: 3, // 动态模式显示3个核心指示标
|
||||||
|
},
|
||||||
|
navigation: false,
|
||||||
|
scrollbar: false,
|
||||||
|
on: {
|
||||||
|
resize: function () {
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
swiper.update();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化时触发滚动事件，确保状态正确
|
||||||
|
window.dispatchEvent(new Event('scroll'));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
{/block}
|
||||||
@@ -32,6 +32,8 @@ class CreateSysBannerItem extends Migrator
|
|||||||
$table->addColumn('banner_id', 'integer', ['null' => false, 'comment' => '所属Banner ID'])
|
$table->addColumn('banner_id', 'integer', ['null' => false, 'comment' => '所属Banner ID'])
|
||||||
->addColumn('title', 'string', ['limit' => 256, 'null' => false, 'comment' => '标题'])
|
->addColumn('title', 'string', ['limit' => 256, 'null' => false, 'comment' => '标题'])
|
||||||
->addColumn('title_txt_color', 'string', ['limit' => 7, 'null' => false, 'default' => '', 'comment' => '标题文本颜色'])
|
->addColumn('title_txt_color', 'string', ['limit' => 7, 'null' => false, 'default' => '', 'comment' => '标题文本颜色'])
|
||||||
|
->addColumn('short_title', 'string', ['limit' => 255, 'null' => true, 'comment' => 'banner简称'])
|
||||||
|
->addColumn('short_title_txt_color', 'string', ['limit' => 7, 'null' => true, 'comment' => 'banner简称文本颜色'])
|
||||||
->addColumn('desc', MysqlAdapter::PHINX_TYPE_TEXT, ['null' => true, 'default' => null, 'comment' => '描述'])
|
->addColumn('desc', MysqlAdapter::PHINX_TYPE_TEXT, ['null' => true, 'default' => null, 'comment' => '描述'])
|
||||||
->addColumn('desc_txt_color', 'string', ['limit' => 7, 'null' => false, 'default' => '', 'comment' => '描述文本颜色'])
|
->addColumn('desc_txt_color', 'string', ['limit' => 7, 'null' => false, 'default' => '', 'comment' => '描述文本颜色'])
|
||||||
->addColumn('type', 'string', ['limit' => 16, 'null' => false, 'comment' => '类型: image为图片, video为视频'])
|
->addColumn('type', 'string', ['limit' => 16, 'null' => false, 'comment' => '类型: image为图片, video为视频'])
|
||||||
|
|||||||
@@ -1,54 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
$secret_key = 'Aa-1221';
|
|
||||||
|
|
||||||
// check for POST request
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] != 'POST') {
|
|
||||||
throw new \Exception('FAILED - not POST - '. $_SERVER['REQUEST_METHOD']);
|
|
||||||
}
|
|
||||||
|
|
||||||
// get content type
|
|
||||||
$content_type = isset($_SERVER['CONTENT_TYPE']) ? strtolower(trim($_SERVER['CONTENT_TYPE'])) : '';
|
|
||||||
|
|
||||||
if ($content_type != 'application/json') {
|
|
||||||
throw new \Exception('FAILED - not application/json - '. $content_type);
|
|
||||||
}
|
|
||||||
|
|
||||||
// get payload
|
|
||||||
$payload = trim(file_get_contents("php://input"));
|
|
||||||
|
|
||||||
if (empty($payload)) {
|
|
||||||
throw new \Exception('FAILED - no payload');
|
|
||||||
}
|
|
||||||
|
|
||||||
// get header signature
|
|
||||||
$header_signature = isset($_SERVER['HTTP_X_GITEA_SIGNATURE']) ? $_SERVER['HTTP_X_GITEA_SIGNATURE'] : '';
|
|
||||||
|
|
||||||
if (empty($header_signature)) {
|
|
||||||
throw new \Exception('FAILED - header signature missing');
|
|
||||||
}
|
|
||||||
|
|
||||||
// calculate payload signature
|
|
||||||
$payload_signature = hash_hmac('sha256', $payload, $secret_key, false);
|
|
||||||
|
|
||||||
// check payload signature against header signature
|
|
||||||
if ($header_signature !== $payload_signature) {
|
|
||||||
throw new \Exception('FAILED - payload signature');
|
|
||||||
}
|
|
||||||
|
|
||||||
// convert json to array
|
|
||||||
$decoded = json_decode($payload, true);
|
|
||||||
|
|
||||||
// check for json decode errors
|
|
||||||
if (json_last_error() !== JSON_ERROR_NONE) {
|
|
||||||
throw new \Exception('FAILED - json decode - '. json_last_error());
|
|
||||||
}
|
|
||||||
|
|
||||||
exec('git pull origin dev --rebase 2>&1', $result);
|
|
||||||
|
|
||||||
var_export($result);exit;
|
|
||||||
} catch (\Throwable $th) {
|
|
||||||
var_export($th->getMessage());
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,320 @@
|
|||||||
|
/* 核心模块：固定90%宽度（PC端），优化移动端边距 */
|
||||||
|
.advantage-section {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 4rem 0 3rem 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
height: auto !important;
|
||||||
|
min-height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题容器：恢复原有居中样式 */
|
||||||
|
.advantage-section__title {
|
||||||
|
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表容器：强制设置高度相关属性，确保内容正常显示 */
|
||||||
|
.advantage-section__list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: clamp(0.1rem, 0.3vw, 0.8rem);
|
||||||
|
width: 100% !important;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow: visible !important; /* 改为visible确保内容显示 */
|
||||||
|
padding: 0 !important;
|
||||||
|
/* 强制设置高度相关属性 */
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 1px !important; /* 确保容器至少有高度 */
|
||||||
|
position: relative !important; /* 建立BFC */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片包裹容器：确保为块级元素并继承高度 */
|
||||||
|
.advantage-card-wrap {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 1px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片核心：高度自适应内容 */
|
||||||
|
.advantage-card {
|
||||||
|
flex: 0 0 calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5);
|
||||||
|
min-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5);
|
||||||
|
max-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
height: auto !important; /* 高度自适应内容 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片容器：设置为1:1比例 */
|
||||||
|
.advantage-card__img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1; /* 1:1图片比例 */
|
||||||
|
object-fit: cover;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
display: block;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字区域：flex垂直分布，确保标题和描述都垂直居中 */
|
||||||
|
.advantage-card__content {
|
||||||
|
width: 100%;
|
||||||
|
padding: clamp(0.3rem, 0.4vw, 0.75rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题容器：水平居中+内部两端对齐，同时垂直居中 */
|
||||||
|
.advantage-card__heading-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: clamp(0.3rem, 0.5vw, 0.5rem);
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片标题：居左显示 */
|
||||||
|
.advantage-card__heading {
|
||||||
|
font-size: clamp(0.85rem, 1.5vw, 1.4rem);
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.3;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片标题右侧箭头：自适应大小，与标题协调 */
|
||||||
|
.card-arrow {
|
||||||
|
color: #409eff;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
/* 箭头大小根据标题字体大小自适应 */
|
||||||
|
width: clamp(1rem, 1.8vw, 1.5rem);
|
||||||
|
height: clamp(1rem, 1.8vw, 1.5rem);
|
||||||
|
font-size: clamp(0.7rem, 1.2vw, 1.1rem);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片hover时箭头动画 */
|
||||||
|
.advantage-card:hover .card-arrow {
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述文字：水平+垂直居中，与标题容器对齐 */
|
||||||
|
.advantage-card__description {
|
||||||
|
font-size: clamp(0.6rem, 0.9vw, 0.9rem);
|
||||||
|
color: #78787a;
|
||||||
|
line-height: 1.2;
|
||||||
|
white-space: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 80%;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片hover效果 */
|
||||||
|
.advantage-card:hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 箭头容器：自适应尺寸 */
|
||||||
|
.arrow {
|
||||||
|
position: relative;
|
||||||
|
/* 箭头尺寸跟随card-arrow自适应 */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 箭头线条基础样式：自适应粗细 */
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: clamp(0.05rem, 0.1vw, 0.1rem);
|
||||||
|
/* 线条粗细自适应 */
|
||||||
|
height: clamp(0.08rem, 0.15vw, 0.12rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右箭头：自适应长度 */
|
||||||
|
.arrow-right::before {
|
||||||
|
width: clamp(0.3rem, 0.7vw, 0.55rem);
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translateY(-50%) rotate(45deg);
|
||||||
|
transform-origin: right center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right::after {
|
||||||
|
width: clamp(0.3rem, 0.7vw, 0.55rem);
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translateY(-50%) rotate(-45deg);
|
||||||
|
transform-origin: right center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左箭头：自适应长度 */
|
||||||
|
.arrow-left::before {
|
||||||
|
width: clamp(0.3rem, 0.7vw, 0.55rem);
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%) rotate(-45deg);
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-left::after {
|
||||||
|
width: clamp(0.3rem, 0.7vw, 0.55rem);
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%) rotate(45deg);
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPad Pro适配：和移动端一样一行展示2个，最后一个隐藏，字体放大 */
|
||||||
|
@media (max-width: 1024px) and (min-width: 768px) {
|
||||||
|
.advantage-section__list {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card-wrap {
|
||||||
|
width: calc(50% - 7.5px) !important;
|
||||||
|
float: left !important;
|
||||||
|
margin: 0 0 15px 0 !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card-wrap:nth-child(odd) {
|
||||||
|
margin-right: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
flex: none !important;
|
||||||
|
height: auto !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 只显示前4个卡片，最后一个隐藏 */
|
||||||
|
.advantage-card-wrap:nth-child(n+5) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__content {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: clamp(1rem, 3vw, 1.5rem) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__img {
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
max-height: 330px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端字体放大 */
|
||||||
|
.advantage-card__heading {
|
||||||
|
font-size: clamp(1.1rem, 2vw, 1.6rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__description {
|
||||||
|
font-size: clamp(0.85rem, 1.3vw, 1.1rem);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-arrow {
|
||||||
|
width: clamp(1.2rem, 2vw, 1.7rem);
|
||||||
|
height: clamp(1.2rem, 2vw, 1.7rem);
|
||||||
|
font-size: clamp(0.9rem, 1.5vw, 1.3rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端布局调整：彻底修复高度为0问题 */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
/* 使用block布局+浮动确保高度正常 */
|
||||||
|
.advantage-section__list {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片包裹容器：使用浮动实现一行2个 */
|
||||||
|
.advantage-card-wrap {
|
||||||
|
width: calc(50% - 7.5px) !important;
|
||||||
|
float: left !important;
|
||||||
|
margin: 0 0 15px 0 !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 偶数个卡片添加右边距 */
|
||||||
|
.advantage-card-wrap:nth-child(odd) {
|
||||||
|
margin-right: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片尺寸调整 */
|
||||||
|
.advantage-card {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
flex: none !important;
|
||||||
|
height: auto !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 只显示前4个卡片 */
|
||||||
|
.advantage-card-wrap:nth-child(n+5) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__img {
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__content {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: clamp(1rem, 3vw, 1.5rem) 0; /* 平板端底部内边距稍大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超小屏进一步优化 */
|
||||||
|
@media (max-width: 374px) {
|
||||||
|
.advantage-card-wrap {
|
||||||
|
width: calc(50% - 5px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card-wrap:nth-child(odd) {
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
.footer {
|
||||||
|
width: 100%;
|
||||||
|
padding: 3rem 0;
|
||||||
|
}
|
||||||
|
.footer-img {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.footer-img img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1. 根字体适配：限制最小根字体为14px，从源头避免文字过小 */
|
||||||
|
html {
|
||||||
|
/* PC端（≥1024px）：1rem=16px（原尺寸） */
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端（768px~1023px）：15px→16px（过渡，最小15px） */
|
||||||
|
@media (max-width: 1023px) and (min-width: 768px) {
|
||||||
|
html {
|
||||||
|
font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端（320px~767px）：固定14px（不随屏幕缩小而变小，避免文字<12px） */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超小屏（≤320px）：仍固定14px，彻底杜绝文字过小 */
|
||||||
|
@media (max-width: 320px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
/* margin:0 !important; */
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.more {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-top: clamp(1.5rem, 3vw, 3rem);
|
||||||
|
}
|
||||||
|
.more-img {
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-size: clamp(0.6rem, 0.9vw, 0.9rem);
|
||||||
|
border-radius: clamp(0.875rem, 1.5vw, 1.125rem);
|
||||||
|
padding: clamp(0.1rem, 0.3vw, 0.2rem);
|
||||||
|
width: 5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: clamp(1.5rem, 3vw, 3rem);
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.header-img {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
79
public/static/index/mobile/css/topic_power_prodline/mask.css
Normal file
79
public/static/index/mobile/css/topic_power_prodline/mask.css
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
/* 蒙版样式 - 新增触摸事件禁止 */
|
||||||
|
.mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
overflow: hidden; /* 阻止蒙版自身滚动 */
|
||||||
|
touch-action: none; /* 禁止触摸行为 */
|
||||||
|
pointer-events: auto; /* 确保蒙版能接收事件 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 蒙版内容容器 - 新增触摸事件传递控制 */
|
||||||
|
.mask-content {
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden; /* 内容容器不滚动 */
|
||||||
|
position: relative;
|
||||||
|
animation: popIn 0.3s ease;
|
||||||
|
max-height: 90vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
pointer-events: auto; /* 确保内容区域能正常交互 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动内容容器 - 保持不变 */
|
||||||
|
.mask-scroll-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
-webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 升级：同时禁止 html 和 body 滚动（关键兼容） */
|
||||||
|
.no-scroll {
|
||||||
|
overflow: hidden !important;
|
||||||
|
position: fixed !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 其他原有样式保持不变 */
|
||||||
|
@keyframes popIn {
|
||||||
|
from {
|
||||||
|
transform: scale(0.8);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.close-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.close-btn:hover {
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
}
|
||||||
96
public/static/index/mobile/css/topic_power_prodline/nav.css
Normal file
96
public/static/index/mobile/css/topic_power_prodline/nav.css
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
.nav-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 90%;
|
||||||
|
/* 平板/PC端限制最大宽度 */
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 3.125rem;
|
||||||
|
/* 50px→3.125rem */
|
||||||
|
box-shadow: 0 0.125rem 0.9375rem rgba(0, 0, 0, 0.05);
|
||||||
|
/* 2px→0.125rem，15px→0.9375rem */
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 0.625rem 0;
|
||||||
|
/* 10px→0.625rem（原内边距不变） */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.625rem;
|
||||||
|
/* 10px→0.625rem */
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.625rem 0 1.25rem;
|
||||||
|
/* 10px→0.625rem，20px→1.25rem */
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 3rem;
|
||||||
|
/* 48px→3rem（适配14px根字体） */
|
||||||
|
max-width: 5rem;
|
||||||
|
/* 80px→5rem */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item img {
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
/* 60px→3.75rem（16px基准），14px根字体下≈52.5px，仍清晰 */
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
/* 12px→0.75rem */
|
||||||
|
position: absolute;
|
||||||
|
top: -3.125rem;
|
||||||
|
/* -50px→-3.125rem（14px根字体下≈43.75px，超出效果不变） */
|
||||||
|
transform: translateY(0.625rem);
|
||||||
|
/* 10px→0.625rem */
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover img {
|
||||||
|
transform: translateY(0.3125rem);
|
||||||
|
/* 5px→0.3125rem */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:active img {
|
||||||
|
transform: translateY(0.4375rem);
|
||||||
|
/* 7px→0.4375rem */
|
||||||
|
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 关键：文字单独控制，确保最小12px */
|
||||||
|
.nav-item p {
|
||||||
|
margin: 0;
|
||||||
|
/* PC端：15px→0.9375rem（16px根字体） */
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
color: #37373e;
|
||||||
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
top: 1.125rem;
|
||||||
|
/* 18px→1.125rem */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding: 0 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端文字：14px→0.9375rem（15px根字体下=14px） */
|
||||||
|
@media (max-width: 1023px) and (min-width: 768px) {
|
||||||
|
.nav-item p {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端文字：强制12px（用px兜底，避免rem计算后过小） */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.nav-item p {
|
||||||
|
font-size: 12px;
|
||||||
|
/* 直接用px固定最小尺寸，优先级最高 */
|
||||||
|
font-size: clamp(12px, 0.857rem, 0.9375rem);
|
||||||
|
/* 增强版：最小12px，默认0.857rem（14px根字体下≈12px），最大0.9375rem */
|
||||||
|
}
|
||||||
|
}
|
||||||
184
public/static/index/mobile/css/topic_power_prodline/product.css
Normal file
184
public/static/index/mobile/css/topic_power_prodline/product.css
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
.product-box {
|
||||||
|
background: #fff;
|
||||||
|
padding: clamp(1.5rem, 3vw, 3rem) 0;
|
||||||
|
/* 产品块之间留间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-bottom: clamp(1.5rem, 3vw, 3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title-h2 {
|
||||||
|
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
||||||
|
/* padding-top: clamp(1.5rem, 3vw, 3rem); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title-p {
|
||||||
|
font-size: clamp(0.875rem, 1.5vw, 1.125rem);
|
||||||
|
color: #646464;
|
||||||
|
margin-top: clamp(0.5rem, 1vw, 0.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 容器布局：两个产品通用 */
|
||||||
|
.product-container {
|
||||||
|
display: flex;
|
||||||
|
gap: clamp(0.4rem, 1vw, 0.71rem);
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧容器：两个产品通用 */
|
||||||
|
.product-left {
|
||||||
|
flex: 1.8;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: block;
|
||||||
|
/* 取消图片底部空隙 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */
|
||||||
|
.product-img-hover {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* 两个产品悬浮图宽度相同 */
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img-hover img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
/* 图片尺寸100%，无区别 */
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第一个产品：悬浮图居中上移（仅定位差异） */
|
||||||
|
.product-img-1 {
|
||||||
|
top: -10%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第二个产品：悬浮图上右超出（仅定位差异） */
|
||||||
|
.product-img-2 {
|
||||||
|
top: -10%;
|
||||||
|
/* 上超出 */
|
||||||
|
transform: none;
|
||||||
|
width: 108%;
|
||||||
|
/* 取消居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧容器：两个产品通用 */
|
||||||
|
.product-right {
|
||||||
|
flex: 3.2;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
align-self: stretch;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-video {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.video-play-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
z-index: 2;
|
||||||
|
display: none; /* 默认隐藏 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 播放图标默认显示，暂停图标默认隐藏 */
|
||||||
|
.play-icon {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.pause-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .paused类时切换图标 */
|
||||||
|
.video-play-btn.paused .play-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.video-play-btn.paused .pause-icon {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 视频显示时按钮可见 */
|
||||||
|
.right-video[playing] ~ .video-play-btn,
|
||||||
|
.product-right:hover .video-play-btn {
|
||||||
|
opacity: 1;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* PC端适配：仅微调定位参数，尺寸不变 */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.product-container {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-left {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-right {
|
||||||
|
flex: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 宽度保持一致，仅调定位偏移 */
|
||||||
|
.product-img-1 {
|
||||||
|
top: -11%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img-2 {
|
||||||
|
top: -12%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超小屏适配：尺寸不变，微调定位 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.product-left {
|
||||||
|
flex: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-right {
|
||||||
|
flex: 3.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 宽度仍保持一致 */
|
||||||
|
.product-img-1 {
|
||||||
|
top: -6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img-2 {
|
||||||
|
top: -8%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,206 @@
|
|||||||
|
.product-card-container2 {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 产品卡片样式 */
|
||||||
|
.product-card2 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
flex: 1 1 50%;
|
||||||
|
/* 一行2个 */
|
||||||
|
min-width: 180px;
|
||||||
|
/* 保证图片显示 */
|
||||||
|
/* max-width: calc(50% - 10px); */
|
||||||
|
/* 适配gap */
|
||||||
|
height: 240px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||||
|
display: flex;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 核心修改：文字区域相对于父盒子居中，内部内容左对齐 */
|
||||||
|
.product-text2 {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
/* 文字区域整体水平居中（相对于product-card1） */
|
||||||
|
justify-content: center;
|
||||||
|
/* 文字区域整体垂直居中（相对于product-card1） */
|
||||||
|
text-align: left;
|
||||||
|
/* 内部文字左对齐 */
|
||||||
|
min-width: 70px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内部内容容器：统一承载标题、描述、链接，确保左对齐一致性 */
|
||||||
|
.product-text-content2 {
|
||||||
|
width: 100%;
|
||||||
|
/* 继承product-text的宽度，确保左对齐范围完整 */
|
||||||
|
max-width: 280px;
|
||||||
|
/* 新增：限制最大宽度，避免PC端父容器过宽时内容排版松散 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题：超出一行显示省略号（左对齐） */
|
||||||
|
.product-card-title2 {
|
||||||
|
font-size: clamp(12px, 2vw, 18px);
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
/* 超出一行省略号核心样式 */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
|
/* 基于内部容器左对齐，省略号生效 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述：超出2行显示省略号（左对齐） */
|
||||||
|
.product-card-desc2 {
|
||||||
|
font-size: clamp(12px, 1.8vw, 14px);
|
||||||
|
color: #656565;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
/* 超出2行显示省略号核心样式 */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
white-space: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
|
/* 基于内部容器左对齐 */
|
||||||
|
line-height: 1.4;
|
||||||
|
/* 优化行高，2行高度适中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片容器：确保移动端显示 */
|
||||||
|
.product-card-img2 {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 70px;
|
||||||
|
/* 强制保留图片区域，避免被挤压 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-img2 img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 144px;
|
||||||
|
min-height: 80px;
|
||||||
|
object-fit: contain;
|
||||||
|
/* 保持图片比例完整，不拉伸 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标：左对齐（基于内部容器） */
|
||||||
|
.product-card-link2 {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
/* 图标左对齐 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-link2 img {
|
||||||
|
width: clamp(60px, 4vw, 76px);
|
||||||
|
margin: 0;
|
||||||
|
/* 清除居中margin */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hover效果 */
|
||||||
|
.product-card2:hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：平板端（768px ~ 1023px） */
|
||||||
|
@media (max-width: 1023px) and (min-width: 768px) {
|
||||||
|
.product-card2 {
|
||||||
|
height: 224px;
|
||||||
|
min-width: 170px;
|
||||||
|
}
|
||||||
|
.product-text2 {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.product-card-img2 img {
|
||||||
|
max-height: 128px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：移动端（≤767px） */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.product-card-box2 {
|
||||||
|
margin-top: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card2 {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-container2 {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card2 {
|
||||||
|
height: 208px;
|
||||||
|
min-width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-img2 img {
|
||||||
|
max-height: 120px;
|
||||||
|
min-height: 72px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：小屏手机（≤375px） */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.product-card2 {
|
||||||
|
height: 192px;
|
||||||
|
min-width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 强制文字最小12px，保证可读性 */
|
||||||
|
.product-card-title2,
|
||||||
|
.product-card-desc2 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-img2 img {
|
||||||
|
max-height: 104px;
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card2 {
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-link2 img {
|
||||||
|
width: 40px;
|
||||||
|
/* 固定图标尺寸，节省空间 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：超小屏手机（≤320px） */
|
||||||
|
@media (max-width: 320px) {
|
||||||
|
.product-card2 {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-text2 {
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-img2 {
|
||||||
|
min-width: 60px;
|
||||||
|
/* 缩小图片区域最小宽度，平衡文字空间 */
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,284 @@
|
|||||||
|
/* 容器布局：通用基础样式（仅宽度、外边距，不涉及高度） */
|
||||||
|
.product-card-box {
|
||||||
|
width: 90%;
|
||||||
|
margin: clamp(1rem, 2vw, 1.5rem) auto 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-container {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow: visible !important; /* 改为visible，显示所有内容 */
|
||||||
|
padding: 0 clamp(0.2rem, 0.6vw, 0.3rem);
|
||||||
|
height: auto !important; /* 高度自适应内容 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片包裹容器：确保不独占一行 */
|
||||||
|
.product-card-wrap {
|
||||||
|
display: contents; /* 让包裹容器不影响布局 */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ######################################################################### */
|
||||||
|
/* 移动端+平板样式（max-width: 1023px）- 后续修改仅改这里 */
|
||||||
|
/* ######################################################################### */
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
/* 卡片容器：移动端+平板特有 - 改为wrap换行，一行2个，高度自适应 */
|
||||||
|
.product-card-container {
|
||||||
|
align-items: flex-start; /* 改为flex-start，避免拉伸 */
|
||||||
|
flex-wrap: wrap !important; /* 强制开启换行 */
|
||||||
|
justify-content: flex-start !important; /* 左对齐 */
|
||||||
|
gap: clamp(0.5rem, 1vw, 1rem) !important; /* 设置间距 */
|
||||||
|
padding: 0 clamp(0.2rem, 0.6vw, 0.3rem) clamp(1rem, 2vw, 1.5rem) !important;
|
||||||
|
height: auto !important; /* 高度自适应内容 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片包裹容器：移动端+平板适配 */
|
||||||
|
.product-card-wrap {
|
||||||
|
display: block !important;
|
||||||
|
width: calc(50% - clamp(0.25rem, 0.5vw, 0.5rem)) !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
height: auto !important; /* 高度自适应 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片核心：移动端+平板改为一行2个，高度自适应内容 */
|
||||||
|
.product-card {
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
border-radius: clamp(0.375rem, 1vw, 0.5rem);
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100% !important; /* 卡片宽度100%，由包裹容器控制 */
|
||||||
|
flex: none;
|
||||||
|
box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem)
|
||||||
|
clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05);
|
||||||
|
margin: 0 !important; /* 移除margin，用gap控制间距 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto !important; /* 高度自适应内容 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片hover效果：移动端+平板特有 */
|
||||||
|
.product-card:hover {
|
||||||
|
transform: scale(clamp(1.01, 1.02, 1.03));
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片容器：移动端+平板固定占比 */
|
||||||
|
.product-card-img {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
flex: 0 0 auto; /* 改为auto，高度自适应 */
|
||||||
|
aspect-ratio: 3 / 2.8; /* 保持图片比例 */
|
||||||
|
margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 产品图片：移动端+平板特有 */
|
||||||
|
.product-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字容器：移动端+平板高度自适应 */
|
||||||
|
.product-card-text {
|
||||||
|
flex: 1 1 auto; /* 改为flex:1，高度自适应内容 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
padding-right: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
height: auto !important; /* 高度自适应 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题样式：移动端+平板特有，高度自适应 */
|
||||||
|
.product-card-title {
|
||||||
|
font-size: clamp(0.8rem, 1.3vw, 1.2rem);
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
height: auto !important; /* 移除固定高度 */
|
||||||
|
margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem); /* 添加间距 */
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述样式：移动端+平板高度自适应 */
|
||||||
|
.product-card-desc {
|
||||||
|
font-size: clamp(0.7rem, 1.1vw, 0.9rem);
|
||||||
|
color: #656565;
|
||||||
|
word-break: break-word;
|
||||||
|
height: auto !important; /* 移除固定高度 */
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标容器：移动端+平板高度自适应，添加较小的底部内边距 */
|
||||||
|
.product-card-link {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 0 0 auto; /* 改为auto，高度自适应 */
|
||||||
|
padding: clamp(0.5rem, 1vw, 0.8rem); /* 减小上下内边距 */
|
||||||
|
padding-bottom: clamp(1rem, 3vw, 1.5rem); /* 更小的底部内边距（约12px） */
|
||||||
|
padding-left: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
height: auto !important; /* 高度自适应 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标：移动端+平板特有 */
|
||||||
|
.product-card-link img {
|
||||||
|
width: clamp(2.5rem, 5vw, 4.5rem);
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端（768px-1023px）补充样式 */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.product-card-img {
|
||||||
|
aspect-ratio: 3 / 2.8; /* 保持图片比例 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-link img {
|
||||||
|
width: clamp(5rem, 4vw, 6rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端字体稍大 */
|
||||||
|
.product-card-title {
|
||||||
|
font-size: clamp(1rem, 1.5vw, 1.4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-desc {
|
||||||
|
font-size: clamp(0.85rem, 1.2vw, 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端底部内边距稍大但仍较小 */
|
||||||
|
.product-card-link {
|
||||||
|
padding-bottom: clamp(1rem, 3vw, 1.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ######################################################################### */
|
||||||
|
/* PC端样式（单独配置，min-width: 1024px）- 后续修改仅改这里 */
|
||||||
|
/* ######################################################################### */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
/* 卡片容器：PC端特有，高度自适应内容 */
|
||||||
|
.product-card-container {
|
||||||
|
align-items: flex-start; /* 改为flex-start，避免拉伸 */
|
||||||
|
height: auto !important; /* 高度自适应内容 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片包裹容器：PC端适配 */
|
||||||
|
.product-card-wrap {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片核心：PC端高度自适应内容 */
|
||||||
|
.product-card {
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
border-radius: clamp(0.375rem, 1vw, 0.5rem);
|
||||||
|
cursor: pointer;
|
||||||
|
width: calc(25% - clamp(0.3rem, 0.5vw, 0.36rem));
|
||||||
|
flex: none;
|
||||||
|
box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem)
|
||||||
|
clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05);
|
||||||
|
margin: 0 clamp(0.16rem, 0.24vw, 0.2rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto !important; /* 高度自适应内容 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片hover效果：PC端特有 */
|
||||||
|
.product-card:hover {
|
||||||
|
transform: scale(clamp(1.01, 1.02, 1.03));
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片容器：PC端高度自适应 */
|
||||||
|
.product-card-img {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
flex: 0 0 auto; /* 改为auto，高度自适应 */
|
||||||
|
aspect-ratio: 3 / 2.8; /* 保持图片比例 */
|
||||||
|
margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 产品图片：PC端特有 */
|
||||||
|
.product-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字容器：PC端高度自适应 */
|
||||||
|
.product-card-text {
|
||||||
|
flex: 1 1 auto; /* 改为flex:1，高度自适应内容 */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
padding-right: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
display: flex; /* 确保flex布局 */
|
||||||
|
height: auto !important; /* 高度自适应 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题样式：PC端特有，高度自适应 */
|
||||||
|
.product-card-title {
|
||||||
|
font-size: clamp(0.8rem, 1.3vw, 1.2rem);
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
height: auto !important; /* 高度自适应 */
|
||||||
|
margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem); /* 添加间距 */
|
||||||
|
line-height: 1.2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述样式：PC端高度自适应 */
|
||||||
|
.product-card-desc {
|
||||||
|
font-size: clamp(0.7rem, 1.1vw, 0.9rem);
|
||||||
|
color: #656565;
|
||||||
|
word-break: break-word;
|
||||||
|
height: auto !important; /* 高度自适应 */
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标容器：PC端高度自适应，添加较小的底部内边距 */
|
||||||
|
.product-card-link {
|
||||||
|
width: 100%;
|
||||||
|
display: flex; /* 确保flex布局 */
|
||||||
|
align-items: center;
|
||||||
|
flex: 0 0 auto; /* 改为auto，高度自适应 */
|
||||||
|
padding-left: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
padding-bottom: clamp(1rem, 3vw, 1.5rem) ; /* 更小的底部内边距 */
|
||||||
|
height: auto !important; /* 高度自适应 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标：PC端特有 */
|
||||||
|
.product-card-link img {
|
||||||
|
width: clamp(2.5rem, 5vw, 4.5rem);
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
.swiper-container {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
/* 轮播容器 - 核心：基于视口高度自适应 */
|
||||||
|
.auto-swiper-container {
|
||||||
|
width: 100%;
|
||||||
|
/* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */
|
||||||
|
margin-bottom: 5.625rem;
|
||||||
|
max-height: 900px;
|
||||||
|
min-height: 300px;
|
||||||
|
position: relative;
|
||||||
|
margin-top:60px;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* 轮播项 - 填充容器高度 */
|
||||||
|
.auto-swiper-slide {
|
||||||
|
width: 100%;
|
||||||
|
/*height: 100%;*/
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 图片自适应核心：填充屏幕比例高度，保持比例 */
|
||||||
|
.auto-swiper-slide img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; /* 替换 cover 为 contain，完整显示图片 */
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播容器保持相对定位 */
|
||||||
|
.auto-swiper-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播容器保持相对定位 */
|
||||||
|
.auto-swiper-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 指示标容器：居中排列 */
|
||||||
|
.swiper-pagination {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%; /* 距离底部的距离，可调整 */
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
/* width:100%;
|
||||||
|
display: flex; */
|
||||||
|
/* justify-content: center; */
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 激活状态：白色长条 */
|
||||||
|
.swiper-pagination-bullet-active {
|
||||||
|
background:#fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 未激活状态：黑色透明圆点（可调整透明度） */
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px !important;
|
||||||
|
height: 16px !important;
|
||||||
|
border-radius: 8px;
|
||||||
|
/*background: #555;*/
|
||||||
|
margin: 0 5px;
|
||||||
|
/*opacity: 0.8;*/
|
||||||
|
border: 1px solid #fff;
|
||||||
|
/*cursor: pointer;*/
|
||||||
|
}
|
||||||
|
|
||||||
BIN
public/static/index/mobile/images/jiant.png
Normal file
BIN
public/static/index/mobile/images/jiant.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
BIN
public/static/index/mobile/images/ljgd.png
Normal file
BIN
public/static/index/mobile/images/ljgd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
267
public/static/index/pc/css/topic_power_prodline/advantage.css
Normal file
267
public/static/index/pc/css/topic_power_prodline/advantage.css
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
/* 核心模块：固定90%宽度（PC端），优化移动端边距 */
|
||||||
|
.advantage-section {
|
||||||
|
/* width: 80%; */
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 1690px;
|
||||||
|
padding-bottom: 105px;
|
||||||
|
/* padding-left: 115px; */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题容器：恢复原有居中样式 */
|
||||||
|
.advantage-section__title {
|
||||||
|
font-size: 50px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.2;
|
||||||
|
/* margin-bottom: clamp(1.5rem, 2vw, 2.5rem); */
|
||||||
|
padding-top: 55px;
|
||||||
|
padding-bottom: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表容器：优化gap，确保移动端5列不溢出 */
|
||||||
|
.advantage-section__list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
/* gap: clamp(0.1rem, 0.3vw, 0.8rem); */
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 新增：卡片外层容器（专门控制圆角，避免缩放时丢失） */
|
||||||
|
.advantage-card-wrap {
|
||||||
|
flex: 0 0 calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5);
|
||||||
|
/* min-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5);
|
||||||
|
max-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); */
|
||||||
|
width: 330px;
|
||||||
|
height:470px;
|
||||||
|
border-radius: 0.5rem; /* 外层容器承担圆角 */
|
||||||
|
overflow: hidden; /* 裁剪内部缩放的卡片 */
|
||||||
|
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); /* 阴影移到外层，避免缩放时阴影变形 */
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
aspect-ratio: 1 / 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片核心：优化宽高比和尺寸计算 */
|
||||||
|
.advantage-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
/* 关键修复：添加will-change优化渲染，移除原圆角和阴影（移到外层） */
|
||||||
|
will-change: transform; /* 告知浏览器准备变换，避免圆角渲染异常 */
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__img {
|
||||||
|
width: 100%;
|
||||||
|
height: 72%;
|
||||||
|
/* PC端图片占比提升至72%，文字区域压缩 */
|
||||||
|
object-fit: cover;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字区域：flex垂直分布，确保标题和描述都垂直居中 */
|
||||||
|
.advantage-card__content {
|
||||||
|
width: 100%;
|
||||||
|
height: 28%;
|
||||||
|
/* PC端文字区域占比降至28% */
|
||||||
|
padding: clamp(0.3rem, 0.4vw, 0.75rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
/* 整体垂直居中 */
|
||||||
|
align-items: center;
|
||||||
|
/* 子元素水平居中（关键） */
|
||||||
|
/* text-align: center; */
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 4px;
|
||||||
|
/* 标题和描述之间的垂直间距，避免贴边 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题容器：水平居中+内部两端对齐，同时垂直居中 */
|
||||||
|
.advantage-card__heading-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/* 内部标题和箭头垂直对齐 */
|
||||||
|
justify-content: space-between;
|
||||||
|
/* 文字左、箭头右 */
|
||||||
|
gap: 8px;
|
||||||
|
width: 80%;
|
||||||
|
/* 限制宽度，体现居中效果 */
|
||||||
|
/* 移除底部margin，通过父容器gap控制间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片标题：居左显示 */
|
||||||
|
.advantage-card__heading {
|
||||||
|
font-size: 30px;
|
||||||
|
/* 比原尺寸放大，PC端更醒目，移动端自适应 */
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.3;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片标题右侧箭头：居右显示 */
|
||||||
|
.card-arrow {
|
||||||
|
color: #409eff;
|
||||||
|
font-size: clamp(0.7rem, 1vw, 1rem);
|
||||||
|
/* 箭头尺寸跟随标题放大，避免不协调 */
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
display: inline-block;
|
||||||
|
width: 32px;
|
||||||
|
/* 箭头宽度同步增加 */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片hover时箭头动画 */
|
||||||
|
.advantage-card:hover .card-arrow {
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述文字：水平+垂直居中，与标题容器对齐（仅添加最小高度修复对齐问题） */
|
||||||
|
.advantage-card__description {
|
||||||
|
font-size: 22px;
|
||||||
|
/* PC端描述文字略放大 */
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.2;
|
||||||
|
/* PC端行高略紧凑 */
|
||||||
|
white-space: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 80%;
|
||||||
|
/* 与标题容器宽度一致 */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
/* 最多2行，避免高度溢出 */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
/* 核心修复：固定最小高度=2行文字高度，确保1行时也占满空间 */
|
||||||
|
min-height: calc(clamp(0.6rem, 0.9vw, 0.9rem) * 2 * 1.4);
|
||||||
|
/* 确保文字垂直居中 */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: left;
|
||||||
|
margin-top:clamp(9px, 0.5vw, 18px)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片hover效果（仅保留缩放，阴影移到外层） */
|
||||||
|
.advantage-card:hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 外层容器hover时增强阴影（更自然的浮起效果） */
|
||||||
|
.advantage-card-wrap:hover {
|
||||||
|
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端适配 - 核心修改：一行2个，显示2行，隐藏第5个 */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.advantage-card:active {
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-section {
|
||||||
|
width: 95%;
|
||||||
|
/* 移动端扩大容器宽度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-section__list {
|
||||||
|
gap: 0.5rem; /* 优化间距，更美观 */
|
||||||
|
flex-wrap: wrap; /* 允许换行 */
|
||||||
|
overflow: visible; /* 取消溢出隐藏，显示多行 */
|
||||||
|
justify-content: space-between; /* 两端对齐，确保2个卡片均匀分布 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端卡片宽度：一行2个 */
|
||||||
|
.advantage-card-wrap {
|
||||||
|
flex: 0 0 calc(50% - 0.25rem); /* 50%宽度减去一半间距，避免溢出 */
|
||||||
|
min-width: calc(50% - 0.25rem);
|
||||||
|
max-width: calc(50% - 0.25rem);
|
||||||
|
aspect-ratio: 1 / 1.8;
|
||||||
|
margin-bottom: 0.5rem; /* 行与行之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏第5个卡片 */
|
||||||
|
.advantage-card-wrap:nth-child(5) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__img {
|
||||||
|
width: 330px;
|
||||||
|
height:330px;
|
||||||
|
/* height: 62%; */
|
||||||
|
/* 移动端图片占比回到62% */
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__content {
|
||||||
|
/* width: 330px;
|
||||||
|
height:150px; */
|
||||||
|
height: 38%;
|
||||||
|
/* 移动端文字区域占比回到38% */
|
||||||
|
/* padding: 0.2rem 0.15rem;
|
||||||
|
gap: 6px; */
|
||||||
|
/* 移动端间距略大，易读性更好 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端标题容器宽度放宽 */
|
||||||
|
.advantage-card__heading-wrap {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__description {
|
||||||
|
line-height: 1.2;
|
||||||
|
width: 90%;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
/* 移动端同步添加最小高度 */
|
||||||
|
min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端箭头和文字尺寸缩小 */
|
||||||
|
.card-arrow {
|
||||||
|
font-size: clamp(0.45rem, 0.7vw, 0.8rem);
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__heading {
|
||||||
|
font-size: clamp(0.6rem, 1vw, 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__description {
|
||||||
|
font-size: clamp(0.5rem, 0.8vw, 0.8rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超小屏适配 */
|
||||||
|
@media (max-width: 374px) {
|
||||||
|
.advantage-section {
|
||||||
|
width: 98%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__heading {
|
||||||
|
font-size: clamp(0.55rem, 0.9vw, 0.9rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__heading-wrap {
|
||||||
|
width: 95%;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card__description {
|
||||||
|
width: 95%;
|
||||||
|
/* 超小屏保持最小高度 */
|
||||||
|
min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
11
public/static/index/pc/css/topic_power_prodline/footer.css
Normal file
11
public/static/index/pc/css/topic_power_prodline/footer.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
.footer {
|
||||||
|
width: 100%;
|
||||||
|
padding: 3rem 0;
|
||||||
|
}
|
||||||
|
.footer-img {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.footer-img img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
79
public/static/index/pc/css/topic_power_prodline/index.css
Normal file
79
public/static/index/pc/css/topic_power_prodline/index.css
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1. 根字体适配：限制最小根字体为14px，从源头避免文字过小 */
|
||||||
|
html {
|
||||||
|
/* PC端（≥1024px）：1rem=16px（原尺寸） */
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端（768px~1023px）：15px→16px（过渡，最小15px） */
|
||||||
|
@media (max-width: 1023px) and (min-width: 768px) {
|
||||||
|
html {
|
||||||
|
font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端（320px~767px）：固定14px（不随屏幕缩小而变小，避免文字<12px） */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超小屏（≤320px）：仍固定14px，彻底杜绝文字过小 */
|
||||||
|
@media (max-width: 320px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
|
||||||
|
background: #f2f3f5;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.more {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
max-width: 1690px;
|
||||||
|
/* padding: 40px 0; */
|
||||||
|
/* padding-top: clamp(1.5rem, 3vw, 3rem); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-img {
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-size: clamp(0.6rem, 0.9vw, 0.9rem);
|
||||||
|
border-radius: clamp(0.875rem, 1.5vw, 1.125rem);
|
||||||
|
padding: clamp(0.1rem, 0.3vw, 0.2rem);
|
||||||
|
width: 5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: clamp(2.5rem, 5vw, 15rem);
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.header-img {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
|
||||||
|
}
|
||||||
91
public/static/index/pc/css/topic_power_prodline/mask.css
Normal file
91
public/static/index/pc/css/topic_power_prodline/mask.css
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
/* 蒙版样式 - 新增触摸事件禁止 */
|
||||||
|
.mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 99999;
|
||||||
|
overflow: hidden; /* 阻止蒙版自身滚动 */
|
||||||
|
touch-action: none; /* 禁止触摸行为 */
|
||||||
|
pointer-events: auto; /* 确保蒙版能接收事件 */
|
||||||
|
backdrop-filter: blur(8px); /* 模糊半径，可调整（4px-15px为宜） */
|
||||||
|
-webkit-backdrop-filter: blur(8px); /* 兼容Safari */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 蒙版内容容器 - 新增触摸事件传递控制 */
|
||||||
|
.mask-content {
|
||||||
|
width: 80%;
|
||||||
|
height: 100% !important;
|
||||||
|
padding: 3% 5%;
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden; /* 内容容器不滚动 */
|
||||||
|
position: relative;
|
||||||
|
animation: popIn 0.3s ease;
|
||||||
|
max-height: 90vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
pointer-events: auto; /* 确保内容区域能正常交互 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容滚动容器 - 禁止横向滚动，仅纵向滚动 */
|
||||||
|
.mask-scroll-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto; /* 仅纵向滚动 */
|
||||||
|
overflow-x: hidden !important; /* 强制禁止横向滚动（关键） */
|
||||||
|
width: 100%; /* 确保容器宽度不超出父级 */
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 关键：图片自适应，不撑开容器 */
|
||||||
|
.mask-scroll-content img {
|
||||||
|
max-width: 100% !important; /* 图片最大宽度=容器宽度，不溢出 */
|
||||||
|
height: auto !important; /* 保持图片宽高比，不拉伸 */
|
||||||
|
display: block; /* 消除图片底部多余空白（可选） */
|
||||||
|
object-fit: contain; /* 若图片比例特殊，完整显示图片不裁剪 */
|
||||||
|
}
|
||||||
|
/* 升级：同时禁止 html 和 body 滚动（关键兼容） */
|
||||||
|
.no-scroll {
|
||||||
|
overflow: hidden !important;
|
||||||
|
position: fixed !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 其他原有样式保持不变 */
|
||||||
|
@keyframes popIn {
|
||||||
|
from {
|
||||||
|
transform: scale(0.8);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.close-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.close-btn:hover {
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
}
|
||||||
83
public/static/index/pc/css/topic_power_prodline/nav.css
Normal file
83
public/static/index/pc/css/topic_power_prodline/nav.css
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
.nav-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between; /* 两端对齐，紧贴父容器padding */
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius:70px;
|
||||||
|
box-shadow: 0 0.125rem 0.9375rem rgba(0, 0, 0, 0.05);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-top: 170px;
|
||||||
|
margin-bottom: 78px;
|
||||||
|
overflow: visible;
|
||||||
|
padding-left: clamp(20px, 12vw, 238px);
|
||||||
|
padding-right: clamp(20px, 12vw, 238px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
flex: 0 0 auto; /* 宽度由内容决定 */
|
||||||
|
width: fit-content; /* 关键：宽度等于内容宽度 */
|
||||||
|
padding-bottom: 35px;
|
||||||
|
text-align: center;
|
||||||
|
/* 可选：添加左右内边距，避免内容贴边 */
|
||||||
|
/* padding: 0 0.5rem; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 可选：如果需要第一个和最后一个元素完全贴紧父容器padding，移除它们的左右内边距 */
|
||||||
|
.nav-item:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.nav-item:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item img {
|
||||||
|
width: 9rem;
|
||||||
|
height:9rem;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
margin-top: -70px;
|
||||||
|
transform: translateY(0.625rem);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover img {
|
||||||
|
transform: translateY(0.3125rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:active img {
|
||||||
|
transform: translateY(0.4375rem);
|
||||||
|
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #37373e;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端文字 */
|
||||||
|
@media (max-width: 1023px) and (min-width: 768px) {
|
||||||
|
.nav-item p {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端文字 */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.nav-item p {
|
||||||
|
font-size: clamp(12px, 0.857rem, 0.9375rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
169
public/static/index/pc/css/topic_power_prodline/product.css
Normal file
169
public/static/index/pc/css/topic_power_prodline/product.css
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
.product-box {
|
||||||
|
background: #fff;
|
||||||
|
/* padding: clamp(1.5rem, 3vw, 3rem) 0; */
|
||||||
|
/* 产品块之间留间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1690px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title-h2 {
|
||||||
|
/* 字体大小：小屏最小30px，大屏最大50px，中间按视口宽度自适应 */
|
||||||
|
font-size: clamp(30px, 4vw, 50px);
|
||||||
|
/* 顶部内边距：小屏最小80px，大屏最大160px，自适应缩放 */
|
||||||
|
padding-top: clamp(60px, 10vw, 110px);
|
||||||
|
/* 底部内边距：小屏最小15px，大屏最大30px，自适应缩放 */
|
||||||
|
padding-bottom: clamp(15px, 2vw, 30px);
|
||||||
|
/* 可选：限制最大宽度并居中，优化大屏显示 */
|
||||||
|
max-width: 1690px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title-p {
|
||||||
|
/* max-width: 1690px; */
|
||||||
|
font-size: clamp(16px, 2vw, 32px);
|
||||||
|
color: #646464;
|
||||||
|
padding-bottom: clamp(40px, 6vw, 110px);
|
||||||
|
/* margin: 0 auto; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 容器布局：两个产品通用 */
|
||||||
|
.product-container {
|
||||||
|
display: flex;
|
||||||
|
gap: clamp(0.4rem, 1vw, 0.71rem);
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧容器：两个产品通用 */
|
||||||
|
.product-left {
|
||||||
|
flex: 1.8;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 526px;
|
||||||
|
max-height: 680px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: block;
|
||||||
|
max-width: 526px;
|
||||||
|
max-height: 680px;
|
||||||
|
/* 取消图片底部空隙 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */
|
||||||
|
.product-img-hover {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
/* 两个产品悬浮图宽度相同 */
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img-hover img {
|
||||||
|
width: 100%;
|
||||||
|
/* 图片尺寸100%，无区别 */
|
||||||
|
height: auto;
|
||||||
|
/* max-height: 70%; */
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第一个产品：悬浮图居中上移（仅定位差异） */
|
||||||
|
.product-img-1 {
|
||||||
|
top: -10%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第二个产品：悬浮图上右超出（仅定位差异） */
|
||||||
|
.product-img-2 {
|
||||||
|
top: -10%;
|
||||||
|
/* 上超出 */
|
||||||
|
transform: none;
|
||||||
|
width: 108%;
|
||||||
|
/* 取消居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧容器：两个产品通用 */
|
||||||
|
.product-right {
|
||||||
|
flex: 3.2;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
/* object-position: center; 内容居中显示（默认值） */
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-video {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PC端适配：仅微调定位参数，尺寸不变 */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.product-container {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1690px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-left {
|
||||||
|
flex: 2;
|
||||||
|
max-width: 526px;
|
||||||
|
max-height: 680px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-right {
|
||||||
|
flex: 5;
|
||||||
|
max-width: 1150px;
|
||||||
|
max-height: 680px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 宽度保持一致，仅调定位偏移 */
|
||||||
|
.product-img-1 {
|
||||||
|
top: -11%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img-2 {
|
||||||
|
top: -12%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超小屏适配：尺寸不变，微调定位 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.product-left {
|
||||||
|
flex: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-right {
|
||||||
|
flex: 3.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 宽度仍保持一致 */
|
||||||
|
.product-img-1 {
|
||||||
|
top: -6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img-2 {
|
||||||
|
top: -8%;
|
||||||
|
}
|
||||||
|
}
|
||||||
220
public/static/index/pc/css/topic_power_prodline/product_card.css
Normal file
220
public/static/index/pc/css/topic_power_prodline/product_card.css
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
.product-card-container2 {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 产品卡片样式 */
|
||||||
|
.product-card2 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
flex: 1 1 50%;
|
||||||
|
/* 一行2个 */
|
||||||
|
min-width: 180px;
|
||||||
|
max-width: 836px;
|
||||||
|
max-height:530px;
|
||||||
|
padding: 10px 0;
|
||||||
|
padding-left: clamp(30px, 3vw, 100px); ;
|
||||||
|
|
||||||
|
/* 保证图片显示 */
|
||||||
|
/* max-width: calc(50% - 10px); */
|
||||||
|
/* 适配gap */
|
||||||
|
/* height: 240px; */
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||||
|
display: flex;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 核心修改：文字区域相对于父盒子居中，内部内容左对齐 */
|
||||||
|
.product-text2 {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
/* 文字区域整体水平居中（相对于product-card1） */
|
||||||
|
justify-content: center;
|
||||||
|
/* 文字区域整体垂直居中（相对于product-card1） */
|
||||||
|
text-align: left;
|
||||||
|
/* 内部文字左对齐 */
|
||||||
|
min-width: 70px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内部内容容器：统一承载标题、描述、链接，确保左对齐一致性 */
|
||||||
|
.product-text-content2 {
|
||||||
|
width: 100%;
|
||||||
|
/* 继承product-text的宽度，确保左对齐范围完整 */
|
||||||
|
max-width: 280px;
|
||||||
|
/* 新增：限制最大宽度，避免PC端父容器过宽时内容排版松散 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题：超出一行显示省略号（左对齐） */
|
||||||
|
.product-card-title2 {
|
||||||
|
font-size:clamp(0.8rem, 1.3vw, 1.9rem);
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
/* 超出一行省略号核心样式 */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
|
/* 基于内部容器左对齐，省略号生效 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述：超出2行显示省略号（左对齐） */
|
||||||
|
.product-card-desc2 {
|
||||||
|
font-size: clamp(1rem, 1.3vw, 1.5rem);
|
||||||
|
color: #656565;
|
||||||
|
margin-top: clamp(12px,1vw, 15px);
|
||||||
|
margin-bottom: clamp(20px,1vw, 50px);
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
/* 超出2行显示省略号核心样式 */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
white-space: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
|
/* 基于内部容器左对齐 */
|
||||||
|
line-height: 1.4;
|
||||||
|
/* 优化行高，2行高度适中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片容器：确保移动端显示 */
|
||||||
|
.product-card-img2 {
|
||||||
|
/* flex: 1; */
|
||||||
|
/* display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 70px; */
|
||||||
|
width: 100%;
|
||||||
|
/* flex:1; */
|
||||||
|
/* width:510px ;
|
||||||
|
height: 510px; */
|
||||||
|
max-width: 510px;
|
||||||
|
max-height:510px ;
|
||||||
|
/* 强制保留图片区域，避免被挤压 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-img2 img {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* object-fit: contain */
|
||||||
|
object-fit: contain;
|
||||||
|
max-width: 510px;
|
||||||
|
max-height: 510px;
|
||||||
|
/* 保持图片比例完整，不拉伸 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标：左对齐（基于内部容器） */
|
||||||
|
.product-card-link2 {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
/* 图标左对齐 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-link2 img {
|
||||||
|
max-width: 111px;
|
||||||
|
max-height: 19px;
|
||||||
|
object-fit: contain;
|
||||||
|
/* 清除居中margin */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hover效果 */
|
||||||
|
.product-card2:hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：平板端（768px ~ 1023px） */
|
||||||
|
@media (max-width: 1023px) and (min-width: 768px) {
|
||||||
|
.product-card2 {
|
||||||
|
height: 224px;
|
||||||
|
min-width: 170px;
|
||||||
|
}
|
||||||
|
.product-text2 {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.product-card-img2 img {
|
||||||
|
max-height: 128px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：移动端（≤767px） */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.product-card-box2 {
|
||||||
|
margin-top: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card2 {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-container2 {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card2 {
|
||||||
|
height: 208px;
|
||||||
|
min-width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-img2 img {
|
||||||
|
max-height: 120px;
|
||||||
|
min-height: 72px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：小屏手机（≤375px） */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.product-card2 {
|
||||||
|
height: 192px;
|
||||||
|
min-width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 强制文字最小12px，保证可读性 */
|
||||||
|
.product-card-title2,
|
||||||
|
.product-card-desc2 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-img2 img {
|
||||||
|
max-height: 104px;
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card2 {
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-link2 img {
|
||||||
|
width: 40px;
|
||||||
|
/* 固定图标尺寸，节省空间 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：超小屏手机（≤320px） */
|
||||||
|
@media (max-width: 320px) {
|
||||||
|
.product-card2 {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-text2 {
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-img2 {
|
||||||
|
min-width: 60px;
|
||||||
|
/* 缩小图片区域最小宽度，平衡文字空间 */
|
||||||
|
}
|
||||||
|
}
|
||||||
291
public/static/index/pc/css/topic_power_prodline/product_list.css
Normal file
291
public/static/index/pc/css/topic_power_prodline/product_list.css
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
/* 容器布局：通用基础样式（仅宽度、外边距，不涉及高度） */
|
||||||
|
.product-card-box {
|
||||||
|
width: 90%;
|
||||||
|
/* margin: clamp(1rem, 2vw, 1.5rem) auto 0; */
|
||||||
|
margin:0 auto;
|
||||||
|
margin-top: 40px;
|
||||||
|
max-width: 1690px;
|
||||||
|
margin-bottom:45px;
|
||||||
|
max-height: 560px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-container {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 关键修改1：增大间距值（原 clamp(0.3rem, 0.5vw, 0.36rem) → 现在放大2倍左右） */
|
||||||
|
/* gap: clamp(0.6rem, 1vw, 0.8rem); */
|
||||||
|
padding: 0; /* 保持无内边距，避免间距叠加 */
|
||||||
|
max-width: 1690px;
|
||||||
|
max-height: 560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 新增：外层容器（承载圆角、阴影、尺寸，避免缩放时圆角丢失） */
|
||||||
|
.product-card-wrap {
|
||||||
|
/* 原卡片的宽度计算逻辑移到外层 */
|
||||||
|
width: calc(25% - (clamp(0.6rem, 1vw, 0.8rem) * 3 / 4));
|
||||||
|
flex: 1;
|
||||||
|
border-radius: clamp(0.375rem, 1vw, 0.5rem); /* 外层承载圆角 */
|
||||||
|
overflow: hidden; /* 裁剪内层缩放的卡片 */
|
||||||
|
box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem) clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05); /* 外层承载阴影 */
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 410px;
|
||||||
|
max-height: 560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ######################################################################### */
|
||||||
|
/* 移动端样式（单独配置，max-width: 1023px）- 后续修改仅改这里 */
|
||||||
|
/* ######################################################################### */
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
/* 卡片容器：移动端特有 */
|
||||||
|
|
||||||
|
.product-card-container {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 外层容器移动端适配：宽高比移到外层 */
|
||||||
|
.product-card-wrap {
|
||||||
|
aspect-ratio: 3 / 4.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片核心：移动端调整（移除圆角、阴影，添加will-change） */
|
||||||
|
.product-card {
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%; /* 内层卡片占满外层容器 */
|
||||||
|
height: 100%;
|
||||||
|
flex: none;
|
||||||
|
margin: 0; /* 保持无margin，间距由gap控制 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
will-change: transform; /* 优化渲染，避免圆角异常 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片hover效果：移动端特有 */
|
||||||
|
.product-card:hover {
|
||||||
|
transform: scale(clamp(1.01, 1.02, 1.03));
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 外层容器hover增强阴影（更自然的浮起效果） */
|
||||||
|
.product-card-wrap:hover {
|
||||||
|
box-shadow: 0 clamp(0.2rem, 0.4vw, 0.25rem) clamp(0.5rem, 1vw, 0.8rem) rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片容器：移动端固定占比 */
|
||||||
|
.product-card-img {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
flex: 0 0 72%;
|
||||||
|
margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 产品图片：移动端特有 */
|
||||||
|
.product-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字容器：移动端固定占比 */
|
||||||
|
.product-card-text {
|
||||||
|
flex: 0 0 20%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
padding-right: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题样式：移动端特有 */
|
||||||
|
.product-card-title {
|
||||||
|
font-size: clamp(0.8rem, 1.3vw, 1.2rem);
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
height: 35%;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述样式：移动端固定2行高度 */
|
||||||
|
.product-card-desc {
|
||||||
|
font-size: clamp(0.7rem, 1.1vw, 0.9rem);
|
||||||
|
color: #656565;
|
||||||
|
word-break: break-word;
|
||||||
|
height: 65%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标容器：移动端固定占比 */
|
||||||
|
.product-card-link {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 0 0 10%;
|
||||||
|
padding: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标：移动端特有 */
|
||||||
|
.product-card-link img {
|
||||||
|
width: clamp(2.5rem, 5vw, 4.5rem);
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端768px以上补充样式 */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.product-card-img {
|
||||||
|
flex: 0 0 72%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-link img {
|
||||||
|
width: clamp(5rem, 4vw, 6rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ######################################################################### */
|
||||||
|
/* PC端样式（单独配置，min-width: 1024px）- 后续修改仅改这里 */
|
||||||
|
/* ######################################################################### */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
/* 卡片容器：PC端特有（高度自适应） */
|
||||||
|
.product-card-container {
|
||||||
|
align-items: stretch;
|
||||||
|
height: clamp(30vw, 35vw, 480px);
|
||||||
|
/* 关键修改3：PC端同步增大gap间距（与通用容器一致） */
|
||||||
|
gap: clamp(0.6rem, 1vw, 0.8rem);
|
||||||
|
padding: 0;
|
||||||
|
max-width: 1690px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 外层容器PC端适配：高度占满容器 */
|
||||||
|
.product-card-wrap {
|
||||||
|
height: 100%;
|
||||||
|
max-width: 410px;
|
||||||
|
max-height: 560px;
|
||||||
|
flex:1
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片核心：PC端调整（移除圆角、阴影，添加will-change） */
|
||||||
|
.product-card {
|
||||||
|
background: rgb(242, 243, 245);
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%; /* 内层卡片占满外层容器 */
|
||||||
|
height: 100%;
|
||||||
|
flex: none;
|
||||||
|
margin: 0; /* 保持无margin */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
will-change: transform; /* 优化渲染，避免圆角异常 */
|
||||||
|
max-width: 410px;
|
||||||
|
max-height: 560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片hover效果：PC端特有 */
|
||||||
|
.product-card:hover {
|
||||||
|
transform: scale(clamp(1.01, 1.02, 1.03));
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 外层容器hover增强阴影 */
|
||||||
|
.product-card-wrap:hover {
|
||||||
|
box-shadow: 0 clamp(0.2rem, 0.4vw, 0.25rem) clamp(0.5rem, 1vw, 0.8rem) rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片容器：PC端固定占比 */
|
||||||
|
.product-card-img {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
flex: 0 0 72%;
|
||||||
|
margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
|
||||||
|
max-width: 410px;
|
||||||
|
max-height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 产品图片：PC端特有 */
|
||||||
|
.product-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字容器：PC端固定占比 */
|
||||||
|
.product-card-text {
|
||||||
|
/* flex: 0 0 15%; */
|
||||||
|
display: flex; /* 补充display: flex，原代码遗漏 */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
padding-left: clamp(1.5rem, 2vw, 3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题样式：PC端特有 clamp(0.8rem, 1.3vw, 1.5rem);*/
|
||||||
|
.product-card-title {
|
||||||
|
font-size:clamp(0.8rem, 1.3vw, 1.9rem);
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 1.2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/* margin-top */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述样式：PC端固定2行高度 clamp(0.7rem, 1.1vw, 0.9rem);*/
|
||||||
|
.product-card-desc {
|
||||||
|
font-size: clamp(1rem, 1.3vw, 1.5rem);
|
||||||
|
color: #656565;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
padding-top:clamp(0.4rem, 3vw, 0.9rem) ;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标容器：PC端固定占比 */
|
||||||
|
.product-card-link {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
padding-left: clamp(1.5rem, 2vw, 3rem);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/* max-width: 111px;
|
||||||
|
max-height:19px ; */
|
||||||
|
/* 1rem=16px，3.125rem=50px */
|
||||||
|
/* padding-top: clamp(1rem, 2vw, 3.125rem);
|
||||||
|
padding-bottom: clamp(1rem, 5vw, 3.125rem); */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接图标：PC端特有 */
|
||||||
|
.product-card-link img {
|
||||||
|
/* width: clamp(2.5rem, 5vw, 4.5rem); */
|
||||||
|
max-width: 111px;
|
||||||
|
max-height: 19px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
72
public/static/index/pc/css/topic_power_prodline/swiper.css
Normal file
72
public/static/index/pc/css/topic_power_prodline/swiper.css
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
|
||||||
|
/* 轮播容器 - 核心：基于视口高度自适应 */
|
||||||
|
.auto-swiper-container {
|
||||||
|
width: 100%;
|
||||||
|
/* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */
|
||||||
|
margin-bottom: 5.625rem;
|
||||||
|
max-height: 900px;
|
||||||
|
min-height: 300px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
/* 轮播项 - 填充容器高度 */
|
||||||
|
.auto-swiper-slide {
|
||||||
|
width: 100%;
|
||||||
|
/*height: 100%;*/
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 图片自适应核心：填充屏幕比例高度，保持比例 */
|
||||||
|
.auto-swiper-slide img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; /* 替换 cover 为 contain，完整显示图片 */
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播容器保持相对定位 */
|
||||||
|
.auto-swiper-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播容器保持相对定位 */
|
||||||
|
.auto-swiper-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 指示标容器：居中排列 */
|
||||||
|
.swiper-pagination {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%; /* 距离底部的距离，可调整 */
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
/* width:100%;
|
||||||
|
display: flex; */
|
||||||
|
/* justify-content: center; */
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 激活状态：白色长条 */
|
||||||
|
.swiper-pagination-bullet-active {
|
||||||
|
background:#fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 未激活状态：黑色透明圆点（可调整透明度） */
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px !important;
|
||||||
|
height: 16px !important;
|
||||||
|
border-radius: 8px;
|
||||||
|
/*background: #555;*/
|
||||||
|
margin: 0 5px;
|
||||||
|
/*opacity: 0.8;*/
|
||||||
|
border: 1px solid #fff;
|
||||||
|
/*cursor: pointer;*/
|
||||||
|
}
|
||||||
|
|
||||||
BIN
public/static/index/pc/images/jiant.png
Normal file
BIN
public/static/index/pc/images/jiant.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
BIN
public/static/index/pc/images/ljgd.png
Normal file
BIN
public/static/index/pc/images/ljgd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Reference in New Issue
Block a user