init: 项目初始代码
This commit is contained in:
531
app/index/view/zh-cn/about/about_us.html
Normal file
531
app/index/view/zh-cn/about/about_us.html
Normal file
@@ -0,0 +1,531 @@
|
||||
{include file='zh-cn/common/header' title='关于我们' keywords='关于我们'
|
||||
description='关于我们'} {include file='zh-cn/common/nav' }
|
||||
<!-- breadcrumb-area start -->
|
||||
<style>
|
||||
@media screen and (min-width: 1460px) {
|
||||
.swt-Container {
|
||||
width: 1620px;
|
||||
}
|
||||
}
|
||||
.swt-Container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.tech {
|
||||
background-color: white;
|
||||
}
|
||||
.tech1 {
|
||||
padding-bottom: 130px;
|
||||
}
|
||||
.tech .title {
|
||||
height: 180px;
|
||||
line-height: 180px;
|
||||
font-size: 32px;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
.techcon {
|
||||
height: 350px;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
border-radius: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.techcon .text img {
|
||||
margin-top: 80px;
|
||||
margin-left: 65px;
|
||||
}
|
||||
.techcon .tech-img img {
|
||||
margin-top: 25px;
|
||||
margin-left: 65px;
|
||||
width: 720px;
|
||||
height: 300px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.techcon .text .context {
|
||||
margin-left: 65px;
|
||||
width: 80%;
|
||||
font-size: 16px;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
color: #707070;
|
||||
line-height: 26px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.techcon > div {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.achive {
|
||||
height: 460px;
|
||||
text-align: center;
|
||||
background-color: white !important;
|
||||
}
|
||||
.achive .title,
|
||||
.timeline .title,
|
||||
.tech .title {
|
||||
height: 180px;
|
||||
line-height: 180px;
|
||||
font-size: 32px;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
.timeline{
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.achive .number {
|
||||
height: 200px;
|
||||
font-size: 32px;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.achive .number .achive_shuju {
|
||||
width: 25%;
|
||||
}
|
||||
.achive .number .achive_shuju .title1 {
|
||||
margin-top: 40px;
|
||||
font-size: 32px;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
.achive .number .achive_shuju .subtitle1 {
|
||||
margin-top: 16px;
|
||||
font-size: 18px;
|
||||
font-family: Montserrat-Regular, Montserrat;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
/*background: #f2f2f2 !important;*/
|
||||
font-family: Montserrat, Montserrat;
|
||||
}
|
||||
.timeline1 {
|
||||
display: flex;
|
||||
}
|
||||
.timeline-con {
|
||||
width: 85%;
|
||||
height: 665px;
|
||||
background-color: white;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.timeline-time {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.tech {
|
||||
background-color: white;
|
||||
}
|
||||
.tech1 {
|
||||
padding-bottom: 130px;
|
||||
}
|
||||
.techcon {
|
||||
height: 350px;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
border-radius: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.techcon > div {
|
||||
width: 50%;
|
||||
}
|
||||
.techcon .text img {
|
||||
margin-top: 80px;
|
||||
margin-left: 65px;
|
||||
}
|
||||
|
||||
.techcon .text .year {
|
||||
margin-left: 65px;
|
||||
margin-top: 40px;
|
||||
font-size: 28px;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 26px;
|
||||
}
|
||||
.techcon .text .context {
|
||||
margin-left: 65px;
|
||||
width: 80%;
|
||||
font-size: 16px;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
color: #707070;
|
||||
line-height: 26px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.techcon .tech-img img {
|
||||
margin-top: 25px;
|
||||
margin-left: 65px;
|
||||
}
|
||||
@media screen and (min-width: 1461px) and (max-width: 1720px) {
|
||||
.techcon {
|
||||
height: 300px;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.techcon .text img {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.techcon .tech-img img {
|
||||
width: 550px;
|
||||
margin-top: 35px;
|
||||
margin-left: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1459px) {
|
||||
.techcon {
|
||||
height: 250px;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.techcon .text img {
|
||||
margin-top: 40px;
|
||||
margin-left: 65px;
|
||||
}
|
||||
|
||||
.techcon .text .year {
|
||||
margin-left: 65px;
|
||||
margin-top: 20px;
|
||||
font-size: 22px;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 26px;
|
||||
}
|
||||
.techcon .text .context {
|
||||
margin-left: 65px;
|
||||
width: 80%;
|
||||
font-size: 12px;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
color: #707070;
|
||||
line-height: 26px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.techcon .tech-img img {
|
||||
width: 440px;
|
||||
margin-top: 25px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.event_year {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.event_year li {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-left: 1px solid #d4d4d4;
|
||||
font-size: 18px;
|
||||
color: #828282;
|
||||
cursor: pointer;
|
||||
}
|
||||
.event_year li.current {
|
||||
border-left: 4px solid #0066ff;
|
||||
color: #004bfa;
|
||||
font-weight: 600;
|
||||
}
|
||||
.event_year li label {
|
||||
width:140px;
|
||||
}
|
||||
.event_list li span {
|
||||
width: 127px;
|
||||
text-align: right;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.event_list li p {
|
||||
width: 90%;
|
||||
margin-left: 24px;
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
line-height: 25px;
|
||||
_float: left;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
font-family: Montserrat-Medium, Montserrat;
|
||||
font-weight: 500;
|
||||
color: #707070;
|
||||
line-height: 20px;
|
||||
}
|
||||
.event_list li p span {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0 15px 10px 15px;
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.titlelist {
|
||||
line-height: 24px;
|
||||
color: #8c8c8c;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.titlelist dt {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
margin: 10px;
|
||||
}
|
||||
.titlelist dd {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
|
||||
.con_event_list {
|
||||
width: 98%;
|
||||
height: 91%;
|
||||
overflow: auto;
|
||||
margin: 30px 10px;
|
||||
}
|
||||
.event_list {
|
||||
width: 98%;
|
||||
background: url('__LOCAL__assets/images/greyline.png') 50px 0 repeat-y;
|
||||
}
|
||||
.event_list h3 {
|
||||
margin: 0 0 0 35px;
|
||||
font-size: 24px;
|
||||
padding-left: 40px;
|
||||
background: url('__LOCAL__assets/images/greyyuandian.png') 3px 3px no-repeat;
|
||||
height: 38px;
|
||||
font-size: 20px;
|
||||
font-family: Montserrat-Bold, Montserrat;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
}
|
||||
.backgroundimg {
|
||||
background: url('__LOCAL__assets/images/yaundian.png') 3px 3px no-repeat !important;
|
||||
}
|
||||
</style>
|
||||
<div class="breadcrumb-area">
|
||||
<img log="img" src="__LOCAL__assets/images/about-banner.jpg" alt="Product" />
|
||||
</div>
|
||||
<!-- breadcrumb-area end --><!-- Service Area Start -->
|
||||
<div class="service-area product-bg pd-80">
|
||||
<div class="container">
|
||||
<div class="row d-flex justify-content-center align-items-center about-bg">
|
||||
<div class="col-lg-7 col-xl-7 col-md-12 col-sm-12 col-xs-12 p-0">
|
||||
<div class="service-left img-none">
|
||||
<img
|
||||
log="img"
|
||||
src="__LOCAL__assets/images/about-img01.jpg"
|
||||
alt="Product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-5 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="service-right-content">
|
||||
<h2 class="title">
|
||||
品牌简介
|
||||
<div class="eng-text">Brand Profile</div>
|
||||
</h2>
|
||||
<p class="para-1">
|
||||
牛顿定律(NTONPOWER)是深圳市元创时代科技有限公司旗下的全球化科技品牌,成立于2015年,专注于智能充电领域的技术创新。公司以严谨的科学方法和系统性研究为导向,致力于在消费电子充电领域提供创新的技术解决方案。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container pd-64">
|
||||
<div class="row d-flex justify-content-center align-items-center about-bg">
|
||||
<div class="col-lg-5 col-xl-5 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="service-right-content">
|
||||
<h2 class="title">
|
||||
品牌使命
|
||||
<div class="eng-text">Brand Interpretation</div>
|
||||
</h2>
|
||||
<p class="para-1">
|
||||
让生活电力十足。Power Up Your Life.<br />
|
||||
以科学家严谨求真的精神和创新探索的态度,用智能充电科技释放生活的无限可能。<br />
|
||||
● 安全:智能防护,守护充电瞬间<br />
|
||||
● 实用:精准设计,满足多元场景 <br />
|
||||
● 创新:突破技术边界,简化使用体验
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7 col-xl-7 col-md-12 col-sm-12 col-xs-12 p-0">
|
||||
<div class="service-left text-xxl-end">
|
||||
<img
|
||||
log="img"
|
||||
src="__LOCAL__assets/images/about-img02.jpg"
|
||||
alt="Product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline Container">
|
||||
<div class="swt-Container">
|
||||
<div class="title">品牌里程</div>
|
||||
<div class="timeline1 swt-Container">
|
||||
<div class="box">
|
||||
<div class="timeline-time">
|
||||
<ul class="event_year">
|
||||
<li class="current"><label for="2015-2017">2015-2017</label></li>
|
||||
<li><label for="2018-2021">2018-2021</label></li>
|
||||
<li><label for="2022">2022</label></li>
|
||||
<li><label for="2023">2023</label></li>
|
||||
<li><label for="2024">2024</label></li>
|
||||
<li><label for="2025">2025</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="timeline-con">
|
||||
<div class="con_event_list">
|
||||
<ul class="event_list">
|
||||
<div>
|
||||
<h3 id="2015-2017" class="backgroundimg">创立初期(2015-2017年)</h3>
|
||||
<li>
|
||||
<p>
|
||||
<span
|
||||
>2015年,牛顿定律(NTONPOWER)成立,专注于智能生活充电产品(如:插线板、充电头)。</span
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<h3 id="2018-2021">快速发展期(2018-2021年)</h3>
|
||||
<li>
|
||||
<p>
|
||||
<span
|
||||
>专注智能充电生态,创新覆盖多元应用场景。海外线上销售稳居行业前十,业务覆盖全球30多个国家 ,引领行业创新发展。</span
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<h3 id="2022">2022</h3>
|
||||
<li>
|
||||
<p>
|
||||
<span
|
||||
>拓展国内线上电商渠道,加强本土市场品牌认知度。</span
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 id="2023">2023</h3>
|
||||
<li>
|
||||
<p>
|
||||
<span
|
||||
>插线板全球销量1000万台。</span
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<h3 id="2024">2024</h3>
|
||||
<li>
|
||||
<p>
|
||||
<span
|
||||
>用户规模突破海内外用户3500万+、全球社交媒体粉丝60万+。</span
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<h3 id="2025">2025</h3>
|
||||
<li>
|
||||
<p>
|
||||
<span
|
||||
>全面进军新消费平台、锂电池和充电宝赛道,构建便携能源生态系统。</span
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech Container">
|
||||
<div class="swt-Container tech1">
|
||||
<div class="title">所获荣誉</div>
|
||||
<div class="techcon swt-Container">
|
||||
<div class="text">
|
||||
<img src="__LOCAL__assets/images/lichengbei.png" />
|
||||
<div class="context">
|
||||
<p>旅行便携类 海外TOP 10</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-img">
|
||||
<img src="__LOCAL__assets/images/gywm2.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="techcon swt-Container">
|
||||
<div class="text">
|
||||
<img src="__LOCAL__assets/images/lichengbei.png" />
|
||||
<div class="context">
|
||||
<p>斩获红点奖、缪斯设计奖</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-img">
|
||||
<img src="__LOCAL__assets/images/gywm1.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||
></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('label').click(function () {
|
||||
$('.event_year>li').removeClass('current')
|
||||
|
||||
$(this).parent('li').addClass('current')
|
||||
|
||||
var year = $(this).attr('for')
|
||||
|
||||
$('#' + year)
|
||||
.parent()
|
||||
.prevAll('div')
|
||||
.slideUp(800)
|
||||
|
||||
$('#' + year)
|
||||
.parent()
|
||||
.slideDown(800)
|
||||
.nextAll('div')
|
||||
.slideDown(800)
|
||||
|
||||
$('#' + year)
|
||||
.parent()
|
||||
.css('color', 'red')
|
||||
.nextAll('div')
|
||||
.css('color', 'black')
|
||||
//
|
||||
$('h3').removeClass('backgroundimg')
|
||||
|
||||
$('#' + year).addClass('backgroundimg')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
{include file='zh-cn/common/footer'} {include file='zh-cn/common/script' }
|
||||
Reference in New Issue
Block a user