jsy-app/static/scss/app.css

/* 徽标数 */
.u-badge {
	border-radius: 5px !important;
}

.u-badge--not-dot {
	padding: 4px !important;
}

.u-badge--success {
	background-color: #39ac4f !important;
}

/* tabs标签 */
.u-tabs__wrapper__nav__line {
	background-color: #39ac4f !important;
}

/* 按钮 */

.u-button {
	width: fit-content !important;
}
.u-button--square {
	border-radius: 5px !important;
}
.u-button--large {width: 100% !important;
	height: 38px !important;
}
.u-button--normal {
	height: 28px !important;
}
.u-button--small {
	height: 25px !important;
}
.u-button--success {
	background-color: #39ac4f !important;
	border-color: #39ac4f !important;
}

.u-button--plain {
	background-color: transparent !important;
}

/* 卡片线 */
.u-collapse>.u-line {
	border: none !important;
}

/* 列表 */
.u-collapse-item>.u-line {
	border-bottom: none !important;
}

/* fixed */
.fixed {
	display: flex;
	align-items: center;
	flex-direction: row;
}

/* 按钮 */
.btn {
	color: #39ac4f;
	padding: 0 5px;
	border: 1px solid #39ac4f;
	width: fit-content;
	height: 28px;
	border-radius: 5px;
}

.btn text {
	margin-right: 2px;
}

.btn.active {
	background-color: #39ac4f;
	color: #fff;
}
.btn.activeing {
	background-color: #39ac4f;
	color: #fff;
}

/* 字体颜色 */
.font-red {
	color: #e60012;
}

.font-orange {
	color: #ffa200;
}

.font-green {
	color: #39ac4f;
}

/* 卡片 */
.card,
.card-grey {
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
}

.card-grey {
	background-color: #f3f3f3;
	box-shadow: none;
}

.card-grey .card-title {
	padding: 10px;
	border-bottom: 1px solid #dedede;
}

.card-grey .card-title .icon {
	color: #39ac4f;
}

.card-grey .card-title .u-row {
	margin-bottom: 0 !important;
}

/* 首页阀门列表 */
.control {
	padding: 10px;
}

.valve {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.valve>view {
	display: flex;
	justify-content: center;
}

.valve .btn-img {
	width: 130px;
	margin: 10px;
	position: relative;
}

.valve .btn-img .text,
.valve .btn-img .text5 {
	position: absolute;
	z-index: 2;
	width: -webkit-fill-available;
	height: -webkit-fill-available;
}

.valve .btn-img .text>view,
.valve .btn-img .text5>view {
	position: absolute;
	font-weight: bold;
	font-size: 14px;
}

.valve .btn-img .text .left,
.valve .btn-img .text5 .left {
	left: 0;
	top: 24%;
}

.valve .btn-img .text5 .left {
	top: 41%;
}

.valve .btn-img .text .top,
.valve .btn-img .text5 .top {
	top: -12px;
	left: 33%;
}

.valve .btn-img .text5 .top {
	top: 0px;
}

.valve .btn-img .text .middle,
.valve .btn-img .text5 .middle {
	font-size: 18px;
	top: 36%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #e60012;
}

.valve .btn-img .text5 .middle {
	top: 50%;
}

.valve .btn-img .text .right,
.valve .btn-img .text5 .right {
	right: 0;
	top: 24%;
}

.valve .btn-img .text5 .right {
	top: 41%;
}

.valve .btn-img .text .bottom,
.valve .btn-img .text5 .bottom {
	bottom: -4px;
	left: 33%;
}

.valve .btn-img .text5 .bottom {
	bottom: 0px;
}