<template>
  <div class="testPage">
    <div class="dybgArea">
      <Dybg
        ref="dybg"
        :blur="blur"
        :circleMode="circleMode"
        :circleColor="circleColor"
        :bg="bg"
      >
        <div class="dyContent">
          <div>
            <h2>DYBG</h2>
            <p>-- 动态背景 --</p>
          </div>
        </div>
      </Dybg>
    </div>
  </div>
</template>
<script>
export default {
  name: "testPage",
  data() {
    return {
      blur: 5, //小圆模糊值,0/不传则不模糊
      bg: "background-image:linear-gradient(to right, #ec6e66, #ff4a57);", //背景颜色，可当style属性写任何样式，必须以;结尾
      circleMode: "color-dodge", //css3 mixBlendMode参数
      circleColor: "rgba(237,185,59,0.2)", //移动的小圆颜色，为数组时，会随机分配给小圆
    };
  },
  onPullDownRefresh(){
    this.$refs.dybg.creatCircle();
  },
  created() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.textPage {
  height: 100vh;
  overflow: hidden;
}
.dybgArea {
  height: 600rpx;
  .dyContent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    h2 {
      text-align: center;
      font-size: 50rpx;
      font-weight: lighter;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 8rpx 8rpx rgba(0,0,0,0.2);
    }
    p {
      font-size: 30rpx;
      color: rgba(255, 255, 255, 0.5);
      text-shadow: 0 4rpx 4rpx rgba(0,0,0,0.1);
    }
  }
}
</style>