$borderColor: #DCDFE6; $bgColor: #548FF0; $errorColor: #F56C6C; $warningColor:#E6A23C; $color: #409EFF; $bg2: #fff; $larger:16px; //小标题 h3 { font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; } #app { .left-main { // width: calc(100% - 251px); display: inline-block; position: absolute; left: 0; top: 60px; bottom: 0; right: 261px; } .right-main { // height: 100%; width: 250px; position: absolute; top: 60px; right: 0; bottom: 0; border: 1px solid $borderColor; box-sizing: border-box; } } .build_header { // min-width: 800px; width: 100%; line-height: 45px; width: 100%; border: 1px solid $borderColor; border-top: none; box-sizing: border-box; background-color: $bg2; padding-left: 20px; box-sizing: border-box; border-radius: 4px; } #buildData { overflow: hidden; height: 100%; width: 100%; padding: 20px; box-sizing: border-box; border-radius: 4px; // flex-direction: column; // display: flex; background-color: $bg2; .icon { position: absolute; z-index: 99; bottom: 20px; left: 20px; } img::after { content: ""; // font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #F56C6C; // display: flex; // justify-content: center; // align-items: center; position: absolute; text-align: center; font-size: 12px; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; line-height: 140px; background-color: #EBEEF5; } .Blue { color: #409eff; } .img_view { position: relative; video { width: 100%; height: 100%; border: 1px solid $borderColor; } } .active_swiper { border: 2px solid #409eff !important; } .point_view { position: absolute; width: 100%; overflow: hidden; top: 0; left: 0; right: 0; z-index: 500; background-color: #fff; } .build_label { height: 180px; width: 100%; position: relative; font-size: 0.8rem; border-bottom: 1px solid $borderColor; .turn_left, .turn_right { position: absolute; top: 0; bottom: 0; height: 100%; line-height: 180px; width: 4rem; z-index: 90; // flex: 1; i { cursor: pointer; font-size: 4rem; } } .turn_left { left: 0; } .turn_right { right: 0; } .label_view { width: 100%; overflow-x: auto; .swiper-container { width: 100%; } .active_swiper { width: 100%; } .swiper-slide { background: #fff; border: 1px solid $borderColor; height: 150px; width: 150px; margin: 20px; display: inline-block; box-sizing: border-box; h3 { font-size: $larger; } .all_view { margin-top: 50px; text-align: center; } .msg_view { margin-top: 35px; text-align: center; height: 5.5rem; } // .msg_view:first-child{ // margin-top: 2rem; // } .img_view { height: 100%; width: 100%; overflow: hidden; position: relative; .title_view { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; // background: url("./../../static/property-grad.png") top left // repeat-x; // width: 100%; // position: absolute; // opacity: 0.9; color: #303133; // background: rgba(0,0,0,0.1); z-index: 88; padding-left: 6px; box-sizing: border-box; } .btn { position: absolute; right: 10px; bottom: 10px; cursor: pointer; z-index: 599; } } } .first_tag { padding: 4rem 0; text-align: center; h3 { line-height: 4rem; } } } } .label_show { height: 44px; margin-top: 0; text-align: center; border: 1px solid #DCDFE6; border-right: none; border-left: none; } .build_operate { height: 3rem; line-height: 3rem; margin-top: 30px; margin-bottom: 10px; width: 100%; // border: 1px solid #DCDFE6; // padding-left: 20px; // box-sizing: border-box; .build_msg { float: right; font-size: 12px; height: 1.5rem; line-height: 1.5rem; margin-top: 0.75rem; padding: 0 1rem; margin-right: 2rem; background-color: #f3c0c0; color: #000; border-radius: 5px; } /* 定义keyframe动画,命名为blink */ @keyframes blink { 0% { background-color: $errorColor; } 100% { background-color: $warningColor; } } /* 定义blink类*/ .blink { color: #fff; background-color: $errorColor; animation: blink 3s linear infinite; } span { margin-left: 1rem; display: inline-block; cursor: pointer; } span:first-child::after { content: "|"; color: #000; margin-left: 1rem; } .undo_btn { cursor: pointer; float: right; margin-right: 1rem; } } .build_table { // flex: 1; overflow: hidden; width: 100%; // height: 400px; .el-tabs { // height: 400px; width: 100%; } .el-tabs__content { height: 100%; } .data_page { // position: absolute; width: 100%; // bottom: 0; background-color: #fff; } } .build_pic { width: 100%; height: 200px; position: relative; background-color: #fff; left: 0; bottom: 0; right: 0; // padding: 0.4rem 4rem; border-top: 1px solid $borderColor; .pic_show { position: absolute; top: -2.3rem; right: 2rem; padding: 0.4rem 1rem; border: 1px solid $borderColor; margin-bottom: 3rem; color: #606266; background: #fff; border-radius: 4px; cursor: pointer; } .turn_left, .turn_right { position: absolute; top: 0; bottom: 0; height: 100%; width: 4rem; z-index: 90; // flex: 1; i { cursor: pointer; font-size: 4rem; } } .turn_left { left: 0; } .turn_right { right: 117px; } .pic_view { width: 100%; height: 100%; } .swiper-container { width: 100%; height: 100%; } #swiperPic { padding-top: 10px; box-sizing: border-box; .swiper-slide { padding: 10px; box-sizing: border-box; background: #fff; border: 1px solid $borderColor; .img_view { height: 100%; width: 100%; overflow: hidden; position: relative; p { position: absolute; bottom: 0; right: 0; left: 0; background-color: rgba(175, 175, 175, 0.4); text-align: center; } } } .pic_view { width: 100%; height: 100%; padding-left: 1rem 4rem; } } } .modification { .el-dialog__body { height: 100%; .mod_title { // max-height: 8rem; height: 300px; .qr_code, .msg_main { float: left; } .qr_code { width: 35%; height: 100%; padding: 0 0.6rem 0.3rem; img { width: 100%; display: block; height: 100%; } } .msg_main { width: 55%; p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .input_view { margin-top: 0.5rem; position: relative; input { width: 100%; height: 1.5rem; padding-left: 0.5rem; box-sizing: border-box; } i { position: absolute; right: 10px; font-size: 18px; top: 2px; color: #409eff; display: inline-block; width: 20px; cursor: pointer; transition: all 0.4s; } } } } .cant_mod { width: 100%; .table_header { border: 1px solid $borderColor; border-bottom: none; font-weight: 900; padding-left: 0.5rem; } table { width: 100%; border-color: #b6ff00; border-collapse: collapse; border: 1px solid $borderColor; tr { line-height: 1.5rem; td { border: 1px solid $borderColor; padding-left: 1rem; } } } .locale_pic { p { line-height: 1.8rem; font-weight: 900; margin-top: 0.5rem; border-bottom: 1px solid $borderColor; } div { ul { padding-left: 5px; li { width: 45%; float: left; margin: 10px; height: 12rem; overflow: hidden; position: relative; img { width: 100%; height: 193px; display: block; border: 1px solid $borderColor; } } } } } } } } .iframe_view { position: fixed; z-index: 99999; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); .iframe_no { position: fixed; z-index: 99999; border-radius: 50%; cursor: pointer; height: 80px; overflow: hidden; right: -40px; top: -40px; transition: background-color 0.15s; width: 80px; background-color: rgba(0, 0, 0, 0.6); // background-color: #b6ff00; .iconfont { margin-top: 48px; display: inline-block; margin-left: 16px; font-size: 16px; color: #fff; } } iframe { width: 100%; height: 100%; } } }