southnote-mini-sdk 1.0.0

package/pages/game/game.wxss

@@ -0,0 +1,672 @@
+.game-center {
+  background-color: #fff;
+  min-height: 100vh;
+}
+
+/* 顶部信息 */
+.header {
+  display: flex;
+  padding: 20rpx;
+  border-bottom: 2rpx solid #eee;
+}
+
+.game-icon {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 20rpx;
+}
+
+.info {
+  flex: 1;
+  padding: 0 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.name {
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.counts {
+  color: #666;
+  font-size: 26rpx;
+}
+
+.dot {
+  margin: 0 10rpx;
+}
+
+.slogan {
+  margin-top: 6rpx;
+  color: #898989;
+  font-size: 24rpx;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.join-btn {
+  padding: 8rpx 20rpx;
+  border-radius: 30rpx;
+  font-size: 26rpx;
+  border: 2rpx solid #133ead;
+}
+
+.join {
+  color: #133ead;
+  border-color: #133ead;
+}
+
+.joined {
+  color: #999;
+  border-color: #ccc;
+}
+
+.editor-tag {
+  display: flex;
+  align-items: center;
+  margin-top: 10rpx;
+  font-size: 22rpx;
+  color: #ff9900;
+}
+
+.editor-icon {
+  width: 26rpx;
+  height: 26rpx;
+  margin-right: 6rpx;
+}
+
+/* banner */
+.banner-section {
+  display: flex;
+  justify-content: center;
+}
+
+.banner-scroll {
+  width: 100%;
+  white-space: nowrap;
+  box-sizing: border-box;
+  /* 删掉 display: flex 和 flex-wrap */
+}
+
+.banner-item {
+  display: inline-block;
+  width: 300rpx;
+  height: 533rpx;
+  margin-right: 10rpx;
+  border-radius: 10rpx;
+  overflow: hidden;
+  vertical-align: top; /* 防止底部对齐产生的间隙 */
+}
+
+
+.banner-swiper {
+  width: 95vw;
+  height: 53.44vw;
+}
+
+.banner-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 20rpx;
+}
+
+.banner-video-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.banner-video {
+  width: 100%;
+  height: 100%;
+}
+
+.video-poster-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.play-btn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 播放按钮圆形背景 */
+.custom-play-btn {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background-color: rgba(41, 41, 41, 0.8);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 三角形播放符号 */
+.custom-play-btn::after {
+  position: relative;
+  left: 5rpx;
+  content: '';
+  display: block;
+  width: 40rpx;
+  /* 三角形宽度加大 */
+  height: 40rpx;
+  /* 三角形高度加大 */
+  background-color: rgba(200, 200, 200, 1);
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+  /* 完全居中三角形 */
+}
+
+
+
+
+
+
+
+/* tabs */
+.tabs {
+  display: flex;
+  justify-content: space-around;
+  border-top: 2rpx solid #eee;
+  border-bottom: 2rpx solid #eee;
+  background-color: #fafafa;
+}
+
+.tab-item {
+  padding: 20rpx 0;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.tab-item.active {
+  color: #333333;
+  border-bottom: 4rpx solid #333333;
+}
+
+.tab-content {
+  font-size: 28rpx;
+}
+
+/* 简介 */
+/* 简介部分整体 */
+.intro-section {
+  padding: 30rpx;
+}
+
+/* 更新时间与下载按钮 */
+.download-info {
+  margin-bottom: 20rpx;
+}
+
+.update-time {
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 10rpx;
+  text-align: right;
+}
+
+.download-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.btn {
+  height: 50rpx;
+  line-height: 50rpx;
+  border-radius: 50rpx;
+  padding: 16rpx 0;
+  font-size: 28rpx;
+  text-align: center;
+  border: none;
+  color: #fff;
+  background-color: #002fa7;
+}
+
+
+/* 灰色卡片 */
+.info-card {
+  background-color: #f5f5f5;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  margin-top: 20rpx;
+}
+
+.row {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  margin-bottom: 16rpx;
+}
+
+.label {
+  color: #9e9e9e;
+  font-size: 26rpx;
+}
+
+.value {
+  color: #333;
+  font-size: 30rpx;
+  display: flex;
+  align-items: center;
+}
+
+.age-icon {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 60rpx;
+  height: 80rpx;
+  margin-left: 10rpx;
+}
+
+/* 游戏简介卡片 */
+.intro-card {
+  background-color: #f5f5f5;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  margin-top: 20rpx;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.intro-title {
+  font-size: 26rpx;
+  font-weight: bold;
+  color: #9e9e9e;
+}
+
+.intro-text {
+  font-size: 26rpx;
+  color: #000000;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+
+.line-break {
+  height: 10rpx;
+}
+
+
+/* 版规部分 */
+.rules-section {
+  padding: 20rpx;
+}
+
+/* 管理员卡片 */
+.manager-card {
+  background-color: #f5f5f5;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.manager-title {
+  font-size: 26rpx;
+  color: #999;
+  margin-bottom: 10rpx;
+}
+
+.manager-info {
+  display: flex;
+  flex-direction: column;
+  /* align-items: flex-start; */
+}
+
+.divider {
+  width: 100%;
+  height: 2rpx;
+  background-color: #e5e5e5;
+  margin: 16rpx 0;
+}
+
+.avatar {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  margin: 20rpx;
+  /* margin-left: 30rpx; */
+}
+
+.nickname {
+  width: 100rpx;
+  text-align: center;
+  font-size: 22rpx;
+  color: #9e9e9e;
+  /* background-color: red; */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* 规则项 */
+.rule-item {
+  padding: 10rpx;
+}
+
+.rule-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rule-icon {
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: 10rpx;
+}
+
+.rule-title {
+  flex: 1;
+  color: #333;
+  font-size: 28rpx;
+  margin-left: 10rpx;
+}
+
+
+
+.rule-desc {
+  margin-left: 40rpx;
+  color: #666;
+  font-size: 26rpx;
+  line-height: 1.6;
+  white-space: pre-line;
+}
+
+.posts-section {
+  margin-top: 20rpx;
+}
+
+.empty {
+  flex: 1;
+  /* 占满剩余空间 */
+  display: flex;
+  justify-content: center;
+  /* 水平居中 */
+  align-items: center;
+  /* 垂直居中 */
+  color: #999;
+  font-size: 28rpx;
+  min-height: 400rpx;
+}
+
+.load-more {
+  background-color: white;
+  text-align: center;
+  color: #999;
+  font-size: 28rpx;
+  /* margin: 20rpx 0; */
+
+}
+
+
+.empty-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  /* 横向居中 */
+  padding: 40px 0;
+  /* 上下留点空间更好看 */
+}
+
+.empty-img {
+  width: 100px;
+  /* 可根据你的图片实际大小调整 */
+  height: 100px;
+  margin-bottom: 12px;
+  opacity: 0.9;
+  /* 看起来更柔和，可去掉 */
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #999;
+}
+
+/* 活动 */
+
+.activity-item {
+  margin: 10px;
+  border-radius: 12rpx;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.img-wrapper {
+  position: relative;
+  width: calc(100vw - 20px);
+  height: calc((100vw - 20px) / 4);
+  border-radius: 10rpx;
+  overflow: hidden;
+  /* 圆角生效，bottom-bar 不会溢出 */
+}
+
+.activity-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  /* 避免 inline-block 默认间隙 */
+}
+
+.bottom-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  /* 必须加 left:0 */
+  width: 100%;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+
+
+
+
+.activity-name {
+  padding-left: 10px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+  color: white;
+}
+
+.activity-type {
+  font-size: 26rpx;
+  color: #666;
+}
+
+
+/* 右上角“未签到”标签 */
+.sign-tag {
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: #ee7f13;
+  color: #fff;
+  padding: 8rpx 16rpx;
+  font-size: 24rpx;
+  border-bottom-left-radius: 12rpx;
+}
+
+
+
+
+
+
+
+.custom-sheet-wrapper {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.custom-sheet {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: #f5f4f9;
+  border-top-left-radius: 12rpx;
+  border-top-right-radius: 12rpx;
+  padding: 20rpx 0;
+  z-index: 9999;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+
+.sheet-buttons {
+  display: flex;
+  margin-left: 15px;
+  justify-content: flex-start;
+  gap: 20px;
+}
+
+.sheet-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+}
+
+.icon-wrapper {
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+}
+
+.sheet-icon {
+  width: 60rpx;
+  height: 60rpx;
+  margin-bottom: 8rpx;
+}
+
+.sheet-text {
+  margin-top: 10px;
+  font-size: 22rpx;
+  color: #333;
+}
+
+.sheet-divider {
+  height: 20rpx;
+  background-color: #ecebef;
+  margin-top: 10px;
+}
+
+.sheet-cancel {
+  text-align: center;
+  color: #000000;
+  font-size: 28rpx;
+  padding: 20rpx 0;
+  border-top: 2rpx solid #eee;
+}
+
+.fab {
+  position: fixed;
+  left: 50%;
+  bottom: 80rpx;
+  transform: translateX(-50%);
+  /* ✅ 水平居中关键 */
+  width: 200rpx;
+  /* ✅ 你想要的宽度 */
+  height: 80rpx;
+  background-color: #002fa7;
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: bold;
+  border: none;
+  /* 移除系统边框 */
+  border-radius: 40rpx;
+  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* z-index: 999; */
+}
+
+
+.banner-wrapper {
+  /* position: relative; */
+  display: flex;
+  align-items: center;
+}
+
+.arrow {
+  /* position: absolute;
+  top: 320rpx; */
+  /* top: 50%;
+  transform: translateY(-50%); */
+  /* width: 60rpx;
+  height: 60rpx; */
+  /* border-radius: 50%; */
+  /* background: rgba(0, 0, 0, 0.45); */
+  /* color: #fff;
+  font-size: 80rpx;
+  text-align: center;
+  line-height: 60rpx;
+  z-index: 10; */
+}
+
+.arrow-left {
+  flex-shrink: 0;
+  margin-right: -30px; /* 叠在 swiper 上 */
+  z-index: 10;
+}
+
+.arrow-right {
+  flex-shrink: 0;
+  margin-left: -30px;
+  z-index: 10;
+}
+
+.manager-list.horizontal {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.normal-manager-group {
+  margin-top: 20rpx;
+}
+
+/* 空状态 */
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+}
+
+.empty-img {
+  width: 179px;
+  height: 133px;
+  margin-bottom: 16px;
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #999;
+}