diff --git a/src/common/css/common.css b/src/common/css/common.css deleted file mode 100644 index ec80854..0000000 --- a/src/common/css/common.css +++ /dev/null @@ -1,1212 +0,0 @@ -@charset "UTF-8"; -body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, h6, i, b, textarea, button, input, select, figure, figcaption { - padding: 0; - margin: 0; - list-style: none; - font-style: normal; - text-decoration: none; - border: none; - font-weight: normal; - font-family: MiSans-Regular; - box-sizing: border-box; - -webkit-tap-highlight-color: transparent; - -webkit-font-smoothing: antialiased; -} - -body:hover, div:hover, span:hover, header:hover, footer:hover, nav:hover, section:hover, aside:hover, article:hover, ul:hover, dl:hover, dt:hover, dd:hover, li:hover, a:hover, p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, i:hover, b:hover, textarea:hover, button:hover, input:hover, select:hover, figure:hover, figcaption:hover { - outline: none; -} - -:root { - --font-light: MiSans-Light; - --font-normal: MiSans-Normal; - --font-regular: MiSans-Regular; - --font-medium: MiSans-Medium; - --font-semibold: MiSans-SemiBold; - --font-bold: MiSans-Bold; - --text-xs: 0.12rem; - --text-sm: 0.14rem; - --text-base: 0.16rem; - --text-lg: 0.18rem; - --text-xl: 0.20rem; - --text-2xl: 0.24rem; - --text-3xl: 0.28rem; - --text-4xl: 0.32rem; - --text-5xl: 0.36rem; - --text-6xl: 0.40rem; - --breakpoint-xs: 375px; - --breakpoint-sm: 480px; - --breakpoint-md: 768px; - --breakpoint-lg: 1024px; - --breakpoint-xl: 1440px; - --breakpoint-2xl: 1920px; - --breakpoint-4k: 2560px; -} - -a { - color: inherit; -} - -ul, ol, li { - list-style-type: none; -} - -a { - text-decoration: none; - outline: none; - color: #333; - cursor: pointer; - font-family: var(--font-regular); -} - -a:focus { - outline: none; - -moz-outline: none; -} - -a img { - border: none; -} - -select, input, textarea { - border-radius: 0; - -webkit-border-radius: 0; - font-family: var(--font-regular); -} - -input:focus { - outline: none; -} - -input, button, select, textarea { - outline: none; -} - -textarea { - resize: none; -} - -textarea, input, select { - background: none; - border: none; - margin: 0; - padding: 0; -} - -table { - background-color: transparent; - border-spacing: 0; - border-collapse: collapse; - font-size: 0.75em; - width: 100%; - border-top: solid 1px #ddd; - border-left: solid 1px #ddd; - box-sizing: border-box; -} - -table th { - background-color: #f9f9f9; - text-align: center; - box-sizing: border-box; -} - -table td, table th { - padding: 5px 10px; - border: 1px solid #ddd; - box-sizing: border-box; -} - -input[type="button"], input[type="submit"], input[type="file"], button { - cursor: pointer; - -webkit-appearance: none; - font-family: var(--font-regular); -} - -img { - vertical-align: middle; -} - -html { - font-size: calc(100 * 100vw / 1920) !important; - min-height: 100vh; -} - -@media (min-width: 2560px) { - html { - font-size: calc(100 * 100vw / 2560) !important; - } -} - -@media (min-width: 1920px) and (max-width: 2559px) { - html { - font-size: calc(100 * 100vw / 1920) !important; - } -} - -@media (min-width: 1440px) and (max-width: 1919px) { - html { - font-size: calc(100 * 100vw / 1440) !important; - } -} - -@media (min-width: 1024px) and (max-width: 1439px) { - html { - font-size: calc(100 * 100vw / 1024) !important; - } -} - -@media (min-width: 768px) and (max-width: 1023px) { - html { - font-size: calc(100 * 100vw / 768) !important; - } -} - -@media (min-width: 480px) and (max-width: 767px) { - html { - font-size: calc(100 * 100vw / 480) !important; - } -} - -@media (max-width: 479px) { - html { - font-size: calc(100 * 100vw / 375) !important; - } -} - -html, body { - height: 100%; - width: 100%; - font-family: var(--font-regular); - user-select: text; - font-size: var(--text-base); - color: #3f4552; - line-height: 1.8; -} - -/* 滚动条样式 */ -/* 移动端隐藏滚动条 */ -@media (max-width: 750px) { - html::-webkit-scrollbar { - display: none; - } - html { - -ms-overflow-style: none; - /* IE and Edge */ - scrollbar-width: none; - /* Firefox */ - } -} - -/* 桌面端滚动条样式 */ -@media (min-width: 751px) { - ::-webkit-scrollbar { - width: 8px; - } - ::-webkit-scrollbar-track { - background: #f1f1f1; - border-radius: 4px; - } - ::-webkit-scrollbar-thumb { - background: #c1c1c1; - border-radius: 4px; - } - ::-webkit-scrollbar-thumb:hover { - background: #a8a8a8; - } -} - -image { - border: 0; - vertical-align: middle; - max-width: 100%; -} - -.define-topBar__components { - position: fixed; - top: 0; - width: 100%; - z-index: 10000; -} - -.autowidth { - width: 18rem; - margin: auto; - max-width: 90%; -} - -@media (max-width: 1366px) { - .autowidth { - width: auto; - } -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 24px; -} - -@media (min-width: 2560px) { - .container { - max-width: 1800px; - padding: 0 80px; - } -} - -@media (min-width: 1920px) and (max-width: 2559px) { - .container { - max-width: 1500px; - padding: 0 60px; - } -} - -@media (min-width: 1440px) and (max-width: 1919px) { - .container { - max-width: 1300px; - padding: 0 40px; - } -} - -@media (max-width: 1024px) { - .container { - padding: 0 30px; - } -} - -@media (max-width: 768px) { - .container { - padding: 0 20px; - } -} - -@media (max-width: 480px) { - .container { - padding: 0 16px; - } -} - -@media (max-width: 375px) { - .container { - padding: 0 12px; - } -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 24px; -} - -@media (min-width: 2560px) { - .container { - max-width: 1800px; - padding: 0 80px; - } -} - -@media (min-width: 1920px) and (max-width: 2559px) { - .container { - max-width: 1500px; - padding: 0 60px; - } -} - -@media (min-width: 1440px) and (max-width: 1919px) { - .container { - max-width: 1300px; - padding: 0 40px; - } -} - -@media (max-width: 1024px) { - .container { - padding: 0 30px; - } -} - -@media (max-width: 768px) { - .container { - padding: 0 20px; - } -} - -@media (max-width: 480px) { - .container { - padding: 0 16px; - } -} - -@media (max-width: 375px) { - .container { - padding: 0 12px; - } -} - -.animationDH { - opacity: 0; -} - -.animateLt { - animation: 1s dh_left linear both; - -webkit-animation: 1s dh_left linear both; -} - -.animateRt { - animation: 1s dh_right linear both; - -webkit-animation: 1s dh_right linear both; -} - -.animateBt { - animation: 1s dh_buttom linear both; - -webkit-animation: 1s dh_buttom linear both; -} - -.dhLeft { - -webkit-opacity: 0; - transform: translate(75px, 0); - -webkit-transform: translate(75px, 0); - transition: 1s; - -webkit-transition: 1s; -} - -.dhRight { - -webkit-opacity: 0; - transform: translate(-45px, 0); - -webkit-transform: translate(-45px, 0); - transition: 1s; - -webkit-transition: 1s; -} - -.dhTop { - transform: translate(0, 45px); - -webkit-transform: translate(0, 45px); - transition: transform 1s; - -webkit-transition: transform 1s; -} - -.dhBottom { - -webkit-opacity: 0; - transform: translate(0, -45px); - -webkit-transform: translate(0, -45px); - transition: 1s; - -webkit-transition: 1s; -} - -.dhyc1 { - transition-delay: 0.25s; - -webkit-transition-delay: 0.25s; -} - -.dhyc2 { - transition-delay: 0.5s; - -webkit-transition-delay: 0.5s; -} - -.dhyc3 { - transition-delay: 0.75s; - -webkit-transition-delay: 0.75s; -} - -.dhyc4 { - transition-delay: 1s; - -webkit-transition-delay: 1s; -} - -@-webkit-keyframes dh_right { - from { - opacity: 0; - -webkit-transform: translate(60px, 0%); - } - to { - opacity: 1; - -webkit-transform: translate(0, 0); - } -} - -@keyframes dh_right { - from { - opacity: 0; - transform: translate(60px, 0%); - } - to { - opacity: 1; - transform: translate(0, 0); - } -} - -@-webkit-keyframes dh_left { - from { - opacity: 0; - -webkit-transform: translate(-60px, 0%); - } - to { - opacity: 1; - -webkit-transform: translate(0, 0); - } -} - -@keyframes dh_left { - from { - opacity: 0; - transform: translate(-60px, 0%); - } - to { - opacity: 1; - transform: translate(0, 0); - } -} - -@-webkit-keyframes dh_buttom { - from { - opacity: 0; - -webkit-transform: translate(0, 60px); - } - to { - opacity: 1; - -webkit-transform: translate(0, 0); - } -} - -@keyframes dh_buttom { - from { - opacity: 0; - transform: translate(0, 60px); - } - to { - opacity: 1; - transform: translate(0, 0); - } -} - -/* Banner 样式 */ -.banner { - margin-top: 0.52rem; - overflow: hidden; - height: 5.5rem; - background-size: cover !important; - position: relative; - display: flex; - align-items: center; - box-pack: center; - justify-content: center; - min-height: 230px; -} - -@media (max-width: 1600px) { - .banner { - margin-top: 0.6rem; - } -} - -@media (max-width: 1099px) { - .banner { - margin-top: 50px; - } -} - -@media (max-width: 1100px) { - .banner { - height: 7.5rem; - } -} - -@media (max-width: 800px) { - .banner { - height: 10rem; - } -} - -.banner__box { - width: 100%; - text-align: center; - color: #fff; - animation: 1s dh_buttom linear both; - -webkit-animation: 1s dh_buttom linear both; -} - -.banner__box__title { - font-size: var(--text-5xl); - color: #fff; - text-align: center; - font-family: var(--font-medium); -} - -.banner__box__subtitle { - font-size: var(--text-xl); - text-transform: uppercase; - font-family: var(--font-light); -} - -@media (min-width: 751px) and (max-width: 1100px) { - .banner__box__title { - font-size: var(--text-6xl); - } - .banner__box__subtitle { - font-size: var(--text-3xl); - } -} - -@media (max-width: 750px) { - .banner__box__title { - font-size: 0.75rem; - } - .banner__box__subtitle { - font-size: 0.55rem; - } -} - -@media (max-width: 550px) { - .banner__box__title { - font-size: 0.9rem; - } - .banner__box__subtitle { - font-size: 0.65rem; - } -} - -.pageMain { - overflow: hidden; -} - -.pageMain__breads { - color: #666; - width: auto; - margin: 0 auto; - border-bottom: 1px solid #e5e5e5; -} - -.pageMain__breads__box { - width: 15rem; - color: #666; - line-height: 4; - text-align: left; - font-family: var(--font-regular); -} - -.pageMain__breads__box__icon__avater { - width: 0.17rem; - height: 0.17rem; - margin-bottom: 0.03rem; -} - -@media (max-width: 1600px) { - .pageMain__breads__box { - font-size: 13.5px; - line-height: 3.2; - } - .pageMain__breads__box__icon__avater { - width: 15px; - height: 15px; - margin-bottom: 3px; - } -} - -.pageMain__breads__box a { - font-family: var(--font-medium); - letter-spacing: 0.5px; - cursor: pointer; -} - -@media (min-width: 1100px) { - .pageMain__breads__box a:hover { - color: #0072ff; - } -} - -@media (max-width: 1024px) { - .pageMain__breads__box { - font-size: 13px; - width: 95%; - } -} - -@media (max-width: 500px) { - .pageMain__breads__box { - font-size: 0.6rem; - } - .pageMain__breads__box__icon__avater { - width: 0.68rem; - height: 0.68rem; - } -} - -@media (max-width: 350px) { - .pageMain__breads__box { - font-size: 0.7rem; - } -} - -.pageMain__line { - position: relative; - text-align: center; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-justify-content: center; - border-bottom: 1px solid #e5e5e5; - padding: 0.1rem 0 0.2rem; - margin-bottom: 0.5rem; -} - -@media (max-width: 600px) { - .pageMain__line { - padding: 0.5rem 0; - } -} - -.pageMain__line__item { - margin: 0 1rem; - position: relative; - padding: 0.1rem 0; - text-align: center; - font-size: var(--text-lg); - font-family: var(--font-normal); - cursor: pointer; -} - -@media (max-width: 1600px) { - .pageMain__line__item { - font-size: 15.5px; - } -} - -@media (min-width: 501px) and (max-width: 1100px) { - .pageMain__line__item { - font-size: 14px; - } -} - -@media (max-width: 500px) { - .pageMain__line__item { - font-size: 0.6rem; - } -} - -@media (max-width: 350px) { - .pageMain__line__item { - font-size: 0.9rem; - } -} - -.pageMain__line__item::before { - position: absolute; - left: 15%; - content: ""; - bottom: 0; - height: 3px; - border-radius: 5px; - background: #0072ff; - width: 0; - transition: 0.5s; -} - -@media (max-width: 700px) { - .pageMain__line__item::before { - height: 1px; - } -} - -.pageMain__line__item:hover::before { - width: 70%; -} - -.pageMain__line--on { - color: #0072ff; - font-weight: 500; -} - -.pageMain__line--on::before { - width: 70%; -} - -.pageMain__buttom-line { - padding: 0.36rem 0 0.7rem; -} - -.sticky-page-layout { - position: relative; - min-height: 100vh; -} - -.nav-sticky { - line-height: 3; - top: 0px; - position: absolute; - z-index: 99; - width: 100%; -} - -@media (max-width: 1500px) { - .nav-sticky { - height: auto; - line-height: 3.5; - font-size: 0.22rem; - } -} - -@media (max-width: 1200px) { - .nav-sticky { - height: auto; - line-height: 3.5; - font-size: 0.24rem; - } -} - -@media (max-width: 850px) { - .nav-sticky { - font-size: 0.42rem; - } -} - -@media (max-width: 650px) { - .nav-sticky { - line-height: 3.5; - font-size: 0.5rem; - } -} - -@media (max-width: 500px) { - .nav-sticky { - line-height: 3.5; - font-size: 0.63rem; - } -} - -.nav-sticky__center { - width: 9.8rem; - margin: 0 auto; - transition: width 0.3s; - color: #ffffff; - display: flex; - border-bottom: 1px solid rgba(255, 255, 255, 0.24); - justify-content: space-between; - font-family: var(--font-regular); -} - -@media (max-width: 1200px) { - .nav-sticky__center { - width: 100%; - } -} - -.nav-sticky__center__left { - font-size: 0.17rem; - font-family: "Microsoft YaHei"; - font-weight: bold; - line-height: 3; -} - -@media (max-width: 1500px) { - .nav-sticky__center__left { - height: auto; - line-height: 3.5; - font-size: 0.22rem; - } -} - -@media (max-width: 1200px) { - .nav-sticky__center__left { - height: auto; - line-height: 3.5; - font-size: 0.24rem; - } -} - -@media (max-width: 850px) { - .nav-sticky__center__left { - font-size: 0.42rem; - } -} - -@media (max-width: 650px) { - .nav-sticky__center__left { - line-height: 3.5; - font-size: 0.5rem; - } -} - -@media (max-width: 500px) { - .nav-sticky__center__left { - line-height: 3.5; - font-size: 0.63rem; - } -} - -@media (max-width: 1200px) { - .nav-sticky__center__left { - margin-left: 0.6rem; - } -} - -.nav-sticky__center__right { - display: flex; - width: fit-content; - line-height: 3; - font-size: 0.15rem; - justify-content: space-between; - cursor: pointer; - box-sizing: border-box; -} - -@media (max-width: 1500px) { - .nav-sticky__center__right { - height: auto; - line-height: 3.5; - font-size: 0.22rem; - } -} - -@media (max-width: 1200px) { - .nav-sticky__center__right { - height: auto; - line-height: 3.5; - font-size: 0.24rem; - } -} - -@media (max-width: 850px) { - .nav-sticky__center__right { - font-size: 0.42rem; - } -} - -@media (max-width: 650px) { - .nav-sticky__center__right { - line-height: 3.5; - font-size: 0.5rem; - } -} - -@media (max-width: 500px) { - .nav-sticky__center__right { - line-height: 3.5; - font-size: 0.63rem; - } -} - -@media (max-width: 1200px) { - .nav-sticky__center__right { - margin-right: 0.6rem; - } -} - -.nav-sticky__center__right__item { - margin: 0 0.2rem; - opacity: 0.6; -} - -@media (max-width: 600px) { - .nav-sticky__center__right__item { - margin: 0 0.4rem; - } -} - -.nav-sticky__center__right__item:hover { - opacity: 1; -} - -.nav-sticky__center__right--Active { - opacity: 1; - border-bottom: 0.01rem solid #fff; -} - -.nav-sticky__center__right__dropdown { - position: relative; - display: none; -} - -.nav-sticky__center__right__dropdown__up { - line-height: 3; - background-color: transparent; - color: #fff; - cursor: pointer; - display: flex; - align-items: center; - margin-right: 15px; -} - -@media (max-width: 1500px) { - .nav-sticky__center__right__dropdown__up { - height: auto; - line-height: 3.5; - font-size: 0.22rem; - } -} - -@media (max-width: 1200px) { - .nav-sticky__center__right__dropdown__up { - height: auto; - line-height: 3.5; - font-size: 0.24rem; - } -} - -@media (max-width: 850px) { - .nav-sticky__center__right__dropdown__up { - font-size: 0.42rem; - } -} - -@media (max-width: 650px) { - .nav-sticky__center__right__dropdown__up { - line-height: 3.5; - font-size: 0.5rem; - } -} - -@media (max-width: 500px) { - .nav-sticky__center__right__dropdown__up { - line-height: 3.5; - font-size: 0.63rem; - } -} - -.nav-sticky__center__right__dropdown__up .arrow-down { - width: 30px; - text-align: center; - font-size: 8px; -} - -.nav-sticky__center__right__dropdown__menu { - position: absolute; - top: 100%; - left: -50%; - background-color: #222; - border-radius: 5px; - margin-top: 10px; - box-shadow: 0 0.04rem 0.1rem 0.02rem rgba(0, 0, 0, 0.08); - z-index: 1; - width: 150%; - padding: 20px 0; -} - -.nav-sticky__center__right__dropdown__menu__item { - color: #919191; - cursor: pointer; - text-align: center; -} - -.nav-sticky__center__right__dropdown__menu__item--Active { - color: #0072ff; -} - -.nav-sticky--active { - top: 0; - width: 100%; - position: sticky; - background-color: rgba(3, 6, 11, 0.4); - border-bottom: 1px solid rgba(236, 234, 234, 0.2); -} - -.nav-sticky--active .nav-sticky__center { - border-bottom: none; -} - -.detail-banner { - width: 100%; - height: 10.8rem; - color: #ffffff; - position: relative; -} - -.detail-banner__title { - font-family: var(--font-medium); - position: absolute; - font-size: 0.55rem; - top: 1.5rem; - left: 50%; - width: 90%; - text-align: center; - transform: translate(-50%, 0); -} - -.detail-banner__avater { - width: 100%; - height: 100%; -} - -@media (max-width: 850px) { - .detail-banner { - padding-top: 2rem; - height: 12.8rem; - } - .detail-banner__title { - font-size: 0.8rem; - top: 3.8rem; - } - .detail-banner__title-2 { - font-size: 0.8rem; - top: 3.2rem; - } -} - -/* 加载遮罩 */ -.load-mask { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #ffffff; - display: flex; - justify-content: center; - z-index: 10002; -} - -.load-mask .spinner { - width: 150px; - text-align: center; - margin-top: 20vh; -} - -.load-mask .spinner .spinner__item { - width: 15px; - height: 15px; - background-color: #aeadba; - border-radius: 100%; - display: inline-block; - animation: bouncedelay 1.4s infinite ease-in-out; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.load-mask .spinner .bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; -} - -.load-mask .spinner .bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; -} - -@keyframes bouncedelay { - 0%, 80%, 100% { - transform: scale(0); - } - 40% { - transform: scale(1); - } -} - -.load-loading { - display: flex; - justify-content: center; - align-items: center; - height: 35vh; -} - -.load-loading__box { - width: 200px; - height: auto; - color: #aeadba; - text-align: center; -} - -.load-loading__box__up { - width: 55px; - margin: auto; -} - -.load-loading__box__up__avater { - width: 100%; - height: auto; -} - -.load-loading__box__text { - font-size: 16px; - line-height: 3; - font-family: var(--font-regular); -} - -@media (max-width: 1024px) { - .load-loading__box__up { - width: 47px; - } - .load-loading__box__text { - font-size: 11px; - } -} - -@media (min-width: 1920px) { - .load-loading__box { - width: 2rem; - height: 1rem; - } - .load-loading__box__up { - width: 0.55rem; - } - .load-loading__box__text { - font-size: 0.14rem; - } -} - -[class*="is-animating-"] { - transform: translateY(11.71rpx); - opacity: 0; -} - -.font-light { - font-family: var(--font-light); -} - -.font-normal { - font-family: var(--font-normal); -} - -.font-regular { - font-family: var(--font-regular); -} - -.font-medium { - font-family: var(--font-medium); -} - -.font-semibold { - font-family: var(--font-semibold); -} - -.font-bold { - font-family: var(--font-bold); -} - -.text-xs { - font-size: var(--text-xs); -} - -.text-sm { - font-size: var(--text-sm); -} - -.text-base { - font-size: var(--text-base); -} - -.text-lg { - font-size: var(--text-lg); -} - -.text-xl { - font-size: var(--text-xl); -} - -.text-2xl { - font-size: var(--text-2xl); -} - -.text-3xl { - font-size: var(--text-3xl); -} - -.text-4xl { - font-size: var(--text-4xl); -} - -.text-5xl { - font-size: var(--text-5xl); -} - -.text-6xl { - font-size: var(--text-6xl); -} diff --git a/src/common/css/common.min.css b/src/common/css/common.min.css deleted file mode 100644 index a33928a..0000000 --- a/src/common/css/common.min.css +++ /dev/null @@ -1 +0,0 @@ -body,div,span,header,footer,nav,section,aside,article,ul,dl,dt,dd,li,a,p,h1,h2,h3,h4,h5,h6,i,b,textarea,button,input,select,figure,figcaption{padding:0;margin:0;list-style:none;font-style:normal;text-decoration:none;border:none;font-weight:normal;font-family:MiSans-Regular;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}body:hover,div:hover,span:hover,header:hover,footer:hover,nav:hover,section:hover,aside:hover,article:hover,ul:hover,dl:hover,dt:hover,dd:hover,li:hover,a:hover,p:hover,h1:hover,h2:hover,h3:hover,h4:hover,h5:hover,h6:hover,i:hover,b:hover,textarea:hover,button:hover,input:hover,select:hover,figure:hover,figcaption:hover{outline:none}:root{--font-light:MiSans-Light;--font-normal:MiSans-Normal;--font-regular:MiSans-Regular;--font-medium:MiSans-Medium;--font-semibold:MiSans-SemiBold;--font-bold:MiSans-Bold;--text-xs:0.12rem;--text-sm:0.14rem;--text-base:0.16rem;--text-lg:0.18rem;--text-xl:0.20rem;--text-2xl:0.24rem;--text-3xl:0.28rem;--text-4xl:0.32rem;--text-5xl:0.36rem;--text-6xl:0.40rem;--breakpoint-xs:375px;--breakpoint-sm:480px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1440px;--breakpoint-2xl:1920px;--breakpoint-4k:2560px}a{color:inherit}ul,ol,li{list-style-type:none}a{text-decoration:none;outline:none;color:#333;cursor:pointer;font-family:var(--font-regular)}a:focus{outline:none;-moz-outline:none}a img{border:none}select,input,textarea{border-radius:0;-webkit-border-radius:0;font-family:var(--font-regular)}input:focus{outline:none}input,button,select,textarea{outline:none}textarea{resize:none}textarea,input,select{background:none;border:none;margin:0;padding:0}table{background-color:transparent;border-spacing:0;border-collapse:collapse;font-size:0.75em;width:100%;border-top:solid 1px #ddd;border-left:solid 1px #ddd;box-sizing:border-box}table th{background-color:#f9f9f9;text-align:center;box-sizing:border-box}table td,table th{padding:5px 10px;border:1px solid #ddd;box-sizing:border-box}input[type="button"],input[type="submit"],input[type="file"],button{cursor:pointer;-webkit-appearance:none;font-family:var(--font-regular)}img{vertical-align:middle}html{font-size:calc(100 * 100vw / 1920) !important;min-height:100vh}@media (min-width: 2560px){html{font-size:calc(100 * 100vw / 2560) !important}}@media (min-width: 1920px) and (max-width: 2559px){html{font-size:calc(100 * 100vw / 1920) !important}}@media (min-width: 1440px) and (max-width: 1919px){html{font-size:calc(100 * 100vw / 1440) !important}}@media (min-width: 1024px) and (max-width: 1439px){html{font-size:calc(100 * 100vw / 1024) !important}}@media (min-width: 768px) and (max-width: 1023px){html{font-size:calc(100 * 100vw / 768) !important}}@media (min-width: 480px) and (max-width: 767px){html{font-size:calc(100 * 100vw / 480) !important}}@media (max-width: 479px){html{font-size:calc(100 * 100vw / 375) !important}}html,body{height:100%;width:100%;font-family:var(--font-regular);user-select:text;font-size:var(--text-base);color:#3f4552;line-height:1.8}@media (max-width: 750px){html::-webkit-scrollbar{display:none}html{-ms-overflow-style:none;scrollbar-width:none}}@media (min-width: 751px){::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}}image{border:0;vertical-align:middle;max-width:100%}.define-topBar__components{position:fixed;top:0;width:100%;z-index:10000}.autowidth{width:18rem;margin:auto;max-width:90%}@media (max-width: 1366px){.autowidth{width:auto}}.container{max-width:1200px;margin:0 auto;padding:0 24px}@media (min-width: 2560px){.container{max-width:1800px;padding:0 80px}}@media (min-width: 1920px) and (max-width: 2559px){.container{max-width:1500px;padding:0 60px}}@media (min-width: 1440px) and (max-width: 1919px){.container{max-width:1300px;padding:0 40px}}@media (max-width: 1024px){.container{padding:0 30px}}@media (max-width: 768px){.container{padding:0 20px}}@media (max-width: 480px){.container{padding:0 16px}}@media (max-width: 375px){.container{padding:0 12px}}.container{max-width:1200px;margin:0 auto;padding:0 24px}@media (min-width: 2560px){.container{max-width:1800px;padding:0 80px}}@media (min-width: 1920px) and (max-width: 2559px){.container{max-width:1500px;padding:0 60px}}@media (min-width: 1440px) and (max-width: 1919px){.container{max-width:1300px;padding:0 40px}}@media (max-width: 1024px){.container{padding:0 30px}}@media (max-width: 768px){.container{padding:0 20px}}@media (max-width: 480px){.container{padding:0 16px}}@media (max-width: 375px){.container{padding:0 12px}}.animationDH{opacity:0}.animateLt{animation:1s dh_left linear both;-webkit-animation:1s dh_left linear both}.animateRt{animation:1s dh_right linear both;-webkit-animation:1s dh_right linear both}.animateBt{animation:1s dh_buttom linear both;-webkit-animation:1s dh_buttom linear both}.dhLeft{-webkit-opacity:0;transform:translate(75px, 0);-webkit-transform:translate(75px, 0);transition:1s;-webkit-transition:1s}.dhRight{-webkit-opacity:0;transform:translate(-45px, 0);-webkit-transform:translate(-45px, 0);transition:1s;-webkit-transition:1s}.dhTop{transform:translate(0, 45px);-webkit-transform:translate(0, 45px);transition:transform 1s;-webkit-transition:transform 1s}.dhBottom{-webkit-opacity:0;transform:translate(0, -45px);-webkit-transform:translate(0, -45px);transition:1s;-webkit-transition:1s}.dhyc1{transition-delay:0.25s;-webkit-transition-delay:0.25s}.dhyc2{transition-delay:0.5s;-webkit-transition-delay:0.5s}.dhyc3{transition-delay:0.75s;-webkit-transition-delay:0.75s}.dhyc4{transition-delay:1s;-webkit-transition-delay:1s}@-webkit-keyframes dh_right{from{opacity:0;-webkit-transform:translate(60px, 0%)}to{opacity:1;-webkit-transform:translate(0, 0)}}@keyframes dh_right{from{opacity:0;transform:translate(60px, 0%)}to{opacity:1;transform:translate(0, 0)}}@-webkit-keyframes dh_left{from{opacity:0;-webkit-transform:translate(-60px, 0%)}to{opacity:1;-webkit-transform:translate(0, 0)}}@keyframes dh_left{from{opacity:0;transform:translate(-60px, 0%)}to{opacity:1;transform:translate(0, 0)}}@-webkit-keyframes dh_buttom{from{opacity:0;-webkit-transform:translate(0, 60px)}to{opacity:1;-webkit-transform:translate(0, 0)}}@keyframes dh_buttom{from{opacity:0;transform:translate(0, 60px)}to{opacity:1;transform:translate(0, 0)}}.banner{margin-top:0.52rem;overflow:hidden;height:5.5rem;background-size:cover !important;position:relative;display:flex;align-items:center;box-pack:center;justify-content:center;min-height:230px}@media (max-width: 1600px){.banner{margin-top:0.6rem}}@media (max-width: 1099px){.banner{margin-top:50px}}@media (max-width: 1100px){.banner{height:7.5rem}}@media (max-width: 800px){.banner{height:10rem}}.banner__box{width:100%;text-align:center;color:#fff;animation:1s dh_buttom linear both;-webkit-animation:1s dh_buttom linear both}.banner__box__title{font-size:var(--text-5xl);color:#fff;text-align:center;font-family:var(--font-medium)}.banner__box__subtitle{font-size:var(--text-xl);text-transform:uppercase;font-family:var(--font-light)}@media (min-width: 751px) and (max-width: 1100px){.banner__box__title{font-size:var(--text-6xl)}.banner__box__subtitle{font-size:var(--text-3xl)}}@media (max-width: 750px){.banner__box__title{font-size:0.75rem}.banner__box__subtitle{font-size:0.55rem}}@media (max-width: 550px){.banner__box__title{font-size:0.9rem}.banner__box__subtitle{font-size:0.65rem}}.pageMain{overflow:hidden}.pageMain__breads{color:#666;width:auto;margin:0 auto;border-bottom:1px solid #e5e5e5}.pageMain__breads__box{width:15rem;color:#666;line-height:4;text-align:left;font-family:var(--font-regular)}.pageMain__breads__box__icon__avater{width:0.17rem;height:0.17rem;margin-bottom:0.03rem}@media (max-width: 1600px){.pageMain__breads__box{font-size:13.5px;line-height:3.2}.pageMain__breads__box__icon__avater{width:15px;height:15px;margin-bottom:3px}}.pageMain__breads__box a{font-family:var(--font-medium);letter-spacing:0.5px;cursor:pointer}@media (min-width: 1100px){.pageMain__breads__box a:hover{color:#0072ff}}@media (max-width: 1024px){.pageMain__breads__box{font-size:13px;width:95%}}@media (max-width: 500px){.pageMain__breads__box{font-size:0.6rem}.pageMain__breads__box__icon__avater{width:0.68rem;height:0.68rem}}@media (max-width: 350px){.pageMain__breads__box{font-size:0.7rem}}.pageMain__line{position:relative;text-align:center;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-justify-content:center;border-bottom:1px solid #e5e5e5;padding:0.1rem 0 0.2rem;margin-bottom:0.5rem}@media (max-width: 600px){.pageMain__line{padding:0.5rem 0}}.pageMain__line__item{margin:0 1rem;position:relative;padding:0.1rem 0;text-align:center;font-size:var(--text-lg);font-family:var(--font-normal);cursor:pointer}@media (max-width: 1600px){.pageMain__line__item{font-size:15.5px}}@media (min-width: 501px) and (max-width: 1100px){.pageMain__line__item{font-size:14px}}@media (max-width: 500px){.pageMain__line__item{font-size:0.6rem}}@media (max-width: 350px){.pageMain__line__item{font-size:0.9rem}}.pageMain__line__item::before{position:absolute;left:15%;content:"";bottom:0;height:3px;border-radius:5px;background:#0072ff;width:0;transition:0.5s}@media (max-width: 700px){.pageMain__line__item::before{height:1px}}.pageMain__line__item:hover::before{width:70%}.pageMain__line--on{color:#0072ff;font-weight:500}.pageMain__line--on::before{width:70%}.pageMain__buttom-line{padding:0.36rem 0 0.7rem}.sticky-page-layout{position:relative;min-height:100vh}.nav-sticky{line-height:3;top:0px;position:absolute;z-index:99;width:100%}@media (max-width: 1500px){.nav-sticky{height:auto;line-height:3.5;font-size:0.22rem}}@media (max-width: 1200px){.nav-sticky{height:auto;line-height:3.5;font-size:0.24rem}}@media (max-width: 850px){.nav-sticky{font-size:0.42rem}}@media (max-width: 650px){.nav-sticky{line-height:3.5;font-size:0.5rem}}@media (max-width: 500px){.nav-sticky{line-height:3.5;font-size:0.63rem}}.nav-sticky__center{width:9.8rem;margin:0 auto;transition:width 0.3s;color:#ffffff;display:flex;border-bottom:1px solid rgba(255,255,255,0.24);justify-content:space-between;font-family:var(--font-regular)}@media (max-width: 1200px){.nav-sticky__center{width:100%}}.nav-sticky__center__left{font-size:0.17rem;font-family:"Microsoft YaHei";font-weight:bold;line-height:3}@media (max-width: 1500px){.nav-sticky__center__left{height:auto;line-height:3.5;font-size:0.22rem}}@media (max-width: 1200px){.nav-sticky__center__left{height:auto;line-height:3.5;font-size:0.24rem}}@media (max-width: 850px){.nav-sticky__center__left{font-size:0.42rem}}@media (max-width: 650px){.nav-sticky__center__left{line-height:3.5;font-size:0.5rem}}@media (max-width: 500px){.nav-sticky__center__left{line-height:3.5;font-size:0.63rem}}@media (max-width: 1200px){.nav-sticky__center__left{margin-left:0.6rem}}.nav-sticky__center__right{display:flex;width:fit-content;line-height:3;font-size:0.15rem;justify-content:space-between;cursor:pointer;box-sizing:border-box}@media (max-width: 1500px){.nav-sticky__center__right{height:auto;line-height:3.5;font-size:0.22rem}}@media (max-width: 1200px){.nav-sticky__center__right{height:auto;line-height:3.5;font-size:0.24rem}}@media (max-width: 850px){.nav-sticky__center__right{font-size:0.42rem}}@media (max-width: 650px){.nav-sticky__center__right{line-height:3.5;font-size:0.5rem}}@media (max-width: 500px){.nav-sticky__center__right{line-height:3.5;font-size:0.63rem}}@media (max-width: 1200px){.nav-sticky__center__right{margin-right:0.6rem}}.nav-sticky__center__right__item{margin:0 0.2rem;opacity:0.6}@media (max-width: 600px){.nav-sticky__center__right__item{margin:0 0.4rem}}.nav-sticky__center__right__item:hover{opacity:1}.nav-sticky__center__right--Active{opacity:1;border-bottom:0.01rem solid #fff}.nav-sticky__center__right__dropdown{position:relative;display:none}.nav-sticky__center__right__dropdown__up{line-height:3;background-color:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;margin-right:15px}@media (max-width: 1500px){.nav-sticky__center__right__dropdown__up{height:auto;line-height:3.5;font-size:0.22rem}}@media (max-width: 1200px){.nav-sticky__center__right__dropdown__up{height:auto;line-height:3.5;font-size:0.24rem}}@media (max-width: 850px){.nav-sticky__center__right__dropdown__up{font-size:0.42rem}}@media (max-width: 650px){.nav-sticky__center__right__dropdown__up{line-height:3.5;font-size:0.5rem}}@media (max-width: 500px){.nav-sticky__center__right__dropdown__up{line-height:3.5;font-size:0.63rem}}.nav-sticky__center__right__dropdown__up .arrow-down{width:30px;text-align:center;font-size:8px}.nav-sticky__center__right__dropdown__menu{position:absolute;top:100%;left:-50%;background-color:#222;border-radius:5px;margin-top:10px;box-shadow:0 0.04rem 0.1rem 0.02rem rgba(0,0,0,0.08);z-index:1;width:150%;padding:20px 0}.nav-sticky__center__right__dropdown__menu__item{color:#919191;cursor:pointer;text-align:center}.nav-sticky__center__right__dropdown__menu__item--Active{color:#0072ff}.nav-sticky--active{top:0;width:100%;position:sticky;background-color:rgba(3,6,11,0.4);border-bottom:1px solid rgba(236,234,234,0.2)}.nav-sticky--active .nav-sticky__center{border-bottom:none}.detail-banner{width:100%;height:10.8rem;color:#ffffff;position:relative}.detail-banner__title{font-family:var(--font-medium);position:absolute;font-size:0.55rem;top:1.5rem;left:50%;width:90%;text-align:center;transform:translate(-50%, 0)}.detail-banner__avater{width:100%;height:100%}@media (max-width: 850px){.detail-banner{padding-top:2rem;height:12.8rem}.detail-banner__title{font-size:0.8rem;top:3.8rem}.detail-banner__title-2{font-size:0.8rem;top:3.2rem}}.load-mask{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#ffffff;display:flex;justify-content:center;z-index:10002}.load-mask .spinner{width:150px;text-align:center;margin-top:20vh}.load-mask .spinner .spinner__item{width:15px;height:15px;background-color:#aeadba;border-radius:100%;display:inline-block;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.load-mask .spinner .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.load-mask .spinner .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@keyframes bouncedelay{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.load-loading{display:flex;justify-content:center;align-items:center;height:35vh}.load-loading__box{width:200px;height:auto;color:#aeadba;text-align:center}.load-loading__box__up{width:55px;margin:auto}.load-loading__box__up__avater{width:100%;height:auto}.load-loading__box__text{font-size:16px;line-height:3;font-family:var(--font-regular)}@media (max-width: 1024px){.load-loading__box__up{width:47px}.load-loading__box__text{font-size:11px}}@media (min-width: 1920px){.load-loading__box{width:2rem;height:1rem}.load-loading__box__up{width:0.55rem}.load-loading__box__text{font-size:0.14rem}}[class*="is-animating-"]{transform:translateY(11.71rpx);opacity:0}.font-light{font-family:var(--font-light)}.font-normal{font-family:var(--font-normal)}.font-regular{font-family:var(--font-regular)}.font-medium{font-family:var(--font-medium)}.font-semibold{font-family:var(--font-semibold)}.font-bold{font-family:var(--font-bold)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.text-5xl{font-size:var(--text-5xl)}.text-6xl{font-size:var(--text-6xl)} diff --git a/src/common/css/common.scss b/src/common/css/common.scss index 9f2c838..7287cd2 100644 --- a/src/common/css/common.scss +++ b/src/common/css/common.scss @@ -198,17 +198,17 @@ html, body { /* 桌面端滚动条样式 */ @media (min-width: 751px) { ::-webkit-scrollbar { - width: 8px; + width: 12px; } ::-webkit-scrollbar-track { background: #f1f1f1; - border-radius: 4px; + // border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #c1c1c1; - border-radius: 4px; + // border-radius: 4px; &:hover { background: #a8a8a8; diff --git a/src/locale/cn.json b/src/locale/cn.json index 4ceaed8..ff22929 100644 --- a/src/locale/cn.json +++ b/src/locale/cn.json @@ -1,402 +1,424 @@ { - "page.home":"首页", - "page.odm-oem":"定制服务", - "page.product":"产品列表", - "page.about-us":"关于我们", - "page.honors":"证书荣誉", - "page.news":"新闻资讯", - "page.contact-us":"联系我们", - "page.app-download":"BrightEMS App下载", - "page.news-detail":"新闻详情", - "page.core-advantage": "核心优势", - "page.detail":"产品详情", - "page.company-profile": "公司介绍", - "page.support":"支持", - "page.company": "中山市明阳良光照明有限公司", - "page.back-to-top":"返回顶部", - "page.404-content":"抱歉，你访问的页面地址有误，或者不存在", - "page.404-button":"返回首页", - "page.company-abbreviation":"明阳良光", - "page.loading":"数据正在加载中...", - - "navbar.search":"你需要哪些帮助", - "navbar.product":"产品", - "navbar.app":"APP下载", - "navbar.recommend":"搜索建议", - "navbar.language":"语言", - - - "home.sence-main-tile":"户外旅行", - "home.sence-main-subTile":"便携式储能电源可以为", - "home.sence-main-subTitle-2":"户外活动中的各种设备提供电力", - "home.sence-item-1-tile":"停电应急", - "home.sence-item-1-subTile":"停电或自然灾害等紧急情况下", - "home.sence-item-1-subTitle-2":"储能电源能够提供关键的电力支持", - "home.sence-item-2-tile":"工作学习", - "home.sence-item-2-subTile":"停电或自然灾害等紧急情况下", - "home.sence-item-2-subTitle-2":"办公时不会因为电力不足而受到影响", - "home.sence-item-3-tile":"家庭用电", - "home.sence-item-3-subTile":"可以作为家庭的备用电源", - "home.sence-item-3-subTitle-2":"保持基本通讯和生活功能", - "home.certificate-title":"资质认证", - "home.certificate-subTitle":"为您的产品保驾护航，以质量赢得信誉，以服务回报客户", - - "home.learn-more": "了解更多", - "home.view-more":"查看更多", - "home.situation": "明阳良光 企业概况", - "home.platform": "台", - "home.individual": "个", - - "home.sale": "销售国家", - "home.development":"全球业务发展", - "home.products": "强大生产能力，销售能力以及售后服务能力，为全球客户提供有力支持，建立长期战略合作关系", - "home.Energy": "日产能", - "home.service-centers": "海外服务中心", - "home.main-products": "主要产品", - "home.solar-panel": "太阳能板", - "home.power-station": "储能电源", - "home.accessory": "配件", - "home.temporary-video": "临时视频", - "home.image-":"背景图", + "page.home": "首页", + "page.odm-oem": "定制服务", + "page.product": "产品列表", + "page.about-us": "关于我们", + "page.honors": "证书荣誉", + "page.news": "新闻资讯", + "page.contact-us": "联系我们", + "page.app-download": "BrightEMS App下载", + "page.news-detail": "新闻详情", + "page.core-advantage": "核心优势", + "page.detail": "产品详情", + "page.company-profile": "公司介绍", + "page.support": "支持", + "page.company": "中山市明阳良光照明有限公司", + "page.back-to-top": "返回顶部", + "page.404-content": "抱歉，你访问的页面地址有误，或者不存在", + "page.404-button": "返回首页", + "page.company-abbreviation": "明阳良光", + "page.loading": "数据正在加载中...", - "home.about-syd": "关于明阳良光", - "home.professional":"专业的智能系统制造商", - "home.year": "年", - "home.establish": "公司成立", - "home.employees": "公司员工", - "home.proportion": "研发占比", - "home.factoryarea": "厂房面积", - "home.recording":"记录明阳良光改变世界的时刻", + "navbar.search": "你需要哪些帮助", + "navbar.product": "产品", + "navbar.app": "APP下载", + "navbar.recommend": "搜索建议", + "navbar.language": "语言", - "foot.service-terms": "服务协议", - "foot.privacy-policy": "隐私声明", - "foot.valid-email": "请输入有效的电子邮件地址", - "foot.company":"中山市明阳良光照明有限公司版权所有", - "foot.record-number":"备案号：粤ICP备15063791号", + "home.sence-main-tile": "户外旅行", + "home.sence-main-subTile": "便携式储能电源可以为", + "home.sence-main-subTitle-2": "户外活动中的各种设备提供电力", + "home.sence-item-1-tile": "停电应急", + "home.sence-item-1-subTile": "停电或自然灾害等紧急情况下", + "home.sence-item-1-subTitle-2": "储能电源能够提供关键的电力支持", + "home.sence-item-2-tile": "工作学习", + "home.sence-item-2-subTile": "停电或自然灾害等紧急情况下", + "home.sence-item-2-subTitle-2": "办公时不会因为电力不足而受到影响", + "home.sence-item-3-tile": "家庭用电", + "home.sence-item-3-subTile": "可以作为家庭的备用电源", + "home.sence-item-3-subTitle-2": "保持基本通讯和生活功能", + "home.certificate-title": "资质认证", + "home.certificate-subTitle": "为您的产品保驾护航，以质量赢得信誉，以服务回报客户", - "contact.contacts-us": "联系我们", - "contact.sub-title-1":"公司信息", - "contact.sub-title-2":"联系方式", - "contact.official-website":"公司官网", - "contact.other-contact":"其它联系方式", - "contact.sales-consulting":"销售咨询", - "contact.operations-specialist":"运营专员", - "contact.after-sale-guarantee":"售后无忧", - "contact.cooperation-negotiation":"合作洽谈", - - "contact.address":"地址：", - "contact.address-details":"中山市火炬开发区明阳路88号明阳良光科技园", - "contact.name":"姓名", - "contact.tel":"座机：", - "contact.email":"邮箱：", - "contact.email-2":"邮箱", - "contact.mobile":"手机：", - "contact.submit":"提交", - "contact.verify-name":"请输入有效的名字", - "contact.verify-email":"请输入有效的邮箱", - "contact.verify-title":"有其它疑问欢迎随时联系我们", - "contact.verify-message":"输入产品详细信息和其它特定要求以获得准确的报价", - "contact.submitted-successfully":"提交成功", - "contact.submitted-failed":"提交失败", - "contact.thank-message": "感谢您的询盘!我们会尽快与您联系!", - "contact.thank-message2": "我们会尽快与您联系", - "contact.back": "返回首页", + "home.learn-more": "了解更多", + "home.view-more": "查看更多", + "home.situation": "明阳良光 企业概况", + "home.platform": "台", + "home.individual": "个", - "aboutus.company": "中山市明阳良光照明有限公司", - "aboutus.company-1": "中山市明阳良光照明有限公司成立于2015年，位于中山市火炬开发区，厂区面积超过12000平方米。", - "aboutus.company-2": "公司日产能超3000台，年产能达8亿。自成立以来，我司以实事求是的工作理念专注于便携式储能及家庭储能产品的研发和制造。", - "aboutus.company-3": "目前已组建一支成熟且拥有丰富经验的研发团队，并在技术突破和产品优化道路上勇攀高峰。", - "aboutus.company-4": "", - "aboutus.year": "年", - "aboutus.founded": "2015", - "aboutus.establish": "公司成立", - "aboutus.factoryarea": "厂房面积", - "aboutus.billion": "亿", - "aboutus.annualcapacity": "年产能", - "aboutus.technical-patents": "技术专利", - "aboutus.force": "核心力量", - "aboutus.force-subtitle-1": "经验丰富的开发团队", - "aboutus.force-subtitle-2": "严格的质检流程", - "aboutus.force-subtitle-3": "强大的供应链体系", - "aboutus.force-subtitle-4": "源源不断的人才引进", - - "aboutus.history": "明阳良光发展历程", - "aboutus.sub-history-1": "公司核心团队拥有电子技术行业10余年工作经验，对电源产品有深刻的理解，在电子元器件供应链管理有着深厚沉淀,", - "aboutus.sub-history-2": "并以强大的数据库及供应链系统做支撑，凭借专业的研发知识和实践精神，为全球用户提供优质产品和技术服务。", - "aboutus.establishment-title": "公司成立", - "aboutus.establishment-content": "公司成立于粤港澳大湾区核心城市-- - 中山 ", - "aboutus.transformation": "公司转型", - "aboutus.transformation-content": "由电源方案公司转型为便携 式储能制造企业", - "aboutus.Innovation": "创新驱动", - "aboutus.Innovation-content": "行业内第一批研发出2000W 双向快充产品的企业。并在 2020年初实现量产出货， 至今累计出货超过5w台", - "aboutus.financing": "A轮融资", - "aboutus.financing-content": "完成A轮融资数千万( 投资方：小熊鸿诺)", - "aboutus.mission": "企业使命", - - "aboutus.mission-subtitle": "为客户、股东、员工、社会、国家创造价值", - "aboutus.vision": "企业愿景", - "aboutus.vision-subtitle": "创造一家全球化卓越能效的储能公司", - "aboutus.values": "企业价值观", - "aboutus.values-subtitle": "客户第一、勇于创新、拥抱变革、实事求是、团结、自我批评", - "aboutus.philosophy": "企业核心理念", - "aboutus.philosophy-subtitle": "科学才是企业的灵魂", - "aboutus.honors-certificate":"证书", - "page.honors-content-1": "公司核心团队拥有电子技术行业10余年工作经验", - "page.honors-content-2": "对电源产品有深刻的理解，在电子元器件供应链管理有着深厚沉淀,以强大的数据库及供应链系统支撑", - "page.honors-content-3": "凭借专业的研发知识及实践经验，提供优质的产品及技术服务。", - "page.honors-content-4": "期间公司研发团队取得数十项技术专利，并于2019年12月认证为国家级高新技术企业。", + "home.sale": "销售国家", + "home.development": "全球业务发展", + "home.products": "强大生产能力，销售能力以及售后服务能力，为全球客户提供有力支持，建立长期战略合作关系", + "home.Energy": "日产能", + "home.service-centers": "海外服务中心", + "home.main-products": "主要产品", + "home.solar-panel": "太阳能板", + "home.power-station": "储能电源", + "home.accessory": "配件", + "home.temporary-video": "临时视频", + "home.image-": "背景图", - "aboutus.advantage-1": "ID 结构设计", - "aboutus.advantage-2": "产品质量", - "aboutus.advantage-3": "硬件开发", - "aboutus.advantage-factors": "关键成功要素", - "aboutus.advantage-4": "软件开发", - "aboutus.advantage-5": "生产制造", - "aboutus.advantage-6": "人工智能", - - "customized.gallery-title":"源头工厂 品质信赖", - "customized.global-business-title":"全球仓库 及时配送", - "customized.global-business-subTit-1":"拥有美国、日本、欧洲、英国四个海外维修点，拥有四个海外仓，出口33个国家，", - "customized.global-business-subTit-2":"为客户提供ODM/OEM服务", - "customized.customized-title":"定制流程", - "customized.customized-text-1":"定制流程", - "customized.customized-text-2":"研发设计", - "customized.customized-text-2-pc":"研发设计", - "customized.customized-text-3":"样品测试", - "customized.customized-text-4":"客户确认", - "customized.customized-text-5":"大货生产", - "customized.customized-text-6":"产品签样", - "customized.customized-text-7":"调整优化", - "customized.customized-text-8":"样品试产", + "home.about-syd": "关于明阳良光", + "home.professional": "专业的智能系统制造商", + "home.year": "年", + "home.establish": "公司成立", + "home.employees": "公司员工", + "home.proportion": "研发占比", + "home.factoryarea": "厂房面积", + "home.recording": "记录明阳良光改变世界的时刻", - "usermanual.years-service-life": "10年+寿命", - "download.excellentenergy": "卓越能效储能电源", - "download.apk-download": "APK安装下载", - "download.app-qr-code": "App二维码", + "foot.service-terms": "服务协议", + "foot.privacy-policy": "隐私声明", + "foot.valid-email": "请输入有效的电子邮件地址", + "foot.company": "中山市明阳良光照明有限公司版权所有", + "foot.record-number": "备案号：粤ICP备15063791号", - "detail.power-99": "适配99%", - "detail.appliances": "常用家电", - "detail.parameters": "详细参数", - "detail.may-also-like": "可能你也会喜欢", - "detail.view-more":"查看更多", - "detail.summary":"概述", - "detail.specs":"规格", - "detail.detail":"详情", - - "n051.title": "3600W 便携式储能电源", - "n051.years-1": "2年", - "n051.capacity": "大容量电池", - "n051.guarantee": "质保", - "n051.battery": "电池", - "n051.battery-life": "使用寿命", - "n051.solar": "太阳能板充电", - "n051.solarvoltage": "(12-160V)", - "n051.ac-charging": "AC 输入", - "n051.variable": "可调输入功率", - "n051.ac-output": "AC 输出", - "n051.powered-off": "断电瞬间，电源即刻供电，保护您的数据无忧", - "n051.hours": "小时", - "n051.fast-charging": "快速充电", - "n051.other-brands": "其他品牌", + "contact.contacts-us": "联系我们", + "contact.sub-title-1": "公司信息", + "contact.sub-title-2": "联系方式", + "contact.official-website": "公司官网", + "contact.other-contact": "其它联系方式", + "contact.sales-consulting": "销售咨询", + "contact.operations-specialist": "运营专员", + "contact.after-sale-guarantee": "售后无忧", + "contact.cooperation-negotiation": "合作洽谈", - "n051.battery-1": "磷酸铁锂电池", - "n051.battery-2": "安全性能高·使用寿命长", - "n051.battery-3": "耐高温·容量大·环境友好", - "n051.battery2-1": "BMS保护系统", - "n051.battery2-2": "高低温保护", - "n051.battery2-3": "高低压保护", - "n051.battery2-4": "过流过载保护", - - "n051.powered-simultaneously": "最高可同时给15个设备供电！", - "n051.ports-animation": "15ports动画", - "n051.intelligent": "智能APP·一手掌控", - "n051.control-output": "随时随地查看电池状态", - "n051.click-open": "一键打开电源，控制输出", - "n051.accessories-details": "配件详情", + "contact.address": "地址：", + "contact.address-details": "中山市火炬开发区明阳路88号明阳良光科技园", + "contact.name": "姓名", + "contact.tel": "座机：", + "contact.email": "邮箱：", + "contact.email-2": "邮箱", + "contact.mobile": "手机：", + "contact.submit": "提交", + "contact.verify-name": "请输入有效的名字", + "contact.verify-email": "请输入有效的邮箱", + "contact.verify-title": "有其它疑问欢迎随时联系我们", + "contact.verify-message": "输入产品详细信息和其它特定要求以获得准确的报价", + "contact.submitted-successfully": "提交成功", + "contact.submitted-failed": "提交失败", + "contact.thank-message": "感谢您的询盘!我们会尽快与您联系!", + "contact.thank-message2": "我们会尽快与您联系", + "contact.back": "返回首页", - "n052.title": "2400W 便携式储能电源", - "n052.capacity": "超大容量", - "n052.hours": "小时", - "n052.charge": "充至100% ", - "n052.battery-cycles": "4000次电池循环", - "n052.lithium-iron": "内置磷酸铁锂电池", - "n052.solar-panel": "太阳能板充电", - "n052.switching-time": "切换时间", - "n052.compatible": "常用电器兼容", - "n052.energy-title": "省电费/节约能源", - "n052.energy-content": "白天时用太阳能板给机器充电，晚上用储能电源 给电器充电。实现用电循环，自给自足", - "n052.screen-title": "清晰的液晶显示屏", - "n052.screen-content": "液晶显示屏显示输出功率、输入功率、电池电量和使用状态， 有助于规划下一步的储能工作。", - "n052.powered-off": "断电瞬间，电源即刻供电，保护您的数据无忧", - "n052.within":"内", - "n052.loop":"超长循环次数", - "n052.port":"端口介绍", - "n052.output-ports":"13个输出端口", - "n052.other-brands":"其他品牌", - "n052.protection-1": "BMS保护系统", - "n052.protection-2": "高低温保护、高低压保护、过流过载保护", - "n052.show-title-1":"顶部存储空间", - "n052.show-subtitle-1":"零件轻便储存", - "n052.show-title-2":"便携式提手", - "n052.show-subtitle-2":"方便携带、移动", - "n052.show-title-3":"防尘橡胶赛", - "n052.show-subtitle-3":"防止细小的颗粒灰尘进入机器内部", - "n052.show-title-4":"防火ABS材料", - "n052.show-subtitle-4":"V0防火等级的外壳；带有加强手柄；", + "aboutus.company": "中山市明阳良光照明有限公司", + "aboutus.company-1": "中山市明阳良光照明有限公司成立于2015年，位于中山市火炬开发区，厂区面积超过12000平方米。", + "aboutus.company-2": "公司日产能超3000台，年产能达8亿。自成立以来，我司以实事求是的工作理念专注于便携式储能及家庭储能产品的研发和制造。", + "aboutus.company-3": "目前已组建一支成熟且拥有丰富经验的研发团队，并在技术突破和产品优化道路上勇攀高峰。", + "aboutus.company-4": "", + "aboutus.year": "年", + "aboutus.founded": "2015", + "aboutus.establish": "公司成立", + "aboutus.factoryarea": "厂房面积", + "aboutus.billion": "亿", + "aboutus.annualcapacity": "年产能", + "aboutus.technical-patents": "技术专利", + "aboutus.force": "核心力量", + "aboutus.force-subtitle-1": "经验丰富的开发团队", + "aboutus.force-subtitle-2": "严格的质检流程", + "aboutus.force-subtitle-3": "强大的供应链体系", + "aboutus.force-subtitle-4": "源源不断的人才引进", - "home.swiper.led.title": "LED照明", - "home.swiper.led.subtitle": "节能LED灯具系列", - "home.swiper.led.description": "高效节能，持久耐用，智能控制", - "home.swiper.led.button": "了解更多", - "home.swiper.monitor.title": "监控设备", - "home.swiper.monitor.subtitle": "专业监控解决方案", - "home.swiper.monitor.description": "高清画质，智能分析，全方位监控", - "home.swiper.monitor.button": "了解更多", - "home.swiper.security.title": "智能安防", - "home.swiper.security.subtitle": "4K高清监控摄像头", - "home.swiper.security.description": "全天候守护，智能识别，超清画质", - "home.swiper.security.button": "了解更多", + "aboutus.history": "明阳良光发展历程", + "aboutus.sub-history-1": "公司核心团队拥有电子技术行业10余年工作经验，对电源产品有深刻的理解，在电子元器件供应链管理有着深厚沉淀,", + "aboutus.sub-history-2": "并以强大的数据库及供应链系统做支撑，凭借专业的研发知识和实践精神，为全球用户提供优质产品和技术服务。", + "aboutus.establishment-title": "公司成立", + "aboutus.establishment-content": "公司成立于粤港澳大湾区核心城市-- - 中山 ", + "aboutus.transformation": "公司转型", + "aboutus.transformation-content": "由电源方案公司转型为便携 式储能制造企业", + "aboutus.Innovation": "创新驱动", + "aboutus.Innovation-content": "行业内第一批研发出2000W 双向快充产品的企业。并在 2020年初实现量产出货， 至今累计出货超过5w台", + "aboutus.financing": "A轮融资", + "aboutus.financing-content": "完成A轮融资数千万( 投资方：小熊鸿诺)", + "aboutus.mission": "企业使命", - "home.products.title": "核心产品", - "home.products.subtitle": "专业的监控安防设备与LED照明解决方案", - "home.products.view-all": "查看全部产品", + "aboutus.mission-subtitle": "为客户、股东、员工、社会、国家创造价值", + "aboutus.vision": "企业愿景", + "aboutus.vision-subtitle": "创造一家全球化卓越能效的储能公司", + "aboutus.values": "企业价值观", + "aboutus.values-subtitle": "客户第一、勇于创新、拥抱变革、实事求是、团结、自我批评", + "aboutus.philosophy": "企业核心理念", + "aboutus.philosophy-subtitle": "科学才是企业的灵魂", + "aboutus.honors-certificate": "证书", + "page.honors-content-1": "公司核心团队拥有电子技术行业10余年工作经验", + "page.honors-content-2": "对电源产品有深刻的理解，在电子元器件供应链管理有着深厚沉淀,以强大的数据库及供应链系统支撑", + "page.honors-content-3": "凭借专业的研发知识及实践经验，提供优质的产品及技术服务。", + "page.honors-content-4": "期间公司研发团队取得数十项技术专利，并于2019年12月认证为国家级高新技术企业。", - "product.s01.name": "S01 高清监控摄像头", - "product.s01.category": "监控摄像头", - "product.s01.description": "高清画质，智能监控", - "product.t11.name": "T11 专业监控摄像头", - "product.t11.category": "监控摄像头", - "product.t11.description": "专业级监控设备", - "product.xa01.name": "XA-01 智能LED路灯", - "product.xa01.category": "智能照明", - "product.xa01.description": "节能环保，智能控制", + "aboutus.advantage-1": "ID 结构设计", + "aboutus.advantage-2": "产品质量", + "aboutus.advantage-3": "硬件开发", + "aboutus.advantage-factors": "关键成功要素", + "aboutus.advantage-4": "软件开发", + "aboutus.advantage-5": "生产制造", + "aboutus.advantage-6": "人工智能", - "product.hot.badge": "热门", - "product.learn-more": "了解详情", + "customized.gallery-title": "源头工厂 品质信赖", + "customized.global-business-title": "全球仓库 及时配送", + "customized.global-business-subTit-1": "拥有美国、日本、欧洲、英国四个海外维修点，拥有四个海外仓，出口33个国家，", + "customized.global-business-subTit-2": "为客户提供ODM/OEM服务", + "customized.customized-title": "定制流程", + "customized.customized-text-1": "定制流程", + "customized.customized-text-2": "研发设计", + "customized.customized-text-2-pc": "研发设计", + "customized.customized-text-3": "样品测试", + "customized.customized-text-4": "客户确认", + "customized.customized-text-5": "大货生产", + "customized.customized-text-6": "产品签样", + "customized.customized-text-7": "调整优化", + "customized.customized-text-8": "样品试产", - "product.breadcrumb.home": "首页", - "product.breadcrumb.product-center": "产品中心", - "product.breadcrumb.monitor": "监控摄像头", - "product.breadcrumb.street-light": "路灯", + "usermanual.years-service-life": "10年+寿命", + "download.excellentenergy": "卓越能效储能电源", + "download.apk-download": "APK安装下载", + "download.app-qr-code": "App二维码", - "product.category.product-center": "产品中心", - "product.category.monitor": "监控摄像头", - "product.category.street-light": "路灯", + "detail.power-99": "适配99%", + "detail.appliances": "常用家电", + "detail.parameters": "详细参数", + "detail.may-also-like": "可能你也会喜欢", + "detail.view-more": "查看更多", + "detail.summary": "概述", + "detail.specs": "规格", + "detail.detail": "详情", - "product.s02.subtitle": "智能监控摄像头", - "product.s03.subtitle": "夜视监控摄像头", - "product.t05.subtitle": "全天候监控摄像头", + "n051.title": "3600W 便携式储能电源", + "n051.years-1": "2年", + "n051.capacity": "大容量电池", + "n051.guarantee": "质保", + "n051.battery": "电池", + "n051.battery-life": "使用寿命", + "n051.solar": "太阳能板充电", + "n051.solarvoltage": "(12-160V)", + "n051.ac-charging": "AC 输入", + "n051.variable": "可调输入功率", + "n051.ac-output": "AC 输出", + "n051.powered-off": "断电瞬间，电源即刻供电，保护您的数据无忧", + "n051.hours": "小时", + "n051.fast-charging": "快速充电", + "n051.other-brands": "其他品牌", - "product.specs.number": "编号", - "product.specs.type": "类型", - "product.specs.specification": "规格", - "product.specs.brand": "品牌", + "n051.battery-1": "磷酸铁锂电池", + "n051.battery-2": "安全性能高·使用寿命长", + "n051.battery-3": "耐高温·容量大·环境友好", + "n051.battery2-1": "BMS保护系统", + "n051.battery2-2": "高低温保护", + "n051.battery2-3": "高低压保护", + "n051.battery2-4": "过流过载保护", - "product.page.learn-more": "了解更多", + "n051.powered-simultaneously": "最高可同时给15个设备供电！", + "n051.ports-animation": "15ports动画", + "n051.intelligent": "智能APP·一手掌控", + "n051.control-output": "随时随地查看电池状态", + "n051.click-open": "一键打开电源，控制输出", + "n051.accessories-details": "配件详情", - "about.page.title": "关于我们", - "about.page.subtitle": "ABOUT US", - "about.page.description": "专业安防监控设备制造商 · 全球化服务提供商", - "about.breadcrumb.home": "首页", - "about.breadcrumb.about": "关于我们", + "n052.title": "2400W 便携式储能电源", + "n052.capacity": "超大容量", + "n052.hours": "小时", + "n052.charge": "充至100% ", + "n052.battery-cycles": "4000次电池循环", + "n052.lithium-iron": "内置磷酸铁锂电池", + "n052.solar-panel": "太阳能板充电", + "n052.switching-time": "切换时间", + "n052.compatible": "常用电器兼容", + "n052.energy-title": "省电费/节约能源", + "n052.energy-content": "白天时用太阳能板给机器充电，晚上用储能电源 给电器充电。实现用电循环，自给自足", + "n052.screen-title": "清晰的液晶显示屏", + "n052.screen-content": "液晶显示屏显示输出功率、输入功率、电池电量和使用状态， 有助于规划下一步的储能工作。", + "n052.powered-off": "断电瞬间，电源即刻供电，保护您的数据无忧", + "n052.within": "内", + "n052.loop": "超长循环次数", + "n052.port": "端口介绍", + "n052.output-ports": "13个输出端口", + "n052.other-brands": "其他品牌", + "n052.protection-1": "BMS保护系统", + "n052.protection-2": "高低温保护、高低压保护、过流过载保护", + "n052.show-title-1": "顶部存储空间", + "n052.show-subtitle-1": "零件轻便储存", + "n052.show-title-2": "便携式提手", + "n052.show-subtitle-2": "方便携带、移动", + "n052.show-title-3": "防尘橡胶赛", + "n052.show-subtitle-3": "防止细小的颗粒灰尘进入机器内部", + "n052.show-title-4": "防火ABS材料", + "n052.show-subtitle-4": "V0防火等级的外壳；带有加强手柄；", - "about.stats.experience": "年专业经验", - "about.stats.team": "专业团队", - "about.stats.countries": "服务国家", + "home.swiper.led.title": "LED照明", + "home.swiper.led.subtitle": "节能LED灯具系列", + "home.swiper.led.description": "高效节能，持久耐用，智能控制", + "home.swiper.led.button": "了解更多", + "home.swiper.monitor.title": "监控设备", + "home.swiper.monitor.subtitle": "专业监控解决方案", + "home.swiper.monitor.description": "高清画质，智能分析，全方位监控", + "home.swiper.monitor.button": "了解更多", + "home.swiper.security.title": "智能安防", + "home.swiper.security.subtitle": "4K高清监控摄像头", + "home.swiper.security.description": "全天候守护，智能识别，超清画质", + "home.swiper.security.button": "了解更多", - "about.intro.title": "企业简介", - "about.intro.p1": "2011年，SPML成立，专注于安防监控设备的研发与制造。自此，让每个用户都能享受到安全可靠的监控保护成为SPML的企业使命，也激励着我们持续为全球客户提供高质量的产品和服务。", - "about.intro.p2": "十余年来，SPML专注于可持续安防监控研发、智能识别、云端存储以及安防数字化领域，公司设计、研发、制造智能摄像头、监控系统、安防设备，为全球家庭及工商业用户提供优质的全场景安防监控解决方案。我们将与全球合作伙伴共同创造一个更安全的世界，为人类打造全球领先的智能安防生态！", + "home.products.title": "核心产品", + "home.products.subtitle": "专业的监控安防设备与LED照明解决方案", + "home.products.view-all": "查看全部产品", - "about.achievements.countries": "服务国家", - "about.achievements.team": "专业团队", - "about.achievements.experience": "年专业经验", - "about.achievements.vision.title": "企业愿景", - "about.achievements.vision.desc": "成为全球领先的安防监控解决方案提供商，为用户提供最安全可靠的监控保护", + "product.s01.name": "S01 高清监控摄像头", + "product.s01.category": "监控摄像头", + "product.s01.description": "高清画质，智能监控", + "product.t11.name": "T11 专业监控摄像头", + "product.t11.category": "监控摄像头", + "product.t11.description": "专业级监控设备", + "product.xa01.name": "XA-01 智能LED路灯", + "product.xa01.category": "智能照明", + "product.xa01.description": "节能环保，智能控制", - "about.tech.title": "技术实力", - "about.tech.subtitle": "先进的研发能力与制造工艺，为全球客户提供可靠的安防解决方案", - "about.tech.team.title": "专业研发团队", - "about.tech.team.desc": "拥有经验丰富的研发团队，专注安防监控设备的技术创新与产品优化", - "about.tech.manufacturing.title": "先进制造工艺", - "about.tech.manufacturing.desc": "配备现代化生产线，建立完善的质量管理体系，确保产品品质稳定可靠", - "about.tech.service.title": "全球化服务", - "about.tech.service.desc": "为全球50+国家和地区提供专业的安防监控解决方案与技术支持服务", - "about.tech.advantage.title": "核心优势", - "about.tech.advantage.desc": "专注于智能摄像头、监控系统、安防设备等产品的研发制造，通过持续的技术创新和严格的质量控制，为客户提供高性能、高可靠性的安防监控产品。", + "product.hot.badge": "热门", + "product.learn-more": "了解详情", - "contact.page.title": "联系我们", - "contact.page.subtitle": "CONTACT US", - "contact.breadcrumb.home": "首页", - "contact.breadcrumb.contact": "联系我们", - "contact.welcome": "期待与您的直接联系，我们将竭诚为您提供专业的支持和解答", - "contact.company.label": "公司", - "contact.company.name": "中山市明阳良光照明有限公司", - "contact.company.address": "中国广东省中山市古镇镇海洲东安北路398号", - "contact.phone.label": "电话", - "contact.email.label": "邮箱", + "product.breadcrumb.home": "首页", + "product.breadcrumb.product-center": "产品中心", + "product.breadcrumb.monitor": "监控摄像头", + "product.breadcrumb.street-light": "路灯", - "nav.home": "首页", - "nav.about": "关于我们", - "nav.products": "产品系列", - "nav.contact": "联系我们", + "product.category.product-center": "产品中心", + "product.category.monitor": "监控摄像头", + "product.category.street-light": "路灯", - "footer.company.name": "中山市明阳良光照明有限公司", - "footer.company.description": "太阳能智能云台摄像头制造商", - "footer.company.design": "明阳良光原创设计", - "footer.wechat": "微信", - "footer.whatsapp": "WhatsApp", - "footer.address": "地址", - "footer.qr.wechat": "微信二维码", - "footer.qr.whatsapp": "WhatsApp二维码", + "product.s02.subtitle": "智能监控摄像头", + "product.s03.subtitle": "夜视监控摄像头", + "product.t05.subtitle": "全天候监控摄像头", - "about.exhibition.title": "展会荣誉", - "about.exhibition.subtitle": "国际展会参展经历与企业资质认证展示", - "about.exhibition.security-expo": "国际安防展", - "about.exhibition.tech-conference": "技术交流", - "about.exhibition.certifications": "企业资质", - "about.exhibition.iso9001": "ISO9001", - "about.exhibition.iso9001.desc": "质量管理体系", - "about.exhibition.high-tech": "高新技术企业", - "about.exhibition.high-tech.desc": "国家级认定", - "about.exhibition.excellent-supplier": "优秀供应商", - "about.exhibition.excellent-supplier.desc": "行业认可", - "about.exhibition.ce-fcc": "CE/FCC", - "about.exhibition.ce-fcc.desc": "国际认证", - "about.exhibition.security-cert": "安防认证", - "about.exhibition.security-cert.desc": "行业标准", - "about.exhibition.quality-assurance": "品质保证", - "about.exhibition.quality-assurance.desc": "质量承诺", + "product.specs.number": "编号", + "product.specs.type": "类型", + "product.specs.specification": "规格", + "product.specs.brand": "品牌", - "about.tech.badge.manufacturing": "制造", - "about.tech.badge.global": "全球", - "about.tech.tag.ai-algorithm": "AI算法", - "about.tech.tag.image-processing": "图像处理", - "about.tech.tag.hardware-design": "硬件设计", - "about.tech.tag.iso-certification": "ISO认证", - "about.tech.tag.precision-manufacturing": "精密制造", - "about.tech.tag.quality-control": "品质控制", - "about.tech.tag.technical-support": "技术支持", - "about.tech.tag.custom-solution": "定制方案", - "about.tech.tag.after-sales": "售后服务", + "product.page.learn-more": "了解更多", - "about.production.title": "生产工艺", - "about.production.subtitle": "专业生产团队与严格工艺流程，确保产品质量达到国际标准", - "about.production.assembly": "精密组装", - "about.production.assembly.desc": "专业技术人员精密组装", - "about.production.testing": "质量检测", - "about.production.testing.desc": "严格测试每个产品", - "about.production.debugging": "产品调试", - "about.production.debugging.desc": "确保产品性能最优", - "about.production.packaging": "精美包装", - "about.production.packaging.desc": "保护产品安全运输", - "about.production.quality-control": "品控管理", - "about.production.capacity": "生产能力", - "about.production.monthly-capacity": "月产能（台）", - "about.production.guarantee": "生产保障", - "about.production.pass-rate": "合格率", - "about.production.lines": "生产线数量", - - "about.company.image": "SPML企业形象", - "about.tech.image": "SPML技术展示" -} \ No newline at end of file + "about.page.title": "关于我们", + "about.page.subtitle": "ABOUT US", + "about.page.description": "专业安防监控设备制造商 · 全球化服务提供商", + "about.breadcrumb.home": "首页", + "about.breadcrumb.about": "关于我们", + + "about.stats.experience": "年专业经验", + "about.stats.team": "员工团队", + "about.stats.countries": "服务国家", + + "about.intro.title": "企业简介", + "about.intro.p1": "2011年，SPML成立，专注于安防监控设备的研发与制造。自此，让每个用户都能享受到安全可靠的监控保护成为SPML的企业使命，也激励着我们持续为全球客户提供高质量的产品和服务。", + "about.intro.p2": "十余年来，SPML专注于可持续安防监控研发、智能识别、云端存储以及安防数字化领域，公司设计、研发、制造智能摄像头、监控系统、安防设备，为全球家庭及工商业用户提供优质的全场景安防监控解决方案。我们将与全球合作伙伴共同创造一个更安全的世界，为人类打造全球领先的智能安防生态！", + + "about.achievements.countries": "服务国家", + "about.achievements.team": "员工团队", + "about.achievements.experience": "年专业经验", + "about.achievements.vision.title": "企业愿景", + "about.achievements.vision.desc": "成为全球领先的安防监控解决方案提供商，为用户提供最安全可靠的监控保护", + + "about.tech.title": "技术实力", + "about.tech.subtitle": "先进的研发能力与制造工艺，为全球客户提供可靠的安防解决方案", + "about.tech.team.title": "专业研发团队", + "about.tech.team.desc": "拥有经验丰富的研发团队，专注安防监控设备的技术创新与产品优化", + "about.tech.manufacturing.title": "先进制造工艺", + "about.tech.manufacturing.desc": "配备现代化生产线，建立完善的质量管理体系，确保产品品质稳定可靠", + "about.tech.service.title": "全球化服务", + "about.tech.service.desc": "为全球50+国家和地区提供专业的安防监控解决方案与技术支持服务", + "about.tech.advantage.title": "核心优势", + "about.tech.advantage.desc": "专注于智能摄像头、监控系统、安防设备等产品的研发制造，通过持续的技术创新和严格的质量控制，为客户提供高性能、高可靠性的安防监控产品。", + + "contact.page.title": "联系我们", + "contact.page.subtitle": "CONTACT US", + "contact.breadcrumb.home": "首页", + "contact.breadcrumb.contact": "联系我们", + "contact.welcome": "期待与您的直接联系，我们将竭诚为您提供专业的支持和解答", + "contact.company.label": "公司", + "contact.company.name": "中山市明阳良光照明有限公司", + "contact.company.address": "中国广东省中山市古镇镇海洲东安北路398号", + "contact.phone.label": "电话", + "contact.email.label": "邮箱", + + "nav.home": "首页", + "nav.about": "关于我们", + "nav.products": "产品系列", + "nav.contact": "联系我们", + + "footer.company.name": "中山市明阳良光照明有限公司", + "footer.company.description": "太阳能智能云台摄像头制造商", + "footer.company.design": "明阳良光原创设计", + "footer.wechat": "微信", + "footer.whatsapp": "WhatsApp", + "footer.address": "地址", + "footer.qr.wechat": "微信二维码", + "footer.qr.whatsapp": "WhatsApp二维码", + + "about.exhibition.title": "展会荣誉", + "about.exhibition.subtitle": "国际展会参展经历与企业资质认证展示", + "about.exhibition.security-expo": "国际安防展", + "about.exhibition.tech-conference": "技术交流", + "about.exhibition.certifications": "企业资质", + "about.exhibition.iso9001": "ISO9001", + "about.exhibition.iso9001.desc": "质量管理体系", + "about.exhibition.high-tech": "高新技术企业", + "about.exhibition.high-tech.desc": "国家级认定", + "about.exhibition.excellent-supplier": "优秀供应商", + "about.exhibition.excellent-supplier.desc": "行业认可", + "about.exhibition.ce-fcc": "CE/FCC", + "about.exhibition.ce-fcc.desc": "国际认证", + "about.exhibition.security-cert": "安防认证", + "about.exhibition.security-cert.desc": "行业标准", + "about.exhibition.quality-assurance": "品质保证", + "about.exhibition.quality-assurance.desc": "质量承诺", + + "about.tech.badge.manufacturing": "制造", + "about.tech.badge.global": "全球", + "about.tech.tag.ai-algorithm": "AI算法", + "about.tech.tag.image-processing": "图像处理", + "about.tech.tag.hardware-design": "硬件设计", + "about.tech.tag.iso-certification": "ISO认证", + "about.tech.tag.precision-manufacturing": "精密制造", + "about.tech.tag.quality-control": "品质控制", + "about.tech.tag.technical-support": "技术支持", + "about.tech.tag.custom-solution": "定制方案", + "about.tech.tag.after-sales": "售后服务", + + "about.production.title": "生产工艺", + "about.production.subtitle": "专业生产团队与严格工艺流程，确保产品质量达到国际标准", + "about.production.assembly": "精密组装", + "about.production.assembly.desc": "专业技术人员精密组装", + "about.production.testing": "质量检测", + "about.production.testing.desc": "严格测试每个产品", + "about.production.debugging": "产品调试", + "about.production.debugging.desc": "确保产品性能最优", + "about.production.packaging": "精美包装", + "about.production.packaging.desc": "保护产品安全运输", + "about.production.quality-control": "品控管理", + "about.production.capacity": "生产能力", + "about.production.monthly-capacity": "月产能（台）", + "about.production.guarantee": "生产保障", + "about.production.pass-rate": "合格率", + "about.production.lines": "生产线数量", + + "about.company.image": "SPML企业形象", + "about.tech.image": "SPML技术展示", + + "about.hero.badge": "专业安防", + "about.hero.explore": "探索更多", + "about.hero.watch": "观看视频", + + "about.intro.badge": "企业介绍", + "about.intro.feature1": "15年制造经验", + "about.intro.feature2": "专注摄像头与照明", + "about.intro.feature3": "600多人的员工团队", + "about.intro.watch": "观看介绍", + "about.intro.award.title": "行业认可", + "about.intro.award.desc": "荣获多项国际认证与行业奖项", + + "about.achievements.title": "企业成就", + "about.achievements.subtitle": "十五年专注安防，成就行业领先地位", + "about.achievements.countries.desc": "产品销往多个国家和地区", + "about.achievements.team.desc": "600多人的员工团队", + "about.achievements.experience.desc": "15年摄像头与照明制造经验", + "about.achievements.featured": "特色", + "about.achievements.vision.tag1": "品质可靠", + "about.achievements.vision.tag2": "服务周到", + "about.achievements.summary.title": "持续创新，引领未来", + "about.achievements.summary.desc": "我们将继续专注于摄像头与照明产品的制造，为客户提供优质的产品和服务。" +} diff --git a/src/locale/en.json b/src/locale/en.json index 76cb25e..2e35d37 100644 --- a/src/locale/en.json +++ b/src/locale/en.json @@ -299,7 +299,7 @@ "about.breadcrumb.about": "About Us", "about.stats.experience": "+ Years Experience", - "about.stats.team": "+ Professional Team", + "about.stats.team": "+ Employee Team", "about.stats.countries": "+ Countries Served", "about.intro.title": "Company Introduction", @@ -307,8 +307,8 @@ "about.intro.p2": "For more than ten years, SPML has focused on sustainable security monitoring R&D, intelligent recognition, cloud storage, and security digitization. The company designs, develops, and manufactures smart cameras, monitoring systems, and security equipment, providing high-quality full-scenario security monitoring solutions for global home and commercial users. We will work with global partners to create a safer world and build a globally leading intelligent security ecosystem for humanity!", "about.achievements.countries": "Countries Served", - "about.achievements.team": "Professional Team", - "about.achievements.experience": "+ Years Experience", + "about.achievements.team": "Employee Team", + "about.achievements.experience": "Years Experience", "about.achievements.vision.title": "Corporate Vision", "about.achievements.vision.desc": "To become a leading global security monitoring solution provider, providing users with the safest and most reliable monitoring protection", @@ -396,5 +396,28 @@ "about.production.lines": "Production Lines", "about.company.image": "SPML Corporate Image", - "about.tech.image": "SPML Technology Showcase" + "about.tech.image": "SPML Technology Showcase", + + "about.hero.badge": "Professional Security", + "about.hero.explore": "Explore More", + "about.hero.watch": "Watch Video", + + "about.intro.badge": "Company Profile", + "about.intro.feature1": "15 Years Manufacturing Experience", + "about.intro.feature2": "Focus on Cameras & Lighting", + "about.intro.feature3": "600+ Employee Team", + "about.intro.watch": "Watch Introduction", + "about.intro.award.title": "Industry Recognition", + "about.intro.award.desc": "Awarded multiple international certifications and industry awards", + + "about.achievements.title": "Corporate Achievements", + "about.achievements.subtitle": "Fifteen years focused on security, achieving industry leadership", + "about.achievements.countries.desc": "Products sold to multiple countries and regions", + "about.achievements.team.desc": "600+ employee team", + "about.achievements.experience.desc": "15 years of camera and lighting manufacturing experience", + "about.achievements.featured": "Featured", + "about.achievements.vision.tag1": "Quality Reliable", + "about.achievements.vision.tag2": "Good Service", + "about.achievements.summary.title": "Continuous Innovation, Leading the Future", + "about.achievements.summary.desc": "We will continue to focus on the manufacturing of camera and lighting products, providing customers with quality products and services." } \ No newline at end of file diff --git a/src/pages/about-us/index.vue b/src/pages/about-us/index.vue index e1732c4..5b61cc1 100644 --- a/src/pages/about-us/index.vue +++ b/src/pages/about-us/index.vue @@ -1,5 +1,5 @@ @@ -510,14 +730,12 @@ body { background-color: $background-color; } - - /* 容器 */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; - + // 4K 和超大屏幕 @media (min-width: 2560px) { max-width: 1800px; @@ -537,7 +755,7 @@ body { @media (max-width: 1024px) { padding: 0 30px; } - + @media (max-width: 768px) { padding: 0 20px; } @@ -551,70 +769,72 @@ body { } } -/* Modern Banner 样式 */ -.modern-banner { - background: #1a1a2e; +/* Hero Section 样式 */ +.hero-section { + background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); position: relative; - padding: 100px 0 80px; + padding: 120px 0 100px; overflow: hidden; - min-height: 400px; + min-height: 600px; // 4K 和超大屏幕 @media (min-width: 2560px) { - padding: 160px 0 120px; - min-height: 600px; + padding: 180px 0 140px; + min-height: 800px; } @media (min-width: 1920px) and (max-width: 2559px) { - padding: 140px 0 100px; - min-height: 520px; + padding: 160px 0 120px; + min-height: 700px; } @media (min-width: 1440px) and (max-width: 1919px) { - padding: 120px 0 90px; - min-height: 460px; + padding: 140px 0 100px; + min-height: 600px; } @media (max-width: 1024px) { - padding: 80px 0 60px; - min-height: 350px; + padding: 100px 0 80px; + min-height: 500px; } @media (max-width: 768px) { - padding: 60px 0 40px; - min-height: 300px; + padding: 80px 0 60px; + min-height: 400px; } @media (max-width: 480px) { - padding: 50px 0 30px; - min-height: 280px; + padding: 60px 0 40px; + min-height: 350px; } @media (max-width: 375px) { - padding: 40px 0 25px; - min-height: 250px; + padding: 50px 0 30px; + min-height: 300px; } - - .banner-background { + + .hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; - .background-image { + .parallax-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: linear-gradient(135deg, #1a1a2e 0%, #2c3e50 100%); + background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; - opacity: 0.5; - filter: brightness(0.9) contrast(1.2); + opacity: 0.3; + filter: brightness(0.8) contrast(1.3); + transform: translateZ(0); + will-change: transform; } .overlay-gradient { @@ -623,25 +843,50 @@ body { left: 0; right: 0; bottom: 0; - background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(79, 140, 239, 0.8) 100%); + background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 50%, rgba(79, 140, 239, 0.6) 100%); z-index: 1; } - .tech-grid { + .animated-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background-image: - linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), - linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); - background-size: 50px 50px; - animation: gridMove 20s linear infinite; z-index: 2; + + .particle { + position: absolute; + width: 4px; + height: 4px; + background: rgba(255, 255, 255, 0.6); + border-radius: 50%; + animation: particleFloat 8s ease-in-out infinite; + + &:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; } + &:nth-child(2) { top: 30%; left: 80%; animation-delay: 1s; } + &:nth-child(3) { top: 50%; left: 10%; animation-delay: 2s; } + &:nth-child(4) { top: 70%; left: 90%; animation-delay: 3s; } + &:nth-child(5) { top: 20%; left: 60%; animation-delay: 4s; } + &:nth-child(6) { top: 80%; left: 30%; animation-delay: 5s; } + &:nth-child(7) { top: 40%; left: 70%; animation-delay: 6s; } + &:nth-child(8) { top: 90%; left: 50%; animation-delay: 7s; } + &:nth-child(9) { top: 15%; left: 40%; animation-delay: 0.5s; } + &:nth-child(10) { top: 65%; left: 85%; animation-delay: 1.5s; } + &:nth-child(11) { top: 35%; left: 15%; animation-delay: 2.5s; } + &:nth-child(12) { top: 75%; left: 65%; animation-delay: 3.5s; } + &:nth-child(13) { top: 25%; left: 90%; animation-delay: 4.5s; } + &:nth-child(14) { top: 85%; left: 20%; animation-delay: 5.5s; } + &:nth-child(15) { top: 45%; left: 45%; animation-delay: 6.5s; } + &:nth-child(16) { top: 95%; left: 75%; animation-delay: 7.5s; } + &:nth-child(17) { top: 5%; left: 35%; animation-delay: 1s; } + &:nth-child(18) { top: 55%; left: 95%; animation-delay: 2s; } + &:nth-child(19) { top: 95%; left: 5%; animation-delay: 3s; } + &:nth-child(20) { top: 75%; left: 55%; animation-delay: 4s; } + } } - .floating-elements { + .floating-shapes { position: absolute; top: 0; left: 0; @@ -649,145 +894,185 @@ body { bottom: 0; z-index: 3; - .floating-dot { + .shape { position: absolute; - width: 8px; - height: 8px; - background: rgba(255, 255, 255, 0.3); - border-radius: 50%; - animation: float 6s ease-in-out infinite; + opacity: 0.1; + animation: shapeFloat 12s ease-in-out infinite; - &:nth-child(1) { + &.shape-1 { top: 20%; left: 10%; + width: 60px; + height: 60px; + background: linear-gradient(45deg, #4f8cef, #6fa3f2); + border-radius: 50%; animation-delay: 0s; } - &:nth-child(2) { + &.shape-2 { top: 60%; - right: 20%; - animation-delay: 2s; + right: 15%; + width: 40px; + height: 40px; + background: linear-gradient(45deg, #3b82f6, #60a5fa); + border-radius: 8px; + transform: rotate(45deg); + animation-delay: 4s; } - &:nth-child(3) { + &.shape-3 { bottom: 30%; left: 70%; - animation-delay: 4s; + width: 50px; + height: 50px; + background: linear-gradient(45deg, #1d4ed8, #3b82f6); + border-radius: 50%; + animation-delay: 8s; } } } } - - .banner-content { + + .hero-content { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; padding: 0 24px; - display: flex; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 80px; align-items: center; - justify-content: space-between; - gap: 60px; @media (max-width: 968px) { - flex-direction: column; + grid-template-columns: 1fr; text-align: center; - gap: 40px; + gap: 60px; } } - - .banner-text { - flex: 1; + + .hero-text { color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - .banner-title { - margin-bottom: 20px; + .hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 20px; + padding: 8px 16px; + margin-bottom: 24px; + font-size: 12px; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + animation: slideInUp 0.8s ease-out; - .title-main { - display: block; - font-size: 40px; - font-weight: 700; - font-family: $font-bold; - line-height: 1.1; - margin-bottom: 8px; - letter-spacing: -1px; + .badge-text { + color: rgba(255, 255, 255, 0.9); + } + } + + .hero-title { + margin-bottom: 24px; + + .title-line { + display: block; + font-size: 48px; + font-weight: 700; + font-family: $font-bold; + line-height: 1.1; + margin-bottom: 12px; + letter-spacing: -1px; + background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; // 4K 和超大屏幕 @media (min-width: 2560px) { - font-size: 64px; - margin-bottom: 16px; + font-size: 72px; + margin-bottom: 20px; letter-spacing: -2px; } @media (min-width: 1920px) and (max-width: 2559px) { - font-size: 56px; - margin-bottom: 12px; + font-size: 64px; + margin-bottom: 16px; letter-spacing: -1.5px; } @media (min-width: 1440px) and (max-width: 1919px) { - font-size: 48px; - margin-bottom: 10px; + font-size: 56px; + margin-bottom: 14px; } @media (max-width: 1024px) { - font-size: 36px; - margin-bottom: 8px; + font-size: 42px; + margin-bottom: 12px; } @media (max-width: 768px) { - font-size: 32px; - margin-bottom: 6px; + font-size: 36px; + margin-bottom: 10px; letter-spacing: -0.5px; } @media (max-width: 480px) { - font-size: 28px; - margin-bottom: 6px; + font-size: 32px; + margin-bottom: 8px; } @media (max-width: 375px) { - font-size: 24px; - margin-bottom: 4px; + font-size: 28px; + margin-bottom: 6px; letter-spacing: 0; } } - .title-highlight { - display: block; - font-size: 16px; - font-weight: 500; - font-family: $font-medium; - opacity: 0.9; - letter-spacing: 3px; - text-transform: uppercase; + .title-accent { + display: block; + font-size: 18px; + font-weight: 500; + font-family: $font-medium; + opacity: 0.9; + letter-spacing: 2px; + text-transform: uppercase; + color: #4f8cef; @media (max-width: 768px) { - font-size: 14px; + font-size: 16px; } } } - .banner-desc { - font-size: 18px; - line-height: 1.6; - opacity: 0.95; - font-weight: 400; - font-family: $font-light; + .hero-description { + font-size: 18px; + line-height: 1.7; + opacity: 0.95; + font-weight: 400; + font-family: $font-light; + margin-bottom: 32px; @media (max-width: 768px) { font-size: 16px; + margin-bottom: 24px; } } } - - .banner-stats { + + .hero-stats { display: flex; - gap: 20px; + flex-direction: column; + gap: 24px; @media (max-width: 968px) { + flex-direction: row; justify-content: center; + gap: 20px; } @media (max-width: 480px) { @@ -795,45 +1080,92 @@ body { align-items: center; } - .stat-card { - background: rgba(255, 255, 255, 0.15); + .stat-item { + display: flex; + align-items: center; + gap: 16px; + background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 12px; - padding: 20px 16px; - text-align: center; + border-radius: 16px; + padding: 20px; color: white; - min-width: 100px; transition: all 0.3s ease; &:hover { - background: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.15); transform: translateY(-4px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } - .stat-number { - font-size: 24px; - font-weight: 700; - font-family: $font-bold; - line-height: 1; - margin-bottom: 4px; - } + .stat-circle { + position: relative; + width: 60px; + height: 60px; + flex-shrink: 0; + + svg { + width: 100%; + height: 100%; + transform: rotate(-90deg); + + circle { + fill: none; + stroke-width: 4; + stroke-linecap: round; + + &.stat-progress { + stroke: #4f8cef; + stroke-dasharray: 283; + stroke-dashoffset: 283; + animation: progressFill 2s ease-out forwards; + animation-delay: 1s; + } + } + } + + .stat-number { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 18px; + font-weight: 700; + font-family: $font-bold; + color: white; + } + } - .stat-text { - font-size: 12px; - opacity: 0.9; - font-weight: 500; - font-family: $font-medium; - } + .stat-label { + font-size: 14px; + font-weight: 500; + font-family: $font-medium; + opacity: 0.9; + line-height: 1.3; + } } } } /* Elegant Breadcrumb 样式 */ - .elegant-breadcrumb { - background: $surface-color; - border-bottom: 1px solid $border-color; - padding: 16px 0; +.smart-breadcrumb { + background: $surface-color; + border-bottom: 1px solid $border-color; + padding: 20px 0; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, #4f8cef, #6fa3f2, #4f8cef); + background-size: 200% 100%; + animation: shimmer 3s ease-in-out infinite; + } .breadcrumb-container { max-width: 1200px; @@ -841,137 +1173,186 @@ body { padding: 0 24px; display: flex; align-items: center; - gap: 12px; - font-size: 14px; + justify-content: space-between; @media (max-width: 768px) { padding: 0 16px; } } - .breadcrumb-item { - color: $text-secondary; - text-decoration: none; - display: flex; - align-items: center; - gap: 6px; - padding: 6px 12px; - border-radius: 6px; - transition: all 0.2s ease; - font-weight: 500; - font-family: $font-medium; + .breadcrumb-path { + display: flex; + align-items: center; + gap: 12px; + font-size: 14px; - &:hover { - background: rgba(79, 140, 239, 0.1); - color: $primary-color; - } + .breadcrumb-item { + color: $text-secondary; + text-decoration: none; + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + border-radius: 8px; + transition: all 0.3s ease; + font-weight: 500; + font-family: $font-medium; + background: rgba(79, 140, 239, 0.05); + border: 1px solid transparent; + + &:hover { + background: rgba(79, 140, 239, 0.1); + color: $primary-color; + border-color: rgba(79, 140, 239, 0.2); + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(79, 140, 239, 0.1); + } + + i { + font-size: 16px; + color: $primary-color; + } + } - .breadcrumb-icon { - width: 16px; - height: 16px; - background: url('/static/common/home.png') center/contain no-repeat; + .breadcrumb-separator { + color: $text-muted; + font-weight: 300; + margin: 0 4px; + + i { + font-size: 12px; + color: $text-muted; + } + } + + .breadcrumb-current { + color: $primary-color; + font-weight: 600; + font-family: $font-semibold; + padding: 8px 16px; + background: linear-gradient(135deg, rgba(79, 140, 239, 0.1), rgba(111, 163, 242, 0.1)); + border: 1px solid rgba(79, 140, 239, 0.2); + border-radius: 8px; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(79, 140, 239, 0.1), rgba(111, 163, 242, 0.1)); + border-radius: 8px; + opacity: 0; + transition: opacity 0.3s ease; + } + + &:hover::before { + opacity: 1; + } } } - .breadcrumb-divider { - color: $text-muted; - font-weight: 300; - margin: 0 4px; - } - - .breadcrumb-current { - color: $primary-color; - font-weight: 600; - font-family: $font-semibold; - padding: 6px 12px; - background: rgba(79, 140, 239, 0.1); - border-radius: 6px; - } + .breadcrumb-progress { + width: 100px; + height: 4px; + background: rgba(79, 140, 239, 0.1); + border-radius: 2px; + overflow: hidden; + + .progress-bar { + height: 100%; + background: linear-gradient(90deg, #4f8cef, #6fa3f2); + border-radius: 2px; + width: 0; + animation: progressFill 2s ease-out forwards; + animation-delay: 0.5s; + } + } } - /* 主内容区 */ - .main-content { - background: $background-color; - } +/* 主内容区 */ +.main-content { + background: $background-color; +} /* 通用区块头部样式 */ .section-header { text-align: center; margin-bottom: 60px; position: relative; - + .header-decoration { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; - - .decoration-line { - width: 60px; - height: 2px; - background: $gradient-primary; - border-radius: 1px; - } - - .decoration-dot { - width: 8px; - height: 8px; - background: $primary-color; - border-radius: 50%; - margin: 0 12px; - } + + .decoration-line { + width: 60px; + height: 2px; + background: $gradient-primary; + border-radius: 1px; + } + + .decoration-dot { + width: 8px; + height: 8px; + background: $primary-color; + border-radius: 50%; + margin: 0 12px; + } } } /* 专业标题样式 */ .section-title-pro { - .title-label { - display: block; - font-size: 12px; - font-weight: 600; - font-family: $font-semibold; - letter-spacing: 2px; - color: $primary-color; - text-transform: uppercase; - margin-bottom: 8px; - } - - .title-main { - display: block; - font-size: 36px; - font-weight: 700; - font-family: $font-bold; - color: $text-primary; - margin-bottom: 12px; - letter-spacing: -0.5px; - + .title-label { + display: block; + font-size: 12px; + font-weight: 600; + font-family: $font-semibold; + letter-spacing: 2px; + color: $primary-color; + text-transform: uppercase; + margin-bottom: 8px; + } + + .title-main { + display: block; + font-size: 36px; + font-weight: 700; + font-family: $font-bold; + color: $text-primary; + margin-bottom: 12px; + letter-spacing: -0.5px; + @media (max-width: 768px) { font-size: 28px; } } - - .title-subtitle { - display: block; - font-size: 16px; - color: $text-secondary; - line-height: 1.5; - max-width: 600px; - margin: 0 auto; - font-family: $font-light; - + + .title-subtitle { + display: block; + font-size: 16px; + color: $text-secondary; + line-height: 1.5; + max-width: 600px; + margin: 0 auto; + font-family: $font-light; + @media (max-width: 768px) { font-size: 14px; } } } - - /* Company Introduction 区块样式 */ - .company-introduction { - padding: 80px 0; - background: $surface-color; - position: relative; +.company-introduction { + padding: 80px 0; + background: $surface-color; + position: relative; // 4K 和超大屏幕 @media (min-width: 2560px) { @@ -1001,73 +1382,146 @@ body { @media (max-width: 375px) { padding: 40px 0; } - + .intro-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; - + @media (max-width: 968px) { grid-template-columns: 1fr; gap: 60px; } } - - .intro-content { + + .intro-content { .intro-header { - margin-bottom: 32px; + margin-bottom: 40px; - .blue-accent-line { - width: 60px; - height: 4px; - background: linear-gradient(90deg, #4f8cef, #6fa3f2); - border-radius: 2px; + .section-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: linear-gradient(135deg, rgba(79, 140, 239, 0.1), rgba(111, 163, 242, 0.1)); + border: 1px solid rgba(79, 140, 239, 0.2); + border-radius: 20px; + padding: 8px 16px; margin-bottom: 20px; + font-size: 12px; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + color: $primary-color; + animation: slideInUp 0.8s ease-out; + + i { + font-size: 14px; + } } - .intro-title { - font-size: 36px; - font-weight: 700; - color: $text-primary; - line-height: 1.2; - margin: 0; + .intro-title { + font-size: 42px; + font-weight: 700; + color: $text-primary; + line-height: 1.2; + margin: 0 0 16px 0; + background: linear-gradient(135deg, $text-primary 0%, $primary-color 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; @media (max-width: 768px) { - font-size: 24px; + font-size: 28px; + } + } + + .title-decoration { + display: flex; + align-items: center; + gap: 12px; + + .decoration-line { + width: 60px; + height: 3px; + background: linear-gradient(90deg, #4f8cef, #6fa3f2); + border-radius: 2px; + } + + .decoration-dot { + width: 8px; + height: 8px; + background: $primary-color; + border-radius: 50%; + } + } + } + + .intro-text { + .intro-paragraph { + font-size: 16px; + line-height: 1.8; + color: $text-secondary; + margin-bottom: 24px; + text-align: justify; + + &:last-child { + margin-bottom: 32px; } } } - .intro-text { - .intro-paragraph { - font-size: 16px; - line-height: 1.8; - color: $text-secondary; - margin-bottom: 24px; - text-align: justify; + .intro-features { + display: flex; + flex-direction: column; + gap: 12px; + + .feature-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + background: rgba(79, 140, 239, 0.05); + border: 1px solid rgba(79, 140, 239, 0.1); + border-radius: 12px; + transition: all 0.3s ease; - &:last-child { - margin-bottom: 0; + &:hover { + background: rgba(79, 140, 239, 0.1); + border-color: rgba(79, 140, 239, 0.2); + transform: translateX(8px); + box-shadow: 0 4px 12px rgba(79, 140, 239, 0.1); + } + + i { + font-size: 18px; + color: $primary-color; + flex-shrink: 0; + } + + span { + font-size: 14px; + font-weight: 500; + color: $text-primary; } } } } - + .intro-image { display: flex; justify-content: center; align-items: center; - .ceo-container { + .image-container { position: relative; - max-width: 400px; + max-width: 450px; width: 100%; - .ceo-photo { - width: 100%; - height: auto; + .image-wrapper { + position: relative; border-radius: 20px; + overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; @@ -1075,48 +1529,150 @@ body { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); } + + .company-photo { + width: 100%; + height: auto; + border-radius: 20px; + transition: all 0.3s ease; + } + + .image-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: all 0.3s ease; + + .overlay-content { + display: flex; + align-items: center; + gap: 8px; + color: white; + font-size: 16px; + font-weight: 600; + cursor: pointer; + + i { + font-size: 24px; + color: #4f8cef; + } + } + } + + &:hover .image-overlay { + opacity: 1; + } + + &:hover .company-photo { + transform: scale(1.05); + } + } + + .floating-card { + position: absolute; + top: -20px; + right: -20px; + background: white; + border-radius: 16px; + padding: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + gap: 12px; + max-width: 200px; + animation: slideInRight 0.8s ease-out 0.5s both; + + i { + font-size: 24px; + color: #4f8cef; + flex-shrink: 0; + } + + .card-content { + h4 { + font-size: 14px; + font-weight: 600; + color: $text-primary; + margin-bottom: 4px; + } + + p { + font-size: 12px; + color: $text-secondary; + line-height: 1.3; + margin: 0; + } + } } &::before { content: ''; position: absolute; - top: -20px; - right: -20px; - width: 100px; - height: 100px; + top: -30px; + right: -30px; + width: 120px; + height: 120px; background: linear-gradient(135deg, #4f8cef, #6fa3f2); border-radius: 50%; opacity: 0.1; z-index: -1; + animation: float 6s ease-in-out infinite; } - &::after { - content: ''; - position: absolute; - bottom: -30px; - left: -30px; - width: 80px; - height: 80px; - background: linear-gradient(135deg, $primary-color, #6fa3f2); - border-radius: 50%; - opacity: 0.1; - z-index: -1; - } + &::after { + content: ''; + position: absolute; + bottom: -40px; + left: -40px; + width: 100px; + height: 100px; + background: linear-gradient(135deg, $primary-color, #6fa3f2); + border-radius: 50%; + opacity: 0.1; + z-index: -1; + animation: float 6s ease-in-out infinite 2s; + } } } } /* Company Achievements 区块样式 */ .company-achievements { - padding: 60px 0; - background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); + padding: 80px 0; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%); + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.5; + } + + .achievements-showcase { + position: relative; + z-index: 2; + } .achievements-grid { display: grid; - grid-template-columns: 1fr 2fr 1fr 1fr; + grid-template-columns: repeat(4, 1fr); gap: 24px; + margin-bottom: 40px; - @media (max-width: 968px) { + @media (max-width: 1200px) { grid-template-columns: repeat(2, 1fr); gap: 20px; } @@ -1127,58 +1683,137 @@ body { } } - .achievement-card { - background: $surface-color; - border-radius: 16px; - padding: 32px 24px; - text-align: center; - box-shadow: $shadow-md; - transition: all 0.3s ease; - border: 1px solid $border-color; + .achievement-card { + background: $surface-color; + border-radius: 20px; + padding: 32px 24px; + text-align: center; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid rgba(79, 140, 239, 0.1); + position: relative; + overflow: hidden; - &:hover { - transform: translateY(-8px); - box-shadow: $shadow-xl; - } + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #4f8cef, #6fa3f2); + transform: scaleX(0); + transition: transform 0.3s ease; + } - .card-icon { - width: 60px; - height: 60px; - background: linear-gradient(135deg, $primary-color, #6fa3f2); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto 20px; + &:hover { + transform: translateY(-12px); + box-shadow: 0 20px 40px rgba(79, 140, 239, 0.15); + border-color: rgba(79, 140, 239, 0.2); - i { - font-size: 24px; - color: white; + &::before { + transform: scaleX(1); + } + + .card-visual .progress-fill { + stroke-dashoffset: 0; + } + } + + .card-visual { + position: relative; + width: 80px; + height: 80px; + margin: 0 auto 24px; + + .icon-circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 60px; + height: 60px; + background: linear-gradient(135deg, #4f8cef, #6fa3f2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + box-shadow: 0 4px 12px rgba(79, 140, 239, 0.3); + + i { + font-size: 24px; + color: white; + } + } + + .progress-ring { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + svg { + width: 100%; + height: 100%; + transform: rotate(-90deg); + + circle { + fill: none; + stroke-width: 3; + stroke-linecap: round; + + &.progress-bg { + stroke: rgba(79, 140, 239, 0.1); + } + + &.progress-fill { + stroke: #4f8cef; + stroke-dasharray: 283; + stroke-dashoffset: 283; + transition: stroke-dashoffset 1.5s ease-out; + transition-delay: 0.5s; + } + } + } } } .card-content { - .achievement-number { - font-size: 32px; - font-weight: 700; - color: $text-primary; - margin-bottom: 8px; - line-height: 1; - } - - .achievement-label { - font-size: 14px; - color: $text-muted; - font-weight: 500; - } + .achievement-number { + font-size: 36px; + font-weight: 700; + color: $text-primary; + margin-bottom: 8px; + line-height: 1; + background: linear-gradient(135deg, #4f8cef, #6fa3f2); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .achievement-label { + font-size: 16px; + color: $text-primary; + font-weight: 600; + margin-bottom: 8px; + } + + .achievement-desc { + font-size: 14px; + color: $text-secondary; + line-height: 1.4; + } } &.featured { - background: linear-gradient(135deg, #4f8cef, #6fa3f2); + background: linear-gradient(135deg, #4f8cef 0%, #6fa3f2 50%, #3b82f6 100%); color: white; grid-column: span 1; + position: relative; - @media (max-width: 968px) { + @media (max-width: 1200px) { grid-column: span 2; } @@ -1186,7 +1821,41 @@ body { grid-column: span 1; } + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; + } + + .featured-badge { + position: absolute; + top: 16px; + right: 16px; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 6px 12px; + font-size: 12px; + font-weight: 600; + display: flex; + align-items: center; + gap: 4px; + color: white; + + i { + font-size: 12px; + color: #ffd700; + } + } + .featured-content { + position: relative; + z-index: 2; display: flex; align-items: center; gap: 20px; @@ -1199,17 +1868,19 @@ body { } .featured-icon { - width: 60px; - height: 60px; + width: 80px; + height: 80px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.3); i { - font-size: 24px; + font-size: 32px; color: white; } } @@ -1218,18 +1889,90 @@ body { flex: 1; h3 { - font-size: 20px; - font-weight: 600; - margin-bottom: 8px; + font-size: 24px; + font-weight: 700; + margin-bottom: 12px; color: white; + line-height: 1.2; } p { - font-size: 14px; - line-height: 1.5; + font-size: 16px; + line-height: 1.6; color: rgba(255, 255, 255, 0.9); - margin: 0; + margin-bottom: 16px; } + + .vision-highlights { + display: flex; + gap: 8px; + flex-wrap: wrap; + + .highlight-tag { + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 20px; + padding: 6px 12px; + font-size: 12px; + font-weight: 600; + color: white; + } + } + } + } + } + } + + .achievements-summary { + background: $surface-color; + border-radius: 20px; + padding: 32px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + border: 1px solid rgba(79, 140, 239, 0.1); + + .summary-content { + display: flex; + align-items: center; + gap: 24px; + + @media (max-width: 768px) { + flex-direction: column; + text-align: center; + gap: 16px; + } + + .summary-icon { + width: 60px; + height: 60px; + background: linear-gradient(135deg, #4f8cef, #6fa3f2); + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + i { + font-size: 24px; + color: white; + } + } + + .summary-text { + flex: 1; + + h4 { + font-size: 20px; + font-weight: 600; + color: $text-primary; + margin-bottom: 8px; + } + + p { + font-size: 16px; + line-height: 1.6; + color: $text-secondary; + margin: 0; } } } @@ -1237,54 +1980,54 @@ body { } /* Professional Brand 区块样式 */ - .professional-brand { - padding: 60px 0; - background: $surface-color; - position: relative; - +.professional-brand { + padding: 60px 0; + background: $surface-color; + position: relative; + .brand-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; - + @media (max-width: 968px) { grid-template-columns: 1fr; gap: 50px; } } -.brand-info { - .philosophy-card { - background: $surface-color; - border: 1px solid $border-color; - border-radius: 16px; - padding: 28px; - margin-bottom: 24px; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 4px; - background: $gradient-primary; - } - - &:hover { - box-shadow: $shadow-lg; - transform: translateY(-4px); - } - + .brand-info { + .philosophy-card { + background: $surface-color; + border: 1px solid $border-color; + border-radius: 16px; + padding: 28px; + margin-bottom: 24px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: $gradient-primary; + } + + &:hover { + box-shadow: $shadow-lg; + transform: translateY(-4px); + } + .card-header { display: flex; align-items: center; margin-bottom: 16px; - + .card-icon { width: 40px; height: 40px; @@ -1292,112 +2035,112 @@ body { align-items: center; justify-content: center; margin-right: 16px; - - .icon-circle { - width: 12px; - height: 12px; - background: $primary-color; - border-radius: 50%; - position: relative; - - &::after { - content: ''; - position: absolute; - top: -4px; - left: -4px; - right: -4px; - bottom: -4px; - border: 2px solid $primary-color; - border-radius: 50%; - opacity: 0.3; - } - } + + .icon-circle { + width: 12px; + height: 12px; + background: $primary-color; + border-radius: 50%; + position: relative; + + &::after { + content: ""; + position: absolute; + top: -4px; + left: -4px; + right: -4px; + bottom: -4px; + border: 2px solid $primary-color; + border-radius: 50%; + opacity: 0.3; + } + } } - - .card-title { - font-size: 20px; - font-weight: 600; - color: $text-primary; - margin: 0; - } - } - - .card-text { - font-size: 15px; - line-height: 1.6; - color: $text-secondary; - margin: 0; - } + + .card-title { + font-size: 20px; + font-weight: 600; + color: $text-primary; + margin: 0; + } + } + + .card-text { + font-size: 15px; + line-height: 1.6; + color: $text-secondary; + margin: 0; + } } - - .core-values { - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - border-radius: 16px; - padding: 28px; - border: 1px solid $border-color; - - .values-title { - font-size: 18px; - font-weight: 600; - color: $text-primary; - margin-bottom: 20px; - text-align: center; - } - + + .core-values { + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border-radius: 16px; + padding: 28px; + border: 1px solid $border-color; + + .values-title { + font-size: 18px; + font-weight: 600; + color: $text-primary; + margin-bottom: 20px; + text-align: center; + } + .values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; - - .value-item { - display: flex; - align-items: center; - gap: 12px; - padding: 12px 16px; - background: $surface-color; - border-radius: 10px; - transition: all 0.2s ease; - - &:hover { - background: rgba(79, 140, 239, 0.05); - transform: translateX(4px); - } - - .value-icon { - font-size: 18px; - color: $primary-color; - } - - .value-text { - font-size: 14px; - font-weight: 500; - color: $text-primary; - } - } + + .value-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + background: $surface-color; + border-radius: 10px; + transition: all 0.2s ease; + + &:hover { + background: rgba(79, 140, 239, 0.05); + transform: translateX(4px); + } + + .value-icon { + font-size: 18px; + color: $primary-color; + } + + .value-text { + font-size: 14px; + font-weight: 500; + color: $text-primary; + } + } } } } - + .brand-visual { - .image-container { - position: relative; - border-radius: 20px; - overflow: hidden; - background: $gradient-primary; - padding: 4px; - + .image-container { + position: relative; + border-radius: 20px; + overflow: hidden; + background: $gradient-primary; + padding: 4px; + img { width: 100%; height: 400px; object-fit: cover; border-radius: 16px; transition: all 0.4s ease; - + &:hover { transform: scale(1.02); } } - + .image-overlay { position: absolute; bottom: 0; @@ -1408,21 +2151,21 @@ body { padding: 32px 24px 24px; transform: translateY(100%); transition: all 0.4s ease; - + .overlay-content { h4 { font-size: 20px; font-weight: 700; margin-bottom: 8px; } - + p { font-size: 14px; opacity: 0.9; } } } - + &:hover .image-overlay { transform: translateY(0); } @@ -1431,43 +2174,43 @@ body { } /* Technology Excellence 区块样式 */ - .tech-excellence { - padding: 60px 0; - background: $surface-color; - position: relative; - +.tech-excellence { + padding: 60px 0; + background: $surface-color; + position: relative; + .tech-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; - + @media (max-width: 968px) { grid-template-columns: 1fr; gap: 50px; } } - + .tech-visual { .image-container { position: relative; border-radius: 20px; overflow: hidden; - - img { - width: 100%; - height: 400px; - object-fit: cover; - border-radius: 20px; - box-shadow: $shadow-lg; - transition: all 0.4s ease; - - &:hover { - transform: scale(1.02); - box-shadow: $shadow-xl; - } - } - + + img { + width: 100%; + height: 400px; + object-fit: cover; + border-radius: 20px; + box-shadow: $shadow-lg; + transition: all 0.4s ease; + + &:hover { + transform: scale(1.02); + box-shadow: $shadow-xl; + } + } + .tech-badges { position: absolute; top: 20px; @@ -1475,188 +2218,188 @@ body { display: flex; flex-direction: column; gap: 8px; - - .badge-item { - display: flex; - align-items: center; - gap: 8px; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - padding: 8px 12px; - border-radius: 20px; - font-size: 12px; - font-weight: 600; - color: $primary-color; - box-shadow: $shadow-sm; - - i { - font-size: 14px; - color: $primary-color; - } - } - } - } - } - - .tech-info { - .tech-highlights { - margin-bottom: 32px; - - .highlight-card { - display: flex; - gap: 20px; - padding: 24px; - background: $surface-color; - border: 1px solid $border-color; - border-radius: 16px; - margin-bottom: 20px; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: $gradient-primary; - } - - &:hover { - box-shadow: $shadow-lg; - transform: translateY(-2px); - } - - .card-number { - flex-shrink: 0; - width: 48px; - height: 48px; - background: $gradient-primary; - color: white; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 18px; - font-weight: 700; - box-shadow: $shadow-md; - } - - .card-content { - flex: 1; - - .card-title { - font-size: 18px; - font-weight: 600; - color: $text-primary; - margin-bottom: 8px; - } - - .card-desc { - font-size: 14px; - line-height: 1.5; - color: $text-secondary; - margin-bottom: 12px; - } - - .card-features { - display: flex; - gap: 8px; - flex-wrap: wrap; - - .feature-tag { - background: rgba(79, 140, 239, 0.1); - color: $primary-color; - padding: 4px 8px; - border-radius: 12px; - font-size: 12px; - font-weight: 500; - } - } + + .badge-item { + display: flex; + align-items: center; + gap: 8px; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + padding: 8px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + color: $primary-color; + box-shadow: $shadow-sm; + + i { + font-size: 14px; + color: $primary-color; + } + } + } + } + } + + .tech-info { + .tech-highlights { + margin-bottom: 32px; + + .highlight-card { + display: flex; + gap: 20px; + padding: 24px; + background: $surface-color; + border: 1px solid $border-color; + border-radius: 16px; + margin-bottom: 20px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: $gradient-primary; + } + + &:hover { + box-shadow: $shadow-lg; + transform: translateY(-2px); + } + + .card-number { + flex-shrink: 0; + width: 48px; + height: 48px; + background: $gradient-primary; + color: white; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + font-weight: 700; + box-shadow: $shadow-md; + } + + .card-content { + flex: 1; + + .card-title { + font-size: 18px; + font-weight: 600; + color: $text-primary; + margin-bottom: 8px; + } + + .card-desc { + font-size: 14px; + line-height: 1.5; + color: $text-secondary; + margin-bottom: 12px; + } + + .card-features { + display: flex; + gap: 8px; + flex-wrap: wrap; + + .feature-tag { + background: rgba(79, 140, 239, 0.1); + color: $primary-color; + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + font-weight: 500; + } + } + } + } + } + + .tech-summary { + .summary-content { + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + padding: 24px; + border-radius: 16px; + border: 1px solid $border-color; + + .summary-title { + font-size: 16px; + font-weight: 600; + color: $text-primary; + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 8px; + + &::before { + content: ""; + width: 4px; + height: 16px; + background: $primary-color; + border-radius: 2px; + } + } + + .summary-text { + font-size: 14px; + line-height: 1.6; + color: $text-secondary; + margin: 0; } } } - - .tech-summary { - .summary-content { - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - padding: 24px; - border-radius: 16px; - border: 1px solid $border-color; - - .summary-title { - font-size: 16px; - font-weight: 600; - color: $text-primary; - margin-bottom: 12px; - display: flex; - align-items: center; - gap: 8px; - - &::before { - content: ''; - width: 4px; - height: 16px; - background: $primary-color; - border-radius: 2px; - } - } - - .summary-text { - font-size: 14px; - line-height: 1.6; - color: $text-secondary; - margin: 0; - } - } - } } } /* Exhibition & Honors 区块样式 */ - .exhibition-honors { - padding: 60px 0; - background: $surface-color; - position: relative; - +.exhibition-honors { + padding: 60px 0; + background: $surface-color; + position: relative; + .exhibition-content { display: grid; gap: 40px; } - + .exhibition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; - + @media (max-width: 768px) { grid-template-columns: 1fr; } } - + .exhibition-item { - .exhibition-card { - position: relative; - border-radius: 12px; - overflow: hidden; - background: $surface-color; - border: 1px solid $border-color; - transition: all 0.3s ease; - - &:hover { - box-shadow: $shadow-lg; - transform: translateY(-4px); - } - + .exhibition-card { + position: relative; + border-radius: 12px; + overflow: hidden; + background: $surface-color; + border: 1px solid $border-color; + transition: all 0.3s ease; + + &:hover { + box-shadow: $shadow-lg; + transform: translateY(-4px); + } + img { width: 100%; height: 200px; object-fit: cover; transition: all 0.3s ease; } - + .card-info { position: absolute; bottom: 0; @@ -1665,19 +2408,19 @@ body { background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: white; padding: 20px 16px 16px; - - .info-icon { - font-size: 20px; - margin-bottom: 8px; - color: $primary-color; - } - + + .info-icon { + font-size: 20px; + margin-bottom: 8px; + color: $primary-color; + } + h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } - + p { font-size: 12px; opacity: 0.9; @@ -1685,105 +2428,105 @@ body { letter-spacing: 1px; } } - + &:hover img { transform: scale(1.05); } } } - + .honors-section { - .honors-header { - text-align: center; - margin-bottom: 32px; - - .header-icon { - font-size: 32px; - margin-bottom: 12px; - color: $primary-color; - } - - h3 { - font-size: 24px; - font-weight: 600; - color: $text-primary; - margin-bottom: 4px; - } - - p { - font-size: 12px; - color: $text-muted; - letter-spacing: 2px; - text-transform: uppercase; - } - } - + .honors-header { + text-align: center; + margin-bottom: 32px; + + .header-icon { + font-size: 32px; + margin-bottom: 12px; + color: $primary-color; + } + + h3 { + font-size: 24px; + font-weight: 600; + color: $text-primary; + margin-bottom: 4px; + } + + p { + font-size: 12px; + color: $text-muted; + letter-spacing: 2px; + text-transform: uppercase; + } + } + .honors-compact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; - + @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } - + @media (max-width: 480px) { grid-template-columns: 1fr; } } - - .honor-card { - display: flex; - align-items: center; - gap: 12px; - padding: 16px; - background: $surface-color; - border: 1px solid $border-color; - border-radius: 12px; - transition: all 0.3s ease; - - &:hover { - box-shadow: $shadow-md; - transform: translateY(-2px); - border-color: $primary-color; - } - - .honor-icon { - font-size: 20px; - flex-shrink: 0; - color: $primary-color; - } - - .honor-content { - flex: 1; - - h4 { - font-size: 14px; - font-weight: 600; - color: $text-primary; - margin-bottom: 2px; - } - - span { - font-size: 12px; - color: $text-muted; - } - } - } + + .honor-card { + display: flex; + align-items: center; + gap: 12px; + padding: 16px; + background: $surface-color; + border: 1px solid $border-color; + border-radius: 12px; + transition: all 0.3s ease; + + &:hover { + box-shadow: $shadow-md; + transform: translateY(-2px); + border-color: $primary-color; + } + + .honor-icon { + font-size: 20px; + flex-shrink: 0; + color: $primary-color; + } + + .honor-content { + flex: 1; + + h4 { + font-size: 14px; + font-weight: 600; + color: $text-primary; + margin-bottom: 2px; + } + + span { + font-size: 12px; + color: $text-muted; + } + } + } } } /* Production Process 区块样式 */ - .production-process { - padding: 60px 0; - background: $surface-color; - position: relative; - +.production-process { + padding: 60px 0; + background: $surface-color; + position: relative; + .production-content { display: grid; gap: 40px; } - + .process-flow { display: flex; align-items: center; @@ -1791,197 +2534,197 @@ body { gap: 16px; flex-wrap: wrap; margin-bottom: 32px; - + @media (max-width: 768px) { flex-direction: column; gap: 20px; } - - .flow-item { - text-align: center; - padding: 20px 16px; - background: $surface-color; - border: 1px solid $border-color; - border-radius: 12px; - min-width: 140px; - transition: all 0.3s ease; - - &:hover { - box-shadow: $shadow-md; - transform: translateY(-4px); - border-color: $primary-color; - } - - .flow-icon { - font-size: 24px; - margin-bottom: 8px; - color: $primary-color; - } - - h4 { - font-size: 14px; - font-weight: 600; - color: $text-primary; - margin-bottom: 4px; - } - - p { - font-size: 12px; - color: $text-muted; - line-height: 1.3; - } - } - - .flow-arrow { - font-size: 20px; - color: $primary-color; - font-weight: bold; - + + .flow-item { + text-align: center; + padding: 20px 16px; + background: $surface-color; + border: 1px solid $border-color; + border-radius: 12px; + min-width: 140px; + transition: all 0.3s ease; + + &:hover { + box-shadow: $shadow-md; + transform: translateY(-4px); + border-color: $primary-color; + } + + .flow-icon { + font-size: 24px; + margin-bottom: 8px; + color: $primary-color; + } + + h4 { + font-size: 14px; + font-weight: 600; + color: $text-primary; + margin-bottom: 4px; + } + + p { + font-size: 12px; + color: $text-muted; + line-height: 1.3; + } + } + + .flow-arrow { + font-size: 20px; + color: $primary-color; + font-weight: bold; + @media (max-width: 768px) { transform: rotate(90deg); } } } - + .workshop-compact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; - + @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); gap: 16px; } - + @media (max-width: 480px) { grid-template-columns: 1fr; } } - - .workshop-card { - position: relative; - border-radius: 12px; - overflow: hidden; - background: $surface-color; - border: 1px solid $border-color; - transition: all 0.3s ease; - - &:hover { - box-shadow: $shadow-lg; - transform: translateY(-4px); - } - + + .workshop-card { + position: relative; + border-radius: 12px; + overflow: hidden; + background: $surface-color; + border: 1px solid $border-color; + transition: all 0.3s ease; + + &:hover { + box-shadow: $shadow-lg; + transform: translateY(-4px); + } + img { width: 100%; height: 150px; object-fit: cover; transition: all 0.3s ease; } - - .card-badge { - position: absolute; - bottom: 8px; - left: 8px; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - padding: 6px 12px; - border-radius: 20px; - display: flex; - align-items: center; - gap: 6px; - font-size: 12px; - font-weight: 500; - color: $text-primary; - box-shadow: $shadow-sm; - - i { - font-size: 14px; - color: $primary-color; - } - } - + + .card-badge { + position: absolute; + bottom: 8px; + left: 8px; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + padding: 6px 12px; + border-radius: 20px; + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 500; + color: $text-primary; + box-shadow: $shadow-sm; + + i { + font-size: 14px; + color: $primary-color; + } + } + &:hover img { transform: scale(1.05); } } - + .production-stats { - .stats-header { - text-align: center; - margin-bottom: 32px; - - .header-icon { - font-size: 32px; - margin-bottom: 12px; - color: $primary-color; - } - - h3 { - font-size: 24px; - font-weight: 600; - color: $text-primary; - margin-bottom: 4px; - } - - p { - font-size: 12px; - color: $text-muted; - letter-spacing: 2px; - text-transform: uppercase; - } - } - + .stats-header { + text-align: center; + margin-bottom: 32px; + + .header-icon { + font-size: 32px; + margin-bottom: 12px; + color: $primary-color; + } + + h3 { + font-size: 24px; + font-weight: 600; + color: $text-primary; + margin-bottom: 4px; + } + + p { + font-size: 12px; + color: $text-muted; + letter-spacing: 2px; + text-transform: uppercase; + } + } + .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; - + @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } } - - .stat-card { - display: flex; - align-items: center; - gap: 12px; - padding: 20px 16px; - background: $surface-color; - border: 1px solid $border-color; - border-radius: 12px; - transition: all 0.3s ease; - - &:hover { - box-shadow: $shadow-md; - transform: translateY(-2px); - border-color: $primary-color; - } - - .stat-icon { - font-size: 24px; - flex-shrink: 0; - color: $primary-color; - } - - .stat-data { - flex: 1; - - .stat-number { - font-size: 20px; - font-weight: 700; - color: $text-primary; - margin-bottom: 2px; - line-height: 1; - } - - .stat-label { - font-size: 12px; - color: $text-muted; - line-height: 1.2; - } - } - } + + .stat-card { + display: flex; + align-items: center; + gap: 12px; + padding: 20px 16px; + background: $surface-color; + border: 1px solid $border-color; + border-radius: 12px; + transition: all 0.3s ease; + + &:hover { + box-shadow: $shadow-md; + transform: translateY(-2px); + border-color: $primary-color; + } + + .stat-icon { + font-size: 24px; + flex-shrink: 0; + color: $primary-color; + } + + .stat-data { + flex: 1; + + .stat-number { + font-size: 20px; + font-weight: 700; + color: $text-primary; + margin-bottom: 2px; + line-height: 1; + } + + .stat-label { + font-size: 12px; + color: $text-muted; + line-height: 1.2; + } + } + } } } @@ -2021,17 +2764,29 @@ body { } } -@keyframes gridMove { - 0% { - transform: translate(0, 0); +@keyframes particleFloat { + 0%, 100% { + transform: translateY(0px) scale(1); + opacity: 0.6; } - 100% { - transform: translate(50px, 50px); + 50% { + transform: translateY(-20px) scale(1.2); + opacity: 1; + } +} + +@keyframes shapeFloat { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + } + 50% { + transform: translateY(-30px) rotate(180deg); } } @keyframes float { - 0%, 100% { + 0%, + 100% { transform: translateY(0px); } 50% { @@ -2040,14 +2795,86 @@ body { } @keyframes pulse { - 0%, 100% { + 0%, + 100% { opacity: 1; + transform: scale(1); } 50% { opacity: 0.7; + transform: scale(1.05); } } +@keyframes slideInUp { + from { + opacity: 0; + transform: translateY(50px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.8); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes rotateIn { + from { + opacity: 0; + transform: rotate(-180deg) scale(0.3); + } + to { + opacity: 1; + transform: rotate(0deg) scale(1); + } +} + +@keyframes progressFill { + from { + stroke-dashoffset: 283; + } + to { + stroke-dashoffset: 0; + } +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +/* 滚动动画类 */ +.animate-on-scroll { + opacity: 0; + transform: translateY(30px); + transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); + + &.animate-in { + opacity: 1; + transform: translateY(0); + } + + &[data-delay="0.1"] { transition-delay: 0.1s; } + &[data-delay="0.2"] { transition-delay: 0.2s; } + &[data-delay="0.3"] { transition-delay: 0.3s; } + &[data-delay="0.4"] { transition-delay: 0.4s; } + &[data-delay="0.5"] { transition-delay: 0.5s; } +} + /* 应用动画 */ .section-header { animation: fadeInUp 0.8s ease-out; @@ -2055,7 +2882,7 @@ body { .philosophy-card { animation: slideInLeft 0.6s ease-out; - + &:nth-child(2) { animation-delay: 0.2s; } @@ -2079,21 +2906,37 @@ body { .highlight-card { animation: fadeInUp 0.6s ease-out; - - &:nth-child(1) { animation-delay: 0.1s; } - &:nth-child(2) { animation-delay: 0.2s; } - &:nth-child(3) { animation-delay: 0.3s; } + + &:nth-child(1) { + animation-delay: 0.1s; + } + &:nth-child(2) { + animation-delay: 0.2s; + } + &:nth-child(3) { + animation-delay: 0.3s; + } } .photo-item, .workshop-item { animation: fadeInUp 0.6s ease-out; - - &:nth-child(1) { animation-delay: 0.1s; } - &:nth-child(2) { animation-delay: 0.2s; } - &:nth-child(3) { animation-delay: 0.3s; } - &:nth-child(4) { animation-delay: 0.4s; } - &:nth-child(5) { animation-delay: 0.5s; } + + &:nth-child(1) { + animation-delay: 0.1s; + } + &:nth-child(2) { + animation-delay: 0.2s; + } + &:nth-child(3) { + animation-delay: 0.3s; + } + &:nth-child(4) { + animation-delay: 0.4s; + } + &:nth-child(5) { + animation-delay: 0.5s; + } } /* 现代化滚动条样式 */ @@ -2110,7 +2953,7 @@ body { background: $gradient-primary; border-radius: 4px; transition: all 0.3s ease; - + &:hover { background: $gradient-dark; } @@ -2120,21 +2963,20 @@ body { .main-content { section { position: relative; - - &::before { - content: ''; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 60px; - height: 1px; - background: $gradient-primary; - opacity: 0.3; - } + + &::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 1px; + background: $gradient-primary; + opacity: 0.3; + } } } /* 响应式优化已在各个组件中处理 */ -