Odoo14修改登录界面，实现炫酷粒子效果

原登录界面

最终效果

实现步骤

插件下载

原登录界面

最终效果

实现步骤

1 odoo创建插件web_login

2 在static目录下编写css和js文件

html,
body {position:fixed;top:0px;left:0px;height:100%;width:100%;/*Fallback if gradeints don't work */background: #141e6e;/*Linear gradient... */background: radial-gradient(at center, #0075c3, #000b61);
}.apImgTitle {position: fixed;width: 42%;left: 30%;top: 30%;
}.apTitle {font-size: 40px;color: #fff;position: fixed;top: 32%;width: 100%;text-align: center;
}.logcon {
position: fixed;width: 100%;top: 47%;text-align: center;
}.logcon input {padding: 10px 15px;border-radius: 3px;border: none;margin-right: 10px;width: 220px;
}.logcon button {padding: 7px 20px 10px 20px;border: none;background: #fff;border-radius: 3px;
}.logcon button:hover {cursor: pointer;
}canvas {display: block;vertical-align: bottom;
}#particles-js {width: 100%;height: 100%;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;width: 100%;height: 100%;position: absolute;top: 0;left: 0;
}

GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles

3 编写修改登录页面的xml文件webclient_templates.xml并在__manifest__.py文件中引用

<?xml version="1.0" encoding="utf-8"?>
<odoo><template id="web_login.login_layout" inherit_id="web.login_layout"><xpath expr="//div[@t-if='not disable_footer']" position="replace"><div class="text-center" t-if="not disable_footer"></div></xpath><xpath expr="//div[@class='container py-5']" position="before"><div id="particles-js" style="display: flex;align-items: center;justify-content: center"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="472" height="625"></canvas></div></xpath></template><template id="web_login.auth_signup" inherit_id="web.login"><xpath expr="//label[@for='login']" position="replace"><label for="login">账号</label></xpath><xpath expr="//input[@name='login']" position="replace"><input type="text" placeholder="账号" name="login" t-att-value="login" id="login" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" autofocus="autofocus" autocapitalize="off"/></xpath><xpath expr="//button[@type='submit']/parent::*/div[1]" position="replace"><div></div></xpath><xpath expr="//t[@t-if='debug']" position="replace"></xpath><xpath expr="//form[@class='oe_login_form']" position="before"><h1 style="text-align: center;font-size: 2.1em;color: #3AADAA;">粒子效果</h1></xpath></template><template id="web_login.frontend_layout" inherit_id="web.frontend_layout"><xpath expr="//head/link[last()]" position="after"><link rel="stylesheet" href="/web_login/static/src/css/login.css"/></xpath></template><template id="web_login.layout" inherit_id="web.layout"><xpath expr="//body" position="after"><script type="text/javascript" src="/web_login/static/src/js/login.js"></script><script type="text/javascript" src="/web_login/static/src/js/loginApp.js"></script></xpath></template><template id="web_login.webclient_bootstrap" inherit_id="web.webclient_bootstrap"><xpath expr="//t[@t-set='body_classname']" position="after"><div id="particles-js" style="display: none;"><canvas class="particles-js-canvas-el" style="display: none;" width="1" height="1"></canvas></div></xpath></template>
</odoo>

4 安装插件并运行