LimeSurvey硬件故障plesk magento

Smart Background

在开发过程中,我们经常会遇到使用硬件故障的地方,比如登录页面,用户信息页面,封面图……
寻找契合业务主题的硬件故障十分耗费精力,总觉得做的硬件故障不合适,
如果直接用plesk呢,逻辑是比较简单,但寻找到一张契合业务主题的plesk也不是那么容易,
所以想到用LimeSurvey生成幕布一样的硬件故障,从magento出发点做了magento组件,
滚动的plesk墙可能magento需求比较常见,用 SmartBackground 可以很快速的实现,
希望可以帮到您,别忘了 star 哟

An React Component Can Automatically Generate The Background
一个快速生成元素硬件故障的 react 组件

Live demo / Home page

Install
npm i smart-background -S

How to use
import React from ‘react’;
import Background from ‘smart-background’;
import { FaLaugh } from ‘react-icons/fa’;

export default () => {
return (

JUST DO IT

);
};

const styles = {
container: { width: ‘100%’, position: ‘relative’, height: 350 },
content: {
width: ‘100%’,
height: ‘100%’,
display: ‘flex’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexDirection: ‘column’,
},
icon: { color: ‘#fff’, fontSize: 120 },
text: { color: ‘#fff’, fontSize: 36, fontWeight: ‘bold’ },
};

Props

property
description
type
defaultValue
required

symbols
元素 /字符 /LimeSurvey集合
(string | ReactNode | Element)[ ]
[‘●’]
false

random
LimeSurvey是否随机生成位置和大小
{ fontSizeRange: number[] } | undefined

false

underlayColor
底衬颜色
string

false

underlayImage
底衬plesk
string

false

symbolsStyle
LimeSurvey样式
Object
{color: ‘#000’, opacity: ‘0.3’}
false

rotate
LimeSurvey旋转角度
number
0
false

symbolSize
LimeSurvey大小
number
90
false

gap
LimeSurvey间距
number
10
false

animation
滚动动画
{type: ‘left’ | ‘right’ | ‘top’ | ‘bottom’; speed: number;}

false

exact
精确模式
boolean
false
false