odoo 引入自定義css樣式

首先效果圖：

 

定義Form頁面

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <record id="myquality_iqcbasesetup_form" model="ir.ui.view">
            <field name="name">myquality.iqcbasesetup.form</field>
            <field name="model">myquality.iqcbasesetup</field>
            <field name="type">form</field>
            <field name="arch" type="xml">
                <form string="IQC基本參數維護">
                        <div class="iqcmain">
                            <div class='iqcheader'>
                                <span class="iqcspanleft">CR</span>
                                <span class="iqcspanmid">MA</span>
                                <span class="iqcspanright">MI</span>
                            </div>
                            <div class='iqcfenzi'>
                                <span class="iqcfenziline">分子</span>
                                <field name="cr_numerator" class="iqcfenziline" nolabel="1"/>
                                <field name="ma_numerator" class="iqcfenziline" nolabel="1"/>
                                <field name="mi_numerator" class="iqcfenziline" nolabel="1"/>
                            </div>
                            <div class='iqcfenmu'>
                                <span class="iqcfenmuline">分母</span>
                                <field name="cr_denominator" class="iqcfenmuline" nolabel="1"/>
                                <field name="ma_denominator" class="iqcfenmuline" nolabel="1"/>
                                <field name="mi_denominator" class="iqcfenmuline" nolabel="1"/>
                            </div>
                            <br/>
                            <div class="iqczh">
                                <field name="module_myquality_is_iqctrans"/>
                                <label for="is_iqctrans" string="是否進行IQC檢驗規則轉換"/>
                                <br/>
                                <br/>
                                <span class="iqczhspan">連續</span>
                                <field name="nortoinc_1" class="iqczhval" nolabel="1"/>
                                <span>中有</span>
                                <field name="nortoinc_2" class="iqczhval_01" nolabel="1"/>
                                <span>批退貨，則由正常檢驗轉換為增量檢驗</span>
                                <br/>
                                <span class="iqczhspan">連續</span>
                                <field name="inctonor" class="iqczhval" nolabel="1"/>
                                <span>批合格,則由增量檢驗轉正常檢驗</span>
                                <br/>
                                <span class="iqczhspan">連續</span>
                                <field name="nortoredu" class="iqczhval" nolabel="1"/>
                                <span>批合格,則由正常檢驗轉減量檢驗</span>
                                <br/>
                                <span class="iqczhspan">連續</span>
                                <field name="redutonor" class="iqczhval" nolabel="1"/>
                                <span>批退貨,則由減量檢驗轉正常檢驗</span>
                                <br/>
                                <span class="iqczhspan">連續</span>
                                <field name="redutonochk" class="iqczhval" nolabel="1"/>
                                <span>批合格,則由減量檢驗轉免檢</span>
                                <br/>
                                <span class="iqczhspan">連續</span>
                                <field name="inctoun" class="iqczhval" nolabel="1"/>
                                <span>批增量,則由增量檢驗轉除名</span>
                                <br/>
                            </div>
                        </div>
                </form>
            </field>
        </record>
    </data>
</odoo>

引入css文件：再模塊目錄下創建static/css文件夾，並寫好css

.iqcmain{
    width: 600px;
    margin: auto;
}

.iqcspanleft{
    margin-left: 70px;
}

.iqcspanmid{
    margin-left: 120px;
}

.iqcspanright{
    margin-left: 120px;
}



.iqcfenziline{
    /*display: inline;*/
    width: 120px;
    margin-left: 5px;
    text-align: center;
    border: 2px black solid;
    background-color: darkgrey;
}

.iqcfenmuline{
    /*display: inline;*/
    width: 120px;
    margin-left: 5px;
    text-align: center;
    border: 2px black solid;
    background-color: darkgrey;
}


.iqczhspan{
    display: inline;
    width: 20px;
}

.iqczhval{
    /*display: inline;*/
    width: 50px;
    margin-left: 40px;
    text-align: center;
    border: 2px black solid;
    background-color: darkgrey;
}

.iqczhval_01{
    /*display: inline;*/
    width: 50px;
    margin-left: 10px;
    text-align: center;
    border: 2px black solid;
    background-color: darkgrey;
}

然后再vlews視圖下面創建iqcbasecss.xml,引入編寫的css靜態文件

<!--加載css與js資源 -->
<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend" name="myiqcbase_view_assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" type="text/css" href="/myquality/static/css/iqcbase.css"/>
            </xpath>
        </template>
    </data>
</odoo>

然后再__manifest__.xml文件中引入上一步創建的iqcbasecss.xml即可

 

完整的文件目錄結構如下：