page{ overflow-x: hidden; display: flex; height: 100%; width: 100%; flex-direction: column; } // .pagecontainer{ // position: absolute; // width: 686rpx; // // height: 379rpx; // background: #FFFFFF; // border-radius: 8px; // position: absolute; // top: 50%; // left: 50%; // transform: translate(-50%,-50%); // z-index:999 // } .header-title{ // padding:0 34rpx; padding:0 26rpx; width: 100%; display: flex; flex-direction: row; align-items: center; background: rgba(255, 255, 255, 0.6); } .mini_mask{ width: 100%; z-index: 100; position: absolute; // overflow: hidden; .stepmask{ padding:0 16rpx; background:rgba(0, 0, 0, 0); position: absolute; border-radius: 4px; box-shadow:0 0 5px 800px rgba(0,0,0,0.2); } .step_one{ height: 130rpx; width: 450rpx; top: 43rpx; left: 0; .one_contant{ position: absolute; width: 201px; height: 40px; top: 170rpx; background: #04B49C; box-shadow: 0px 1px 16px 0px rgba(227, 227, 227, 0.5); border-radius: 6px; color: #FFFFFF; font-size: 14px; &::before{ content: ''; width: 17px; height: 17px; position: absolute; top:-7px; left: 50rpx; background:#04B49C; transform: rotate(45deg); // border-top: 10px solid transparent; // border-left: 10px solid black; // border-bottom: 10px solid transparent; border-radius: 5px; } } } } .user-img{ width: 64rpx; height: 64rpx; margin-right: 24rpx; border-radius: 50%; overflow: hidden; justify-content: center; } .delete_icon{ height: 339px; display: flex; align-items: center; padding-left: 16px; .delete_box{ width: 44px; height: 44px; background: #FEF2F1; border-radius: 50%; image{ width: 32rpx; height: 32rpx; } } } .home-icon{ .projectname{ font-size: 16px; color: #1F2329; image{ width: 20rpx; height: 10rpx; margin-left: 16rpx; } } .daytmp{ justify-content: start; font-size: 13px; color: #646A73; image{ height: 32rpx; width: 32rpx; } } } .contant_box{ background: #f9fafa; height: 100%; width: 100%; .spacelist_box{ margin:20rpx 32rpx 0; .space_item{ width: 100%; // height: 840rpx; padding-bottom: 40rpx; background: #FFFFFF; box-shadow: 0px 4px 3px 0px rgba(43, 48, 54, 0.1); border-radius: 8px; margin-bottom: 40rpx; &>view{ text-align: left; } .space_bg{ width: 100%; height: 398rpx; border-radius: 8px 8px 0 0; overflow: hidden; image{ width: 100%; height: 100%; } } .space_msg{ height: 154rpx; padding: 0 32rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; .msg_left{ .spacename{ height: 56rpx; font-size: 40rpx; font-weight: 400; color: #2B3036; line-height: 56rpx; vertical-align: middle; } .peoplestate{ display: inline-block; box-sizing: border-box; padding: 1px 7px; margin-left: 10px; background: #34c724; vertical-align: middle; color: #ffffff; border-radius: 12px; font-size: 20rpx; } .activepeople{ background: #f54e45; } .spacestate{ font-size: 30rpx; color: #8D9399; line-height: 42rpx; margin-top: 8rpx; justify-content:flex-start; &>view{ margin-left: 18rpx; width: 46rpx; height: 46rpx; } } } .msg_right{ display: flex; align-items: center; text{ font-size: 46rpx; color: #2B3036; } } } .space_paramelist{ margin: 0 24rpx; // height: 140rpx; background: #F8F9FA; border-radius: 4px; .parame_item{ max-width: 25%; min-width: 25%; padding:32rpx 0rpx 32rpx 0rpx; display: flex; justify-content: flex-start; align-items: flex-start; .icon_name{ justify-content: flex-start; image{ width: 32rpx; height: 32rpx; margin-right: 8rpx; } color: #8D9399; font-size: 24rpx; } .parame_num{ color: #646A73; font-size: 24rpx; font-weight: bold; float: left; text{ font-size: 32rpx; } } .parame_tag{ margin:8rpx 0; padding: 4rpx 14rpx; color: #ffffff; border-radius: 24rpx; // height: 30rpx; font-size: 18rpx; display: flex; justify-content: center; align-items: center; min-width: 72rpx; } .taghumiditybg0{ background:var(--envredColor); color:var(--envredtxtColor); } .taghumiditybg1{ background:var(--envgreenColor); color:var(--envgreentxtColor); } .taghumiditybg2{ background:var(--envblueColor); color:var(--envbluetxtColor); } .tagpm25bg0{ background:var(--envgreenColor); color:var(--envgreentxtColor); } .tagpm25bg1{ background:var(--envyellowColor); color:var(--envyellowtxtColor); } .tagpm25bg2{ background:var(--envredColor); color:var(--envredtxtColor); } .tagco2bg0{ background:var(--envgreenColor); color:var(--envgreentxtColor); } .tagco2bg1{ background:var(--envyellowColor); color:var(--envyellowtxtColor); } .tagco2bg2{ background:var(--envredColor); color:var(--envredtxtColor); } .taghchobg0{ background:var(--envgreenColor); color:var(--envgreentxtColor); } .taghchobg1{ background:var(--envyellowColor); color:var(--envyellowtxtColor); } .taghchobg2{ background:var(--envredColor); color:var(--envredtxtColor); } .novalue{ min-height:16px; font-weight: bold; background:var(--nodateColor); color:var(--nodatetxtColor); } } .parame_item:nth-child(1){ padding:32rpx 0rpx 32rpx 24rpx; } .parame_item:nth-child(4){ padding:32rpx 24rpx 32rpx 0rpx; } } .space_btns{ display: flex; align-items: center; justify-content: space-around; margin-top: 32rpx; button{ margin: 0; width: auto; display: inline-block; font-size: 26rpx; height: 76rpx; display: flex; padding-left: 0; padding-right: 0; text-align: center; flex-direction: row; align-items: center; justify-content: center; border-radius: 38rpx; } .btns_top{ width: 162rpx; color: #8D9399; // border: 1px solid #EFF0F1; border: 1px solid transparent; } .btns_top_active{ background: #EAFAF8; color: #04B49C; border: 0px solid #EFF0F1; } .btns_adjust{ width: 460rpx; color: #ffffff; background-color: #04B49C; border-radius: 38rpx; } } } } .nospace{ width: 100%; max-width: 343px; margin:0 auto; height: 339px; border-radius: 8px; border: 1px dashed #DDDDDD; justify-content: space-between; .nospace_center{ margin-top: 216rpx; .nospace_img{ width: 120rpx; height: 116rpx; } text{ font-size: 30rpx; color: #000000; line-height: 48rpx; } } .nospace_msg{ .nospace_down{ width: 32rpx; height: 28rpx; margin: 16rpx 0 24rpx; } text{ font-size: 24rpx; color: #C3C6CB; line-height: 40rpx; } } } .scannospace{ width: 100%; max-width: 343px; margin: 0 auto; height: 254px; margin-top: 40rpx; background: #FFFFFF; box-shadow: 0px 6px 20px 0px rgba(43, 48, 54, 0.1); border-radius: 4px; .scan_box{ width: 198rpx; height: 198rpx; background: #F0F8FF; border-radius: 4px; image{ width: 78rpx; height: 78rpx; } } .scan_name{ margin-top: 24rpx; font-size: 36rpx; color: #2B3036; line-height: 56rpx; } .scan_scr{ font-size: 24rpx; color: #8D9399; line-height: 36rpx; } } .placeholder-view{ width: 100%; height: 202rpx; // height: 156rpx; } } .faillogin{ background: #ffffff; } .footer_box{ position:fixed; bottom: 0; width: 100%; padding: 26rpx 32rpx 68rpx; box-sizing: border-box; // height: 78px; background: #ffffff; display: flex; justify-content: space-around; flex-direction: row; box-shadow: 0px 6px 20px 0px rgba(43, 48, 54, 0.1); border-radius: 0px 0px 4px 4px; border-top:1px solid #F5F6F7; } .footer_box_active{ border-top:1px solid #c7c8c8; } .footer_box_pop{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000000; opacity: 0.2; } .spacedetail{ display: flex; flex-direction: row; align-items: center; } .footer_box{ z-index:100; .item_title{ font-size: 18px; line-height: 28px; } .item_des{ color: #8D9399; font-size: 12px; } .item_img{ width: 106rpx; height: 106rpx; background: #F0F8FF; border-radius: 4px; margin-right: 24rpx; display: flex; justify-content: center; align-items: center; cover-image{ width: 48rpx; height: 48rpx; } } }