使用無遠開發(fā)平臺開發(fā)應用，可以完全自主掌握樣式。
》演示地址《
效果截圖
image
image
image
image
實現(xiàn)方法
第一步 創(chuàng)建并上傳樣式文件，并在首頁中引入該樣式文件
- 本地創(chuàng)建 css 文件，命名為 my-style.css，并貼入以下內(nèi)容:
body[theme=base] .bg-mask,body[theme=base] .page-tab-container li.selected {
background: #e4e7e8;
color: #000;
}
.ui-state-active, .ui-widget-content .ui-state-active {
background: #007aff;
border-color: #007aff;
}
.ui-widget-overlay{
background: #111; opacity: 0.15;
}
.zwindow {
box-shadow: 3px 2px 5px #999;
}
.zwindow-header {
border-radius: 0 !important;
}
.zwindow-body {
border-radius: 0 !important;
}
.zwindow-bar {
border-radius: 0 !important;
}
#header {
box-shadow: 0px 1px 5px #666;
border-bottom: none;
z-index: 1;
}
#header .path label.ui-state-active {
opacity: 1;
}
#navigator {
border-right: none;
box-shadow: 1px 1px 5px #666;
}
#navigator.ui-state-default {
background: #111;
border-color: #e4e7e8;
}
#navigator ul.en-menu li.selected>a {
border-right: none;
}
#navigator.ui-state-default a {
color: #999;
}
#navigator .ui-state-hover {
background: #111;
border-color: #111;
}
#navigator .ui-state-hover a {
color: #ccc;
}
#navigator .ui-state-active {
background: #007aff;
}
#navigator .ui-state-active a {
color: #fff;
}
#bottom {
bottom:0;
}
.ui-state-error, .ui-widget-content .ui-state-error {
background-color: #FF3B30;
border: solid 1px #FF3B30;
color: #fff;
}
.ui-state-error a, .ui-widget-content .ui-state-error a {
color: #fff;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid #ffc200;
background: #ffc200;
color: #fff;
}
- 在工作臺全局配置-靜態(tài)資源上傳上述樣式文件
- 在工作臺全局配置-前端-首頁訪問-引入靜態(tài)資源-PC端，添加文件 my-style.css
第二步 工作臺全局配置-前端-主頁設(shè)置
- 皮膚設(shè)置為: base
- 頁面內(nèi)邊距PC端，上下左右各設(shè)置為 12
