update
This commit is contained in:
toom1996
@ -1,4 +1,5 @@
|
||||
---
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from '../../utils/const'
|
||||
import { APP_NAME, APP_COMPANY } from '../config/app.ts'
|
||||
---
|
||||
|
||||
@ -11,7 +12,7 @@ import { APP_NAME, APP_COMPANY } from '../config/app.ts'
|
||||
<div class="footer-column">
|
||||
<h4>浏览</h4>
|
||||
<ul>
|
||||
<li><a href="/news" title="新闻专栏">新闻专栏</a></li>
|
||||
<li><a href={TP2_COLUMN_NEWS_URL} title={TP2_COLUMN_NEWS}>{TP2_COLUMN_NEWS}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
|
||||
476
src/components/template_2/Footer.astro
Normal file
476
src/components/template_2/Footer.astro
Normal file
@ -0,0 +1,476 @@
|
||||
---
|
||||
import { getConfig } from "../../../utils/config";
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL, TP2_COLUMN_ABOUT_US, TP2_COLUMN_ABOUT_US_URL, TP2_COLUMN_CONTACT_US, TP2_COLUMN_CONTACT_US_URL, TP2_COLUMN_PROTECT, TP2_COLUMN_PROTECT_URL } from "../../../utils/const";
|
||||
const config = getConfig(Astro)
|
||||
const { path = [] } = Astro.props
|
||||
---
|
||||
<footer class="v4 n09-footer footer" data-component="n09-footer">
|
||||
<div class="container">
|
||||
<div class="breadcrumbs">
|
||||
<ul class="breadcrumbs__list">
|
||||
{
|
||||
path?.map(e => {
|
||||
return <li class="breadcrumbs__item">
|
||||
<a class="breadcrumbs__link" title={e.title} href={`${e.url}`}>{e.title}</a>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="usp-wrap"></div>
|
||||
<div class="footer-links">
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-lg-4">
|
||||
<div class="footer-links__block">
|
||||
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">
|
||||
购买产品
|
||||
</div>
|
||||
<ul class="footer-links__list" role="menubar">
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="手机" data-title="手机" class="footer-links__link" href="/cn/phones/">
|
||||
手机
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="穿戴" data-title="穿戴" class="footer-links__link" href="/cn/wearables/">
|
||||
穿戴
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="鸿蒙电脑" data-title="鸿蒙电脑" class="footer-links__link" href="/cn/harmonyos-computer/">
|
||||
鸿蒙电脑
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="笔记本" data-title="笔记本" class="footer-links__link" href="/cn/laptops/">
|
||||
笔记本
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="显示器" data-title="显示器" class="footer-links__link" href="/cn/monitors/">
|
||||
显示器
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="打印机" data-title="打印机" class="footer-links__link" href="/cn/printers/">
|
||||
打印机
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="平板" data-title="平板" class="footer-links__link" href="/cn/tablets/">
|
||||
平板
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="智慧屏" data-title="智慧屏" class="footer-links__link" href="/cn/visions/">
|
||||
智慧屏
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="耳机音箱" data-title="耳机音箱" class="footer-links__link" href="/cn/audio/">
|
||||
耳机音箱
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="路由器" data-title="路由器" class="footer-links__link" href="/cn/routers/">
|
||||
路由器
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="配件" data-title="配件" class="footer-links__link" href="/cn/accessories/overview/">
|
||||
配件
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="商用产品" data-title="商用产品" class="footer-links__link" href="https://qingyun.huawei.com/products-and-solutions/?utm_medium=referral&utm_source=consumer.huawei.com" target="_blank" rel="noopener noreferrer">
|
||||
商用产品
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="教育商店" data-title="教育商店" class="footer-links__link" href="https://www.vmall.com/portal/activity/index.html?pn=educationcenterpc" target="_blank" rel="noopener noreferrer">
|
||||
教育商店
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-lg-4">
|
||||
<div class="footer-links__block">
|
||||
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">服务支持</div>
|
||||
<ul class="footer-links__list" role="menubar">
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="保修政策" data-title="保修政策" class="footer-links__link" href="/cn/support/warranty-policy/">
|
||||
保修政策
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="上门安装" data-title="上门安装" class="footer-links__link" href="/cn/support/install/">
|
||||
上门安装
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="维修服务" data-title="维修服务" class="footer-links__link" href="/cn/support/break-fix/">
|
||||
维修服务
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="保修期及权益查询" data-title="保修期及权益查询" class="footer-links__link" href="/cn/support/warranty-query/">
|
||||
保修期及权益查询
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="维修备件价格" data-title="维修备件价格" class="footer-links__link" href="/cn/support/sparepart-price/">
|
||||
维修备件价格
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="服务进度查询" data-title="服务进度查询" class="footer-links__link" href="/cn/support/inquiry/">
|
||||
服务进度查询
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title={TP2_COLUMN_CONTACT_US} class="footer-links__link" href={TP2_COLUMN_CONTACT_US_URL}>
|
||||
{TP2_COLUMN_CONTACT_US}
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="服务隐私声明" data-title="服务隐私声明" class="footer-links__link" href="/cn/support/service-privacy-notice/">
|
||||
服务隐私声明
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="商用服务" data-title="商用服务" class="footer-links__link" href="https://bsupport.huawei.com/" target="_blank" rel="noopener noreferrer">
|
||||
商用服务
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-lg-4">
|
||||
<div class="footer-links__block">
|
||||
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">
|
||||
应用与下载
|
||||
</div>
|
||||
<ul class="footer-links__list" role="menubar">
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="终端云服务" data-title="终端云服务" class="footer-links__link" href="/cn/mobileservices/">
|
||||
终端云服务
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="华为商城 APP" data-title="华为商城 APP" class="footer-links__link" href="https://m.vmall.com/app/download?cid=1457312" target="_blank" rel="noopener noreferrer">
|
||||
华为商城 APP
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="我的华为 APP " data-title="我的华为 APP " class="footer-links__link" href="/cn/myhuawei-app/">
|
||||
我的华为 APP
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="华为手机助手" data-title="华为手机助手" class="footer-links__link" href="https://consumer.huawei.com/cn/support/hisuite/">
|
||||
华为手机助手
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="华为电脑管家" data-title="华为电脑管家" class="footer-links__link" href="https://consumer.huawei.com/cn/support/pc-manager/">
|
||||
华为电脑管家
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="HarmonyOS 5" data-title="HarmonyOS 5" class="footer-links__link" href="/cn/harmonyos-next/">
|
||||
HarmonyOS 5
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="预置应用公示" data-title="预置应用公示" class="footer-links__link" href="/cn/support/apk/">
|
||||
预置应用公示
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="HUAWEI HiCar" data-title="HUAWEI HiCar" class="footer-links__link" href="/cn/phones/hicar/">
|
||||
HUAWEI HiCar
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2 col-lg-4">
|
||||
<div class="footer-links__block">
|
||||
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">
|
||||
新闻中心
|
||||
</div>
|
||||
<ul class="footer-links__list" role="menubar">
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title={TP2_COLUMN_NEWS} class="footer-links__link" href={TP2_COLUMN_NEWS_URL}>
|
||||
{TP2_COLUMN_NEWS}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="华为活动" class="footer-links__link" href="/cn/press/events/">
|
||||
华为活动
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2 col-lg-4">
|
||||
<div class="footer-links__block">
|
||||
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">
|
||||
关于我们
|
||||
</div>
|
||||
<ul class="footer-links__list" role="menubar">
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title={TP2_COLUMN_ABOUT_US} class="footer-links__link" href={TP2_COLUMN_ABOUT_US_URL}>
|
||||
{TP2_COLUMN_ABOUT_US}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="可持续发展" data-title="可持续发展" class="footer-links__link" href="/cn/sustainability/">
|
||||
可持续发展
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="隐私" data-title="隐私" class="footer-links__link" href="/cn/privacy/privacy-statement-huawei/">
|
||||
隐私
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="华为商城" data-title="华为商城" class="footer-links__link" href="https://www.vmall.com/index.html?cid=27629229" target="_blank" rel="noopener noreferrer">
|
||||
华为商城
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="HarmonyOS 开发者" data-title="HarmonyOS 开发者" class="footer-links__link" href="https://developer.huawei.com/consumer/cn/" target="_blank" rel="noopener noreferrer">
|
||||
HarmonyOS 开发者
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="华为云" data-title="华为云" class="footer-links__link" href="https://www.huaweicloud.com/" target="_blank" rel="noopener noreferrer">
|
||||
华为云
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="企业业务" data-title="企业业务" class="footer-links__link" href="https://e.huawei.com/cn/" target="_blank" rel="noopener noreferrer">
|
||||
企业业务
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="运营商网络" data-title="运营商网络" class="footer-links__link" href="https://carrier.huawei.com/cn/" target="_blank" rel="noopener noreferrer">
|
||||
运营商网络
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="华为集团" data-title="华为集团" class="footer-links__link" href="https://www.huawei.com/cn/" target="_blank" rel="noopener noreferrer">
|
||||
华为集团
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="加入华为" data-title="加入华为" class="footer-links__link" href="https://career.huawei.com/reccampportal/campus4_index.html#campus4/content.html" target="_blank" rel="noopener noreferrer">
|
||||
加入华为
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-links__item" role="menuitem">
|
||||
<a title="内容举报" data-title="内容举报" class="footer-links__link
|
||||
goto-complaint-page" href="/cn/complaint-page/" target="_blank" rel="noopener noreferrer">
|
||||
内容举报
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<div class="row">
|
||||
<div class="contact__block col-xl-2 col-md-6">
|
||||
<div class="heading contact__title heading-06">
|
||||
在线支持
|
||||
</div>
|
||||
|
||||
<p class="contact__text">
|
||||
<a title="消费者服务热线">消费者服务热线</a>
|
||||
</p>
|
||||
|
||||
<p class="contact__text phone-icon">950800</p>
|
||||
|
||||
<p class="contact__text">
|
||||
<a title="7*24小时 | 普通话">7*24小时 | 普通话</a>
|
||||
</p>
|
||||
|
||||
<p class="contact__text phone-icon">950801</p>
|
||||
|
||||
<p class="contact__text">
|
||||
<a href="https://celia.consumer.huawei.com/official/#/?businessUUID=fe8192189f0a40e8a883ab8bdf1ba8ea" title="在线客服 | 7*24小时" target="_blank" rel="noopener noreferrer">在线客服 | 7*24小时</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="contact__block col-xl-2 col-md-6">
|
||||
<div class="heading contact__title heading-06">
|
||||
线下支持
|
||||
</div>
|
||||
|
||||
<p class="contact__text">
|
||||
<a href="/cn/support/service-center/" title="服务店查询">服务店查询</a>
|
||||
</p>
|
||||
|
||||
<p class="contact__text">
|
||||
<a href="/cn/retail/" title="零售店查询">零售店查询</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- <div class="contact__block col-xl-4 col-md-6">
|
||||
<div class="heading contact__title heading-06">
|
||||
关注我们
|
||||
</div>
|
||||
<ul class="contact__social-links lazyload-target">
|
||||
<li class="contact__social-item">
|
||||
<a title="微信" class="contact__social-link" data-social="weixin">
|
||||
<span class="icon-lazy" data-name="font-ico-weixin"></span>
|
||||
<span class="contact__social-qrcode">
|
||||
<picture>
|
||||
<source class="lazyload-img" media="(max-width: 1199.98px)" data-srcset="//consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/v4/footer/weixin-mob.jpg" />
|
||||
<img class="lazyload-img" data-src="//consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/v4/footer/weixin.jpg" alt="weixin" srcset="" />
|
||||
</picture>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="contact__social-item">
|
||||
<a title="微博" class="contact__social-link" data-social="weibo" href="http://t.sina.com.cn/huaweidevice" target="_blank" rel="noopener noreferrer">
|
||||
<span class="icon-lazy" data-name="font-ico-weibo"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-legals">
|
||||
<div class="row">
|
||||
<div class="copyright col-xl-4 col-md-8">
|
||||
<small class="copyright__text">版权所有 © {config.app_company}
|
||||
。保留一切权利。{config.app_biling}</small>
|
||||
</div>
|
||||
<div class="bottom-links col-xl-5">
|
||||
<ul class="bottom-links__list">
|
||||
|
||||
<li class="bottom-links__item">
|
||||
<a title="使用条款" class="bottom-links__link" href="/cn/legal/terms-of-use/">
|
||||
使用条款
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="bottom-links__item">
|
||||
<a title="隐私声明" class="bottom-links__link" href="/cn/privacy/privacy-policy/">
|
||||
隐私声明
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="bottom-links__item">
|
||||
<a title="法律信息" class="bottom-links__link" href="/cn/legal/">
|
||||
法律信息
|
||||
</a>
|
||||
</li>
|
||||
<li class="bottom-links__item">
|
||||
<a title={TP2_COLUMN_PROTECT} class="bottom-links__link" href={TP2_COLUMN_PROTECT_URL}>
|
||||
{TP2_COLUMN_PROTECT}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<style>
|
||||
.footer-legals .row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
function isMobile() {
|
||||
return window.innerWidth <= 991;
|
||||
}
|
||||
|
||||
function setupFooterAccordion() {
|
||||
const btns = document.querySelectorAll('.js-footer-accordion-btn');
|
||||
btns.forEach(btn => {
|
||||
// 先重置
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
btn.classList.remove('footer-links__title--active');
|
||||
const list = btn.nextElementSibling;
|
||||
if (list && list.classList.contains('footer-links__list') && list instanceof HTMLElement) {
|
||||
list.style.display = '';
|
||||
}
|
||||
|
||||
// 只在小屏下绑定
|
||||
(btn as HTMLElement).onclick = function (e: MouseEvent) {
|
||||
if (!isMobile()) return;
|
||||
e.preventDefault();
|
||||
const isActive = btn.classList.toggle('footer-links__title--active');
|
||||
btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
|
||||
// 展开/收起对应的 ul
|
||||
if (list && list.classList.contains('footer-links__list') && list instanceof HTMLElement) {
|
||||
list.style.display = isActive ? 'block' : 'none';
|
||||
}
|
||||
// 收起其它
|
||||
btns.forEach(otherBtn => {
|
||||
if (otherBtn !== btn) {
|
||||
otherBtn.classList.remove('footer-links__title--active');
|
||||
otherBtn.setAttribute('aria-expanded', 'false');
|
||||
const otherList = otherBtn.nextElementSibling;
|
||||
if (otherList && otherList.classList.contains('footer-links__list') && otherList instanceof HTMLElement) {
|
||||
otherList.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化
|
||||
setupFooterAccordion();
|
||||
// 屏幕尺寸变化时重置
|
||||
window.addEventListener('resize', setupFooterAccordion);
|
||||
});
|
||||
</script>
|
||||
140
src/components/template_2/Header.astro
Normal file
140
src/components/template_2/Header.astro
Normal file
@ -0,0 +1,140 @@
|
||||
---
|
||||
import { getConfig } from "../../../utils/config";
|
||||
import { Image } from 'astro:assets';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from "../../../utils/const";
|
||||
const config = getConfig(Astro)
|
||||
---
|
||||
<div class="v4 header slide-down-corporation nav-v2 scroll-with-screen" id="header-v4" data-component="header" role="navigation">
|
||||
<div id="topTipsBox" class="top-tips-box"></div>
|
||||
|
||||
<input title="main-nav" type="hidden" id="mainNav" value="nav-v2" />
|
||||
<div class="v4 n01-main-navigation main-navigation nav-v2" data-component="n01-main-navigation">
|
||||
<div class="container main-navigation__container">
|
||||
<a title="logo" class="logo" href="/" data-navicon="logo">
|
||||
<div>
|
||||
<Image src={config.app_logo} alt="logo" width="25" height="25" loading="eager"/>
|
||||
</div>
|
||||
<div class="company_name">
|
||||
{config.app_name}
|
||||
</div>
|
||||
</a>
|
||||
<nav class="main-nav" role="presentation">
|
||||
<div class="lf-nav nav-zone">
|
||||
<ul class="main-nav__list" role="menubar">
|
||||
<li class="main-nav__item" role="menuitem">
|
||||
<a title={TP2_COLUMN_NEWS} class="main-nav__link unhover title-hide-v5" href={TP2_COLUMN_NEWS_URL}>{TP2_COLUMN_NEWS}</a>
|
||||
</li>
|
||||
|
||||
<!-- <li class="main-nav__item" role="menuitem">
|
||||
<a title="企业文化" data-navicon="企业文化" class="main-nav__link unhover title-hide-v5" href="/cn/phones/">企业文化</a>
|
||||
</li>
|
||||
|
||||
<li class="main-nav__item" role="menuitem">
|
||||
<a title="产品介绍" data-navicon="产品介绍" class="main-nav__link unhover title-hide-v5" href="/cn/harmonyos-computer/">产品介绍</a>
|
||||
</li> -->
|
||||
|
||||
<li class="main-nav__item" role="menuitem">
|
||||
<a title="联系方式(888-888)" data-navicon="联系方式" class="main-nav__link unhover title-hide-v5" href="/cn/harmonyos-computer/">联系方式(888-888)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="rg-nav nav-zone">
|
||||
<ul class="main-nav__list" role="menubar">
|
||||
<li class="main-nav__item " role="menuitem" tabindex="0">
|
||||
<a title="服务热线" class="main-nav__link unhover title-hide-v5" href="/cn/support/">服务热线888-888</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</nav>
|
||||
|
||||
<div class="nav-addons">
|
||||
<button id="open-nav" aria-haspopup="true" role="button" aria-expanded="false" class="nav-toggle js-nav-toggle">
|
||||
<span class="btn-line"></span>
|
||||
<span class="sr-only">打开菜单</span>
|
||||
<span class="btn-line"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 确保 DOM 完全加载后再执行代码
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 获取导航栏元素 - 请根据实际情况修改选择器
|
||||
const headerNav = document.querySelector('#header-v4');
|
||||
const btn = document.getElementById("open-nav");
|
||||
const mainNav = document.querySelector('.main-nav');
|
||||
// 如果未找到导航栏元素，记录错误并退出
|
||||
if (!headerNav) {
|
||||
console.error('导航栏元素未找到，请检查选择器是否正确');
|
||||
return;
|
||||
}
|
||||
// 滚动处理函数
|
||||
function handleScroll(e) {
|
||||
// 获取当前滚动位置
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const headerNav = document.querySelector('#header-v4');
|
||||
// 检查滚动位置并更新类名
|
||||
if (scrollTop > 1) {
|
||||
if (headerNav?.classList.contains('header-scroll')) {
|
||||
return;
|
||||
}
|
||||
headerNav?.classList.add('header-scroll');
|
||||
} else if (scrollTop < 1) {
|
||||
headerNav?.classList.remove('header-scroll');
|
||||
}
|
||||
}
|
||||
// 初始调用一次以设置正确的状态
|
||||
handleScroll();
|
||||
// 添加滚动事件监听器
|
||||
window.addEventListener('scroll', handleScroll, true);
|
||||
|
||||
btn?.addEventListener('click', function(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
if (!mainNav || !btn) return;
|
||||
const isOpen = mainNav.classList.toggle('main-nav--opened');
|
||||
btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
btn.classList.toggle('nav-toggle--active', isOpen);
|
||||
// 控制 li 显示
|
||||
const items = mainNav.querySelectorAll('.main-nav__item');
|
||||
items.forEach(item => item.classList.toggle('main-nav__item--visible', isOpen));
|
||||
// 原有隐藏逻辑
|
||||
const logo = document.querySelector('.main-navigation__container .logo');
|
||||
if (logo) logo.classList.add('hide');
|
||||
const login = document.querySelector('.nav-addons .nav-addons__link.login-v4-wrap');
|
||||
if (login && login instanceof HTMLElement) login.style.display = 'none';
|
||||
const bag = document.querySelector('.nav-addons__link.nv-addons__bag');
|
||||
if (bag && bag instanceof HTMLElement) bag.style.display = 'none';
|
||||
const shopBag = document.querySelector('.nav-addons .shop-bag-bnt');
|
||||
if (shopBag && shopBag instanceof HTMLElement) shopBag.style.display = 'none';
|
||||
const search = document.querySelector('.nav-addons__link.nav-addons__search');
|
||||
if (search && search instanceof HTMLElement) search.style.display = 'none';
|
||||
}, false);
|
||||
|
||||
// 点击空白处关闭菜单
|
||||
document.addEventListener('click', function(e: MouseEvent) {
|
||||
if (!mainNav || !btn) return;
|
||||
if (
|
||||
mainNav.classList.contains('main-nav--opened') &&
|
||||
!(e.target instanceof Element && (e.target.closest('.main-nav') || e.target.closest('#open-nav')))
|
||||
) {
|
||||
mainNav.classList.remove('main-nav--opened');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
btn.classList.remove('nav-toggle--active');
|
||||
// 移除 li 显示
|
||||
const items = mainNav.querySelectorAll('.main-nav__item');
|
||||
items.forEach(item => item.classList.remove('main-nav__item--visible'));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.company_name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -5,6 +5,7 @@ import '../styles/global.css'
|
||||
import '../styles/theme.css'
|
||||
const {description, title, keywords} = Astro.props;
|
||||
const {template_config} = Astro.locals;
|
||||
console.log(template_config)
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
@ -63,8 +64,6 @@ const {template_config} = Astro.locals;
|
||||
© {new Date().getFullYear()} { template_config.app_company }. 保留所有权利。
|
||||
</div>
|
||||
<div class="icpoo">
|
||||
<a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/" title="ICP备案信息">新ICP备2023000253号</a>
|
||||
<span class="margin-oc">新B2-20230068号</span>
|
||||
<a target="_blank" rel="noopener" class="beiancil" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=65400402000209" title="公安备案信息">
|
||||
<span>新公网安备 65400402000209号</span>
|
||||
</a>
|
||||
|
||||
31
src/layouts/Layout_2.astro
Normal file
31
src/layouts/Layout_2.astro
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
import Footer from '../components/template_2/Footer.astro'
|
||||
import Header from '../components/template_2/Header.astro'
|
||||
import '../styles/template_2/common-v4-nav-v2.css'
|
||||
import '../styles/template_2/banner.css'
|
||||
import '../styles/template_2/style.css'
|
||||
import '../styles/template_2/nav.css'
|
||||
const { description = '', title = '', keywords = '', breadcrumb = [] } = Astro.props;
|
||||
import {getConfig} from '../../utils/config'
|
||||
const config = getConfig(Astro)
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href={config.app_logo} />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="keywords" content={keywords} />
|
||||
<meta name="baidu-site-verification" content="codeva-kLMUXYuoiO" />
|
||||
<!-- <link href="https://fonts.googleapis.com/css2?family=Graphik:wght@400;500;600;700&display=swap" rel="stylesheet"> -->
|
||||
</head>
|
||||
<body class="huawei-v4 huawei-cn page-name-books none-ecommerce">
|
||||
<Header />
|
||||
<!-- <main> -->
|
||||
<slot />
|
||||
<!-- </main> -->
|
||||
<Footer path={breadcrumb}/>
|
||||
</body>
|
||||
</html>
|
||||
@ -24,6 +24,7 @@ export async function onRequest (context: any, next: any) {
|
||||
}
|
||||
|
||||
const {code, data} = await websiteConfig(host);
|
||||
|
||||
if (!data || code !== 0) {
|
||||
context.locals.is_write = 1;
|
||||
return context.rewrite('/404');
|
||||
@ -31,7 +32,7 @@ export async function onRequest (context: any, next: any) {
|
||||
|
||||
if (!context.locals.is_write) {
|
||||
context.locals.is_write = 1;
|
||||
context.locals.template_number = 1;
|
||||
context.locals.template_number = 2;
|
||||
context.locals.template_config = data;
|
||||
return context.rewrite('/template/' + context.locals.template_number + context.url.pathname);
|
||||
}
|
||||
|
||||
284
src/pages/template/2/about-us.astro
Normal file
284
src/pages/template/2/about-us.astro
Normal file
@ -0,0 +1,284 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_2.astro";
|
||||
import { getConfig } from "../../../../utils/config";
|
||||
import {
|
||||
TP2_COLUMN_ABOUT_US,
|
||||
TP2_COLUMN_ABOUT_US_URL,
|
||||
} from "../../../../utils/const";
|
||||
const config = getConfig(Astro);
|
||||
const breadcrumb = [
|
||||
{ title: "主页", url: "/" },
|
||||
{ title: TP2_COLUMN_ABOUT_US, url: TP2_COLUMN_ABOUT_US_URL },
|
||||
];
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={TP2_COLUMN_ABOUT_US + ` - ${config.app_name}`}
|
||||
breadcrumb={breadcrumb}
|
||||
>
|
||||
<div id="content" class="main" data-site="中国">
|
||||
<div>
|
||||
<!-- 活动与新闻-->
|
||||
<div class="hcomponent-page-info">
|
||||
<div class="news-detail-title">
|
||||
<div class="container-custom fix-p-color">
|
||||
<h1><span>华为责任矿产尽职管理声明</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div data-mod-id="eff0ddd73dbb4d069e65086c4339ccd5"> -->
|
||||
<div
|
||||
data-mod-name-pc="@cloud/hcomponent-share-bar/pc/index"
|
||||
data-mod-name-m="@cloud/hcomponent-share-bar/m/index"
|
||||
data-mod-name="hcomponent-share-bar"
|
||||
data-loaded="true"
|
||||
>
|
||||
<!-- 活动与新闻-->
|
||||
|
||||
<div>
|
||||
<!-- 社交分享栏 -->
|
||||
<div class="container-custom hcomponent-share-bar">
|
||||
<div class="container-custom">
|
||||
<ul class="share-box list-unstyled hasLine">
|
||||
<li class="line"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
<div
|
||||
data-mod-id="hcomponent-news-detail-content_920738a0bc3049d489a293983eb596d8"
|
||||
>
|
||||
<div
|
||||
data-mod-name-pc="@cloud/hcomponent-news-detail-content/pc/index"
|
||||
data-mod-name-m="@cloud/hcomponent-news-detail-content/m/index"
|
||||
data-mod-name="hcomponent-news-detail-content"
|
||||
data-loaded="true"
|
||||
>
|
||||
<!-- 活动与新闻-->
|
||||
<div class="hcomponent-news-detail-content">
|
||||
<div class="news-detail-box container-custom clearfix">
|
||||
<div class="news-detail-content">
|
||||
<p>
|
||||
作为联合国全球契约、GeSI、RBA、RMI组织的成员，华为公司一直坚持把全球社会责任作为我们的目标，实施道德采购，促进产业链可持续发展。
|
||||
</p>
|
||||
<p>
|
||||
华为承诺并致力于以负责任的方式采购产品中使用的锡、钽、钨、金、钴、云母等矿产原料，并参照《经济合作与发展组织关于来自受冲突影响和高风险区域的矿石的负责任供应链尽职调查指南》、《中国负责任矿产供应链尽责管理指南》（以下统称“指南”）等要求，推动供应商制定政策以防范和降低其制造产品中所含的矿产以直接或间接的方式为高风险地区中，可能助长严重侵犯人权、严重环境危害、严重健康安全隐患、严重腐败等的团体提供资金或利益的风险，要求供应商对其采购的产品中使用到矿产
|
||||
产品进行来源追踪和责任矿产尽职调查，并与客户分享尽责调查信息，以确保供应链政策与指南要求保持一致，逐步提高供应链透明度和供应链治理能力。
|
||||
</p>
|
||||
<p>
|
||||
供应链的责任矿产尽责管理是一个持续改进的过程，需要企业、政府和非政府组织的承诺和合作才能解决。华为公司支持通过行业合作来处理矿产供应链中的社会责任问题，我们将持续参与行业组织的活动，与客户和供应商一起寻求可持续的解决方案，推动矿产供应链的可持续发展。
|
||||
</p>
|
||||
<p style="text-align: right;">华为技术有限公司</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/-/media/hcomponent-news-detail-content/1.0.1.20250530113357/component/corp/2020/js/lib/vendor/katex/katex.min.css?ver=202410101545"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.main {
|
||||
padding-top: 10rem;
|
||||
h1 {
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 1em;
|
||||
line-height: 1.95em;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
@media (max-width:767px) {
|
||||
.container-custom>.container-custom {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mt20{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.main .bottom-box .share-box {
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.main .share-box {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
.share-box.list-unstyled:not(.hasLine){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.main .hasLine li {
|
||||
padding: 0 22px;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
.main .share-box li .wechat-qrcode {
|
||||
top: 30px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.main .share-box li .wechat-qrcode p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main .hasLine .line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dddddd;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.main .share-box.s-bottom {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.news-detail-box {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width:100%
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body,html {
|
||||
font-size:16px
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
max-width: 1430px;
|
||||
width: 85.652%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1799.136px;
|
||||
width: 93.705%
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
body,html {
|
||||
font-size:17px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
body,html {
|
||||
font-size:18px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
.col-ls-4 {
|
||||
width:33.33333333%
|
||||
}
|
||||
|
||||
.col-ls-3 {
|
||||
width: 25%
|
||||
}
|
||||
}
|
||||
|
||||
.news-detail-box .news-detail-content {
|
||||
text-align: center;
|
||||
padding: 0 8.5%;
|
||||
}
|
||||
|
||||
|
||||
.news-detail-box p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.news-detail-box p {
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
text-indent: 0em;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.news-detail-box .content-text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.news-detail-box .content-text p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.news-detail-box .news-detail-content {
|
||||
text-align: center;
|
||||
padding: 0 8.5%;
|
||||
}
|
||||
|
||||
.news-detail-box .news-detail-content a {
|
||||
color: #666;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news-detail-box .news-detail-content a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.news-detail-box .news-detail-content a.link-submit:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.news-detail-box .news-detail-content a.btn-rect {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.news-detail-box .news-detail-content>h2 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
90
src/pages/template/2/contact-us.astro
Normal file
90
src/pages/template/2/contact-us.astro
Normal file
@ -0,0 +1,90 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_2.astro";
|
||||
import { getConfig } from "../../../../utils/config";
|
||||
import { TP2_COLUMN_CONTACT_US, TP2_COLUMN_CONTACT_US_URL } from "../../../../utils/const";
|
||||
import Dianhua from "../../../../public/template_2/contact-us/dianhua.svg";
|
||||
import Youxiang from "../../../../public/template_2/contact-us/youxiang.svg";
|
||||
const config = getConfig(Astro);
|
||||
const breadcrumb = [
|
||||
{ title: '主页', url: '/' },
|
||||
{ title: TP2_COLUMN_CONTACT_US, url: TP2_COLUMN_CONTACT_US_URL }
|
||||
];
|
||||
---
|
||||
<Layout title={TP2_COLUMN_CONTACT_US + ` - ${config.app_name}`} breadcrumb={breadcrumb}>
|
||||
<div id="csr">
|
||||
<!-- sec conta -->
|
||||
<section class="sec_conta">
|
||||
<div class="look_mainTit conta_title">如对本报告有任何建议和意见，请通过以下方式与华为<span class="nr">联系：</span></div>
|
||||
|
||||
<div class="conta_lists">
|
||||
<div class="conta_list">
|
||||
<div class="conta_ti">
|
||||
<Dianhua class="conta_svg" />
|
||||
<span class="look_smalTit conta_span sec_both">电话</span>
|
||||
</div>
|
||||
<div class="look_mainTit text_color conta_tx">+86-(0)755-28780808</div>
|
||||
<div class="look_mainTit text_color conta_tx">+86-(0)755-28780808</div>
|
||||
<div class="look_mainTit text_color conta_tx">+86-(0)755-28780808</div>
|
||||
</div>
|
||||
|
||||
<div class="conta_list">
|
||||
<div class="conta_ti">
|
||||
<Youxiang class="conta_svg" />
|
||||
<span class="look_smalTit conta_span sec_both">电子邮箱!!</span>
|
||||
</div>
|
||||
<div class="look_mainTit text_color conta_tx">
|
||||
<a class="a-btn-link4 text_color" data-pagename="ConsumerCSD@Huawei.com" data-linkname="ConsumerCSD@Huawei.com" href="mailto:ConsumerCSD@Huawei.com">ConsumerCSD@Huawei.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
<style>
|
||||
#csr {
|
||||
.sec_conta {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 68.22917vw;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
.sec_conta .conta_ti {
|
||||
width: 100%;
|
||||
height: 3.64583vw;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sec_conta .conta_list {
|
||||
width: 33.59375vw;
|
||||
border-radius: 1.04167vw;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f7;
|
||||
/* padding: 4.6875vw 0 1.82292vw; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sec_conta .conta_svg {
|
||||
width: 3.39583vw;
|
||||
}
|
||||
|
||||
.sec_conta .conta_lists {
|
||||
margin-top: 3rem;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
422
src/pages/template/2/index.astro
Normal file
422
src/pages/template/2/index.astro
Normal file
@ -0,0 +1,422 @@
|
||||
---
|
||||
import "swiper/swiper-bundle.css";
|
||||
import Layout from "../../../layouts/Layout_2.astro";
|
||||
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
|
||||
import { Image } from 'astro:assets';
|
||||
import { getConfig, getExtra } from "../../../../utils/config";
|
||||
const config = getConfig(Astro)
|
||||
const extra = getExtra().index
|
||||
const sc1Homepage = config?.extra?.sc1?.img_homepage || '/template_2/index/homepage.webp'
|
||||
// swiper 数据
|
||||
const swiper = extra.sc3.swiper;
|
||||
console.log(extra)
|
||||
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-chenai.webp'
|
||||
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-daming.webp'
|
||||
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-fancui.webp'
|
||||
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-qiren.webp'
|
||||
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-wenhua.webp'
|
||||
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-yuanze.webp'
|
||||
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-zero.webp'
|
||||
const breadcrumb = [{
|
||||
title: '主页',
|
||||
url: '/'
|
||||
}]
|
||||
---
|
||||
|
||||
<Layout title={`${config.app_name}`} breadcrumb={breadcrumb} description={config.app_description} keywords={config.app_keywords}>
|
||||
<div class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
|
||||
<main class="content-v4">
|
||||
<div>
|
||||
<div class="second-navigation section"></div>
|
||||
<div class="section">
|
||||
<div class="new"></div>
|
||||
</div>
|
||||
<div class="iparys_inherited">
|
||||
<div class="eumiSecondMenuV4 iparsys parsys"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="html-text-component parbase">
|
||||
<div class="v4 n06-news-second-navigation" id="news-second-navigation-v4" data-component="n06-news-second-navigation">
|
||||
<div class="product-tabs-wrap container">
|
||||
<div class="product-tabs__heading">
|
||||
<div class="product-tabs__title body-medium">
|
||||
<a title={config.app_name} href="/" class="product-link product-link__active" data-title="华为阅读">{config.app_name}</a>
|
||||
<a class="btn erweimaBTN a-btn-install-ga" href="https://appgallery.huawei.com/#/app/C100259315" target="_blank">点击下载
|
||||
<ImageXiazai style="margin-left:10px;width: 11px;height: 11px;" alt="下载按钮" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-tabs__links-container" style="margin-right: -20px;">
|
||||
<ul class="product-tabs__links">
|
||||
<li class="product-tabs__links-item">
|
||||
<a class="btn erweimaBTN a-btn-install-ga" href="https://appgallery.huawei.com/#/app/C100259315" style="position: relative;">
|
||||
点击下载<ImageXiazai style="margin-left:10px;width: 11px;height: 11px;" alt="下载按钮" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-read-container">
|
||||
<div class="app-read-sc1-kv">
|
||||
<div class="sc1-mkt-text">
|
||||
<h1>{config.app_name}</h1>
|
||||
<h1 class="mkt-title">遇见更好的自己</h1>
|
||||
<p class="mkt-text">
|
||||
百万优质图书和精品有声内容；精巧微动效、精美排版，媲美精装纸质书；精品音色、定制人声，享受沉浸悦听；超
|
||||
50
|
||||
种语言一键翻译；跨设备流转，无缝续读；丰富的会员权益，各种福利活动持续<span class="text-nowrap">上新。</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="sc1-mkt-img">
|
||||
<Image style="height:100%;width:100%" src={sc1Homepage} alt="app首页" width={100} height={100} loading="eager"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-read-sc2">
|
||||
<div class="text-box">
|
||||
<div class="read-title">
|
||||
{extra.sc2.reaad_title}
|
||||
</div>
|
||||
<p class="read-text">
|
||||
{extra.sc2.reaad_text}
|
||||
</p>
|
||||
</div>
|
||||
<div class="sc2-swiper-box">
|
||||
<div class="swiper-wrapper sc2-swiper-container">
|
||||
{
|
||||
extra.sc3.swiper.map(item => {
|
||||
return <div class="sc2-swiper-silde swiper-slide">
|
||||
<Image class="h-auto" src={item.url} height={100} width={100} alt={`${item.name}封面`}/>
|
||||
<span class="book-name">{item.name}</span>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-read-sc5" id="sc5Scene">
|
||||
<div class="sc5-animation-box">
|
||||
<div class="sc5-book-container img-box" id="sc5ZdpScene">
|
||||
<Image class="h-full" src={extra.sc5.img_box} alt="背景" width={100} height={100} />
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<div class="read-subtitle">
|
||||
{extra.sc5.read_subtitle}
|
||||
</div>
|
||||
<div class="read-title">
|
||||
{extra.sc5.read_title}
|
||||
</div>
|
||||
<p class="read-text">
|
||||
<Fragment set:html={extra.sc5.read_text}></Fragment>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-read-sc6" id="sc6Scene">
|
||||
<div class="sc6-animation-container">
|
||||
<div class="text-box">
|
||||
<div class="read-title">
|
||||
{extra.sc6.read_title}
|
||||
</div>
|
||||
<p class="read-text">
|
||||
<Fragment set:html={extra.sc6.read_text} />
|
||||
</p>
|
||||
</div>
|
||||
<div class="sc6-animation-box img-box" id="sc6ZdpScene">
|
||||
<Image src={extra.sc6.img_box} class="h-full" alt="" width={100} height={100}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-read-sc7">
|
||||
<div class="text-box">
|
||||
<div class="read-title">
|
||||
{extra.sc7.read_title}
|
||||
</div>
|
||||
<p class="read-text">
|
||||
<Fragment set:html={extra.sc7.read_text}>
|
||||
</p>
|
||||
</div>
|
||||
<div class="sc7-img-box">
|
||||
<Image class="h-auto" src={extra.sc7.img_box} alt="背景图" width={100} height={100} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-read-sc8">
|
||||
<Image class="h-full" src={extra.sc8.img_box} alt="背景" height={100} width={100}/>
|
||||
<div class="sc8-content-wrapper">
|
||||
<div class="text-box">
|
||||
<div class="read-title">
|
||||
{extra.sc8.read_title}
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-container">
|
||||
<div class="icon-warpper1"></div>
|
||||
<div class="icon-warpper2">
|
||||
<div class="icon-top">
|
||||
<div class="icon-item">
|
||||
<Image class="h-full" src={extra.sc8.icon1} alt="icon" height={100} width={100} />
|
||||
<span class="icon-desc">{extra.sc8.icon1_text}</span>
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<Image class="h-full" src={extra.sc8.icon2} alt="icon" height={100} width={100} />
|
||||
<span class="icon-desc">{extra.sc8.icon2_text}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-center">
|
||||
<div class="icon-item icon-item2">
|
||||
<Image class="h-full" src={extra.sc8.icon3} alt="icon" height={100} width={100} />
|
||||
<span class="icon-desc">{extra.sc8.icon3_text}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-bottom">
|
||||
<div class="icon-item">
|
||||
<Image class="h-full" src={extra.sc8.icon4} alt="icon" height={100} width={100} />
|
||||
<span class="icon-desc">{extra.sc8.icon4_text}</span>
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<Image class="h-full" src={extra.sc8.icon5} alt="icon" height={100} width={100} />
|
||||
<span class="icon-desc">{extra.sc8.icon5_text}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="read-ps">
|
||||
*具体以实际体验<span class="text-nowrap">为准</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.sc2-swiper-box {
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
main {
|
||||
padding: unset;
|
||||
max-width: unset;
|
||||
}
|
||||
.app-read-sc5{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.header-tag-title.seo {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
/*five page common css*/
|
||||
.img_pc {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.img_sp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top_center {
|
||||
max-width: 1100px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.common_left {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.common_right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.common_btn a {
|
||||
display: inline-block;
|
||||
border: 1px solid #1681fb;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
padding: 10px 40px;
|
||||
font-size: 18px;
|
||||
color: #1681fb;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.index_common {
|
||||
padding-top: 80px;
|
||||
text-align: center;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.boutique {
|
||||
height: 640px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.v4.n06-news-second-navigation .product-tabs__title .btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.top_center {
|
||||
padding: 10% 2% 0;
|
||||
max-width: 96%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.common_h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.common_logo {
|
||||
margin-top: 46px;
|
||||
}
|
||||
|
||||
.top_center {
|
||||
padding: 5% 5% 0;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.common_left {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
max-width: 660px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.common_right {
|
||||
float: none;
|
||||
padding-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.common_btn {
|
||||
width: 204px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
section.index_common p {
|
||||
padding: 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.img_pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.img_sp {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.common_left {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.index_common {
|
||||
padding-left: 4%;
|
||||
padding-right: 4%;
|
||||
}
|
||||
|
||||
.common_logo {
|
||||
font-size: 19px;
|
||||
line-height: 25px;
|
||||
background-size: 36px;
|
||||
padding: 5px 0 6px 45px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.common_h1 {
|
||||
font-size: 32px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
section.index_top p,
|
||||
section.index_common p {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.index_common p.font_14 {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.index_common h2 {
|
||||
font-size: 32px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.index_common {
|
||||
padding-top: 70px;
|
||||
text-align: center;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 534px) {
|
||||
.index_common h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
section.index_top p {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414px) {
|
||||
section.index_common p {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-tabs-wrap .btn {
|
||||
background-color: #ce0e2d !important;
|
||||
border-radius: 23px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-height: 32px !important;
|
||||
cursor: pointer;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
padding: 0 24px !important;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
transition: 0.3s ease-out;
|
||||
border: 0 !important;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.product-tabs-wrap .btn:hover .download-popup {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Swiper from "swiper";
|
||||
import { Autoplay } from "swiper/modules";
|
||||
Swiper.use([Autoplay]);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const swiper = new Swiper(".sc2-swiper-box", {
|
||||
loop: true,
|
||||
slidesPerView: "auto",
|
||||
spaceBetween: 2,
|
||||
autoplay: {
|
||||
delay: 1000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
allowTouchMove: false,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
228
src/pages/template/2/news.astro
Normal file
228
src/pages/template/2/news.astro
Normal file
@ -0,0 +1,228 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout_2.astro';
|
||||
import { newsIndex } from '../../../../utils/rpc';
|
||||
import { getConfig } from '../../../../utils/config';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from '../../../../utils/const';
|
||||
const config = getConfig(Astro)
|
||||
const {code, data} = await newsIndex();
|
||||
const breadcrumb = [
|
||||
{
|
||||
title: '主页',
|
||||
url: '/'
|
||||
}, {
|
||||
title: TP2_COLUMN_NEWS,
|
||||
url: TP2_COLUMN_NEWS_URL
|
||||
}
|
||||
]
|
||||
---
|
||||
<Layout title={TP2_COLUMN_NEWS + `- ${config.app_name}`} breadcrumb={breadcrumb}>
|
||||
<main class="v4 main page-news">
|
||||
<div class="news-list-component">
|
||||
<div class="v4 h05-hero-text-only no-margin centered" data-component="h05-hero-text-only" data-video-width="0" data-video-height="0">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<h1 class="columns-name">新闻</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="wrap wrap--small">
|
||||
<div class="result-product">
|
||||
<div class="result-product__items news-archive-items">
|
||||
{
|
||||
data.map(news => (
|
||||
<a href={`/news/${news.id}`} class="result-product__item result-product__item--border">
|
||||
<div class="result-product__content">
|
||||
<span class="result-product__label">{news.created_at}</span>
|
||||
<div class="heading result-product__title">{news.title}</div>
|
||||
<p class="result-product__info">{news.description}</p>
|
||||
</div>
|
||||
<div class="result-product__media ">
|
||||
<img class="result-product__image img-lazy show success-img" alt={news.title} src={news.cover} onerror="imgErrorUrl(this)" style="">
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
.page-news {
|
||||
background-color: #fff !important;
|
||||
padding-top: 5rem;
|
||||
.result-product__image {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.columns-name {
|
||||
font-size: 5rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.result-product__media {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 260px;
|
||||
-ms-flex: 0 0 260px;
|
||||
flex: 0 0 260px;
|
||||
max-width: 260px;
|
||||
height: 173.3px;
|
||||
position: relative
|
||||
}
|
||||
.result-product__image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-product__info {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.result-product__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.71;
|
||||
display: block;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.result-product__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #000;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
max-height: 120px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.result-product__item--border {
|
||||
border-bottom: 1px solid #ededed
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 32px 0
|
||||
}
|
||||
|
||||
|
||||
.result-product {
|
||||
margin-bottom: 80px
|
||||
}
|
||||
|
||||
.result-product:last-of-type {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.result-product__items {
|
||||
display: block;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 32px 0
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.no-touch .result-product__item:hover .result-product__title {
|
||||
color:#7f7f7f
|
||||
}
|
||||
|
||||
.no-touch .result-product__item:hover .result-product__image--thumb::before {
|
||||
opacity: .5
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.result-product__media {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 120px;
|
||||
-ms-flex: 0 0 120px;
|
||||
flex: 0 0 120px;
|
||||
height: 90px;
|
||||
background-color: unset
|
||||
}
|
||||
|
||||
.result-product__info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-product__title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.result-product__content {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.result-product__item--border {
|
||||
border-bottom: 1px solid #ededed
|
||||
}
|
||||
|
||||
.result-product__item-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #000;
|
||||
display: block;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 80px
|
||||
}
|
||||
|
||||
.result-product__item-title--big {
|
||||
font-size: 32px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.5px
|
||||
}
|
||||
|
||||
.result-product__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.71;
|
||||
display: block;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.result-product__content-text {
|
||||
position: relative;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
max-width: 730px;
|
||||
padding-right: 20px
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
342
src/pages/template/2/news/[...slug].astro
Normal file
342
src/pages/template/2/news/[...slug].astro
Normal file
@ -0,0 +1,342 @@
|
||||
---
|
||||
import Layout from '../../../../layouts/Layout_2.astro';
|
||||
import { newsDetail } from '../../../../../utils/rpc';
|
||||
import { getConfig } from '../../../../../utils/config';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from '../../../../../utils/const';
|
||||
const { slug } = Astro.params;
|
||||
const config = getConfig(Astro)
|
||||
if (!slug) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const {code, data} = await newsDetail(slug);
|
||||
|
||||
if (!data || code !== 0) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const breadcrumb = [{
|
||||
title: '主页',
|
||||
url: '/'
|
||||
}, {title: TP2_COLUMN_NEWS, url: TP2_COLUMN_NEWS_URL}, {title: data.title, url: 'javascript:void(0);'}]
|
||||
---
|
||||
<Layout breadcrumb={breadcrumb} title={`${data.title} - ${config.app_name}`} keywords={data.keywords} description={data.description}>
|
||||
<div class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
|
||||
<div class="html-text-component parbase">
|
||||
<div class="v4 n06-news-second-navigation" id="news-second-navigation-v4" data-component="n06-news-second-navigation">
|
||||
<div class="product-tabs-wrap container">
|
||||
<div class="product-tabs__heading">
|
||||
<div class="product-tabs__title body-medium">
|
||||
<a title={TP2_COLUMN_NEWS} href={TP2_COLUMN_NEWS_URL} class="product-link product-link__active">{TP2_COLUMN_NEWS}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="news-main">
|
||||
<div class="news-container">
|
||||
<article class="news-detail-content">
|
||||
<span class="news-date">发布于: {data.created_at}</span>
|
||||
<h1 class="title" title="标题">{data.title}</h1>
|
||||
<div class="top-icon"></div>
|
||||
<div class="news-content" set:html={data.content}>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="news-navigation">
|
||||
{
|
||||
data.prevNews && (
|
||||
<div>
|
||||
<span>上一篇: </span>
|
||||
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
data.nextNews && (
|
||||
<div>
|
||||
<span>下一篇: </span>
|
||||
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div> -->
|
||||
</article>
|
||||
|
||||
<!-- <aside class="news-sidebar">
|
||||
<div class="related-news">
|
||||
<h3>相关新闻</h3>
|
||||
<ul>
|
||||
{data.about.map(item => (
|
||||
<li>
|
||||
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
|
||||
<span class="related-title">{item.title}</span>
|
||||
{/* <span class="related-date">{item.date}</span> */}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside> -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style is:inline>
|
||||
.news-content p {
|
||||
margin: 20px 0;
|
||||
color: #6f6f6f;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.news-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
article {
|
||||
width: 50rem;
|
||||
}
|
||||
|
||||
.news-main {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
|
||||
.top-icon {
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e0e0e0
|
||||
}
|
||||
|
||||
.news-date {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #d0021b;
|
||||
line-height: 17px;
|
||||
margin-bottom: 30px;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
color: black;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.news-meta span{
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* .news-date, .news-author {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
} */
|
||||
|
||||
.news-author a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*
|
||||
.news-date::before {
|
||||
content: '📅';
|
||||
}
|
||||
|
||||
.news-author::before {
|
||||
content: '👤';
|
||||
} */
|
||||
|
||||
.news-tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.news-tag {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
padding: 0.3rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9rem;
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.news-tag:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.news-container {
|
||||
max-width: 1200px;
|
||||
margin: -2rem auto 0;
|
||||
/* padding: 0 1.5rem 3rem; */
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: 1fr 320px; */
|
||||
/* gap: 2.5rem; */
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.news-detail-content {
|
||||
border-right: 1px solid var(--text-primary);
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding-top: 3rem;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.news-images {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.news-images img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.news-images img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.news-content p {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
|
||||
.news-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.news-navigation {
|
||||
margin-top: 1rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.related-news {
|
||||
padding: 1rem;
|
||||
/* box-shadow: var(--shadow-lg); */
|
||||
}
|
||||
|
||||
.related-news h3 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
}
|
||||
|
||||
.related-news ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.related-news li {
|
||||
/* margin-bottom: 1.2rem;
|
||||
padding-bottom: 1.2rem; */
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.related-news li:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.related-news a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
/* color: var(--text-secondary); */
|
||||
/* color: black; */
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.4rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.related-news a:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.related-date {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.news-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.news-detail-content {
|
||||
padding: 1.5rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.news-share {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
127
src/pages/template/2/protect.astro
Normal file
127
src/pages/template/2/protect.astro
Normal file
@ -0,0 +1,127 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_2.astro";
|
||||
import { getConfig } from "../../../../utils/config";
|
||||
import { TP2_COLUMN_PROTECT, TP2_COLUMN_PROTECT_URL } from "../../../../utils/const";
|
||||
const config = getConfig(Astro);
|
||||
const breadcrumb = [
|
||||
{ title: '主页', url: '/' },
|
||||
{ title: TP2_COLUMN_PROTECT, url: TP2_COLUMN_PROTECT_URL }
|
||||
];
|
||||
---
|
||||
<Layout title={TP2_COLUMN_PROTECT + ` - ${config.app_name}`} breadcrumb={breadcrumb}>
|
||||
<main>
|
||||
<article id="protect" class="protect-article">
|
||||
<header>
|
||||
<h1>未成年人及老年人保护</h1>
|
||||
<div class="line"></div>
|
||||
<p class="protect-lead">未成年人及老年人保护是一项重要的社会责任，旨在为这两个群体提供安全、健康、友好的使用和生活环境，帮助他们免受各种风险和不良影响。以下是全面的保护措施：</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>1. 隐私与信息安全</h2>
|
||||
<ul>
|
||||
<li><strong>信息采集限制：</strong> 对未成年人与老年人的个人信息收集严格限制，确保其信息安全，通常需要监护人或本人明确同意。</li>
|
||||
<li><strong>隐私保护：</strong> 所有信息采用加密存储，防止信息泄露，并提供删除或纠正信息的渠道，保障信息的私密性。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>2. 内容审查与适龄分级</h2>
|
||||
<ul>
|
||||
<li><strong>内容分级：</strong> 根据不同年龄段的需求提供适龄内容筛选和推荐，确保内容积极健康。</li>
|
||||
<li><strong>不良信息屏蔽：</strong> 建立内容审查机制，严格筛选暴力、色情、赌博等不良信息，避免不良内容对未成年人与老年人群体的负面影响。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>3. 消费保护与防诈骗措施</h2>
|
||||
<ul>
|
||||
<li><strong>消费限制与提醒：</strong> 为未成年人设置消费限额，老年人则设置消费确认机制，确保他们在明知消费内容的情况下进行支付，避免不必要的支出。</li>
|
||||
<li><strong>退款与防诈骗保障：</strong> 未成年人在未经监护人同意或超出授权范围的消费可申请全额退款；老年人误操作等无意消费可申请全额退款。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>4. 简化使用和无障碍设计</h2>
|
||||
<ul>
|
||||
<li><strong>操作简化：</strong> 为老年人提供简化的操作界面和流程，如大字体、简洁的交互设计等，确保无障碍使用体验。</li>
|
||||
<li><strong>辅助功能支持：</strong> 提供放大镜、语音提示等辅助工具，保障老年人群体中的特殊需求人群也能流畅使用。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>5. 紧急求助与举报机制</h2>
|
||||
<ul>
|
||||
<li><strong>快速求助通道：</strong> 为未成年人和老年人提供紧急求助渠道，遇到困扰、骚扰或欺凌问题时可及时求助。</li>
|
||||
<li><strong>举报不良行为：</strong> 提供举报功能，未成年人、老年人及其家人均可举报不良信息或行为，平台会快速响应并采取处理措施。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>6. 社会责任与法规合规</h2>
|
||||
<ul>
|
||||
<li><strong>政策法规合规：</strong> 严格遵循《未成年人保护法》《网络安全法》《老年人权益保障法》等相关法律，切实保障他们的合法权益。</li>
|
||||
<li><strong>社会监督与责任落实：</strong> 接受公众和社会机构的监督，公开未成年人和老年人保护的政策和措施，并通过改进保护策略不断提升服务质量。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>我们的承诺</h2>
|
||||
<p>葫芦时刻旨在为未成年人及老年人创造一个安全、健康、积极的网络阅读环境，提升他们的生活质量和使用体验，积极履行企业的社会责任，构建包容、关爱的网络生态环境。</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<style>
|
||||
.protect-article {
|
||||
max-width: 900px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem 1.5rem;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
/* box-shadow: 0 2px 16px rgba(0,0,0,0.04); */
|
||||
font-size: 1.08rem;
|
||||
color: #333;
|
||||
}
|
||||
.protect-article h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.protect-article h2 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin: 2rem 0 0.7rem 0;
|
||||
color: #000;
|
||||
}
|
||||
.protect-lead {
|
||||
color: #666;
|
||||
font-size: 1.08rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.protect-article ul {
|
||||
padding-left: 1.2em;
|
||||
margin: 0 0 1.2em 0;
|
||||
}
|
||||
.protect-article ul li {
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.protect-article section {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.protect-article {
|
||||
padding: 1rem 0.5rem;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
.protect-article h1 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.protect-article h2 {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
48
src/styles/template_2/banner.css
Normal file
48
src/styles/template_2/banner.css
Normal file
@ -0,0 +1,48 @@
|
||||
.v4.h06-in-page-banner .banner-item{position:relative;margin-bottom:80px}
|
||||
.v4.h06-in-page-banner .banner-block{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:736px;background-color:#ddd;padding:3vw 5.3vw 80px;margin-bottom:16px}
|
||||
.v4.h06-in-page-banner .banner-block__in{width:58%;display:flex;display:-webkit-flex;flex-direction:column;justify-content:center}
|
||||
.v4.h06-in-page-banner .banner-block__heading{letter-spacing:1px;line-height:1.09;margin-bottom:20px;font-size:64px;max-height:146px;overflow:hidden}
|
||||
.v4.h06-in-page-banner .banner-block__text{margin-bottom:40px;font-weight:700;font-size:18px;max-height:50px;overflow:hidden}
|
||||
@media only screen and (min-width:1920px){.v4.h06-in-page-banner .banner-block__text{font-size:24px;line-height:1.2;max-height:58px}
|
||||
}
|
||||
@media only screen and (min-width:1200px) and (max-width:1600px){.v4.h06-in-page-banner .banner-block__text{margin-bottom:20px}
|
||||
}
|
||||
.v4.h06-in-page-banner .banner-block--centered{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
|
||||
.v4.h06-in-page-banner .banner-block--centered .banner-block__in{text-align:center}
|
||||
.v4.h06-in-page-banner .banner-block--right{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
|
||||
.v4.h06-in-page-banner .banner-block--dark-theme{color:#fff}
|
||||
.v4.h06-in-page-banner .banner-block--dark-theme .banner-block__heading,.v4.h06-in-page-banner .banner-block--dark-theme .banner-block__text{color:#fff}
|
||||
.v4.h06-in-page-banner .banner-block--dark-theme .banner-block__btn{background-color:#fff;color:#000;border-color:#fff}
|
||||
.v4.h06-in-page-banner .banner-item__text{font-size:12px;font-weight:400;line-height:1.6;color:#000;max-width:880px;display:none}
|
||||
.v4.h06-in-page-banner .banner-block--image{background-position:center center;background-repeat:no-repeat;background-size:cover}
|
||||
@media only screen and (max-width:1199.98px){.huawei-v4 .v4.h06-in-page-banner:last-of-type{margin-bottom:0}
|
||||
.huawei-v4 .v4.h06-in-page-banner:last-of-type .banner-item{margin-bottom:0}
|
||||
.v4.h06-in-page-banner{margin-bottom:40px}
|
||||
.v4.h06-in-page-banner .banner-block--right{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
|
||||
.v4.h06-in-page-banner .container{padding:0}
|
||||
.v4.h06-in-page-banner .banner-item__text{padding:0 20px}
|
||||
.v4.h06-in-page-banner .banner-item{margin-bottom:64px}
|
||||
.v4.h06-in-page-banner .banner-block{padding:40px 20px;height:640px}
|
||||
.v4.h06-in-page-banner .banner-block__in{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
|
||||
.v4.h06-in-page-banner .banner-block__heading{font-size:48px;margin-bottom:20px;max-height:110px}
|
||||
.v4.h06-in-page-banner .banner-block__text{margin-bottom:28px}
|
||||
.v4.h06-in-page-banner .banner-block__btns{margin-bottom:10px}
|
||||
.v4.h06-in-page-banner .banner-block__in{justify-content:flex-start;max-width:860px;width:auto}
|
||||
}
|
||||
@media only screen and (width:1600px){.v4.h06-in-page-banner .banner-block{height:690px}
|
||||
}
|
||||
@media only screen and (min-width:1200px) and (max-width:1599.98px){.v4.h06-in-page-banner .banner-block__heading{font-size:48px;max-height:110px}
|
||||
.v4.h06-in-page-banner .banner-block{height:45vw}
|
||||
}
|
||||
@media only screen and (min-width:922px) and (max-width:1199.98px){.v4.h06-in-page-banner .banner-block{height:840px}
|
||||
}
|
||||
@media only screen and (min-width:768px) and (max-width:921px){.v4.h06-in-page-banner .banner-block{height:740px}
|
||||
.v4.h06-in-page-banner .banner-block__heading{font-size:30px;max-height:66px}
|
||||
.v4.h06-in-page-banner .banner-block__text{font-size:16px;max-height:50px}
|
||||
}
|
||||
@media only screen and (max-width:767px){.v4.h06-in-page-banner .banner-block{height:640px}
|
||||
}
|
||||
@media only screen and (max-width:767.98px){.v4.h06-in-page-banner .banner-block__heading{font-size:30px;max-height:66px;margin-bottom:10px}
|
||||
.v4.h06-in-page-banner .banner-block__text{font-size:14px;max-height:72px;margin-bottom:12px}
|
||||
.v4.h06-in-page-banner .banner-block__in{max-width:100%}
|
||||
}
|
||||
10135
src/styles/template_2/common-v4-nav-v2.css
Normal file
10135
src/styles/template_2/common-v4-nav-v2.css
Normal file
File diff suppressed because it is too large
Load Diff
255
src/styles/template_2/nav.css
Normal file
255
src/styles/template_2/nav.css
Normal file
@ -0,0 +1,255 @@
|
||||
#news-second-navigation-v4 {
|
||||
position: relative;
|
||||
top: 0;
|
||||
z-index: 150;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
#news-second-navigation-v4.stuck {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
@supports(position:-webkit-sticky) {
|
||||
#news-second-navigation-v4 {
|
||||
position: -webkit-sticky
|
||||
}
|
||||
}
|
||||
|
||||
@supports(position:sticky) {
|
||||
#news-second-navigation-v4 {
|
||||
position: sticky
|
||||
}
|
||||
}
|
||||
|
||||
@supports(-webkit-backdrop-filter:blur(0)) {
|
||||
#news-second-navigation-v4 {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px)
|
||||
}
|
||||
}
|
||||
|
||||
@supports(backdrop-filter:blur(0)) {
|
||||
#news-second-navigation-v4 {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: saturate(180%) blur(20px)
|
||||
}
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs-wrap {
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link-container {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link_item {
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link_item::before {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -16px;
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link_item:first-child {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link_item:first-child::before {
|
||||
content: none
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link {
|
||||
color: #7f7f7f
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link:hover,
|
||||
.v4.n06-news-second-navigation .product-tabs__link:hover {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link__active {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__heading {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 24px 0;
|
||||
position: relative;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__title {
|
||||
margin-top: 3px;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
overflow-x: auto
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links-container {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: 30px
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links {
|
||||
margin-top: 2px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links-item {
|
||||
padding: 0 16px
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__link {
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
padding: 0 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.5;
|
||||
letter-spacing: .3px;
|
||||
text-align: center;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__link.product-tabs__link--active {
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
letter-spacing: -0.2px;
|
||||
cursor: default;
|
||||
border-bottom: 2px solid #000
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__link {
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1200px) {
|
||||
.no-touch .v4.n06-news-second-navigation .product-tabs__link:hover {
|
||||
color: #000
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:991.98px) {
|
||||
.v4.n06-news-second-navigation .product-tabs__heading {
|
||||
position: unset;
|
||||
padding: 28px 0 0 0
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__title {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links-container {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
padding: 30px 15% 10px;
|
||||
display: block
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links-item {
|
||||
padding: 0;
|
||||
padding-right: 19px;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__link {
|
||||
padding-bottom: 0;
|
||||
text-align: left
|
||||
}
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
display: none;
|
||||
transition: transform .7s;
|
||||
transition: -webkit-transform .7s
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn.open {
|
||||
transform: rotate(180deg)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn::before {
|
||||
margin-left: -5px;
|
||||
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
||||
transform: translate(-50%, -50%) rotate(45deg)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn::after {
|
||||
margin-left: 4px;
|
||||
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
|
||||
transform: translate(-50%, -50%) rotate(-45deg)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn::after,
|
||||
.v4.n06-news-second-navigation .drop-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: #afafaf;
|
||||
-webkit-transition: .3s ease-out;
|
||||
transition: .3s ease-out;
|
||||
display: block
|
||||
}
|
||||
|
||||
@media only screen and (max-width:991.98px) {
|
||||
.v4.n06-news-second-navigation .drop-btn {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
718
src/styles/template_2/style.css
Normal file
718
src/styles/template_2/style.css
Normal file
@ -0,0 +1,718 @@
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 5rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* background: var(--background-light); */
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.line {
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dddddd;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.app-read-container {
|
||||
letter-spacing: calc(-.037em + .526px);
|
||||
--navheight: value;
|
||||
--sc4height: value;
|
||||
}
|
||||
|
||||
.app-read-container img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.app-read-container video{
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-read-container a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-read-container .show-pc {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.app-read-container .show-mob {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-read-container .app-read-show-ie{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-read-container .text-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-read-container picture {
|
||||
width: 100%;
|
||||
}
|
||||
.app-read-container .blur-up {
|
||||
-webkit-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
-webkit-transition: -webkit-filter 400ms;
|
||||
transition: -webkit-filter 400ms;
|
||||
transition: filter 400ms;
|
||||
transition: filter 400ms, -webkit-filter 400ms;
|
||||
}
|
||||
.app-read-container .blur-up.lazyloaded {
|
||||
-webkit-filter: blur(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
.app-read-container .lazyload:not([src]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-read-container .read-title {
|
||||
color: #000;
|
||||
font-size: 2.5vw;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
|
||||
}
|
||||
|
||||
.app-read-container .read-text {
|
||||
color: #767676;
|
||||
font-size: 1.25vw;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin-top: 1.6666666vw;
|
||||
}
|
||||
|
||||
.app-read-container .sc3-voice-container,
|
||||
.app-read-container .app-read-sc5,
|
||||
.app-read-container .app-read-sc6,
|
||||
.app-read-container .app-read-sc7,
|
||||
.app-read-container .app-read-sc8
|
||||
{
|
||||
width: 83.333333vw;
|
||||
margin: 0 auto;
|
||||
background-color: #f5f5f7;
|
||||
}
|
||||
|
||||
/* kv */
|
||||
.app-read-container .app-read-sc1-kv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 7.8645833vw;
|
||||
padding-left: 14.01041667vw;
|
||||
padding-bottom: 5.20833333vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-text {
|
||||
margin-top: 4.302083333vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-text img {
|
||||
width: 10.625vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .mkt-title {
|
||||
width: 34.5vw;
|
||||
color: #000;
|
||||
font-size: 4.1666666vw;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
margin-top: 1.145833333vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .mkt-text {
|
||||
width: 34vw;
|
||||
font-size: 1.25vw;
|
||||
font-weight: 500;
|
||||
color: #767676;
|
||||
line-height: 1.6;
|
||||
margin-top: 0.52083333vw;
|
||||
}
|
||||
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-img {
|
||||
width: 40.67708333vw;
|
||||
margin-left: 9.0625vw;
|
||||
}
|
||||
|
||||
|
||||
/* sc2 */
|
||||
.app-read-container .app-read-sc2 {
|
||||
background-color: #f5f5f7;
|
||||
padding-top: 8.0208333vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .text-box {
|
||||
width: 47.354167vw;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-read-sc2 .read-text {
|
||||
text-align: left;
|
||||
margin-left: 1.111111vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-box {
|
||||
margin-top: 3.52083333vw;
|
||||
overflow: hidden;
|
||||
padding-left: 0.83333333vw;
|
||||
padding-bottom: 1.71875vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-warpping {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-silde {
|
||||
width: 13.85416667vw;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.app-read-sc2 .book-name {
|
||||
font-size: 1.14583333vw;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
@keyframes breath{
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes breath{
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* sc5 */
|
||||
.app-read-sc5 .sc5-animation-box {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 7.2916666vw;
|
||||
padding-left: 15.625vw;
|
||||
padding-bottom: 6.927083vw;
|
||||
}
|
||||
.app-read-sc5 .sc5-bg-img{
|
||||
width : 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.app-read-sc5 .sc5-book-container{
|
||||
width: 27.44791667vw;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.app-read-sc5 .read-subtitle{
|
||||
font-size: 1.875vw;
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.09375vw;
|
||||
}
|
||||
.app-read-sc5 .app-read-not-ie{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.app-read-sc5 .sc5-yy-img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 32vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .text-box {
|
||||
width: 27.041666vw;
|
||||
margin-left: 6.6666667vw;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* sc6 */
|
||||
.app-read-sc6 .sc6-animation-container {
|
||||
position: relative;
|
||||
width:100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
padding: 9.6354167vw 0 8.07291667vw;
|
||||
padding-left: 7.39583333vw;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f7;
|
||||
}
|
||||
|
||||
.app-read-sc6 .sc6-img-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-read-sc6 .sc6-animation-box {
|
||||
width: 31.9791667vw;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-left: 13.0729167vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-read-sc6 .text-box {
|
||||
position: relative;
|
||||
width: 22.5vw;
|
||||
margin-top: 1.9vw;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* sc7 */
|
||||
.app-read-container .app-read-sc7 {
|
||||
padding-top: 4.32291667vw;
|
||||
}
|
||||
|
||||
.app-read-sc7 .text-box {
|
||||
width: 40.6770833vw;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-read-sc7 .sc7-img-box {
|
||||
width: 75.46875vw;
|
||||
margin-top: 3.02083333vw;
|
||||
margin-left: 6.5625vw;
|
||||
}
|
||||
|
||||
|
||||
/* sc8 */
|
||||
.app-read-container .app-read-sc8 {
|
||||
position: relative;
|
||||
margin-top: -3.28125vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .sc8-content-wrapper {
|
||||
position: absolute;
|
||||
padding-left: 4.6875vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
-webkit-transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.app-read-sc8 .text-box {
|
||||
width: 25.41666667vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .read-title {
|
||||
color: #fff;
|
||||
line-height: 1.6;
|
||||
margin-top: 9.375vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-container {
|
||||
margin-left: 15.83333vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper1 {
|
||||
width: 37.5vw;
|
||||
height: 36.0416667vw;
|
||||
background-color: #414344;
|
||||
opacity: 0.34;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 4.47916667vw 4.84375vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper2>div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-item {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-container .icon-center {
|
||||
padding: 2.65625vw 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-item img {
|
||||
width: 4.21875vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-desc {
|
||||
font-size: 1.25vw;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin-top: 1.145833333vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .read-ps{
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
color: #737171;
|
||||
margin-top: 0.520833vw;
|
||||
text-align: right;
|
||||
padding-right: 5.208333vw;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px){
|
||||
.app-read-sc8 .read-ps{
|
||||
font-size: 0.625vw;
|
||||
}
|
||||
}
|
||||
/* mob */
|
||||
@media screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
|
||||
(max-width: 1023px) {
|
||||
.app-read-container {
|
||||
background-color: #f5f5f7;
|
||||
}
|
||||
.app-read-container .show-pc{
|
||||
display: none;
|
||||
}
|
||||
.app-read-container .show-mob{
|
||||
display: block;
|
||||
}
|
||||
.app-read-container .read-title {
|
||||
font-size: 4.44444445vw;
|
||||
}
|
||||
|
||||
.app-read-container .read-text {
|
||||
font-size: 3.3333333vw;
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-container .sc3-voice-container,
|
||||
.app-read-container .app-read-sc5,
|
||||
.app-read-container .app-read-sc6,
|
||||
.app-read-container .app-read-sc7,
|
||||
.app-read-container .app-read-sc8 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* kv */
|
||||
.app-read-container .app-read-sc1-kv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding-top: 13.19444444vw;
|
||||
padding-left: 7.6388889vw;
|
||||
padding-bottom: 6.38888889vw;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-text {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-text img {
|
||||
width: 18.3333333vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .mkt-title {
|
||||
width: 83.333333vw;
|
||||
font-size: 5.83333333vw;
|
||||
margin-top: 3vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .mkt-text {
|
||||
width: 82.333333vw;
|
||||
font-size: 3.3333333vw;
|
||||
margin-top: 5.5555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-img {
|
||||
width: 90.41666667vw;
|
||||
margin-top: 6.80555556vw;
|
||||
margin-left: 3.47222222vw;
|
||||
}
|
||||
|
||||
/* sc2 */
|
||||
.app-read-container .app-read-sc2 {
|
||||
padding-top: 16.666667vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .text-box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-read-sc2 .read-text {
|
||||
width: 84.0277778vw;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-box {
|
||||
margin-top: 10.34722222vw;
|
||||
padding-left: 0;
|
||||
padding-bottom: 7.361111111vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-warpping {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-silde {
|
||||
width: 20.69444444vw;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.app-read-sc2 .book-name {
|
||||
font-size: 3.3333333vw;
|
||||
}
|
||||
|
||||
/* sc5 */
|
||||
.app-read-sc5 .sc5-animation-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
padding-top: 8.75vw;
|
||||
padding-bottom: 18.3333333vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .text-box {
|
||||
width: 90.52777778vw;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.app-read-sc5 .read-subtitle{
|
||||
font-size: 3.33333333vw;
|
||||
}
|
||||
.app-read-sc5 .read-title{
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .read-text {
|
||||
width: 53.9444444vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 5.5555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .sc5-book-container {
|
||||
width: 48.19444444vw;
|
||||
height: 59.72222222vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 16.666667vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .sc5-yy-img{
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
/* sc6 */
|
||||
.app-read-sc6 .sc6-animation-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
padding-top: 16.666667vw;
|
||||
padding-bottom: 19.1666667vw
|
||||
}
|
||||
|
||||
.app-read-sc6 .text-box {
|
||||
width: 78.6111111vw;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.app-read-sc6 .read-text {
|
||||
width: 70.972222vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc6 .sc6-animation-box {
|
||||
width: 57.6388889vw;
|
||||
margin-top: 6.25vw;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* sc7 */
|
||||
.app-read-container .app-read-sc7 {
|
||||
padding-top: 16.666667vw;
|
||||
}
|
||||
|
||||
.app-read-sc7 .text-box {
|
||||
width: 71.25vw;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-read-sc7 .read-text {
|
||||
width: 47.0833333vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc7 .sc7-img-box {
|
||||
width: 91.3888889vw;
|
||||
margin-top: 6.1111111vw;
|
||||
margin-left: 8.19444444vw;
|
||||
}
|
||||
|
||||
/* sc8 */
|
||||
.app-read-container .app-read-sc8 {
|
||||
position: relative;
|
||||
margin-top: 2.5vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .sc8-content-wrapper {
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .text-box {
|
||||
width: 34.7222222vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .read-title {
|
||||
margin-top: 13.75vw;
|
||||
font-size: 3.33333333vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-container {
|
||||
margin-left: 13.333333vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper1 {
|
||||
width: 46.9444444vw;
|
||||
height: 45.138889vw;
|
||||
background-color: #414344;
|
||||
opacity: 0.34;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 5.5555556vw 5.97222222vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper2>div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-container .icon-center {
|
||||
padding: 3.33333333vw 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-item img {
|
||||
width: 5.1388888vw;
|
||||
}
|
||||
.app-read-sc8 .icon-desc{
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .read-ps{
|
||||
margin-top: 1.388889vw;
|
||||
font-size: 3.3333333vw;
|
||||
padding-right: 2.7777778vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* zdp */
|
||||
@media screen and (min-device-aspect-ratio:10/13) and (max-device-aspect-ratio:127/100){
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ie */
|
||||
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
|
||||
.app-read-container .app-read-not-ie{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-read-container .app-read-show-ie{
|
||||
display: block;
|
||||
}
|
||||
.app-read-sc5 .app-read-show-ie{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.app-read-sc6 .sc6-animation-container{
|
||||
padding-top: 8.4vw;
|
||||
}
|
||||
.app-read-sc6 .text-box{
|
||||
width: 23.5vw;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user