website-client-Nigeria/src/components/bottom/style/foot-bar.scss

    $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;
            }
        }
    }