/* packageI/newMedia/newMediaMy/newMediaMy.wxss */ view, text { box-sizing: border-box; } .header { display: flex; align-items: center; height: 240rpx; width: 100%; padding-left: 45rpx; background-image: linear-gradient( 133deg, #faa673 0%, #f43f4a 100% ); background-image: url(https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/new_media/my_head_bg.png); background-size: cover; } .header .header-container { display: flex; align-items: center; height: 90rpx; } .header .header-container .face { width: 90rpx; height: 90rpx; } .header .header-container .face image { width: 90rpx; height: 90rpx; border-radius: 50%; } .header .header-container .name { padding-left: 19rpx; font-size: 36rpx; color: #fff; } /* 我的流量 */ .flow { width: 690rpx; height: 230rpx; margin: -50rpx auto 0; padding: 25rpx 31rpx 20rpx; background-color: #fff; border-radius: 20rpx; } .flow .my-flow { font-size: 30rpx; color: #303030; } .flow .my-flow .num { color: #ef3532; } .flow .flow-items { display: flex; justify-content: space-between; padding: 20rpx 25rpx 0; } .flow .flow-items .flow-item { display: flex; flex-direction: column; align-items: center; } .flow .flow-items .flow-item .icon { width: 81rpx; height: 81rpx; } .flow .flow-items .flow-item .icon image { width: 81rpx; height: 81rpx; } .flow .flow-items .flow-item .text { margin-top: 10rpx; font-size: 24rpx; color: #747474; } /* tabs切换 */ .tabs { background: #fff; display: flex; justify-content: space-evenly; height: 80rpx; margin-top: 20rpx; } .tabs .tabItem { font-size: 26rpx; color: #747474; display: flex; align-items: center; } .tabs .tabItem.active { font-size: 30rpx; color: #ef3532; position: relative; } .tabs .tabItem.active::after { content: ''; display: block; width: 56rpx; height: 6rpx; background-color: #ef3532; border-radius: 10rpx; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } /* 我看过的 */ .my-seen { padding: 0 30rpx; } .my-seen .my-seen-tabs { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 98rpx; overflow-x: scroll; } .my-seen .my-seen-tabs .my-seen-tab { display: flex; align-items: center; justify-content: center; height: 50rpx; padding: 0 13rpx; flex-shrink: 0; width: 126rpx; margin-right: 12rpx; color: #717171; font-size: 24rpx; white-space: nowrap; border-radius: 25rpx; } .my-seen .my-seen-tabs .my-seen-tab.active { color: #fff; background-color: #f14e4e; } .ad-articles { display: flex; flex-wrap: wrap; justify-content: space-between; } .ad-article-item { margin-bottom: 10rpx; padding-bottom: 21rpx; width: 340rpx; border-radius: 10rpx; background-color: white; overflow: hidden; } /* 我发布的--红色信息框 */ .specific { padding: 20rpx; background: #fff; } .specific .specific-container { display: flex; flex-direction: column; justify-content: space-evenly; width: 100%; height: 267rpx; background-image: linear-gradient(-90deg, #ff6a48 0%, #ed4046 100%), linear-gradient(#d09d3f, #d09d3f); background-blend-mode: normal, normal; border-radius: 20rpx; } .specific .specific-container .specific-items { display: flex; justify-content: space-evenly; align-items: center; } .specific .specific-container .specific-items .specific-item { flex: 1; display: flex; flex-direction: column; align-items: center; color: #fff; } .specific .specific-container .specific-items .specific-item .num { font-size: 32rpx; text-align: center; } .specific .specific-container .specific-items .specific-item .text { margin-top: 6rpx; font-size: 26rpx; } .specific .specific-container .specific-items .hr { width: 2rpx; height: 50rpx; background-color: #fff; opacity: 0.5; } .my-release-container { padding: 0 30rpx; } .nav-box { display: flex; align-items: center; justify-content: space-between; height: 80rpx; } .nav-box.seen-nav-box { align-items: flex-start; height: 70rpx; } .nav-box .name { font-size: 28rpx; color: #484848; } .nav-box .screenBox { position: relative; display: flex; padding-left: 16rpx; z-index: 10; } .nav-box .screenBox .srceenText { font-size: 24rpx; color: #404040; } .nav-box .screenBox .srceenOptions { position: absolute; top: 58rpx; left: -10rpx; width: 130rpx; padding: 6.5rpx 0; background-color: #fff; box-shadow: 0 0 26rpx rgba(198, 198, 198, 0.6); } .nav-box .screenBox .srceenOptions .srceenOptionsItem { padding: 8rpx 0; text-align: center; font-size: 24rpx; color: #404040; } .nav-box .screenBox .srceenOptions .srceenOptionsItem.active { color: #f15353; } .nav-box .screenBox .srceenOptions::before { content: ""; position: absolute; top: -10rpx; left: 50%; transform: translateX(-50%); display: block; width: 0; height: 0; border-left: 11rpx solid transparent; border-right: 11rpx solid transparent; border-bottom: 11rpx solid #fff; } .release-list { padding-bottom: 30rpx; } .release-list-item { margin-bottom: 20rpx; } .loadingimg { width: 4rem; height: 4rem; margin: 0 auto; padding: 100rpx 0; box-sizing: content-box; } .loadingimg image { width: 100%; height: 100%; }