/**index.wxss**/ /* 隐藏内容 */ .none { display: none; } .my { width: 100%; padding: 0 15rpx; box-sizing: border-box; } .message, .medal, .ranking { width: 100%; margin: 20rpx 0; border-radius: 25rpx; padding: 32rpx 24rpx; box-sizing: border-box; background: #fff; } .message { margin: 20rpx 0 0 0; } .user { display: flex; justify-content: space-between; border-bottom: 2rpx solid #CDCED3; padding-bottom: 20rpx; } .head { display: flex; align-items: center; } .left { display: flex; flex-direction: column; justify-content: center; width: 340rpx; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/ margin-left: 34rpx; } .userinfo-avatar { width: 86rpx; height: 86rpx; border-radius: 20%; } .name { height:44rpx; font-size: 36rpx; font-weight: 600; margin-top: 10rpx; } .LV { font-size: 28rpx; font-weight: 600; } .student { height:34rpx; font-size: 28rpx; color: #878787; } .grade, .set-name { width: 146rpx; height: 46rpx; font-size: 28rpx; font-weight: bolder; color: #878787; border: 2rpx solid #CECDD2; border-radius: 30rpx; text-align: center; line-height: 48rpx; } .set-name { margin-top: 10rpx; } .personal { display: flex; margin-top: 34rpx; } .personal .particulars { flex: 1; display: flex; flex-direction: column; text-align: center; } /*排名*/ .ranking { margin: 0 0 20rpx 0; position: relative; } .dashed { position: absolute; top: 0; left: 5%; width: 90%; border-top:2rpx dashed #878787; } .ranking .title text{ font-size: 36rpx; font-weight: 600; } .ranking-con { margin-bottom: 40rpx; } .rank { display: flex; justify-content: space-between; font-size: 28rpx; margin-bottom: 30rpx; } .particular { position: absolute; right: 30rpx; bottom: 30rpx; color: #5984F7; font-size: 28rpx; } /*勋章*/ .medal { padding: 28rpx; } .medal .title { display: flex; justify-content: space-between; align-items: center; } .medal .title text:nth-child(1){ font-size: 36rpx; font-weight: 600; } .medal .title text:nth-child(2){ font-size: 28rpx; color: #878787; } .img { display: flex; padding-top: 38rpx; } .img view { position: relative; display: flex; flex-direction: column; justify-content: center; margin-right: 15rpx; } .no-gain { position: absolute; left: 0; top: 0; width: 142rpx; height: 142rpx; } .img image { width: 140rpx; height: 140rpx; } .img text { font-size: 28rpx; color: #878787; margin-top: 10rpx; } .personal .particulars text:nth-child(1) { font-size: 24rpx; color: #878787; } .personal .particulars text:nth-child(2) { font-size: 28rpx; color: #000; font-weight: 600; } .questions, .share { width: 100%; margin-top: 40rpx; } .questions text, .share text { width: 100%; display: inline-block; border: 1px solid #ccc; background: #fff; } .questions view, .share view { height: 1400rpx; margin-top: 20rpx; background: red; } .adsorb { position: fixed; left: 0; top: 84rpx; } .canvas-box { position: absolute; left: 999px; top: 0; width: 100%; z-index: -2; }