增加一个home页
zhizou
parent
ef59fb0dc6
commit
7f27598636
|
|
@ -1,6 +1,26 @@
|
|||
[v-cloak]{
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
/**card**/
|
||||
.ok-card-body{
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ok-card-body-tb{
|
||||
padding: 20px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ok-card{
|
||||
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.08);
|
||||
box-shadow: 0 0 20px rgba(0,0,0,.08);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/**断行**/
|
||||
.wp1{ word-break:break-all; }/*只对英文起作用，以字母作为换行依据*/
|
||||
.wp2{ word-wrap:break-word; }/*--只对英文起作用，以单词作为换行依据*/
|
||||
|
|
@ -8,13 +28,20 @@
|
|||
.wp4{white-space:nowrap; }/*强制不换行，都起作用*/
|
||||
|
||||
/**边距**/
|
||||
.p0{
|
||||
padding: 0!important;
|
||||
}
|
||||
.ptb0{
|
||||
padding-top: 0!important;
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
.plr0{
|
||||
padding-left: 0!important;
|
||||
padding-right: 0!important;
|
||||
}
|
||||
.ptb20{
|
||||
padding-top: 20!important;
|
||||
padding-bottom: 20!important;
|
||||
padding-top: 20px!important;
|
||||
padding-bottom: 20px!important;
|
||||
}
|
||||
.plr20{
|
||||
padding-left: 20px!important;
|
||||
|
|
@ -117,8 +144,20 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*减去220是左侧的菜单宽度为220*/
|
||||
|
||||
@media screen and (max-width: 750px) {/*当屏幕宽度小于970-220时执行*/
|
||||
.ok-in-hide-md{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 548px) {/*当屏幕宽度小于768-220时执行*/
|
||||
[ok-pc-in-show],
|
||||
.ok-in-hide-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
.cart-data .img-box{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.cart-data .img-box img{
|
||||
width: 60px;
|
||||
|
|
@ -36,7 +37,6 @@
|
|||
.cart-data .cart-r{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.my-card-title{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,143 @@
|
|||
@import "./common.css";
|
||||
@import "../lib/layui/css/layui.css";
|
||||
|
||||
.data-body {
|
||||
display: flex;
|
||||
padding:20px;
|
||||
padding-bottom: 0;
|
||||
color:#333333;
|
||||
}
|
||||
.data-body .media-cont {
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.data-body .media-cont .tit{
|
||||
font-size: 16px;
|
||||
padding-bottom:5px;
|
||||
}
|
||||
.data-body .media-cont .num{
|
||||
font-size: 24px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.data-body .w-img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.data-body .w-img img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.line-home-a{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.cart-data .stat-text {
|
||||
color: #455a64;
|
||||
font-size: 24px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.extra-small-font {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cart-data .stat-heading {
|
||||
color: #99abb4;
|
||||
}
|
||||
|
||||
.cart-data .img-box {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cart-data .img-box img {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.cart-data .cart-r {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.my-card-title {
|
||||
color: #212529;
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**图表样式**/
|
||||
.map-body {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.map-china {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
/***进度条***/
|
||||
.progress-box {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progress-box .por-title {
|
||||
font-weight: 600;
|
||||
color: #868e96;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.progress-box .por-txt {
|
||||
font-size: 13px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.progress-box .pro-head {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.progress-box .pro-head img {
|
||||
background: #BEA8AB;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.progress-box .pro-data {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
flex: 1;
|
||||
/*float: left;*/
|
||||
/*width: 70%;*/
|
||||
}
|
||||
|
||||
/**日历**/
|
||||
#calendar .layui-laydate {
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .08);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, .08);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
[
|
||||
{
|
||||
"title": "后台首页",
|
||||
"title": "主页一",
|
||||
"fontFamily": "ok-icon",
|
||||
"icon": "",
|
||||
"href": "pages/home.html",
|
||||
|
|
@ -8,6 +8,13 @@
|
|||
"spread": true,
|
||||
"isCheck": true
|
||||
},
|
||||
{
|
||||
"title": "主页二",
|
||||
"fontFamily": "layui-icon",
|
||||
"icon": "layui-icon-home",
|
||||
"href": "pages/home2.html",
|
||||
"isClose": false
|
||||
},
|
||||
{
|
||||
"title": "字体图标",
|
||||
"icon": "",
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
<li class="layui-nav-item layui-this">
|
||||
<a href="javascript:;" lay-id="1" data-url="pages/home.html">
|
||||
<i is-close=false class="ok-icon ok-iconairplay"></i>
|
||||
后台首页
|
||||
主页一
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
<ul class="layui-tab-title ok-tab-title not-scroll">
|
||||
<li class="layui-this" lay-id="1" tab="index">
|
||||
<i class="ok-icon ok-iconairplay"></i>
|
||||
<cite is-close=false>后台首页</cite>
|
||||
<cite is-close=false>主页一</cite>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
"use strict";
|
||||
var useModel = ["form", "table", "laytpl", "laydate",
|
||||
var useModel = ["form", "okUtils", "table", "laytpl", "laydate",
|
||||
"element", "jquery", "countUp", "echartsData"];//需要引入的模块
|
||||
layui.config({
|
||||
base: "../js/"
|
||||
|
|
@ -9,6 +9,7 @@ layui.config({
|
|||
laydate = layui.laydate,
|
||||
element = layui.element,
|
||||
table = layui.table,
|
||||
okUtils = layui.okUtils,
|
||||
$ = layui.jquery,
|
||||
laytpl = layui.laytpl;
|
||||
/**静态数据**/
|
||||
|
|
@ -29,6 +30,7 @@ layui.config({
|
|||
/**图表**/
|
||||
var mapTree = echarts.init($("#mapOne")[0], "mytheme");
|
||||
var mapChina = echarts.init($('#mapChina')[0]);
|
||||
okUtils.echartsResize(mapTree, mapChina);
|
||||
|
||||
mapTree.setOption(echartsData.mapTree);//数据图
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
"use strict";
|
||||
var useModel = ["form", "okUtils", "table", "laytpl", "laydate",
|
||||
"element", "jquery", "countUp", "home2Data"];//需要引入的模块
|
||||
layui.config({
|
||||
base: "../js/"
|
||||
}).use(useModel, function () {
|
||||
var $form = layui.form,
|
||||
countUp = layui.countUp,
|
||||
laydate = layui.laydate,
|
||||
element = layui.element,
|
||||
table = layui.table,
|
||||
okUtils = layui.okUtils,
|
||||
$ = layui.jquery,
|
||||
laytpl = layui.laytpl;
|
||||
/**静态数据**/
|
||||
var echartsData = layui.home2Data;
|
||||
init();
|
||||
|
||||
function init() {
|
||||
/**今日访问量**/
|
||||
var elem_nums = $(".media-cont .num");
|
||||
elem_nums.each(function (i, j) {
|
||||
let ran = parseInt(Math.random() * 99 + 1);
|
||||
!new countUp({
|
||||
target: j,
|
||||
endVal: 20 * ran
|
||||
}).start();
|
||||
});
|
||||
|
||||
/**4个图表**/
|
||||
var echIncome = echarts.init($("#echIncome")[0]);
|
||||
var echGoods = echarts.init($('#echGoods')[0]);
|
||||
var echBlogs = echarts.init($("#echBlogs")[0]);
|
||||
var echUser = echarts.init($('#echUser')[0]);
|
||||
okUtils.echartsResize(echIncome, echGoods, echBlogs, echUser);
|
||||
|
||||
echIncome.setOption(echartsData.income);//数据图
|
||||
echGoods.setOption(echartsData.goods);//数据图
|
||||
echBlogs.setOption(echartsData.blogs);//数据图
|
||||
echUser.setOption(echartsData.user);//数据图
|
||||
|
||||
//用户活跃量,用户访问来源
|
||||
var echOne = echarts.init($("#echOne")[0], "themez");
|
||||
var echTwo = echarts.init($("#echTwo")[0], "themez");
|
||||
var mapThree = echarts.init($("#mapThree")[0], "themez");
|
||||
okUtils.echartsResize(echOne, echTwo, mapThree);
|
||||
|
||||
echOne.setOption(echartsData.echOne);//数据图
|
||||
echTwo.setOption(echartsData.echTwo);//数据图
|
||||
mapThree.setOption(echartsData.mapThree);//数据图
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
function randomData() {
|
||||
return Math.round(Math.random() * 500);
|
||||
}
|
||||
|
||||
function ecchartData(color) {
|
||||
color = color || "#00c292";
|
||||
return {
|
||||
color,
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '-1%',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '5px',
|
||||
containLabel: false
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
splitLine: {//设置竖线样式
|
||||
show: false//隐藏竖线
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {//设置横线样式
|
||||
show: false//隐藏横线
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '用户',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
symbol: "none",//去掉小圆点
|
||||
clickable: false,
|
||||
areaStyle: {},
|
||||
data: [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
var echOne = {
|
||||
color: "#03a9f3",
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar'
|
||||
}]
|
||||
};
|
||||
var echTwo = {
|
||||
title: {
|
||||
show: false,
|
||||
text: '用户访问来源',
|
||||
subtext: '纯属虚构',
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: '直接访问'},
|
||||
{value: 310, name: '邮件营销'},
|
||||
{value: 234, name: '联盟广告'},
|
||||
{value: 135, name: '视频广告'},
|
||||
{value: 1548, name: '搜索引擎'}
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
var mapThree = {
|
||||
title: {
|
||||
show: false,
|
||||
text: '堆叠区域图'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {//设置横线样式
|
||||
show: false//隐藏横线
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {normal: {}},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
areaStyle: {normal: {}},
|
||||
data: [370, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
layui.define(function (exports) {
|
||||
var income = ecchartData("#00c292");
|
||||
var goods = ecchartData("#ab8ce4");
|
||||
var blogs = ecchartData("#03a9f3");
|
||||
var user = ecchartData("#fb9678");
|
||||
|
||||
exports('home2Data', {
|
||||
income,
|
||||
goods,
|
||||
blogs,
|
||||
user,
|
||||
echOne,
|
||||
echTwo,
|
||||
mapThree,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,514 @@
|
|||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory);
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts);
|
||||
}
|
||||
}(this, function (exports, echarts) {
|
||||
var log = function (msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg);
|
||||
}
|
||||
};
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded');
|
||||
return;
|
||||
}
|
||||
echarts.registerTheme('themez', {
|
||||
"color": [
|
||||
"#00c292",
|
||||
"#9a66e4",
|
||||
"#03a9f3",
|
||||
"#fb9678",
|
||||
"#ed4014",
|
||||
"#ab8ce4",
|
||||
"#e46cbb"
|
||||
],
|
||||
"backgroundColor": "rgba(0, 0, 0, 0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#aaa"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 2
|
||||
}
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 2
|
||||
}
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false
|
||||
},
|
||||
"bar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#c23531",
|
||||
"color0": "#314656",
|
||||
"borderColor": "#c23531",
|
||||
"borderColor0": "#314656",
|
||||
"borderWidth": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 1,
|
||||
"color": "#aaa"
|
||||
}
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false,
|
||||
"color": [
|
||||
"#00c292",
|
||||
"#ab8ce4",
|
||||
"#03a9f3",
|
||||
"#fb9678",
|
||||
"#ed4014",
|
||||
"#e46cbb",
|
||||
"#9a66e4"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#eee",
|
||||
"borderColor": "#444",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(255,215,0,0.8)",
|
||||
"borderColor": "#444",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(100,0,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#eee",
|
||||
"borderColor": "#444",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(255,215,0,0.8)",
|
||||
"borderColor": "#444",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(100,0,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#ccc"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#ccc"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#ccc"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#ccc"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"normal": {
|
||||
"borderColor": "#999"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#666"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#293c55",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#293c55",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#a9334c"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#293c55",
|
||||
"borderColor": "#293c55",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#293c55",
|
||||
"borderColor": "#293c55",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#e43c59",
|
||||
"borderColor": "rgba(194,53,49, 0.5)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#293c55"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#293c55"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#bf444c",
|
||||
"#d88273",
|
||||
"#f6efa6"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(47,69,84,0)",
|
||||
"dataBackgroundColor": "rgba(47,69,84,0.3)",
|
||||
"fillerColor": "rgba(167,183,204,0.4)",
|
||||
"handleColor": "#a7b7cc",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
|
@ -223,14 +223,18 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
if (data.children != undefined && data.children.length > 0) {
|
||||
temp += '<a>';
|
||||
if (data.icon != undefined && data.icon != '') {
|
||||
if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) {
|
||||
if(!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0){
|
||||
if (data.icon.indexOf("&#") >= 0) {
|
||||
temp += ('<i class="layui-icon">{0}</i>').format(data.icon);
|
||||
}else{
|
||||
temp += ('<i class="layui-icon {0}"></i>').format(data.icon);
|
||||
}
|
||||
}else if (data.fontFamily) {
|
||||
if (data.icon.indexOf("&#") >= 0) {
|
||||
temp += ('<i class="{0}">{1}</i>').format(data.fontFamily, data.icon);
|
||||
} else {
|
||||
temp += ('<i class="{0} {1}"></i>').format(data.fontFamily, data.icon);
|
||||
}
|
||||
} else {
|
||||
temp += ('<i class="layui-icon" data-icon="{0}">{1}</i>').format(data.icon, data.icon);
|
||||
}
|
||||
}
|
||||
temp += '<cite>' + data.title + '</cite>';
|
||||
|
|
@ -252,14 +256,18 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
temp += ('<a lay-id="{0}" data-url="{1}" is-close="{2}">').format(tabID, data.href, isClose);
|
||||
}
|
||||
if (data.icon != undefined && data.icon != '') {
|
||||
if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) {
|
||||
if(!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0){
|
||||
if (data.icon.indexOf("&#") >= 0) {
|
||||
temp += ('<i class="layui-icon">{0}</i>').format(data.icon);
|
||||
}else{
|
||||
temp += ('<i class="layui-icon {0}"></i>').format(data.icon);
|
||||
}
|
||||
}else if (data.fontFamily) {
|
||||
if (data.icon.indexOf("&#") >= 0) {
|
||||
temp += ('<i class="{0}">{1}</i>').format(data.fontFamily, data.icon);
|
||||
} else {
|
||||
temp += ('<i class="{0} {1}"></i>').format(data.fontFamily, data.icon);
|
||||
}
|
||||
} else {
|
||||
temp += ('<i class="layui-icon" data-icon="{0}">{1}</i>').format(data.icon, data.icon);
|
||||
}
|
||||
}
|
||||
temp += ('<cite>{0}</cite></a>').format(data.title);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,23 @@
|
|||
layui.define(["jquery"], function (exprots) {
|
||||
var $ = layui.jquery;
|
||||
var okUtils = {
|
||||
getBodyWidth:function () {
|
||||
getBodyWidth: function () {
|
||||
return document.body.scrollWidth;//body的总宽度
|
||||
},
|
||||
echartsResize(...elemnt) {
|
||||
/*
|
||||
* 主要用于对echart视图自动适应宽度
|
||||
* elemnt:可变参数
|
||||
* eg:
|
||||
* var mapTree = echarts.init($("#mapOne")[0], "mytheme");
|
||||
* var mapTree2 = echarts.init($("#mapOne")[0], "mytheme");
|
||||
* resize(mapTree,mapTree2);
|
||||
* */
|
||||
window.addEventListener("resize", () => {
|
||||
for (var i = 0; i < elemnt.length; i++) {
|
||||
elemnt[i].resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
exprots("okUtils", okUtils);
|
||||
|
|
|
|||
|
|
@ -68,11 +68,13 @@
|
|||
function clone(origin) {
|
||||
return JSON.parse(JSON.stringify(origin))
|
||||
}
|
||||
|
||||
layui.config({
|
||||
base: "../../js/"
|
||||
}).use(["jquery", "mapTest", "echartsData"], function () {
|
||||
}).use(["jquery", "okUtils", "mapTest", "echartsData"], function () {
|
||||
var $ = layui.jquery,
|
||||
mapTest = layui.mapTest,
|
||||
okUtils = layui.okUtils,
|
||||
echartsData = layui.echartsData;
|
||||
echartsData.mapChina.series[0].data = echartsData.Address;//地图数据
|
||||
|
||||
|
|
@ -87,7 +89,7 @@
|
|||
var china_b = echarts.init($('#china_b')[0]);
|
||||
var china_c = echarts.init($('#china_c')[0]);
|
||||
var china_d = echarts.init($('#china_d')[0]);
|
||||
|
||||
okUtils.echartsResize(china1, china_a, china_b, china_c, china_d);
|
||||
china1.setOption(chinaData);
|
||||
china_a.setOption(option_a);
|
||||
china_b.setOption(option_b);
|
||||
|
|
|
|||
|
|
@ -60,8 +60,9 @@
|
|||
}
|
||||
layui.config({
|
||||
base: "../../js/"
|
||||
}).use(["jquery", "mapTest", "echartsData"], function () {
|
||||
}).use(["jquery", "okUtils", "mapTest", "echartsData"], function () {
|
||||
var $ = layui.jquery,
|
||||
okUtils = layui.okUtils,
|
||||
echartsData = layui.echartsData;
|
||||
var data = echartsData.Address;//地图数据
|
||||
var chinaData = echartsData.mapChina2;
|
||||
|
|
@ -83,6 +84,7 @@
|
|||
let chinaTemp = JSON.parse(JSON.stringify(chinaData));
|
||||
let china1 = echarts.init($('#china1')[0]);
|
||||
china1.setOption(chinaTemp);
|
||||
okUtils.echartsResize(china1);
|
||||
}
|
||||
|
||||
function china2() {
|
||||
|
|
@ -90,12 +92,14 @@
|
|||
chinaTemp.visualMap.show = false;//不显示数据条
|
||||
let china1 = echarts.init($('#china2')[0]);
|
||||
china1.setOption(chinaTemp);
|
||||
okUtils.echartsResize(china1);
|
||||
}
|
||||
|
||||
function china3() {
|
||||
let chinaTemp = echartsData.mapChina3;
|
||||
let china1 = echarts.init($('#china3')[0]);
|
||||
china1.setOption(chinaTemp);
|
||||
okUtils.echartsResize(china1);
|
||||
}
|
||||
|
||||
function china4() {
|
||||
|
|
@ -103,6 +107,7 @@
|
|||
chinaTemp.visualMap.show = false;//不显示数据条
|
||||
let china1 = echarts.init($('#china4')[0]);
|
||||
china1.setOption(chinaTemp);
|
||||
okUtils.echartsResize(china1);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix cart-data">
|
||||
<div class="img-box">
|
||||
<div class="img-box" ok-pc-in-show>
|
||||
<img src="../images/home-01.png" alt="none"/>
|
||||
</div>
|
||||
<div class="cart-r">
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix cart-data">
|
||||
<div class="img-box">
|
||||
<div class="img-box" ok-pc-in-show>
|
||||
<img src="../images/home-02.png" alt="none"/>
|
||||
</div>
|
||||
<div class="cart-r">
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix cart-data">
|
||||
<div class="img-box">
|
||||
<div class="img-box" ok-pc-in-show>
|
||||
<img src="../images/home-03.png" alt="none"/>
|
||||
</div>
|
||||
<div class="cart-r">
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix cart-data">
|
||||
<div class="img-box">
|
||||
<div class="img-box" ok-pc-in-show>
|
||||
<img src="../images/home-04.png" alt="none"/>
|
||||
</div>
|
||||
<div class="cart-r">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<link rel="stylesheet" href="../css/home2.css" media="all"/>
|
||||
<script type="text/javascript" src="../lib/echarts/echarts.min.js"></script>
|
||||
<script type="text/javascript" src="../lib/echarts/echarts.themez.js"></script>
|
||||
</head>
|
||||
<body class="childrenBody home">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="ok-card layui-card">
|
||||
<div class="ok-card-body p0 clearfix cart-data">
|
||||
<div class="data-body">
|
||||
<div class="media-cont">
|
||||
<p class="tit">收入</p>
|
||||
<h5 class="num">0</h5>
|
||||
</div>
|
||||
<div class="w-img" ok-pc-in-show>
|
||||
<img src="../images/home-01.png" alt="收入" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="echIncome" class="line-home-a"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="ok-card layui-card">
|
||||
<div class="ok-card-body p0 clearfix cart-data">
|
||||
<div class="data-body">
|
||||
<div class="media-cont">
|
||||
<p class="tit">商品</p>
|
||||
<h5 class="num">0</h5>
|
||||
</div>
|
||||
<div class="w-img" ok-pc-in-show>
|
||||
<img src="../images/home-02.png" alt="商品" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="echGoods" class="line-home-a"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="ok-card layui-card">
|
||||
<div class="ok-card-body p0 clearfix cart-data">
|
||||
<div class="data-body">
|
||||
<div class="media-cont">
|
||||
<p class="tit">博客</p>
|
||||
<h5 class="num">0</h5>
|
||||
</div>
|
||||
<div class="w-img" ok-pc-in-show>
|
||||
<img src="../images/home-03.png" alt="博客" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="echBlogs" class="line-home-a"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="ok-card layui-card">
|
||||
<div class="ok-card-body p0 clearfix cart-data">
|
||||
<div class="data-body">
|
||||
<div class="media-cont">
|
||||
<p class="tit">用户</p>
|
||||
<h5 class="num">0</h5>
|
||||
</div>
|
||||
<div class="w-img" ok-pc-in-show>
|
||||
<img src="../images/home-04.png" alt="用户" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="echUser" class="line-home-a"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md8">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<div class="my-card-title">用户活跃量</div>
|
||||
</div>
|
||||
<div class="ok-card-body map-body">
|
||||
<div style="height: 100%;" id="echOne"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<div class="my-card-title">用户访问来源</div>
|
||||
</div>
|
||||
<div class="ok-card-body map-body">
|
||||
<div style="height: 100%;" id="echTwo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="ok-card-body clearfix">
|
||||
<div class="map-china" id="mapThree"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script type="text/javascript" src="../lib/layui/layui.js"></script>
|
||||
<script type="text/javascript" src="../js/home2.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue