$samll-color: #626262; $foot-bottom-color: #999; .page { background-color: #f4f4f4 !important; @mixin titleStyle { font-size: 0.2rem; font-family: MiSans-Medium; color: #343434; line-height: 2.8; @media (min-width:1900px) { font-size: 0.17rem; } @media (max-width:1600px) { font-size: 0.23rem; } @media (min-width:1024px) and (max-width:1450px) { font-size: 0.26rem; } } @mixin samllStyle { cursor: pointer; color: $samll-color; line-height: 2.5; letter-spacing: 0.01rem; font-size: 0.17rem; font-family: MiSans-Normal; transition: .3s; @media (min-width:1900px) { font-size: 0.16rem; } @media (max-width:1600px) { font-size: 0.2rem; } @media (min-width:1024px) and (max-width:1450px) { font-size: 0.22rem; } &:hover { color: #2164ff; } } // 头部 .foot { color: #343434; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; @media (max-width:1024px) { width: 100%; } .foot-flex{ display: flex; } .foot-top { padding: 20px 0; width: 100%; text-align: left; &__list { display: flex; justify-content: space-between; width: inherit; &__Item { &:nth-child(3){ width: 19% } &:last-child{ margin-top: 0 } @media (max-width:1600px) { &:nth-child(3){ width: 24%; // border: 1px solid #fff; } } &__title { @include titleStyle; } &__small { @include samllStyle; } &__small-2 { @include samllStyle; line-height: 1.6; } } &__marginTop{ .foot-top__list__Item{ &:last-child{ width: 26%; } } } } } //末尾 .foot-bottom { color: $foot-bottom-color; padding: 10px 0 15px; font-size: 0.19rem; width: 100%; @media (min-width:1900px) { font-size: 0.15rem; } @media (max-width:1600px) { font-size: 0.21rem; } @media (min-width:1024px) and (max-width:1450px) { font-size: 0.25rem; } &__box { display: flex; justify-content: space-between; margin: 0 auto; @media (max-width:1450px) { flex-direction: column; align-items: center; } &__content { &__text { display: inline-block; } &__text2 { cursor: pointer; @media (min-width:1024px) { &:hover { border-bottom: 0.01rem solid $foot-bottom-color; } } } } } text { color: $foot-bottom-color; } } } } @media (max-width:1024px) { @mixin mobileFontSize { font-family: MiSans-Medium; font-size: 13px; margin: 0.1rem 0; line-height: 3.5; padding: 0 0.4rem; cursor: pointer; @media (max-width:750px) { // font-size: 0.4rem; } @media (max-width:650px) { padding: 0 0.6rem; // font-size: 0.5rem; } @media (max-width:500px) { // padding: 0 0.8rem; font-size: 0.6rem; } } .mobile-foot { padding: 20px 0 0; &__col { width: 100%; font-family: MiSans-Normal; cursor: pointer; color: #343434; &__item { &__title { position: relative; display: flex; justify-content: space-between; border-bottom: 1px solid #4d4d4d; padding: 0 0.5rem; &__text { @include mobileFontSize; } .icon-arrow { display: inline-block; vertical-align: middle; background-repeat: no-repeat; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease; transform-origin: 50% 50%; &--active { transform: rotate(90deg); } } &__icon { display: inline-block; vertical-align: middle; background-repeat: no-repeat; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease; transform-origin: 50% 50%; margin: 0.12rem 0px; @include mobileFontSize; &--active { transform: rotate(90deg); } } } // 主体 &__content { color: #626262; height: 0; overflow: hidden; transition: height .5s ease-in-out; &__list { padding: 0.3rem 0.8rem; color: #626262; &__element { @include mobileFontSize; line-height: 2.5; text-align: left; @media (min-width:1025px) { &:hover { color: #2164ff; } } } } &--active { height: auto; } } } } } //末尾 .foot-bottom { color: $foot-bottom-color; padding: 15px 0 20px; line-height: 1.6; border-top: 1px solid #2a2a2a; width: 100%; min-height: auto; &__box { justify-content: space-between; margin: 0 auto; &__content { text-align: center; font-size: 15px; &__text { cursor: pointer; } &__text2 { cursor: pointer; } @media (max-width:800px) { display: flex; flex-direction: column; justify-content: center; line-height: 1.8; letter-spacing: 0; font-size: 12px; padding: 15px 0 20px; &__space{ @media (max-width:800px) { display: none; } } } } } text { color: $foot-bottom-color; } } }