h5-shangjinyaojiang/component/popover/index.vue

<template>
  <view>
    <u-popup v-model="isShow" mode="center" width="698rpx" :height="height" :custom-style="{ 'background': 'transparent' }">
      <view class="content">
<!--        <view class="bkg">-->
<!--          <u-image mode="scaleToFill" width="698rpx" height="100%" :src="require('@/static/popover-bkg.png')"></u-image>-->

<!--        </view>-->

        <view class="icon">
          <u-image bg-color="transparent" mode="aspectFit" width="184rpx" height="180rpx" :src="getIcon"></u-image>
        </view>

        <view class="box">
          <view class="close">
            <view>
              <u-icon @click="hidden" name="close" :size="34" style="margin-left: 28rpx"></u-icon>
            </view>
          </view>

          <view class="flowers">
            <u-image bg-color="transparent" :width="460" :height="100" :src="require('@/static/flowers.png')"></u-image>
          </view>


          <scroll-view class="box-text" :scroll-y="true" @touchmove.stop>
            <slot name="box-content"></slot>
          </scroll-view>
        </view>
      </view>

      <view class="content-bottom">
        <slot name="content-bottom"></slot>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    icon: String,
    height: String
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    }
  },
  computed: {
    getIcon() {
      let map = new Map([
        ['laugh', require('@/static/laugh.png')],
        ['smile', require('@/static/smile.png')],
        ['sad', require('@/static/sad.png')],
        ['frown', require('@/static/frown.png')]
      ])

      return map.get(this.icon)
    }
  }
}
</script>

<style lang="scss">
.content {
  background: transparent;

  position: relative;

  & .icon {
    background: transparent;

    transform: translateX(-50%);
    z-index: 4;
    position: absolute;
    left: 50%;
  }

  & .box {
    width: calc(100% - 40rpx);
    background: #fff;
    border-radius: 66rpx;

    z-index: 2;
    padding-top: 106rpx;
    padding-bottom: 100rpx;
    position: relative;
    left: 20rpx;
    top: 104rpx;

    &::before {
      content: '';
      background: #FED45F;
      border-radius: 66rpx;
      filter: drop-shadow(0 0 4rpx rgba(0, 0, 0, .2));

      z-index: -1;
      position: absolute;
      inset: -18rpx -18rpx -18rpx -18rpx;
    }
    &::after {
      content: '';
      background: #fff;
      border-radius: 66rpx;
      border: 1rpx solid #927B66;
      box-shadow: 10rpx 8rpx 0rpx 0rpx rgba(52,170,95,0.32);

      z-index: 1;
      position: absolute;
      inset: 0 0 0 0;
    }

    & .close {
      height: 88rpx;
      width: 98rpx;
      border-top-right-radius: 66rpx;
      overflow: hidden;

      z-index: 4;
      position: absolute;
      top: 2rpx;
      right: 2rpx;

      & > view {
        display: flex;
        align-items: center;

        height: 100%;
        background: #FED45F;
        border-top-left-radius: 100rpx;
        border-bottom-left-radius: 100rpx;
        width: 200rpx;
        font-size: 34rpx;
        color: #fff;
      }
    }
    & .flowers {
      border-bottom-left-radius: 66rpx;
      overflow: hidden;

      z-index: 2;
      position: absolute;
      bottom: 2rpx;
      left: 2rpx;
    }
    &-text {
      width: calc(100% - 32rpx - 32rpx);
      max-height: 46vh;
      overflow: scroll;

      z-index: 3;
      position: relative;
      margin: 0 32rpx 0rpx 32rpx;
    }
  }
}
.content-bottom {

  z-index: 2;
  position: relative;
  top: 118rpx;
}
.bkg {

  position: absolute;
  top: 104rpx;
  left: 0;
  right: 0;
  bottom: 0;
}

::v-deep .u-mode-center-box {
  background: transparent!important;
}
</style>