jdc_dkh_jxicustomer
Version:
JDC_dkh_jxicustomer ==== 产品经理：田宇，弥磊 设计：罗婷 交互：张钊
289 lines (284 loc) • 7.87 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<link rel="dns-prefetch" href="//misc.360buyimg.com">
<link rel="dns-prefetch" href="//static.360buyimg.com">
<meta name="keywords" content=""/>
<meta name="description" content="" />
<link rel="manifest" href="./manifest.json">
<title>京喜平台</title>
<link rel="stylesheet" type="text/css" href="//misc.360buyimg.com/jdf/1.0.0/unit/ui-base/1.0.0/ui-base.css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<script type="text/javascript" src="./../js/pwa.js"></script>
<script type="text/javascript" src="//misc.360buyimg.com/virtuals/popui/2.1.6/??js/lib/jquery-1.11.3.js,js/lib/seajs.js"></script>
<script type="text/javascript" src="../js/plugins/jquery.easing.min.js"></script>
<script type="text/javascript" src="../js/plugins/jquery.snippet.min.js"></script>
<script type="text/javascript" src="../js/plugins/jquery.slide.js"></script>
<script type="text/javascript" src="../js/core/echarts.js"></script>
</head>
<body>
{%widget name="header"%}
<div class="content wrapper clearfix">
<!-- banner轮播 -->
<div class="banner">
<div class="slider">
<ul class="slider-main">
<li class="slider-panel">
<img src="../css/i/slide.png" />
</li>
<li class="slider-panel">
<img src="../css/i/slide.png" />
</li>
<li class="slider-panel">
<img src="../css/i/slide.png" />
</li>
<li class="slider-panel">
<img src="../css/i/slide.png" />
</li>
<li class="slider-panel">
<img src="../css/i/slide.png" />
</li>
</ul>
<ul class="slider-nav">
<li class="slider-item fl"></li>
<li class="slider-item fl"></li>
<li class="slider-item fl"></li>
<li class="slider-item fl"></li>
<li class="slider-item fl"></li>
</ul>
</div>
</div>
<!-- 积分看板 -->
<div class="integral clearfix">
<div class="title clearfix">
<div class="name fl">
<i></i>
<span>积分看板</span>
</div>
<div class="go-detail fr">
<span>详情</span>
<i></i>
</div>
<ul class="btns fr">
<li class="fl">
<a href="#">去充值</a>
</li>
<li class="fl">
<a href="#">发积分</a>
</li>
<li class="fl">
<a href="#">开发票</a>
</li>
</ul>
</div>
<div class="integral-content">
<div class="integral-card total fl">
<div class="type">
<i></i>
<span>企业发放</span>
</div>
<ul class="detail">
<li class="fl">
<p>21,315.90</p>
<span>未发放</span>
</li>
<div class="ver fl"></div>
<li class="fl">
<p>21,315.90</p>
<span>未发放</span>
</li>
</ul>
</div>
<div class="integral-card use fl">
<div class="type">
<i></i>
<span>员工消费</span>
</div>
<ul class="detail">
<li class="fl">
<p>21,315.90</p>
<span>未发放</span>
</li>
<div class="ver fl"></div>
<li class="fl">
<p>21,315.90</p>
<span>未发放</span>
</li>
</ul>
</div>
</div>
</div>
<div class="message fl">
<div class="title clearfix">
<div class="name fl">
<i></i>
<span>积分看板</span>
</div>
<div class="go-detail fr">
<span>更多</span>
<i></i>
</div>
</div>
<ul class="message-content">
<li class="clearfix">
<i class="fl"></i>
<span class="fl name">酷兜-员工内购商城即将上线</span>
<span class="fr time">2018-06-25 10:11:00</span>
</li>
<li class="clearfix">
<i class="fl"></i>
<span class="fl name">酷兜-员工内购商城即将上线</span>
<span class="fr time">2018-06-25 10:11:00</span>
</li>
<li class="clearfix">
<i class="fl"></i>
<span class="fl name">酷兜-员工内购商城即将上线</span>
<span class="fr time">2018-06-25 10:11:00</span>
</li>
<li class="clearfix">
<i class="fl"></i>
<span class="fl name">酷兜-员工内购商城即将上线</span>
<span class="fr time">2018-06-25 10:11:00</span>
</li>
<li class="clearfix">
<i class="fl"></i>
<span class="fl name">酷兜-员工内购商城即将上线</span>
<span class="fr time">2018-06-25 10:11:00</span>
</li>
</ul>
</div>
<div class="care fl">
<div class="title clearfix">
<div class="name fl">
<i></i>
<span>关怀提醒</span>
</div>
<div class="calendar fr">
<i></i>
<span>日历</span>
</div>
</div>
<ul class="care-content clearfix">
<li class="festival fl">
<div class="detail fl">
<div class="time">
<i class="fl"></i>
<span>倒计时：22天</span>
</div>
<p class="date">6月17日</p>
<p class="name">父亲节</p>
</div>
<div class="img fr">
<img src="../css/i/festival.png" />
</div>
</li>
<li class="festival fl">
<div class="detail fl">
<div class="time">
<i class="fl"></i>
<span class="fl">倒计时：22天</span>
</div>
<p class="date">6月17日</p>
<p class="name">父亲节</p>
</div>
<div class="img fr">
<img src="../css/i/festival.png" />
</div>
</li>
</ul>
</div>
<div class="welfare fl">
<div class="title clearfix">
<div class="name fl">
<i></i>
<span>福利开支</span>
</div>
<div class="go-detail fr">
<span>详情</span>
<i></i>
</div>
</div>
<div class="welfare-content clearfix">
<div id="my-chart" style="width: 1210px; height: 300px;"></div>
</div>
</div>
</div>
<script>
seajs.use('../js/index.js')
seajs.use(['////misc.360buyimg.com/virtuals/popui/2.1.6/js/slide/slide'], function () {
// $('.slider').focusPic({
// nav: 'li.slider-item',
// content: 'li.slider-panel',
// currCls: 'slider-selected',
// stay: '2000',
// animate: 'zIndex'
// });
});
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init($('#my-chart')[0]);
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
xAxis: {
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
smooth: true,
data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
}],
series: [{
name: '销量',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(238,238,238,0)'
}, {
offset: 1,
color: 'rgba(253,96,90,0.11)'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
}
},
data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
}, {
name: '销量',
type: 'line',
lineStyle: {
width: 2,
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,255,0,0.8)'
}, {
offset: 1,
color: 'rgba(255,0,0,0.2)'
}]),
shadowColor : 'rgba(0,0,0,0.5)',
shadowBlur: 10,
shadowOffsetX: 8,
shadowOffsetY: 8
}
},
emphasis : {
label : {show: true}
},
symbol: "none",
smooth: true,
data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>