opms_wechat/frontend_mobile/pages/my/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-16 17:52:26
 * @Description: file content
 * @FilePath: \opms\pages\my\index.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" v-if="showBack" @click="$refs.manage.back()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>我的</text>
        </view>
        <view class="user-info flex flex-middle">
          <image class="user-img" src="@/static/images/user.jpg" mode="scaleToFill" />
          <view class="info flex1 flex-column flex_1">
            <u-text :lines="1" size="32rpx" color="#fff" :bold="true" text="销售工程师"></u-text>
            <u-text :lines="1" size="24rpx" color="#fff" text="西南地区销售工程师"></u-text>
          </view>
          <u-icon name="arrow-right" color="#ffffff" size="18"></u-icon>
        </view>
      </view>
    </view>
    <view class="main">
      <u-row>
        <u-col span="12">
          <view class="my-menu-item flex flex-middle">
            <image class="menu-icon" src="@/static/images/my-menu1.png" mode="scaleToFill" />
            <view class="flex_1"><u-text size="28rpx" color="#646464" text="我的资料"></u-text></view>
            <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="my-menu-item flex flex-middle">
            <image class="menu-icon" src="@/static/images/my-menu2.png" mode="scaleToFill" />
            <view class="flex_1"><u-text size="28rpx" color="#646464" text="企业信息"></u-text></view>
            <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="my-menu-item flex flex-middle">
            <image class="menu-icon" src="@/static/images/my-menu3.png" mode="scaleToFill" />
            <view class="flex_1"><u-text size="28rpx" color="#646464" text="意见反馈"></u-text></view>
            <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="my-menu-item flex flex-middle">
            <image class="menu-icon" src="@/static/images/my-menu4.png" mode="scaleToFill" />
            <view class="flex_1"><u-text size="28rpx" color="#646464" text="关于应用"></u-text></view>
            <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>
<script>
  export default {
    name: 'opsIndex',
    data() {
      return {
        height: '',
        paddingTop: '',
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      console.log(navData)
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    mounted() {},
    methods: {},
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 520rpx;
      background: #3e7ef8;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
      }
      .user-info {
        padding: 40rpx 76rpx 0 66rpx;
        display: flex;
        .user-img {
          width: 116rpx;
          height: 116rpx;
          border-radius: 50%;
          margin-right: 32rpx;
        }
        .info {
          height: 116rpx;
          margin-right: 32rpx;
        }
      }
    }

    .main {
      position: absolute;
      top: 374rpx;
      width: 100%;
      height: calc(100vh - 374rpx);
      background: #ffffff;
      border-radius: 31rpx 31rpx 0 0;
      overflow: auto;
      padding: 18rpx 38rpx 64rpx 26rpx;
      .my-menu-item {
        padding: 28rpx 44rpx;
        border-bottom: 1px solid #cdcdcd;
        .menu-icon {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          margin-right: 25rpx;
        }
      }
    }
  }
</style>