refactor: dark theme 3-part layout with filler scrollable content
This commit is contained in:
parent
55b84f5fe8
commit
58f427d530
291
wwwroot/index.ui
291
wwwroot/index.ui
@ -3,149 +3,246 @@
|
||||
"options": {
|
||||
"width": "100%",
|
||||
"height": "100%",
|
||||
"padding": "20px",
|
||||
"bgcolor": "#F5F5F5"
|
||||
"padding": "0",
|
||||
"bgcolor": "#0B1120"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"widgettype": "HBox",
|
||||
"options": {
|
||||
"text": "供销链管理",
|
||||
"fontSize": "24px",
|
||||
"fontWeight": "bold",
|
||||
"color": "#333333",
|
||||
"marginBottom": "20px"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "供应商、合同、二级分销商、分销协议及供销记账",
|
||||
"fontSize": "14px",
|
||||
"color": "#666666",
|
||||
"marginBottom": "24px"
|
||||
}
|
||||
"width": "100%",
|
||||
"alignItems": "center",
|
||||
"padding": "16px 24px",
|
||||
"marginBottom": "0"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Title2",
|
||||
"options": {
|
||||
"text": "供销链管理",
|
||||
"color": "#F1F5F9",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Filler"
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "供应商、合同、二级分销商与记账管理",
|
||||
"fontSize": "14px",
|
||||
"color": "#64748B"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "ResponsableBox",
|
||||
"options": {
|
||||
"gap": "16px",
|
||||
"minWidth": "250px"
|
||||
"gap": "12px",
|
||||
"minWidth": "180px",
|
||||
"padding": "0 24px 16px 24px"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"options": {
|
||||
"bgcolor": "#FFFFFF",
|
||||
"padding": "20px",
|
||||
"bgcolor": "#1E293B",
|
||||
"padding": "16px 24px",
|
||||
"borderRadius": "8px",
|
||||
"cursor": "pointer",
|
||||
"boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
|
||||
"border": "1px solid #334155",
|
||||
"cursor": "pointer"
|
||||
},
|
||||
"binds": [{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {"url": "{{entire_url('suppliers.ui')}}"},
|
||||
"mode": "replace"
|
||||
}],
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {
|
||||
"url": "{{entire_url('suppliers.ui')}}"
|
||||
},
|
||||
"mode": "replace"
|
||||
}
|
||||
],
|
||||
"subwidgets": [
|
||||
{"widgettype": "Text", "options": {"text": "🏭", "fontSize": "32px", "textAlign": "center"}},
|
||||
{"widgettype": "Text", "options": {"text": "供应商管理", "fontSize": "16px", "fontWeight": "bold", "textAlign": "center", "marginTop": "8px"}},
|
||||
{"widgettype": "Text", "options": {"text": "添加和管理供应商信息", "fontSize": "12px", "color": "#999999", "textAlign": "center"}}
|
||||
{
|
||||
"widgettype": "Title5",
|
||||
"options": {
|
||||
"text": "供应商管理",
|
||||
"color": "#F1F5F9",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "添加和管理供应商信息",
|
||||
"fontSize": "12px",
|
||||
"color": "#94A3B8"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"options": {
|
||||
"bgcolor": "#FFFFFF",
|
||||
"padding": "20px",
|
||||
"bgcolor": "#1E293B",
|
||||
"padding": "16px 24px",
|
||||
"borderRadius": "8px",
|
||||
"cursor": "pointer",
|
||||
"boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
|
||||
"border": "1px solid #334155",
|
||||
"cursor": "pointer"
|
||||
},
|
||||
"binds": [{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {"url": "{{entire_url('supply_contracts.ui')}}"},
|
||||
"mode": "replace"
|
||||
}],
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {
|
||||
"url": "{{entire_url('supply_contracts.ui')}}"
|
||||
},
|
||||
"mode": "replace"
|
||||
}
|
||||
],
|
||||
"subwidgets": [
|
||||
{"widgettype": "Text", "options": {"text": "📋", "fontSize": "32px", "textAlign": "center"}},
|
||||
{"widgettype": "Text", "options": {"text": "供销合同", "fontSize": "16px", "fontWeight": "bold", "textAlign": "center", "marginTop": "8px"}},
|
||||
{"widgettype": "Text", "options": {"text": "管理与供应商的供销合同及产品折扣", "fontSize": "12px", "color": "#999999", "textAlign": "center"}}
|
||||
{
|
||||
"widgettype": "Title5",
|
||||
"options": {
|
||||
"text": "供销合同",
|
||||
"color": "#F1F5F9",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "管理与供应商的供销合同及产品折扣",
|
||||
"fontSize": "12px",
|
||||
"color": "#94A3B8"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"options": {
|
||||
"bgcolor": "#FFFFFF",
|
||||
"padding": "20px",
|
||||
"bgcolor": "#1E293B",
|
||||
"padding": "16px 24px",
|
||||
"borderRadius": "8px",
|
||||
"cursor": "pointer",
|
||||
"boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
|
||||
"border": "1px solid #334155",
|
||||
"cursor": "pointer"
|
||||
},
|
||||
"binds": [{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {"url": "{{entire_url('sub_distributors.ui')}}"},
|
||||
"mode": "replace"
|
||||
}],
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {
|
||||
"url": "{{entire_url('sub_distributors.ui')}}"
|
||||
},
|
||||
"mode": "replace"
|
||||
}
|
||||
],
|
||||
"subwidgets": [
|
||||
{"widgettype": "Text", "options": {"text": "🏪", "fontSize": "32px", "textAlign": "center"}},
|
||||
{"widgettype": "Text", "options": {"text": "二级分销商", "fontSize": "16px", "fontWeight": "bold", "textAlign": "center", "marginTop": "8px"}},
|
||||
{"widgettype": "Text", "options": {"text": "添加和管理二级分销商", "fontSize": "12px", "color": "#999999", "textAlign": "center"}}
|
||||
{
|
||||
"widgettype": "Title5",
|
||||
"options": {
|
||||
"text": "二级分销商",
|
||||
"color": "#F1F5F9",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "添加和管理二级分销商",
|
||||
"fontSize": "12px",
|
||||
"color": "#94A3B8"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"options": {
|
||||
"bgcolor": "#FFFFFF",
|
||||
"padding": "20px",
|
||||
"bgcolor": "#1E293B",
|
||||
"padding": "16px 24px",
|
||||
"borderRadius": "8px",
|
||||
"cursor": "pointer",
|
||||
"boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
|
||||
"border": "1px solid #334155",
|
||||
"cursor": "pointer"
|
||||
},
|
||||
"binds": [{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {"url": "{{entire_url('distribution_agreements.ui')}}"},
|
||||
"mode": "replace"
|
||||
}],
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {
|
||||
"url": "{{entire_url('distribution_agreements.ui')}}"
|
||||
},
|
||||
"mode": "replace"
|
||||
}
|
||||
],
|
||||
"subwidgets": [
|
||||
{"widgettype": "Text", "options": {"text": "📝", "fontSize": "32px", "textAlign": "center"}},
|
||||
{"widgettype": "Text", "options": {"text": "分销协议", "fontSize": "16px", "fontWeight": "bold", "textAlign": "center", "marginTop": "8px"}},
|
||||
{"widgettype": "Text", "options": {"text": "管理与二级分销商的分销协议及产品折扣", "fontSize": "12px", "color": "#999999", "textAlign": "center"}}
|
||||
{
|
||||
"widgettype": "Title5",
|
||||
"options": {
|
||||
"text": "分销协议",
|
||||
"color": "#F1F5F9",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "管理与二级分销商的分销协议及产品折扣",
|
||||
"fontSize": "12px",
|
||||
"color": "#94A3B8"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"options": {
|
||||
"bgcolor": "#FFFFFF",
|
||||
"padding": "20px",
|
||||
"bgcolor": "#1E293B",
|
||||
"padding": "16px 24px",
|
||||
"borderRadius": "8px",
|
||||
"cursor": "pointer",
|
||||
"boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
|
||||
"border": "1px solid #334155",
|
||||
"cursor": "pointer"
|
||||
},
|
||||
"binds": [{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {"url": "{{entire_url('accounting.ui')}}"},
|
||||
"mode": "replace"
|
||||
}],
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.supplychain_content",
|
||||
"options": {
|
||||
"url": "{{entire_url('accounting.ui')}}"
|
||||
},
|
||||
"mode": "replace"
|
||||
}
|
||||
],
|
||||
"subwidgets": [
|
||||
{"widgettype": "Text", "options": {"text": "💰", "fontSize": "32px", "textAlign": "center"}},
|
||||
{"widgettype": "Text", "options": {"text": "供销记账", "fontSize": "16px", "fontWeight": "bold", "textAlign": "center", "marginTop": "8px"}},
|
||||
{"widgettype": "Text", "options": {"text": "查看供销关系记账记录和利润统计", "fontSize": "12px", "color": "#999999", "textAlign": "center"}}
|
||||
{
|
||||
"widgettype": "Title5",
|
||||
"options": {
|
||||
"text": "供销记账",
|
||||
"color": "#F1F5F9",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "查看供销关系记账记录和利润统计",
|
||||
"fontSize": "12px",
|
||||
"color": "#94A3B8"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -153,10 +250,10 @@
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"id": "supplychain_content",
|
||||
"css": "filler",
|
||||
"options": {
|
||||
"width": "100%",
|
||||
"flex": "1",
|
||||
"marginTop": "20px"
|
||||
"overflowY": "auto"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user