page { background-color: #f5f5f5; } /* 列表 */ .lists { padding: 30rpx; box-sizing: border-box; } .lists-item { padding: 30rpx 30rpx 20rpx; box-sizing: border-box; margin-bottom: 30rpx; border-radius: 30rpx; background-color: #ffffff; box-shadow: 0 0 6rpx rgb(232, 232, 232); } .lists-top { position: relative; } .lists-head { width: 120rpx; height: 120rpx; border-radius: 50%; } .lists-cont { position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; padding-left: 140rpx; } .lists-name { font-weight: 600; margin: 15rpx 0; } .lists-identity { width: 130rpx; } .lists-text { font-size: 28rpx; padding: 20rpx 0 10rpx; line-height: 42rpx; color: #383838; box-sizing: border-box; } .lists-img { margin: 0 -10rpx; } .lists-label { display: inline-block; width: calc(100% - 20rpx); margin: 10rpx; padding-top: calc(100% - 20rpx); position: relative; border-radius: 4rpx; overflow: hidden; } .lists-label.lists-two { width: calc(50% - 20rpx); padding-top: calc(50% - 20rpx); } .lists-label.lists-three { width: calc(33.33% - 20rpx); padding-top: calc(33.33% - 20rpx); } .lists-label image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .write { position: fixed; right: 30rpx; bottom: 100rpx; z-index: 1000; background-color: #ffffff; width: 90rpx; height: 90rpx; border-radius: 50%; box-shadow: 0 2rpx 10rpx rgba(98, 112, 255, .4); padding: 20rpx; box-sizing: border-box; } .write image { width: 100%; height: 100%; }