ClassContent/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/39.css

body {
    width: 100%;
    height: 100%;
    background-image: url(../img/39/background.png);
    background-size: cover;
}

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.37rem 0.37rem 0rem 0.37rem;
    position: fixed;
    z-index: 999;
    box-sizing: border-box;
    top: 0;
}

.header .picture {
    width: 0.43rem;
    height: 0.43rem;
}

.header div {
    display: flex;
    flex-direction: column;
}

.header .font {
    display: flex;
}

.header ul li {
    font-size: 0.3rem;
    color: #fefefe;
    text-shadow: 0.03rem 0.05rem 0.03rem rgb(0 0 0 / 74%);
    margin-right: 0.23rem;
    position: relative;
}

.header ul .active::after {
    content: " ";
    background-image: url(../img/39/underli.png);
    position: absolute;
    bottom: -0.1rem;
    left: 50%;
    transform: translate(-50%);
    width: 0.35rem;
    height: 0.02rem;
}

.content {
    display: flex;
    width: 100%;
    height: calc(100vh - 1rem);
    position: relative;
}

.left {
    position: absolute;
    bottom: 0;
    left: 0.37rem
}

.left .top {
    margin-bottom: 0.22rem;
    display: flex;
    align-items: center;
}

.left .top img {
    width: 0.28rem;
    height: 0.26rem;
    margin-right: 0.1rem;
}

.left .top span {
    font-family: PingFangSC-Regular;
    font-size: 0.26rem;
    color: #ffc600;
}

.left .top span:last-child {
    padding-left: 0.3rem
}

.left .middle {
    width: 5.65rem;
    height: 1.68rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding-left: 0.09rem;
}

.left .middle .tupian {
    width: 1.48rem;
    height: 1.48rem;
}

.left .middle .right {
    margin-left: 0.15rem;
}

.left .middle .right span,
.left .middle .right .xia .price span {
    font-family: PingFang-SC-Bold;
    font-size: 0.28rem;
    color: #333333;
}

.left .middle .right .xia {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 0.2rem
}

.left .middle .right .xia div {}

.left .middle .right .xia .price {
    display: flex;
    align-items: center;
    margin-bottom: 0.14rem;
}


.left .middle .right .xia .price .red {
    width: 0.6rem;
    height: 0.24rem;
    background-color: #ea4e3d;
    border-radius: 0.12rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.left .middle .right .xia .price .red span {
    font-family: PingFang-SC-Regular;
    font-size: 0.2rem;
    color: #fffefe;
    zoom: 0.8
}

.left .middle .right .xia div span {
    font-family: PingFang-SC-Medium;
    font-size: 0.2rem;
    color: #626262;
    display: block
}

.left .middle .right .shop {
    width: 0.46rem;
    height: 0.46rem;
}

.left .bottom {
    display: flex;
    align-items: center;
    margin-top: 0.27rem;
    margin-bottom: 0.13rem;
}

.left .bottom img {
    width: 0.27rem;
    height: 0.28rem;
    margin-right: 0.13rem;
}

.left .bottom span {
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    color: #ffffff;
}


.content .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
}

.content .user .touxiang {
    position: relative;
}

.content .user .touxiang img {
    width: 0.96rem;
    height: 0.97rem;
}

.content .user .touxiang img:last-child {
    width: 0.34rem;
    height: 0.33rem;
    position: absolute;
    left: 0.34rem;
    bottom: -0.165rem;
}

.content .user ul {
    margin-bottom: 0.14rem;
    margin-left: 0.39rem;
    margin-right: 0.35rem;
    margin-top: 0.1rem;
}

.content .user ul li {
    margin-top: 0.32rem;
}

.content .user ul li a {
    display: flex;
    flex-direction: column;
    align-items: center
}

.content .user ul li a img {
    width: 0.68rem;
    height: 0.63rem;
    margin-bottom: 0.1rem;
}

.content .user ul li a span {
    font-family: SourceHanSansCN-Regular;
    font-size: 0.2rem;
    color: #ffffff;
}












.fooder {
    width: 100%;
    height: 1rem;
    position: fixed;
    z-index: 999;
    background-color: #000000;
    padding-left: 0.39rem;
    padding-right: 0.54rem;
    display: flex;
    bottom: 0;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}


.fooder li {
    font-family: SourceHanSansCN-Regular;
    font-size: 0.24rem;
    color: #ffffff;
    position: relative;
}

.fooder li:first-child {
    font-family: AdobeHeitiStd-Regular;
    font-size: 0.3rem;
    color: #ffffff;
}

.fooder .active::after {
    content: " ";
    position: absolute;
    width: 0.51rem;
    height: 0.03rem;
    background: #fff;
    left: 50%;
    transform: translate(-50%);
    bottom: -50%;
}