使用无远开发平台开发应用，可以完全自主掌握样式。
》演示地址《
效果截图
image
image
image
image
实现方法
第一步 创建并上传样式文件，并在首页中引入该样式文件
- 本地创建 css 文件，命名为 my-style.css，并贴入以下内容:
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;
}
- 在工作台全局配置-静态资源上传上述样式文件
- 在工作台全局配置-前端-首页访问-引入静态资源-PC端，添加文件 my-style.css
第二步 工作台全局配置-前端-主页设置
- 皮肤设置为: base
- 页面内边距PC端，上下左右各设置为 12
