<template>
  <view class="mask">
    <view class="content bg-white">
      <view class="flex items-center head">
        <view class="text-xs">活动规则</view>
        <view class="iconbar" @click="$emit('close')">
          <image class="icon" src="../../static//images/error.png" />
        </view>
      </view>
      <view class="p-16 text-xs text-4e text-center ">
        {{ props.rules }}
      </view>
      <view class="flex items-center">
        <button class="btn" @click="$emit('close')">我知道了</button>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  rules: String,
});

const emit = defineEmits(["close"]);
</script>

<style lang="scss" scoped>
.mask {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.content {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 59%;
  padding: 16px;
  border-radius: 8px;
  overflow: hidden;
  .head {
    position: relative;
    justify-content: center;
    padding-bottom: 6px;
    border-bottom:  1px solid #f0f0f0;
  }
  .iconbar {
    position: absolute;
    right: 0px;
    .icon {
      width: 20px;
      height: 20px;
    }
  }
  .btn {
    width: 60px;
    height: 24px;
    line-height: 24px;
    padding: 0px !important;
    margin: 0 auto;
    font-size: 12px;
    border-radius: 4px !important;
    box-shadow: 1px 0.4px 1px #888;
    background-color: #182c5f;
		color: #fff;
  }
}
</style>
