You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
4.1 KiB
CSS
165 lines
4.1 KiB
CSS
/* 信息框样式 */
|
|
|
|
/* #region 实现方式一 */
|
|
/* 实现方式一：外层无边框等设置，框形由 "内上的左、上、右边框"、"内中的左与右边框"及 "内下的左、右、下边框" 组成 */
|
|
.info-box {
|
|
--info-box-main-color:#6f42c1;
|
|
--info-box-text-color:#ffffff;
|
|
--info-box-body-bgcolor:#afa1c9;
|
|
--info-box-footer-bgcolor:#a78adc;
|
|
|
|
margin: 10px;
|
|
padding: 0;
|
|
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: var(--info-box-text-color);
|
|
}
|
|
|
|
.info-box .info-box-item {
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
}
|
|
|
|
.info-box .info-box-header {
|
|
height: 50px;
|
|
line-height: 28px;
|
|
background-color: var(--info-box-main-color);
|
|
|
|
border-top: 2px solid var(--info-box-main-color);
|
|
border-left: 2px solid var(--info-box-main-color);
|
|
border-right: 2px solid var(--info-box-main-color);
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.info-box .info-box-body {
|
|
min-height: 200px;;
|
|
background-color: var(--info-box-body-bgcolor);
|
|
|
|
border-left: 2px solid var(--info-box-main-color);
|
|
border-right: 2px solid var(--info-box-main-color);
|
|
}
|
|
|
|
.info-box .info-box-footer {
|
|
height: 40px;
|
|
line-height: 18px;
|
|
|
|
background-color: var(--info-box-footer-bgcolor);
|
|
border-bottom: 2px solid var(--info-box-main-color);
|
|
border-left: 2px solid var(--info-box-main-color);
|
|
border-right: 2px solid var(--info-box-main-color);
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
/* #endregion */
|
|
|
|
/* #region 实现方式二 */
|
|
/* 实现方式二：框形由 外层边框形成，内上、内中、内下配合各相应角的形状 */
|
|
.msg {
|
|
--msg-text-color:#ffffff;
|
|
--msg-main-color: green;
|
|
--msg-body-bgcolor:rgba(154, 176, 154, 0.726);
|
|
--msg-footer-bgcolor: rgb(98, 145, 98);
|
|
|
|
margin: 10px;
|
|
padding: 0;
|
|
|
|
/* 外层必须背景颜色且与连框颜色相同，否则四角稍内会有月牙形"漏洞" */
|
|
background-color: var(--msg-main-color);
|
|
|
|
border: 2px solid var(--msg-main-color);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.msg .msg-item {
|
|
color: var(--msg-text-color);
|
|
font-weight: bold;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.msg .msg-header {
|
|
height: 50px;
|
|
line-height: 48px;
|
|
background-color: var(--msg-main-color);
|
|
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
|
|
border-bottom: 2px solid var(--msg-main-color);
|
|
}
|
|
|
|
.msg .msg-body {
|
|
height: 200px;
|
|
background-color: var(--msg-body-bgcolor);
|
|
|
|
padding: 10px;
|
|
}
|
|
|
|
.msg .msg-footer {
|
|
height: 39px;
|
|
line-height: 38px;
|
|
|
|
background-color: var(--msg-footer-bgcolor);
|
|
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
/* #endregion */
|
|
|
|
/* #region 默认信息框 */
|
|
/* 默认信息框：基于"实现方式二" */
|
|
.default-info {
|
|
--default-info-text-color:#000000;
|
|
--default-info-main-color: rgb(206, 212, 218);
|
|
--default-info-body-bgcolor:rgb(248, 249, 250);
|
|
--default-info-footer-bgcolor: rgb(233, 236, 239);
|
|
|
|
margin: 10px;
|
|
padding: 0;
|
|
/* 外层必须背景颜色且与连框颜色相同，否则四角稍内会有月牙形"漏洞" */
|
|
background-color: var(--default-info-main-color);
|
|
|
|
border: 2px solid var(--default-info-main-color);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.default-info-item {
|
|
color: var(--default-info-text-color);
|
|
font-weight: bold;
|
|
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.default-info-header {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
background-color: var(--default-info-main-color);
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
border-bottom: 2px solid var(--default-info-main-color);
|
|
}
|
|
|
|
.default-info-body {
|
|
min-height: 200px;
|
|
background-color: var(--default-info-body-bgcolor);
|
|
|
|
padding: 10px;
|
|
}
|
|
|
|
.default-info-footer {
|
|
height: 40px;
|
|
line-height: 38px;
|
|
background-color: var(--default-info-footer-bgcolor);
|
|
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
|
|
/* border-bottom: 2px solid (206, 212, 218); */
|
|
}
|
|
/* #endregion*/ |