Compare commits
2 Commits
font
...
d3268334ea
| Author | SHA1 | Date | |
|---|---|---|---|
| d3268334ea | |||
| e5228429ec |
@@ -1,26 +0,0 @@
|
||||
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
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -22,4 +22,4 @@ public/.well-known
|
||||
/vendor
|
||||
/.settings
|
||||
/.buildpath
|
||||
/.project
|
||||
/.project
|
||||
@@ -1,24 +0,0 @@
|
||||
// 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"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
208
LICENSE
Normal file
208
LICENSE
Normal file
@@ -0,0 +1,208 @@
|
||||
Apache License
|
||||
|
||||
Version 2.0, January 2004
|
||||
|
||||
http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION,
|
||||
AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction, and distribution
|
||||
as defined by Sections 1 through 9 of this document.
|
||||
|
||||
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by the copyright
|
||||
owner that is granting the License.
|
||||
|
||||
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all other entities
|
||||
that control, are controlled by, or are under common control with that entity.
|
||||
For the purposes of this definition, "control" means (i) the power, direct
|
||||
or indirect, to cause the direction or management of such entity, whether
|
||||
by contract or otherwise, or (ii) ownership of fifty percent (50%) or more
|
||||
of the outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity exercising permissions
|
||||
granted by this License.
|
||||
|
||||
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications, including
|
||||
but not limited to software source code, documentation source, and configuration
|
||||
files.
|
||||
|
||||
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical transformation
|
||||
or translation of a Source form, including but not limited to compiled object
|
||||
code, generated documentation, and conversions to other media types.
|
||||
|
||||
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or Object form,
|
||||
made available under the License, as indicated by a copyright notice that
|
||||
is included in or attached to the work (an example is provided in the Appendix
|
||||
below).
|
||||
|
||||
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object form,
|
||||
that is based on (or derived from) the Work and for which the editorial revisions,
|
||||
annotations, elaborations, or other modifications represent, as a whole, an
|
||||
original work of authorship. For the purposes of this License, Derivative
|
||||
Works shall not include works that remain separable from, or merely link (or
|
||||
bind by name) to the interfaces of, the Work and Derivative Works thereof.
|
||||
|
||||
|
||||
|
||||
"Contribution" shall mean any work of authorship, including the original version
|
||||
of the Work and any modifications or additions to that Work or Derivative
|
||||
Works thereof, that is intentionally submitted to Licensor for inclusion in
|
||||
the Work by the copyright owner or by an individual or Legal Entity authorized
|
||||
to submit on behalf of the copyright owner. For the purposes of this definition,
|
||||
"submitted" means any form of electronic, verbal, or written communication
|
||||
sent to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems, and
|
||||
issue tracking systems that are managed by, or on behalf of, the Licensor
|
||||
for the purpose of discussing and improving the Work, but excluding communication
|
||||
that is conspicuously marked or otherwise designated in writing by the copyright
|
||||
owner as "Not a Contribution."
|
||||
|
||||
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
|
||||
of whom a Contribution has been received by Licensor and subsequently incorporated
|
||||
within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of this
|
||||
License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
|
||||
no-charge, royalty-free, irrevocable copyright license to reproduce, prepare
|
||||
Derivative Works of, publicly display, publicly perform, sublicense, and distribute
|
||||
the Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of this License,
|
||||
each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
|
||||
no-charge, royalty-free, irrevocable (except as stated in this section) patent
|
||||
license to make, have made, use, offer to sell, sell, import, and otherwise
|
||||
transfer the Work, where such license applies only to those patent claims
|
||||
licensable by such Contributor that are necessarily infringed by their Contribution(s)
|
||||
alone or by combination of their Contribution(s) with the Work to which such
|
||||
Contribution(s) was submitted. If You institute patent litigation against
|
||||
any entity (including a cross-claim or counterclaim in a lawsuit) alleging
|
||||
that the Work or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses granted to You
|
||||
under this License for that Work shall terminate as of the date such litigation
|
||||
is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the Work or
|
||||
Derivative Works thereof in any medium, with or without modifications, and
|
||||
in Source or Object form, provided that You meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or Derivative Works a copy
|
||||
of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices stating that
|
||||
You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works that You distribute,
|
||||
all copyright, patent, trademark, and attribution notices from the Source
|
||||
form of the Work, excluding those notices that do not pertain to any part
|
||||
of the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its distribution,
|
||||
then any Derivative Works that You distribute must include a readable copy
|
||||
of the attribution notices contained within such NOTICE file, excluding those
|
||||
notices that do not pertain to any part of the Derivative Works, in at least
|
||||
one of the following places: within a NOTICE text file distributed as part
|
||||
of the Derivative Works; within the Source form or documentation, if provided
|
||||
along with the Derivative Works; or, within a display generated by the Derivative
|
||||
Works, if and wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and do not modify the
|
||||
License. You may add Your own attribution notices within Derivative Works
|
||||
that You distribute, alongside or as an addendum to the NOTICE text from the
|
||||
Work, provided that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and may provide
|
||||
additional or different license terms and conditions for use, reproduction,
|
||||
or distribution of Your modifications, or for any such Derivative Works as
|
||||
a whole, provided Your use, reproduction, and distribution of the Work otherwise
|
||||
complies with the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise, any
|
||||
Contribution intentionally submitted for inclusion in the Work by You to the
|
||||
Licensor shall be under the terms and conditions of this License, without
|
||||
any additional terms or conditions. Notwithstanding the above, nothing herein
|
||||
shall supersede or modify the terms of any separate license agreement you
|
||||
may have executed with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade names,
|
||||
trademarks, service marks, or product names of the Licensor, except as required
|
||||
for reasonable and customary use in describing the origin of the Work and
|
||||
reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or agreed to
|
||||
in writing, Licensor provides the Work (and each Contributor provides its
|
||||
Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied, including, without limitation, any warranties
|
||||
or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR
|
||||
A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness
|
||||
of using or redistributing the Work and assume any risks associated with Your
|
||||
exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory, whether
|
||||
in tort (including negligence), contract, or otherwise, unless required by
|
||||
applicable law (such as deliberate and grossly negligent acts) or agreed to
|
||||
in writing, shall any Contributor be liable to You for damages, including
|
||||
any direct, indirect, special, incidental, or consequential damages of any
|
||||
character arising as a result of this License or out of the use or inability
|
||||
to use the Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all other commercial
|
||||
damages or losses), even if such Contributor has been advised of the possibility
|
||||
of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing the Work
|
||||
or Derivative Works thereof, You may choose to offer, and charge a fee for,
|
||||
acceptance of support, warranty, indemnity, or other liability obligations
|
||||
and/or rights consistent with this License. However, in accepting such obligations,
|
||||
You may act only on Your own behalf and on Your sole responsibility, not on
|
||||
behalf of any other Contributor, and only if You agree to indemnify, defend,
|
||||
and hold each Contributor harmless for any liability incurred by, or claims
|
||||
asserted against, such Contributor by reason of your accepting any such warranty
|
||||
or additional liability. END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following boilerplate
|
||||
notice, with the fields enclosed by brackets "[]" replaced with your own identifying
|
||||
information. (Don't include the brackets!) The text should be enclosed in
|
||||
the appropriate comment syntax for the file format. We also recommend that
|
||||
a file or class name and description of purpose be included on the same "printed
|
||||
page" as the copyright notice for easier identification within third-party
|
||||
archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
||||
you may not use this file except in compliance with the License.
|
||||
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
||||
See the License for the specific language governing permissions and
|
||||
|
||||
limitations under the License.
|
||||
@@ -101,8 +101,6 @@ class BannerItem
|
||||
'rel_prod_cate_id',
|
||||
'title',
|
||||
'title_txt_color',
|
||||
'short_title',
|
||||
'short_title_txt_color',
|
||||
'desc',
|
||||
'desc_txt_color',
|
||||
'type',
|
||||
@@ -158,8 +156,6 @@ class BannerItem
|
||||
'rel_prod_cate_id',
|
||||
'title',
|
||||
'title_txt_color',
|
||||
'short_title',
|
||||
'short_title_txt_color',
|
||||
'desc',
|
||||
'desc_txt_color',
|
||||
'type',
|
||||
@@ -212,7 +208,7 @@ class BannerItem
|
||||
Log::error(sprintf('%s:%s %s', $th->getFile(), $th->getLine(), $th->getMessage()));
|
||||
return error('操作失败');
|
||||
}
|
||||
|
||||
|
||||
return success('操作成功');
|
||||
}
|
||||
|
||||
@@ -244,7 +240,6 @@ class BannerItem
|
||||
'banner_name' => '分类名称',
|
||||
'title' => '横幅名称',
|
||||
'title_txt_color' => '横幅名称字体颜色',
|
||||
'short_title' => '横幅简称',
|
||||
'desc' => '描述',
|
||||
'desc_txt_color' => '描述字体颜色',
|
||||
'type' => '前台显示类型',
|
||||
@@ -276,7 +271,6 @@ class BannerItem
|
||||
'banner.name' => 'banner_name',
|
||||
'item.title',
|
||||
'item.title_txt_color',
|
||||
'item.short_title',
|
||||
'item.desc',
|
||||
'item.desc_txt_color',
|
||||
'item.type',
|
||||
|
||||
@@ -342,18 +342,6 @@ class System
|
||||
'url' => (string)url('/index/topic/nas/download')
|
||||
]
|
||||
]
|
||||
],
|
||||
[
|
||||
'id' => 8,
|
||||
'name' => '电力品线专题',
|
||||
'url' => '',
|
||||
'children' => [
|
||||
[
|
||||
'id' => 81,
|
||||
'name' => '首页',
|
||||
'url' => (string)url('/index/topic/power_prodline/index')
|
||||
],
|
||||
]
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
@@ -17,24 +17,22 @@ class SysBannerItemBaseModel extends BaseModel
|
||||
|
||||
// 字段信息
|
||||
protected $schema = [
|
||||
'id' => 'int',
|
||||
'banner_id' => 'int',
|
||||
'title' => 'string',
|
||||
'title_txt_color' => 'string',
|
||||
'short_title' => 'string',
|
||||
'short_title_txt_color' => 'string',
|
||||
'desc' => 'string',
|
||||
'desc_txt_color' => 'string',
|
||||
'type' => 'string',
|
||||
'image' => 'string',
|
||||
'extra_image' => 'string',
|
||||
'video' => 'string',
|
||||
'link_to' => 'string',
|
||||
'link' => 'string',
|
||||
'sort' => 'int',
|
||||
'status' => 'int',
|
||||
'created_at' => 'datetime',
|
||||
'updated_at' => 'datetime',
|
||||
'deleted_at' => 'datetime'
|
||||
'id' => 'int',
|
||||
'banner_id' => 'int',
|
||||
'title' => 'string',
|
||||
'title_txt_color' => 'string',
|
||||
'desc' => 'string',
|
||||
'desc_txt_color' => 'string',
|
||||
'type' => 'string',
|
||||
'image' => 'string',
|
||||
'extra_image' => 'string',
|
||||
'video' => 'string',
|
||||
'link_to' => 'string',
|
||||
'link' => 'string',
|
||||
'sort' => 'int',
|
||||
'status' => 'int',
|
||||
'created_at' => 'datetime',
|
||||
'updated_at' => 'datetime',
|
||||
'deleted_at' => 'datetime'
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
<?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,12 +105,6 @@ Route::group('topic', function () {
|
||||
// 专题-Nas软件下载页
|
||||
Route::get('download', 'TopicNas/download');
|
||||
});
|
||||
|
||||
// 专题 - 电力品线
|
||||
Route::group("power_prodline", function() {
|
||||
// 专题 - 电力品线首页
|
||||
Route::get('index', 'TopicPowerProdline/index');
|
||||
});
|
||||
});
|
||||
|
||||
// 数据迁移
|
||||
|
||||
@@ -1,740 +0,0 @@
|
||||
{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=''|raw}</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">
|
||||
{$tc_three_section.title}
|
||||
</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">
|
||||
{$hc_three_section.title}
|
||||
</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">
|
||||
{$dc_three_section.title}
|
||||
</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">
|
||||
{$wc_more_section.title}
|
||||
</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">
|
||||
{$ct_more_section.title}
|
||||
</div>
|
||||
</a>
|
||||
{/notempty}
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.footer_info"}
|
||||
<!-- 底部 -->
|
||||
<div class="prodline-footer-box">
|
||||
<div class="prodline-footer-box-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}
|
||||
@@ -1,581 +0,0 @@
|
||||
{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=''|raw}</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">
|
||||
{$tc_three_section.title}
|
||||
</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">
|
||||
{$hc_three_section.title}
|
||||
</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 controls>
|
||||
您的浏览器不支持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">
|
||||
{$dc_three_section.title}
|
||||
</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">
|
||||
{$wc_more_section.title}
|
||||
</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">
|
||||
{$ct_more_section.title}
|
||||
</div>
|
||||
</a>
|
||||
{/notempty}
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.footer_info"}
|
||||
<!-- 底部 -->
|
||||
<div class="prodline-footer-box">
|
||||
<div class="prodline-footer-box-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,8 +32,6 @@ class CreateSysBannerItem extends Migrator
|
||||
$table->addColumn('banner_id', 'integer', ['null' => false, 'comment' => '所属Banner ID'])
|
||||
->addColumn('title', 'string', ['limit' => 256, 'null' => false, '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_txt_color', 'string', ['limit' => 7, 'null' => false, 'default' => '', 'comment' => '描述文本颜色'])
|
||||
->addColumn('type', 'string', ['limit' => 16, 'null' => false, 'comment' => '类型: image为图片, video为视频'])
|
||||
|
||||
@@ -73,8 +73,8 @@ class SysConfigInit extends Seeder
|
||||
["id" => 56, "group_id" => 12, "title" => "Instagram URL新窗口打开", "name" => "article_share_to_instagram.is_blank", "value" => "1", "extra" => "1:是\n0:否", "type" => "radio", "sort" => 6, "remark" => "", "created_at" => "2025-04-23 17:49:12", "updated_at" => "2025-06-12 09:55:21", "deleted_at" => null],
|
||||
["id" => 57, "group_id" => 12, "title" => "Twitter URL新窗口打开", "name" => "article_share_to_twitter.is_blank", "value" => "1", "extra" => "1:是\n0:否", "type" => "radio", "sort" => 9, "remark" => "", "created_at" => "2025-04-23 17:49:12", "updated_at" => "2025-06-12 09:55:21", "deleted_at" => null],
|
||||
["id" => 58, "group_id" => 12, "title" => "Reddit URL新窗口打开", "name" => "article_share_to_reddit.is_blank", "value" => "1", "extra" => "1:是\n0:否", "type" => "radio", "sort" => 12, "remark" => "", "created_at" => "2025-04-23 17:49:12", "updated_at" => "2025-06-12 09:55:21", "deleted_at" => null],
|
||||
["id" => 59, "group_id" => 1, "title" => "产品询盘可选国家", "name" => "optional_country_for_product_inquiry", "value" => "Afghanistan\nAlbania\nAlgeria\nAmerican Samoa\nAndorra\nAngola\nAnguilla\nAntigua and Barbuda\nArgentina\nArmenia\nAruba\nAustralia\nAustria\nAzerbaijan\nAzores\nBahamas\nBahrain\nBangladesh\nBarbados\nBelarus\nBelgium\nBelize\nBenin\nBermuda\nBhutan\nBolivia\nBosnia and Herzegovina\nBotswana\nBrazil\nBrunei\nBulgaria\nBurkina Faso\nBurundi\nCambodia\nCameroon\nCanada\nCanarias\nCape Verde\nCayman\nCentral African Republic\nChad\nChile\nChina\nColombia\nComoros\nCongo (Congo-Kinshasa)\nCongo\nCook Islands\nCosta Rica\nCote D'Ivoire\nCroatia\nCuba\nCyprus\nCzech\nDenmark\nDjibouti\nDominica\nDominican\nEcuador\nEgypt\nEl Salvador\nEquatorial Guinea\nEritrea\nEstonia\nEthiopia\nFiji\nFinland\nFrance\nFrench Guiana\nFrench Polynesia\nGabon\nGambia\nGeorgia\nGermany\nGhana\nGreece\nGreenland\nGrenada\nGuadeloupe\nGuam\nGuatemala\nGuinea\nGuinea-Bissau\nGuyana\nHaiti\nHonduras\nHungary\nIceland\nIndia\nIndonesia\nIran\nIraq\nIreland\nIsrael\nItaly\nJamaica\nJapan\nJordan\nKazakhstan\nKenya\nKiribati\nKorea (North)\nKorea (South)\nKuwait\nKyrgyzstan\nLaos\nLatvia\nLebanon\nLesotho\nLiberia\nLibya\nLiechtenstein\nLithuania\nLuxembourg\nMacedonia\nMadagascar\nMadeira\nMalawi\nMalaysia\nMaldives\nMali\nMalta\nMarshall Islands\nMartinique\nMauritania\nMauritius\nMexico\nMicronesia\nMoldova\nMonaco\nMongolia\nMetropolis\nMorocco\nMozambique\nMyanmar\nNamibia\nNauru\nNepal\nNetherlands Antilles\nNetherlands\nNew Caledonia\nNew Zealand\nNicaragua\nNiger\nNiue\nNorthern Mariana\nNorway\nOman\nPakistan\nPalau\nPalestine\nPanama\nPapua New Guinea\nParaguay\nPeru\nPhilippines\nPitcairn Islands\nPoland\nPortugal\nPuerto Rico\nQatar\nReunion\nRomania\nRussian Federation\nRwanda\nSaint Helena\nSaint Kitts-Nevis\nSaint Lucia\nSaint Vincent and the Grenadines\nSamoa\nSan Marino\nSao Tome and Principe\nSaudi Arabia\nSenegal\nSerbia\nSeychelles\nSierra Leone\nSingapore\nSlovakia\nSlovenia\nSolomon Islands\nSomalia\nSouth Africa\nSpain\nSri Lanka\nSudan\nSuriname\nSwaziland\nSweden\nSwitzerland\nSyria\nTajikistan\nTanzania\nThailand\nThe British Virgin Islands\nThe United States Virgin Islands\nTimor-Leste\nTogo\nTokelau\nTonga\nTrinidad and Tobago\nTunisia\nTurkey\nTurkmenistan\nTurks and Caicos Islands\nTuvalu\nUganda\nUkraine\nUnited Arab Emirates\nUnited Kingdom\nUnited States\nUruguay\nUzbekistan\nVanuatu\nVatican City\nVenezuela\nVietnam\nWallis and Futuna\nWestern Sahara\nYemen\nZambia\nZimbabwe", "extra" => "", "type" => "textarea", "sort" => 7, "remark" => "", "created_at" => "2025-04-27 11:10:22", "updated_at" => "2025-06-11 17:09:13", "deleted_at" => null],
|
||||
["id" => 60, "group_id" => 4, "title" => "产品询盘可选国家", "name" => "optional_country_for_product_inquiry", "value" => "Afghanistan\nAlbania\nAlgeria\nAmerican Samoa\nAndorra\nAngola\nAnguilla\nAntigua and Barbuda\nArgentina\nArmenia\nAruba\nAustralia\nAustria\nAzerbaijan\nAzores\nBahamas\nBahrain\nBangladesh\nBarbados\nBelarus\nBelgium\nBelize\nBenin\nBermuda\nBhutan\nBolivia\nBosnia and Herzegovina\nBotswana\nBrazil\nBrunei\nBulgaria\nBurkina Faso\nBurundi\nCambodia\nCameroon\nCanada\nCanarias\nCape Verde\nCayman\nCentral African Republic\nChad\nChile\nChina\nColombia\nComoros\nCongo (Congo-Kinshasa)\nCongo\nCook Islands\nCosta Rica\nCote D'Ivoire\nCroatia\nCuba\nCyprus\nCzech\nDenmark\nDjibouti\nDominica\nDominican\nEcuador\nEgypt\nEl Salvador\nEquatorial Guinea\nEritrea\nEstonia\nEthiopia\nFiji\nFinland\nFrance\nFrench Guiana\nFrench Polynesia\nGabon\nGambia\nGeorgia\nGermany\nGhana\nGreece\nGreenland\nGrenada\nGuadeloupe\nGuam\nGuatemala\nGuinea\nGuinea-Bissau\nGuyana\nHaiti\nHonduras\nHungary\nIceland\nIndia\nIndonesia\nIran\nIraq\nIreland\nIsrael\nItaly\nJamaica\nJapan\nJordan\nKazakhstan\nKenya\nKiribati\nKorea (North)\nKorea (South)\nKuwait\nKyrgyzstan\nLaos\nLatvia\nLebanon\nLesotho\nLiberia\nLibya\nLiechtenstein\nLithuania\nLuxembourg\nMacedonia\nMadagascar\nMadeira\nMalawi\nMalaysia\nMaldives\nMali\nMalta\nMarshall Islands\nMartinique\nMauritania\nMauritius\nMexico\nMicronesia\nMoldova\nMonaco\nMongolia\nMetropolis\nMorocco\nMozambique\nMyanmar\nNamibia\nNauru\nNepal\nNetherlands Antilles\nNetherlands\nNew Caledonia\nNew Zealand\nNicaragua\nNiger\nNiue\nNorthern Mariana\nNorway\nOman\nPakistan\nPalau\nPalestine\nPanama\nPapua New Guinea\nParaguay\nPeru\nPhilippines\nPitcairn Islands\nPoland\nPortugal\nPuerto Rico\nQatar\nReunion\nRomania\nRussian Federation\nRwanda\nSaint Helena\nSaint Kitts-Nevis\nSaint Lucia\nSaint Vincent and the Grenadines\nSamoa\nSan Marino\nSao Tome and Principe\nSaudi Arabia\nSenegal\nSerbia\nSeychelles\nSierra Leone\nSingapore\nSlovakia\nSlovenia\nSolomon Islands\nSomalia\nSouth Africa\nSpain\nSri Lanka\nSudan\nSuriname\nSwaziland\nSweden\nSwitzerland\nSyria\nTajikistan\nTanzania\nThailand\nThe British Virgin Islands\nThe United States Virgin Islands\nTimor-Leste\nTogo\nTokelau\nTonga\nTrinidad and Tobago\nTunisia\nTurkey\nTurkmenistan\nTurks and Caicos Islands\nTuvalu\nUganda\nUkraine\nUnited Arab Emirates\nUnited Kingdom\nUnited States\nUruguay\nUzbekistan\nVanuatu\nVatican City\nVenezuela\nVietnam\nWallis and Futuna\nWestern Sahara\nYemen\nZambia\nZimbabwe", "extra" => null, "type" => "textarea", "sort" => 7, "remark" => null, "created_at" => "2025-04-27 11:23:25", "updated_at" => "2025-06-12 09:55:21", "deleted_at" => null],
|
||||
["id" => 59, "group_id" => 1, "title" => "产品询盘可选国家", "name" => "optional_country_for_product_inquiry", "value" => "Afghanistan\nAlbania\nAlgeria\nAmerican Samoa\nAndorra\nAngola\nAnguilla\nAntigua and Barbuda\nArgentina\nArmenia\nAruba\nAustralia\nAustria\nAzerbaijan\nAzores\nBahamas\nBahrain\nBangladesh\nBarbados\nBelarus\nBelgium\nBelize\nBenin\nBermuda\nBhutan\nBolivia\nBosnia and Herzegovina\nBotswana\nBrazil\nBrunei\nBulgaria\nBurkina Faso\nBurundi\nCambodia\nCameroon\nCanada\nCanarias\nCape Verde\nCayman\nCentral African Republic\nChad\nChile\nChina\nColombia\nComoros\nCongo (Congo-Kinshasa)\nCongo\nCook Islands\nCosta Rica\nCote D'Ivoire\nCroatia\nCuba\nCyprus\nCzech\nDenmark\nDjibouti\nDominica\nDominican\nEcuador\nEgypt\nEl Salvador\nEquatorial Guinea\nEritrea\nEstonia\nEthiopia\nFiji\nFinland\nFrance\nFrench Guiana\nFrench Polynesia\nGabon\nGambia\nGeorgia\nGermany\nGhana\nGreece\nGreenland\nGrenada\nGuadeloupe\nGuam\nGuatemala\nGuinea\nGuinea-Bissau\nGuyana\nHaiti\nHonduras\nHungary\nIceland\nIndia\nIndonesia\nIran\nIraq\nIreland\nIsrael\nItaly\nJamaica\nJapan\nJordan\nKazakhstan\nKenya\nKiribati\nKorea (North)\nKorea (South)\nKuwait\nKyrgyzstan\nLaos\nLatvia\nLebanon\nLesotho\nLiberia\nLibya\nLiechtenstein\nLithuania\nLuxembourg\nMacedonia\nMadagascar\nMadeira\nMalawi\nMalaysia\nMaldives\nMali\nMalta\nMarshall Islands\nMartinique\nMauritania\nMauritius\nMexico\nMicronesia\nMoldova\nMonaco\nMongolia\nMontserrat\nMorocco\nMozambique\nMyanmar\nNamibia\nNauru\nNepal\nNetherlands Antilles\nNetherlands\nNew Caledonia\nNew Zealand\nNicaragua\nNiger\nNiue\nNorthern Mariana\nNorway\nOman\nPakistan\nPalau\nPalestine\nPanama\nPapua New Guinea\nParaguay\nPeru\nPhilippines\nPitcairn Islands\nPoland\nPortugal\nPuerto Rico\nQatar\nReunion\nRomania\nRussian Federation\nRwanda\nSaint Helena\nSaint Kitts-Nevis\nSaint Lucia\nSaint Vincent and the Grenadines\nSamoa\nSan Marino\nSao Tome and Principe\nSaudi Arabia\nSenegal\nSerbia\nSeychelles\nSierra Leone\nSingapore\nSlovakia\nSlovenia\nSolomon Islands\nSomalia\nSouth Africa\nSpain\nSri Lanka\nSudan\nSuriname\nSwaziland\nSweden\nSwitzerland\nSyria\nTajikistan\nTanzania\nThailand\nThe British Virgin Islands\nThe United States Virgin Islands\nTimor-Leste\nTogo\nTokelau\nTonga\nTrinidad and Tobago\nTunisia\nTurkey\nTurkmenistan\nTurks and Caicos Islands\nTuvalu\nUganda\nUkraine\nUnited Arab Emirates\nUnited Kingdom\nUnited States\nUruguay\nUzbekistan\nVanuatu\nVatican City\nVenezuela\nVietnam\nWallis and Futuna\nWestern Sahara\nYemen\nZambia\nZimbabwe", "extra" => "", "type" => "textarea", "sort" => 7, "remark" => "", "created_at" => "2025-04-27 11:10:22", "updated_at" => "2025-06-11 17:09:13", "deleted_at" => null],
|
||||
["id" => 60, "group_id" => 4, "title" => "产品询盘可选国家", "name" => "optional_country_for_product_inquiry", "value" => "Afghanistan\nAlbania\nAlgeria\nAmerican Samoa\nAndorra\nAngola\nAnguilla\nAntigua and Barbuda\nArgentina\nArmenia\nAruba\nAustralia\nAustria\nAzerbaijan\nAzores\nBahamas\nBahrain\nBangladesh\nBarbados\nBelarus\nBelgium\nBelize\nBenin\nBermuda\nBhutan\nBolivia\nBosnia and Herzegovina\nBotswana\nBrazil\nBrunei\nBulgaria\nBurkina Faso\nBurundi\nCambodia\nCameroon\nCanada\nCanarias\nCape Verde\nCayman\nCentral African Republic\nChad\nChile\nChina\nColombia\nComoros\nCongo (Congo-Kinshasa)\nCongo\nCook Islands\nCosta Rica\nCote D'Ivoire\nCroatia\nCuba\nCyprus\nCzech\nDenmark\nDjibouti\nDominica\nDominican\nEcuador\nEgypt\nEl Salvador\nEquatorial Guinea\nEritrea\nEstonia\nEthiopia\nFiji\nFinland\nFrance\nFrench Guiana\nFrench Polynesia\nGabon\nGambia\nGeorgia\nGermany\nGhana\nGreece\nGreenland\nGrenada\nGuadeloupe\nGuam\nGuatemala\nGuinea\nGuinea-Bissau\nGuyana\nHaiti\nHonduras\nHungary\nIceland\nIndia\nIndonesia\nIran\nIraq\nIreland\nIsrael\nItaly\nJamaica\nJapan\nJordan\nKazakhstan\nKenya\nKiribati\nKorea (North)\nKorea (South)\nKuwait\nKyrgyzstan\nLaos\nLatvia\nLebanon\nLesotho\nLiberia\nLibya\nLiechtenstein\nLithuania\nLuxembourg\nMacedonia\nMadagascar\nMadeira\nMalawi\nMalaysia\nMaldives\nMali\nMalta\nMarshall Islands\nMartinique\nMauritania\nMauritius\nMexico\nMicronesia\nMoldova\nMonaco\nMongolia\nMontserrat\nMorocco\nMozambique\nMyanmar\nNamibia\nNauru\nNepal\nNetherlands Antilles\nNetherlands\nNew Caledonia\nNew Zealand\nNicaragua\nNiger\nNiue\nNorthern Mariana\nNorway\nOman\nPakistan\nPalau\nPalestine\nPanama\nPapua New Guinea\nParaguay\nPeru\nPhilippines\nPitcairn Islands\nPoland\nPortugal\nPuerto Rico\nQatar\nReunion\nRomania\nRussian Federation\nRwanda\nSaint Helena\nSaint Kitts-Nevis\nSaint Lucia\nSaint Vincent and the Grenadines\nSamoa\nSan Marino\nSao Tome and Principe\nSaudi Arabia\nSenegal\nSerbia\nSeychelles\nSierra Leone\nSingapore\nSlovakia\nSlovenia\nSolomon Islands\nSomalia\nSouth Africa\nSpain\nSri Lanka\nSudan\nSuriname\nSwaziland\nSweden\nSwitzerland\nSyria\nTajikistan\nTanzania\nThailand\nThe British Virgin Islands\nThe United States Virgin Islands\nTimor-Leste\nTogo\nTokelau\nTonga\nTrinidad and Tobago\nTunisia\nTurkey\nTurkmenistan\nTurks and Caicos Islands\nTuvalu\nUganda\nUkraine\nUnited Arab Emirates\nUnited Kingdom\nUnited States\nUruguay\nUzbekistan\nVanuatu\nVatican City\nVenezuela\nVietnam\nWallis and Futuna\nWestern Sahara\nYemen\nZambia\nZimbabwe", "extra" => null, "type" => "textarea", "sort" => 7, "remark" => null, "created_at" => "2025-04-27 11:23:25", "updated_at" => "2025-06-12 09:55:21", "deleted_at" => null],
|
||||
["id" => 61, "group_id" => 1, "title" => "导航位置店铺URL", "name" => "navigation_store_url", "value" => "https://oricotechs.com/", "extra" => null, "type" => "text", "sort" => 6, "remark" => null, "created_at" => "2025-05-13 17:45:46", "updated_at" => "2025-06-11 17:09:13", "deleted_at" => null],
|
||||
["id" => 62, "group_id" => 4, "title" => "导航位置店铺URL", "name" => "navigation_store_url", "value" => "https://oricotechs.com/", "extra" => null, "type" => "text", "sort" => 6, "remark" => null, "created_at" => "2025-05-13 17:45:46", "updated_at" => "2025-06-12 09:55:21", "deleted_at" => null],
|
||||
["id" => 63, "group_id" => 7, "title" => "邮箱", "name" => "website_email", "value" => "supports@orico.com.cn", "extra" => null, "type" => "text", "sort" => 1, "remark" => null, "created_at" => "2025-05-23 17:06:53", "updated_at" => "2025-06-11 17:09:13", "deleted_at" => null],
|
||||
|
||||
54
public/gitea_webhook.php
Normal file
54
public/gitea_webhook.php
Normal file
@@ -0,0 +1,54 @@
|
||||
<?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());
|
||||
}
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
.iotbt1 {
|
||||
font-size: 18px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 40px;
|
||||
font-weight: 700;
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
.iotbtp1 {
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
padding-bottom: 11px;
|
||||
word-break: break-word;
|
||||
@@ -69,7 +69,7 @@
|
||||
.iotbts1 {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
color: #9e9e9f;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -140,7 +140,7 @@
|
||||
font-size: 14px;
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -152,7 +152,7 @@
|
||||
.sfbt1 {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 24px;
|
||||
@@ -183,7 +183,7 @@
|
||||
.cit {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -237,7 +237,7 @@
|
||||
.wcu_s1 {
|
||||
color: #000;
|
||||
font: 16px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
@@ -598,7 +598,7 @@
|
||||
margin: auto;
|
||||
font-size: 1rem;
|
||||
color: #707070;
|
||||
font-family: "Metropolis-Medium";
|
||||
font-family: "Montserrat-Medium";
|
||||
}
|
||||
|
||||
.oricoCnLc .gallery-thumbs .swiper-slide-thumb-active {
|
||||
@@ -632,14 +632,14 @@
|
||||
.oricoCnLc .info h5 {
|
||||
font-size: #000;
|
||||
font-size: 1rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
padding: 2rem 2rem 0 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.oricoCnLc .info p {
|
||||
color: #707070;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@@ -651,7 +651,7 @@
|
||||
|
||||
.oricoCnLc .m_ach-b .title {
|
||||
font-size: 1.125rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
width: 98%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
@@ -660,7 +660,7 @@
|
||||
|
||||
.oricoCnLc .m_ach-b .chtitle {
|
||||
font-size: 1.125rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
width: 98%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
@@ -677,7 +677,7 @@
|
||||
|
||||
.oricoCnLc .m_ch-title {
|
||||
font-size: 1rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
width: 98%;
|
||||
margin: 1rem auto 0;
|
||||
padding: 1rem 0 0;
|
||||
@@ -690,7 +690,7 @@
|
||||
font-size: 0.875;
|
||||
line-height: 1.5rem;
|
||||
color: #707070;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
width: 98%;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
|
||||
@@ -156,7 +156,7 @@
|
||||
border-radius: 8px;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
|
||||
.oricoEGapp-articledetail .content .share_box .comment .comment_form>div input {
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
color: #6b6c6e;
|
||||
font-family: "Metropolis-Medium";
|
||||
font-family: "Montserrat-Medium";
|
||||
font-size: 0.875rem;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
font-size: 18px;
|
||||
color: #004bfa;
|
||||
text-align: left;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
@@ -27,7 +27,7 @@
|
||||
color: #707070;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
.itlable {
|
||||
font-size: 12.5px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
@@ -106,7 +106,7 @@
|
||||
height: 48px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
|
||||
.itselectopen {
|
||||
@@ -130,12 +130,12 @@
|
||||
padding: 15px;
|
||||
background: #f2f2f2;
|
||||
border-radius: 8px;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
|
||||
.bttj {
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
/* width: 212px; */
|
||||
/* height: 48px; */
|
||||
@@ -173,7 +173,7 @@
|
||||
|
||||
.iotbt1 {
|
||||
font-size: 18px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 40px;
|
||||
font-weight: 700;
|
||||
@@ -210,7 +210,7 @@
|
||||
|
||||
.iotbtp1 {
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
padding-bottom: 11px;
|
||||
word-break: break-word;
|
||||
@@ -219,7 +219,7 @@
|
||||
.iotbts1 {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
color: #9e9e9f;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -290,7 +290,7 @@
|
||||
font-size: 14px;
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -302,7 +302,7 @@
|
||||
.sfbt1 {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 24px;
|
||||
@@ -333,7 +333,7 @@
|
||||
.cit {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -388,7 +388,7 @@
|
||||
.wcu_s1 {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
font-size: 18px;
|
||||
color: #004bfa;
|
||||
text-align: left;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
@@ -27,7 +27,7 @@
|
||||
color: #707070;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
.itlable {
|
||||
font-size: 12.5px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
@@ -106,7 +106,7 @@
|
||||
height: 48px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
|
||||
.itselectopen {
|
||||
@@ -130,13 +130,13 @@
|
||||
padding: 15px;
|
||||
background: #f2f2f2;
|
||||
border-radius: 8px;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.bttj {
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
/* width: 212px; */
|
||||
padding: 15px 60px;
|
||||
@@ -173,7 +173,7 @@
|
||||
|
||||
.iotbt1 {
|
||||
font-size: 18px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 40px;
|
||||
font-weight: 700;
|
||||
@@ -210,7 +210,7 @@
|
||||
|
||||
.iotbtp1 {
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
padding-bottom: 11px;
|
||||
word-break: break-word;
|
||||
@@ -219,7 +219,7 @@
|
||||
.iotbts1 {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
color: #9e9e9f;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -290,7 +290,7 @@
|
||||
font-size: 14px;
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -302,7 +302,7 @@
|
||||
.sfbt1 {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 24px;
|
||||
@@ -333,7 +333,7 @@
|
||||
.cit {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -387,7 +387,7 @@
|
||||
.wcu_s1 {
|
||||
color: #000;
|
||||
font: 16px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
margin-top: 3.3rem;
|
||||
}
|
||||
.oricoEGapp-Contact .banner_title {
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -24,7 +24,7 @@
|
||||
color: #000;
|
||||
}
|
||||
.oricoEGapp-Contact .title {
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 1rem;
|
||||
}
|
||||
.oricoEGapp-Contact .info {
|
||||
@@ -43,12 +43,12 @@
|
||||
height: 3rem;
|
||||
}
|
||||
.oricoEGapp-Contact .info .right .des {
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.oricoEGapp-Contact .info_title {
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
margin-bottom: 0.22rem;
|
||||
@@ -61,7 +61,7 @@
|
||||
}
|
||||
.oricoEGapp-Contact .question .title {
|
||||
margin-top: 0.5rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
@@ -86,7 +86,7 @@
|
||||
.oricoEGapp-Contact .send {
|
||||
display: block;
|
||||
background-color: #004bfa;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 0.875rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
color: #fff;
|
||||
@@ -98,7 +98,7 @@
|
||||
color: #ee2f53;
|
||||
}
|
||||
.oricoEGapp-Contact .contact_b {
|
||||
font-family: "Metropolis-SemiBold";
|
||||
font-family: "Montserrat-SemiBold";
|
||||
font-size: 1rem;
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
@@ -119,42 +119,42 @@
|
||||
.oricoEGapp-Contact input::-webkit-input-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact input:-moz-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact input::-moz-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact input:-ms-input-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact textarea::-webkit-input-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact textarea:-moz-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact textarea::-moz-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact textarea:-ms-input-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact .narskfPage {
|
||||
width: 100%;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
margin-top: 3.3rem;
|
||||
}
|
||||
.oricoEGapp-Contact .banner_title {
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -24,7 +24,7 @@
|
||||
color: #000;
|
||||
}
|
||||
.oricoEGapp-Contact .title {
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 1rem;
|
||||
}
|
||||
.oricoEGapp-Contact .info {
|
||||
@@ -46,12 +46,12 @@
|
||||
width: 88% !important;
|
||||
}
|
||||
.oricoEGapp-Contact .info .right .des {
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.oricoEGapp-Contact .info_title {
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
margin-bottom: 0.22rem;
|
||||
@@ -64,7 +64,7 @@
|
||||
}
|
||||
.oricoEGapp-Contact .question .title {
|
||||
margin-top: 0.5rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
@@ -89,7 +89,7 @@
|
||||
.oricoEGapp-Contact .send {
|
||||
display: block;
|
||||
background-color: #004bfa;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 0.875rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
color: #fff;
|
||||
@@ -101,7 +101,7 @@
|
||||
color: #ee2f53;
|
||||
}
|
||||
.oricoEGapp-Contact .contact_b {
|
||||
font-family: "Metropolis-SemiBold";
|
||||
font-family: "Montserrat-SemiBold";
|
||||
font-size: 1rem;
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
@@ -122,40 +122,40 @@
|
||||
.oricoEGapp-Contact input::-webkit-input-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact input:-moz-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact input::-moz-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact input:-ms-input-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact textarea::-webkit-input-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact textarea:-moz-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact textarea::-moz-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
.oricoEGapp-Contact textarea:-ms-input-placeholder {
|
||||
color: #9e9e9f;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('../fonts/icomoon/icomoon.eot?11cuay');
|
||||
src: url('../fonts/icomoon/icomoon.eot?11cuay#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?11cuay') format('opentype'),
|
||||
src: url('../fonts/icomoon/icomoon.eot?11cuay#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?11cuay') format('truetype'),
|
||||
url('../fonts/icomoon/icomoon.woff?11cuay') format('woff'), url('../fonts/icomoon/icomoon.svg?11cuay#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -54,7 +54,7 @@
|
||||
font-family: 'colleciton';
|
||||
src: url('../fonts/icomoon/colleciton/icomoon.eot?11cuay');
|
||||
src: url('../fonts/icomoon/colleciton/icomoon.eot?11cuay#iefix') format('embedded-opentype'),
|
||||
url('../fonts/icomoon/colleciton/icomoon.ttf?11cuay') format('opentype'), url('../fonts/icomoon/colleciton/icomoon.woff?11cuay') format('woff'),
|
||||
url('../fonts/icomoon/colleciton/icomoon.ttf?11cuay') format('truetype'), url('../fonts/icomoon/colleciton/icomoon.woff?11cuay') format('woff'),
|
||||
url('../fonts/icomoon/colleciton/icomoon.svg?11cuay#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -83,7 +83,7 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('../fonts/icomoon/icomoona.eot?c46hgi');
|
||||
src: url('../fonts/icomoon/icomoona.eot?c46hgi#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoona.ttf?c46hgi') format('opentype'),
|
||||
src: url('../fonts/icomoon/icomoona.eot?c46hgi#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoona.ttf?c46hgi') format('truetype'),
|
||||
url('../fonts/icomoon/icomoona.woff?c46hgi') format('woff'), url('../fonts/icomoon/icomoona.svg?c46hgi#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('../fonts/icomoon/icomoon.eot?ujw7hy');
|
||||
src: url('../fonts/icomoon/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?ujw7hy') format('opentype'),
|
||||
src: url('../fonts/icomoon/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?ujw7hy') format('truetype'),
|
||||
url('../fonts/icomoon/icomoon.woff?ujw7hy') format('woff'), url('../fonts/icomoon/icomoon.svg?ujw7hy#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -114,7 +114,7 @@
|
||||
font-family: 'icomoon01';
|
||||
src: url('fonts-20190124/icomoon.eot?ll2528');
|
||||
src: url('fonts-20190124/icomoon.eot?ll2528#iefix') format('embedded-opentype'),
|
||||
url('fonts-20190124/icomoon.ttf?ll2528') format('opentype'), url('fonts-20190124/icomoon.woff?ll2528') format('woff'),
|
||||
url('fonts-20190124/icomoon.ttf?ll2528') format('truetype'), url('fonts-20190124/icomoon.woff?ll2528') format('woff'),
|
||||
url('fonts-20190124/icomoon.svg?ll2528#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -161,7 +161,7 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon02';
|
||||
src: url('fonts/other/icomoon.eot?ujw7hy');
|
||||
src: url('fonts/other/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/other/icomoon.ttf?ujw7hy') format('opentype'),
|
||||
src: url('fonts/other/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/other/icomoon.ttf?ujw7hy') format('truetype'),
|
||||
url('fonts/other/icomoon.woff?ujw7hy') format('woff'), url('fonts/other/icomoon.svg?ujw7hy#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -189,7 +189,7 @@
|
||||
font-family: 'icomoon05';
|
||||
src: url('fonts-20220322/icomoon.eot?cdcz43');
|
||||
src: url('fonts-20220322/icomoon.eot?cdcz43#iefix') format('embedded-opentype'),
|
||||
url('fonts-20220322/icomoon.ttf?cdcz43') format('opentype'), url('fonts-20220322/icomoon.woff?cdcz43') format('woff'),
|
||||
url('fonts-20220322/icomoon.ttf?cdcz43') format('truetype'), url('fonts-20220322/icomoon.woff?cdcz43') format('woff'),
|
||||
url('fonts-20220322/icomoon.svg?cdcz43#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
display: none;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct {
|
||||
font-family: "Metropolis-SemiBold";
|
||||
font-family: "Montserrat-SemiBold";
|
||||
font-weight: bold;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1 {
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
@font-face {
|
||||
font-family: "Metropolis";
|
||||
src: url("../fonts/Metropolis-Regular.otf") format("opentype");
|
||||
font-family: "Montserrat";
|
||||
src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Metropolis-Bold";
|
||||
src: url("../fonts/Metropolis-Bold.ttf") format("opentype");
|
||||
font-family: "Montserrat-Bold";
|
||||
src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Metropolis-Medium";
|
||||
src: url("../fonts/Metropolis-Medium.ttf") format("opentype");
|
||||
font-family: "Montserrat-Medium";
|
||||
src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -22,7 +22,7 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* font-family: 'Metropolis'; */
|
||||
/* font-family: 'Montserrat'; */
|
||||
-ms-overflow-style: none;
|
||||
/* IE 和 Edge */
|
||||
scrollbar-width: none;
|
||||
@@ -88,7 +88,7 @@ a {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Metropolis-SemiBold';
|
||||
font-family: 'Montserrat-SemiBold';
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
@font-face {
|
||||
font-family: "Metropolis";
|
||||
src: url("../fonts/Metropolis-Regular.otf") format("opentype");
|
||||
font-family: "Montserrat";
|
||||
src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Metropolis-Bold";
|
||||
src: url("../fonts/Metropolis-Bold.otf") format("opentype");
|
||||
font-family: "Montserrat-Bold";
|
||||
src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Metropolis-Medium";
|
||||
src: url("../fonts/Metropolis-Medium.otf") format("opentype");
|
||||
font-family: "Montserrat-Medium";
|
||||
src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Metropolis-SemiBold";
|
||||
src: url("../fonts/Metropolis-SemiBold.otf") format("opentype");
|
||||
font-family: "Montserrat-SemiBold";
|
||||
src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
body {
|
||||
font-family: 'Metropolis-SemiBold';
|
||||
font-family: 'Montserrat-SemiBold';
|
||||
margin: auto;
|
||||
background-color: #f5f5f5;
|
||||
max-width: 750px;
|
||||
@@ -591,7 +591,7 @@ button.swiper-pagination-bullet {
|
||||
.Innew-text .title {
|
||||
font-size: 2.5rem;
|
||||
padding-bottom: 1rem;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
}
|
||||
.Inpro-text {
|
||||
padding: 2rem 0 0.8rem;
|
||||
@@ -600,7 +600,7 @@ button.swiper-pagination-bullet {
|
||||
.Inpro-text .title {
|
||||
font-size: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
}
|
||||
|
||||
.Innew-text .more {
|
||||
@@ -635,7 +635,7 @@ video img {
|
||||
font-size: 1.2rem;
|
||||
max-height: 3rem;
|
||||
overflow: hidden;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
}
|
||||
.inprotext .t-f16 {
|
||||
font-size: 1rem;
|
||||
@@ -957,12 +957,12 @@ video img {
|
||||
margin: auto;
|
||||
line-height: 2rem;
|
||||
padding: 0 3rem;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
}
|
||||
.ban-t {
|
||||
padding: 0.5rem 3rem;
|
||||
font-size: 1.125rem;
|
||||
font-family: 'Metropolis-Regular';
|
||||
font-family: 'Montserrat-Regular';
|
||||
}
|
||||
.btn-more {
|
||||
background: transparent;
|
||||
@@ -979,7 +979,7 @@ video img {
|
||||
margin: auto;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
}
|
||||
/*类别*/
|
||||
.category {
|
||||
@@ -1095,11 +1095,11 @@ video img {
|
||||
padding: 0.2rem 0;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
}
|
||||
.num-bg li p {
|
||||
font-size: 0.8rem;
|
||||
font-family: 'Metropolis-Regular';
|
||||
font-family: 'Montserrat-Regular';
|
||||
}
|
||||
/*标题*/
|
||||
.Tech-text {
|
||||
@@ -1115,7 +1115,7 @@ video img {
|
||||
.Tech-text p {
|
||||
padding: 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
}
|
||||
|
||||
.pos-text {
|
||||
@@ -1125,7 +1125,7 @@ video img {
|
||||
color: #fff;
|
||||
font-size: 0.825rem;
|
||||
margin: 0 auto;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -1157,7 +1157,7 @@ video img {
|
||||
font-size: 0.9rem;
|
||||
padding: 1rem 0;
|
||||
line-height: 1.3em;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
word-break: break-all;
|
||||
}
|
||||
.faq span {
|
||||
@@ -1172,7 +1172,7 @@ video img {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.75em;
|
||||
color: #666;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
}
|
||||
.faq i {
|
||||
position: absolute;
|
||||
@@ -1209,7 +1209,7 @@ video img {
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
height: 1.5rem;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -1217,7 +1217,7 @@ video img {
|
||||
font-size: 1.125rem;
|
||||
color: #7f7f7f;
|
||||
padding-bottom: 1rem;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
font-weight: 400;
|
||||
}
|
||||
/*foot */
|
||||
@@ -1249,7 +1249,7 @@ video img {
|
||||
}
|
||||
.foot-in h3 {
|
||||
font-size: 1.25rem;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
font-weight: 100;
|
||||
}
|
||||
.logo-input {
|
||||
@@ -1292,7 +1292,7 @@ video img {
|
||||
.foot-cate li p {
|
||||
font-size: 0.7rem;
|
||||
line-height: 2.5rem;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.foot-wei {
|
||||
@@ -1327,7 +1327,7 @@ video img {
|
||||
width: 100%;
|
||||
height: 1.2rem;
|
||||
cursor: pointer;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
}
|
||||
/*下拉*/
|
||||
.m_footer .left {
|
||||
@@ -1375,7 +1375,7 @@ video img {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
}
|
||||
/*下拉*/
|
||||
.mask-up {
|
||||
@@ -1985,7 +1985,7 @@ video img {
|
||||
}
|
||||
.swiper-slide a {
|
||||
color: #000;
|
||||
font-family: 'Metropolis-SemiBold';
|
||||
font-family: 'Montserrat-SemiBold';
|
||||
}
|
||||
.swiper-slide img {
|
||||
max-width: 100%;
|
||||
@@ -2491,7 +2491,7 @@ video img {
|
||||
margin-right: 0px;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
font-family: Metropolis !important;
|
||||
font-family: Montserrat !important;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -3479,26 +3479,26 @@ video img {
|
||||
font-size: 1.5rem;
|
||||
width: 90%;
|
||||
margin: 4rem auto 0;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
}
|
||||
.timedesin {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 1.3rem;
|
||||
width: 90%;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
}
|
||||
.timeblue {
|
||||
color: #004bfa;
|
||||
font-size: 1.125rem;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
}
|
||||
.timeblue img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.timeblue a {
|
||||
color: #004bfa;
|
||||
font-family: 'Metropolis-Medium';
|
||||
font-family: 'Montserrat-Medium';
|
||||
}
|
||||
/*视频*/
|
||||
.video-youtu {
|
||||
@@ -3558,7 +3558,7 @@ video img {
|
||||
}
|
||||
.vision-title {
|
||||
font-size: 1rem;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
width: 98%;
|
||||
margin: 1rem auto 0;
|
||||
}
|
||||
@@ -3566,7 +3566,7 @@ video img {
|
||||
font-size: 0.875;
|
||||
line-height: 1.5rem;
|
||||
color: #707070;
|
||||
font-family: 'Metropolis-Regular';
|
||||
font-family: 'Montserrat-Regular';
|
||||
width: 98%;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
@@ -3584,7 +3584,7 @@ video img {
|
||||
}
|
||||
.brand_title {
|
||||
font-size: 1.125rem;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
width: 98%;
|
||||
margin: 1rem auto 0;
|
||||
position: relative;
|
||||
@@ -3602,7 +3602,7 @@ video img {
|
||||
font-size: 0.875;
|
||||
line-height: 1.5rem;
|
||||
color: #000000;
|
||||
font-family: 'Metropolis-Regular';
|
||||
font-family: 'Montserrat-Regular';
|
||||
width: 98%;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
@@ -3655,7 +3655,7 @@ video::-webkit-media-controls-current-time-display {
|
||||
}
|
||||
.m_ach .title {
|
||||
font-size: 1.125rem;
|
||||
font-family: 'Metropolis-Bold';
|
||||
font-family: 'Montserrat-Bold';
|
||||
width: 98%;
|
||||
margin: 1rem auto 0;
|
||||
position: relative;
|
||||
@@ -3680,7 +3680,7 @@ video::-webkit-media-controls-current-time-display {
|
||||
}
|
||||
.m_ach .list-num li p {
|
||||
color: #707070;
|
||||
font-family: 'Metropolis-Regular';
|
||||
font-family: 'Montserrat-Regular';
|
||||
}
|
||||
/*新闻评测*/
|
||||
.news-vertu {
|
||||
@@ -3976,7 +3976,7 @@ video::-webkit-media-controls-current-time-display {
|
||||
border-radius: 8px;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
.comment_area {
|
||||
width: 100% !important;
|
||||
|
||||
@@ -1,320 +0,0 @@
|
||||
/* 核心模块：固定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;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
.prodline-footer-box{
|
||||
width: 100%;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
.prodline-footer-box-img {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.prodline-footer-box-img img {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
/* 蒙版样式 - 新增触摸事件禁止 */
|
||||
.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;
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
.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 */
|
||||
}
|
||||
}
|
||||
@@ -1,184 +0,0 @@
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
@@ -1,206 +0,0 @@
|
||||
.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;
|
||||
/* 缩小图片区域最小宽度，平衡文字空间 */
|
||||
}
|
||||
}
|
||||
@@ -1,284 +0,0 @@
|
||||
/* 容器布局：通用基础样式（仅宽度、外边距，不涉及高度） */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
.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;*/
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 696 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -66,7 +66,7 @@
|
||||
.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
margin-top: 2rem;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
@@ -75,7 +75,7 @@
|
||||
width: 80%;
|
||||
font-size: 0.875rem;
|
||||
color: #707070;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
margin-top: 1.375rem;
|
||||
margin-left: 10%;
|
||||
}
|
||||
@@ -93,7 +93,7 @@
|
||||
line-height: 2em;
|
||||
margin-bottom: 2%;
|
||||
font-weight: 600;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
}
|
||||
.orico_Page_productxc .productxcMain .culture_vision .swt-Container {
|
||||
width: 80%;
|
||||
@@ -138,14 +138,14 @@
|
||||
color: #101010;
|
||||
line-height: 2em;
|
||||
margin-bottom: 2%;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
margin-right: 10%;
|
||||
}
|
||||
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right .des {
|
||||
font-size: 16px;
|
||||
color: #737373;
|
||||
line-height: 1.6rem;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
}
|
||||
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .Table-Cell {
|
||||
display: table-cell;
|
||||
@@ -159,7 +159,7 @@
|
||||
font-size: 1rem;
|
||||
color: #737373;
|
||||
line-height: 1.6rem;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
}
|
||||
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .des,
|
||||
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .subtitle {
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
}
|
||||
.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotbt1 {
|
||||
font-size: 32px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
padding-bottom: 65px;
|
||||
padding-top: 88px;
|
||||
font-weight: 700;
|
||||
@@ -57,14 +57,14 @@
|
||||
}
|
||||
.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbtp1 {
|
||||
font-size: 18px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbts1 {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
color: #9e9e9f;
|
||||
}
|
||||
.orico_Page_introduction .introductionMain .iotb_part2 {
|
||||
@@ -78,7 +78,7 @@
|
||||
}
|
||||
.orico_Page_introduction .introductionMain .iotb_part2 .iotbt1 {
|
||||
font-size: 32px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
padding-bottom: 65px;
|
||||
padding-top: 88px;
|
||||
font-weight: 700;
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
height: 11.25rem;
|
||||
line-height: 11.25rem;
|
||||
font-size: 2rem;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
@@ -52,7 +52,7 @@
|
||||
.orico_Page_achievement .achievementMain .achInfo .achNums .achive_shuju .title1 {
|
||||
margin-top: 2.5rem;
|
||||
font-size: 2rem;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
@@ -62,7 +62,7 @@
|
||||
.orico_Page_achievement .achievementMain .achInfo .achNums .achive_shuju .subtitle1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.125rem;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
}
|
||||
@@ -71,7 +71,7 @@
|
||||
height: auto;
|
||||
position: relative;
|
||||
background: #f2f2f2;
|
||||
font-family: Metropolis;
|
||||
font-family: Montserrat;
|
||||
padding-bottom: 10%;
|
||||
}
|
||||
.orico_Page_achievement .achievementMain .achTimes .timecontent {
|
||||
@@ -83,7 +83,7 @@
|
||||
height: 11.25rem;
|
||||
line-height: 11.25rem;
|
||||
font-size: 2rem;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
@@ -142,7 +142,7 @@
|
||||
background: url(/static/index/pc/images/greyyuandian.png) 3px 3px no-repeat;
|
||||
height: 2.375rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 1.875rem;
|
||||
@@ -153,7 +153,7 @@
|
||||
.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div li {
|
||||
display: inline-block;
|
||||
width: 94%;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
line-height: 1.5625rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
@@ -181,7 +181,7 @@
|
||||
height: 11.25rem;
|
||||
line-height: 11.25rem;
|
||||
font-size: 2rem;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
@@ -211,7 +211,7 @@
|
||||
margin-left: 4.0625rem;
|
||||
margin-top: 2.5rem;
|
||||
font-size: 1.75rem;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 1.625rem;
|
||||
@@ -220,7 +220,7 @@
|
||||
margin-left: 65px;
|
||||
width: 80%;
|
||||
font-size: 16px;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
color: #707070;
|
||||
line-height: 26px;
|
||||
|
||||
@@ -52,10 +52,10 @@
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
line-height: 20px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
}
|
||||
.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext .Table-Cell p {
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-size: 14px;
|
||||
color: #707070;
|
||||
line-height: 22px;
|
||||
@@ -100,17 +100,17 @@
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con .title p {
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
}
|
||||
.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con .subtitle {
|
||||
width: 80%;
|
||||
font-size: 0.875rem;
|
||||
color: #707070;
|
||||
font-family: Metropolis-Medium, Metropolis;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
margin-top: 2.5rem;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con .subtitle p {
|
||||
font-family: Metropolis-Medium;
|
||||
font-family: Montserrat-Medium;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
border-radius: 8px;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
.orico_Page_articleDetail .articleDetailMain .atmright .repply form {
|
||||
width: auto;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
margin-top: -28px;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
}
|
||||
.orico_Page_download .downloadMain .contact_c {
|
||||
width: 82%;
|
||||
@@ -43,7 +43,7 @@
|
||||
border-radius: 1.5rem;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
font-family: "Metropolis-Medium";
|
||||
font-family: "Montserrat-Medium";
|
||||
color: #9e9e9f;
|
||||
z-index: 9;
|
||||
position: relative;
|
||||
@@ -86,7 +86,7 @@
|
||||
font-size: 1.125rem;
|
||||
padding-top: 1.5625rem;
|
||||
padding-bottom: 1.5625rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
text-align: center;
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
@@ -137,20 +137,20 @@
|
||||
}
|
||||
.orico_Page_download .downloadMain .contact_c .softlist .softit .title {
|
||||
font-size: 1.125rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
color: #000;
|
||||
}
|
||||
.orico_Page_download .downloadMain .contact_c .softlist .softit .sub_title {
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.875rem;
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
color: #9e9e9f;
|
||||
}
|
||||
.orico_Page_download .downloadMain .contact_c .softlist .softit .des {
|
||||
line-height: 20px;
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
font-family: "Metropolis-Medium";
|
||||
font-family: "Montserrat-Medium";
|
||||
color: #000;
|
||||
}
|
||||
.orico_Page_download .downloadMain .contact_c .softlist .softit .l_button {
|
||||
@@ -158,7 +158,7 @@
|
||||
padding: 15px 40px;
|
||||
margin-top: 74px;
|
||||
display: inline-block;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
color: #004bfa;
|
||||
background-color: rgba(0, 75, 250, 0.05);
|
||||
cursor: pointer;
|
||||
@@ -212,7 +212,7 @@
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
color: #000;
|
||||
}
|
||||
.orico_Page_download .downloadMain .contact_c .vidotabs .hd ul li a{
|
||||
@@ -257,7 +257,7 @@
|
||||
height: 114px;
|
||||
}
|
||||
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd .htit .htit1 {
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
margin-top: 40px;
|
||||
@@ -266,7 +266,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd .htit .htit2 {
|
||||
font-family: "Metropolis-Regular";
|
||||
font-family: "Montserrat-Regular";
|
||||
color: #9e9e9f;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
.orico_Page_bussiness .bussinessMain .bd_main .sfbt1 {
|
||||
font-size: 24px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding-bottom: 55px;
|
||||
@@ -52,7 +52,7 @@
|
||||
}
|
||||
.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .itlable {
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10px;
|
||||
@@ -74,7 +74,7 @@
|
||||
height: 48px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .form-control {
|
||||
display: block;
|
||||
@@ -97,7 +97,7 @@
|
||||
.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .sfbchecks .sfbcheckboxlist .cit {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -119,11 +119,11 @@
|
||||
background: #f2f2f2;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
.orico_Page_bussiness .bussinessMain .bd_main .bttj {
|
||||
font-size: 14px;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
width: 212px;
|
||||
padding: 15px 15px;
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
color: #004bfa;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: 700;
|
||||
}
|
||||
.orico_Page_distributor .distributorMain .s1 {
|
||||
@@ -72,7 +72,7 @@
|
||||
}
|
||||
.orico_Page_distributor .distributorMain .bd_from .theit .bditem .itlable {
|
||||
font-size: 0.875rem;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
padding-bottom: 0.625rem;
|
||||
@@ -99,7 +99,7 @@
|
||||
border-radius: 0.5rem;
|
||||
height: 3rem;
|
||||
box-shadow: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
.orico_Page_distributor .distributorMain .ittextarea {
|
||||
height: 6.25rem;
|
||||
@@ -108,11 +108,11 @@
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
resize: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
.orico_Page_distributor .distributorMain .bttj {
|
||||
font-size: 0.875rem;
|
||||
font-family: Metropolis-Bold, Metropolis;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
width: 10rem;
|
||||
padding: 1.2rem 3.75rem;
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
color: #000;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all {
|
||||
@@ -77,7 +77,7 @@
|
||||
}
|
||||
.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .sub_list .title {
|
||||
font-size: 0.875rem;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
}
|
||||
.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .sub_list .des {
|
||||
font-size: 0.875rem;
|
||||
@@ -92,14 +92,14 @@
|
||||
color: #000;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
}
|
||||
.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .title {
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
font-size: 0.875rem;
|
||||
padding-bottom: 0.3125rem;
|
||||
}
|
||||
@@ -110,13 +110,13 @@
|
||||
background: #f2f2f2;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
}
|
||||
.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .ittextarea {
|
||||
height: 100px;
|
||||
background: #f2f2f2;
|
||||
border: none;
|
||||
font-family: Metropolis-Regular, Metropolis;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
resize: none;
|
||||
}
|
||||
.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .form_input input,
|
||||
@@ -143,7 +143,7 @@
|
||||
font-size: 0.875rem;
|
||||
background-color: #004bfa;
|
||||
color: #fff;
|
||||
font-family: "Metropolis-Bold";
|
||||
font-family: "Montserrat-Bold";
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -157,7 +157,7 @@
|
||||
background-color: #fff;
|
||||
border-radius: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
font-family: "Metropolis-SemiBold";
|
||||
font-family: "Montserrat-SemiBold";
|
||||
}
|
||||
.orico_Page_contact .contactMain .contact_c .become_dis .text_blue {
|
||||
color: #004bfa;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon/icomoon.eot?ujw7hy');
|
||||
src: url('fonts/icomoon/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/icomoon/icomoon.ttf?ujw7hy') format('opentype'),
|
||||
src: url('fonts/icomoon/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/icomoon/icomoon.ttf?ujw7hy') format('truetype'),
|
||||
url('fonts/icomoon/icomoon.woff?ujw7hy') format('woff'), url('fonts/icomoon/icomoon.svg?ujw7hy#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -114,7 +114,7 @@
|
||||
font-family: 'icomoon01';
|
||||
src: url('fonts-20190124/icomoon.eot?ll2528');
|
||||
src: url('fonts-20190124/icomoon.eot?ll2528#iefix') format('embedded-opentype'),
|
||||
url('fonts-20190124/icomoon.ttf?ll2528') format('opentype'), url('fonts-20190124/icomoon.woff?ll2528') format('woff'),
|
||||
url('fonts-20190124/icomoon.ttf?ll2528') format('truetype'), url('fonts-20190124/icomoon.woff?ll2528') format('woff'),
|
||||
url('fonts-20190124/icomoon.svg?ll2528#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -161,7 +161,7 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon02';
|
||||
src: url('fonts/other/icomoon.eot?ujw7hy');
|
||||
src: url('fonts/other/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/other/icomoon.ttf?ujw7hy') format('opentype'),
|
||||
src: url('fonts/other/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/other/icomoon.ttf?ujw7hy') format('truetype'),
|
||||
url('fonts/other/icomoon.woff?ujw7hy') format('woff'), url('fonts/other/icomoon.svg?ujw7hy#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -189,7 +189,7 @@
|
||||
font-family: 'icomoon05';
|
||||
src: url('fonts-20220322/icomoon.eot?cdcz43');
|
||||
src: url('fonts-20220322/icomoon.eot?cdcz43#iefix') format('embedded-opentype'),
|
||||
url('fonts-20220322/icomoon.ttf?cdcz43') format('opentype'), url('fonts-20220322/icomoon.woff?cdcz43') format('woff'),
|
||||
url('fonts-20220322/icomoon.ttf?cdcz43') format('truetype'), url('fonts-20220322/icomoon.woff?cdcz43') format('woff'),
|
||||
url('fonts-20220322/icomoon.svg?cdcz43#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
@@ -572,7 +572,7 @@
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
font-family: Metropolis !important;
|
||||
font-family: Montserrat !important;
|
||||
color: #004bfa;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
@font-face {
|
||||
font-family: "Metropolis";
|
||||
src: url("../fonts/Metropolis-Regular.otf") format("opentype");
|
||||
font-family: "Montserrat";
|
||||
src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Metropolis-Bold";
|
||||
src: url("../fonts/Metropolis-Bold.otf") format("opentype");
|
||||
font-family: "Montserrat-Bold";
|
||||
src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Metropolis-Medium";
|
||||
src: url("../fonts/Metropolis-Medium.otf") format("opentype");
|
||||
font-family: "Montserrat-Medium";
|
||||
src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -32,7 +32,7 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Metropolis';
|
||||
font-family: 'Montserrat';
|
||||
}
|
||||
|
||||
*:hover {
|
||||
|
||||
@@ -1,267 +0,0 @@
|
||||
/* 核心模块：固定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);
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
.prodline-footer-box{
|
||||
width: 100%;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
.prodline-footer-box-img {
|
||||
width: 90%;
|
||||
max-width: 1690px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.prodline-footer-box-img img {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
* {
|
||||
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;
|
||||
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
/* 蒙版样式 - 新增触摸事件禁止 */
|
||||
.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;
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
@@ -1,220 +0,0 @@
|
||||
.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;
|
||||
/* 缩小图片区域最小宽度，平衡文字空间 */
|
||||
}
|
||||
}
|
||||
@@ -1,291 +0,0 @@
|
||||
/* 容器布局：通用基础样式（仅宽度、外边距，不涉及高度） */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
|
||||
/* 轮播容器 - 核心：基于视口高度自适应 */
|
||||
.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;*/
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 696 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Reference in New Issue
Block a user