.content { background-color: #fff; padding-bottom: 80upx; .head{ display: flex; justify-content: space-between; align-items: center; background-color:#3384ff ; color: #fff; padding: 26upx; .head-lf{ .name{ width: 450upx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } .head-rt{ display: flex; justify-content:flex-start; align-items: center; .zhcx-iconfont{ font-size: 40upx; padding:0 8upx; } .message{ position: relative; .dot{ width: 16upx; height: 16upx; border-radius: 50%; background-color: red; position: absolute; right: 2upx; top: -5upx; color: #fff; line-height: 20; font-size: 8upx; text-align: center; } } .scanCode{ margin-top: -4upx; padding:0 8upx; } } } .banner{ height: 260upx; padding: 16upx 20upx; .swiper-item{ height:260upx; background-color:#fff; border-radius: 10upx; overflow: hidden; .bannerImage{ width: 710upx; height: 260upx; } } } .workbench{ .title { font-size: 38upx; padding:0 26upx; font-weight: 600; .tl-1 { color: #3384ff; padding-right: 8upx; } } .list { width:718upx; display: flex; justify-content:flex-start; flex-wrap: wrap; padding: 0 16upx; .item { width: 25%; height: 150upx; display: flex; justify-content:center; align-items: center; flex-direction: column; box-sizing: border-box; padding: 16upx 10upx; &.col-3{ width: 33.33%; } .icon { .zhcx-iconfont { font-size: 55upx; } } .text { width: 100%; font-size: 28upx; color: #333; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; padding-top: 16upx; } } } } }