vue-shop-admin-work/public2/ueditor/dialogs/charts/charts.css

/* 对 html 和 body 元素设置通用样式 */
html, body {
    width: 100%; /* 设置元素宽度占满整个视口宽度 */
    height: 100%; /* 设置元素高度占满整个视口高度 */
    margin: 0; /* 清除元素默认的外边距，使页面从边缘开始布局 */
    padding: 0; /* 清除元素默认的内边距 */
    overflow-x: hidden; /* 隐藏水平方向上的滚动条，防止内容超出可视区域时出现水平滚动条 */
}

/* 定义类名为'main'的元素的样式 */
.main {
    width: 100%; /* 宽度占满父元素宽度 */
    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
}

/* 定义类名为'table-view'的元素的样式 */
.table-view {
    height: 100%; /* 高度占满父元素高度（结合父元素的高度设置情况而定） */
    float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
    margin: 20px; /* 设置元素的外边距为上下左右各 20px，使其与周围元素间隔一定距离 */
    width: 40%; /* 设置元素宽度占父元素宽度的 40%，用于划分页面布局中表格部分的宽度占比 */
}

/* 定义类名为'table-view'下的类名为'table-container'的子元素的样式 */
.table-view.table-container {
    width: 100%; /* 宽度占满父元素（.table-view）的宽度 */
    margin-bottom: 50px; /* 设置元素的下外边距为 50px，使其与下方元素间隔一定距离 */
    overflow: scroll; /* 当内容超出元素尺寸范围时，显示滚动条以便查看全部内容 */
}

/* 定义类名为'table-view'下的 th 元素（通常用于表格表头）的样式 */
.table-view th {
    padding: 5px 10px; /* 设置元素的内边距，上下内边距为 5px，左右内边距为 10px，用于在表格表头单元格内提供一定的空白空间 */
    background-color: #F7F7F7; /* 设置元素的背景颜色为浅灰色（#F7F7F7），用于区分表头与表体部分 */
}

/* 定义类名为'table-view'下的 td 元素（通常用于表格表体单元格）的样式 */
.table-view td {
    width: 50px; /* 设置元素的宽度为 50px，统一表格单元格的宽度 */
    text-align: center; /* 设置文本在单元格内居中对齐 */
    padding: 0; /* 清除元素默认的内边距，使内容紧密贴合单元格边缘 */
}

/* 定义类名为'table-container'下的 input 元素的样式 */
.table-container input {
    width: 40px; /* 设置输入框元素的宽度为 40px */
    padding: 5px; /* 设置输入框元素的内边距为 5px，使输入内容与边框有一定间隔 */
    border: none; /* 清除输入框的边框，使其外观更简洁（可能通过其他方式体现选中或聚焦状态等） */
    outline: none; /* 清除输入框获取焦点时的默认外边框样式，同样是为了外观简洁或自定义聚焦效果 */
}

/* 定义类名为'table-view'下的 caption 元素（通常用于表格标题）的样式 */
.table-view caption {
    font-size: 18px; /* 设置元素的字体大小为 18px，突出显示表格标题 */
    text-align: left; /* 设置文本在标题元素内左对齐 */
}

/* 定义类名为'charts-view'的元素的样式 */
.charts-view {
    /* margin-left: 49%!important; */ /* 此处被注释掉了，原作用可能是通过强制设置左外边距为父元素宽度的 49%来进行布局定位，但当前未生效，实际以下面的'margin-left'属性为准 */
    width: 50%; /* 设置元素宽度占父元素宽度的 50%，用于划分页面布局中图表部分的宽度占比 */
    margin-left: 49%; /* 设置元素的左外边距为父元素宽度的 49%，将图表部分定位在页面右侧，与左侧的表格部分区分开来 */
    height: 400px; /* 设置元素的高度为 400px，确定图表区域的高度大小 */
}

/* 定义类名为'charts-container'的元素的样式 */
.charts-container {
    border-left: 1px solid #c3c3c3; /* 为元素添加左边框，边框宽度为 1px，颜色为灰色（#c3c3c3），可能用于区分图表区域与其他部分 */
}

/* 定义类名为'charts-format'下的 fieldset 元素的样式 */
.charts-format fieldset {
    padding-left: 20px; /* 设置元素的左内边距为 20px，用于在内部提供一定的空白空间 */
    margin-bottom: 50px; /* 设置元素的下外边距为 50px，使其与下方元素间隔一定距离 */
}

/* 定义类名为'charts-format'下的 legend 元素的样式 */
.charts-format legend {
    padding-left: 10px; /* 设置元素的左内边距为 10px，在元素内部左侧提供一定空白空间 */
    padding-right: 10px; /* 设置元素的右内边距为 10px，在元素内部右侧提供一定空白空间 */
}

/* 定义类名为'format-item-container'的元素的样式 */
.format-item-container {
    padding: 20px; /* 设置元素的内边距为 20px，在元素内部四周提供一定的空白空间 */
}

/* 定义类名为'format-item-container'下的 label 元素的样式 */
.format-item-container label {
    display: block; /* 将元素显示为块级元素，独占一行，常用于表单标签等元素的布局，方便与对应的输入框等元素进行垂直排列 */
    margin: 10px 0; /* 设置元素的外边距，上下外边距为 10px，左右外边距为 0，用于控制元素在垂直方向的间隔位置 */
}

/* 定义类名为'charts-format'下的类名为'data-item'的元素的样式 */
.charts-format.data-item {
    border: 1px solid black; /* 为元素添加边框，边框宽度为 1px，颜色为黑色，用于突出显示该元素 */
    outline: none; /* 清除元素获取焦点时的默认外边框样式，可能是为了外观简洁或自定义聚焦效果 */
    padding: 2px 3px; /* 设置元素的内边距，上下内边距为 2px，左右内边距为 3px，用于在元素内部提供一定的空白空间 */
}

/* 以下是图表类型相关的样式定义 */

/* 定义类名为'charts-type'的元素的样式 */
.charts-type {
    margin-top: 50px; /* 设置元素的上外边距为 50px，使其与上方元素间隔一定距离 */
    height: 300px; /* 设置元素的高度为 300px，确定图表类型相关区域的高度大小 */
}

/* 定义类名为'scroll-view'的元素的样式 */
.scroll-view {
    border: 1px solid #c3c3c3; /* 为元素添加边框，边框宽度为 1px，颜色为灰色（#c3c3c3） */
    border-left: none; /* 清除元素的左边框，使其左边框不显示 */
    border-right: none; /* 清除元素的右边框，使其右边框不显示 */
    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
}

/* 定义类名为'scroll-container'的元素的样式 */
.scroll-container {
    margin: 20px; /* 设置元素的外边距为上下左右各 20px，使其与周围元素间隔一定距离 */
    width: 100%; /* 宽度占满父元素宽度 */
    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
}

/* 定义类名为'scroll-bed'的元素的样式 */
.scroll-bed {
    width: 10000px; /* 设置元素的宽度为一个较大值，可能用于实现滚动效果时容纳较多的内容（比如多个图表类型的展示元素等） */
    _margin-top: 20px; /* 此处是一个私有属性（前面加下划线，可能是针对特定浏览器的 hack，如 IE 浏览器），设置元素的上外边距为 20px */
    -webkit-transition: margin-left.5s ease; /* 针对webkit 内核浏览器（如 Chrome、Safari 等）设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
    -moz-transition: margin-left.5s ease; /* 针对 Mozilla Firefox 浏览器设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
    transition: margin-left.5s ease; /* 针对其他现代浏览器设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
}

/* 定义类名为'view-box'的元素的样式 */
.view-box {
    display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */
    *display: inline; /* 此处是针对低版本 IE 浏览器（IE7 及以下）的 hack，使其以行内元素显示，确保兼容性 */
    *zoom: 1; /* 同样是针对低版本 IE 浏览器的 hack，触发 hasLayout 属性，解决一些布局相关的兼容性问题 */
    margin-right: 20px; /* 设置元素的右外边距为 20px，使其与右侧相邻元素间隔一定距离 */
    border: 2px solid white; /* 为元素添加边框，边框宽度为 2px，颜色为白色，用于视觉上区分不同的视图框元素 */
    line-height: 0; /* 设置元素的行高为 0，可能用于去除元素内部默认的垂直间距等情况，具体看元素内部内容结构 */
    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
    cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */
}

/* 定义类名为'view-box'下的 img 元素的样式 */
.view-box img {
    border: 1px solid #cecece; /* 为图片元素添加边框，边框宽度为 1px，颜色为浅灰色（#cecece），用于视觉上对图片进行修饰 */
}

/* 定义类名为'view-box'下具有'selected'类名的元素的样式 */
.view-box.selected {
    border-color: #7274A7; /* 当元素具有'selected'类名时（可能表示被选中状态），改变其边框颜色为特定颜色（#7274A7），用于突出显示被选中的视图框元素 */
}

/* 定义类名为'button-container'的元素的样式 */
.button-container {
    margin-bottom: 20px; /* 设置元素的下外边距为 20px，使其与下方元素间隔一定距离 */
    text-align: center; /* 设置元素内部的子元素在水平方向上居中对齐，常用于按钮组等元素的布局，使其在容器内居中显示 */
}

/* 定义类名为'button-container'下的 a 元素（通常用于链接或按钮样式）的样式 */
.button-container a {
    display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */
    width: 100px; /* 设置元素的宽度为 100px，确定按钮或链接的宽度大小 */
    height: 25px; /* 设置元素的高度为 25px，确定按钮或链接的高度大小 */
    line-height: 25px; /* 设置元素的行高与元素高度相等，使文本在垂直方向上居中对齐 */
    border: 1px solid #c2ccd1; /* 为元素添加边框，边框宽度为 1px，颜色为浅灰色（#c2ccd1），用于视觉上修饰按钮或链接元素 */
    margin-right: 30px; /* 设置元素的右外边距为 30px，用于控制按钮或链接之间的间隔距离 */
    text-decoration: none; /* 清除元素默认的文本下划线装饰（对于链接元素而言），使其外观更简洁 */
    color: black; /* 设置元素的文本颜色为黑色 */
    -webkit-border-radius: 2px; /* 针对 webkit 内核浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */
    -moz-border-radius: 2px; /* 针对 Mozilla Firefox 浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */
    border-radius: 2px; /* 针对其他现代浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */
}

/* 定义类名为'button-container'下的 a 元素在鼠标悬停时的样式 */
.button-container a:HOVER {
    background: #fcfcfc; /* 当鼠标悬停在按钮或链接元素上时，改变其背景颜色为浅白色（#fcfcfc），用于提供悬停交互的视觉反馈 */
}

/* 定义类名为'button-container'下的 a 元素在激活（如鼠标按下）时的样式 */
.button-container a:ACTIVE {
    border-top-color: #c2ccd1; /* 当按钮或链接元素处于激活状态时，改变其顶部边框的颜色为浅灰色（#c2ccd1），用于提供点击交互的视觉反馈 */
    box-shadow: inset 0 5px 4px -4px rgba(49, 49, 64, 0.1); /* 为元素添加内阴影效果，水平和垂直方向偏移量、模糊半径等参数设置了阴影的样式，用于增强激活状态的视觉效果 */
}

/* 定义类名为'edui-charts-not-data'的元素的样式 */
.edui-charts-not-data {
    height: 100px; /* 设置元素的高度为 100px */
    line-height: 100px; /* 设置元素的行高与元素高度相等，使文本在垂直方向上居中对齐 */
    text-align: center; /* 设置元素内部的文本在水平方向上居中对齐 */
}