.pannel { box-sizing: border-box; display: flex; flex-direction: column; // 頭部區域 .header_box { position: relative; height: 35px; overflow: visible !important; .top_line { display: flex; justify-content: space-between; background-color: rgba(22, 60, 114, 1); width: 100%; height: 2px; .left_sign { height: 2px; width: 13px; background-color: rgba(53, 143, 255, 1); } .right_sign { height: 2px; width: 13px; background-color: rgba(53, 143, 255, 1); } } .header { margin-top: 2px; height: 32px; background: rgba(8, 33, 71, 1); .title_bk { // font-style: italic; font-weight: 600; height: 50px; margin-left: 20px; line-height: 32px; text-align: center; .icon { display: block; background: url('./icon.png'); background-size: 100% 100%; width: 18px; height: 18px; } p { margin-left: 10px; } } .more { margin-right: 20px; } } .light { position: absolute; bottom: -15px; left: 30px; background: url('./light.png'); background-size: 100% 100%; width: 280px; height: 30px; animation: lightmove 4s infinite; } } // 内容区域 .body { margin: 2px; padding: 10px; width: 100%; position: relative; flex: 1; background-color: rgba(11, 28, 58, 1); overflow: hidden; .bottom_line { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; background-color: rgba(22, 60, 114, 1); width: 100%; height: 2px; .left_sign { height: 2px; width: 13px; background-color: rgba(53, 143, 255, 1); } .right_sign { height: 2px; width: 13px; background-color: rgba(53, 143, 255, 1); } } div { width: 100%; height: 100%; } } } @keyframes lightmove { /* 动画关键帧 */ 0% { opacity: 1; transform: translateX(0px); /* 样式 */ } 50% { opacity: 0.2; transform: translateX(170px); } /* 。。。 */ 100% { opacity: 1; transform: translateX(0px); /* 样式 */ } }