You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< 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);" , //背景颜色， ，
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 : 100 vh ;
overflow : hidden ;
}
. dybgArea {
height : 600 rpx ;
. dyContent {
width : 100 % ;
height : 100 % ;
display : flex ;
justify - content : center ;
align - items : center ;
h2 {
text - align : center ;
font - size : 50 rpx ;
font - weight : lighter ;
color : rgba ( 255 , 255 , 255 , 0.9 ) ;
text - shadow : 0 8 rpx 8 rpx rgba ( 0 , 0 , 0 , 0.2 ) ;
}
p {
font - size : 30 rpx ;
color : rgba ( 255 , 255 , 255 , 0.5 ) ;
text - shadow : 0 4 rpx 4 rpx rgba ( 0 , 0 , 0 , 0.1 ) ;
}
}
}
< / style >
