iot-app/css/home.css

@import "system.css";

body {
	background-color: #FFF;
}

* {
	letter-spacing: 1px;
}

#homeBox {
	width: calc(100% - 40px);
	height: 100vh;
	background: -webkit-linear-gradient(top, #FFF0,#FFF0, #FFF, #FFF);
	margin-left: 20px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

#homeBox::after {
	position: absolute;
	top: 0;
	content: "";
	width: 100vw;
	height: 100vh;
	background-image: url(../images/loginBackGround2.png);
	background-repeat: no-repeat;
	background-position: top;
	background-attachment: fixed;
	/* background-size: cover; */
	z-index: -1;
}

#loginFormBox {
	padding: 1rem;
	border-radius: 5px;
	background-color: #FFF;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.02);
}
#loginForm2Box{
	display: none;
	padding: 1rem;
	border-radius: 5px;
	background-color: #FFF;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.02);
}
#homeBox p {
	width: 100%;
	align-items: center;
	text-align: center;
	font-weight: 600;
	font-size: 24px;
	color: #2EA8E6;
	margin-bottom: 10px;
	letter-spacing: 0.3rem;
}

#homeBox p:nth-child(2) {
	margin-top: 2rem;
	letter-spacing: 5px;
	font-size: 32px;
	color: #2EA8E6;
}

#form_box {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	width: calc(100% - 60px);
	min-width: 300px;
}

.home_auto_login {
	background-color: #00000000;
	margin-top: 10px;
	width: calc(100% - 60px);
	min-width: 300px;
}

/* 登录按钮样式 */
#homeBox #loginButton {
	font-size: 1rem;
	margin: 20px 0;
	width: 100%;
	min-width: 100px;
	padding: 5px 0 !important;
	border-radius: 2rem;
	background-color: #2EA8E6;
	border-color: transparent;
}
.phoneTip{
    margin: 2rem auto;
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: 400;
    text-align: center;
    color: #000000;
}
/* 使用其他号码登录按钮 */
#homeBox #loginButtonOrherPhone{
	font-size: 1rem;
	margin: 20px 0;
	width: 100%;
	min-width: 100px;
	padding: 5px 0 !important;
	border-radius: 2rem;
	background-color: #FFFFFF;
	color: #9B9B9B;
	border-color: #E6E6E6;
}
#changeLoginType{
	position: absolute;
	right: 0;
	top: 20%;
	background-color: #2EA8E6;
	color: #FFF;
	padding: 5px 10px 5px 15px;
	font-size: 0.75rem;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
/* 用户名和密码和输入框宽度样式 */
#form_box ::before {
	height: 0px !important;
}

.mui-input-row {
	width: 100%;
	overflow: auto;
}



.mui-input-row input {
	width: 100%;
	background-color: #F5F5F5;
	border-radius: 2rem;
	border-color: transparent;
}

.mui-main-box {
	padding: 10px;
}

.flex-auto {
	width: 100%;
	padding-bottom: 30px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-around;
}

.flex-auto>div {
	width: 60px;
	height: 60px;
	padding: 0 10px;
	margin: 10px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.flex-auto>div:nth-child(1) {
	background-image: url("../images/myTasks2.png");
	/* background-image: linear-gradient(-45deg, #409EFF, #409EFF64); */
}

.flex-auto>div:nth-child(2) {
	background-image: url("../images/customMarking2.png");
	/* background-image: linear-gradient(-45deg, #67C23A, #67C23A64); */
}

.flex-auto>div:nth-child(3) {
	background-image: url("../images/knowledgeRetrieval2.png");
	/* background-image: linear-gradient(-45deg, #E6A23C, #E6A23C64); */
}

.flex-auto>div:nth-child(4) {
	background-image: url("../images/myMarks2.png");
	/* background-image: linear-gradient(-45deg, #F56C6C, #F56C6C64); */
}

.flex-auto>div>div {
	font-size: 30px;
	color: aliceblue;
}

.flex-auto .mui-icon::before {
	font-weight: bold;
	text-shadow: 2px 2px 5px #303133;
}

.flex-auto .tag_title {
	position: absolute;
	bottom: -30px;
	color: #909399;
	letter-spacing: 2px;
	font-size: 12px;
}

.mui-search input {
	box-shadow: 1px 1px 5px 0px #cccccc64;
}

.mui-search input[type=search] {
	border-radius: 2rem;
	background-color: #FFF;
}

.data-list-box {
	padding: 20px 0px;
	border-radius: 10px;
}

.data-list-box>div:nth-child(1) {
	color: #303133;
	font-weight: bold;
}

/* 主色 */
@BrandColor #409EFF;
@SuccessColor #67C23A;
@WarningColor #E6A23C;
@DangerColor #F56C6C;
@InfoColor #909399;
/* 字体或背景 */
@TextColor1 #303133;
@TextColor2 #606266;
@TextColor3 #909399;
@TextColor4 #C0C4CC;

@BorderColor1 #DCDFE6;
@BorderColor2 #E4E7ED;
@BorderColor3 #EBEEF5;
@BorderColor4 #F2F6FC;

.list-time {
	float: right;
	color: #C0C4CC;
	font-size: 14px;
	margin-right: 10px;
}

/* 数据列表右上角的tag公共样式 */
.list-tag {
	position: absolute;
	top: 10px;
	right: 0px;
	text-align: center;
	text-indent: 0px;
	margin: 10px;
	font-size: 10px;
	padding: 5px 10px;
	border-radius: 4px;
	border: none;
	background-image: none;
}

.BrandTag {
	color: #303133;
	font-size: 14px;
	padding-left: 10px;
	padding: 5px 0;
	text-indent: 10px;
	font-weight: 400;
	border-left: 5px solid #409EFF;
	background-image: linear-gradient(90deg, #409EFF64, #00000000);
}

.BrandTag .list-tag {
	background-color: #409EFF32;
	color: #409EFF;
}

.SuccessTag {
	color: #303133;
	font-size: 14px;
	padding-left: 10px;
	padding: 5px 0;
	text-indent: 10px;
	font-weight: 400;
	border-left: 5px solid #67C23A;
	background-image: linear-gradient(90deg, #67C23A64, #00000000);
}

.SuccessTag .list-tag {
	background-color: #67C23A32;
	color: #67C23A;
}

.WarningTag {
	color: #303133;
	font-size: 14px;
	padding-left: 10px;
	padding: 5px 0;
	text-indent: 10px;
	font-weight: 400;
	border-left: 5px solid #E6A23C;
	background-image: linear-gradient(90deg, #E6A23C64, #00000000);
}

.WarningTag .list-tag {
	background-color: #E6A23C32;
	color: #E6A23C;
}

.DangerTag {
	color: #303133;
	font-size: 14px;
	padding-left: 10px;
	padding: 5px 0;
	text-indent: 10px;
	font-weight: 400;
	border-left: 5px solid #F56C6C;
	background-image: linear-gradient(90deg, #F56C6C64, #00000000);
}

.DangerTag .list-tag {
	background-color: #F56C6C32;
	color: #F56C6C;
}

.InfoTag {
	font-size: 14px;
	color: #303133;
	padding-left: 10px;
	padding: 5px 0;
	text-indent: 10px;
	font-weight: 400;
	border-left: 5px solid #303133;
	background-image: linear-gradient(90deg, #C0C4CC64, #00000000);
}

.InfoTag .list-tag {
	background-color: #30313332;
	color: #303133;
}

.data-list-title {
	height: 30px;
	display: flex;
	justify-content: space-between;
	color: #303133;
	padding: 0 10px;
	align-items: center;
}

.data-list {
	padding: 0 10px;
	overflow-x: hidden;
	max-height: calc(100vh - 320px);
}

.data-list p:not(.nonePadding) {
	padding: 0 10px;
	margin-bottom: 0px;
}

/* 时间样式 */
.data-list p span {
	color: #999999;
}

.data-list p:nth-child(2) {
	color: #CCCCCC;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -moz-box;
	-moz-line-clamp: 2;
	-moz-box-orient: vertical;
	overflow-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	overflow: hidden;
}

.data-list .content {
	padding: 10px 0 5px 0;
	text-indent: 2rem;
}

.dataListHr p:nth-child(1) {
	color: #409EFF;
}

.dataListHr p:nth-child(2) {
	color: #909399;
}

.data-list h4 {
	width: calc(100% - 60px);
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -moz-box;
	-moz-line-clamp: 2;
	-moz-box-orient: vertical;
	overflow-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	overflow: hidden;
	text-shadow: 0px 0px 0px;
}

.displayFlex {
	position: relative;
	display: flex;
	margin: 10px 0px;
	padding: 15px;
	background-color: #FFFFFF;
	flex-direction: column;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #CCC;
}

.displayFlex2 {
	position: relative;
	display: flex;
	margin: 20px 0px;
	align-items: center;
}

.displayFlex3 {
	position: relative;
	display: flex;
	align-items: center;
}

.displayFlex2 input {
	font-size: 16px;
	margin-left: 10px;
}

.bottom-bar {
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #CCC;
	font-size: 0.75em;
	/* background-color: #409EFF; */
}

.loginOut {
	padding: 10px;
	float: right;
}

#upTitle {
	font-size: 14px;
	color: #C0C4CC;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-wrap: nowrap;
	flex-direction: column;
}

#reSearch {
	align-items: center;
	color: #409EFF;
	padding: 10px 0 20px 10px;
}

.pageParam {
	display: none;
}

.dataListHr {
	border-radius: 3px;
	padding: 10px;
	background-image: linear-gradient(90deg, #F3F6FA, #00000000);
}

#searchState {
	position: relative;
	bottom: 5px;
	padding: 10px 10px 10px 0;
}

#autoLogin {
	width: 1.5rem;
}

#autoLoginText {
	color: #909399;
	font-size: 14px;
}

.changeType {
	position: fixed;
	bottom: 36px;
	right: 10px;
	/* background-color: #409EFF; */
	background-image: linear-gradient(-45deg, #409EFF, #409EFFaa);
	font-size: 14px;
	width: 3rem;
	height: 3rem;
	border-radius: 3rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	box-shadow: 3px 3px 5px #00000064;
	text-shadow: 1px 1px 2px #00000064;
	font-weight: bold;
	color: #FFFFFF;
	z-index: 999;
}

.mui-bar .mui-title {
	font-weight: bold;
}

#taskName {
	position: fixed;
	top: 50px;
	font-weight: bold;
	color: #409EFF;
	right: 5px;
	z-index: 999;
	background-color: #FFFFFF;
	padding: 3px 5px;
	border-radius: 3px;
	display: none;
}

.fileTitle {
	font-size: 20px;
	font-weight: bold;
	color: #000000;
	padding: 10px 0;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -moz-box;
	-moz-line-clamp: 2;
	-moz-box-orient: vertical;
	overflow-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	overflow: hidden;
}

.fileBox .dataListHr {
	padding: 10px 0;
	background-image: none;
}

#mapBottomBox {
	position: absolute;
	transition: linear 0.3s;
	padding: 20px;
	bottom: -100%;
	z-index: 9997;
	width: 100%;
	background-color: #FFFFFF;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	box-shadow: 0 0 3px 5px #000;
}

#mapBottomBox .title {
	position: relative;
	font-size: 20px;
	font-weight: bold;
	max-width: 40vw;
}

#mapBottomBox #mapImageList>div {
	background-color: #F2F6FC;
	border-radius: 5px;
	width: calc(50vw - 25px);
	height: calc(50vw - 25px);
	margin: 5px 0px;
	box-shadow: 1px 1px 5px 0px #ccc;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
}

#mapBottomBox #mapImageList .removeImage {
	/* position: absolute;
	right: 5px;
	top: 5px;
	background-color: #F56C6C;
	color: #FFF;
	box-shadow: 0 0 2px 1px;
	border-radius: 50%; */
}

#mapBottomBox #mapImageList>div>img {
	width: 100%;
}

#uploadImage {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	color: #909399;
}

#uploadImage div:nth-child(1) span {
	font-size: 40px;
}

#uploadImage div:nth-child(2) span {
	font-size: 20px;
}

#mapBottomBox #mapImageList {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: space-between;
}

#mapBottomBox .mapBrandTag {
	background-color: #409EFF32;
	color: #409EFF;
	padding: 5px;
	border-radius: 5px;
	font-weight: bold;
	box-shadow: 0 0 5px 1px;
	margin-bottom: 10px;
}

#mapBottomBox .mapSuccessTag {
	/* background-color: #67C23A32; */
	color: #67C23A;
	padding: 5px;
	border-radius: 5px;
	font-weight: bold;
	/* box-shadow: 0 0 5px 1px; */
	margin-bottom: 10px;
}

#mapBottomBox .mapWarning {
	/* background-color: #E6A23C32; */
	color: #E6A23C;
	padding: 5px;
	border-radius: 5px;
	font-weight: bold;
	/* box-shadow: 0 0 5px 1px; */
	margin-bottom: 10px;
}

#mapBottomBox .mapDangerTag {
	background-color: #F56C6C32;
	color: #F56C6C;
	padding: 5px;
	border-radius: 5px;
	font-weight: bold;
	box-shadow: 0 0 5px 1px;
	margin-bottom: 10px;
}

#mapBottomBox .mapInfoTag {
	background-color: #90939932;
	color: #909399;
	padding: 5px;
	border-radius: 5px;
	font-weight: bold;
	box-shadow: 0 0 5px 1px;
	margin-bottom: 10px;
}

.arrowdown {
	position: absolute;
	left: 50%;
	top: 5px;
	padding: 12px;
	transform: translate(-50%, 0);
}

/* 隐藏底部菜单 */
/* .paperplane{
	position: absolute;
	top: 10px;
	right: 10px;
	color: #409EFF;
	font-weight: bold;
} */
/* 提交 */
.paperplaneMyMarker {
	background-color: #499DF2;
	width: 100%;
	color: #FFFFFF;
	border-radius: 2rem;
	font-size: 17px;
	text-align: center;
	padding: 5px 0;
	letter-spacing: 10px;
}

.paperplaneMyMarker2 {
	border: 1px solid #499DF2;
	width: 100%;
	color: #499DF2;
	border-radius: 2rem;
	font-size: 17px;
	text-align: center;
	padding: 5px 0;
	letter-spacing: 10px;
}

.displayFlex3 .paperplane {
	background-color: #499DF2;
	width: 100%;
	color: #FFFFFF;
	border-radius: 2rem;
	font-size: 17px;
	text-align: center;
	padding: 5px 0;
	letter-spacing: 10px;
	margin-left: 5px;
}

.displayFlex3 .paperplaneMyMarker2 {
	border: 1px solid #499DF2;
	width: 100%;
	color: #499DF2;
	border-radius: 2rem;
	font-size: 17px;
	text-align: center;
	padding: 5px 0;
	letter-spacing: 10px;
	margin-right: 5px;
}

#mapTextArea {
	width: 100%;
	border-radius: 5px;
	background-color: #F5F5F5;
}

.my-div-icon {
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	/* box-shadow: 0 0 2px 3px #FFF; */
}

.my-div-icon2 {
	width: 10px;
	height: 10px;
	animation-name: example2;
	background-color: #FFbb00;
	animation-duration: 2s;
	border-radius: 50%;
	animation-iteration-count: infinite;
	box-shadow: 0 0 2px 3px #FFbb00cc;
}

/* 动画代码 */
@keyframes example {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

/* 动画代码 */
@keyframes example2 {
	0% {
		box-shadow: 0 0 2px 3px #FFbb00cc;
	}

	100% {
		box-shadow: 0 0 2px 15px #FFbb0064;
	}
}

#myMarkerId,
#addMyMarker {
	display: none;
}

.mui-poppicker {
	z-index: 9999 !important;
}

.mui-backdrop {
	z-index: 9998;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .3);
}

/* .mui-backdrop::before{
	content: "图片过大,压缩中!!!";
	font-weight: bold;
	text-shadow: 1px 1px 3px black;
	position: absolute;
	left: 50%;
	top: 50%;
	color: #FFFFFF;
	transform: translate(-50%,-50%);
} */
.leaflet-left .leaflet-control {
	margin-left: 5px;
}

.leaflet-top .leaflet-control {
	margin-top: 55px;
}

/* .openMyPhoneMap {
	position: absolute;
	padding: 10px;
	top: 60px;
	right: 10px;
	color: #34c6d8;
	display: flex;
	align-items: center;
} */