diff --git a/nuxt.config.ts b/nuxt.config.ts index 32a1fcc..30f3904 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -65,7 +65,7 @@ export default defineNuxtConfig({ useCookie: true, cookieKey: 'i18n_redirected', redirectOn: 'root', - alwaysRedirect: false, + alwaysRedirect: true, fallbackLocale: 'en', cookieSecure: false }, diff --git a/public/common/css/common.css b/public/common/css/common.css new file mode 100644 index 0000000..693a201 --- /dev/null +++ b/public/common/css/common.css @@ -0,0 +1,979 @@ +@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-Normal; + 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; +} + +a { + color: inherit; +} + +ul, +ol, +li { + list-style-type: none; +} + +a { + text-decoration: none; + outline: none; + color: #333; + cursor: pointer; +} + +a:focus { + outline: none; + -moz-outline: none; +} + +a img { + border: none; +} + +select, +input, +textarea { + border-radius: 0; + -webkit-border-radius: 0; +} + +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; +} + +img { + vertical-align: middle; +} + +html { + font-size: calc(100 * 100vw / 1920) !important; + min-height: 100vh; +} + +html, body { + height: 100%; + width: 100%; + font-family: MiSans-Regular; + user-select: text; + font-size: 0.16rem; + color: #3f4552; + line-height: 1.8; +} + +/* **************滚动条*****************/ +html::-webkit-scrollbar { + overflow: hidden; + /* 高宽分别对应纵横向滚动条 */ + width: 8px; + height: 8px; +} + +@media (max-width: 750px) { + html::-webkit-scrollbar { + display: none; + } +} + +html::-webkit-scrollbar-track { + /*滚动条里面轨道*/ + box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); + border-radius: 5px; + background: #ededed; +} + +html::-webkit-scrollbar-thumb { + background: #262729; +} + +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; + } +} + +.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.7rem; + } +} + +@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: 0.36rem; + color: #fff; + text-align: center; +} + +.banner__box__subtitle { + font-size: 0.2rem; + text-transform: uppercase; +} + +@media (min-width: 751px) and (max-width: 1100px) { + .banner__box__title { + font-size: 0.5rem; + } + .banner__box__subtitle { + font-size: 0.3rem; + } +} + +@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: 12rem; + color: #666; + line-height: 4; + text-align: left; +} + +.pageMain__breads__box__icon__avater { + width: 0.17rem; + height: 0.17rem; + margin-bottom: 0.03rem; +} + +@media (max-width: 1600px) { + .pageMain__breads__box { + width: 15rem; + 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: MiSans-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: 0.18rem; + font-family: MiSans-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.36 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: 1200px; + 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: MiSans-Regular; +} + +@media (max-width: 1200px) { + .nav-sticky__center { + width: 100%; + } +} + +.nav-sticky__center__left { + font-size: 0.17rem; + font-family: MiSans-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: MiSans-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; +} + +@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; +} diff --git a/public/common/css/common.min.css b/public/common/css/common.min.css new file mode 100644 index 0000000..ad7b4eb --- /dev/null +++ b/public/common/css/common.min.css @@ -0,0 +1 @@ +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-Normal;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}a{color:inherit}ul,ol,li{list-style-type:none}a{text-decoration:none;outline:none;color:#333;cursor:pointer}a:focus{outline:none;-moz-outline:none}a img{border:none}select,input,textarea{border-radius:0;-webkit-border-radius:0}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}img{vertical-align:middle}html{font-size:calc(100 * 100vw / 1920) !important;min-height:100vh}html,body{height:100%;width:100%;font-family:MiSans-Regular;user-select:text;font-size:0.16rem;color:#3f4552;line-height:1.8}html::-webkit-scrollbar{overflow:hidden;width:8px;height:8px}@media (max-width: 750px){html::-webkit-scrollbar{display:none}}html::-webkit-scrollbar-track{box-shadow:inset 0 0 8px rgba(0,0,0,0.2);border-radius:5px;background:#ededed}html::-webkit-scrollbar-thumb{background:#262729}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}}.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.7rem}}@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:0.36rem;color:#fff;text-align:center}.banner__box__subtitle{font-size:0.2rem;text-transform:uppercase}@media (min-width: 751px) and (max-width: 1100px){.banner__box__title{font-size:0.5rem}.banner__box__subtitle{font-size:0.3rem}}@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:12rem;color:#666;line-height:4;text-align:left}.pageMain__breads__box__icon__avater{width:0.17rem;height:0.17rem;margin-bottom:0.03rem}@media (max-width: 1600px){.pageMain__breads__box{width:15rem;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:MiSans-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:0.18rem;font-family:MiSans-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.36 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:1200px;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:MiSans-Regular}@media (max-width: 1200px){.nav-sticky__center{width:100%}}.nav-sticky__center__left{font-size:0.17rem;font-family:MiSans-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:MiSans-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}@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} diff --git a/public/common/css/common.scss b/public/common/css/common.scss index f5ed5f9..e0a2e5b 100644 --- a/public/common/css/common.scss +++ b/public/common/css/common.scss @@ -551,7 +551,7 @@ max-width: 100% width: 100%; &__center { - width: 9.8rem; + width: 1200px; @media (max-width: 1200px) { width: 100%; } diff --git a/public/static/contact-us/banner.png b/public/static/contact-us/banner.png new file mode 100644 index 0000000..1715d0e Binary files /dev/null and b/public/static/contact-us/banner.png differ diff --git a/public/static/font/iconfont.css b/public/static/font/iconfont.css index 72f6350..c44d154 100644 --- a/public/static/font/iconfont.css +++ b/public/static/font/iconfont.css @@ -1,8 +1,8 @@ @font-face { - font-family: "iconfont"; /* Project id 4350424 */ - src: url('/static/font/iconfont.woff2?t=1716543193903') format('woff2'), - url('/static/font/iconfont.woff?t=1716543193903') format('woff'), - url('/static/font/iconfont.ttf?t=1716543193903') format('truetype'); + font-family: "iconfont"; /* Project id 5007036 */ + src: url('iconfont.woff2?t=1756173766338') format('woff2'), + url('iconfont.woff?t=1756173766338') format('woff'), + url('iconfont.ttf?t=1756173766338') format('truetype'); } .iconfont { @@ -13,56 +13,124 @@ -moz-osx-font-smoothing: grayscale; } -.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi:before { - content: "\e668"; +.icon-icon_team:before { + content: "\e647"; } -.icon-syd-logo:before { - content: "\e602"; +.icon-icon_global:before { + content: "\ec17"; } -.icon-top:before { - content: "\e67e"; +.icon-icon_building:before { + content: "\e6ed"; } -.icon-shachu-xue:before { - content: "\e638"; +.icon-icon-factory:before { + content: "\e635"; } -.icon-weibiaoti1:before { - content: "\e634"; +.icon-icon-experiment:before { + content: "\e7c6"; } -.icon-xiazai:before { - content: "\e682"; +.icon-icon-time:before { + content: "\e683"; } -.icon-xiajiantou:before { - content: "\e610"; +.icon-icon-chart-line:before { + content: "\e690"; } -.icon-shangjiantou-copy:before { - content: "\e651"; +.icon-icon_award:before { + content: "\e615"; } -.icon-jiazhiguan:before { - content: "\e646"; +.icon-icon-star:before { + content: "\e636"; } -.icon-rencailinian:before { - content: "\e667"; +.icon-icon_check-circle:before { + content: "\e7bf"; } -.icon-msgw_icon_shiming:before { - content: "\e60f"; +.icon-jiantou_xiangyou:before { + content: "\eb08"; } -.icon-qiyeyuanjing:before { - content: "\e671"; +.icon-youjian_o:before { + content: "\ebca"; } -.icon-home:before { - content: "\e62b"; +.icon-dianhua:before { + content: "\e66b"; +} + +.icon-earch:before { + content: "\e617"; +} + +.icon-xiangyou:before { + content: "\e656"; +} + +.icon-language:before { + content: "\e6a9"; +} + +.icon-shanchu:before { + content: "\e606"; +} + +.icon-shanchu11:before { + content: "\e62e"; +} + +.icon-zuixinzixun-03:before { + content: "\ea2c"; +} + +.icon-shangjiantou:before { + content: "\eb6d"; +} + +.icon-zuojiantou:before { + content: "\e65a"; +} + +.icon-shezhi:before { + content: "\e892"; +} + +.icon-youjiantou:before { + content: "\e678"; +} + +.icon-kefu:before { + content: "\e665"; +} + +.icon-arrow-right:before { + content: "\e666"; +} + +.icon-left:before { + content: "\e684"; +} + +.icon-X:before { + content: "\e607"; +} + +.icon-search:before { + content: "\e676"; +} + +.icon-home1:before { + content: "\e92d"; +} + +.icon-zhidingtop:before { + content: "\e62d"; } .icon-jiantou_qiehuanyou:before { @@ -97,10 +165,6 @@ content: "\e672"; } -.icon-duoyuyan:before { - content: "\e654"; -} - .icon-sousuo:before { content: "\e61f"; } @@ -157,83 +221,91 @@ content: "\e62f"; } -.icon-zhidingtop:before { - content: "\e62d"; +.icon-home:before { + content: "\e62b"; } -.icon-home1:before { - content: "\e92d"; +.icon-jiazhiguan:before { + content: "\e646"; } -.icon-search:before { - content: "\e676"; +.icon-rencailinian:before { + content: "\e667"; } -.icon-X:before { - content: "\e607"; +.icon-msgw_icon_shiming:before { + content: "\e60f"; } -.icon-arrow-right:before { - content: "\e666"; +.icon-qiyeyuanjing:before { + content: "\e671"; } -.icon-left:before { - content: "\e684"; +.icon-xiajiantou:before { + content: "\e610"; } -.icon-zuojiantou:before { - content: "\e65a"; +.icon-shangjiantou-copy:before { + content: "\e651"; } -.icon-shezhi:before { - content: "\e892"; +.icon-weibiaoti1:before { + content: "\e634"; } -.icon-youjiantou:before { - content: "\e678"; +.icon-xiazai:before { + content: "\e682"; } -.icon-kefu:before { - content: "\e665"; +.icon-shachu-xue:before { + content: "\e638"; } -.icon-shangjiantou:before { - content: "\eb6d"; +.icon-top:before { + content: "\e67e"; } -.icon-zuixinzixun-03:before { - content: "\ea2c"; +.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi:before { + content: "\e668"; } -.icon-shanchu11:before { - content: "\e62e"; +.icon-youjian1:before { + content: "\e6f5"; } -.icon-shanchu:before { - content: "\e606"; +.icon-fanhuidingbu:before { + content: "\e633"; } -.icon-language:before { - content: "\e6a9"; +.icon-zanwushuju:before { + content: "\e608"; } -.icon-jiantou_xiangyou:before { - content: "\eb08"; +.icon-zanwushuju1:before { + content: "\e618"; } -.icon-youjian_o:before { - content: "\ebca"; +.icon-zhengzaijiazai:before { + content: "\e619"; } -.icon-dianhua:before { - content: "\e66b"; +.icon-jiazhiguan1:before { + content: "\e621"; } -.icon-earch:before { - content: "\e617"; +.icon-msgw_icon_shiming-03:before { + content: "\e622"; } -.icon-xiangyou:before { - content: "\e656"; +.icon-qiyeyuanjing-04:before { + content: "\e623"; +} + +.icon-a-rencailinian1-02:before { + content: "\e624"; +} + +.icon-wancheng:before { + content: "\e652"; } diff --git a/public/static/font/iconfont.js b/public/static/font/iconfont.js new file mode 100644 index 0000000..98ec890 --- /dev/null +++ b/public/static/font/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_5007036='',(a=>{var l=(c=(c=document.getElementsByTagName("script"))[c.length-1]).getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var h,i,t,o,z,m=function(l,c){c.parentNode.insertBefore(l,c)};if(l&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}h=function(){var l,c=document.createElement("div");c.innerHTML=a._iconfont_svg_string_5007036,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?m(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),h()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(t=h,o=a.document,z=!1,s(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,v())})}function v(){z||(z=!0,t())}function s(){try{o.documentElement.doScroll("left")}catch(l){return void setTimeout(s,50)}v()}})(window); \ No newline at end of file diff --git a/public/static/font/iconfont.json b/public/static/font/iconfont.json new file mode 100644 index 0000000..d8dc089 --- /dev/null +++ b/public/static/font/iconfont.json @@ -0,0 +1,527 @@ +{ + "id": "5007036", + "name": "水平面尼日利亚官网", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "5869238", + "name": "icon_team", + "font_class": "icon_team", + "unicode": "e647", + "unicode_decimal": 58951 + }, + { + "icon_id": "12410550", + "name": "icon_global", + "font_class": "icon_global", + "unicode": "ec17", + "unicode_decimal": 60439 + }, + { + "icon_id": "13770691", + "name": "icon_building", + "font_class": "icon_building", + "unicode": "e6ed", + "unicode_decimal": 59117 + }, + { + "icon_id": "20884464", + "name": "icon-factory", + "font_class": "icon-factory", + "unicode": "e635", + "unicode_decimal": 58933 + }, + { + "icon_id": "25219153", + "name": "icon-experiment", + "font_class": "icon-experiment", + "unicode": "e7c6", + "unicode_decimal": 59334 + }, + { + "icon_id": "29306670", + "name": "icon-time", + "font_class": "icon-time", + "unicode": "e683", + "unicode_decimal": 59011 + }, + { + "icon_id": "32809261", + "name": "icon-chart-line", + "font_class": "icon-chart-line", + "unicode": "e690", + "unicode_decimal": 59024 + }, + { + "icon_id": "34666572", + "name": "icon_award", + "font_class": "icon_award", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "37124991", + "name": "icon-star", + "font_class": "icon-star", + "unicode": "e636", + "unicode_decimal": 58934 + }, + { + "icon_id": "40585518", + "name": "icon_check-circle", + "font_class": "icon_check-circle", + "unicode": "e7bf", + "unicode_decimal": 59327 + }, + { + "icon_id": "5387583", + "name": "箭头_向右", + "font_class": "jiantou_xiangyou", + "unicode": "eb08", + "unicode_decimal": 60168 + }, + { + "icon_id": "5388066", + "name": "邮件_o", + "font_class": "youjian_o", + "unicode": "ebca", + "unicode_decimal": 60362 + }, + { + "icon_id": "6263347", + "name": "电话", + "font_class": "dianhua", + "unicode": "e66b", + "unicode_decimal": 58987 + }, + { + "icon_id": "9550461", + "name": "全球资讯", + "font_class": "earch", + "unicode": "e617", + "unicode_decimal": 58903 + }, + { + "icon_id": "34273106", + "name": "向右", + "font_class": "xiangyou", + "unicode": "e656", + "unicode_decimal": 58966 + }, + { + "icon_id": "15448290", + "name": "language", + "font_class": "language", + "unicode": "e6a9", + "unicode_decimal": 59049 + }, + { + "icon_id": "12670573", + "name": "删除", + "font_class": "shanchu", + "unicode": "e606", + "unicode_decimal": 58886 + }, + { + "icon_id": "3530491", + "name": "删除", + "font_class": "shanchu11", + "unicode": "e62e", + "unicode_decimal": 58926 + }, + { + "icon_id": "33906987", + "name": "最新资讯-03", + "font_class": "zuixinzixun-03", + "unicode": "ea2c", + "unicode_decimal": 59948 + }, + { + "icon_id": "4175512", + "name": "上箭头", + "font_class": "shangjiantou", + "unicode": "eb6d", + "unicode_decimal": 60269 + }, + { + "icon_id": "1518005", + "name": "左箭头", + "font_class": "zuojiantou", + "unicode": "e65a", + "unicode_decimal": 58970 + }, + { + "icon_id": "2076270", + "name": "设置", + "font_class": "shezhi", + "unicode": "e892", + "unicode_decimal": 59538 + }, + { + "icon_id": "2418274", + "name": "右箭头", + "font_class": "youjiantou", + "unicode": "e678", + "unicode_decimal": 59000 + }, + { + "icon_id": "8605730", + "name": "客服", + "font_class": "kefu", + "unicode": "e665", + "unicode_decimal": 58981 + }, + { + "icon_id": "15838431", + "name": "arrow-right", + "font_class": "arrow-right", + "unicode": "e666", + "unicode_decimal": 58982 + }, + { + "icon_id": "16615922", + "name": "left", + "font_class": "left", + "unicode": "e684", + "unicode_decimal": 59012 + }, + { + "icon_id": "12532655", + "name": "X", + "font_class": "X", + "unicode": "e607", + "unicode_decimal": 58887 + }, + { + "icon_id": "3043971", + "name": "search", + "font_class": "search", + "unicode": "e676", + "unicode_decimal": 58998 + }, + { + "icon_id": "5478607", + "name": "home", + "font_class": "home1", + "unicode": "e92d", + "unicode_decimal": 59693 + }, + { + "icon_id": "10714378", + "name": "置顶 top", + "font_class": "zhidingtop", + "unicode": "e62d", + "unicode_decimal": 58925 + }, + { + "icon_id": "5387577", + "name": "箭头_切换右", + "font_class": "jiantou_qiehuanyou", + "unicode": "eb05", + "unicode_decimal": 60165 + }, + { + "icon_id": "1049988", + "name": "Navi_购买", + "font_class": "navigoumai", + "unicode": "e62a", + "unicode_decimal": 58922 + }, + { + "icon_id": "20697134", + "name": "客服", + "font_class": "kefu1", + "unicode": "e60d", + "unicode_decimal": 58893 + }, + { + "icon_id": "29486582", + "name": "设置", + "font_class": "shezhi1", + "unicode": "e7f8", + "unicode_decimal": 59384 + }, + { + "icon_id": "18420783", + "name": "时间", + "font_class": "shijian", + "unicode": "e64f", + "unicode_decimal": 58959 + }, + { + "icon_id": "372908", + "name": "cc-left", + "font_class": "cc-left", + "unicode": "e6c2", + "unicode_decimal": 59074 + }, + { + "icon_id": "808099", + "name": "电话", + "font_class": "unie601", + "unicode": "e61c", + "unicode_decimal": 58908 + }, + { + "icon_id": "10069735", + "name": "邮件", + "font_class": "youjian", + "unicode": "e672", + "unicode_decimal": 58994 + }, + { + "icon_id": "4942663", + "name": "搜索", + "font_class": "sousuo", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "2432195", + "name": "电子邮箱", + "font_class": "dianziyouxiang", + "unicode": "e60c", + "unicode_decimal": 58892 + }, + { + "icon_id": "4251738", + "name": "客户", + "font_class": "kehu", + "unicode": "e645", + "unicode_decimal": 58949 + }, + { + "icon_id": "31313001", + "name": "服务", + "font_class": "fuwu", + "unicode": "e61b", + "unicode_decimal": 58907 + }, + { + "icon_id": "22502574", + "name": "工厂", + "font_class": "gongchang", + "unicode": "e649", + "unicode_decimal": 58953 + }, + { + "icon_id": "749761", + "name": "购买", + "font_class": "goumai", + "unicode": "e603", + "unicode_decimal": 58883 + }, + { + "icon_id": "9978437", + "name": "谷歌商店", + "font_class": "zu", + "unicode": "e644", + "unicode_decimal": 58948 + }, + { + "icon_id": "14055532", + "name": "安卓", + "font_class": "anzhuo", + "unicode": "e60b", + "unicode_decimal": 58891 + }, + { + "icon_id": "29665113", + "name": "苹果_apple", + "font_class": "pingguo_apple", + "unicode": "e7f2", + "unicode_decimal": 59378 + }, + { + "icon_id": "356446", + "name": "减号", + "font_class": "jianhao", + "unicode": "e614", + "unicode_decimal": 58900 + }, + { + "icon_id": "592049", + "name": "菜单", + "font_class": "caidan", + "unicode": "e790", + "unicode_decimal": 59280 + }, + { + "icon_id": "10933908", + "name": "返回", + "font_class": "fanhui", + "unicode": "e60e", + "unicode_decimal": 58894 + }, + { + "icon_id": "118807", + "name": "apple", + "font_class": "fisocialapple", + "unicode": "e76f", + "unicode_decimal": 59247 + }, + { + "icon_id": "2583881", + "name": "叉叉", + "font_class": "chacha", + "unicode": "e62f", + "unicode_decimal": 58927 + }, + { + "icon_id": "1471615", + "name": "home", + "font_class": "home", + "unicode": "e62b", + "unicode_decimal": 58923 + }, + { + "icon_id": "3471676", + "name": "价值观", + "font_class": "jiazhiguan", + "unicode": "e646", + "unicode_decimal": 58950 + }, + { + "icon_id": "11834362", + "name": "人才理念 (1)", + "font_class": "rencailinian", + "unicode": "e667", + "unicode_decimal": 58983 + }, + { + "icon_id": "27987745", + "name": "msgw_icon_使命", + "font_class": "msgw_icon_shiming", + "unicode": "e60f", + "unicode_decimal": 58895 + }, + { + "icon_id": "33575992", + "name": "企业愿景", + "font_class": "qiyeyuanjing", + "unicode": "e671", + "unicode_decimal": 58993 + }, + { + "icon_id": "5199424", + "name": "下箭头", + "font_class": "xiajiantou", + "unicode": "e610", + "unicode_decimal": 58896 + }, + { + "icon_id": "10515590", + "name": "上箭头", + "font_class": "shangjiantou-copy", + "unicode": "e651", + "unicode_decimal": 58961 + }, + { + "icon_id": "1214255", + "name": "使用手册", + "font_class": "weibiaoti1", + "unicode": "e634", + "unicode_decimal": 58932 + }, + { + "icon_id": "12184865", + "name": "下载", + "font_class": "xiazai", + "unicode": "e682", + "unicode_decimal": 59010 + }, + { + "icon_id": "1474435", + "name": "删除", + "font_class": "shachu-xue", + "unicode": "e638", + "unicode_decimal": 58936 + }, + { + "icon_id": "405199", + "name": "top", + "font_class": "top", + "unicode": "e67e", + "unicode_decimal": 59006 + }, + { + "icon_id": "741981", + "name": "择律-选择费用-正三角形-支持", + "font_class": "zelvxuanzefeiyongzhengsanjiaoxingzhichi", + "unicode": "e668", + "unicode_decimal": 58984 + }, + { + "icon_id": "2053207", + "name": "邮件", + "font_class": "youjian1", + "unicode": "e6f5", + "unicode_decimal": 59125 + }, + { + "icon_id": "6234497", + "name": "返回顶部", + "font_class": "fanhuidingbu", + "unicode": "e633", + "unicode_decimal": 58931 + }, + { + "icon_id": "24327494", + "name": "暂无数据", + "font_class": "zanwushuju", + "unicode": "e608", + "unicode_decimal": 58888 + }, + { + "icon_id": "40763706", + "name": "暂无数据", + "font_class": "zanwushuju1", + "unicode": "e618", + "unicode_decimal": 58904 + }, + { + "icon_id": "40763707", + "name": "正在加载", + "font_class": "zhengzaijiazai", + "unicode": "e619", + "unicode_decimal": 58905 + }, + { + "icon_id": "41151647", + "name": "价值观", + "font_class": "jiazhiguan1", + "unicode": "e621", + "unicode_decimal": 58913 + }, + { + "icon_id": "41151648", + "name": "msgw_icon_使命-03", + "font_class": "msgw_icon_shiming-03", + "unicode": "e622", + "unicode_decimal": 58914 + }, + { + "icon_id": "41151649", + "name": "企业愿景-04", + "font_class": "qiyeyuanjing-04", + "unicode": "e623", + "unicode_decimal": 58915 + }, + { + "icon_id": "41151650", + "name": "人才理念 (1)-02", + "font_class": "a-rencailinian1-02", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "26661671", + "name": "完成", + "font_class": "wancheng", + "unicode": "e652", + "unicode_decimal": 58962 + } + ] +} diff --git a/public/static/font/iconfont.ttf b/public/static/font/iconfont.ttf index 4be8243..4abed03 100644 Binary files a/public/static/font/iconfont.ttf and b/public/static/font/iconfont.ttf differ diff --git a/public/static/font/iconfont.woff b/public/static/font/iconfont.woff index fd02fba..1e98577 100644 Binary files a/public/static/font/iconfont.woff and b/public/static/font/iconfont.woff differ diff --git a/public/static/font/iconfont.woff2 b/public/static/font/iconfont.woff2 index ea21a14..43062ec 100644 Binary files a/public/static/font/iconfont.woff2 and b/public/static/font/iconfont.woff2 differ diff --git a/server/middleware/i18n.global.ts b/server/middleware/i18n.global.ts index 848ff24..ff77960 100644 --- a/server/middleware/i18n.global.ts +++ b/server/middleware/i18n.global.ts @@ -13,9 +13,18 @@ export default defineEventHandler((event: any) => { else if (acceptLanguage.includes('zh')) { detectedLang = 'cn'; } + // 设置到 context 供后续使用 event.context.locale = detectedLang; // 设置响应头 setHeader(event, 'X-Detected-Language', detectedLang); + + // 如果是根路径且没有cookie,根据浏览器语言进行重定向 + if (event.path === '/' && !cookie) { + if (acceptLanguage.includes('zh')) { + // 重定向到中文版本 + return sendRedirect(event, '/cn', 302); + } + } }); diff --git a/src/app.vue b/src/app.vue index f231913..0ecf2a9 100644 --- a/src/app.vue +++ b/src/app.vue @@ -47,6 +47,11 @@ hid: 'favicon', rel: 'icon', href: '/favicon.ico' + }, + { + hid: 'iconfont', + rel: 'stylesheet', + href: '/static/font/iconfont.css' } ], script: [{ @@ -80,9 +85,10 @@ // 3. 如果都没有,根据浏览器语言设置 if (savedLang === 'en') { - if (navigator.language.startsWith("en")) { + const browserLang = navigator.language.toLowerCase(); + if (browserLang.startsWith("en")) { savedLang = "en"; - } else if (navigator.language.includes("zh")) { + } else if (browserLang.includes("zh") || browserLang.includes("cn")) { savedLang = "cn"; } } diff --git a/src/common/css/common.css b/src/common/css/common.css new file mode 100644 index 0000000..eb9fe0d --- /dev/null +++ b/src/common/css/common.css @@ -0,0 +1,1185 @@ +@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; + /* 4K 和超大屏幕 */ + /* 1920px 屏幕 */ + /* 1440px 屏幕 */ + /* 1024px 屏幕 */ + /* 768px 屏幕 */ + /* 480px 屏幕 */ + /* 375px 屏幕 */ +} + +@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: 12px; + } + ::-webkit-scrollbar-track { + background: #f1f1f1; + } + ::-webkit-scrollbar-thumb { + background: #c1c1c1; + } + ::-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; + /* 4K 和超大屏幕 */ + /* 1920px 屏幕 */ + /* 1440px 屏幕 */ + /* 1024px 屏幕 */ + /* 768px 屏幕 */ + /* 480px 屏幕 */ + /* 375px 屏幕 */ +} + +@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: 1200px; + 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; +} + +/* 产品详情页banner */ +.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); + } +} + +/* 产品、新闻用的loading */ +.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 new file mode 100644 index 0000000..5d8b5a1 --- /dev/null +++ b/src/common/css/common.min.css @@ -0,0 +1 @@ +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:12px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1}::-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}}.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:1200px;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 7287cd2..72ab317 100644 --- a/src/common/css/common.scss +++ b/src/common/css/common.scss @@ -131,42 +131,42 @@ img { vertical-align: middle; } -// 响应式根字体大小 +/* 响应式根字体大小 */ html { font-size: calc(100 * 100vw / 1920) !important; min-height: 100vh; - // 4K 和超大屏幕 + /* 4K 和超大屏幕 */ @media (min-width: 2560px) { font-size: calc(100 * 100vw / 2560) !important; } - // 1920px 屏幕 + /* 1920px 屏幕 */ @media (min-width: 1920px) and (max-width: 2559px) { font-size: calc(100 * 100vw / 1920) !important; } - // 1440px 屏幕 + /* 1440px 屏幕 */ @media (min-width: 1440px) and (max-width: 1919px) { font-size: calc(100 * 100vw / 1440) !important; } - // 1024px 屏幕 + /* 1024px 屏幕 */ @media (min-width: 1024px) and (max-width: 1439px) { font-size: calc(100 * 100vw / 1024) !important; } - // 768px 屏幕 + /* 768px 屏幕 */ @media (min-width: 768px) and (max-width: 1023px) { font-size: calc(100 * 100vw / 768) !important; } - // 480px 屏幕 + /* 480px 屏幕 */ @media (min-width: 480px) and (max-width: 767px) { font-size: calc(100 * 100vw / 480) !important; } - // 375px 屏幕 + /* 375px 屏幕 */ @media (max-width: 479px) { font-size: calc(100 * 100vw / 375) !important; } @@ -203,12 +203,10 @@ html, body { ::-webkit-scrollbar-track { background: #f1f1f1; - // border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #c1c1c1; - // border-radius: 4px; &:hover { background: #a8a8a8; @@ -222,7 +220,7 @@ image { max-width: 100%; } -// 通用布局类 +/* 通用布局类 */ .define-topBar__components { position: fixed; top: 0; @@ -240,85 +238,52 @@ image { } } -// 容器类 +// 统一容器类 .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; - // 4K 和超大屏幕 + /* 4K 和超大屏幕 */ @media (min-width: 2560px) { max-width: 1800px; padding: 0 80px; } + /* 1920px 屏幕 */ @media (min-width: 1920px) and (max-width: 2559px) { max-width: 1500px; padding: 0 60px; } + /* 1440px 屏幕 */ @media (min-width: 1440px) and (max-width: 1919px) { max-width: 1300px; padding: 0 40px; } + /* 1024px 屏幕 */ @media (max-width: 1024px) { padding: 0 30px; } + /* 768px 屏幕 */ @media (max-width: 768px) { padding: 0 20px; } + /* 480px 屏幕 */ @media (max-width: 480px) { padding: 0 16px; } + /* 375px 屏幕 */ @media (max-width: 375px) { padding: 0 12px; } } -// 容器类 -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 24px; - - // 4K 和超大屏幕 - @media (min-width: 2560px) { - max-width: 1800px; - padding: 0 80px; - } - - @media (min-width: 1920px) and (max-width: 2559px) { - max-width: 1500px; - padding: 0 60px; - } - - @media (min-width: 1440px) and (max-width: 1919px) { - max-width: 1300px; - padding: 0 40px; - } - - @media (max-width: 1024px) { - padding: 0 30px; - } - - @media (max-width: 768px) { - padding: 0 20px; - } - - @media (max-width: 480px) { - padding: 0 16px; - } - - @media (max-width: 375px) { - padding: 0 12px; - } -} - -// 动画系统 +/* 动画系统 */ .animationDH { opacity: 0; } @@ -338,7 +303,7 @@ image { -webkit-animation: 1s dh_buttom linear both; } -// 首页专用动画 +/* 首页专用动画 */ .dhLeft { -webkit-opacity: 0; transform: translate(75px, 0); @@ -370,7 +335,7 @@ image { -webkit-transition: 1s; } -// 动画延迟 +/* 动画延迟 */ .dhyc1 { transition-delay: 0.25s; -webkit-transition-delay: 0.25s; @@ -391,7 +356,7 @@ image { -webkit-transition-delay: 1s; } -// 动画关键帧 +/* 动画关键帧 */ @-webkit-keyframes dh_right { from { opacity: 0; @@ -492,27 +457,27 @@ image { animation: 1s dh_buttom linear both; -webkit-animation: 1s dh_buttom linear both; - &__title { - font-size: var(--text-5xl); - color: #fff; - text-align: center; - font-family: var(--font-medium); - } + &__title { + font-size: var(--text-5xl); + color: #fff; + text-align: center; + font-family: var(--font-medium); + } - &__subtitle { - font-size: var(--text-xl); - text-transform: uppercase; - font-family: var(--font-light); - } + &__subtitle { + font-size: var(--text-xl); + text-transform: uppercase; + font-family: var(--font-light); + } @media (min-width: 751px) and (max-width: 1100px) { - &__title { - font-size: var(--text-6xl); - } + &__title { + font-size: var(--text-6xl); + } - &__subtitle { - font-size: var(--text-3xl); - } + &__subtitle { + font-size: var(--text-3xl); + } } @media (max-width: 750px) { @@ -623,11 +588,11 @@ image { &__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; + padding: 0.1rem 0; + text-align: center; + font-size: var(--text-lg); + font-family: var(--font-normal); + cursor: pointer; @media (max-width: 1600px) { font-size: 15.5px; @@ -681,7 +646,7 @@ image { } } -// 粘性导航栏样式 +/* 粘性导航栏样式 */ .sticky-page-layout { position: relative; min-height: 100vh; @@ -720,7 +685,7 @@ image { width: 100%; &__center { - width: 9.8rem; + width: 1200px; @media (max-width: 1200px) { width: 100%; } @@ -825,7 +790,7 @@ image { } } -// 产品详情页banner +/* 产品详情页banner */ .detail-banner { width: 100%; height: 10.8rem; @@ -911,7 +876,7 @@ image { } } -// 产品、新闻用的loading +/* 产品、新闻用的loading */ .load-loading { display: flex; justify-content: center; @@ -961,7 +926,7 @@ image { } } -// 动画样式 +/* 动画样式 */ @mixin isAnimatingStyle { transform: translateY(11.71rpx); opacity: 0; @@ -971,7 +936,7 @@ image { @include isAnimatingStyle; } -// 字体工具类 +/* 字体工具类 */ .font-light { font-family: var(--font-light); } .font-normal { font-family: var(--font-normal); } .font-regular { font-family: var(--font-regular); } @@ -979,7 +944,7 @@ image { .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); } diff --git a/src/components/bottom/foot-bar.vue b/src/components/bottom/foot-bar.vue index c99a072..32f80cf 100644 --- a/src/components/bottom/foot-bar.vue +++ b/src/components/bottom/foot-bar.vue @@ -2,7 +2,8 @@ import { ref, reactive, onUnmounted, onMounted } from "vue"; import { useI18n } from "#imports"; import { GetMessageApi } from "@/service/api.js"; -import { useRouter, useRoute } from "#imports"; +import { useRoute } from "#imports"; +import { useNavigation } from "@/composables/useNavigation.js"; const { t } = useI18n(); import { GetProductCategoryApi } from "~/service/api.js"; //商品与新闻状态 @@ -10,8 +11,8 @@ import useSheller from "~/stores/seller.js"; // 语言判断 import langToCheck from "~/hook/lang.js"; const langIs = ref(langToCheck()); -const router = useRouter(); const route = useRoute(); +const { navigateTo } = useNavigation(); //页面跳转事件 const Store = useSheller(); const props = defineProps({ @@ -27,51 +28,30 @@ const subRouteEvent = (subParmas, item) => { switch (secondaryRoute) { case "Power Station": { Store.clickTab = 0; - router.push({ - name: "product", - query: { - CategoryId: 0, - }, - }); + navigateTo("product", { query: { CategoryId: 0 } }); break; } case "Solar Panel": { Store.clickTab = 1; - router.push({ - name: "product", - query: { - CategoryId: 1, - }, - }); + navigateTo("product", { query: { CategoryId: 1 } }); break; } case "Accessory": { Store.clickTab = 2; - router.push({ - name: "product", - query: { - CategoryId: 2, - }, - }); + navigateTo("product", { query: { CategoryId: 2 } }); break; } case "About Us": { - router.push({ - name: "about-us", - }); + navigateTo("about-us"); break; } case "Contact": { - router.push({ - name: "contact-us", - }); + navigateTo("contact-us"); break; } default: { // 产品分类跳转到首页对应分类 - router.push({ - name: "home", - }); + navigateTo("home"); break; } } @@ -163,9 +143,7 @@ const GoAgreement = (value) => { } case 4: { //网站隐私协议 - router.push({ - name: "privacy-policy", - }); + navigateTo("privacy-policy"); break; } case 5: { @@ -194,9 +172,7 @@ const TransitTap = (symbolName) => { // 接口 const goTab = (path) => { - router.push({ - name: path, - }); + navigateTo(path); }; @@ -312,13 +288,13 @@ $form-theme-color: #2164ff; } @media (min-width: 1920px) and (max-width: 2559px) { - max-width: 1500px; + max-width: 1200px; padding: 35px 50px 25px; gap: 50px; } @media (min-width: 1440px) and (max-width: 1919px) { - max-width: 1300px; + max-width: 1200px; padding: 30px 40px 20px; gap: 40px; } @@ -358,12 +334,12 @@ $form-theme-color: #2164ff; } @media (min-width: 1920px) and (max-width: 2559px) { - max-width: 1500px; + max-width: 1200px; padding: 0 50px; } @media (min-width: 1440px) and (max-width: 1919px) { - max-width: 1300px; + max-width: 1200px; padding: 0 40px; } @@ -583,37 +559,43 @@ $form-theme-color: #2164ff; gap: 25px; margin-left: 30px; - // 4K 和超大屏幕 + /* 4K 和超大屏幕 */ @media (min-width: 2560px) { gap: 40px; margin-left: 50px; } + /* 1920px 屏幕 */ @media (min-width: 1920px) and (max-width: 2559px) { gap: 35px; margin-left: 45px; } + /* 1440px 屏幕 */ @media (min-width: 1440px) and (max-width: 1919px) { gap: 30px; margin-left: 40px; } + /* 1024px 屏幕 */ @media (max-width: 1024px) { gap: 20px; margin-left: 25px; } + /* 768px 屏幕 */ @media (max-width: 768px) { margin-left: 0; gap: 15px; justify-content: center; } + /* 480px 屏幕 */ @media (max-width: 480px) { gap: 12px; } + /* 375px 屏幕 */ @media (max-width: 375px) { gap: 10px; } @@ -858,12 +840,12 @@ $form-theme-color: #2164ff; } @media (min-width: 1920px) and (max-width: 2559px) { - max-width: 1500px; + max-width: 1300px; padding: 0 50px; } @media (min-width: 1440px) and (max-width: 1919px) { - max-width: 1300px; + max-width: 1200px; padding: 0 40px; } diff --git a/src/components/top/title-bar.vue b/src/components/top/title-bar.vue index d4b352d..9b22e9d 100644 --- a/src/components/top/title-bar.vue +++ b/src/components/top/title-bar.vue @@ -1,14 +1,12 @@ diff --git a/src/pages/index.vue b/src/pages/index.vue index 1ae18c1..d234ecc 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -274,12 +274,12 @@ onMounted(() => { } @media (min-width: 1920px) and (max-width: 2559px) { - max-width: 1400px; + max-width: 1250px; padding: 0 40px; } @media (min-width: 1440px) and (max-width: 1919px) { - max-width: 1200px; + max-width: 1250px; padding: 0 30px; } diff --git a/src/pages/product/detail/index.vue b/src/pages/product/detail/index.vue index 8e24f5a..011a227 100644 --- a/src/pages/product/detail/index.vue +++ b/src/pages/product/detail/index.vue @@ -229,10 +229,10 @@ $tone-color: #fff; //字体主色调 @mixin detailWidth { - width: 9.8rem; + width: 1200px; @media (max-width: 1600px) { - width: 750px; + width: 1200px; } @media (max-width: 1000px) { diff --git a/src/pages/product/index.vue b/src/pages/product/index.vue index a39e493..be32c37 100644 --- a/src/pages/product/index.vue +++ b/src/pages/product/index.vue @@ -9,17 +9,17 @@ computed import topBar from "@/components/top/title-bar.vue" import footBar from "@/components/bottom/foot-bar.vue"; import { - useRouter, useRoute } from '#imports'; import { useI18n } from "#imports"; import { usePageTitle } from "@/composables/usePageTitle.js"; import { useImagePath } from "@/composables/useImagePath.js"; +import { useNavigation } from "@/composables/useNavigation.js"; - const router = useRouter(); const route = useRoute(); const { t } = useI18n(); const { cdnImageUrl } = useImagePath(); +const { navigateTo } = useNavigation(); // 设置页面标题 usePageTitle("page.product"); @@ -448,6 +448,44 @@ onActivated(() => { max-width: 1200px; margin: 0 auto; padding: 0 20px; + + /* 4K 和超大屏幕 */ + @media (min-width: 2560px) { + max-width: 1800px; + padding: 0 60px; + } + + /* 1920px 屏幕 */ + @media (min-width: 1920px) and (max-width: 2559px) { + max-width: 1200px; + padding: 0 50px; + } + + /* 1440px 屏幕 */ + @media (min-width: 1440px) and (max-width: 1919px) { + max-width: 1200px; + padding: 0 40px; + } + + /* 1024px 屏幕 */ + @media (max-width: 1024px) { + padding: 0 30px; + } + + /* 768px 屏幕 */ + @media (max-width: 768px) { + padding: 0 20px; + } + + /* 480px 屏幕 */ + @media (max-width: 480px) { + padding: 0 16px; + } + + /* 375px 屏幕 */ + @media (max-width: 375px) { + padding: 0 12px; + } } .breadcrumb-item { @@ -475,86 +513,97 @@ onActivated(() => { } } -.main-content { - .container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; - display: flex; - gap: 20px; - // 4K 和超大屏幕 - @media (min-width: 2560px) { - max-width: 1800px; - padding: 40px 60px; - gap: 40px; - } - @media (min-width: 1920px) and (max-width: 2559px) { - max-width: 1400px; - padding: 30px 40px; - gap: 30px; - } - - @media (min-width: 1440px) and (max-width: 1919px) { + .main-content { + .container { max-width: 1200px; - padding: 25px 30px; - gap: 25px; - } - - @media (max-width: 1024px) { - padding: 20px 24px; + margin: 0 auto; + padding: 20px; + display: flex; gap: 20px; - } - @media (max-width: 768px) { - flex-direction: column; - padding: 15px 20px; - gap: 20px; - } + /* 4K 和超大屏幕 */ + @media (min-width: 2560px) { + max-width: 1800px; + padding: 40px 60px; + gap: 40px; + } - @media (max-width: 480px) { - padding: 12px 16px; - gap: 16px; - } + /* 1920px 屏幕 */ + @media (min-width: 1920px) and (max-width: 2559px) { + max-width: 1200px; + padding: 30px 50px; + gap: 30px; + } - @media (max-width: 375px) { - padding: 10px 12px; - gap: 12px; + /* 1440px 屏幕 */ + @media (min-width: 1440px) and (max-width: 1919px) { + max-width: 1200px; + padding: 25px 40px; + gap: 25px; + } + + /* 1024px 屏幕 */ + @media (max-width: 1024px) { + padding: 20px 30px; + gap: 20px; + } + + @media (max-width: 768px) { + flex-direction: column; + padding: 15px 20px; + gap: 20px; + } + + @media (max-width: 480px) { + padding: 12px 16px; + gap: 16px; + } + + @media (max-width: 375px) { + padding: 10px 12px; + gap: 12px; + } } } -} .sidebar { - width: 260px; + width: 240px; flex-shrink: 0; - // 4K 和超大屏幕 + /* 4K 和超大屏幕 */ @media (min-width: 2560px) { - width: 380px; + width: 320px; } + /* 1920px 屏幕 */ @media (min-width: 1920px) and (max-width: 2559px) { - width: 330px; + width: 260px; } + /* 1440px 屏幕 */ @media (min-width: 1440px) and (max-width: 1919px) { - width: 300px; - } - - @media (max-width: 1024px) { width: 240px; } + /* 1024px 屏幕 */ + @media (max-width: 1024px) { + width: 220px; + } + + /* 768px 屏幕 */ @media (max-width: 768px) { width: 100%; margin-bottom: 20px; } + /* 480px 屏幕 */ @media (max-width: 480px) { margin-bottom: 16px; } + /* 375px 屏幕 */ @media (max-width: 375px) { margin-bottom: 12px; } @@ -752,51 +801,57 @@ onActivated(() => { .product-grid { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; + grid-template-columns: repeat(2, 1fr); + gap: 24px; margin-bottom: 30px; - // 4K 和超大屏幕 - @media (min-width: 2560px) { - grid-template-columns: repeat(4, 1fr); - gap: 30px; - margin-bottom: 50px; - } + /* 4K 和超大屏幕 */ + @media (min-width: 2560px) { + grid-template-columns: repeat(3, 1fr); + gap: 30px; + margin-bottom: 50px; + } - @media (min-width: 1920px) and (max-width: 2559px) { - grid-template-columns: repeat(4, 1fr); - gap: 25px; - margin-bottom: 40px; - } + /* 1920px 屏幕 */ + @media (min-width: 1920px) and (max-width: 2559px) { + grid-template-columns: repeat(3, 1fr); + gap: 25px; + margin-bottom: 40px; + } - @media (min-width: 1440px) and (max-width: 1919px) { - grid-template-columns: repeat(3, 1fr); - gap: 22px; - margin-bottom: 35px; - } + /* 1440px 屏幕 */ + @media (min-width: 1440px) and (max-width: 1919px) { + grid-template-columns: repeat(2, 1fr); + gap: 22px; + margin-bottom: 35px; + } - @media (max-width: 1024px) { - grid-template-columns: repeat(2, 1fr); - gap: 18px; - margin-bottom: 25px; - } + /* 1024px 屏幕 */ + @media (max-width: 1024px) { + grid-template-columns: repeat(2, 1fr); + gap: 18px; + margin-bottom: 25px; + } - @media (max-width: 768px) { - grid-template-columns: repeat(2, 1fr); - gap: 16px; - margin-bottom: 20px; - } + /* 768px 屏幕 */ + @media (max-width: 768px) { + grid-template-columns: repeat(2, 1fr); + gap: 16px; + margin-bottom: 20px; + } - @media (max-width: 480px) { - grid-template-columns: 1fr; - gap: 16px; - margin-bottom: 20px; - } + /* 480px 屏幕 */ + @media (max-width: 480px) { + grid-template-columns: 1fr; + gap: 16px; + margin-bottom: 20px; + } - @media (max-width: 375px) { - gap: 12px; - margin-bottom: 16px; - } + /* 375px 屏幕 */ + @media (max-width: 375px) { + gap: 12px; + margin-bottom: 16px; + } .product-card { background: #fff; @@ -837,7 +892,7 @@ onActivated(() => { } .product-info { - padding: 18px; + padding: 20px; .product-name { font-size: 16px; @@ -1040,9 +1095,7 @@ onActivated(() => { } } -// 响应式设计已在上面的具体组件中处理 - -// 弹框响应式 +/* 弹框响应式适配 */ @media (max-width: 768px) { .modal-content { .modal-body { diff --git a/src/pages/product/style/product-style.css b/src/pages/product/style/product-style.css new file mode 100644 index 0000000..c24421c --- /dev/null +++ b/src/pages/product/style/product-style.css @@ -0,0 +1,622 @@ +@charset "UTF-8"; +.scroll-height { + height: 100vh; +} + +.banner { + width: 100vw; + height: 5rem; + background: url("/static/product/goods__banner.webp") center center/cover; +} + +.banner__box { + font-size: 24px; + line-height: 5rem; +} + +.menu { + height: 0.5rem; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + background-color: #ffffff; + /* 1300px以下屏幕适配 */ +} + +@media (max-width: 1900px) { + .menu { + height: 55px; + } +} + +@media (max-width: 1300px) { + .menu { + height: 0.78rem; + padding: 0 0.6rem; + } +} + +.menu__container { + display: flex; + justify-content: space-between; + width: 10rem; +} + +@media (max-width: 1300px) { + .menu__container { + width: 15rem; + } +} + +@media (max-width: 599px) { + .menu__container { + width: 90%; + } +} + +.menu__container__left { + width: 1.6rem; +} + +.menu__container__box { + display: flex; + font-family: MiSans-Regular; + flex-basis: 65%; +} + +.menu__container__box__list { + height: auto; + padding: 0.12rem 0; + margin: 0 auto; + display: flex; + align-items: center; + color: #333333; +} + +.menu__container__box__list li { + padding: 0 .3rem; + height: auto; + line-height: 0.2rem; + border-right: 0.01rem solid #e5e5e5; + text-align: center; + cursor: pointer; +} + +.menu__container__box__list li:last-child { + border-right: none; +} + +.menu__container__box__list--Active { + color: #2164ff; +} + +.menu__container__dropdown { + min-width: 1.6rem; + height: inherit; + position: relative; + font-size: inherit; +} + +.menu__container__dropdown__selected { + width: inherit; + cursor: pointer; + position: relative; + border-left: 0.015rem solid #e5e5e5; + border-right: 0.015rem solid #e5e5e5; + height: 100%; + color: #333; + display: flex; + line-height: 0.45rem; + justify-content: space-between; + align-items: center; +} + +.menu__container__dropdown__selected__text { + min-width: 1.4rem; + text-align: center; + font-size: inherit; +} + +.menu__container__dropdown__selected__arrow { + width: 0.2rem; + height: inherit; +} + +.menu__container__dropdown__selected__arrow .iconfont { + font-weight: bold; + color: #333; + display: inline-block; + vertical-align: middle; + font-size: 10px; + line-height: inherit; + transition-property: transform; + transition-duration: 0.3s; + transition-timing-function: ease; + transform-origin: 50% 50%; +} + +.menu__container__dropdown__selected__arrow--down { + transform: rotate(180deg); +} + +.menu__container__dropdown__options { + position: absolute; + top: calc(100% + 5px); + left: 0; + width: 100%; + margin-top: 0; + padding: 0; + list-style: none; + background-color: #fff; + border-radius: 0.05rem; + box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1); + z-index: 800; + height: auto; + overflow-y: auto; + padding-bottom: 0.1rem; +} + +.menu__container__dropdown__options__item { + line-height: 2.7; + text-align: center; + cursor: pointer; + transition: background-color 0.3s; +} + +.menu__container__dropdown__options__item:hover { + background-color: #f0f0f0; +} + +@media (max-width: 1750px) { + .menu { + font-size: 0.17rem; + } +} + +@media (max-width: 1300px) { + .menu { + font-size: 0.22rem; + } + .menu__container__left { + display: none; + } + .menu__container__box { + flex-basis: 70%; + } + .menu__container__dropdown { + min-width: 2.2rem; + } + .menu__container__dropdown__selected__text { + min-width: 2rem; + } +} + +@media (max-width: 900px) { + .menu { + font-size: 0.3rem; + height: auto; + min-height: 1rem; + } + .menu__container__left { + display: none; + } + .menu__container__box { + flex-basis: 70%; + } + .menu__container__dropdown { + min-width: 3rem; + } +} + +@media (max-width: 800px) { + .menu { + font-size: 0.35rem; + height: auto; + min-height: 1rem; + } + .menu__container__left { + display: none; + } + .menu__container__box { + flex-basis: 70%; + } + .menu__container__dropdown { + min-width: 3.8rem; + } + .menu__container__dropdown__selected__text { + min-width: 3.6rem; + } +} + +@media (max-width: 600px) { + .menu { + font-size: 0.56rem; + height: 2rem; + padding: 0 0rem; + } + .menu__container { + display: flex; + flex-direction: column; + align-items: center; + height: 2rem; + } + .menu__container__box { + flex-basis: 100%; + margin: 0; + padding: 0; + height: inherit; + } + .menu__container__box__list { + padding: 0; + height: inherit; + width: 100%; + } + .menu__container__box__list li { + padding: 0 0.5rem; + line-height: 2rem; + font-size: 0.6rem; + letter-spacing: 0.02rem; + border-right: 0; + } + .menu__container__dropdown { + margin: 0.8rem auto 0 0; + width: 8.3rem; + float: right; + font-size: 0.56rem; + } + .menu__container__dropdown__selected { + background-color: #fff; + border: 1px solid #e5e5e5; + padding: 0.5rem; + } + .menu__container__dropdown__selected__text { + min-width: 6rem; + text-align: center; + padding-left: 1rem; + } + .menu__container__dropdown__selected__arrow { + width: 1rem; + } + .menu__container__dropdown__options { + font-size: 0.56rem; + width: 8.3rem; + box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1); + } + .menu__container__dropdown__options__item { + padding: 0.3rem 0.2rem; + } +} + +@media (max-width: 600px) { + .mobile-menu { + margin-bottom: 3rem; + } +} + +.goods { + min-height: 6rem; + margin: 0 auto; + height: auto; +} + +@media (max-width: 600px) { + .goods { + min-height: 13rem; + } +} + +.goods__product { + margin: 0.3rem auto 1rem; + width: 10rem; +} + +.goods__product__list { + display: flex; + flex-wrap: wrap; +} + +@media (max-width: 499px) { + .goods__product__list { + justify-content: space-between; + margin-bottom: 3rem; + min-height: 17rem; + } +} + +.goods__product__list__li { + flex-basis: 32.5%; + border-radius: 0.1rem; + background: #ffffff; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + height: 5rem; + margin-right: 1.2%; +} + +@media (min-width: 850px) { + .goods__product__list__li:nth-child(3n) { + margin-right: 0; + } + .goods__product__list__li:nth-child(n+4) { + margin-top: 1.2%; + } +} + +.goods__product__list__li__top { + height: 3.25rem; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.goods__product__list__li__top__avater-2 { + height: auto; + width: 80%; +} + +.goods__product__list__li__top__avater { + border-radius: 0.1rem 0.1rem 0 0; + width: 100%; + height: 3.25rem; + object-fit: contain; +} + +.goods__product__list__li__content { + display: flex; + flex-direction: column; + align-items: center; + font-family: MiSans-Medium; + width: 100%; +} + +.goods__product__list__li__content__box { + height: 1rem; + font-size: 0.2rem; + color: #333333; + line-height: 1.6; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 90%; +} + +.goods__product__list__li__content__box__title { + font-family: "Microsoft YaHei"; +} + +.goods__product__list__li__content__btn { + width: 1.1rem; + height: 0.4rem; + background: #1777ff; + border-radius: 0.26rem; + color: #ffffff; + line-height: 0.4rem; + font-size: 0.16rem; + cursor: pointer; + text-align: center; + font-family: MiSans-Regular; +} + +@media (max-width: 1300px) { + .goods__product__list__li__content__box { + font-size: 0.25rem; + margin-top: 5%; + } + .goods__product__list__li__content__btn { + font-size: 0.22rem; + margin: 0.3rem 0; + width: 1.5rem; + height: 0.5rem; + line-height: 0.5rem; + } +} + +@media (max-width: 1100px) { + .goods__product__list__li__content__box { + font-size: 0.3rem; + line-height: 1.7; + margin-top: 0rem; + } + .goods__product__list__li__content__btn { + font-size: 0.26rem; + margin: 0.3rem 0; + width: 1.8rem; + height: 0.5rem; + line-height: 0.5rem; + } +} + +@media (max-width: 849px) { + .goods__product__list__li__content__box { + font-size: 0.4rem; + } + .goods__product__list__li__content__btn { + font-size: 0.36rem; + margin: 0.8rem 0; + width: 2.6rem; + border-radius: 2rem; + height: 0.8rem; + line-height: 0.8rem; + } +} + +@media (max-width: 600px) { + .goods__product__list__li__content__box { + height: 2rem; + font-size: 0.55rem; + line-height: 1.7; + } + .goods__product__list__li__content__btn { + font-size: 0.45rem; + margin: 0.5rem 0; + width: 3rem; + border-radius: 2rem; + height: 1rem; + line-height: 1rem; + } +} + +@media (max-width: 499px) { + .goods__product__list__li__content__box { + font-size: 0.66rem; + } + .goods__product__list__li__content__btn { + font-size: 0.55rem; + margin: 0.5rem 0; + width: 4rem; + border-radius: 2rem; + height: 1.2rem; + line-height: 1.2rem; + } +} + +.goods__product__list__li--point { + cursor: default; +} + +@media (max-width: 1300px) { + .goods__product { + width: 15rem; + } + .goods__product__list { + width: inherit; + } + .goods__product__list__li { + height: 7.2rem; + } + .goods__product__list__li__top { + height: 4.5rem; + } +} + +@media (max-width: 1300px) and (max-width: 849px) { + .goods__product__list__li { + margin-right: 2.5%; + height: 9.5rem; + flex-basis: 47%; + } + .goods__product__list__li__top { + height: 6rem; + } + .goods__product__list__li:nth-child(n+3) { + margin-top: 2.5%; + } + .goods__product__list__li:nth-child(2n) { + margin-right: 0; + } +} + +@media (max-width: 1300px) and (max-width: 600px) { + .goods__product { + width: 90%; + } + .goods__product__list { + width: 100%; + margin-top: 1.5rem; + } + .goods__product__list__li { + height: 13rem; + flex-basis: 48%; + margin-right: 2%; + } + .goods__product__list__li:nth-child(n+3) { + margin-top: 4%; + } + .goods__product__list__li__top { + height: 8rem; + } +} + +.goods__product__page-num { + width: fit-content; + height: auto; + margin: 0.4rem auto 0.3rem; + display: flex; + justify-content: space-between; +} + +.goods__product__page-num__item { + width: 0.4rem; + height: 0.4rem; + font-size: 0.18rem; + text-align: center; + line-height: 0.4rem; + background-color: #ffffff; + cursor: pointer; + margin: 0 0.1rem; + border-radius: 50%; + border: 0.01rem solid #d0d0d0; + color: #000; +} + +.goods__product__page-num--active { + color: #fff; + background-color: #1777ff; + font-size: 0.18rem; +} + +.goods__product__page-num--grey { + color: #bfbfbf; + cursor: not-allowed; + color: #eee; + pointer-events: none; +} + +@media (max-width: 1024px) { + .goods__product__page-num { + width: fit-content; + height: 0.4rem; + margin: 0.4rem auto 0.6rem; + display: flex; + justify-content: space-between; + } + .goods__product__page-num__item { + width: 1rem; + height: 1rem; + font-size: 0.36rem; + text-align: center; + line-height: 1rem; + background-color: #ffffff; + cursor: pointer; + margin: 0 0.2rem; + border-radius: 50%; + color: #000; + } + .goods__product__page-num--active { + color: #fff; + background-color: #1777ff; + } + .goods__product__page-num--grey { + color: #bfbfbf; + border: 1px solid #bfbfbf; + cursor: not-allowed; + color: #eee; + pointer-events: none; + } +} + +@media (max-width: 1024px) and (max-width: 640px) { + .goods__product__page-num { + height: 1rem; + margin: 1rem auto 1rem; + } + .goods__product__page-num__item { + width: 1.2rem; + height: 1.2rem; + font-size: 0.5rem; + text-align: center; + line-height: 1.2rem; + } + .goods__product__page-num--active { + color: #fff; + line-height: 1.2rem; + background-color: #1777ff; + font-size: 0.5rem; + } +} diff --git a/src/pages/product/style/product-style.min.css b/src/pages/product/style/product-style.min.css new file mode 100644 index 0000000..78b8af8 --- /dev/null +++ b/src/pages/product/style/product-style.min.css @@ -0,0 +1 @@ +.scroll-height{height:100vh}.banner{width:100vw;height:5rem;background:url("/static/product/goods__banner.webp") center center/cover}.banner__box{font-size:24px;line-height:5rem}.menu{height:0.5rem;text-align:center;display:flex;align-items:center;justify-content:center;background-color:#ffffff}@media (max-width: 1900px){.menu{height:55px}}@media (max-width: 1300px){.menu{height:0.78rem;padding:0 0.6rem}}.menu__container{display:flex;justify-content:space-between;width:10rem}@media (max-width: 1300px){.menu__container{width:15rem}}@media (max-width: 599px){.menu__container{width:90%}}.menu__container__left{width:1.6rem}.menu__container__box{display:flex;font-family:MiSans-Regular;flex-basis:65%}.menu__container__box__list{height:auto;padding:0.12rem 0;margin:0 auto;display:flex;align-items:center;color:#333333}.menu__container__box__list li{padding:0 .3rem;height:auto;line-height:0.2rem;border-right:0.01rem solid #e5e5e5;text-align:center;cursor:pointer}.menu__container__box__list li:last-child{border-right:none}.menu__container__box__list--Active{color:#2164ff}.menu__container__dropdown{min-width:1.6rem;height:inherit;position:relative;font-size:inherit}.menu__container__dropdown__selected{width:inherit;cursor:pointer;position:relative;border-left:0.015rem solid #e5e5e5;border-right:0.015rem solid #e5e5e5;height:100%;color:#333;display:flex;line-height:0.45rem;justify-content:space-between;align-items:center}.menu__container__dropdown__selected__text{min-width:1.4rem;text-align:center;font-size:inherit}.menu__container__dropdown__selected__arrow{width:0.2rem;height:inherit}.menu__container__dropdown__selected__arrow .iconfont{font-weight:bold;color:#333;display:inline-block;vertical-align:middle;font-size:10px;line-height:inherit;transition-property:transform;transition-duration:0.3s;transition-timing-function:ease;transform-origin:50% 50%}.menu__container__dropdown__selected__arrow--down{transform:rotate(180deg)}.menu__container__dropdown__options{position:absolute;top:calc(100% + 5px);left:0;width:100%;margin-top:0;padding:0;list-style:none;background-color:#fff;border-radius:0.05rem;box-shadow:0 0.02rem 0.04rem rgba(0,0,0,0.1);z-index:800;height:auto;overflow-y:auto;padding-bottom:0.1rem}.menu__container__dropdown__options__item{line-height:2.7;text-align:center;cursor:pointer;transition:background-color 0.3s}.menu__container__dropdown__options__item:hover{background-color:#f0f0f0}@media (max-width: 1750px){.menu{font-size:0.17rem}}@media (max-width: 1300px){.menu{font-size:0.22rem}.menu__container__left{display:none}.menu__container__box{flex-basis:70%}.menu__container__dropdown{min-width:2.2rem}.menu__container__dropdown__selected__text{min-width:2rem}}@media (max-width: 900px){.menu{font-size:0.3rem;height:auto;min-height:1rem}.menu__container__left{display:none}.menu__container__box{flex-basis:70%}.menu__container__dropdown{min-width:3rem}}@media (max-width: 800px){.menu{font-size:0.35rem;height:auto;min-height:1rem}.menu__container__left{display:none}.menu__container__box{flex-basis:70%}.menu__container__dropdown{min-width:3.8rem}.menu__container__dropdown__selected__text{min-width:3.6rem}}@media (max-width: 600px){.menu{font-size:0.56rem;height:2rem;padding:0 0rem}.menu__container{display:flex;flex-direction:column;align-items:center;height:2rem}.menu__container__box{flex-basis:100%;margin:0;padding:0;height:inherit}.menu__container__box__list{padding:0;height:inherit;width:100%}.menu__container__box__list li{padding:0 0.5rem;line-height:2rem;font-size:0.6rem;letter-spacing:0.02rem;border-right:0}.menu__container__dropdown{margin:0.8rem auto 0 0;width:8.3rem;float:right;font-size:0.56rem}.menu__container__dropdown__selected{background-color:#fff;border:1px solid #e5e5e5;padding:0.5rem}.menu__container__dropdown__selected__text{min-width:6rem;text-align:center;padding-left:1rem}.menu__container__dropdown__selected__arrow{width:1rem}.menu__container__dropdown__options{font-size:0.56rem;width:8.3rem;box-shadow:0 0.02rem 0.1rem rgba(0,0,0,0.1)}.menu__container__dropdown__options__item{padding:0.3rem 0.2rem}}@media (max-width: 600px){.mobile-menu{margin-bottom:3rem}}.goods{min-height:6rem;margin:0 auto;height:auto}@media (max-width: 600px){.goods{min-height:13rem}}.goods__product{margin:0.3rem auto 1rem;width:10rem}.goods__product__list{display:flex;flex-wrap:wrap}@media (max-width: 499px){.goods__product__list{justify-content:space-between;margin-bottom:3rem;min-height:17rem}}.goods__product__list__li{flex-basis:32.5%;border-radius:0.1rem;background:#ffffff;display:flex;flex-direction:column;align-items:center;cursor:pointer;height:5rem;margin-right:1.2%}@media (min-width: 850px){.goods__product__list__li:nth-child(3n){margin-right:0}.goods__product__list__li:nth-child(n+4){margin-top:1.2%}}.goods__product__list__li__top{height:3.25rem;width:100%;display:flex;justify-content:center;align-items:center}.goods__product__list__li__top__avater-2{height:auto;width:80%}.goods__product__list__li__top__avater{border-radius:0.1rem 0.1rem 0 0;width:100%;height:3.25rem;object-fit:contain}.goods__product__list__li__content{display:flex;flex-direction:column;align-items:center;font-family:MiSans-Medium;width:100%}.goods__product__list__li__content__box{height:1rem;font-size:0.2rem;color:#333333;line-height:1.6;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;width:90%}.goods__product__list__li__content__box__title{font-family:"Microsoft YaHei"}.goods__product__list__li__content__btn{width:1.1rem;height:0.4rem;background:#1777ff;border-radius:0.26rem;color:#ffffff;line-height:0.4rem;font-size:0.16rem;cursor:pointer;text-align:center;font-family:MiSans-Regular}@media (max-width: 1300px){.goods__product__list__li__content__box{font-size:0.25rem;margin-top:5%}.goods__product__list__li__content__btn{font-size:0.22rem;margin:0.3rem 0;width:1.5rem;height:0.5rem;line-height:0.5rem}}@media (max-width: 1100px){.goods__product__list__li__content__box{font-size:0.3rem;line-height:1.7;margin-top:0rem}.goods__product__list__li__content__btn{font-size:0.26rem;margin:0.3rem 0;width:1.8rem;height:0.5rem;line-height:0.5rem}}@media (max-width: 849px){.goods__product__list__li__content__box{font-size:0.4rem}.goods__product__list__li__content__btn{font-size:0.36rem;margin:0.8rem 0;width:2.6rem;border-radius:2rem;height:0.8rem;line-height:0.8rem}}@media (max-width: 600px){.goods__product__list__li__content__box{height:2rem;font-size:0.55rem;line-height:1.7}.goods__product__list__li__content__btn{font-size:0.45rem;margin:0.5rem 0;width:3rem;border-radius:2rem;height:1rem;line-height:1rem}}@media (max-width: 499px){.goods__product__list__li__content__box{font-size:0.66rem}.goods__product__list__li__content__btn{font-size:0.55rem;margin:0.5rem 0;width:4rem;border-radius:2rem;height:1.2rem;line-height:1.2rem}}.goods__product__list__li--point{cursor:default}@media (max-width: 1300px){.goods__product{width:15rem}.goods__product__list{width:inherit}.goods__product__list__li{height:7.2rem}.goods__product__list__li__top{height:4.5rem}}@media (max-width: 1300px) and (max-width: 849px){.goods__product__list__li{margin-right:2.5%;height:9.5rem;flex-basis:47%}.goods__product__list__li__top{height:6rem}.goods__product__list__li:nth-child(n+3){margin-top:2.5%}.goods__product__list__li:nth-child(2n){margin-right:0}}@media (max-width: 1300px) and (max-width: 600px){.goods__product{width:90%}.goods__product__list{width:100%;margin-top:1.5rem}.goods__product__list__li{height:13rem;flex-basis:48%;margin-right:2%}.goods__product__list__li:nth-child(n+3){margin-top:4%}.goods__product__list__li__top{height:8rem}}.goods__product__page-num{width:fit-content;height:auto;margin:0.4rem auto 0.3rem;display:flex;justify-content:space-between}.goods__product__page-num__item{width:0.4rem;height:0.4rem;font-size:0.18rem;text-align:center;line-height:0.4rem;background-color:#ffffff;cursor:pointer;margin:0 0.1rem;border-radius:50%;border:0.01rem solid #d0d0d0;color:#000}.goods__product__page-num--active{color:#fff;background-color:#1777ff;font-size:0.18rem}.goods__product__page-num--grey{color:#bfbfbf;cursor:not-allowed;color:#eee;pointer-events:none}@media (max-width: 1024px){.goods__product__page-num{width:fit-content;height:0.4rem;margin:0.4rem auto 0.6rem;display:flex;justify-content:space-between}.goods__product__page-num__item{width:1rem;height:1rem;font-size:0.36rem;text-align:center;line-height:1rem;background-color:#ffffff;cursor:pointer;margin:0 0.2rem;border-radius:50%;color:#000}.goods__product__page-num--active{color:#fff;background-color:#1777ff}.goods__product__page-num--grey{color:#bfbfbf;border:1px solid #bfbfbf;cursor:not-allowed;color:#eee;pointer-events:none}}@media (max-width: 1024px) and (max-width: 640px){.goods__product__page-num{height:1rem;margin:1rem auto 1rem}.goods__product__page-num__item{width:1.2rem;height:1.2rem;font-size:0.5rem;text-align:center;line-height:1.2rem}.goods__product__page-num--active{color:#fff;line-height:1.2rem;background-color:#1777ff;font-size:0.5rem}} diff --git a/src/pages/product/style/product-style.scss b/src/pages/product/style/product-style.scss index 8fcc5f9..d8650f9 100644 --- a/src/pages/product/style/product-style.scss +++ b/src/pages/product/style/product-style.scss @@ -154,6 +154,7 @@ @media (max-width:1750px) { font-size: 0.17rem; } + /* 1300px以下屏幕适配 */ @media (max-width:1300px) { font-size: 0.22rem; &__container{ diff --git a/src/pages/thanks/index.vue b/src/pages/thanks/index.vue index 846198d..01a430f 100644 --- a/src/pages/thanks/index.vue +++ b/src/pages/thanks/index.vue @@ -4,13 +4,13 @@ onBeforeMount } from "vue"; import { - useRoute, - useRouter + useRoute } from "#imports"; import { useI18n } from "vue-i18n"; import langToCheck from "@/hook/lang.js"; + import { useNavigation } from "@/composables/useNavigation.js"; const { t @@ -25,10 +25,10 @@ langIs.value = langToCheck() }) - const router = useRouter(); const route = useRoute(); + const { goHome } = useNavigation(); const BackToMenu = () => { - router.push("/"); + goHome(); }