<template>
  <view class="content">
	  <!-- 新增image -->
	  <!-- #ifdef MP-WEIXIN -->
	<image src="../../static/banner_bg02.png"  class="top-banner-background"></image>
    <!--  #endif -->
	<view class="top-banner">
      <view class="user-view">
        <img class="avater" src="@/static/logo.png" />
        <text class="name-text">乐小班</text>
      </view>
    </view>
    <view class="list-view">
      <view class="list-item-view">
        <navigator url="/pages/my/child/my-child" open-type="navigate" hover-class="navigator-hover">
          <view class="item">
            <img class="item-icon" src="@/static/leban_my_icon_child.png" />
            <text class="item-text">我的小孩</text>
            <img class="item-right-icon" src="@/static/banner_info_d.png" />
          </view>
        </navigator>
      </view>

      <view class="list-item-view">
        <navigator url="/pages/my/order/my-order" open-type="navigate" hover-class="navigator-hover">
          <view class="item">
            <img class="item-icon" src="@/static/leban_my_icon_dd.png" />
            <text class="item-text">订单</text>
            <img class="item-right-icon" src="@/static/banner_info_d.png" />
          </view>
        </navigator>
      </view>

      <view class="list-item-view">
        <view class="item">
          <img class="item-icon" src="@/static/leban_my_icon_kefu.png" />
          <text class="item-text">在线客服</text>
          <img class="item-right-icon" src="@/static/banner_info_d.png" />
        </view>
      </view>

      <view class="list-item-view">
        <view class="item">
          <img class="item-icon" src="@/static/leban_my_icon_yijian.png" />
          <text class="item-text">意见反馈</text>
          <img class="item-right-icon" src="@/static/banner_info_d.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  components: {},
  data: () => ({}),
  computed: {},
  methods: {},
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  // 页面处理函数--监听用户上拉触底
  onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  /* onPageScroll(event) {}, */
  // 页面处理函数--用户点击右上角分享
  /* onShareAppMessage(options) {}, */
};
</script>

<style>
.top-banner {
  background: url('@/static/banner_bg02.png');
  height: 325rpx;
}
/* 微信小程序的上面那个background不生效 */
.top-banner-background{
	position: fixed;
	width: 100%;
}
.avater {
  border-radius: 50%;
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto;
  }
.user-view {
  position: absolute;  
  top: 100rpx;
  width: 100%;
  height: 120rpx;
  left: 40rpx;
  bottom: 0;
  right: 0;
}
.name-text{
  height: 110%;
  font-size: 36rpx;
  font-weight: bold;
  color: #FFFFFF;
  display: inline-block;
  margin-left: 37rpx;
  width: 70%;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;  /*超出宽度部分隐藏*/
  text-overflow: ellipsis;  /*超出部分以点号代替*/
}
.list-view {
  width: 100%;
  background: #FFF;
  border-radius: 50rpx 50rpx 0rpx 0rpx;
  height: fit-content;
  position: relative;
  top: -50rpx;
}
.list-item-view {
  padding-top: 50rpx;
}
.item {
  height: 80rpx;
  width: 100%;
  margin-left: 50rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.item-icon {
  width: 45rpx;
  height: 45rpx;
  margin-right: 36rpx;
  display: inline-block;
  vertical-align: middle;
}
.item-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  display: inline-block;
  vertical-align: middle;
}
.item-right-icon {
  position: absolute;
  right: 50rpx;
  padding-top: 10rpx;
  width: 16rpx;
  height: 28rpx;
  display: inline-block;
  vertical-align: middle;
}
</style>
