<template>
  <view class="con-body">
    <view class="con-bg">
      <customHeader ref="customHeaderRef" :title="'计划表'" :leftFlag="true">
      </customHeader>
      <!-- #ifdef H5 -->
      <view style="height:50rpx"></view>
      <!-- #endif -->

      <!-- 高度来避免头部遮挡 -->
      <view class="top-height"></view>

      <view class="white-bg">
        <navigator url="/pages/business/CRM/plan/myPlan">
          <view class="list-item item-padding">
            <img class="l-icon" :src="'static/images/business/icon-zfsp.png'"/>
            <text>我的计划</text>
            <view class="list-right">
              <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
            </view>
          </view>
        </navigator>
        <view class="item-border"></view>
        <navigator url="/pages/business/CRM/plan/planView">
          <view class="list-item item-padding">
            <img class="l-icon" :src="'static/images/business/icon-jhck.png'"/>
            <text>计划查看</text>
            <view class="list-right">
              <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import customHeader from '@/components/customHeader.vue'
import {getNavBarPaddingTop} from '@/utils/system.js'
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})
</script>

<style scoped>

.head-pic .head-right img {
  display: block;
  width: 28rpx;
  height: 25rpx;
  margin-left: auto;
  margin-top: 2px;
}

.backlog-b-item img {
  width: 90rpx;
  height: 90rpx;
  margin: 0 auto 10rpx;
  display: block;
}

.white-bg {
  width: 590rpx; /*690*/
  padding: 30rpx 50rpx;
}

.list-item {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  border-radius: 8rpx;
}

.list-item.item-padding {
  padding: 45rpx 0;
}

.list-item.item-padding:first-child {
  padding-top: 20rpx;
}

.list-item.item-padding:last-child {
  padding-bottom: 20rpx;
}

.item-border {
  height: 1px;
  background-color: #E7E7E7;
  width: 640rpx;
}

.list-item .l-icon {
  width: 90rpx;
  height: 90rpx;
  margin-right: 20rpx;
}

.list-item .list-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

</style>