20 Commits

Author SHA1 Message Date
df6550974e 删除注释 2025-12-04 10:27:05 +08:00
61b6a64ab6 底部样式 2025-12-04 10:25:06 +08:00
8eca932267 底部 2025-12-04 10:22:56 +08:00
f09979dc44 Merge branch 'dev' 2025-12-03 17:56:52 +08:00
6136342c45 七牛云引入字体
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
2025-12-03 17:56:08 +08:00
7b9e348cf6 删除备份文件
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
2025-12-03 17:03:57 +08:00
1cb612bdf8 移动端尺寸字体调整 2025-12-03 15:30:19 +08:00
e0f99450af 字体切换
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
2025-12-02 16:33:24 +08:00
2cba81ebfe Merge branch 'font' into dev
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
2025-12-02 16:12:06 +08:00
7863cd87ec 移动端
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
2025-12-02 16:11:12 +08:00
81375c92e0 Merge branch 'font' 2025-12-01 15:46:23 +08:00
c5086c93be Merge branch 'dev' 2025-11-28 16:23:35 +08:00
a66be286b8 Merge branch 'dev' 2025-11-28 15:46:00 +08:00
f6d3a90c0e Merge branch 'dev' 2025-11-28 15:36:31 +08:00
a98b14445c Merge branch 'dev' 2025-11-28 15:23:45 +08:00
d33c365f09 Merge branch 'dev' 2025-11-28 14:51:46 +08:00
eb6cca3228 Merge branch 'dev' 2025-11-28 14:43:34 +08:00
ff60815007 Merge branch 'dev' 2025-11-28 14:36:46 +08:00
d3268334ea refactor: 修改..gitignore 2025-11-28 14:35:35 +08:00
e5228429ec Initial commit 2025-11-28 14:33:22 +08:00
29 changed files with 808 additions and 882 deletions

208
LICENSE Normal file
View 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.

View File

@@ -1,14 +1,35 @@
{extend name="public/base" /} {extend name="public/base" /}
{block name="style"} {block name="style"}
<!-- 将rem适配JS移到这里确保优先执行 -->
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
function setRootFontSize() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var fontSize = clientWidth / 7.5; // 750px/7.5=100px375px/7.5=50px
// 直接修改内联样式,优先级最高
docEl.setAttribute('style', 'font-size: ' + fontSize + 'px !important;');
}
setRootFontSize();
win.addEventListener(resizeEvt, setRootFontSize);
doc.addEventListener('DOMContentLoaded', setRootFontSize);
})(document, window);
</script>
<link rel="stylesheet" href="__CSS__/topic_power_prodline/index.css"> <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/swiper.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/nav.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/advantage.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/moren.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/mask.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.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_list.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/product_card.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css"> <link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css">
{/block} {/block}
{block name="header"} {block name="header"}
<!-- 重置header头为空 --> <!-- 重置header头为空 -->
@@ -82,8 +103,8 @@
<a class="product-left" href="{$tc_first_section_lf.link}"> <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"> <img src="{$tc_first_section_lf.image}" alt="{$tc_first_section_lf.title}" class="product-img">
<!-- 公共类+定位类:尺寸统一,定位不同 --> <!-- 公共类+定位类:尺寸统一,定位不同 -->
<div class="product-img-hover product-img-1"> <div class="product-img-hover top55">
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}"> <img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}" class="img1">
</div> </div>
</a> </a>
{/notempty} {/notempty}
@@ -160,8 +181,8 @@
<a class="product-left" href="{$hc_first_section_lf.link}"> <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"> <img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
<!-- 公共类+定位类:尺寸统一,定位不同 --> <!-- 公共类+定位类:尺寸统一,定位不同 -->
<div class="product-img-hover product-img-1"> <div class="product-img-hover">
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}"> <img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}" class="img2">
</div> </div>
</a> </a>
{/notempty} {/notempty}
@@ -237,8 +258,8 @@
<a class="product-left" href="{$dc_first_section_lf.link}"> <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"> <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" > <div class="product-img-hover right" >
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}"> <img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}" class="img3">
</div> </div>
</a> </a>
{/notempty} {/notempty}
@@ -275,26 +296,26 @@
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /} {assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
{notempty name="dc_second_section"} {notempty name="dc_second_section"}
<div class="product-card-box"> <div class="product-card-box">
<div class="product-card-container2"> <div class="product-card-container">
{volist name="dc_second_section" id="dcs"} {volist name="dc_second_section" id="dcs"}
<a class="product-card2" href="{$dcs.link}"> <a class="product-card-wrap" href="{$dcs.link}">
<div class="product-text2"> <div class="product-card" href="#">
<!-- 新增内部容器,确保所有内容左对齐一致性 --> <div class="product-card-img">
<div class="product-text-content2"> <img src="{$dcs.image}" alt="{$dcs.short_title}">
<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 class="product-card-text">
<div class="product-card-title">{$dcs.title}</div>
<div class="product-card-desc">{$dcs.short_title}</div>
</div> </div>
<div class="product-card-link">
<img src="__IMAGES__/ljgd.png" alt="查看更多">
</div> </div>
<div class="product-card-img2">
<img src="{$dcs.image}" alt="{$dcs.title}">
</div> </div>
</a> </a>
{/volist} {/volist}
</div> </div>
</div> </div>
{/notempty} {/notempty}
{assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /} {assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
{notempty name="dc_three_section"} {notempty name="dc_three_section"}
@@ -319,8 +340,8 @@
<a class="product-left" href="{$wc_first_section_lf.link}"> <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"> <img src="{$wc_first_section_lf.image}" alt="{$wc_first_section_lf.title}" class="product-img">
<!-- 公共类+定位类:尺寸统一,定位不同 --> <!-- 公共类+定位类:尺寸统一,定位不同 -->
<div class="product-img-hover product-img-1"> <div class="product-img-hover top70">
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}"> <img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}" class="img4">
</div> </div>
</a> </a>
{/notempty} {/notempty}
@@ -379,9 +400,9 @@
<img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img"> <img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
<!-- 公共类+定位类:尺寸统一,定位不同 --> <!-- 公共类+定位类:尺寸统一,定位不同 -->
<!--style="display:flex;justify-content: center;"--> <!--style="display:flex;justify-content: center;"-->
<div class="product-img-hover product-img-1" > <div class="product-img-hover top40" >
<!-- style="width:70%"--> <!-- style="width:70%"-->
<img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}"> <img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}" class="img5">
</div> </div>
</a> </a>
{/notempty} {/notempty}
@@ -440,6 +461,10 @@
<div class="mask-scroll-content"></div> <div class="mask-scroll-content"></div>
</div> </div>
</div> </div>
{/block} {/block}
{block name="script"} {block name="script"}
<script type="text/javascript"> <script type="text/javascript">

View File

@@ -23,7 +23,7 @@
.iotbt1 { .iotbt1 {
font-size: 18px; font-size: 18px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 40px; padding-top: 40px;
font-weight: 700; font-weight: 700;
@@ -60,7 +60,7 @@
.iotbtp1 { .iotbtp1 {
font-size: 14px; font-size: 14px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: bold; font-weight: bold;
padding-bottom: 11px; padding-bottom: 11px;
word-break: break-word; word-break: break-word;
@@ -69,7 +69,7 @@
.iotbts1 { .iotbts1 {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
color: #9e9e9f; color: #9e9e9f;
word-break: break-word; word-break: break-word;
} }
@@ -140,7 +140,7 @@
font-size: 14px; font-size: 14px;
padding-top: 12px; padding-top: 12px;
text-align: center; text-align: center;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-word; word-break: break-word;
} }
@@ -152,7 +152,7 @@
.sfbt1 { .sfbt1 {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: bold; font-weight: bold;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 24px; padding-top: 24px;
@@ -183,7 +183,7 @@
.cit { .cit {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -237,7 +237,7 @@
.wcu_s1 { .wcu_s1 {
color: #000; color: #000;
font: 16px; font: 16px;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
font-weight: 500; font-weight: 500;
padding: 20px 24px; padding: 20px 24px;
} }

View File

@@ -598,7 +598,7 @@
margin: auto; margin: auto;
font-size: 1rem; font-size: 1rem;
color: #707070; color: #707070;
font-family: "Metropolis-Medium"; font-family: "HarmonyOS-Medium";
} }
.oricoCnLc .gallery-thumbs .swiper-slide-thumb-active { .oricoCnLc .gallery-thumbs .swiper-slide-thumb-active {
@@ -632,14 +632,14 @@
.oricoCnLc .info h5 { .oricoCnLc .info h5 {
font-size: #000; font-size: #000;
font-size: 1rem; font-size: 1rem;
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
padding: 2rem 2rem 0 1rem; padding: 2rem 2rem 0 1rem;
margin: 0; margin: 0;
} }
.oricoCnLc .info p { .oricoCnLc .info p {
color: #707070; color: #707070;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
padding: 1rem; padding: 1rem;
} }
@@ -651,7 +651,7 @@
.oricoCnLc .m_ach-b .title { .oricoCnLc .m_ach-b .title {
font-size: 1.125rem; font-size: 1.125rem;
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
width: 98%; width: 98%;
margin: auto; margin: auto;
position: relative; position: relative;
@@ -660,7 +660,7 @@
.oricoCnLc .m_ach-b .chtitle { .oricoCnLc .m_ach-b .chtitle {
font-size: 1.125rem; font-size: 1.125rem;
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
width: 98%; width: 98%;
margin: auto; margin: auto;
position: relative; position: relative;
@@ -677,7 +677,7 @@
.oricoCnLc .m_ch-title { .oricoCnLc .m_ch-title {
font-size: 1rem; font-size: 1rem;
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
width: 98%; width: 98%;
margin: 1rem auto 0; margin: 1rem auto 0;
padding: 1rem 0 0; padding: 1rem 0 0;
@@ -690,7 +690,7 @@
font-size: 0.875; font-size: 0.875;
line-height: 1.5rem; line-height: 1.5rem;
color: #707070; color: #707070;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
width: 98%; width: 98%;
margin: 1rem auto; margin: 1rem auto;
padding: 0; padding: 0;

View File

@@ -156,7 +156,7 @@
border-radius: 8px; border-radius: 8px;
height: 48px; height: 48px;
box-shadow: none; box-shadow: none;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
} }
.oricoEGapp-articledetail .content .share_box .comment .comment_form>div input { .oricoEGapp-articledetail .content .share_box .comment .comment_form>div input {

View File

@@ -33,7 +33,7 @@
border-radius: 1rem; border-radius: 1rem;
background-color: #fff; background-color: #fff;
color: #6b6c6e; color: #6b6c6e;
font-family: "Metropolis-Medium"; font-family: "HarmonyOS-Medium";
font-size: 0.875rem; font-size: 0.875rem;
display: inline-block; display: inline-block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;

View File

@@ -16,7 +16,7 @@
font-size: 18px; font-size: 18px;
color: #004bfa; color: #004bfa;
text-align: left; text-align: left;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: 700; font-weight: 700;
margin-top: 0; margin-top: 0;
margin-bottom: 12px; margin-bottom: 12px;
@@ -27,7 +27,7 @@
color: #707070; color: #707070;
text-align: center; text-align: center;
text-align: left; text-align: left;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
font-weight: 500; font-weight: 500;
} }
@@ -83,7 +83,7 @@
.itlable { .itlable {
font-size: 12.5px; font-size: 12.5px;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
padding-bottom: 5px; padding-bottom: 5px;
@@ -106,7 +106,7 @@
height: 48px; height: 48px;
border: none; border: none;
box-shadow: none; box-shadow: none;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
} }
.itselectopen { .itselectopen {
@@ -130,12 +130,12 @@
padding: 15px; padding: 15px;
background: #f2f2f2; background: #f2f2f2;
border-radius: 8px; border-radius: 8px;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
} }
.bttj { .bttj {
font-size: 14px; font-size: 14px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: bold; font-weight: bold;
/* width: 212px; */ /* width: 212px; */
/* height: 48px; */ /* height: 48px; */
@@ -173,7 +173,7 @@
.iotbt1 { .iotbt1 {
font-size: 18px; font-size: 18px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 40px; padding-top: 40px;
font-weight: 700; font-weight: 700;
@@ -210,7 +210,7 @@
.iotbtp1 { .iotbtp1 {
font-size: 14px; font-size: 14px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: bold; font-weight: bold;
padding-bottom: 11px; padding-bottom: 11px;
word-break: break-word; word-break: break-word;
@@ -219,7 +219,7 @@
.iotbts1 { .iotbts1 {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
color: #9e9e9f; color: #9e9e9f;
word-break: break-word; word-break: break-word;
} }
@@ -290,7 +290,7 @@
font-size: 14px; font-size: 14px;
padding-top: 12px; padding-top: 12px;
text-align: center; text-align: center;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-word; word-break: break-word;
} }
@@ -302,7 +302,7 @@
.sfbt1 { .sfbt1 {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: bold; font-weight: bold;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 24px; padding-top: 24px;
@@ -333,7 +333,7 @@
.cit { .cit {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -388,7 +388,7 @@
.wcu_s1 { .wcu_s1 {
color: #000; color: #000;
font-size: 16px; font-size: 16px;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
font-weight: 500; font-weight: 500;
padding: 20px 24px; padding: 20px 24px;
} }

View File

@@ -16,7 +16,7 @@
font-size: 18px; font-size: 18px;
color: #004bfa; color: #004bfa;
text-align: left; text-align: left;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: 700; font-weight: 700;
margin-top: 0; margin-top: 0;
margin-bottom: 12px; margin-bottom: 12px;
@@ -27,7 +27,7 @@
color: #707070; color: #707070;
text-align: center; text-align: center;
text-align: left; text-align: left;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
font-weight: 500; font-weight: 500;
} }
@@ -83,7 +83,7 @@
.itlable { .itlable {
font-size: 12.5px; font-size: 12.5px;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
padding-bottom: 5px; padding-bottom: 5px;
@@ -106,7 +106,7 @@
height: 48px; height: 48px;
border: none; border: none;
box-shadow: none; box-shadow: none;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
} }
.itselectopen { .itselectopen {
@@ -130,13 +130,13 @@
padding: 15px; padding: 15px;
background: #f2f2f2; background: #f2f2f2;
border-radius: 8px; border-radius: 8px;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
border: 0; border: 0;
} }
.bttj { .bttj {
font-size: 14px; font-size: 14px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: bold; font-weight: bold;
/* width: 212px; */ /* width: 212px; */
padding: 15px 60px; padding: 15px 60px;
@@ -173,7 +173,7 @@
.iotbt1 { .iotbt1 {
font-size: 18px; font-size: 18px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 40px; padding-top: 40px;
font-weight: 700; font-weight: 700;
@@ -210,7 +210,7 @@
.iotbtp1 { .iotbtp1 {
font-size: 14px; font-size: 14px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: bold; font-weight: bold;
padding-bottom: 11px; padding-bottom: 11px;
word-break: break-word; word-break: break-word;
@@ -219,7 +219,7 @@
.iotbts1 { .iotbts1 {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
color: #9e9e9f; color: #9e9e9f;
word-break: break-word; word-break: break-word;
} }
@@ -290,7 +290,7 @@
font-size: 14px; font-size: 14px;
padding-top: 12px; padding-top: 12px;
text-align: center; text-align: center;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-word; word-break: break-word;
} }
@@ -302,7 +302,7 @@
.sfbt1 { .sfbt1 {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
font-family: Metropolis-Bold, Metropolis; font-family: HarmonyOS-Bold, HarmonyOS;
font-weight: bold; font-weight: bold;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 24px; padding-top: 24px;
@@ -333,7 +333,7 @@
.cit { .cit {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -387,7 +387,7 @@
.wcu_s1 { .wcu_s1 {
color: #000; color: #000;
font: 16px; font: 16px;
font-family: Metropolis-Medium, Metropolis; font-family: HarmonyOS-Medium, HarmonyOS;
font-weight: 500; font-weight: 500;
padding: 20px 24px; padding: 20px 24px;
} }

View File

@@ -7,7 +7,7 @@
margin-top: 3.3rem; margin-top: 3.3rem;
} }
.oricoEGapp-Contact .banner_title { .oricoEGapp-Contact .banner_title {
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 1.5rem; font-size: 1.5rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -24,7 +24,7 @@
color: #000; color: #000;
} }
.oricoEGapp-Contact .title { .oricoEGapp-Contact .title {
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 1rem; font-size: 1rem;
} }
.oricoEGapp-Contact .info { .oricoEGapp-Contact .info {
@@ -43,12 +43,12 @@
height: 3rem; height: 3rem;
} }
.oricoEGapp-Contact .info .right .des { .oricoEGapp-Contact .info .right .des {
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
.oricoEGapp-Contact .info_title { .oricoEGapp-Contact .info_title {
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
margin-bottom: 0.22rem; margin-bottom: 0.22rem;
@@ -61,7 +61,7 @@
} }
.oricoEGapp-Contact .question .title { .oricoEGapp-Contact .question .title {
margin-top: 0.5rem; margin-top: 0.5rem;
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
@@ -86,7 +86,7 @@
.oricoEGapp-Contact .send { .oricoEGapp-Contact .send {
display: block; display: block;
background-color: #004bfa; background-color: #004bfa;
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 0.875rem; font-size: 0.875rem;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
color: #fff; color: #fff;
@@ -98,7 +98,7 @@
color: #ee2f53; color: #ee2f53;
} }
.oricoEGapp-Contact .contact_b { .oricoEGapp-Contact .contact_b {
font-family: "Metropolis-SemiBold"; font-family: "HarmonyOS-SemiBold";
font-size: 1rem; font-size: 1rem;
padding-top: 1.125rem; padding-top: 1.125rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
@@ -119,42 +119,42 @@
.oricoEGapp-Contact input::-webkit-input-placeholder { .oricoEGapp-Contact input::-webkit-input-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact input:-moz-placeholder { .oricoEGapp-Contact input:-moz-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact input::-moz-placeholder { .oricoEGapp-Contact input::-moz-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact input:-ms-input-placeholder { .oricoEGapp-Contact input:-ms-input-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact textarea::-webkit-input-placeholder { .oricoEGapp-Contact textarea::-webkit-input-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact textarea:-moz-placeholder { .oricoEGapp-Contact textarea:-moz-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact textarea::-moz-placeholder { .oricoEGapp-Contact textarea::-moz-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact textarea:-ms-input-placeholder { .oricoEGapp-Contact textarea:-ms-input-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact .narskfPage { .oricoEGapp-Contact .narskfPage {
width: 100%; width: 100%;

View File

@@ -7,7 +7,7 @@
margin-top: 3.3rem; margin-top: 3.3rem;
} }
.oricoEGapp-Contact .banner_title { .oricoEGapp-Contact .banner_title {
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 1.5rem; font-size: 1.5rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -24,7 +24,7 @@
color: #000; color: #000;
} }
.oricoEGapp-Contact .title { .oricoEGapp-Contact .title {
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 1rem; font-size: 1rem;
} }
.oricoEGapp-Contact .info { .oricoEGapp-Contact .info {
@@ -46,12 +46,12 @@
width: 88% !important; width: 88% !important;
} }
.oricoEGapp-Contact .info .right .des { .oricoEGapp-Contact .info .right .des {
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
.oricoEGapp-Contact .info_title { .oricoEGapp-Contact .info_title {
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
margin-bottom: 0.22rem; margin-bottom: 0.22rem;
@@ -64,7 +64,7 @@
} }
.oricoEGapp-Contact .question .title { .oricoEGapp-Contact .question .title {
margin-top: 0.5rem; margin-top: 0.5rem;
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
@@ -89,7 +89,7 @@
.oricoEGapp-Contact .send { .oricoEGapp-Contact .send {
display: block; display: block;
background-color: #004bfa; background-color: #004bfa;
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
font-size: 0.875rem; font-size: 0.875rem;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
color: #fff; color: #fff;
@@ -101,7 +101,7 @@
color: #ee2f53; color: #ee2f53;
} }
.oricoEGapp-Contact .contact_b { .oricoEGapp-Contact .contact_b {
font-family: "Metropolis-SemiBold"; font-family: "HarmonyOS-SemiBold";
font-size: 1rem; font-size: 1rem;
padding-top: 1.125rem; padding-top: 1.125rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
@@ -122,40 +122,40 @@
.oricoEGapp-Contact input::-webkit-input-placeholder { .oricoEGapp-Contact input::-webkit-input-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact input:-moz-placeholder { .oricoEGapp-Contact input:-moz-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact input::-moz-placeholder { .oricoEGapp-Contact input::-moz-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact input:-ms-input-placeholder { .oricoEGapp-Contact input:-ms-input-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact textarea::-webkit-input-placeholder { .oricoEGapp-Contact textarea::-webkit-input-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact textarea:-moz-placeholder { .oricoEGapp-Contact textarea:-moz-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact textarea::-moz-placeholder { .oricoEGapp-Contact textarea::-moz-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }
.oricoEGapp-Contact textarea:-ms-input-placeholder { .oricoEGapp-Contact textarea:-ms-input-placeholder {
color: #9e9e9f; color: #9e9e9f;
font-size: 0.875rem; font-size: 0.875rem;
font-family: "Metropolis-Regular"; font-family: "HarmonyOS-Regular";
} }

View File

@@ -29,7 +29,7 @@
display: none; display: none;
} }
.oircoEgapp-head .top-menu .it-ct { .oircoEgapp-head .top-menu .it-ct {
font-family: "Metropolis-SemiBold"; font-family: "HarmonyOS-SemiBold";
font-weight: bold; font-weight: bold;
} }
.oircoEgapp-head .top-menu .it-ct .it-1 { .oircoEgapp-head .top-menu .it-ct .it-1 {

View File

@@ -1,20 +1,20 @@
@font-face { @font-face {
font-family: "Metropolis"; font-family: "HarmonyOS";
src: url("../fonts/Metropolis-Regular.otf") format("opentype"); src: url("../fonts/HarmonyOS-Regular.otf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
src: url("../fonts/Metropolis-Bold.ttf") format("opentype"); src: url("../fonts/HarmonyOS-Bold.otf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Metropolis-Medium"; font-family: "HarmonyOS-Medium";
src: url("../fonts/Metropolis-Medium.ttf") format("opentype"); src: url("../fonts/HarmonyOS-Medium.otf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@@ -22,7 +22,7 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
/* font-family: 'Metropolis'; */ /* font-family: 'HarmonyOS'; */
-ms-overflow-style: none; -ms-overflow-style: none;
/* IE 和 Edge */ /* IE 和 Edge */
scrollbar-width: none; scrollbar-width: none;
@@ -88,7 +88,7 @@ a {
} }
body { body {
font-family: 'Metropolis-SemiBold'; font-family: 'HarmonyOS-SemiBold';
} }
/* 分页样式 */ /* 分页样式 */

View File

@@ -1,29 +1,30 @@
@font-face { @font-face {
font-family: "Metropolis"; font-family: "HarmonyOS";
src: url("../fonts/Metropolis-Regular.otf") format("opentype"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.woff2") format("woff2");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Metropolis-Bold"; font-family: "HarmonyOS-Bold";
src: url("../fonts/Metropolis-Bold.otf") format("opentype"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.woff2") format("woff2");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Metropolis-Medium"; font-family: "HarmonyOS-Medium";
src: url("../fonts/Metropolis-Medium.otf") format("opentype"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Medium.woff2") format("woff2");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/* HarmonyOS-SemiBold1 */
@font-face { @font-face {
font-family: "Metropolis-SemiBold"; font-family: "HarmonyOS-SemiBold";
src: url("../fonts/Metropolis-SemiBold.otf") format("opentype"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.woff2") format("woff2");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
body { body {
font-family: 'Metropolis-SemiBold'; font-family: 'HarmonyOS-SemiBold';
margin: auto; margin: auto;
background-color: #f5f5f5; background-color: #f5f5f5;
max-width: 750px; max-width: 750px;
@@ -591,7 +592,7 @@ button.swiper-pagination-bullet {
.Innew-text .title { .Innew-text .title {
font-size: 2.5rem; font-size: 2.5rem;
padding-bottom: 1rem; padding-bottom: 1rem;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
} }
.Inpro-text { .Inpro-text {
padding: 2rem 0 0.8rem; padding: 2rem 0 0.8rem;
@@ -600,7 +601,7 @@ button.swiper-pagination-bullet {
.Inpro-text .title { .Inpro-text .title {
font-size: 1.5rem; font-size: 1.5rem;
padding-bottom: 1rem; padding-bottom: 1rem;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
} }
.Innew-text .more { .Innew-text .more {
@@ -635,7 +636,7 @@ video img {
font-size: 1.2rem; font-size: 1.2rem;
max-height: 3rem; max-height: 3rem;
overflow: hidden; overflow: hidden;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
} }
.inprotext .t-f16 { .inprotext .t-f16 {
font-size: 1rem; font-size: 1rem;
@@ -957,12 +958,12 @@ video img {
margin: auto; margin: auto;
line-height: 2rem; line-height: 2rem;
padding: 0 3rem; padding: 0 3rem;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
} }
.ban-t { .ban-t {
padding: 0.5rem 3rem; padding: 0.5rem 3rem;
font-size: 1.125rem; font-size: 1.125rem;
font-family: 'Metropolis-Regular'; font-family: 'HarmonyOS-Regular';
} }
.btn-more { .btn-more {
background: transparent; background: transparent;
@@ -979,7 +980,7 @@ video img {
margin: auto; margin: auto;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
} }
/*类别*/ /*类别*/
.category { .category {
@@ -1095,11 +1096,11 @@ video img {
padding: 0.2rem 0; padding: 0.2rem 0;
text-align: center; text-align: center;
margin: 0; margin: 0;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
} }
.num-bg li p { .num-bg li p {
font-size: 0.8rem; font-size: 0.8rem;
font-family: 'Metropolis-Regular'; font-family: 'HarmonyOS-Regular';
} }
/*标题*/ /*标题*/
.Tech-text { .Tech-text {
@@ -1115,7 +1116,7 @@ video img {
.Tech-text p { .Tech-text p {
padding: 1rem 0; padding: 1rem 0;
font-size: 0.875rem; font-size: 0.875rem;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
} }
.pos-text { .pos-text {
@@ -1125,7 +1126,7 @@ video img {
color: #fff; color: #fff;
font-size: 0.825rem; font-size: 0.825rem;
margin: 0 auto; margin: 0 auto;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
height: 2rem; height: 2rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -1157,7 +1158,7 @@ video img {
font-size: 0.9rem; font-size: 0.9rem;
padding: 1rem 0; padding: 1rem 0;
line-height: 1.3em; line-height: 1.3em;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
word-break: break-all; word-break: break-all;
} }
.faq span { .faq span {
@@ -1172,7 +1173,7 @@ video img {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.75em; line-height: 1.75em;
color: #666; color: #666;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
} }
.faq i { .faq i {
position: absolute; position: absolute;
@@ -1209,7 +1210,7 @@ video img {
word-wrap: break-word; word-wrap: break-word;
overflow: hidden; overflow: hidden;
height: 1.5rem; height: 1.5rem;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
font-weight: 400; font-weight: 400;
word-break: break-all; word-break: break-all;
} }
@@ -1217,7 +1218,7 @@ video img {
font-size: 1.125rem; font-size: 1.125rem;
color: #7f7f7f; color: #7f7f7f;
padding-bottom: 1rem; padding-bottom: 1rem;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
font-weight: 400; font-weight: 400;
} }
/*foot */ /*foot */
@@ -1249,7 +1250,7 @@ video img {
} }
.foot-in h3 { .foot-in h3 {
font-size: 1.25rem; font-size: 1.25rem;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
font-weight: 100; font-weight: 100;
} }
.logo-input { .logo-input {
@@ -1292,7 +1293,7 @@ video img {
.foot-cate li p { .foot-cate li p {
font-size: 0.7rem; font-size: 0.7rem;
line-height: 2.5rem; line-height: 2.5rem;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
word-wrap: break-word; word-wrap: break-word;
} }
.foot-wei { .foot-wei {
@@ -1327,7 +1328,7 @@ video img {
width: 100%; width: 100%;
height: 1.2rem; height: 1.2rem;
cursor: pointer; cursor: pointer;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
} }
/*下拉*/ /*下拉*/
.m_footer .left { .m_footer .left {
@@ -1375,7 +1376,7 @@ video img {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
} }
/*下拉*/ /*下拉*/
.mask-up { .mask-up {
@@ -1985,7 +1986,7 @@ video img {
} }
.swiper-slide a { .swiper-slide a {
color: #000; color: #000;
font-family: 'Metropolis-SemiBold'; font-family: 'HarmonyOS-SemiBold';
} }
.swiper-slide img { .swiper-slide img {
max-width: 100%; max-width: 100%;
@@ -2491,7 +2492,7 @@ video img {
margin-right: 0px; margin-right: 0px;
line-height: 40px; line-height: 40px;
font-weight: 600; font-weight: 600;
font-family: Metropolis !important; font-family: HarmonyOS !important;
color: #666; color: #666;
text-align: left; text-align: left;
} }
@@ -3479,26 +3480,26 @@ video img {
font-size: 1.5rem; font-size: 1.5rem;
width: 90%; width: 90%;
margin: 4rem auto 0; margin: 4rem auto 0;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
} }
.timedesin { .timedesin {
font-size: 0.875rem; font-size: 0.875rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
line-height: 1.3rem; line-height: 1.3rem;
width: 90%; width: 90%;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
} }
.timeblue { .timeblue {
color: #004bfa; color: #004bfa;
font-size: 1.125rem; font-size: 1.125rem;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
} }
.timeblue img { .timeblue img {
vertical-align: middle; vertical-align: middle;
} }
.timeblue a { .timeblue a {
color: #004bfa; color: #004bfa;
font-family: 'Metropolis-Medium'; font-family: 'HarmonyOS-Medium';
} }
/*视频*/ /*视频*/
.video-youtu { .video-youtu {
@@ -3558,7 +3559,7 @@ video img {
} }
.vision-title { .vision-title {
font-size: 1rem; font-size: 1rem;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
width: 98%; width: 98%;
margin: 1rem auto 0; margin: 1rem auto 0;
} }
@@ -3566,7 +3567,7 @@ video img {
font-size: 0.875; font-size: 0.875;
line-height: 1.5rem; line-height: 1.5rem;
color: #707070; color: #707070;
font-family: 'Metropolis-Regular'; font-family: 'HarmonyOS-Regular';
width: 98%; width: 98%;
margin: 1rem auto; margin: 1rem auto;
} }
@@ -3584,7 +3585,7 @@ video img {
} }
.brand_title { .brand_title {
font-size: 1.125rem; font-size: 1.125rem;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
width: 98%; width: 98%;
margin: 1rem auto 0; margin: 1rem auto 0;
position: relative; position: relative;
@@ -3602,7 +3603,7 @@ video img {
font-size: 0.875; font-size: 0.875;
line-height: 1.5rem; line-height: 1.5rem;
color: #000000; color: #000000;
font-family: 'Metropolis-Regular'; font-family: 'HarmonyOS-Regular';
width: 98%; width: 98%;
margin: 1rem auto; margin: 1rem auto;
} }
@@ -3655,7 +3656,7 @@ video::-webkit-media-controls-current-time-display {
} }
.m_ach .title { .m_ach .title {
font-size: 1.125rem; font-size: 1.125rem;
font-family: 'Metropolis-Bold'; font-family: 'HarmonyOS-Bold';
width: 98%; width: 98%;
margin: 1rem auto 0; margin: 1rem auto 0;
position: relative; position: relative;
@@ -3680,7 +3681,7 @@ video::-webkit-media-controls-current-time-display {
} }
.m_ach .list-num li p { .m_ach .list-num li p {
color: #707070; color: #707070;
font-family: 'Metropolis-Regular'; font-family: 'HarmonyOS-Regular';
} }
/*新闻评测*/ /*新闻评测*/
.news-vertu { .news-vertu {
@@ -3976,7 +3977,7 @@ video::-webkit-media-controls-current-time-display {
border-radius: 8px; border-radius: 8px;
height: 48px; height: 48px;
box-shadow: none; box-shadow: none;
font-family: Metropolis-Regular, Metropolis; font-family: HarmonyOS-Regular, HarmonyOS;
} }
.comment_area { .comment_area {
width: 100% !important; width: 100% !important;

View File

@@ -1,54 +1,65 @@
/* 核心模块固定90%宽度PC端优化移动端边距 */ /* 核心模块固定90%宽度PC端优化移动端边距 */
.advantage-section { .advantage-section {
width: 90%; width: 93.5%;
margin: 0 auto; margin: 0 auto;
padding: 4rem 0 3rem 0; padding-top:0.99rem;
position: relative; position: relative;
z-index: 1; z-index: 1;
height: auto !important; height: auto !important;
min-height: auto !important; min-height: auto !important;
margin-bottom: 0.51rem;
} }
/* 标题容器:恢复原有居中样式 */ /* 标题容器:恢复原有居中样式 */
.advantage-section__title { .advantage-section__title {
font-size: clamp(1.5rem, 3vw, 2rem); font-size: 0.46rem;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
color: #333; color: #101010;
line-height: 1.2; margin:0 auto;
margin-bottom: clamp(1.5rem, 2vw, 2.5rem); margin-bottom: 0.51rem;
width: 80%;
} }
/* 列表容器:强制设置高度相关属性,确保内容正常显示 */ /* 列表容器:改为wrap换行实现2+3布局间距设为0.08rem8px */
.advantage-section__list { .advantage-section__list {
display: flex; display: flex;
justify-content: center; justify-content: flex-start; /* 左对齐排列 */
align-items: flex-start; align-items: flex-start;
gap: clamp(0.1rem, 0.3vw, 0.8rem); gap: 0.08rem; /* 列间距设计稿8px=0.08rem */
row-gap: 0.08rem; /* 行间距设计稿8px=0.08rem */
width: 100% !important; width: 100% !important;
flex-wrap: nowrap; flex-wrap: wrap; /* 允许换行 */
overflow: visible !important; /* 改为visible确保内容显示 */ overflow: visible !important;
padding: 0 !important; padding: 0 !important;
/* 强制设置高度相关属性 */
height: auto !important; height: auto !important;
min-height: 1px !important; /* 确保容器至少有高度 */ min-height: 1px !important;
position: relative !important; /* 建立BFC */ position: relative !important;
} }
/* 卡片包裹容器:确保为块级元素并继承高度 */ /* 卡片包裹容器:动态宽度控制 */
.advantage-card-wrap { .advantage-card-wrap {
display: block !important; display: block !important;
width: 100% !important;
height: auto !important; height: auto !important;
min-height: 1px !important; min-height: 1px !important;
} }
/* 卡片核心:高度自适应内容 */ /* 第一行2个卡片宽度=(100% - 1个间距)/2 */
.advantage-card-wrap:nth-child(1),
.advantage-card-wrap:nth-child(2) {
width: calc((100% - 0.08rem) / 2) !important;
}
/* 第二行3个卡片宽度=(100% - 2个间距)/3 */
.advantage-card-wrap:nth-child(3),
.advantage-card-wrap:nth-child(4),
.advantage-card-wrap:nth-child(5) {
width: calc((100% - 2 * 0.08rem) / 3) !important;
}
/* 卡片核心:宽度继承父容器,高度自适应 */
.advantage-card { .advantage-card {
flex: 0 0 calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); width: 100% !important;
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; overflow: hidden;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease; transition: transform 0.3s ease;
@@ -56,265 +67,77 @@
background: #fff; background: #fff;
position: relative; position: relative;
z-index: 1; z-index: 1;
height: auto !important; /* 高度自适应内容 */ height: auto !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 0.1rem 0.1rem 0 0 !important;
} }
/* 图片容器:设置为1:1比例 */ /* 图片容器:保持1:1比例 */
.advantage-card__img { .advantage-card__img {
width: 100%; width: 100%;
aspect-ratio: 1 / 1; /* 1:1图片比例 */ aspect-ratio: 1 / 1; /* 1:1比例 */
object-fit: cover; object-fit: cover;
background-color: #f9f9f9; background-color: #f9f9f9;
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
} }
/* 文字区域:flex垂直分布确保标题和描述都垂直居中 */ /* 文字区域:保持内边距和布局内部间距也调整为0.08rem */
.advantage-card__content { .advantage-card__content {
width: 100%; width: 100%;
padding: clamp(0.3rem, 0.4vw, 0.75rem); padding: 0.4rem 0.23rem 0.31rem 0.2rem; /* 上下内边距 */
display: flex; gap: 0.08rem; /* 内部元素间距设计稿8px=0.08rem */
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
gap: 4px;
} }
/* 标题容器:水平居中+内部两端对齐,同时垂直居中 */ /* 标题容器:间距设为0.08rem8px */
.advantage-card__heading-wrap { .advantage-card__heading-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: clamp(0.3rem, 0.5vw, 0.5rem); gap: 0.08rem; /* 设计稿8px=0.08rem */
width: 80%; width: 100%;
} }
/* 卡片标题:居左显示 */ /* 卡片标题:字体大小调整 */
.advantage-card__heading { .advantage-card__heading {
font-size: clamp(0.85rem, 1.5vw, 1.4rem); font-size: 0.34rem;
font-weight: 600; font-weight: 600;
color: #333; color: #101010;
line-height: 1.3;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
} }
/* 卡片标题右侧箭头:自适应大小,与标题协调 */ /* 描述文字样式 */
.advantage-card__description {
font-size: 0.24rem;
color:#666666;
margin-top: 0.08rem; /* 与标题间距设计稿8px=0.08rem */
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
}
/* 箭头大小 */
.card-arrow { .card-arrow {
color: #409eff;
transition: transform 0.3s ease; transition: transform 0.3s ease;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* 箭头大小根据标题字体大小自适应 */ width: 0.33rem;
width: clamp(1rem, 1.8vw, 1.5rem); height: 0.33rem;
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效果 */ /* 卡片hover效果 */
.advantage-card:hover { /* .advantage-card:hover {
transform: scale(1.03); transform: scale(1.03);
} } */
/* 箭头容器:自适应尺寸 */ /* 箭头hover位移 */
.arrow { .advantage-card:hover .card-arrow {
position: relative; transform: translateX(0.03rem);
/* 箭头尺寸跟随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;
}
} }

View File

@@ -1,9 +1,9 @@
.prodline-footer-box{ .prodline-footer-box{
width: 100%; width: 100%;
padding: 3rem 0; /* padding: 3rem 0; */
} }
.prodline-footer-box-img { .prodline-footer-box-img {
width: 90%; width: 93.5%;
margin: 0 auto; margin: 0 auto;
} }
.prodline-footer-box-img img { .prodline-footer-box-img img {

View File

@@ -5,29 +5,48 @@
} }
/* 1. 根字体适配限制最小根字体为14px从源头避免文字过小 */ /* 1. 根字体适配限制最小根字体为14px从源头避免文字过小 */
html { /* html {
/* PC端≥1024px1rem=16px原尺寸 */
font-size: 16px; font-size: 16px;
} } */
/* 平板端768px~1023px15px→16px过渡最小15px */ /* 平板端768px~1023px15px→16px过渡最小15px */
@media (max-width: 1023px) and (min-width: 768px) { @media (max-width: 1024px) and (min-width: 768px) {
html { /* html {
font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768)); font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768));
} */
html body {
margin: 0 !important;
padding: 0 !important;
width:100vw !important;
max-width: 100vw !important;
} }
} }
/* 移动端320px~767px固定14px不随屏幕缩小而变小避免文字<12px */ /* 移动端320px~767px固定14px不随屏幕缩小而变小避免文字<12px */
@media (max-width: 767px) { @media (max-width: 767px) {
html { /* html {
font-size: 14px; font-size: 14px;
} */
html body {
margin: 0 !important;
padding: 0 !important;
width:100vw !important;
max-width: 100vw !important;
} }
} }
/* 超小屏≤320px仍固定14px彻底杜绝文字过小 */ /* 超小屏≤320px仍固定14px彻底杜绝文字过小 */
@media (max-width: 320px) { @media (max-width: 320px) {
html { /* html {
font-size: 14px; font-size: 14px;
} */
html body {
margin: 0 !important;
padding: 0 !important;
width:100vw !important;
max-width: 100vw !important;
} }
} }
body { body {
@@ -38,38 +57,109 @@ a {
text-decoration: none; text-decoration: none;
display: block; 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 { .header {
width: 100%; width: 100%;
background: #fff; background: #fff;
height: 60px; height: 60px;
display: flex;
align-items: center;
} }
.header-img { .header-img {
margin: 0 auto; margin: 0 auto;
width: 90%; width: 90%;
display: flex; display: flex;
align-items: center; align-items: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
/* 强制设置根元素font-size优先级最高!important确保覆盖所有冲突 */
html {
font-size: inherit !important; /* 继承内联样式的50px而非浏览器默认值 */
-webkit-text-size-adjust: none !important; /* 禁止iOS自动调整字体大小 */
}
.oircoEgapp-foot .logo-white img {
margin: 0 auto;
}
.oircoEgapp-foot .m_footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.oircoEgapp-foot .m_footer .left,
.oircoEgapp-foot .foot-con {
display: flex;
flex-direction: row;
align-items: center;
}
.oircoEgapp-foot .m_footer .right {
max-width: 55%;
}
.oircoEgapp-foot .m_footer .left {
max-width: 40%;
justify-content: end;
margin-right: 4%;
}
.oircoEgapp-foot .foot-con span {
width: auto;
padding: 0 0.625rem;
}
.oircoEgapp-foot .foot-cate .clearfix li h3 {
margin-bottom: 10px;
}
.oircoEgapp-foot .foot-cate .clearfix li p,
.oircoEgapp-foot .foot-cate .clearfix li p a {
font-size: 12px;
}
.logo-white {
text-align: center;
padding: 1rem 0 0;
display: flex;
align-items: center;
}
.foot-cate {
padding: 0 0.16rem;
}
.foot-cate h3 {
font-size: 0.28rem;
}
.foot-cate li {
padding: 0.7rem 0;
min-height: 1.8rem;
}
.foot-cate li p {
line-height: 0.8rem;
}
.m_footer .right {
float: right;
width: 57%;
text-align: left;
}
.foot-con span {
font-size:0.28rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
width: 100%;
height: auto;
cursor: pointer;
font-family: 'HarmonyOS-Medium';
}
.oircoEgapp-foot .foot-con span {
width: auto;
padding: 0 0.125rem;
}
.m_footer .left a{
display: flex;
align-items: center;
}
.m_footer .left img {
width: 0.7rem;
padding-right: 0.2rem;
padding-top: 0;
}
.oircoEgapp-foot .m_footer .right {
max-width: 50%;
} }

View File

@@ -0,0 +1,27 @@
.more {
width: 93.5%;
margin: 0 auto;
display: flex;
justify-content: center;
padding-top: 0.33rem;
}
.more:nth-child(5) {
padding-top: 0.33rem;
padding-bottom: 0.79rem;
}
.more-img {
background: #000;
color: #fff;
font-size: 0.21rem;
width: 1.54rem;
height: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5rem;
}
.line {
width: 100%;
height:0.14rem;
}

View File

@@ -1,96 +1,43 @@
/* 设计稿750px → 1rem=100px所有尺寸按设计稿÷100换算 */
.nav-box { .nav-box {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
width: 90%; width: 93.5%;
/* 平板/PC端限制最大宽度 */
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
border-radius: 3.125rem; border-radius: 3.125rem; /* 设计稿312.5px */
/* 50px→3.125rem */ box-shadow: 0 0.125rem 0.9375rem rgba(0, 0, 0, 0.05); /* 设计稿12.5px/93.75px */
box-shadow: 0 0.125rem 0.9375rem rgba(0, 0, 0, 0.05);
/* 2px→0.125rem15px→0.9375rem */
position: relative; position: relative;
z-index: 1; z-index: 1;
padding: 0.625rem 0;
/* 10px→0.625rem(原内边距不变) */
overflow: visible; overflow: visible;
padding: 0 0.42rem; /* 设计稿42px左右内边距取中间值 */
/* min-height: fit-content; */
/* height:0.86rem; */
box-sizing: border-box;
padding-bottom: 0.2rem;
} }
.nav-item { .nav-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.625rem;
/* 10px→0.625rem */
cursor: pointer; cursor: pointer;
padding: 0.625rem 0 1.25rem;
/* 10px→0.625rem20px→1.25rem */
position: relative;
z-index: 2;
flex: 1; flex: 1;
min-width: 3rem; margin-top: -0.5rem;
/* 48px→3rem适配14px根字体 */
max-width: 5rem;
/* 80px→5rem */
text-align: center; text-align: center;
align-self: flex-start;
} }
.nav-item img { .nav-item img {
width: 4rem; width: 0.94rem; /* 设计稿80px示例图片尺寸可按实际调整 */
height: 4rem; height: 0.94rem;
/* 60px→3.75rem16px基准14px根字体下≈52.5px,仍清晰 */ margin-bottom: 0.15rem; /* 设计稿10px图片与文字间距 */
object-fit: contain;
border-radius: 0.75rem;
/* 12px→0.75rem */
position: absolute;
top: -3.125rem;
/* -50px→-3.125rem14px根字体下≈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 { .nav-item p {
font-size: 0.22rem; /* 设计稿16px文字大小 */
margin: 0; margin: 0;
/* PC端15px→0.9375rem16px根字体 */
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.9375rem15px根字体下=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.857rem14px根字体下≈12px最大0.9375rem */
}
} }

View File

@@ -1,38 +1,50 @@
/* 设计稿750px → 1rem=100px所有尺寸按设计稿÷100换算 */
.product-box { .product-box {
background: #fff; background: #fff;
padding: clamp(1.5rem, 3vw, 3rem) 0; padding-top: 0.93rem;
/* 产品块之间留间距 */
} }
.product-title { .product-title {
width: 90%; width: 93.5%;
margin: 0 auto; margin: 0 auto;
padding-bottom: clamp(1.5rem, 3vw, 3rem); padding-bottom: 0.83rem;
} }
.product-title-h2 { .product-title-h2 {
font-size: clamp(1.5rem, 3vw, 2.25rem); font-size: 0.46rem;
/* padding-top: clamp(1.5rem, 3vw, 3rem); */
} }
.product-title-p { .product-title-p {
font-size: clamp(0.875rem, 1.5vw, 1.125rem); font-size: 0.24rem;
color: #646464; color: #646464;
margin-top: clamp(0.5rem, 1vw, 0.75rem); margin-top: 0.21rem;
} }
/* 容器布局:两个产品通用 */ /* 容器布局:改为上下结构(右侧在上,左侧在下) */
.product-container { .product-container {
display: flex; display: flex;
gap: clamp(0.4rem, 1vw, 0.71rem); flex-direction: column-reverse;
gap: 0.1rem; /* 上下间距 */
margin: 0 auto; margin: 0 auto;
width: 90%; width: 93.5%;
align-items: flex-start; align-items: stretch; /* 宽度铺满 */
} }
/* 侧容器:两个产品通用 */ /* 侧容器:移到上方 */
.product-right {
flex: none; /* 取消flex比例自适应高度 */
position: relative;
border-radius: 0.1rem;
overflow: hidden;
width: 100%;
background-color: #f5f5f5;
min-height: 1.94rem;
aspect-ratio: 16/9;
}
/* 左侧容器:移到下方 */
.product-left { .product-left {
flex: 1.8; flex: none; /* 取消flex比例自适应高度 */
position: relative; position: relative;
width: 100%; width: 100%;
} }
@@ -40,54 +52,18 @@
.product-img { .product-img {
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 10px; border-radius: 0.1rem;
display: block; 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 { .product-img-2 {
top: -10%; top: auto; /* 取消顶部定位 */
/* 超出 */ bottom: -0.8rem; /* 底部超出 */
transform: none; transform: none;
width: 108%; width: 1.08rem;
/* 取消居中 */ position: absolute;
} right: 0;
/* 右侧容器:两个产品通用 */
.product-right {
flex: 3.2;
position: relative;
border-radius: 10px;
overflow: hidden;
width: 100%;
background-color: #f5f5f5;
align-self: stretch;
position: relative;
} }
.right-content { .right-content {
@@ -114,10 +90,9 @@
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
z-index: 2; z-index: 2;
display: none; /* 默认隐藏 */ display: none;
} }
/* 播放图标默认显示,暂停图标默认隐藏 */
.play-icon { .play-icon {
display: inline-block; display: inline-block;
} }
@@ -125,7 +100,6 @@
display: none; display: none;
} }
/* .paused类时切换图标 */
.video-play-btn.paused .play-icon { .video-play-btn.paused .play-icon {
display: none; display: none;
} }
@@ -133,52 +107,43 @@
display: inline-block; display: inline-block;
} }
/* 视频显示时按钮可见 */
.right-video[playing] ~ .video-play-btn, .right-video[playing] ~ .video-play-btn,
.product-right:hover .video-play-btn { .product-right:hover .video-play-btn {
opacity: 1; opacity: 1;
display: block; display: block;
} }
/* PC端适配仅微调定位参数尺寸不变 */
@media (min-width: 1024px) {
.product-container {
width: 90%;
}
.product-left { /* 悬浮图容器:适配下方布局 */
flex: 2; .product-img-hover {
} width: auto;
position: absolute;
right: 0;
bottom: 0;
z-index: 33;
}
.right {
.product-right { right: -0.3rem;
flex: 5;
}
/* 宽度保持一致,仅调定位偏移 */ }
.product-img-1 { /* 图片尺寸统一用rem */
top: -11%; .img1, .img2, .img3, .img4, .img5 {
} width: 3.56rem;
max-width: 3.56rem;
.product-img-2 {
top: -12%;
}
} }
/* 超小屏适配:尺寸不变,微调定位 */ .img1 {
@media (max-width: 375px) { max-width: 2.76rem;
.product-left { }
flex: 1.5; .img2 {
} max-width: 2.7rem;
}
.product-right { .img3 {
flex: 3.5; max-width: 2.84rem;
} }
.img4 {
/* 宽度仍保持一致 */ max-width: 2.5rem;
.product-img-1 { }
top: -6%; .img5 {
} max-width: 2.68rem;
.product-img-2 {
top: -8%;
}
} }

View File

@@ -51,7 +51,7 @@
/* 标题:超出一行显示省略号(左对齐) */ /* 标题:超出一行显示省略号(左对齐) */
.product-card-title2 { .product-card-title2 {
font-size: clamp(12px, 2vw, 18px); font-size: clamp(16px, 2vw, 19px);
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 5px; margin-bottom: 5px;

View File

@@ -1,7 +1,8 @@
/* 容器布局:通用基础样式(仅宽度、外边距,不涉及高度) */ /* 设计稿750px → 1rem=100px所有尺寸按设计稿÷100换算 */
/* 容器布局:通用基础样式 */
.product-card-box { .product-card-box {
width: 90%; width: 93.5%;
margin: clamp(1rem, 2vw, 1.5rem) auto 0; margin: 0.12rem auto 0;
padding: 0; padding: 0;
} }
@@ -9,276 +10,115 @@
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: wrap;
overflow: visible !important; /* 改为visible显示所有内容 */ overflow: visible !important;
padding: 0 clamp(0.2rem, 0.6vw, 0.3rem); height: auto !important;
height: auto !important; /* 高度自适应内容 */ gap: 0.12rem; /* 间距调整为0.12rem */
justify-content: space-between; /* 两端对齐,确保铺满 */
align-items: flex-start;
} }
/* 卡片包裹容器:确保不独占一行 */ /* 卡片包裹容器:强制一行2个并铺满 */
.product-card-wrap { .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; display: block !important;
width: calc(50% - clamp(0.25rem, 0.5vw, 0.5rem)) !important; width: calc(50% - 0.06rem) !important; /* 50%宽度 - 间距的一半0.12rem/2=0.06rem */
height: auto !important;
margin: 0 !important; /* 移除额外margin */
}
/* 卡片核心:通用样式 */
.product-card {
background: rgb(242, 243, 245);
cursor: pointer;
width: 100% !important;
flex: none;
box-shadow: 0 0.1125rem 0.4rem rgba(0, 0, 0, 0.05);
margin: 0 !important; margin: 0 !important;
padding: 0 !important; box-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, 0.08); /* 包裹容器阴影 */
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; display: flex;
flex-direction: column; flex-direction: column;
height: auto !important; /* 高度自适应内容 */ height: auto !important;
}
/* 卡片hover效果移动端+平板特有 */
.product-card:hover {
transform: scale(clamp(1.01, 1.02, 1.03));
transition: transform 0.3s ease; transition: transform 0.3s ease;
} border-radius: 0.07rem;
}
/* 图片容器:移动端+平板固定占比 */ /* 卡片hover效果通用 */
.product-card-img { .product-card:hover {
transform: scale(1.02);
}
/* 图片容器:通用样式 */
.product-card-img {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
flex: 0 0 auto; /* 改为auto高度自适应 */ flex: 0 0 auto;
aspect-ratio: 3 / 2.8; /* 保持图片比例 */ aspect-ratio: 3 / 2.8;
margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
overflow: hidden; overflow: hidden;
border-radius: clamp(0.2rem, 0.4vw, 0.25rem); }
}
/* 产品图片:移动端+平板特有 */ /* 产品图片:通用样式 */
.product-card img { .product-card img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
} }
/* 文字容器:移动端+平板高度自适应 */ /* 文字容器:通用样式(居中对齐) */
.product-card-text { .product-card-text {
flex: 1 1 auto; /* 改为flex:1高度自适应内容 */ flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-left: clamp(0.8rem, 2vw, 1.5rem);
padding-right: clamp(0.8rem, 2vw, 1.5rem);
height: auto !important; /* 高度自适应 */
}
/* 标题样式:移动端+平板特有,高度自适应 */ height: auto !important;
.product-card-title { align-items: center;
font-size: clamp(0.8rem, 1.3vw, 1.2rem); text-align: center;
}
/* 标题样式:通用 */
.product-card-title {
font-size: 0.3rem;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: auto !important; /* 移除固定高度 */ height: auto !important;
margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem); /* 添加间距 */ margin-bottom: 0.21rem;
line-height: 1.2;
}
/* 描述样式:移动端+平板高度自适应 */ }
.product-card-desc {
font-size: clamp(0.7rem, 1.1vw, 0.9rem); /* 描述样式通用2行截断 */
.product-card-desc {
font-size: 0.24rem;
color: #656565; color: #656565;
word-break: break-word; word-break: break-word;
height: auto !important; /* 移除固定高度 */ height: auto !important;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
line-height: 1.4; 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- 后续修改仅改这里 */ .product-card-link {
/* ######################################################################### */ width: 100%;
@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; display: flex;
align-items: center;
justify-content: center; justify-content: center;
align-items: center; flex: 0 0 auto;
width: 100%; padding: 0.35rem 0 0.4rem;
flex: 0 0 auto; /* 改为auto高度自适应 */ height: auto !important;
aspect-ratio: 3 / 2.8; /* 保持图片比例 */ text-align: center;
margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem); }
overflow: hidden;
border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
}
/* 产品图片PC端特有 */ /* 链接图标:通用样式 */
.product-card img { .product-card-link img {
width: 100%; width: 1.54rem;
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; height: auto;
object-fit: contain; object-fit: contain;
}
} }

View File

@@ -5,8 +5,8 @@
.auto-swiper-container { .auto-swiper-container {
width: 100%; width: 100%;
/* 关键:高度 = 视口高度的百分比可调整如60vh=屏幕高度60% */ /* 关键:高度 = 视口高度的百分比可调整如60vh=屏幕高度60% */
margin-bottom: 5.625rem; margin-bottom:1.5rem;
max-height: 900px; /* max-height: 900px; */
min-height: 300px; min-height: 300px;
position: relative; position: relative;
margin-top:60px; margin-top:60px;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB