opms_wechat/pages/message/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-02 10:10:50
 * @Description: file content
 * @FilePath: \crm\pages\message\index.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <text>消息</text>
        </view>
      </view>
    </view>
    <!-- <view class="main">
      <u-row>
        <u-col span="12">
          <view class="menu-item">
            <view>
              <image class="menu-img" src="@/static/images/msg-menu1.png" mode="scaleToFill" />
            </view>
            <view class="flex_1">
              <u-text :lines="1" size="28rpx" color="#323232" bold="true" text="提醒消息"></u-text>
              <u-text :lines="1" size="24rpx" color="#969696" text="舒晨发起一个《工单》指定您处理"></u-text>
            </view>
            <view class="msg-count">5</view>
            <view class="menu-icon">
              <u-icon name="arrow-right" color="#CDCDCD" size="18"></u-icon>
            </view>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="menu-item">
            <view>
              <image class="menu-img" src="@/static/images/msg-menu2.png" mode="scaleToFill" />
            </view>
            <view class="flex_1">
              <u-text :lines="1" size="28rpx" color="#323232" bold="true" text="提醒消息"></u-text>
              <u-text :lines="1" size="24rpx" color="#969696" text="舒晨发起一个《工单》指定您处理"></u-text>
            </view>
            <view class="msg-count">5</view>
            <view class="menu-icon">
              <u-icon name="arrow-right" color="#CDCDCD" size="18"></u-icon>
            </view>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="menu-item">
            <view>
              <image class="menu-img" src="@/static/images/msg-menu3.png" mode="scaleToFill" />
            </view>
            <view class="flex_1">
              <u-text :lines="1" size="28rpx" color="#323232" bold="true" text="提醒消息"></u-text>
              <u-text :lines="1" size="24rpx" color="#969696" text="舒晨发起一个《工单》指定您处理"></u-text>
            </view>
            <view class="msg-count">5</view>
            <view class="menu-icon">
              <u-icon name="arrow-right" color="#CDCDCD" size="18"></u-icon>
            </view>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="menu-item">
            <view>
              <image class="menu-img" src="@/static/images/msg-menu4.png" mode="scaleToFill" />
            </view>
            <view class="flex_1">
              <u-text :lines="1" size="28rpx" color="#323232" bold="true" text="提醒消息"></u-text>
              <u-text :lines="1" size="24rpx" color="#969696" text="舒晨发起一个《工单》指定您处理"></u-text>
            </view>
            <view class="msg-count">5</view>
            <view class="menu-icon">
              <u-icon name="arrow-right" color="#CDCDCD" size="18"></u-icon>
            </view>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="menu-item">
            <view>
              <image class="menu-img" src="@/static/images/msg-menu5.png" mode="scaleToFill" />
            </view>
            <view class="flex_1">
              <u-text :lines="1" size="28rpx" color="#323232" bold="true" text="提醒消息"></u-text>
              <u-text :lines="1" size="24rpx" color="#969696" text="舒晨发起一个《工单》指定您处理"></u-text>
            </view>
            <view class="msg-count">5</view>
            <view class="menu-icon">
              <u-icon name="arrow-right" color="#CDCDCD" size="18"></u-icon>
            </view>
          </view>
        </u-col>
      </u-row>
    </view> -->
  </view>
</template>
<script>
  export default {
    name: 'opsIndex',
    data() {
      return {
        height: '',
        paddingTop: '',
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    mounted() {},
    methods: {},
  }
</script>
<style>
  page {
    background: #ffffff;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background: #ffffff;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #000;
      }
    }

    .main {
      position: absolute;
      width: 100%;
      background: #ffffff;
      padding: 40rpx 32rpx 0;
      overflow: auto;
      padding-bottom: 64rpx;
      .menu-item {
        display: flex;
        align-items: center;
        padding: 20rpx 24rpx;
        background: #f2f3f5;
        border-radius: 16rpx;
        margin-bottom: 32rpx;
        .menu-img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
        .msg-count {
          width: 38rpx;
          height: 32rpx;
          background: rgba(62, 126, 248, 0.2);
          border-radius: 20rpx 50% 50% 0;
          font-size: 20rpx;
          text-align: center;
          line-height: 32rpx;
          color: #3e7ef8;
          margin: 0 18rpx 0 16rpx;
        }
      }
    }
  }
</style>