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 @@
@@ -88,44 +86,7 @@ const goTab = (path) => {
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();
}