so域名网站,wordpress评论选择头像,东莞网站设计效果,wordpress标签筛选9、公用面板样式
所有的面板的基础样式是一致的#xff0c;提前布局好。
面板 .panel #xff1a;box-sizing#xff0c;边框图#xff0c;大小#xff0c;定位【51 38 20 132】容器 .inner#xff1a;padding#xff1a;24#xff0c;36#xff0c;定位外部拉宽标…9、公用面板样式
所有的面板的基础样式是一致的提前布局好。
面板 .panel box-sizing边框图大小定位【51 38 20 132】容器 .innerpadding2436定位外部拉宽标题 h320px颜色
/* 面板样式 */
.panel{box-sizing: border-box;border: 2rem solid transparent;border-width: 2.125rem 1.583rem 0.833rem 5.5rem;border-image: url(../images/border.png) 51 38 21 132;margin-bottom: 0.833rem;position: relative;
}
.panel .inner{padding: 1rem 1.5rem;position: absolute;top: -2.125rem;right: -1.583rem;bottom: -0.833rem;left: -5.5rem;
}
.panel h3{font-size: 0.833rem;color: #fff;
}10、概览区域-布局
html结构 div classoverview paneldiv classinnerdiv classitemh42,190/h4spani classicon-dot stylecolor: #006cff/i设备总数/span/divdiv classitemh4190/h4spani classicon-dot stylecolor: #6acca3/i季度新增/span/divdiv classitemh43,001/h4spani classicon-dot stylecolor: #6acca3/i运营设备/span/divdiv classitemh4108/h4spani classicon-dot stylecolor: #ed3f35/i异常设备/span/div/div/div样式描述
容器高度 110pxh4字体 28px #fff 左边距 4.8px 下间隙 8pxspan字体 16px #4c9bfd注意引入图标地址fonts文件夹里面的css
/* 概览区域 */
.overview{height: 4.583rem;
}
.overview .inner{display: flex;justify-content: space-between;
}
.overview h4{font-size: 1.167rem;padding-left: 0.2rem;color: #fff;margin-bottom: 0.333rem
}
.overview span{font-size: 0.667rem;color: #4c9bfd;
}11、监控区域-布局
html结构 !--监控--div classmonitor paneldiv classinnerdiv classtabsa hrefjavascript:; data-index0 classactive故障设备监控/aa hrefjavascript:; data-index1异常设备监控/a/divdiv classcontent styledisplay: block;div classheadspan classcol故障时间/spanspan classcol设备地址/spanspan classcol异常代码/span/divdiv classmarquee-viewdiv classmarqueediv classrowspan classcol20180701/spanspan classcol11北京市昌平西路金燕龙写字楼/spanspan classcol1000001/spanspan classicon-dot/span/divdiv classrowspan classcol20190601/spanspan classcol北京市昌平区城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190704/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000003/spanspan classicon-dot/span/divdiv classrowspan classcol20180701/spanspan classcol北京市昌平区建路金燕龙写字楼/spanspan classcol1000004/spanspan classicon-dot/span/divdiv classrowspan classcol20190701/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000005/spanspan classicon-dot/span/divdiv classrowspan classcol20190701/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000006/spanspan classicon-dot/span/divdiv classrowspan classcol20190701/spanspan classcol北京市昌平区建西路金燕龙写字楼/spanspan classcol1000007/spanspan classicon-dot/span/divdiv classrowspan classcol20190701/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000008/spanspan classicon-dot/span/divdiv classrowspan classcol20190701/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000009/spanspan classicon-dot/span/divdiv classrowspan classcol20190710/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000010/spanspan classicon-dot/span/div/div/div/divdiv classcontentdiv classheadspan classcol异常时间/spanspan classcol设备地址/spanspan classcol异常代码/span/divdiv classmarquee-viewdiv classmarqueediv classrowspan classcol20190701/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000001/spanspan classicon-dot/span/divdiv classrowspan classcol20190701/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190703/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190704/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190705/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190706/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190707/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190708/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190709/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/divdiv classrowspan classcol20190710/spanspan classcol北京市昌平区建材城西路金燕龙写字楼/spanspan classcol1000002/spanspan classicon-dot/span/div/div/div/div/div/div结构解释
.tabs 标签选项 加上active激活选项 默认激活第一个选项.content 切换内容 加上styledisplay: block;显示内容 默认激活第一个内容
样式描述
.inner 容器内间距 24px 0.tabs 容器内间距 0 36px a 容器 颜色 #1950c4 内间距0 27px 字体18px第一个a容器 去除左侧内间距 加上右侧2px宽度边框#00f2f1激活的时候 颜色白色 .content容器 占满剩余高度 flex:1默认隐藏 .head 容器 行高 1.05 背景 rgba(255, 255, 255, 0.1) 内间距 12px 36px 颜色 #68d8fe 字体大小 14px row 容器 行高 1.05 内间距 12px 36px 颜色 #68d8ff 字体大小 12px.icon-dot 字体图标 绝对定位 左边0.64rem 透明度0鼠标经过后背景 rgba(255, 255, 255, 0.1) 透明度1 col容器 宽度3.2rem 8.4rem 3.2rem第二个col 一行不换行 溢出 省略
/* 监控 */.monitor{height: 20rem;}.monitor .inner{padding: 1rem 0;display: flex;flex-direction: column;}.monitor .tabs{padding: 0 1.5rem;margin-bottom: 0.75rem;}.monitor .tabs a{color: #1950c4;font-size: 0.75rem;padding: 0 1.125rem;}.monitor .tabs a:first-child{border-right: 0.083rem solid #00f2f1;padding-left: 0;}.monitor .tabs a.active{color: #fff;}.monitor .content{flex: 1;display: none;position: relative;}.monitor .head{background: rgba(255, 255, 255, 0.1);font-size: 0.583rem;padding: 0.5rem 1.5rem;color: #68d8fe;display: flex;justify-content: space-between;line-height: 1.05;}.monitor .col:nth-child(1) {width: 3.2rem;}.monitor .col:nth-child(2) {width: 8.4rem;/* 不换行 一行省略*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.monitor .col:nth-child(3) {width: 3.2rem;}.monitor .marquee-view{position: absolute;top: 1.6rem;bottom: 0; width: 100%; overflow: hidden;
}.monitor .row{line-height: 1.05;padding: 0.5rem 1.5rem;color: #61a8ff;font-size: 0.5rem;position: relative;display: flex;justify-content: space-between;
}
.monitor .row:hover{color:#68d8ff;background: rgba(255, 255, 255, 0.1);
}
.monitor .row:hover .icon-dot{opacity: 1;
}.monitor .icon-dot{position: absolute;left: 0.64rem;opacity: 0;
}
.monitor .marquee-view{position: absolute;top: 1.6rem;bottom: 0; width: 100%; overflow: hidden;}.monitor .row{line-height: 1.05;padding: 0.5rem 1.5rem;color: #61a8ff;font-size: 0.5rem;position: relative;display: flex;justify-content: space-between;}.monitor .row:hover{color:#68d8ff;background: rgba(255, 255, 255, 0.1);}.monitor .row:hover .icon-dot{opacity: 1;}.monitor .icon-dot{position: absolute;left: 0.64rem;opacity: 0;}12、监控区域-效果
切换功能
绑定 标签页点击 事件点击的时候获取data-index的值当前容器加active其他容器移除activeindex对应的内容容器显示其他容器隐藏 // 切换$(.monitor).on(click,.tabs a, function(){$(this).addClass(active).siblings().removeClass(active)$(.monitor .content).eq(this.dataset.index).show().siblings(.content).hide()})动画功能
实现思路 先克隆列表追加在后面marquee-view 占满剩余高度溢出隐藏 绝对定位top 1.6rem bottom 0宽度100%溢出隐藏 使用animation实现动画使用 translateY 向上位移 50%动画时间15s匀速播放循环执行。
js代码 // 动画$(.marquee).each(function(){var $cloneList $(this).children().clone()$(this).append($cloneList)})css代码
/* 动画 */
.monitor .marquee-view{position: absolute;width: 100%;top: 1.6rem;bottom: 0;overflow: hidden;
}
.monitor .marquee{animation: scroll-top 15s linear infinite;
}
.monitor .marquee:hover{animation-play-state: paused;
}
keyframes scroll-top {0%{}100%{transform: translateY(-50%);}
}13、点位区域-布局
html结构 !-- 点位 --div classpoint paneldiv classinnerh3点位分布统计/h3div classchartdiv classpie/divdiv classdatadiv classitemh4320,11/h4spani classicon-dot stylecolor: #ed3f35/i点位总数/span/divdiv classitemh4418/h4spani classicon-dot stylecolor: #eacf19/i本月新增/span/div/div/div/div/divcss样式
/* 点位 */
.point {height: 14.167rem;
}
.point .chart {display: flex;margin-top: 1rem;justify-content: space-between;
}
.point .pie {width: 13rem;height: 10rem;margin-left: -0.4rem;
}
.point .data {display: flex;flex-direction: column;justify-content: space-between;width: 7rem;padding: 1.5rem 1.25rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover;
}
.point h4 {margin-bottom: 0.5rem;font-size: 1.167rem;color: #fff;
}
.point span {display: block;color: #4c9bfd;font-size: 0.667rem;
}14、点位区域-饼图
实现步骤
从官方示例中找到最接近项目需求的例子适当修改。在自己的项目中使用起来按照产品需求来定制图表。
第一步参考官方例子
option {// 控制提示tooltip: {// 非轴图形使用item的意思是放到数据对应图形上触发提示trigger: item,// 格式化提示内容// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例formatter: {a} br/{b} : {c} ({d}%)},// 控制图表series: [{// 图表名称name: 点位统计,// 图表类型type: pie,// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%// 百分比基于 图表DOM容器的半径radius: [10%, 70%],// 图表中心位置 left 50% top 50% 距离图表DOM容器center: [50%, 50%],// 半径模式另外一种是 area 面积模式roseType: radius,// 数据集 value 数据的值 name 数据的名称data: [{value:10, name:rose1},{value:5, name:rose2},{value:15, name:rose3},{value:25, name:rose4},{value:20, name:rose5},{value:35, name:rose6},{value:30, name:rose7},{value:40, name:rose8}]}]
};第二步使用起来
// 实现点位-饼状图
(function () {var option {// 控制提示tooltip: {// 非轴图形使用item的意思是放到数据对应图形上触发提示trigger: item,// 格式化提示内容// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例formatter: {a} br/{b} : {c} ({d}%)},// 控制图表series: [{// 图表名称name: 点位统计,// 图表类型type: pie,// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%// 百分比基于 图表DOM容器的半径radius: [10%, 70%],// 图表中心位置 left 50% top 50% 距离图表DOM容器center: [50%, 50%],// 半径模式另外一种是 area 面积模式roseType: radius,// 数据集 value 数据的值 name 数据的名称data: [{ value: 10, name: rose1 },{ value: 5, name: rose2 },{ value: 15, name: rose3 },{ value: 25, name: rose4 },{ value: 20, name: rose5 },{ value: 35, name: rose6 },{ value: 30, name: rose7 },{ value: 40, name: rose8 }]}]};var myChart echarts.init($(.pie)[0])myChart.setOption(option)
})();第三步按照需求定制
需求1数据使用 { value: 20, name: 云南 },{ value: 26, name: 北京 },{ value: 24, name: 山东 },{ value: 25, name: 河北 },{ value: 20, name: 江苏 },{ value: 25, name: 浙江 },{ value: 30, name: 四川 },{ value: 42, name: 湖北 }需求2颜色设置
[#006cff, #60cda0, #ed8884, #ff9f7f, #0096ff, #9fe6b8, #32c5e9, #1d9dff],需求3字体略小些 10 px需求4引导线略短些 连接图表 8 px连接文字 10 px
- data:[
- {value:10, name:rose1},
- {value:5, name:rose2},
- {value:15, name:rose3},
- {value:25, name:rose4},
- {value:20, name:rose5},
- {value:35, name:rose6},
- {value:30, name:rose7},
- {value:40, name:rose8}
- ]data: [{ value: 20, name: 云南 },{ value: 26, name: 北京 },{ value: 24, name: 山东 },{ value: 25, name: 河北 },{ value: 20, name: 江苏 },{ value: 25, name: 浙江 },{ value: 30, name: 四川 },{ value: 42, name: 湖北 }],// 文字调整label:{fontSize: 10},// 引导线调整labelLine: {// 连接扇形图线长length: 8,// 连接文字线长length2: 10} }],// 每块图颜色color: [#006cff, #60cda0, #ed8884, #ff9f7f, #0096ff, #9fe6b8, #32c5e9, #1d9dff]day2
15、地图区域-预留布局
html结构 !-- 地图 --div classmaph3span classicon-cube/span设备数据统计/h3div classchartdiv classgeo/div/div/divcss样式
/* 地图 */
.map {height: 24.1rem;margin-bottom: 0.833rem;display: flex;flex-direction: column;
}
.map h3 {line-height: 1;padding: 0.667rem 0;margin: 0;font-size: 0.833rem;color: #fff;
}
.map .icon-cube {color: #68d8fe;
}
.map .chart {flex: 1;background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {width: 100%;height: 100%;
}16、用户统计-布局
html结构 !-- 用户 --div classusers paneldiv classinnerh3全国用户总量统计/h3div classchartdiv classbar/divdiv classdatadiv classitemh4120,899/h4spani classicon-dot stylecolor: #ed3f35/i用户总量/span/divdiv classitemh4248/h4spani classicon-dot stylecolor: #eacf19/i本月新增/span/div/div/div/div/divcss样式
/* 用户模块 */
.users {height: 14.167rem;display: flex;
}
.users .chart {display: flex;margin-top: 1rem;
}
.users .bar {width: 24.5rem;height: 10rem;
}
.users .data {display: flex;flex-direction: column;justify-content: space-between;width: 7rem;padding: 1.5rem 1.25rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover;
}
.users h4 {margin-bottom: 0.5rem;font-size: 1.167rem;color: #fff;
}
.users span {display: block;color: #4c9bfd;font-size: 0.667rem;
}17、用户统计-柱状图
实现步骤
从官方示例中找到最接近项目需求的例子适当修改。在自己的项目中使用起来按照产品需求来定制图表。
第一步参考官方示例 分析
option {// 工具提示tooltip: {// 触发类型 经过轴触发axis 经过轴触发itemtrigger: axis,// 轴触发提示才有效axisPointer: { // 默认为直线可选为line 线效果 | shadow 阴影效果 type: shadow }},// 图表边界控制grid: {// 距离 上右下左 的距离left: 3%,right: 4%,bottom: 3%,// 边框大小是否包含文本【类似于boxsizing】containLabel: true},// 控制x轴xAxis: [{// 使用类目必须有data属性type: category,// 使用 data 中的数据设为刻度文字data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun],// 刻度设置axisTick: {// true意思图形在刻度中间// false意思图形在刻度之间alignWithLabel: true}}],// 控制y轴yAxis: [{// 使用数据的值设为刻度文字type: value}],// 控制x轴series: [{// 图表数据名称name: 用户统计,// 图表类型type: bar,// 柱子宽度barWidth: 60%,// 数据data: [10, 52, 200, 334, 390, 330, 220]}]};第二步使用起来
// 用户统计-柱状图
(function () {var option {// 参考上面即可... };var myChart echarts.init($(.bar)[0])myChart.setOption(option)
})();第三步按照需求修改
调整刻度 柱子在刻度之间【小短线】剔除刻度showfalse文字颜色 #4c9bfdaxisLabel {color : #4c9bfd} // 控制x轴xAxis: [{// 使用类目必须有data属性type: category,// 使用 data 中的数据设为刻度文字data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun],// 刻度设置axisTick: {// true意思图形在刻度中间// false意思图形在刻度之间
- alignWithLabel: true,alignWithLabel: false,show: false}, // 文字axisLabel: {color: #4c9bfd}}// 控制y轴yAxis: [{// 使用数据的值设为刻度文字type: value,// 刻度设置axisTick: {show: false},// 文字axisLabel: {color: #4c9bfd}}],调整边框与间距 加上边框颜色 rgba(0, 240, 255, 0.3)边距调整 3% 3% 3% 0%y轴分割线颜色 rgba(0, 240, 255, 0.3) // 图表边界控制grid: {// 距离 上右下左 的距离top: 3%,right: 3%,bottom: 3%,left: 0%,// 是否包含文本containLabel: true,// 显示边框show: true,// 边框颜色borderColor: rgba(0, 240, 255, 0.3)},// 控制y轴yAxis: [{// 使用数据的值设为刻度文字type: value,// 刻度设置axisTick: {show: false},// 文字axisLabel: {color: #4c9bfd},splitLine: {lineStyle: {color: rgba(0, 240, 255, 0.3)}}}],调整数据与省略图形。
// series
data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]// xAxis
data: [上海, 广州, 北京, 深圳, 合肥, , ......, , 杭州, 厦门, 济南, 成都, 重庆]柱子颜色和工具提示。 颜色使用渐变从上#00fffb 到下#0061ce设置渐变itemStyle // series配置// 颜色itemStyle: {// 提供的工具函数生成渐变颜色color: new echarts.graphic.LinearGradient(// (x1,y2) 点到点 (x2,y2) 之间进行渐变0, 0, 0, 1,[{offset: 0, color: #00fffb}, // 0 起始颜色{offset: 1, color: #0061ce} // 1 结束颜色])}经过图形才显示提示且省略的柱子不需要提示 // 经过图形才显示工具提示tooltip: {
- trigger: axis,trigger: item,// 中间省略的数据 准备三项
var item {name:,value: 1200,// 柱子颜色itemStyle: {color: #254065},// 鼠标经过柱子颜色emphasis: {itemStyle: {color: #254065}},// 工具提示隐藏tooltip: {extraCssText: opacity:0}}// series配置data选项在中使用
- data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240],data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],总结写echarts繁杂难记今后在工作中只需要按照需求去查找切勿死记硬背。
18、订单区域-布局
html结构 !-- 订单 --div classorder paneldiv classinner!-- 筛选 --div classfiltera hrefjavascript:; data-keyday365 classactive365天/aa hrefjavascript:; data-keyday9090天/aa hrefjavascript:; data-keyday3030天/aa hrefjavascript:; data-keyday124小时/a/div!-- 数据 --div classdatadiv classitemh420,301,987/h4spani classicon-dot stylecolor: #ed3f35;/i订单量/span/divdiv classitemh499834/h4spani classicon-dot stylecolor: #eacf19;/i销售额(万元)/span/div/div/div/divcss样式
/* 订单 */
.order {height: 6.167rem;
}
.order .filter {display: flex;
}
.order .filter a {display: block;height: 0.75rem;line-height: 1;padding: 0 0.75rem;color: #1950c4;font-size: 0.75rem;border-right: 0.083rem solid #00f2f1;
}
.order .filter a:first-child {padding-left: 0;
}
.order .filter a:last-child {border-right: none;
}
.order .filter a.active {color: #fff;font-size: 0.833rem;
}
.order .data {display: flex;margin-top: 0.833rem;
}
.order .item {width: 50%;
}
.order h4 {font-size: 1.167rem;color: #fff;margin-bottom: 0.417rem;
}
.order span {display: block;color: #4c9bfd;font-size: 0.667rem;
}19、订单区域-效果
实现步骤
提前准备数据点击后切tab激活样式点击后切换数据内容开启定时器动态切换数据
// 订单功能
(function(){// 1. 准备数据var data {day365: { orders: 20,301,987, amount: 99834 },day90: { orders: 301,987, amount: 9834 },day30: { orders: 1,987, amount: 3834 },day1: { orders: 987, amount: 834 }}// 获取显示 订单数量 容器var $h4Orders $(.order h4:eq(0))// 获取显示 金额数量 容器var $h4Amount $(.order h4:eq(1))$(.order).on(click,.filter a,function(){// 2. 点击切换激活样式$(this).addClass(active).siblings().removeClass(active)// 3. 点击切换数据var currdata data[this.dataset.key]$h4Orders.html(currdata.orders)$h4Amount.html(currdata.amount)})// 4. 开启定时器切换数据var index 0var $allTab $(.order .filter a)setInterval(function(){index if (index 4) index 0$allTab.eq(index).click()},5000)
})();
