|
@@ -1,255 +1,288 @@
|
|
-page {
|
|
|
|
- background-color: #161616;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100vh;
|
|
|
|
-}
|
|
|
|
-.page {
|
|
|
|
- background-color: #161616;
|
|
|
|
- width: 100%;
|
|
|
|
-}
|
|
|
|
-.header {
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: row;
|
|
|
|
- justify-content: flex-start;
|
|
|
|
- align-items: center;
|
|
|
|
- width: 750rpx;height: 320rpx;
|
|
|
|
- padding-top: calc(var(--status-bar-height) + 0rpx);
|
|
|
|
- .left {
|
|
|
|
- display: flex;flex-direction: row;width:200rpx;height:120rpx;
|
|
|
|
- justify-content: center;
|
|
|
|
- padding-left:50rpx;
|
|
|
|
- image {
|
|
|
|
- width:124rpx;height:40rpx;
|
|
|
|
|
|
+
|
|
|
|
+ .classModel {
|
|
|
|
+ width: 750rpx;
|
|
|
|
+ height: 110rpx;
|
|
|
|
+ // #ifndef APP-NVUE
|
|
|
|
+ display: flex;
|
|
|
|
+ // #endif
|
|
|
|
+ // #ifdef APP-NVUE
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ // #endif
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+
|
|
|
|
+ .classModel-bg {
|
|
|
|
+ width: 210rpx;
|
|
|
|
+ height: 90rpx;
|
|
|
|
+ background-color: #3F4141;
|
|
|
|
+ border-radius: 60rpx;
|
|
|
|
+ box-shadow: 3px 3px 2px rgba(174, 230, 93, 1);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .classModel-img {
|
|
|
|
+ width: 175rpx;
|
|
|
|
+ height: 75rpx;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
-.thread {
|
|
|
|
- height: 20rpx;
|
|
|
|
-}
|
|
|
|
-.thread2 {
|
|
|
|
- height: 60rpx;
|
|
|
|
-}
|
|
|
|
-.topbanner {
|
|
|
|
- width:750rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top:-120rpx;
|
|
|
|
- .left {
|
|
|
|
- width: 334rpx;height: 334rpx;
|
|
|
|
- background: linear-gradient( 161deg, #9A6DFF 0%, #84A0FF 100%);
|
|
|
|
- border-radius: 24rpx;
|
|
|
|
- position: relative;
|
|
|
|
- .aibg {
|
|
|
|
- width:266rpx;height:214rpx;position: absolute;right:0rpx;bottom:32rpx;
|
|
|
|
- }
|
|
|
|
- .title {
|
|
|
|
- padding-left:30rpx;padding-top:28rpx;
|
|
|
|
- font-weight: bold;
|
|
|
|
- font-size: 40rpx;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
- }
|
|
|
|
- .desc {
|
|
|
|
- padding-left:30rpx;padding-top:10rpx;
|
|
|
|
- font-weight: 400;
|
|
|
|
- font-size: 26rpx;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
- }
|
|
|
|
- .btn {
|
|
|
|
- position: absolute;left:30rpx;bottom:40rpx;width: 176rpx;height: 64rpx;
|
|
|
|
- background: #FFFFFF;
|
|
|
|
- border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
|
|
- font-weight: bold;
|
|
|
|
|
|
+
|
|
|
|
+ .tab-nav {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ padding: 20rpx 0;
|
|
|
|
+ background: #161616;
|
|
|
|
+
|
|
|
|
+ .tab-item {
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
+ color: #808080;
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
- color: #9D75FF;
|
|
|
|
- display: flex;flex-direction: center;justify-content: center;align-items: center;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .right {
|
|
|
|
- margin-left:22rpx;
|
|
|
|
- display: flex;flex-direction: column;justify-content: center;align-items: center;
|
|
|
|
- .item1 {
|
|
|
|
- width: 334rpx;
|
|
|
|
- height: 156rpx;
|
|
|
|
- background: linear-gradient( 173deg, #FF7DDF 0%, #FFAFE4 100%);
|
|
|
|
- border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
|
- position: relative;
|
|
|
|
- .meinv {
|
|
|
|
- width:138rpx;height:132rpx;position: absolute;right:18rpx;bottom:0rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .item2 {
|
|
|
|
- width: 334rpx;height: 156rpx;margin-top:22rpx;
|
|
|
|
- background: linear-gradient( 173deg, #FFA665 0%, #FFDDA7 100%);
|
|
|
|
- border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
|
- position: relative;
|
|
|
|
- .talk {
|
|
|
|
- width:136rpx;height:116rpx;position: absolute;right:3rpx;bottom:2rpx;
|
|
|
|
|
|
+
|
|
|
|
+ &.active {
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .title {
|
|
|
|
- padding-left:30rpx;padding-top:28rpx;
|
|
|
|
- font-weight: bold;
|
|
|
|
- font-size: 36rpx;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
- }
|
|
|
|
- .desc {
|
|
|
|
- padding-left:30rpx;padding-top:10rpx;
|
|
|
|
- font-weight: 400;
|
|
|
|
- font-size: 26rpx;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
-}
|
|
|
|
-.centerbanner {
|
|
|
|
- width:750rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top:20rpx;
|
|
|
|
- .item1 {
|
|
|
|
- width: 258rpx;height: 108rpx;
|
|
|
|
- background: linear-gradient( 163deg, #08AAC6 0%, #24C9B4 100%);
|
|
|
|
- border-radius: 24rpx;
|
|
|
|
- position: relative;
|
|
|
|
- .icon {
|
|
|
|
- width:100rpx;height:100rpx;position: absolute;right:6rpx;bottom:0rpx;
|
|
|
|
- }
|
|
|
|
- .title {
|
|
|
|
- padding-left:20rpx;padding-top:28rpx;
|
|
|
|
- font-weight: bold;font-size: 30rpx;color: #FFFFFF;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .item2 {
|
|
|
|
- width: 204rpx;height: 108rpx;margin-left:12rpx;
|
|
|
|
- background: linear-gradient( 154deg, #88E6FF 0%, #DAF7FF 100%);
|
|
|
|
- border-radius: 24rpx;
|
|
|
|
- position: relative;
|
|
|
|
- .icon {
|
|
|
|
- width:100rpx;height:100rpx;position: absolute;right:4rpx;bottom:0rpx;border-radius: 16rpx;
|
|
|
|
- }
|
|
|
|
- .title {
|
|
|
|
- padding-left:20rpx;padding-top:28rpx;
|
|
|
|
- font-weight: bold;font-size: 30rpx;color: #FFFFFF;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .item3 {
|
|
|
|
- width: 204rpx;height: 108rpx;margin-left:12rpx;
|
|
|
|
- background: linear-gradient( 154deg, #FF8888 0%, #FBDAFF 100%);
|
|
|
|
- border-radius: 24rpx;
|
|
|
|
- position: relative;
|
|
|
|
- .icon {
|
|
|
|
- width:108rpx;height:108rpx;position: absolute;right:4rpx;bottom:0rpx;border-radius: 16rpx;
|
|
|
|
- }
|
|
|
|
- .title {
|
|
|
|
- padding-left:20rpx;padding-top:28rpx;
|
|
|
|
- font-weight: bold;font-size: 30rpx;color: #FFFFFF;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-.section-title {
|
|
|
|
- width:750rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-top:20rpx;
|
|
|
|
- font-weight: bold;padding-left:30rpx;
|
|
|
|
- font-size: 32rpx;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
-}
|
|
|
|
-.article_notify {
|
|
|
|
- width: 690rpx;height: 140rpx;margin-left:30rpx;margin-top:20rpx;
|
|
|
|
- background: #28292D;
|
|
|
|
- border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
|
- display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
|
|
|
|
- .left {
|
|
|
|
- width: 140rpx;
|
|
|
|
- height: 140rpx;
|
|
|
|
|
|
+
|
|
|
|
+ .hot-topics {
|
|
|
|
+ padding: 20rpx;
|
|
background: #28292D;
|
|
background: #28292D;
|
|
- border-radius: 24rpx;
|
|
|
|
- image {
|
|
|
|
- width: 140rpx;height: 140rpx;border-radius: 24rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .right {
|
|
|
|
- display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
|
|
|
|
- .title {
|
|
|
|
- padding-left:20rpx;padding-top:8rpx;
|
|
|
|
- font-weight: bold;font-size: 32rpx;color: #FFFFFF;
|
|
|
|
- display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;
|
|
|
|
- image {
|
|
|
|
- width:76rpx;height:40rpx;margin-left:30rpx;
|
|
|
|
|
|
+ margin: 20rpx;
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
+
|
|
|
|
+ .hot-topics-header {
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+
|
|
|
|
+ .hot-topics-title {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .desc {
|
|
|
|
- padding-left:20rpx;padding-top:10rpx;
|
|
|
|
- font-weight: 400;font-size: 28rpx;color: #ffffff;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- overflow: hidden;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
|
+
|
|
|
|
+ .hot-topics-swiper {
|
|
|
|
+ height: 400rpx; // Adjust this value based on your content
|
|
}
|
|
}
|
|
- }
|
|
|
|
-}
|
|
|
|
-.list {
|
|
|
|
- display: flex;flex-direction: row;flex-wrap: wrap;padding:30rpx;
|
|
|
|
- width:750rpx;justify-content: space-between;
|
|
|
|
- .item {
|
|
|
|
- width: 334rpx;height: 470rpx;margin-bottom: 30rpx;
|
|
|
|
- background: #28292D;border-radius: 24rpx;
|
|
|
|
- display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
|
|
|
|
- .img {
|
|
|
|
- .icon {
|
|
|
|
- width: 334rpx;height:334rpx;border-radius: 24rpx 24rpx 0 0;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ .hot-topics-list {
|
|
|
|
+ padding: 10rpx 0;
|
|
}
|
|
}
|
|
- .tit {
|
|
|
|
- width:100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding:0 20rpx;
|
|
|
|
- .name {
|
|
|
|
- color:#fff;font-size: 32rpx;width:200rpx;
|
|
|
|
|
|
+
|
|
|
|
+ .topic-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 15rpx 0;
|
|
|
|
+
|
|
|
|
+ .topic-index {
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ color: #808080;
|
|
|
|
+ text-align: center;
|
|
|
|
+ flex-shrink: 0;
|
|
}
|
|
}
|
|
- .juli {
|
|
|
|
- color:#D0D0D0;font-size: 24rpx;width:134rpx;text-align: right;
|
|
|
|
|
|
+
|
|
|
|
+ .topic-content {
|
|
|
|
+ flex: 1;
|
|
|
|
+ width: 0;
|
|
|
|
+ /* 重要:确保flex子项不会超过容器宽度 */
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .topic-title-row {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+
|
|
|
|
+ .topic-title {
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ flex: 1;
|
|
|
|
+ width: 0;
|
|
|
|
+ /* 重要:确保flex子项不会超过容器宽度 */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .hot-tag {
|
|
|
|
+ margin-left: 10rpx;
|
|
|
|
+ padding: 4rpx 10rpx;
|
|
|
|
+ background: #FF4B4B;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .topic-participants {
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ color: #808080;
|
|
|
|
+ margin-top: 6rpx;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .name {
|
|
|
|
- font-size: 24rpx;color:#818D89;padding-top: 12rpx;
|
|
|
|
|
|
+
|
|
|
|
+ .indicator-dots {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
+
|
|
|
|
+ .dot {
|
|
|
|
+ width: 12rpx;
|
|
|
|
+ height: 12rpx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background: #808080;
|
|
|
|
+ margin: 0 6rpx;
|
|
|
|
+
|
|
|
|
+ &.active {
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- .tag_list {
|
|
|
|
- width:100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 10rpx;
|
|
|
|
- padding:0 12rpx;
|
|
|
|
- .tag {
|
|
|
|
- height: 44rpx;padding:0 12rpx;
|
|
|
|
- background: #423339;
|
|
|
|
- border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
|
- border: 2rpx solid #FF7D88;
|
|
|
|
- display: flex;flex-direction: row;justify-content: center;align-items: center;
|
|
|
|
- font-weight: 400;
|
|
|
|
- font-size: 20rpx;
|
|
|
|
- color: #FF7D88;
|
|
|
|
- .icon {
|
|
|
|
- width:24rpx;height:24rpx;margin-right: 6rpx;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .follow-list {
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ background: #161616;
|
|
|
|
+ margin: 0rpx;
|
|
|
|
+ border-radius: 0rpx;
|
|
|
|
+
|
|
|
|
+ .works-list {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ padding: 10rpx;
|
|
|
|
+
|
|
|
|
+ .work-item {
|
|
|
|
+ width: 48%;
|
|
|
|
+ margin: 1%;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+
|
|
|
|
+ .work-image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ aspect-ratio: 1;
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .work-title {
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
+ padding: 0 10rpx;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .tag2 {
|
|
|
|
- height: 44rpx;padding:0 12rpx;
|
|
|
|
- border-radius: 16rpx;
|
|
|
|
- border: 2rpx solid #404040;
|
|
|
|
- display: flex;flex-direction: row;justify-content: center;align-items: center;
|
|
|
|
- font-weight: 400;
|
|
|
|
- font-size: 20rpx;
|
|
|
|
- color: #D0D0D0;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .no-data {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ padding: 60rpx 0;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ color: #808080;
|
|
|
|
+ font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
-
|
|
|
|
-.yongPop {
|
|
|
|
- position: fixed;top:0;left:0rpx;
|
|
|
|
- width:750rpx;height:100%;
|
|
|
|
- display: flex;flex-direction: column;justify-content: flex-end;align-items: center;
|
|
|
|
- .albg {
|
|
|
|
- width:100%;height:100%;background-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
+
|
|
|
|
+ .no-data {
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 40rpx 0;
|
|
|
|
+ color: #808080;
|
|
|
|
+ font-size: 28rpx;
|
|
}
|
|
}
|
|
- .content {
|
|
|
|
- width:710rpx;height:520rpx;position: absolute;bottom: 0rpx;
|
|
|
|
- background-color: #fff;border-radius: 20rpx 20rpx 0 0;padding:20rpx;
|
|
|
|
- .title {
|
|
|
|
- width:100%;text-align: center;padding:20rpx;font-weight: bold;
|
|
|
|
- }
|
|
|
|
- .desc {
|
|
|
|
- height:180rpx;font-size: 26rpx;
|
|
|
|
|
|
+
|
|
|
|
+ .news-list {
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ background: #161616;
|
|
|
|
+
|
|
|
|
+ .news-grid {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .news-item {
|
|
|
|
+ width: 48%;
|
|
|
|
+ margin-bottom: 30rpx;
|
|
|
|
+ background: #28292D;
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .news-image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ aspect-ratio: 1;
|
|
|
|
+ height: auto;
|
|
|
|
+ border-radius: 12rpx 12rpx 0 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .news-title {
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ padding: 15rpx;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ height: 60rpx;
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .news-footer {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 0 15rpx 15rpx;
|
|
|
|
+
|
|
|
|
+ .news-author {
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ color: #808080;
|
|
|
|
+ max-width: 60%;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .news-views {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ color: #808080;
|
|
|
|
+
|
|
|
|
+ .view-icon {
|
|
|
|
+ width: 26rpx;
|
|
|
|
+ height: 18rpx;
|
|
|
|
+ margin-right: 6rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- .btn {
|
|
|
|
- width:100%;height:80rpx;background-color: #e0e0e0;border-radius: 80rpx;
|
|
|
|
- display: flex;flex-direction: column;justify-content: center;align-items: center;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .float-btn {
|
|
|
|
+ position: fixed;
|
|
|
|
+ right: 30rpx;
|
|
|
|
+ bottom: 120rpx;
|
|
|
|
+ width: 100rpx;
|
|
|
|
+ height: 100rpx;
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
+ z-index: 999;
|
|
|
|
+
|
|
|
|
+ .float-btn-icon {
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+
|
|
|
|
+ .blankHeight {
|
|
|
|
+ width: 500rpx;
|
|
|
|
+ height: 500rpx;
|
|
|
|
+ }
|