bn-q-icon/pages/my/index.vue

<template>
  <view class="my-box">
    <Nav title="我的" :left-show="false"  titleColor="#D9E4F6"></Nav>
    <view class="content">
      <view class="user-box" >
        <image class="user-box-left" src="/static/img/icon/logo.png" mode=""></image>
        <view class="user-box-right">
          <view class="user-box-right-one">
            张啥的境况
          </view>
          <view class="user-box-right-two">
           一级会员
          </view>
        </view>
      </view>
      <view class="more-function">
        更多功能
      </view>
      <view class="function-box">
        <view class="function-box-list" >
          <view class="function-box-list-left">
            <view class="function-box-list-left-two">
              操作中心
            </view>
          </view>
          <image class="function-box-list-right" src="@/static/img/my/jrimg.png" mode=""></image>
        </view>
        <view class="function-box-list" >
          <view class="function-box-list-left">
            <view class="function-box-list-left-two">
              操作中心
            </view>
          </view>
          <image class="function-box-list-right" src="@/static/img/my/jrimg.png" mode=""></image>
        </view>
        <view class="function-box-list" >
          <view class="function-box-list-left">
            <view class="function-box-list-left-two">
              操作中心
            </view>
          </view>
          <image class="function-box-list-right" src="@/static/img/my/jrimg.png" mode=""></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  components: {},
  props: {},
  data() {
    return {}
  },
  watch: {},
  mounted() {

  },
  methods: {}
}
</script>

<style scoped lang="scss">
.my-box{
  background: #131E30;
  min-height: calc(100vh - 50px);
  .content {
    width: 100%;
    height: auto;
    padding: 60rpx 32rpx 0;
    box-sizing: border-box;

    .user-box {
      display: flex;
      align-items: center;
      margin: 0 0 34rpx 0;

      .user-box-left {
        width: 124rpx;
        height: 124rpx;
        border-radius: 50%;
        margin: 0 20rpx 0 0;
      }

      .user-box-right {
        .user-box-right-one {
          max-width: 320rpx;
          font-size: 40rpx;
          color:  #D9E4F6;
          font-weight: 600;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }

        .user-box-right-two {
          font-size: 20rpx;
          padding: 2rpx 8rpx;
          background: #3169FA;
          border-radius: 3px;
          display: inline;
          color: #FFFFFF;
        }
      }
    }


    .more-function {
      padding: 0 0 0 32rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #D9E4F6;
      margin: 0 0 26rpx 0;
    }

    .function-box {
      width: 100%;
      height: auto;
      background: #061623;
      border-radius:16rpx;
      padding: 52rpx 26rpx 0;
      box-sizing: border-box;

      .function-box-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 56rpx 0;
        border-bottom: 1rpx solid #D9E4F6;
        margin: 0 0 54rpx 0;

        .function-box-list-left {
          display: flex;
          align-items: center;

          .function-box-list-left-one {
            width: 40rpx;
            height: 40rpx;
            margin: 0 12rpx 0 0;
          }

          .function-box-list-left-two {
            font-size: 32rpx;
            color: #D9E4F6;
          }
        }

        .function-box-list-right {
          width: 44rpx;
          height: 44rpx;
          display: block;
        }
      }
      .function-box-list:last-child{
        border:none;
      }
    }
  }
}
</style>