vuealertdemo/src/lib/index.css

Popover test package upload NPM

*{
  margin: 0;
  padding: 0;
}
	.alert-box{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items:center;
        justify-content:center;
		z-index: 99999;
		.alert-bg{
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 2;
			background-color: rgba(0,0,0,.2);
		}
		.alert-cont{
			z-index: 3;
			width: 260px;
			height: auto;
			background-color: #fff;
			border-radius: 5px;
			overflow: hidden;
			border: solid 1px #eee;
			.alert-p{
				position: relative;
				width: 100%;
				height: 36px;
				line-height: 36px;
				text-align: left;
				text-indent: 10px;
				background-color: #009bff;
				color: #fff;
				font-size: 14px;
                a{
                	display: block;
                	position: absolute;
                	right: 0;
                	top: 0;
                	width: 30px;
                	height: 30px;
                	text-indent: 0;
                	text-align: center;
                	font-size: 20px;
                	cursor: pointer;
                	b{
                		display: block; 
                		transition: All 0.4s linear;
                		transform-origin: center center; 
                		font-weight: 500;
                	}
                }
                a:hover b{
                	color: #e80000;
                	transform: rotate(90deg);
                }
			}
			.alert-tips{
				padding: 10px;
				min-height: 60px;
                font-size: 14px;
                display: flex;
				align-items:center;
		        justify-content:center;
                img{
                	max-width: 40px;
                	padding: 0 8px;
                }
			}
			.alert-btn{
				width: 100%;
				height: 34px;
				white-space: nowrap;
				a{
					cursor: pointer;

				}
				a.btn1{
                   display: block;
                   width: 100%;
                   height: 34px;
                   line-height: 34px;
                   background-color: #009bff;
                   color: #fff;
                   font-size: 14px;
                   text-align: center;
				}
				a.btn2{
					display: inline-block;
					width: 50%;
					border-right: solid 1px #eee;
					border-top: solid 1px #eee;
					line-height: 34px;
					font-size: 14px;
					text-align: center;
					color: #666;
				}
/*				a.btn2:hover{
				   background-color: #009bff;
                   color: #fff;
				}*/
			}
		}
	}

.box-scale{
	animation: scale_1 0.8s linear;
}
@keyframes scale_1 {
	0% {

		transform: scale(0);
		opacity:(0);
	}
	100% {
		transform: scale(1);
		opacity:(1);
	}
}

.box-translateT{
	animation: translateT_1 0.8s linear;
}
@keyframes translateT_1 {
	0% {

		transform: translateY(-50px);
		opacity:(0);
	}
	100% {
		transform: translateY(0);
		opacity:(1);
	}
}