登录页添加粒子联结特效

1.1 预期效果

登录页出现粒子特效，粒子间通过线条动态联结，移动鼠标会聚集粒子，鼠标点击页面会按顺序显示社会主义核心价值观，效果如下图所示：

1.2 实现思路

安装 决策平台注入代码插件 ，修改登录页代码进而实现粒子联结特效。

2.1 安装插件

点击下载插件：决策平台注入代码插件

设计器插件安装方法参见：设计器插件管理

服务器安装插件方法参见：服务器插件管理

注1：设计器内插件管理页面搜索的插件名称与插件市场不一致，设计器内安装插件请搜索：统计代码。

注2：插件安装后需要重启FR才能生效。

2.2 插入代码

插件安装并重启设计器后，登录决策系统，选择管理系统>系统管理>登录界面JS配置，在Head前、Html结束前分别插入代码，点击保存按钮，

注意：配置最下面还有一个管理后台js配置，如果不清楚如何使用保持为空！！！

如下图所示：

Head前代码如下：

<style>
.text-popup {
    animation: textPopup 1s;
    color: red;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: 99;
}
@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);    
    }
}
</style>

<script>
var fnTextPopup = function (arr, options) {
    // arr参数是必须的
    if (!arr || !arr.length) {
        return;    
    }
    // 主逻辑
    var index = 0;
    document.documentElement.addEventListener('click', function (event) {
        var x = event.pageX, y = event.pageY;
        var eleText = document.createElement('span');
        eleText.className = 'text-popup';
        this.appendChild(eleText);
        if (arr[index]) {
            eleText.innerHTML = arr[index];
        } else {
            index = 0;
            eleText.innerHTML = arr[0];
        }
        // 动画结束后删除自己
        eleText.addEventListener('animationend', function () {
            eleText.parentNode.removeChild(eleText);
        });
        // 位置
        eleText.style.left = (x - eleText.clientWidth / 2) + 'px';

   eleText.style.top = (y - eleText.clientHeight) + 'px';
        // index递增
        index++;
    });    
};

fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);
</script>

HTML结束前代码如下：

<script  color="0,0,255" opacity='0.7'  count="99"   src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js"></script>

2.3 效果预览

注销当前登录的账号，返回决策系统登录页，效果如1.1预期效果中所示。

2.4 清除特效

如果想清除特效恢复到默认登录页，只需要删除代码点击保存按钮即可。

注意如果因为错误配置导致无法进入系统，或者看不到配置界面，可以使用数据库工具连接FINE DB 删除“fine_conf_entity”表中的GaConfig.ga,GaConfig.ge,GaConfig.gc 这三条记录，并重启帆软即可恢复。