mirror of
https://gitee.com/smartchart/smartchart
synced 2025-05-05 00:59:25 +08:00
add static,template
This commit is contained in:
JohnYan
parent
e075cbfda6
commit
f5affff78a
@ -28,7 +28,7 @@
|
||||
[MAC电脑安装版](http://npm.taobao.org/mirrors/python/3.9.0/python-3.9.0rc2-macosx10.9.pkg "MAC电脑安装版")
|
||||
```shell script
|
||||
你可以把smartchart当作服务来嵌入你的页面使用
|
||||
1. 安装Python环境,请安装最新版3.9!!
|
||||
1. 安装Python环境
|
||||
2. 命令行安装: pip3 install smartchart
|
||||
|
||||
# Mac or Linux 初始化方法
|
||||
@ -87,9 +87,7 @@ url: 登录成功后跳转链接
|
||||
|
||||
##### 如果你是python开发者,可以在你的django项目中当作apps使用
|
||||
```shell script
|
||||
pip install smartchart #只支持最新版Python3.9.x
|
||||
pip install smartchart==3.7.3 #只支持python3.7.x
|
||||
pip install smartchart==3.6.3 #只支持python3.6.x
|
||||
pip install smartchart
|
||||
简单配置一下, 你可以参考此demo
|
||||
1. 在你的setting.py的INSTALL_APPS中加入'smart_chart.echart'
|
||||
2. MIDDLEWARE 中注释掉XFrameOptionsMiddleware
|
||||
|
||||
39
static/editor/common.js
Normal file
39
static/editor/common.js
Normal file
@ -0,0 +1,39 @@
|
||||
var submit = document.querySelector('#submit');
|
||||
var theme = localStorage.getItem('acetheme') || 'monokai';
|
||||
var editor1 = '';
|
||||
var helpText = '';
|
||||
var helmodal = $('#myModal');
|
||||
|
||||
$('#ace-theme').val(theme);
|
||||
$("#ace-theme").change(function () {
|
||||
theme=$("#ace-theme").val();
|
||||
editor1.setTheme("ace/theme/"+theme);
|
||||
localStorage.setItem('acetheme',theme)
|
||||
});
|
||||
|
||||
function GetQueryString(name) {
|
||||
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) {
|
||||
return unescape(r[2]);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
function init_editor(mode,name='editor1') {
|
||||
return ace.edit(name, {
|
||||
theme: "ace/theme/" + theme,
|
||||
mode: "ace/mode/" + mode,
|
||||
wrap: true,
|
||||
autoScrollEditorIntoView: true,
|
||||
enableBasicAutocompletion: true,
|
||||
enableSnippets: true,
|
||||
enableLiveAutocompletion: true
|
||||
});
|
||||
}
|
||||
|
||||
function load_help(name) {
|
||||
if(helpText ===''){$.ajax({
|
||||
type: "get", url: 'https://www.smartchart.cn/smartdata/api/?i='+name,
|
||||
success: function (data) {helpText=data;helmodal.html(helpText);}
|
||||
})}helmodal.modal('show');
|
||||
}
|
||||
99
static/editor/ds_editor.js
Normal file
99
static/editor/ds_editor.js
Normal file
@ -0,0 +1,99 @@
|
||||
var dsid = GetQueryString('dsid');
|
||||
var divid = GetQueryString('divid');
|
||||
var on = GetQueryString('on') || '1';
|
||||
var dsname ='';
|
||||
var seq = GetQueryString('seq') || '';
|
||||
$('#dsseq').val(seq);
|
||||
$.ajax({type: "get",url: '/echart/get_sqlstr/?dsid='+ dsid,success: function (data)
|
||||
{editor1.setValue(data['msg']);dsname=data['name'];$('#title').text('#'+seq+":"+dsid+dsname);$('#conn').text(data['connname']);} });
|
||||
set_onoff();
|
||||
editor1 = init_editor('sql');
|
||||
|
||||
|
||||
function set_onoff() {
|
||||
if(on==='1'){$('#onoff').css('color','rgb(126, 255, 140)');on='2';
|
||||
}else{$('#onoff').css('color','rgb(126, 159, 140)');on='1';}
|
||||
}
|
||||
|
||||
function save_title() {
|
||||
let tmpdsname = $('#dsname_input').val();
|
||||
$.ajax({type: "get",url: '/echart/save_dstitle/?dsid='+dsid+'&dsname='+ tmpdsname,success: function (data)
|
||||
{if(data['status']==='success'){dsname=tmpdsname; $('#title').text('#'+seq+":"+dsid+dsname);} $('#printlog').html(data['msg']);
|
||||
$('#modal_name').modal('hide');
|
||||
} });
|
||||
}
|
||||
|
||||
function save_conn() {
|
||||
let connid = $('#connselect').val();
|
||||
let connname = $('#connselect').find("option:selected").text();
|
||||
$.ajax({type: "get",url: '/echart/save_dsconn/?dsid='+dsid+'&connid='+ connid,success: function (data)
|
||||
{if(data['status']==='success'){ $('#conn').text(connname);} $('#printlog').html(data['msg']);
|
||||
$('#modal_conn').modal('hide');
|
||||
} });
|
||||
}
|
||||
|
||||
function insertds(flag='') {
|
||||
seq = $('#dsseq').val();
|
||||
$.ajax({type: "get",url: '/echart/set_dsseq/?c='+flag+'&divid='+ divid+'&seq='+seq,success: function (data)
|
||||
{ try{window.opener.location.reload();}catch (e) {console.log('no opener')} divid=data['divid'];seq=data['seq']; $('#printlog').html(data['msg']);$('#changedsseq').html('');
|
||||
$('#title').text('#'+seq+":"+dsid+dsname);} });
|
||||
}
|
||||
|
||||
$('#submit').click(function () {let e = editor1.getValue();console.log(e);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/echart/save_ds/",
|
||||
data: { dsid: dsid,sqlstr:e,divid:divid},
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
$('#printlog').html(data['msg']);
|
||||
dsid = data['dsid'];
|
||||
dsname = data['dsname'];
|
||||
$('#title').text('#'+seq+":"+dsid+dsname);
|
||||
if (GetQueryString('r')){
|
||||
try{
|
||||
if (GetQueryString('a') && data['r']){
|
||||
eval('window.opener.refresh_ds_'+seq+'()');}
|
||||
else{window.opener.location.reload();}}
|
||||
catch (e) {console.log('no opener');}
|
||||
} // window.opener=null;window.close();
|
||||
else{window.location.href="/echart/?type=z.chart&dev=1&dataset="+dsid }
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
editor1.getSession().on('change', function(e) {$("#printlog").html('');});
|
||||
|
||||
|
||||
$("#dsseq").change(function () {
|
||||
if($("#dsseq").val()===seq){
|
||||
$('#changedsseq').html('');
|
||||
}
|
||||
else{ $('#changedsseq').html('<a href="#" onclick="insertds()" class="glyphicon glyphicon-indent-left" style="color: rgb(255, 140, 60);">插入</a>' +
|
||||
'<a href="#" onclick="insertds(\'1\')" class="glyphicon glyphicon-retweet" style="color: rgb(255, 140, 60);">替换</a>');}
|
||||
});
|
||||
|
||||
$('#onoff').click(function () {
|
||||
$.ajax({type: "get",url: '/echart/set_dsonoff/?divid='+ divid,success: function (data)
|
||||
{ try{window.opener.location.reload();}catch (e) {console.log('no opener')} $('#printlog').html(data['msg']);set_onoff();} });
|
||||
});
|
||||
|
||||
$('#editorframe').click(function () {
|
||||
window.location.href='/echart/ds_editor/?dsid=' + dsid +'&divid=' + divid
|
||||
});
|
||||
|
||||
$('#title').click(function () {
|
||||
$('#dsid_input').text('#'+dsid);
|
||||
$('#dsname_input').val(dsname);
|
||||
$('#modal_name').modal('show');
|
||||
});
|
||||
|
||||
$('#conn').click(function () {
|
||||
$.ajax({type: "get",url: '/echart/get_connlist/',success: function (data){
|
||||
let connselect = $('#connselect');console.log(data['msg']);
|
||||
data['msg'].forEach(function (item) {
|
||||
connselect.append('<option value='+item[0]+'>'+item[1]+'</option>')
|
||||
});
|
||||
$('#modal_conn').modal('show');
|
||||
} });
|
||||
});
|
||||
60
static/editor/ds_editor_frame.js
Normal file
60
static/editor/ds_editor_frame.js
Normal file
@ -0,0 +1,60 @@
|
||||
var dsid = GetQueryString('dsid');
|
||||
var divid = GetQueryString('divid') || '';
|
||||
var dsname = '';
|
||||
editor1=init_editor('sql');
|
||||
|
||||
$.ajax({type: "get",url: '/echart/get_sqlstr/?dsid='+dsid,success: function (data)
|
||||
{editor1.setValue(data['msg']);dsname=data['name'];$('#title').text('#'+dsid+dsname);$('#conn').text(data['connname']);} });
|
||||
|
||||
$('#submit').click(function () {
|
||||
let e = editor1.getValue();console.log(e);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/echart/save_ds/",
|
||||
data: { dsid:dsid,sqlstr:e, divid:divid},
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
$('#printlog').html(data['msg']);
|
||||
// $('#iframepage')[0].contentWindow.refresh_ds_1();
|
||||
$('#iframepage')[0].contentWindow.location.reload();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function save_title() {
|
||||
let tmpdsname = $('#dsname_input').val();
|
||||
$.ajax({type: "get",url: '/echart/save_dstitle/?dsid='+dsid+'&dsname='+ tmpdsname,success: function (data)
|
||||
{if(data['status']==='success'){dsname=tmpdsname; $('#title').text('#:'+dsid+dsname);} $('#printlog').html(data['msg']);
|
||||
$('#modal_name').modal('hide');
|
||||
} });
|
||||
}
|
||||
|
||||
function save_conn() {
|
||||
let connid = $('#connselect').val();
|
||||
let connname = $('#connselect').find("option:selected").text();
|
||||
$.ajax({type: "get",url: '/echart/save_dsconn/?dsid='+dsid+'&connid='+ connid,success: function (data)
|
||||
{if(data['status']==='success'){ $('#conn').text(connname);} $('#printlog').html(data['msg']);
|
||||
$('#modal_conn').modal('hide');
|
||||
} });
|
||||
}
|
||||
|
||||
editor1.getSession().on('change', function(e) {$("#printlog").html('');});
|
||||
|
||||
$('#title').click(function () {
|
||||
$('#dsid_input').text('#'+dsid);
|
||||
$('#dsname_input').val(dsname);
|
||||
$('#modal_name').modal('show');
|
||||
});
|
||||
|
||||
$('#conn').click(function () {
|
||||
$.ajax({type: "get",url: '/echart/get_connlist/',success: function (data){
|
||||
let connselect = $('#connselect');console.log(data['msg']);
|
||||
data['msg'].forEach(function (item) {
|
||||
connselect.append('<option value='+item[0]+'>'+item[1]+'</option>')
|
||||
});
|
||||
$('#modal_conn').modal('show');
|
||||
} });
|
||||
});
|
||||
|
||||
window.onbeforeunload= function(event) {if(divid){window.opener.location.reload();}}
|
||||
100
static/editor/editor.css
Normal file
100
static/editor/editor.css
Normal file
@ -0,0 +1,100 @@
|
||||
/*ds_editor*/
|
||||
::-webkit-scrollbar {
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.5) 72%, rgba(0, 182, 234, 0.3) 100%);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-image: linear-gradient(135deg, #1DE9B6 0%, #08c4db 72%, #057494 100%);
|
||||
transition: all .2s;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(95, 95, 95, 0.7);
|
||||
}
|
||||
@media screen and (min-width: 960px) {
|
||||
.editorSet {
|
||||
width: 100%;
|
||||
}
|
||||
.editorSet .editor {
|
||||
height: 800px;
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
background-color: rgb(44, 52, 55);
|
||||
float: left;
|
||||
}
|
||||
.iframechart {
|
||||
height: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
.editorSet {
|
||||
width: 100%;
|
||||
}
|
||||
.editorSet .editor {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
background-color: rgb(44, 52, 55);
|
||||
}
|
||||
.iframechart {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.NightTheme .editorSet .editor {
|
||||
-webkit-box-shadow: inset 0 1px 3px rgb(22, 26, 27);
|
||||
-moz-box-shadow: inset 0 1px 3px rgb(22, 26, 27);
|
||||
box-shadow: inset 0 1px 3px rgb(22, 26, 27);
|
||||
}
|
||||
|
||||
.label {
|
||||
background: rgba(230, 230, 230, 0.5);
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
line-height: 20px;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #BBB;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.editor iframe {
|
||||
border: 0 !important;
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
color: #fff;
|
||||
background-color: #67c23a;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border: 1px solid #67c23a;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: .1s;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
/*padding: 12px 20px;*/
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.edit-area {
|
||||
height: 92%;
|
||||
}
|
||||
476
static/index/colorpicker.js
Normal file
476
static/index/colorpicker.js
Normal file
@ -0,0 +1,476 @@
|
||||
(function () {
|
||||
|
||||
var util = {
|
||||
css: function (elem, obj) {
|
||||
for (var i in obj) {
|
||||
elem.style[i] = obj[i];
|
||||
}
|
||||
},
|
||||
hasClass: function (elem, classN) {
|
||||
var className = elem.getAttribute("class");
|
||||
return className.indexOf(classN) != -1;
|
||||
}
|
||||
};
|
||||
|
||||
function Colorpicker(opt) {
|
||||
if (this === window) throw `Colorpicker: Can't call a function directly`;
|
||||
this.init(opt);
|
||||
};
|
||||
|
||||
Colorpicker.prototype = {
|
||||
init(opt) {
|
||||
let { el, initColor = "rgb(255,0,0)", allMode = ['hex', 'rgb'], color = '' } = opt;
|
||||
var elem = document.getElementById(el);
|
||||
|
||||
if (!(elem && elem.nodeType && elem.nodeType === 1)) {
|
||||
throw `Colorpicker: not found ID:${el} HTMLElement,not ${{}.toString.call(el)}`;
|
||||
}
|
||||
|
||||
this.Opt = {
|
||||
...opt,
|
||||
el,
|
||||
initColor,
|
||||
allMode,
|
||||
color
|
||||
}
|
||||
|
||||
this.bindElem = elem; // 绑定的元素
|
||||
this.elem_wrap = null; // 最外层容器
|
||||
this.fixedBg = null; // 拾色器后面固定定位的透明div 用于点击隐藏拾色器
|
||||
this.elem_colorPancel = null; // 色彩面板
|
||||
this.elem_picker = null; // 拾色器色块按钮
|
||||
this.elem_barPicker1 = null; // 颜色条
|
||||
this.elem_hexInput = null; // 显示hex的表单
|
||||
this.elem_showColor = null; // 显示当前颜色
|
||||
this.elem_showModeBtn = null; // 切换输入框模式按钮
|
||||
this.elem_inputWrap = null; // 输入框外层容器
|
||||
|
||||
this.pancelLeft = 0;
|
||||
this.pancelTop = 0;
|
||||
|
||||
this.downX = 0;
|
||||
this.downY = 0;
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
|
||||
this.pointLeft = 0;
|
||||
this.pointTop = 0;
|
||||
|
||||
this.current_mode = 'hex'; // input框当前的模式
|
||||
|
||||
this.rgba = { r: 0, g: 0, b: 0, a: 1 };
|
||||
this.hsb = { h: 0, s: 100, b: 100 };
|
||||
|
||||
|
||||
var _this = this, rgb = initColor.slice(4, -1).split(",");
|
||||
|
||||
this.rgba.r = parseInt(rgb[0]);
|
||||
this.rgba.g = parseInt(rgb[1]);
|
||||
this.rgba.b = parseInt(rgb[2]);
|
||||
|
||||
var body = document.getElementsByTagName("body")[0],
|
||||
div = document.createElement("div");
|
||||
|
||||
div.innerHTML = this.render();
|
||||
body.appendChild(div);
|
||||
|
||||
this.elem_wrap = div;
|
||||
this.fixedBg = div.children[0];
|
||||
this.elem_colorPancel = div.getElementsByClassName("color-pancel")[0];
|
||||
this.pancel_width = this.elem_colorPancel.offsetWidth;
|
||||
this.pancel_height = this.elem_colorPancel.offsetHeight;
|
||||
this.elem_picker = div.getElementsByClassName("pickerBtn")[0];
|
||||
this.elem_colorPalette = div.getElementsByClassName("color-palette")[0];
|
||||
this.elem_showColor = div.getElementsByClassName("colorpicker-showColor")[0];
|
||||
this.elem_barPicker1 = div.getElementsByClassName("colorBar-color-picker")[0];
|
||||
/* this.elem_barPicker2 = div.getElementsByClassName("colorBar-opacity-picker")[0]; */
|
||||
this.elem_hexInput = div.getElementsByClassName("colorpicker-hexInput")[0];
|
||||
this.elem_showModeBtn = div.getElementsByClassName("colorpicker-showModeBtn")[0];
|
||||
this.elem_inputWrap = div.getElementsByClassName("colorpicker-inputWrap")[0];
|
||||
/* this.elem_opacityPancel = this.elem_barPicker2.parentNode.parentNode.children[1]; */
|
||||
|
||||
// var rect = this.bindElem.getBoundingClientRect();
|
||||
var elem = this.bindElem;
|
||||
var top = elem.offsetTop+30;
|
||||
var left = elem.offsetLeft-400;
|
||||
while (elem.offsetParent) {
|
||||
top += elem.offsetParent.offsetTop;
|
||||
left += elem.offsetParent.offsetLeft;
|
||||
elem = elem.offsetParent;
|
||||
}
|
||||
|
||||
this.pancelLeft = left + this.elem_colorPalette.clientWidth;
|
||||
this.pancelTop = top + this.bindElem.offsetHeight;
|
||||
util.css(div, {
|
||||
"position": "absolute",
|
||||
"z-index": 2,
|
||||
"display": 'none',
|
||||
"left": left + "px",
|
||||
"top": top + this.bindElem.offsetHeight + "px"
|
||||
});
|
||||
|
||||
this.bindMove(this.elem_colorPancel, this.setPosition, true);
|
||||
this.bindMove(this.elem_barPicker1.parentNode, this.setBar, false);
|
||||
/* this.bindMove(this.elem_barPicker2.parentNode,this.setBar,false); */
|
||||
|
||||
this.bindElem.addEventListener("click", function () {
|
||||
_this.show();
|
||||
}, false);
|
||||
|
||||
this.fixedBg.addEventListener("click", function (e) {
|
||||
_this.hide();
|
||||
}, false)
|
||||
|
||||
this.elem_showModeBtn.addEventListener("click", function () {
|
||||
_this.switch_current_mode();
|
||||
}, false)
|
||||
|
||||
this.elem_wrap.addEventListener("input", function (e) {
|
||||
var target = e.target, value = target.value;
|
||||
_this.setColorByInput(value);
|
||||
}, false);
|
||||
|
||||
this.elem_colorPalette.addEventListener("click", function (e) {
|
||||
if (e.target.tagName.toLocaleLowerCase() == "p") {
|
||||
let colorStr = e.target.style.background;
|
||||
let rgb = colorStr.slice(4, -1).split(",");
|
||||
let rgba = {
|
||||
r: parseInt(rgb[0]),
|
||||
g: parseInt(rgb[1]),
|
||||
b: parseInt(rgb[2])
|
||||
}
|
||||
switch (_this.current_mode) {
|
||||
case "hex":
|
||||
_this.setColorByInput("#" + _this.rgbToHex(rgba))
|
||||
break;
|
||||
case 'rgb':
|
||||
let inputs = _this.elem_wrap.getElementsByTagName("input")
|
||||
inputs[0].value = rgba.r;
|
||||
inputs[1].value = rgba.g;
|
||||
inputs[2].value = rgba.b;
|
||||
_this.setColorByInput(colorStr)
|
||||
/* _this.hsb = _this.rgbToHsb(rgba); */
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
}, false);
|
||||
|
||||
(color != '' && this.setColorByInput(color));
|
||||
},
|
||||
render: function () {
|
||||
var tpl =
|
||||
`<div style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;"></div>
|
||||
<div style="position: inherit;z-index: 100;display: flex;box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px;">
|
||||
<div style='width:180px;padding:10px;background: #f9f9f9;display: flex;flex-flow: row wrap;align-content: space-around;justify-content: space-around;' class='color-palette'>
|
||||
${this.getPaletteColorsItem()}
|
||||
</div>
|
||||
<div class="colorpicker-pancel" style="background: rgb(255, 255, 255);box-sizing: initial; width: 225px; font-family: Menlo;">
|
||||
<div style="width: 100%; padding-bottom: 55%; position: relative; border-radius: 2px 2px 0px 0px; overflow: hidden;">
|
||||
<div class="color-pancel" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b})">
|
||||
<style>
|
||||
.saturation-white {background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));background: linear-gradient(to right, #fff, rgba(255,255,255,0));}
|
||||
.saturation-black {background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));background: linear-gradient(to top, #000, rgba(0,0,0,0));}
|
||||
</style>
|
||||
<div class="saturation-white" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
|
||||
<div class="saturation-black" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
|
||||
</div>
|
||||
<div class="pickerBtn" style="position: absolute; top: 0%; left: 100%; cursor: default;">
|
||||
<div style="width: 12px; height: 12px; border-radius: 6px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; transform: translate(-6px, -6px);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 16px 20px;">
|
||||
<div class="flexbox-fix" style="display: flex;align-items: center;height: 40px;">
|
||||
<div style="width: 32px;">
|
||||
<div style="width: 16px; height: 16px; border-radius: 8px; position: relative; overflow: hidden;">
|
||||
<div class="colorpicker-showColor" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; background:rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b}); z-index: 2;"></div>
|
||||
<div class="" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="-webkit-box-flex: 1; flex: 1 1 0%;"><div style="height: 10px; position: relative;">
|
||||
<div style="position: absolute; top: 0px;right: 0px; bottom: 0px; left: 0px;">
|
||||
<div class="hue-horizontal" style="padding: 0px 2px; position: relative; height: 100%;">
|
||||
<style>
|
||||
.hue-horizontal {background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}
|
||||
.hue-vertical {background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}
|
||||
</style>
|
||||
<div class="colorBar-color-picker" style="position: absolute; left: 0%;">
|
||||
<div style="width: 12px; height: 12px; border-radius: 6px; transform: translate(-6px, -1px); background-color: rgb(248, 248, 248); box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox-fix" style="display: flex;">
|
||||
<div class="flexbox-fix colorpicker-inputWrap" style="-webkit-box-flex: 1; flex: 1 1 0%; display: flex; margin-left: -6px;">
|
||||
${this.getInputTpl()}
|
||||
</div>
|
||||
<div class="colorpicker-showModeBtn" style="width: 32px; text-align: right; position: relative;">
|
||||
<div style="margin-right: -4px; cursor: pointer; position: relative;">
|
||||
<svg viewBox="0 0 24 24" style="width: 24px; height: 24px; border: 1px solid transparent; border-radius: 5px;"><path fill="#333" d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"></path><path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
return tpl;
|
||||
},
|
||||
getInputTpl: function () {
|
||||
var current_mode_html = "";
|
||||
switch (this.current_mode) {
|
||||
case 'hex':
|
||||
var hex = "#" + this.rgbToHex(this.HSBToRGB(this.hsb));
|
||||
current_mode_html += `
|
||||
<div style="padding-left: 6px; width: 100%;">
|
||||
<div style="position: relative;">
|
||||
<input class="colorpicker-hexInput" value="${hex}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">
|
||||
<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">hex</span>
|
||||
</div>
|
||||
</div>`;
|
||||
break;
|
||||
case 'rgb':
|
||||
for (var i = 0; i < 3; i++) {
|
||||
current_mode_html +=
|
||||
`<div style="padding-left: 6px; width: 100%;">
|
||||
<div style="position: relative;">
|
||||
<input class="colorpicker-hexInput" value="${this.rgba['rgb'[i]]}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">
|
||||
<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">${'rgb'[i]}</span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
default:
|
||||
}
|
||||
return current_mode_html;
|
||||
},
|
||||
getPaletteColorsItem: function () {
|
||||
let str = '';
|
||||
let palette = ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)",
|
||||
"rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)",
|
||||
"rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)",
|
||||
"rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)",
|
||||
"rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)",
|
||||
"rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)"]
|
||||
palette.forEach(item => str += `<p style='width:20px;height:20px;background:${item};margin:0 5px;border: solid 1px #d0d0d0;'></p>`)
|
||||
return str;
|
||||
},
|
||||
setPosition(x, y) {
|
||||
var LEFT = parseInt(x - this.pancelLeft),
|
||||
TOP = parseInt(y - this.pancelTop);
|
||||
|
||||
this.pointLeft = Math.max(0, Math.min(LEFT, this.pancel_width));
|
||||
this.pointTop = Math.max(0, Math.min(TOP, this.pancel_height));
|
||||
|
||||
util.css(this.elem_picker, {
|
||||
left: this.pointLeft + "px",
|
||||
top: this.pointTop + "px"
|
||||
})
|
||||
this.hsb.s = parseInt(100 * this.pointLeft / this.pancel_width);
|
||||
this.hsb.b = parseInt(100 * (this.pancel_height - this.pointTop) / this.pancel_height);
|
||||
|
||||
this.setShowColor();
|
||||
this.setValue(this.rgba);
|
||||
|
||||
},
|
||||
setBar: function (elem, x) {
|
||||
var elem_bar = elem.getElementsByTagName("div")[0],
|
||||
rect = elem.getBoundingClientRect(),
|
||||
elem_width = elem.offsetWidth,
|
||||
X = Math.max(0, Math.min(x - rect.x, elem_width));
|
||||
|
||||
if (elem_bar === this.elem_barPicker1) {
|
||||
util.css(elem_bar, {
|
||||
left: X + "px"
|
||||
});
|
||||
this.hsb.h = parseInt(360 * X / elem_width);
|
||||
} else {
|
||||
util.css(elem_bar, {
|
||||
left: X + "px"
|
||||
});
|
||||
this.rgba.a = X / elem_width;
|
||||
}
|
||||
|
||||
this.setPancelColor(this.hsb.h);
|
||||
this.setShowColor();
|
||||
this.setValue(this.rgba);
|
||||
|
||||
},
|
||||
setPancelColor: function (h) {
|
||||
var rgb = this.HSBToRGB({ h: h, s: 100, b: 100 });
|
||||
|
||||
util.css(this.elem_colorPancel, {
|
||||
background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + this.rgba.a + ')'
|
||||
});
|
||||
},
|
||||
setShowColor: function () {
|
||||
var rgb = this.HSBToRGB(this.hsb);
|
||||
|
||||
this.rgba.r = rgb.r;
|
||||
this.rgba.g = rgb.g;
|
||||
this.rgba.b = rgb.b;
|
||||
|
||||
util.css(this.elem_showColor, {
|
||||
background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + this.rgba.a + ')'
|
||||
});
|
||||
},
|
||||
setValue: function (rgb) {
|
||||
var hex = "#" + this.rgbToHex(rgb);
|
||||
this.elem_inputWrap.innerHTML = this.getInputTpl();
|
||||
this.Opt.change(this.bindElem, hex);
|
||||
},
|
||||
setColorByInput: function (value) {
|
||||
var _this = this;
|
||||
switch (this.current_mode) {
|
||||
case "hex":
|
||||
value = value.slice(1);
|
||||
if (value.length == 3) {
|
||||
value = '#' + value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
|
||||
this.hsb = this.hexToHsb(value);
|
||||
} else if (value.length == 6) {
|
||||
this.hsb = this.hexToHsb(value);
|
||||
}
|
||||
break;
|
||||
case 'rgb':
|
||||
var inputs = this.elem_wrap.getElementsByTagName("input"),
|
||||
rgb = {
|
||||
r: inputs[0].value ? parseInt(inputs[0].value) : 0,
|
||||
g: inputs[1].value ? parseInt(inputs[1].value) : 0,
|
||||
b: inputs[2].value ? parseInt(inputs[2].value) : 0
|
||||
};
|
||||
|
||||
this.hsb = this.rgbToHsb(rgb);
|
||||
}
|
||||
this.changeViewByHsb();
|
||||
},
|
||||
changeViewByHsb: function () {
|
||||
this.pointLeft = parseInt(this.hsb.s * this.pancel_width / 100);
|
||||
this.pointTop = parseInt((100 - this.hsb.b) * this.pancel_height / 100);
|
||||
util.css(this.elem_picker, {
|
||||
left: this.pointLeft + "px",
|
||||
top: this.pointTop + "px"
|
||||
});
|
||||
|
||||
this.setPancelColor(this.hsb.h);
|
||||
this.setShowColor();
|
||||
util.css(this.elem_barPicker1, {
|
||||
left: this.hsb.h / 360 * (this.elem_barPicker1.parentNode.offsetWidth) + "px"
|
||||
});
|
||||
|
||||
var hex = '#' + this.rgbToHex(this.HSBToRGB(this.hsb));
|
||||
this.Opt.change(this.bindElem, hex);
|
||||
},
|
||||
switch_current_mode: function () {
|
||||
this.current_mode = this.current_mode == 'hex' ? 'rgb' : 'hex';
|
||||
this.elem_inputWrap.innerHTML = this.getInputTpl();
|
||||
},
|
||||
bindMove: function (elem, fn, bool) {
|
||||
var _this = this;
|
||||
|
||||
elem.addEventListener("mousedown", function (e) {
|
||||
_this.downX = e.pageX;
|
||||
_this.downY = e.pageY;
|
||||
bool ? fn.call(_this, _this.downX, _this.downY) : fn.call(_this, elem, _this.downX, _this.downY);
|
||||
|
||||
document.addEventListener("mousemove", mousemove, false);
|
||||
function mousemove(e) {
|
||||
_this.moveX = e.pageX;
|
||||
_this.moveY = e.pageY;
|
||||
bool ? fn.call(_this, _this.moveX, _this.moveY) : fn.call(_this, elem, _this.moveX, _this.moveY);
|
||||
e.preventDefault();
|
||||
}
|
||||
document.addEventListener("mouseup", mouseup, false);
|
||||
function mouseup(e) {
|
||||
|
||||
document.removeEventListener("mousemove", mousemove, false)
|
||||
document.removeEventListener("mouseup", mouseup, false)
|
||||
}
|
||||
}, false);
|
||||
},
|
||||
show: function () {
|
||||
util.css(this.elem_wrap, {
|
||||
"display": "block"
|
||||
})
|
||||
},
|
||||
hide: function () {
|
||||
util.css(this.elem_wrap, {
|
||||
"display": "none"
|
||||
})
|
||||
},
|
||||
HSBToRGB: function (hsb) {
|
||||
var rgb = {};
|
||||
var h = Math.round(hsb.h);
|
||||
var s = Math.round(hsb.s * 255 / 100);
|
||||
var v = Math.round(hsb.b * 255 / 100);
|
||||
|
||||
if (s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
var t1 = v;
|
||||
var t2 = (255 - s) * v / 255;
|
||||
var t3 = (t1 - t2) * (h % 60) / 60;
|
||||
|
||||
if (h == 360) h = 0;
|
||||
|
||||
if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3 }
|
||||
else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3 }
|
||||
else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3 }
|
||||
else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3 }
|
||||
else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3 }
|
||||
else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3 }
|
||||
else { rgb.r = 0; rgb.g = 0; rgb.b = 0 }
|
||||
}
|
||||
|
||||
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
|
||||
},
|
||||
rgbToHex: function (rgb) {
|
||||
var hex = [
|
||||
rgb.r.toString(16),
|
||||
rgb.g.toString(16),
|
||||
rgb.b.toString(16)
|
||||
];
|
||||
hex.map(function (str, i) {
|
||||
if (str.length == 1) {
|
||||
hex[i] = '0' + str;
|
||||
}
|
||||
});
|
||||
|
||||
return hex.join('');
|
||||
},
|
||||
hexToRgb: function (hex) {
|
||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||
return { r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF) };
|
||||
},
|
||||
hexToHsb: function (hex) {
|
||||
return this.rgbToHsb(this.hexToRgb(hex));
|
||||
},
|
||||
rgbToHsb: function (rgb) {
|
||||
var hsb = { h: 0, s: 0, b: 0 };
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
var delta = max - min;
|
||||
hsb.b = max;
|
||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
|
||||
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
else hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
} else hsb.h = -1;
|
||||
hsb.h *= 60;
|
||||
if (hsb.h < 0) hsb.h += 360;
|
||||
hsb.s *= 100 / 255;
|
||||
hsb.b *= 100 / 255;
|
||||
return hsb;
|
||||
}
|
||||
}
|
||||
|
||||
Colorpicker.create = function (opt) {
|
||||
return new Colorpicker(opt)
|
||||
}
|
||||
|
||||
window.Colorpicker = Colorpicker;
|
||||
})()
|
||||
437
static/index/dialog.css
Normal file
437
static/index/dialog.css
Normal file
@ -0,0 +1,437 @@
|
||||
@charset "UTF-8";
|
||||
@-webkit-keyframes fadeInNoTransform {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadeInNoTransform {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInNoTransform {
|
||||
-webkit-animation-name: fadeInNoTransform;
|
||||
animation-name: fadeInNoTransform;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutNoTransform {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutNoTransform {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutNoTransform {
|
||||
-webkit-animation-name: fadeOutNoTransform;
|
||||
animation-name: fadeOutNoTransform;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
-webkit-animation-name: fadeOut;
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, 20px, 0);
|
||||
transform: translate3d(-50%, 20px, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, 20px, 0);
|
||||
-ms-transform: translate3d(-50%, 20px, 0);
|
||||
transform: translate3d(-50%, 20px, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
-webkit-animation-name: fadeInUp;
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutDown {
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, 20px, 0);
|
||||
transform: translate3d(-50%, 20px, 0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutDown {
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, 20px, 0);
|
||||
-ms-transform: translate3d(-50%, 20px, 0);
|
||||
transform: translate3d(-50%, 20px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutDown {
|
||||
-webkit-animation-name: fadeOutDown;
|
||||
animation-name: fadeOutDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, -40px, 0);
|
||||
transform: translate3d(-50%, -40px, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%, -40px, 0);
|
||||
-ms-transform: translate3d(-50%, -40px, 0);
|
||||
transform: translate3d(-50%, -40px, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
|
||||
.txt-color-666 {
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.txt-textOneRow {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.txt-textTwoRow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.cpt_mask_dailog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: '微软雅黑','Microsoft Yahei';
|
||||
z-index: 1000002;
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
min-width: 240px;
|
||||
min-height: 130px;
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
-moz-transform: translate3d(-50%, -50%, 0);
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
-moz-box-shadow: 0 3px 10px #aaa;
|
||||
-webkit-box-shadow: 0 3px 10px #aaa;
|
||||
box-shadow: 0 3px 10px #aaa;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog.no_boxShadow {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .title_dailog {
|
||||
font-size: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 10px 0;
|
||||
height: 40px;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .discription_dailog {
|
||||
padding: 14px 0 10px 0;
|
||||
font-size: 14px;
|
||||
text-indent: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .discription_dailog .dailog_input {
|
||||
height: 28px;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
outline: none;
|
||||
border: none;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .discription_dailog .dailog_input::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .discription_dailog .dailog_input:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .discription_dailog .dailog_input::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .discription_dailog .dailog_input:-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .dailog_divOperation {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 3px 2px;
|
||||
justify-content: flex-end;
|
||||
float: right;
|
||||
height: 36px;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .dailog_divOperation .btn_span {
|
||||
padding: 6px 10px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.cpt_mask_dailog .div_dailog .dailog_divOperation .btn_span:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.cpt_mask_dailog.primary .div_dailog {
|
||||
-moz-box-shadow: 0px 0px 3px 0px #4D96DF;
|
||||
-webkit-box-shadow: 0px 0px 3px 0px #4D96DF;
|
||||
box-shadow: 0px 0px 3px 0px #4D96DF;
|
||||
}
|
||||
.cpt_mask_dailog.primary .div_dailog.no_boxShadow {
|
||||
-moz-box-shadow: 0px 0px 0px 0px #fff;
|
||||
-webkit-box-shadow: 0px 0px 0px 0px #fff;
|
||||
box-shadow: 0px 0px 0px 0px #fff;
|
||||
}
|
||||
.cpt_mask_dailog.primary .title_dailog {
|
||||
color: #588CD2;
|
||||
border-bottom: 1px dashed #4D96DF;
|
||||
}
|
||||
.cpt_mask_dailog.primary .discription_dailog {
|
||||
color: #313234;
|
||||
}
|
||||
.cpt_mask_dailog.primary .dailog_divOperation .btn_span {
|
||||
color: #fff;
|
||||
background: #4D96DF;
|
||||
}
|
||||
.cpt_mask_dailog.primary .dailog_divOperation .btn_span:hover {
|
||||
background: #4684C3;
|
||||
}
|
||||
.cpt_mask_dailog.primary .dailog_divOperation .btn_span.no_bg {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
.cpt_mask_dailog.success .div_dailog {
|
||||
-moz-box-shadow: 0px 0px 3px 0px #21B384;
|
||||
-webkit-box-shadow: 0px 0px 3px 0px #21B384;
|
||||
box-shadow: 0px 0px 3px 0px #21B384;
|
||||
}
|
||||
.cpt_mask_dailog.success .div_dailog.no_boxShadow {
|
||||
-moz-box-shadow: 0px 0px 0px 0px #fff;
|
||||
-webkit-box-shadow: 0px 0px 0px 0px #fff;
|
||||
box-shadow: 0px 0px 0px 0px #fff;
|
||||
}
|
||||
.cpt_mask_dailog.success .title_dailog {
|
||||
color: #6EB279;
|
||||
border-bottom: 1px dashed #21B384;
|
||||
}
|
||||
.cpt_mask_dailog.success .discription_dailog {
|
||||
color: #283528;
|
||||
}
|
||||
.cpt_mask_dailog.success .dailog_divOperation .btn_span {
|
||||
color: #fff;
|
||||
background: #21B384;
|
||||
}
|
||||
.cpt_mask_dailog.success .dailog_divOperation .btn_span:hover {
|
||||
background: #28A47C;
|
||||
}
|
||||
.cpt_mask_dailog.success .dailog_divOperation .btn_span.no_bg {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
.cpt_mask_dailog.danger .div_dailog {
|
||||
-moz-box-shadow: 0px 0px 3px 0px #D9534F;
|
||||
-webkit-box-shadow: 0px 0px 3px 0px #D9534F;
|
||||
box-shadow: 0px 0px 3px 0px #D9534F;
|
||||
}
|
||||
.cpt_mask_dailog.danger .div_dailog.no_boxShadow {
|
||||
-moz-box-shadow: 0px 0px 0px 0px #fff;
|
||||
-webkit-box-shadow: 0px 0px 0px 0px #fff;
|
||||
box-shadow: 0px 0px 0px 0px #fff;
|
||||
}
|
||||
.cpt_mask_dailog.danger .title_dailog {
|
||||
color: #C54D54;
|
||||
border-bottom: 1px dashed #D9534F;
|
||||
}
|
||||
|
||||
.cpt_mask_dailog.danger .discription_dailog {
|
||||
color: #4F3536;
|
||||
}
|
||||
.cpt_mask_dailog.danger .dailog_divOperation .btn_span {
|
||||
color: #fff;
|
||||
background: #D9534F;
|
||||
}
|
||||
.cpt_mask_dailog.danger .dailog_divOperation .btn_span:hover {
|
||||
background: #C74743;
|
||||
}
|
||||
.cpt_mask_dailog.danger .dailog_divOperation .btn_span.no_bg {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
.cpt_mask_dailog.warning .div_dailog {
|
||||
-moz-box-shadow: 0px 0px 3px 0px #FFBD7A;
|
||||
-webkit-box-shadow: 0px 0px 3px 0px #FFBD7A;
|
||||
box-shadow: 0px 0px 3px 0px #FFBD7A;
|
||||
}
|
||||
.cpt_mask_dailog.warning .div_dailog.no_boxShadow {
|
||||
-moz-box-shadow: 0px 0px 0px 0px #fff;
|
||||
-webkit-box-shadow: 0px 0px 0px 0px #fff;
|
||||
box-shadow: 0px 0px 0px 0px #fff;
|
||||
}
|
||||
.cpt_mask_dailog.warning .title_dailog {
|
||||
color: #FFBD7A;
|
||||
border-bottom: 1px dashed #FFBD7A;
|
||||
}
|
||||
.cpt_mask_dailog.warning .discription_dailog {
|
||||
color: #4F3536;
|
||||
}
|
||||
.cpt_mask_dailog.warning .dailog_divOperation .btn_span {
|
||||
color: #fff;
|
||||
background: #FFBD7A;
|
||||
}
|
||||
.cpt_mask_dailog.warning .dailog_divOperation .btn_span:hover {
|
||||
background: #F0AF6D;
|
||||
}
|
||||
.cpt_mask_dailog.warning .dailog_divOperation .btn_span.no_bg {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
164
static/index/dialog.js
Normal file
164
static/index/dialog.js
Normal file
@ -0,0 +1,164 @@
|
||||
(function($){
|
||||
$.fn.dailog = function(options,callBack){
|
||||
var _this = this;
|
||||
var defaultDailog = {
|
||||
width: 280, //宽度
|
||||
height: 'auto', //高度
|
||||
padding: '10px 16px', //padding
|
||||
title: '提示!', //提醒信息
|
||||
discription: '这是弹窗的描述!', //描述
|
||||
borderRadius: '4px', //圆角
|
||||
bottons: ['确定','取消'], //按钮信息
|
||||
maskBg: 'rgba(0,0,0,0.6)', //遮罩层背景色
|
||||
dailogBg: '#fff', //弹出框的背景色
|
||||
type: 'defalut', //类型 defalut primary success danger warning
|
||||
zIndex: '10000011', //层级
|
||||
hideScroll: false, //是否关闭滚动条
|
||||
isBtnHasBgColor: true, //确定 取消按钮是否有背景色
|
||||
showBoxShadow: false, //弹窗是否显示boxshadow
|
||||
animateStyle: 'fadeInNoTransform', //进入的效果
|
||||
isInput: false, //是否显示输入框
|
||||
inputPlaceholder: '填写相关内容', //文本输入提示框
|
||||
};
|
||||
|
||||
var opt = $.extend(defaultDailog,options||{});
|
||||
|
||||
// 设置btn是否有颜色
|
||||
var btn_className = opt.isBtnHasBgColor?'':'no_bg';
|
||||
|
||||
// 点击的索引
|
||||
var btnIndex = '';
|
||||
|
||||
if($('.cpt_mask_dailog').length){
|
||||
return;
|
||||
};
|
||||
|
||||
var _isScroll = function(){
|
||||
if(opt.hideScroll){
|
||||
$('body,html').css({
|
||||
overflow:'hidden',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var _colseScroll = function(){
|
||||
$('body,html').css({
|
||||
overflow:'auto',
|
||||
});
|
||||
}
|
||||
|
||||
var _overflowBtn = function(){
|
||||
// bottons超过两个提示
|
||||
if(opt.bottons.length>2){
|
||||
$dw.showMessage('按钮的最多显示上限不超过2个',3000,false);
|
||||
}
|
||||
}
|
||||
|
||||
var _isBoxShadow = function(){
|
||||
// 是否显示boxshadow
|
||||
if(!opt.showBoxShadow){
|
||||
_this.dailog_div.addClass('no_boxShadow');
|
||||
};
|
||||
}
|
||||
|
||||
var _btnIndex = function(name){
|
||||
//获取点击的索引
|
||||
var btnName = name || '';
|
||||
for(var i = 0;i<opt.bottons.length;i++){
|
||||
if(btnName === opt.bottons[i]){
|
||||
btnIndex = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var _init = function(){
|
||||
_this.dailog_mask = $("<div class='"+opt.animateStyle+" animated cpt_mask_dailog "+opt.type+"'></div>").css({
|
||||
'background':opt.maskBg,
|
||||
'z-index':opt.zIndex,
|
||||
}).appendTo($('body'));
|
||||
|
||||
_isScroll();
|
||||
// 判断按钮是否超出两个
|
||||
_overflowBtn();
|
||||
|
||||
_this.dailog_div = $("<div class='div_dailog'></div>").css({
|
||||
'width':opt.width,
|
||||
'height':opt.height,
|
||||
'background':opt.dailogBg,
|
||||
'-moz-border-radius':opt.borderRadius,
|
||||
'-webkit-border-radius':opt.borderRadius,
|
||||
'border-radius':opt.borderRadius,
|
||||
'padding':opt.padding,
|
||||
}).appendTo(_this.dailog_mask);
|
||||
|
||||
_this.title_dailog = $("<div class='title_dailog'></div>").html(opt.title).appendTo(_this.dailog_div);
|
||||
|
||||
if(!opt.isInput){
|
||||
_this.discription_dailog = $("<div class='discription_dailog'></div>").html(opt.discription).appendTo(_this.dailog_div);
|
||||
}else{
|
||||
_this.discription_dailog = $("<div class='discription_dailog'></div>").css({
|
||||
'text-indent':0,
|
||||
}).html(opt.discription).appendTo(_this.dailog_div);
|
||||
_this.input_dailog = $("<input type='text' class='dailog_input' placeholder="+opt.inputPlaceholder+">").appendTo(_this.discription_dailog);
|
||||
}
|
||||
|
||||
_this.dailog_divOperation = $("<div class='dailog_divOperation'></div>").appendTo(_this.dailog_div);
|
||||
|
||||
if(!(opt.bottons.length === 2)){
|
||||
_this.firstBtn = $("<span class='btn_span "+btn_className+"'></span>").html(opt.bottons[0]).attr({'data-name':opt.bottons[0]}).appendTo(_this.dailog_divOperation);
|
||||
}else{
|
||||
_this.firstBtn = $("<span class='btn_span "+btn_className+"'></span>").html(opt.bottons[0]).attr({'data-name':opt.bottons[0]}).appendTo(_this.dailog_divOperation);
|
||||
_this.secondBtn = $("<span class='btn_span "+btn_className+"'></span>").html(opt.bottons[1]).attr({'data-name':opt.bottons[1]}).appendTo(_this.dailog_divOperation);
|
||||
}
|
||||
|
||||
//是否显示boxshadow
|
||||
_isBoxShadow();
|
||||
}
|
||||
|
||||
_init();
|
||||
|
||||
//关闭点击和触摸的默认事件
|
||||
_this.dailog_mask.on('click',function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
_this.dailog_mask.on('touchmove',function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
// 点击的回调
|
||||
_this.dailog_divOperation.children().on('click',function(e){
|
||||
var name = $(this).attr('data-name');
|
||||
//获取点击的索引
|
||||
// _this.bottonIndex(name);
|
||||
_btnIndex(name);
|
||||
|
||||
var inputstatus = _this.input_dailog? 1:0;
|
||||
var inputvalue = inputstatus? _this.input_dailog.val():'';
|
||||
|
||||
// 设置返回值
|
||||
var ret = {
|
||||
index:btnIndex,
|
||||
input:{
|
||||
status:inputstatus,
|
||||
value:inputvalue,
|
||||
}
|
||||
};
|
||||
|
||||
_colseScroll();
|
||||
|
||||
//未写回调函数则不会有效果
|
||||
if(typeof(callBack) === 'function'){
|
||||
//执行回调函数
|
||||
callBack(ret);
|
||||
}
|
||||
_this.dailog_mask.remove();
|
||||
});
|
||||
|
||||
return _this;
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
1
static/index/entry20200609.css
Normal file
1
static/index/entry20200609.css
Normal file
File diff suppressed because one or more lines are too long
134
static/index/guide.css
Normal file
134
static/index/guide.css
Normal file
@ -0,0 +1,134 @@
|
||||
#mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50); /*定义低版本IE游览器的透明属性*/
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html{
|
||||
height:100%;
|
||||
}
|
||||
body{
|
||||
/*background:url(http://img.mukewang.com/538d971400016dbd16191694.jpg) center top;*/
|
||||
height:100%;
|
||||
}
|
||||
#mask{
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:#000;
|
||||
opacity:0.5;
|
||||
filter:alpha(opacity=50); /*定义低版本IE游览器的透明属性*/
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
display:none;
|
||||
}
|
||||
#searchTip{
|
||||
width:980px;
|
||||
height:800px;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
margin-left: -490px; /*让searchTip处于居中位置*/
|
||||
display:none;
|
||||
}
|
||||
#searchTip div{
|
||||
position:absolute;
|
||||
display:none;
|
||||
}
|
||||
#searchTip div a{
|
||||
position:absolute;
|
||||
width:96px;
|
||||
height:32px;
|
||||
cursor:pointer;
|
||||
text-indent:-999px; /*隐藏a标签中的文字*/
|
||||
overflow:hidden;
|
||||
}
|
||||
#searchTip div span{
|
||||
cursor:pointer;
|
||||
position:absolute;
|
||||
width:30px;
|
||||
height:30px;
|
||||
text-indent:-999px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.stepA{
|
||||
background:url(http://img.mukewang.com/538d974000011bda07450329.jpg);
|
||||
height:329px;
|
||||
width:745px;
|
||||
top:130px;
|
||||
left:-9px;
|
||||
display:block;
|
||||
}
|
||||
.stepA a{
|
||||
top:230px;
|
||||
left:490px;
|
||||
}
|
||||
.stepA span{
|
||||
top:143px;
|
||||
right:32px;
|
||||
}
|
||||
.stepB{
|
||||
background:url(http://img.mukewang.com/538d975f00017e8d06470405.jpg);
|
||||
width:647px;
|
||||
height:405px;
|
||||
top:2px;
|
||||
left:324px;
|
||||
}
|
||||
.stepB a{
|
||||
top:308px;
|
||||
left:146px;
|
||||
}
|
||||
.stepB span{
|
||||
top:196px;
|
||||
right:285px;
|
||||
}
|
||||
.stepC{
|
||||
background:url(http://img.mukewang.com/538d977c0001ef5f06540257.jpg);
|
||||
width:654px;
|
||||
height:257px;
|
||||
top:294px;
|
||||
left:318px;
|
||||
}
|
||||
.stepC a{
|
||||
top:155px;
|
||||
left:400px;
|
||||
}
|
||||
.stepC span{
|
||||
top:44px;
|
||||
right:35px;
|
||||
}
|
||||
.stepD{
|
||||
background:url(http://img.mukewang.com/538d97990001692305580348.jpg);
|
||||
width:558px;
|
||||
height:348px;
|
||||
top:78px;
|
||||
left:155px;
|
||||
}
|
||||
.stepD a{
|
||||
top:246px;
|
||||
left:304px;
|
||||
}
|
||||
.stepD span{
|
||||
top:135px;
|
||||
right:35px;
|
||||
}
|
||||
.stepE{
|
||||
background:url(http://img.mukewang.com/538d97b70001f47d03970342.jpg);
|
||||
width:397px;
|
||||
height:342px;
|
||||
top:79px;
|
||||
left:250px;
|
||||
}
|
||||
.stepE a {
|
||||
top: 245px;
|
||||
left: 153px;
|
||||
}
|
||||
BIN
static/index/logo7.png
Normal file
BIN
static/index/logo7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
static/index/logo8.png
Normal file
BIN
static/index/logo8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
618
static/index/normalize20200609.css
Normal file
618
static/index/normalize20200609.css
Normal file
@ -0,0 +1,618 @@
|
||||
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
|
||||
* Known issue: no IE 6 support.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
||||
* `em` units.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `font-family` inconsistency between `textarea` and other form
|
||||
* elements.
|
||||
*/
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins handled incorrectly in IE 6/7.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address font sizes and margins set differently in IE 6/7.
|
||||
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
|
||||
* and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
/*font-weight: bold;*/
|
||||
font-size: 0.67em;
|
||||
/*margin: 2.33em 0;*/
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
* Known issue: no IE 6/7 normalization.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 6/7/8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address CSS quotes not supported in IE 6/7.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `quotes` property not supported in Safari 4.
|
||||
*/
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address paddings set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct list images handled incorrectly in IE 7.
|
||||
*/
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
|
||||
* 2. Improve image quality when scaled in IE 7.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited in IE 6/7/8/9.
|
||||
* 2. Correct text not wrapping in Firefox 3.
|
||||
* 3. Correct alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font size not being inherited in all browsers.
|
||||
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improve appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to content-box in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
* 3. Remove excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Base styles: opinionated defaults
|
||||
========================================================================== */
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight: h5bp.com/i
|
||||
* These selection rule sets have to be separate.
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between images, videos, audio and canvas and the bottom of
|
||||
* their containers: h5bp.com/i/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
img,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Browse Happy prompt
|
||||
========================================================================== */
|
||||
|
||||
.browsehappy {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
538
static/index/style20201030.css
Normal file
538
static/index/style20201030.css
Normal file
@ -0,0 +1,538 @@
|
||||
body {
|
||||
overflow-x:hidden;
|
||||
}
|
||||
.mcd-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #FFF;
|
||||
/*height: 100px;*/
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
|
||||
/* == */
|
||||
/*width: 200px;*/
|
||||
/* == */
|
||||
}
|
||||
.mcd-menu li {
|
||||
position: relative;
|
||||
/*float:left;*/
|
||||
}
|
||||
.mcd-menu li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 2px 2px;
|
||||
/*color: #777;*/
|
||||
/*text-align: center;*/
|
||||
/*border-right: 1px solid #E7E7E7;*/
|
||||
/*width: 200px;*/
|
||||
/* == */
|
||||
text-align: left;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #EEE;
|
||||
/* == */
|
||||
}
|
||||
|
||||
.mcd-menu li ul a {
|
||||
font-size:12px;
|
||||
}
|
||||
.mcd-menu li a i {
|
||||
/*display: block;
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;*/
|
||||
|
||||
/* == */
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
margin: 0 8px 0 0;
|
||||
/* == */
|
||||
|
||||
}
|
||||
/* == */
|
||||
.mcd-menu li a p {
|
||||
float: left;
|
||||
margin: 0 ;
|
||||
}
|
||||
/* == */
|
||||
|
||||
.mcd-menu li a strong {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.mcd-menu li a small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
|
||||
position: relative;
|
||||
|
||||
transition: all 300ms linear;
|
||||
-o-transition: all 300ms linear;
|
||||
-ms-transition: all 300ms linear;
|
||||
-moz-transition: all 300ms linear;
|
||||
-webkit-transition: all 300ms linear;
|
||||
}
|
||||
.mcd-menu li:hover > a i {
|
||||
opacity: 1;
|
||||
-webkit-animation: moveFromTop 300ms ease-in-out;
|
||||
-moz-animation: moveFromTop 300ms ease-in-out;
|
||||
-ms-animation: moveFromTop 300ms ease-in-out;
|
||||
-o-animation: moveFromTop 300ms ease-in-out;
|
||||
animation: moveFromTop 300ms ease-in-out;
|
||||
}
|
||||
.mcd-menu li:hover a strong {
|
||||
opacity: 1;
|
||||
-webkit-animation: moveFromLeft 300ms ease-in-out;
|
||||
-moz-animation: moveFromLeft 300ms ease-in-out;
|
||||
-ms-animation: moveFromLeft 300ms ease-in-out;
|
||||
-o-animation: moveFromLeft 300ms ease-in-out;
|
||||
animation: moveFromLeft 300ms ease-in-out;
|
||||
}
|
||||
.mcd-menu li:hover a small {
|
||||
opacity: 1;
|
||||
-webkit-animation: moveFromRight 300ms ease-in-out;
|
||||
-moz-animation: moveFromRight 300ms ease-in-out;
|
||||
-ms-animation: moveFromRight 300ms ease-in-out;
|
||||
-o-animation: moveFromRight 300ms ease-in-out;
|
||||
animation: moveFromRight 300ms ease-in-out;
|
||||
}
|
||||
|
||||
.mcd-menu li:hover > a {
|
||||
color: #e67e22;
|
||||
}
|
||||
.mcd-menu li a.active {
|
||||
position: relative;
|
||||
color: #e67e22;
|
||||
border:0;
|
||||
/*border-top: 4px solid #e67e22;
|
||||
border-bottom: 4px solid #e67e22;
|
||||
margin-top: -4px;*/
|
||||
box-shadow: 0 0 5px #DDD;
|
||||
-moz-box-shadow: 0 0 5px #DDD;
|
||||
-webkit-box-shadow: 0 0 5px #DDD;
|
||||
|
||||
/* == */
|
||||
border-left: 4px solid #e67e22;
|
||||
border-right: 4px solid #e67e22;
|
||||
margin: 0 -4px;
|
||||
/* == */
|
||||
}
|
||||
.mcd-menu li a.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
/*top: 0;
|
||||
left: 45%;
|
||||
border-top: 5px solid #e67e22;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;*/
|
||||
|
||||
/* == */
|
||||
top: 42%;
|
||||
left: 0;
|
||||
border-left: 5px solid #e67e22;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
/* == */
|
||||
}
|
||||
|
||||
/* == */
|
||||
.mcd-menu li a.active:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
right: 0;
|
||||
border-right: 5px solid #e67e22;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
/* == */
|
||||
|
||||
@-webkit-keyframes moveFromTop {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(200%);
|
||||
-moz-transform: translateY(200%);
|
||||
-ms-transform: translateY(200%);
|
||||
-o-transform: translateY(200%);
|
||||
transform: translateY(200%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0%);
|
||||
-moz-transform: translateY(0%);
|
||||
-ms-transform: translateY(0%);
|
||||
-o-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes moveFromLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(200%);
|
||||
-moz-transform: translateX(200%);
|
||||
-ms-transform: translateX(200%);
|
||||
-o-transform: translateX(200%);
|
||||
transform: translateX(200%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
-moz-transform: translateX(0%);
|
||||
-ms-transform: translateX(0%);
|
||||
-o-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes moveFromRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-200%);
|
||||
-moz-transform: translateX(-200%);
|
||||
-ms-transform: translateX(-200%);
|
||||
-o-transform: translateX(-200%);
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
-moz-transform: translateX(0%);
|
||||
-ms-transform: translateX(0%);
|
||||
-o-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mcd-menu li ul,
|
||||
.mcd-menu li ul li ul {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
min-width: 200px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #FFF;
|
||||
/*border-top: 4px solid #e67e22;*/
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 300ms linear;
|
||||
-o-transition: all 300ms linear;
|
||||
-ms-transition: all 300ms linear;
|
||||
-moz-transition: all 300ms linear;
|
||||
-webkit-transition: all 300ms linear;
|
||||
/*top: 130px;*/
|
||||
z-index: 1000;
|
||||
|
||||
/* == */
|
||||
left:230px;
|
||||
top: 0px;
|
||||
border-left: 4px solid #e67e22;
|
||||
/* == */
|
||||
}
|
||||
.mcd-menu li ul:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
/*top: -8px;
|
||||
left: 23%;
|
||||
border-bottom: 5px solid #e67e22;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;*/
|
||||
|
||||
/* == */
|
||||
top: 25px;
|
||||
left: -9px;
|
||||
border-right: 5px solid #e67e22;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-top: 5px solid transparent;
|
||||
/* == */
|
||||
}
|
||||
.mcd-menu li:hover > ul,
|
||||
.mcd-menu li ul li:hover > ul {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
/*top: 100px;*/
|
||||
|
||||
/* == */
|
||||
left:150px;
|
||||
/* == */
|
||||
}
|
||||
/*.mcd-menu li ul li {
|
||||
float: none;
|
||||
}*/
|
||||
.mcd-menu li ul li a {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #EEE;
|
||||
|
||||
/* == */
|
||||
height: auto;
|
||||
/* == */
|
||||
}
|
||||
.mcd-menu li ul li a i {
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
.mcd-menu li ul li ul {
|
||||
left: 230px;
|
||||
top: 0;
|
||||
border: 0;
|
||||
border-left: 4px solid #e67e22;
|
||||
}
|
||||
.mcd-menu li ul li ul:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
/*left: -14px;*/
|
||||
/* == */
|
||||
left: -9px;
|
||||
/* == */
|
||||
border-right: 5px solid #e67e22;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-top: 5px solid transparent;
|
||||
}
|
||||
.mcd-menu li ul li:hover > ul {
|
||||
top: 0px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*.mcd-menu li.float {
|
||||
float: right;
|
||||
}*/
|
||||
.mcd-menu li a.search {
|
||||
/*padding: 29px 20px 30px 10px;*/
|
||||
padding: 10px 10px 15px 10px;
|
||||
clear: both;
|
||||
}
|
||||
.mcd-menu li a.search i {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
}
|
||||
.mcd-menu li a.search input {
|
||||
border: 1px solid #EEE;
|
||||
padding: 10px;
|
||||
background: #FFF;
|
||||
outline: none;
|
||||
color: #777;
|
||||
|
||||
/* == */
|
||||
width:170px;
|
||||
float:left;
|
||||
/* == */
|
||||
}
|
||||
.mcd-menu li a.search button {
|
||||
border: 1px solid #e67e22;
|
||||
/*padding: 10px;*/
|
||||
background: #e67e22;
|
||||
outline: none;
|
||||
color: #FFF;
|
||||
margin-left: -4px;
|
||||
|
||||
/* == */
|
||||
float:left;
|
||||
padding: 10px 10px 11px 10px;
|
||||
/* == */
|
||||
}
|
||||
.mcd-menu li a.search input:focus {
|
||||
border: 1px solid #e67e22;
|
||||
}
|
||||
|
||||
|
||||
.search-mobile {
|
||||
display:none !important;
|
||||
background:#e67e22;
|
||||
border-left:1px solid #e67e22;
|
||||
border-radius:0 3px 3px 0;
|
||||
}
|
||||
.search-mobile i {
|
||||
color:#FFF;
|
||||
margin:0 !important;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 960px) and (max-width: 1199px) {
|
||||
.mcd-menu {
|
||||
margin-left:5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.mcd-menu {
|
||||
/*width: 20px;*/
|
||||
}
|
||||
.mcd-menu li a {
|
||||
position: relative;
|
||||
padding: 12px 0px;
|
||||
height:20px;
|
||||
/*width: 50px;*/
|
||||
}
|
||||
.mcd-menu li a small {
|
||||
display: none;
|
||||
}
|
||||
.mcd-menu li a strong {
|
||||
display: none;
|
||||
}
|
||||
.mcd-menu li a:hover strong ,.mcd-menu li a.active strong{
|
||||
/*display:block;*/
|
||||
display:none;
|
||||
font-size:5px;
|
||||
padding:3px 0;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0;
|
||||
background:#e67e22;
|
||||
color:#FFF;
|
||||
min-width:100%;
|
||||
text-transform:lowercase;
|
||||
font-weight:normal;
|
||||
text-align:center;
|
||||
}
|
||||
.mcd-menu li .search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mcd-menu li > ul {
|
||||
min-width:180px;
|
||||
left:70px;
|
||||
}
|
||||
.mcd-menu li:hover > ul {
|
||||
min-width:180px;
|
||||
left:50px;
|
||||
}
|
||||
.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
|
||||
min-width:150px;
|
||||
}
|
||||
.mcd-menu li ul li:hover > ul {
|
||||
left:180px;
|
||||
min-width:150px;
|
||||
}
|
||||
.mcd-menu li ul li ul li > ul {
|
||||
left:35px;
|
||||
top: 45px;
|
||||
border:0;
|
||||
border-top:4px solid #e67e22;
|
||||
}
|
||||
.mcd-menu li ul li ul li > ul:before {
|
||||
left:30px;
|
||||
top: -9px;
|
||||
border:0;
|
||||
border-bottom:5px solid #e67e22;
|
||||
border-left:5px solid transparent;
|
||||
border-right:5px solid transparent;
|
||||
}
|
||||
.mcd-menu li ul li ul li:hover > ul {
|
||||
left:30px;
|
||||
min-width:150px;
|
||||
top: 35px;
|
||||
}
|
||||
.mcd-menu li ul a {
|
||||
font-size:12px;
|
||||
}
|
||||
.mcd-menu li ul a i {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.5) 72%, rgba(0, 182, 234, 0.3) 100%);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-image: linear-gradient(135deg, #1DE9B6 0%, #08c4db 72%, #057494 100%);
|
||||
transition: all .2s;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(95, 95, 95, 0.7);
|
||||
}
|
||||
|
||||
.leftsmall {
|
||||
width: 3%;
|
||||
}
|
||||
.rightexpand {
|
||||
width: 97%;
|
||||
}
|
||||
.mcd-menu1 li a {
|
||||
position: relative;
|
||||
padding: 12px 0px;
|
||||
height:20px;
|
||||
/*width: 50px;*/
|
||||
}
|
||||
.mcd-menu1 li a small {
|
||||
display: none;
|
||||
}
|
||||
.mcd-menu1 li a strong {
|
||||
display: none;
|
||||
}
|
||||
.mcd-menu1 li a:hover strong ,.mcd-menu1 li a.active strong{
|
||||
/*display:block;*/
|
||||
display:none;
|
||||
font-size:5px;
|
||||
padding:3px 0;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0;
|
||||
background:#e67e22;
|
||||
color:#FFF;
|
||||
min-width:100%;
|
||||
text-transform:lowercase;
|
||||
font-weight:normal;
|
||||
text-align:center;
|
||||
}
|
||||
.mcd-menu1 li .search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mcd-menu1 li > ul {
|
||||
min-width:180px;
|
||||
left:70px;
|
||||
}
|
||||
.mcd-menu1 li:hover > ul {
|
||||
min-width:180px;
|
||||
left:50px;
|
||||
}
|
||||
.mcd-menu1 li ul li > ul, .mcd-menu li ul li ul li > ul {
|
||||
min-width:150px;
|
||||
}
|
||||
.mcd-menu1 li ul li:hover > ul {
|
||||
left:180px;
|
||||
min-width:150px;
|
||||
}
|
||||
.mcd-menu1 li ul li ul li > ul {
|
||||
left:35px;
|
||||
top: 45px;
|
||||
border:0;
|
||||
border-top:4px solid #e67e22;
|
||||
}
|
||||
.mcd-menu1 li ul li ul li > ul:before {
|
||||
left:30px;
|
||||
top: -9px;
|
||||
border:0;
|
||||
border-bottom:5px solid #e67e22;
|
||||
border-left:5px solid transparent;
|
||||
border-right:5px solid transparent;
|
||||
}
|
||||
.mcd-menu1 li ul li ul li:hover > ul {
|
||||
left:30px;
|
||||
min-width:150px;
|
||||
top: 35px;
|
||||
}
|
||||
.mcd-menu1 li ul a {
|
||||
font-size:12px;
|
||||
}
|
||||
.mcd-menu1 li ul a i {
|
||||
font-size:14px;
|
||||
}
|
||||
4
static/index/web20201030.css
Normal file
4
static/index/web20201030.css
Normal file
File diff suppressed because one or more lines are too long
27
templates/echart/403.html
Normal file
27
templates/echart/403.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
|
||||
<title>你需要激活</title>
|
||||
<meta name="keywords" content="你需要激活" />
|
||||
</head>
|
||||
<body>
|
||||
<h4>为方便大家交流使用问题, 所以强制要求加微信获取激活码, 请放心不需要费用</h4>
|
||||
<div><img src="https://www.smartchart.cn/static/images/auth.png" height="200px"></div>
|
||||
<div><input id="authkey" placeholder="请输入你的KEY"><button onclick="get_auth()">激活</button></div>
|
||||
<p><small><a href="https://www.smartchart.cn">@smartchart.cn</a> </small></p>
|
||||
<div><span id="authcontent"></span></div>
|
||||
<script src="https://www.smartchart.cn/static/js/jquery-2.2.3.min.js"></script>
|
||||
<script>
|
||||
function get_auth() {
|
||||
let key = $('#authkey').val();
|
||||
$.ajax({type: "POST",url: '/echart/auth_right/', data:{key: key} ,success: function (data)
|
||||
{ $('#authcontent').html(data['msg']);
|
||||
} });
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
103
templates/echart/div_editor.html
Normal file
103
templates/echart/div_editor.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>DIV设计</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
|
||||
<link rel="icon" type="image.png" href="https://www.smartchart.cn/static/images/favicon.ico">
|
||||
{# <link rel="stylesheet" href="https://www.smartchart.cn/static/bootstrap/css/bootstrap.min.css">#}
|
||||
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://www.smartchart.cn/static/editor/editor.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container_fluid">
|
||||
<div class="row_fluid">
|
||||
<div class="col-xs-12 col-md-7" style="padding:0.5% 0.5%;">
|
||||
<div class="NightTheme">
|
||||
<div id="main_container">
|
||||
<div id="core" class="core core_margin1">
|
||||
<div class="editorSet clearfix">
|
||||
<div>
|
||||
<div class="editor">
|
||||
<span class="label">{{name|safe}}</span><a class="submit-btn" id="submit">保存DIV</a>
|
||||
<select id="ace-theme">
|
||||
<option value="clouds">clouds</option>
|
||||
<option value="monokai">monokai</option>
|
||||
<option value="chrome">chrome</option>
|
||||
<option value="github">github</option>
|
||||
<option value="eclipse">eclipse</option>
|
||||
<option value="tomorrow">tomorrow</option>
|
||||
<option value="dawn">dawn</option>
|
||||
<option value="sqlserver">sqlserver</option>
|
||||
<option value="twilight">twilight</option>
|
||||
</select><span id="printlog" style="color:red"></span>
|
||||
<a class="glyphicon glyphicon-question-sign" title="帮助"
|
||||
style="color: rgb(155, 205, 60);float:right" onclick="load_help('help_div')"></a>
|
||||
<a class="glyphicon glyphicon-magnet" title="复制数据集"
|
||||
style="color: rgb(255, 140, 60);float:right" onclick="copy_ds()"></a>
|
||||
|
||||
|
||||
<pre id="editor1" class="edit-area"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5" style="padding:0.1% 0.1%;" id="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
</div>
|
||||
|
||||
<script src="https://www.smartchart.cn/static/js/jquery-2.2.3.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ace.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ext-language_tools.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/editor/common.js"></script>
|
||||
<script type="text/javascript">
|
||||
editor1 = init_editor('html');
|
||||
editor1.setValue(`{{div_str|safe}}`);
|
||||
$('#submit').click(function () {
|
||||
let e = editor1.getValue();
|
||||
console.log(e);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/echart/save_div/",
|
||||
data: {divid: GetQueryString('divid'), div: e},
|
||||
success: function (data) {
|
||||
console.log(data);
|
||||
$('#printlog').html(data['msg']);
|
||||
if (GetQueryString('r')) {
|
||||
try {
|
||||
window.opener.location.reload();
|
||||
// window.opener=null;window.close();
|
||||
} catch (e) {
|
||||
console.log('no opener');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
editor1.getSession().on('change', function (e) {
|
||||
$("#preview").html(editor1.getValue());
|
||||
$("#printlog").html('');
|
||||
});
|
||||
function copy_ds() {
|
||||
$.ajax({type:"GET",url:"/echart/copy_ds?divid="+GetQueryString('divid'),
|
||||
success: function(data){
|
||||
$('#printlog').html(data['msg']);
|
||||
if(data['status']==='success'){try {window.opener.location.reload();} catch (e) {console.log('no opener');}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
133
templates/echart/divlist_editor.html
Normal file
133
templates/echart/divlist_editor.html
Normal file
@ -0,0 +1,133 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>DIV清单设计</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
|
||||
<link rel="icon" type="image.png" href="https://www.smartchart.cn/static/images/favicon.ico">
|
||||
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://www.smartchart.cn/static/editor/editor.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container_fluid">
|
||||
<div class="row_fluid">
|
||||
<div class="col-xs-12 col-md-7" style="padding:0.5% 0.5%;">
|
||||
<div class="NightTheme">
|
||||
<div id="main_container">
|
||||
<div id="core" class="core core_margin1">
|
||||
<div class="editorSet clearfix">
|
||||
<div>
|
||||
<div class="editor">
|
||||
<span class="label">{{name|safe}}</span><a class="submit-btn" id="submit">保存DIV</a>
|
||||
<select id="ace-theme">
|
||||
<option value="clouds">clouds</option>
|
||||
<option value="monokai">monokai</option>
|
||||
<option value="chrome">chrome</option>
|
||||
<option value="github">github</option>
|
||||
<option value="eclipse">eclipse</option>
|
||||
<option value="tomorrow">tomorrow</option>
|
||||
<option value="dawn">dawn</option>
|
||||
<option value="sqlserver">sqlserver</option>
|
||||
<option value="twilight">twilight</option>
|
||||
</select><span id="printlog" style="color:red">带#号的行为标识位,不要修改</span>
|
||||
<a class="glyphicon glyphicon-sort-by-attributes" title="重置顺序" href="#"
|
||||
style="color: rgb(255, 140, 60);float:right" data-toggle="modal"
|
||||
data-target="#myModal_reset"></a>
|
||||
<a class="glyphicon glyphicon-question-sign" title="帮助" href="#"
|
||||
style="color: rgb(155, 205, 60);float:right" onclick="load_help('help_divlist')"></a>
|
||||
<pre id="editor1" class="edit-area"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5" style="padding:0.1% 0.1%;" id="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
</div>
|
||||
|
||||
<!-- 模态框（Modal） -->
|
||||
<div class="modal fade" id="myModal_reset" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_reset" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
||||
×
|
||||
</button>
|
||||
<h4 class="modal-title" id="myModalLabel_reset">
|
||||
确认重置顺序
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
将按照目前的顺序重置编号,自动更接option中的序号,并且将未激活的排在最后面
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="reset_seq()">
|
||||
开始执行
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://www.smartchart.cn/static/js/jquery-2.2.3.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ace.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ext-language_tools.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/editor/common.js"></script>
|
||||
<script type="text/javascript">
|
||||
editor1=init_editor('html');
|
||||
editor1.setValue(`{{div_str|safe}}`);
|
||||
$('#submit').click(function () {
|
||||
let e = editor1.getValue();
|
||||
console.log(e);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/echart/save_divlist/",
|
||||
data: {dashid: GetQueryString('dashid'), div: e},
|
||||
success: function (data) {
|
||||
console.log(data);
|
||||
$('#printlog').html(data['msg']);
|
||||
if (GetQueryString('r')) {
|
||||
try {
|
||||
window.opener.location.reload();
|
||||
// window.opener=null;window.close();
|
||||
} catch (e) {
|
||||
console.log('no opener');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
editor1.getSession().on('change', function (e) {
|
||||
$("#preview").html(editor1.getValue());
|
||||
$("#printlog").html('');
|
||||
});
|
||||
|
||||
function reset_seq(){
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/echart/reset_divseq/?dashid=" + GetQueryString('dashid'),
|
||||
success: function (data) {
|
||||
$('#printlog').html(data['msg']);
|
||||
$('#myModal_reset').modal('hide');
|
||||
try {
|
||||
window.opener.location.reload();
|
||||
} catch (e) {
|
||||
console.log('no opener');
|
||||
}
|
||||
}
|
||||
})}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
153
templates/echart/ds_editor.html
Normal file
153
templates/echart/ds_editor.html
Normal file
@ -0,0 +1,153 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>数据集设计</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
|
||||
<link rel="icon" type="image.png" href="https://www.smartchart.cn/static/images/favicon.ico">
|
||||
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://www.smartchart.cn/static/editor/editor.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container_fluid">
|
||||
<div class="row_fluid">
|
||||
<div class="col-xs-12 col-md-12" style="padding:0.5% 0.5%;">
|
||||
<div class="NightTheme">
|
||||
<div id="main_container">
|
||||
<div id="core" class="core core_margin1">
|
||||
<div class="editorSet clearfix">
|
||||
<div>
|
||||
<div class="editor">
|
||||
<span class="label" id="title"></span>
|
||||
<span class="glyphicon glyphicon-compressed" style="color: rgb(255, 140, 60);"
|
||||
id="conn"></span><a class="submit-btn" style="float: right"
|
||||
id="submit">保存并刷新</a>
|
||||
<select id="ace-theme">
|
||||
<option value="clouds">clouds</option>
|
||||
<option value="monokai">monokai</option>
|
||||
<option value="chrome">chrome</option>
|
||||
<option value="github">github</option>
|
||||
<option value="eclipse">eclipse</option>
|
||||
<option value="tomorrow">tomorrow</option>
|
||||
<option value="dawn">dawn</option>
|
||||
<option value="sqlserver">sqlserver</option>
|
||||
<option value="twilight">twilight</option>
|
||||
</select>
|
||||
<select id="dsseq">
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
<option value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
</select><span id="changedsseq"></span>
|
||||
<span id="printlog" style="color:red"></span>
|
||||
<a class="glyphicon glyphicon-question-sign" title="帮助"
|
||||
style="color: rgb(155, 205, 60);float:right" onclick="load_help('help_ds')"></a>
|
||||
<a class="glyphicon glyphicon-edit" title="切换调试界面" id="editorframe" href="#"
|
||||
style="color: rgb(255, 140, 60);float:right"> </a>
|
||||
<a class="glyphicon glyphicon-ok-sign" title="切换激活状态" id="onoff" href="#"
|
||||
style="color: rgb(126, 255, 140);float:right"> </a>
|
||||
<pre id="editor1" class="edit-area"></pre>
|
||||
<span class="glyphicon glyphicon-tags"
|
||||
style="color: rgb(255, 254, 170); font-size: 8px;">常规为三个字段(维度,维度,度量) 或 (维度,度量,度量...),参数可使用/* and xx = $PARAM */,不传参数据自动忽略
|
||||
你也可以直接使用dataset=[[]] 或{}来赋值. 建意用SQL工具调试好后再贴入, 更多dataset使用方法,参考 <a
|
||||
href="https://www.smartchart.cn/blog/article/2019/7/9/10.html"
|
||||
target="_blank">数据集说明</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-12" style="padding:0.5% 0.5%;height:100%;" id="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
</div>
|
||||
<!-- 修改名称 -->
|
||||
<div class="modal fade" id="modal_name" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_name"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-hidden="true">×
|
||||
</button>
|
||||
<h4 class="modal-title" id="myModalLabel_name">
|
||||
修改数据集名称
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="dsid_input">#</span>
|
||||
<input type="text" class="form-control" value="" placeholder="数据集名称" id="dsname_input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default"
|
||||
data-dismiss="modal">关闭
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="save_title()">
|
||||
提交更改
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div>
|
||||
<!-- 修改连接 -->
|
||||
<div class="modal fade" id="modal_conn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_conn"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-hidden="true">×
|
||||
</button>
|
||||
<h4 class="modal-title" id="myModalLabel_conn">
|
||||
修改连接
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>选择数据源</label>
|
||||
<select class="form-control" id="connselect">
|
||||
</select></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default"
|
||||
data-dismiss="modal">关闭
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="save_conn()">
|
||||
提交更改
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div>
|
||||
|
||||
<script src="https://www.smartchart.cn/static/js/jquery-2.2.3.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ace.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ext-language_tools.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/editor/common.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/editor/ds_editor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
134
templates/echart/ds_editor_iframe.html
Normal file
134
templates/echart/ds_editor_iframe.html
Normal file
@ -0,0 +1,134 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>数据集设计</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
|
||||
<link rel="icon" type="image.png" href="https://www.smartchart.cn/static/images/favicon.ico">
|
||||
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://www.smartchart.cn/static/editor/editor.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container_fluid">
|
||||
<div class="row_fluid">
|
||||
<div class="col-xs-6 col-md-6" style="padding:0.5% 0.5%;">
|
||||
<div class="NightTheme">
|
||||
<div id="main_container">
|
||||
<div id="core" class="core core_margin1">
|
||||
<div class="editorSet clearfix">
|
||||
<div>
|
||||
<div class="editor">
|
||||
<span class="label" id="title"></span><span class="glyphicon glyphicon-compressed"
|
||||
style="color: rgb(255, 140, 60);"
|
||||
id="conn"></span>
|
||||
<a class="glyphicon glyphicon-th" style="color: rgb(255, 140, 60);"
|
||||
href="/admin/echart/echartdataset/">返回</a>
|
||||
<a title="帮助" class="glyphicon glyphicon-question-sign"
|
||||
style="color: rgb(155, 205, 60);float:right" href="#" onclick="load_help('help_ds')"></a>
|
||||
<a class="submit-btn glyphicon glyphicon-refresh" id="submit">保存并刷新</a>
|
||||
<select id="ace-theme">
|
||||
<option value="clouds">clouds</option>
|
||||
<option value="monokai">monokai</option>
|
||||
<option value="chrome">chrome</option>
|
||||
<option value="github">github</option>
|
||||
<option value="eclipse">eclipse</option>
|
||||
<option value="tomorrow">tomorrow</option>
|
||||
<option value="dawn">dawn</option>
|
||||
<option value="sqlserver">sqlserver</option>
|
||||
<option value="twilight">twilight</option>
|
||||
</select><span id="printlog" style="color:red"></span>
|
||||
<pre id="editor1" class="edit-area"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6" style="padding:0.5% 0.5%;">
|
||||
<iframe id="iframepage" class="iframechart" src="/echart/?type=z.chart&dev=1&dataset={{dsid}}"
|
||||
frameborder="0" scrolling="auto" width="100%"></iframe>
|
||||
<span class="glyphicon glyphicon-tags" style="font-size: 8px;"></span>常规为三个字段(维度,维度,度量) 或
|
||||
(维度,度量,度量...),参数可使用/* and xx = $PARAM */,不传参数据自动忽略
|
||||
你也可以直接使用dataset=[[]] 或{}来赋值. 建意用SQL工具调试好后再贴入, 更多dataset使用方法,参考 <a
|
||||
href="https://www.smartchart.cn/blog/article/2019/7/9/10.html" target="_blank">数据集说明</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
</div>
|
||||
<!-- 修改名称 -->
|
||||
<div class="modal fade" id="modal_name" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_name"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-hidden="true">×
|
||||
</button>
|
||||
<h4 class="modal-title" id="myModalLabel_name">
|
||||
修改数据集名称
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="dsid_input">#</span>
|
||||
<input type="text" class="form-control" value="" placeholder="数据集名称" id="dsname_input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default"
|
||||
data-dismiss="modal">关闭
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="save_title()">
|
||||
提交更改
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div>
|
||||
<!-- 修改连接 -->
|
||||
<div class="modal fade" id="modal_conn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_conn"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-hidden="true">×
|
||||
</button>
|
||||
<h4 class="modal-title" id="myModalLabel_conn">
|
||||
修改连接
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>选择数据源</label>
|
||||
<select class="form-control" id="connselect">
|
||||
</select></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default"
|
||||
data-dismiss="modal">关闭
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="save_conn()">
|
||||
提交更改
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div>
|
||||
<script src="https://www.smartchart.cn/static/js/jquery-2.2.3.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ace.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ext-language_tools.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/editor/common.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/editor/ds_editor_frame.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1335
templates/echart/editor_min.html
Normal file
1335
templates/echart/editor_min.html
Normal file
File diff suppressed because it is too large
Load Diff
127
templates/echart/option_editor.html
Normal file
127
templates/echart/option_editor.html
Normal file
@ -0,0 +1,127 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Option设计</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
|
||||
<link rel="icon" type="image.png" href="https://www.smartchart.cn/static/images/favicon.ico">
|
||||
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://www.smartchart.cn/static/editor/editor.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container_fluid">
|
||||
<div class="row_fluid">
|
||||
<div class="col-xs-12 col-md-7" style="padding:0.5% 0.5%;">
|
||||
<div class="NightTheme">
|
||||
<div id="main_container">
|
||||
<div id="core" class="core core_margin1">
|
||||
<div class="editorSet clearfix">
|
||||
<div>
|
||||
<div class="editor">
|
||||
<span class="label">{{name|safe}}</span><a class="submit-btn"
|
||||
id="submit">保存option</a>
|
||||
<select id="ace-theme">
|
||||
<option value="clouds">clouds</option>
|
||||
<option value="monokai">monokai</option>
|
||||
<option value="chrome">chrome</option>
|
||||
<option value="github">github</option>
|
||||
<option value="eclipse">eclipse</option>
|
||||
<option value="tomorrow">tomorrow</option>
|
||||
<option value="dawn">dawn</option>
|
||||
<option value="sqlserver">sqlserver</option>
|
||||
<option value="twilight">twilight</option>
|
||||
</select><a class="glyphicon glyphicon-import" href="#" id="load_sample"
|
||||
style="color: rgb(255, 140, 60);">加载样列</a>
|
||||
<span id="printlog" style="color:red"></span>
|
||||
<pre id="editor1" class="edit-area"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5" style="padding:0.1% 0.1%;" id="preview">
|
||||
<pre>
|
||||
{
|
||||
//初始参数
|
||||
"paraminit":{"paramname":"paramvalue"},
|
||||
//图形点击钻取联动
|
||||
"drill":{
|
||||
"1":{"paramname":"参数名","child":[2,3],"type":"seriesName"},
|
||||
"2":{"paramname":"参数名","child":[1],"type":"data[0]"}
|
||||
},
|
||||
//筛选器
|
||||
"filter":{
|
||||
"0":{"paramname":"参数名","child":[1,2,3]},
|
||||
"1":{"paramname":"参数名","child":[2,3]}
|
||||
},
|
||||
//公共数据集
|
||||
"commonds":{
|
||||
"4":"data0",
|
||||
"5":"ds_leftjoin(data0,data1)", //ds_fulljoin, ds_crossjoin
|
||||
"6":"ds_union(data0,data1)",
|
||||
"7":"ds_union(data0,data1,withhead=false)"
|
||||
},
|
||||
//动态播放
|
||||
"animate":{"2":{"dataLen":5,"interval":1000,"showtip":1}},
|
||||
//分布任务
|
||||
"client":"http://xxxxx",
|
||||
//图形背景色,深色:#0B1837 #101E44 #0f375f 淡色:#f2f2f2
|
||||
"chartcolor":"white"
|
||||
}</pre>
|
||||
更多<a href="https://www.smartchart.cn/blog/article/2019/11/6/28.html" target="_blank">设定说明</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://www.smartchart.cn/static/js/jquery-2.2.3.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ace.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/ace/ext-language_tools.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.smartchart.cn/static/editor/common.js"></script>
|
||||
<script type="text/javascript">
|
||||
var theme = localStorage.getItem('acetheme') || 'monokai';
|
||||
$('#ace-theme').val(theme);
|
||||
editor1=init_editor('json');
|
||||
editor1.setValue(`{{option|safe}}`);
|
||||
$('#submit').click(function () {
|
||||
let e = editor1.getValue();
|
||||
console.log(e);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/echart/save_option/",
|
||||
data: {dashid: GetQueryString('dashid'), option: e},
|
||||
success: function (data) {
|
||||
console.log(data);
|
||||
$('#printlog').html(data['msg']);
|
||||
if (GetQueryString('r')) {
|
||||
try {
|
||||
window.opener.location.reload();
|
||||
// window.opener=null;window.close();
|
||||
} catch (e) {
|
||||
console.log('no opener');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
editor1.getSession().on('change', function (e) {
|
||||
$("#printlog").html('');
|
||||
});
|
||||
$("#load_sample").click(function () {
|
||||
$.ajax({
|
||||
type: "get", url: 'https://www.smartchart.cn/smartdata/api/?i=advancesetup',
|
||||
success: function (data) {
|
||||
editor1.setValue(data);
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
115
templates/index/index.html
Normal file
115
templates/index/index.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-title" content="SmartChart">
|
||||
<link rel="icon" type="image.png" href="https://www.smartchart.cn/static/images/favicon.ico">
|
||||
<title>SmartChart</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" media="all" href="https://www.smartchart.cn/static/index/web20201030.css">
|
||||
<link rel="stylesheet" media="all" href="https://www.smartchart.cn/static/index/entry20200609.css">
|
||||
<link rel='stylesheet prefetch' href='https://www.smartchart.cn/static/index/normalize20200609.css'>
|
||||
<link rel="stylesheet" href="https://www.smartchart.cn/static/index/style20201030.css" media="screen" type="text/css" />
|
||||
<link rel="stylesheet" href="https://www.smartchart.cn/static/index/dialog.css" media="screen" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
.nav_end {
|
||||
float: right;
|
||||
height: 55px;
|
||||
padding: 15px 0px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.head_icon {
|
||||
color:#606266;
|
||||
}
|
||||
.head_icon :hover {
|
||||
color: red;
|
||||
}
|
||||
.ct {
|
||||
color: #00A000;
|
||||
}
|
||||
input::-webkit-calendar-picker-indicator{ display: none; -webkit-appearance: none; }
|
||||
#auto_div
|
||||
{
|
||||
display: none;
|
||||
width: 300px;
|
||||
border: 1px #74c0f9 solid;
|
||||
background: #FFF;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
color: #323232;
|
||||
}
|
||||
iframe{padding: 0;margin: 0;}
|
||||
</style>
|
||||
|
||||
<script src="https://www.smartchart.cn/static/js/jquery-2.2.3.min.js"></script>
|
||||
<script src="https://www.smartchart.cn/static/index/colorpicker.js"></script>
|
||||
<script src="https://www.smartchart.cn/static/index/dialog.js"></script>
|
||||
<script src="https://www.smartchart.cn/static/index/index_d.js"></script>
|
||||
</head>
|
||||
|
||||
<body lang="zh-CN" class="reader-black-font" style="overflow-y: scroll;">
|
||||
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="smart_head">
|
||||
<div >
|
||||
<a class="logo" href="https://www.smartchart.cn"><img src="https://www.smartchart.cn/static/index/logo9.png" alt="smartchart logo"></a>
|
||||
<div class="nav_end">
|
||||
<span class="head_icon" id="devchange" onclick="reset_dev()"><small><i class="fas fa-user"></i>{{user}}</small></span>
|
||||
<a id="color-picker" class="picker head_icon" title="首页样式"><small><i class="fas fa-palette"></i></small></a>|
|
||||
<a class="head_icon" id="iframe-heart" onclick="make_love()" title="收藏" ><small><i class="fas fa-heart"></i></small></a>
|
||||
<a class="head_icon" id="iframe-full" onclick="requestFullScreen()" title="全屏" ><small><i class="fas fa-expand"></i></small></a>
|
||||
<a class="head_icon" id="iframe-refresh" onclick="refreshFrame()" title="刷新"><small><i class="fas fa-sync-alt"></i></small></a>
|
||||
<a class="head_icon" id="iframe-message" onclick="report_msg()" title="留言"><small><i class="fab fa-rocketchat"></i></small></a>
|
||||
<a class="head_icon" id="iframe-edit" title="编辑" onclick="reset_dev()"><small><i class="fas fa-edit"></i></small></a>|
|
||||
<a class="head_icon" title="帮助" onclick="help()"><small><i class="fas fa-question-circle"></i></small></a>
|
||||
<a href="https://gitee.com/smartchart/django_smartchart" title="手机版"><small><i class="fas fa-mobile-alt"></i></small></a>
|
||||
<a href="/echart/logout" title="退出"><small><i class="fas fa-sign-out-alt"></i></small></a>
|
||||
<a href="javascript:changelayout();" title="切换可视区"><img src="https://www.smartchart.cn/static/images/change.png" style="height: 25px;"></a>
|
||||
</div>
|
||||
<div >
|
||||
<div class="collapse navbar-collapse" id="menu">
|
||||
<ul class="nav navbar-nav"> <li class="tab active">
|
||||
<a class="menu-text" href="/admin">DataLab</a>
|
||||
</li>
|
||||
<li class="tab">
|
||||
<a class="menu-text" href="https://www.smartchart.cn">SmartChart社区</a>
|
||||
</li>
|
||||
<li class="search">
|
||||
<form action="javascript:refresh_index();" accept-charset="UTF-8" method="get">
|
||||
<input name="utf8" type="hidden" value="✓">
|
||||
<input type="text" name="q" id="id_title" autocomplete="off" value="" placeholder="Search" class="search-input">
|
||||
<div id="auto_div"></div>
|
||||
<a class="search-btn" href="javascript:refresh_index()"><i class="iconfont ic-search"></i></a>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-2 col-sm-1 col-md-4" style="border-right:1px solid #f0f0f0;padding-top:10px" id="leftside">
|
||||
<nav id="nav_1">
|
||||
<ul class="mcd-menu" id="show_list">
|
||||
</ul></nav>
|
||||
</div>
|
||||
<div class="col-xs-22 col-sm-23 col-md-20" id="mainframe">
|
||||
<div class="col-xs-24 col-sm-16 col-sm-offset-1 main">
|
||||
<ul class="note-list" id="tbshow_list">
|
||||
<h5 >报表加载中.....</h5>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<p>©powered by smartchart.cn,Designed by JohnYan mailto:84345999@qq.com, https://gitee.com/smartchart/django_smartchart</p>-->
|
||||
</body>
|
||||
</html>
|
||||
<script>var p_background = localStorage.getItem('p_background') || "#ffffff";let p_background_h = localStorage.getItem('p_background_h') || "#ffffff";$('#smart_head').css('background',p_background_h);$('#leftside').css('height',$(document.body).height())
|
||||
Colorpicker.create({el: "color-picker", color: p_background, change: function(elem, hex) {if ($('#show_list').hasClass('mcd-menu1')){$('#smart_head').css('background',hex);localStorage.setItem('p_background_h',hex);
|
||||
}else{$('#leftside').css('background',hex);localStorage.setItem('p_background',hex);p_background=hex;}}});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user