ng_notes_mini/components/share-modal/share-modal.vue

<template>
		<view class="mask-share-box" v-if="isShowShare">
			<image src="/static/share-arrow.png" mode="aspectFit" :style="{ 'margin-top': isFirstPage ? '15%' : '0' }"></image>
			<view :style="{ 'margin-top': isFirstPage ? '30%' : '15%' }">点击右上角分享至支部群</view>
			<button @click="closeShare">关闭</button>
		</view>
</template>

<script>
export default {
  name: "share-modal",
  props: {
    isShowShare: {
      type: Boolean,
      default: false,
    },
	isFirstPage: {
	  type: Boolean,
	  default: false,
	},
  },
  data() {
    return {};
  },
  methods: {
    closeShare() {
      this.$emit("closeShare",'success');
    },
  },
};
</script>

<style lang="scss" scoped>
	.mask-share-box{
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		background-color: rgba(0,0,0,.7);
		  image {
			width: 100rpx;
			height: 100rpx;
			float: right;
			margin-right: 15%;
		  }
		  view {
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			margin: 15% 0 70% 15%;
			font-weight: bold;
		  }
		  button {
			  width: 200rpx;
			  font-size: 26rpx;
			  position: fixed;
			  bottom: 35%;
			  left: 37%;
			  background: transparent;
			  color: #fff;
			  border: 1px solid #fff;
		  }
	}
</style>