@charset "utf-8"; //font $bg-color:#f8f9fa; // 全局背景色 $tag-bg:#f2f2fa; // 标签背景色 $highlight-color: #f0f0f0; // 弱线分割 $grey-color: #efefef; // 列表分隔 $grey-border-bottom: 1px solid $highlight-color; // 列表底部分隔线 $red:#ff5c5c; // 品牌色 $black202020:#202020; // 大黑 $black7a7a7a:#7a7a7a; // 中黑 $blackafafaf:#afafaf; // 灰 $efefef:#efefef; $f0f0f0:#f0f0f0; // 我的界面嵌套样式css // 头部个人消息 .top_info{ width: 100%; background-color: #fff; background-image: url('../static/img/bg-me.png'); background-repeat: no-repeat; background-size: 100%; margin-bottom: 1rem; height: auto; .user_info{ padding: 1rem 0.5rem; padding-left: 2rem; padding-top: 6rem; h2{ width: 6rem; height: 6rem; border-radius: 50%; float: left; margin-right: 1rem; display:flex; align-items:center; } h2 img{ width: 100%; } div{ float: left; // display:flex; align-items:center; p{ display: block; color: #fff; } } } // end:头像姓名结束 // 会员尊享 .verify{ border-radius: 0.8rem; padding:0 1rem; margin: 0 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); background-color: #fff; height: 6rem; line-height: 6rem; position: relative; margin-top: 1rem; p{ color: #d4ae5b; font-size: 1.8rem; font-weight: bold; padding-left: 3rem; &::after{ content: ''; display: block; position: absolute; width: 2.2rem; height: 2.2rem; left: 1rem; top: 50%; margin-top: -1.1rem; background-image: url('../static/img/icon_V.png'); background-repeat: no-repeat; background-size: 100%; } } a{ padding: 0 0.8rem; border-radius: 0.5rem; color: #fff; font-weight: bold; height: 3rem; line-height: 3rem; position: absolute; top: 50%; right: 2rem; margin-top: -1.5rem; font-size: 1.5rem; } } // end:会员尊享结束 .real_name{ padding-left: 1.5rem; background-color: #fff; } } // 菜单列表 .menu-list{ margin-bottom: 1rem; background-color: #fff; li{ position: relative; height: 5.5rem; line-height: 5.5rem; z-index: 99; padding-left: 1.5rem; &:last-child::after{ height: 0; } &::after{ content: ''; display: block; background-color: $efefef; position: relative; height: 0.05rem; left: 0; right: 0; } img{ width: 2.2rem; height: 2.2rem; position: absolute; top: 50%; margin-top: -1.1rem; } a{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba($color: #000000, $alpha: 0); z-index: 100; } p{ padding-left: 3rem; // &::before{ // content: ''; // display: block; // background-color: pink; // position: absolute; // width: 2.2rem; // height: 2.2rem; // left: 0; // top: 50%; // margin-top: -1.1rem; // } &::after{ content: ''; display: block; position: absolute; width: 0.6rem; height: 1.2rem; right: 1.5rem; top: 50%; margin-top: -0.6px; background-image: url('../static/img/arr_back_next.png'); background-repeat: no-repeat; background-size: 100%; } } } }