YNEduApp/pages/user/user.vue

<template>
	<view class="page">
    <view class="user-edit">
      <view class="user-avatar">
        <image src="/static/avatar.jpg"></image>
      </view>
      <view class="user-info">
        <span style="font-size: 24px">马晓峰</span>
        <span style="font-size: 12px; color: #8A8A8B">云南送变电培训中心</span>
      </view>
      <view class="edit-btn">
        <view>修改资料</view>
      </view>
    </view>
    <view class="learn-infos">
      <view>
        <span>{{ learnStats.selfLearn }}</span>
        <span>我的自学</span>
      </view>
      <view>
        <span>{{ learnStats.totalHrs }}</span>
        <span>累计学时</span>
      </view>
      <view>
        <span>{{ learnStats.totalCer }}</span>
        <span>已获证书</span>
      </view>
    </view>
    <view class="secs">
      <view
          class="single-sec"
          v-for="(item, index) in secList"
          :key="item.id"
          @click="jumpUrl(item.path)"
      >
        <view class="lef-icon">
          <image :src="item.src"></image>
        </view>
        <view style="margin-left: 2vw">{{ item.title }}</view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        // 信息参数
        learnStats: {
          selfLearn: 17,
          totalHrs: 218,
          totalCer: 26
        },
        secList: [
          { id: 1, title: '切换门户', src: '/static/changeGate.png', path: 'changeGate' },
          { id: 2, title: '人脸识别', src: '/static/faceScan.png', path: 'faceScan' },
          { id: 3, title: '我的消息', src: '/static/myMsg.png', path: 'myMsg' },
          { id: 4, title: '设置', src: '/static/settings.png', path: 'settings' },
        ]
			}
		},
		methods: {
      jumpUrl(path) {
        uni.navigateTo({
          url: `/pages/user/${path}`
        })
      }
		}
	}
</script>

<style lang="scss">

  .page{

    width: 100vw;
    height: 100vh;
    background: linear-gradient(#EAF0F7, #F8F8F8);
    box-sizing: border-box;
    padding: 15vh 8vw;

    .user-edit{

      width: 100%;
      height: 10vh;
      display: flex;
      margin-bottom: 3vh;

      .user-avatar{

        width: 25%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;

        image{

          width: 100%;
          height: 100%;

        }

      }

      .user-info{

        width: 50%;
        height: 100%;
        box-sizing: border-box;
        padding: 5%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

      }

      .edit-btn{

        flex: 1;
        display: flex;

        view{

          width: 100%;
          height: 35%;
          background: linear-gradient(90deg, #6DCDFA, #4BA2F9);
          color: #fff;
          margin: auto;
          border-radius: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;

        }

      }

    }

    .learn-infos{

      width: 100%;
      height: 12vh;
      background: #fff;
      border-radius: 15rpx;
      box-shadow: #F1F1F2 2px 2px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 2vh;

      view{

        width: 25%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        span:first-child{

          font-size: 20px;
          font-weight: bold;

        }

        span:last-child{

          font-size: 12px;
          color: #767676;

        }

      }

    }

    .secs{

      width: 100%;
      background-color: #fff;
      border-radius: 15rpx;
      box-sizing: border-box;
      padding: 4vh 3vw;
      color: #727272;

      .single-sec{

        width: 100%;
        box-sizing: border-box;
        padding: 10px 0;
        font-size: 14px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F6F6F6;

        .lef-icon{

          width: 5%;
          height: 2vh;

          image{

            width: 100%;
            height: 100%;

          }

        }

      }

    }

  }

</style>