使用无远开发平台开发应用，可以完全自主掌握样式。

》演示地址《

效果截图

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

如果懂 CSS，完全可以按照自己的想法修改第一步中的样式文件，达到自己希望的效果。

其他参考：如何让界面更漂亮