.main { padding: 10px 14px 0; width: 100%; height: 40px; display: flex; justify-content: space-between; align-items: center; position: relative; .titleLeft { display: flex; align-items: flex-start; } .titleImg { width: 4px; height: 30px; margin-right: 10px; } .titleBg { width: 100%; height: 46.5px; } .title { font-size: 20px; // font-family: Source Han Sans CN-Medium, Source Han Sans CN; font-weight: 500; color: #C9EFFF; line-height: 20px; letter-spacing: 2px; } .icon { width: 20px; height: 20px; pointer-events: initial; } .titleBorder { position: absolute; top: 40px; left: 13px; width: 100%; height: 1px; } .arrow { position: absolute; right: 14px; top: 29px; width: 26px; height: 26px; pointer-events: initial; transition: transform 0.2s; } .titleBg { height: 47px; width: 100%; background: url('@/Project/assets/chartBox/title-bg.png'); background-size: 100% 100%; } .titleBgMini { background-image: url('@/Project/assets/chartBox/title-bg-mini.png'); } // .titleImg { // display: block; // float: left; // height: 100%; // } // .titleBar02 { // // flex: 132 1 auto; // float: left; // height: 100%; // --shf: 4.9406564584124654e-322; // width: calc(((100% - 214px) / 479) * 132); // background: url('@/Project/assets/chartBox/titleBar02.png') no-repeat center; // background-size: 100% 100%; // } // .titleBar04 { // float: left; // height: 100%; // // flex: 215 1 auto; // width: calc(((100% - 214px) / 479) * 215); // background: url('@/Project/assets/chartBox/titleBar04.png') no-repeat center; // background-size: 100% 100%; // } // .titleBar06 { // float: left; // height: 100%; // // flex: 132 1 auto; // width: calc(((100% - 214px) / 479) * 132); // background: url('@/Project/assets/chartBox/titleBar06.png') no-repeat center; // background-size: 100% 100%; // } } .jiao { position: absolute; width: 10px; height: 11.11px } .jiao1 { .jiao; top: -1px; left: -1px; } .jiao2 { .jiao; top: -1px; right: -1px; } .jiao3 { .jiao; bottom: -1px; left: -1px; } .jiao4 { .jiao; bottom: -1px; right: -1px; }