Project-Annex/operationSupport/src/assets/common.styl

@import './sc-variables.styl'
@import './fun.styl'

// *
// 	box-sizing: border-box
// 	&:focus
// 		outline: none
body
	margin: 0
	padding: 0
	font-family: "PingFang SC","Microsoft YaHei","微软雅黑","Helvetica Neue",Helvetica,"Hiragino Sans GB",Arial,sans-serif;
	overflow-y: hidden
	font-size: vw(16)
body,html,#app
	-webkit-text-size-adjust: none
	width: 100%
	height: 100%
	min-width 1360px
#app
	-webkit-font-smoothing: antialiased
	-moz-osx-font-smoothing: grayscale
	color: #2c3e50
	background-color: #d8dfe6
	position: relative
p
	margin: 0
a
	cursor: pointer
ul,h1,h2,h3,h4,h5,h6
	padding: 0
	margin: 0
ul
	list-style: none
.no-scrollbar::-webkit-scrollbar
	display none
.ellipsis
	text-overflow: ellipsis
	overflow: hidden
	white-space: nowrap
// 公共样式-end
.clearfix:after
	visibility: hidden
	display: block
	font-size: 0
	content: " "
	clear: both
	height: 0
.el-input__inner,
.el-select,
.el-cascader-menu__item,
.el-dropdown-menu__item,
.el-range-input::-webkit-input-placeholder,
.el-radio-group .el-radio-button__inner,
.el-button,
.el-form-item__content,
.el-cascader,
.el-select-dropdown__item,
.el-range-separator,
.el-pagination button, .el-pagination span:not([class*=suffix]),
.el-pagination__sizes .el-input .el-input__inner,
.el-form-item__label,
.el-autocomplete-suggestion li,
.el-checkbox__label,
.el-date-editor .el-range-input,
.el-date-editor .el-range-separator
	font-size: vw(12)
.el-form-item__error
	font-size: vw(12)
.el-range-editor.el-input__inner,
.el-input,
.el-input__inner,
.el-radio-group .el-radio-button__inner,
.el-button,
.el-input--mini .el-input__inner,
.el-pagination__editor.el-input .el-input__inner,
.el-transfer-panel__filter .el-input__inner
	height: vw(30)
	line-height: vw(30)
.el-autocomplete-suggestion li
	font-weight: 400
	line-height: vw(34)
	color: #6D7081
	padding: 0 vw(20)
.el-range-editor.el-input__inner
	vertical-align: middle
	border-radius: vw(2)
	.el-range__icon, .el-range-separator, .el-range__close-icon
		line-height: vw(24)
	.el-range-separator
		width: 6%
.el-select,.el-input,.el-button
	vertical-align: middle
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button
	-webkit-appearance: none;
	margin: 0;
input[type="number"]
	-moz-appearance: textfield;
.el-input
	.el-input__inner
		vertical-align: top
		border-radius: vw(2)
	.el-input__icon,
	.el-input__suffix
		line-height: vw(32) !important
.el-radio-group .el-radio-button__inner,
.el-button
	padding: vw(9) vw(15)
.el-button [class*=el-icon-]+span
	margin-left 0
.el-radio-group .el-radio-button__inner,
.el-button,
.el-form-item__content,
.el-cascader
	padding-top: 0
	padding-bottom: 0
	line-height: vw(32)
.form-no-label .el-form-item__content
	margin-left 0 !important
.el-form-item
	margin-bottom: vw(30)
.el-radio-button:last-child .el-radio-button__inner
	border-radius: 0 vw(2) vw(2) 0
.el-radio-button:first-child .el-radio-button__inner
	border-radius: vw(2) 0 0 vw(2)
.el-radio-button__orig-radio:checked+.el-radio-button__inner
	background-color: $sc-color-primary
	border-color: $sc-color-primary
.el-button--primary
	el-button($sc-color-primary)
	&:focus
		background-color: $sc-color-primary;
		border-color: $sc-color-primary;
.el-table--striped .el-table__body tr.el-table__row--striped td
	background: #f0f1f4
.el-button
	border-radius: vw(2)
.el-button+.el-button
	// margin-left: 0
.el-table .cell, .el-table th div
	padding-right: vw(10)
.el-table .cell,
.el-table th div,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell
	padding-left: 0!important
.zz-table .el-table .el-table__body-wrapper, .zz-table .el-table .el-button
	margin: 0 2px

.el-container
	width: 100%
	height: 100%
	.el-main
		margin: 0
		padding: 0
		position: relative
	.el-header
		margin: 0
		padding: 0
	.el-aside
		margin: 0
		padding: 0
.v-modal
	z-index: 1998 !important
// 搜索栏间隔
.search
	font-size: 0
	padding: 0 vw(15)
	.search-btn,
	.search-input
		margin-right: vw(20)
	.search-label
		margin-right: vw(10)
		color: #3B4045
		font-size: vw(14)
		vertical-align: middle
		display: inline-block
	.search-input
		width: vw(200)
	.el-date-editor
		width: vw(400)
	.el-range-separator
		padding: 0
	&:after
		visibility: hidden
		display: block
		font-size: 0
		content: " "
		clear: both
		height: 0
// 按钮内图标据文字
.el-button
	[class^='el-icon-']
		margin-right: vw(5)
	.el-icon-arrow-down
	.el-icon-arrow-up
		margin-right: 0
.el-button.more-search
	border-color: #2787F1;
.el-form-item__label
	padding: 0 vw(10) 0 0
.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled)
	box-shadow: none
// Firefox required input textarea 粉红色边框去除方案,貌似没有效果
input:required:invalid,
input:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid,
:not(output):-moz-ui-invalid
	box-shadow: none !important
	-moz-box-shadow:none !important
.el-date-editor .el-range-input
	vertical-align: top
.el-message .el-message__content
	display: inline-block
.el-message-box
	.el-message-box__title
		font-size: vw(16)
		color: #3e3e3e
	.el-message-box__content
		color: #3e3e3e
		font-size: vw(14)
	.el-message-box__header
		border-bottom: 1px solid #EAEDF3
.device
	height: 100%
	.wrap
		background-color #FFF
		border-radius vw(5)
		padding-top vw(20)

		top vw(15)
		left vw(15)
		bottom vw(15)
		right vw(15)
		overflow auto

// tab切换按钮字体设置为16px
.zz-tab-button
	.el-radio-button__inner
		font-size vw(16)
.el-textarea__inner
	font: inherit
	font-size: vw(14)

.alert
	background-color: rgba(0,0,0,.6)
	position: fixed
	top: 0
	left: 0
	width: 100%
	height: 100%
	z-index: 1999
	color: #3E3E3E
	.alert-body
		position: absolute
		top: 50%
		left: 50%
		background-color: #fff
		border-radius: vw(8)
		max-height: 100%
		.el-select,.el-cascader
			width: 100%
		&.flow-form
			width: 520px;
			height: 370px;
			margin-top: -185px;
			margin-left: -260px
	.alert-body__title
		height: vw(54)
		line-height: vw(54)
		border-radius: vw(8) vw(8) 0 0
		padding-left: 25px
		border-bottom: 1px solid #EAEDF3
		font-size: vw(16)
		.close
			width: vw(20)
			height: vw(20)
			float: right
			text-align: right
			cursor: pointer
			margin-right: vw(20)
			line-height: 1
			margin-top: vw(17)
	.alert-body__main
		padding: vw(20) vw(20) 0 vw(20)
		position: absolute
		top: vw(54)
		left: 0
		right: 0
		bottom: 0
		overflow: hidden
		.el-form-item
			height: vw(32)
			line-height: vw(32)
		.el-form-item__label
			font-size: vw(14)
			height: vw(32)
			line-height: vw(32)
		.el-checkbox-group .el-checkbox
			width: 33.33%
			margin: 0 0 10px 0 !important
			.el-checkbox__label
				text-overflow: ellipsis;
				width: 80%;
				overflow: hidden;
				white-space: nowrap;
				vertical-align: middle;
		// 弹出层内容区域，
		.alert-body__main_content
			position: absolute
			top: 0
			left: 0
			width: 100%
			bottom: vw(65)
			overflow: auto
			padding: vw(20) vw(20) 0 vw(20)
		// 弹出层按钮区域
		.alert-body__main_btns
			border-top: 1px solid #EAEDF3
			position: absolute
			bottom: 0
			height: vw(65)
			right: 0
			left: 0
			padding: vw(10) vw(20)
			text-align: right
			background: #fff
			border-radius: 0 0 vw(8) vw(8)
			z-index: 1
		.alert-item
			width: 100%
			float: left
			font-size: 0
			&.half
				width: 50%
				span
					width: 40%
				p
					width: 60%
			span, p
				display: inline-block
				font-size: vw(14)
			p
				width: 80%
			span
				width: 20%
				text-align: right
			span.el-radio__inner
				width: 14px
		.hide
			display: none

	/* 信息弹窗 删除弹窗 */
	.message-box {
		width:374px;
		background:rgba(255,255,255,1);
		border-radius:6px;
		position absolute
		top 50%;
		left 50%
		transform: translate(-50%, -50%);
		padding 15px 24px 20px 24px
		font-size 16px
		animation alertdown .2s forwards
		.row-1{
			color #424656
			margin-bottom 10px
			padding-left 24px
			font-size: 14px;
			display: flex;
			align-items: center;
			word-break: break-all;
			position relative;
			.dmp-icon-btn {
				color #FF7171
				font-size 14px
				width: 14px;
				height 14px;
				background-size: 14px;
				margin-right 10px
				position absolute
				left 0
				top 17px
			}
			.dmp-icon-btn.icon-error {
				background-image url('/static/imgs/icon-error.png')
			}
			.dmp-icon-btn.icon-warning {
				background-image url('/static/imgs/icon-warning.png')
			}
			.dmp-icon-btn.icon-success {
				background-image url('/static/imgs/icon-success.png')
			}
			.title {
				width: 273px
				line-height: 18px;
				margin-top 15px
			}
			.close {
				position: absolute;
				top: 0;
				right 0;
				display: inline-block;
				height 10px;
				width: 10px;
				cursor pointer;
				background: url('/static/imgs/icon-close-off.png') no-repeat center
				background-size: 10px 10px;
				&:hover {
					background-image: url('/static/imgs/icon-close-on.png')
				}
			}
		}
		.row-2 {
			margin-left 25px
			font-size: 12px;
			color: #FF7171;
			margin-bottom 30px
			word-break: break-all;
			width 273px
			&.warning {
				color: #F7B500;
			}
			&.success {
				color: #424656;
			}
		}
		.row-3 {
			display: flex;
			justify-content: flex-end;
			.el-button {
				font-size: 12px !important;
				height 26px;
				line-height: 26px;
				min-width 60px;
				margin-left: 15px;
			}
		}
		&.up {
			animation alertup .2s forwards
		}
	}


// 加载中动画
.loading
	width: 60px
	height: 60px
	position: relative
	margin: 100px auto
	.bounce1, .bounce2
		width: 100%
		height: 100%
		border-radius: 50%
		background-color: #67CF22
		opacity: 0.6
		position: absolute
		top: 0
		left: 0
		animation: bounce 2.0s infinite ease-in-out
	.bounce2
		-webkit-animation-delay: -1.0s
		animation-delay: -1.0s
	@keyframes bounce {
		0%, 100% {
		transform: scale(0.0)
		}
		50% {
			transform: scale(1.0)
		}
	}
.el-tooltip__popper
	max-width 400px
	line-height 180%


.el-image
	.el-image-viewer__close
		color: #fff

@keyframes warn {
	0% {
		transform: scale(0.3);
		-webkit-transform: scale(0.3);
		opacity: 0.0;
	}

	25% {
		transform: scale(0.3);
		-webkit-transform: scale(0.3);
		opacity: 0.1;
	}

	50% {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		opacity: 0.3;
	}

	75% {
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
		opacity: 0.5;
	}

	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
		opacity: 0.0;
	}
}

@keyframes warn1 {
	0% {
		transform: scale(0.3);
		-webkit-transform: scale(0.3);
		opacity: 0.0;
	}

	25% {
		transform: scale(0.3);
		-webkit-transform: scale(0.3);
		opacity: 0.1;
	}

	50% {
		transform: scale(0.3);
		-webkit-transform: scale(0.3);
		opacity: 0.3;
	}

	75% {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		opacity: 0.5;
	}

	100% {
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
		opacity: 0.0;
	}
}

@keyframes ani {
	0%, 100% {
		transform: scale(.5)
	}
	50% {
		transform: scale(1)
	}
}
.sys-pop-program
#member-type-add
	.orderby
		.el-input
			height auto !important
		.el-tag
			display: inline-block;
			max-width: 90%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
.add-user-propram-select,.sys-popups-add-site,.settlement-plan-add
	.el-input
		height auto !important
	.el-tag
	.el-select__tags-text
		max-width: 93%
		float: left
		text-overflow: ellipsis
		overflow: hidden
		white-space: nowrap

/* 设备关联人员表格样式 */
.device-pop-union
	.el-table
		td
		th
			padding vw(6) 0 !important

/* 场景下建筑树形样式 */
.has-area-tree
	background-color: #fff;
	border-radius: vw(5);
	border: 1px solid #EAEDF3;
	position: absolute;
	top: vw(15);
	left: vw(15);
	bottom: vw(15);
	right: vw(15);
	overflow: auto;
	margin-right: vw(300);
.channel-builds-tree, .area-tree
	padding: vw(20)
	width: vw(285)
	position: absolute
	top: vw(15)
	right: vw(15)
	bottom: vw(15)
	border:1px solid rgba(234, 237, 243, 1)
	box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.04)
	border-radius:vw(5)
	background: #fff
	overflow: auto
	.el-tree-node__label,.el-link
		font-size: vw(12) !important
.el-tree::-webkit-scrollbar
	display none

/* 站点管理操作按钮icon */
.site-opt-icon-btn .el-button i
	font-size: vw(20)
	margin: 0 0 0 vw(15)

.el-cascader-menu::-webkit-scrollbar
	display none


/* 清除下拉菜单上传按钮样式 */
.dropdown-menu-clear-btn .el-button--primary {
	background: transparent;
	border-color: transparent
	color: #606266
	padding 0
	i {
		display: none
	}
}

/* el-select下拉选择器底部操作按钮 */
.el-select-bottom-opt
	padding: 0 20px;
	display: flex;
	align-items center
	justify-content: center;
	span
		font-size 12px;

/* 年的日期组件定制样式 */
.el-date-picker-year
	.el-date-picker__header-label
		&:hover
			color: #606266
	.el-picker-panel__content
		a.cell
			font-size: 14px;

/* .el-select下拉选择面板样式暗黑色定制 */
.el-select-dropdown-dark
	background:rgba(46,49,51,1);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
	border-radius: 3px;
	border: none
	.popper__arrow
		display: none
	.el-select-dropdown__item
		font-size: 14px;
		&.hover
		&:hover
			background: none
			color: #42CCCC

/* 隐藏日历组件今天样式 */
.hide-today-style
	td.today .cell
		color: inherit;
		font-weight: inherit;

/* echart图表线图tooltip自定义样式 */
.dmp-echart-tooltip
	h4
		font-size:12px;
		color:rgba(255,255,255,1);
		line-height:18px;
	p
		line-height:18px;
		font-size: 12px;
		display: flex;
		align-items: center;
		.marker
			display: inline-block;
			margin-right: 6px;
			width: 12px;
			height: 8px;
			border-radius: 4px;


.el-button--mini, .el-button--small{
	font-size:12px
}
.el-select-dropdown__item.selected,
.el-month-table td.current:not(.disabled) .cell,
.el-pager li:hover
{
	color:$sc-color-primary;
}
.el-select .el-input.is-focus .el-input__inner,
.el-input__inner:focus,
.el-switch.is-checked .el-switch__core,
.el-range-editor.is-active:hover
{
	border-color:$sc-color-primary;
}
.el-button.is-plain:hover, .el-button.is-plain:focus{
	border-color: $sc-color-primary;
  color: $sc-color-primary;
}
.el-switch.is-checked .el-switch__core,
.el-date-table td.start-date span, .el-date-table td.end-date span
{
	background-color:$sc-color-primary;
}

/* 左右布局*/
.tabsTitle {
	.tabs-title{
		display: flex;
		margin-bottom: vw(20);
		background: #ffffff;
		}
  .tabs {
    font-size: vw(14);
    width: 100%;

    padding: vw(20);
    box-sizing: border-box;
    display: flex;
    .tabItem {
      cursor: pointer;
      color: #a6abb6;
    }

    .active {
      color: #2787f1;
    }

    .border {
      width: vw(1);
      height: vw(10);
      background: #a6abb6;
      margin: vw(6) vw(20);
    }
  }
	.tabs-right{
		 padding: vw(20);
		  height: vw(60);
			 box-sizing: border-box;
		}
}

.content {

		/*height:100%;*/
    .content-right {
      width: calc(100% - 280px);
			float:right;

      .search {
        width: 100%;
        height: vw(60);
        margin-bottom: vw(20);
        background: #fff;
        padding: vw(15) vw(20);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: vw(6);
      }
    }
  }