southnote-mini-sdk 1.0.0

package/components/post-item/post-item.wxss

@@ -0,0 +1,525 @@
+.post-item {
+  background-color: #fff;
+  padding: 30rpx;
+  border-bottom: none;
+  /* 用 divider 代替 */
+}
+
+.post-header {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 50%;
+  margin-right: 20rpx;
+}
+
+.user-info {
+  /* flex: 1; */
+  display: flex;
+  flex-direction: column;
+}
+
+.nickname {
+  font-weight: bold;
+  font-size: 26rpx;
+}
+
+.time {
+  color: #808080;
+  font-size: 24rpx;
+}
+
+.follow-btn {
+  margin-left: auto;
+  background-color: #fff;
+  color: #003366;
+  font-size: 22rpx;
+  border: 1px solid #003366;
+  height: 50rpx;
+  line-height: 50rpx;
+  /* 让文字垂直居中 */
+  width: 100rpx;
+  /* 固定宽度 */
+  text-align: center;
+  /* 水平居中 */
+  border-radius: 35rpx;
+  /* 圆形按钮，半径 = 高度/2 */
+  padding: 0;
+  /* 去掉 padding */
+}
+
+.followed {
+  color: #999;
+  border: 2rpx solid #ddd;
+}
+
+.unfollow {
+  color: #002FA7;
+  border: 1px solid #002FA7;
+}
+
+
+.post-content {
+  font-size: 30rpx;
+  color: black;
+  /* line-height: 30rpx; */
+  max-height: 270rpx;
+  /* display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6; */
+  /* 默认显示6行 */
+  overflow: hidden;
+
+  margin-top: 10rpx;
+
+
+}
+
+.post-content.show-full {
+  max-height: none;
+  overflow: visible;
+  /* -webkit-line-clamp: unset; */
+  /* 展开全文 */
+}
+
+.read-more {
+  color: #406ce3;
+  /* 蓝色 */
+  cursor: pointer;
+  font-size: 30rpx;
+}
+
+
+.read-more {
+  color: #406ce3;
+  cursor: pointer;
+}
+
+.post-image {
+  display: block;
+  /* max-height: 500rpx; */
+  border-radius: 8rpx;
+  margin-top: 10rpx;
+
+  max-width: 66vw;
+  max-height: 66vw;
+
+  border: 1rpx solid rgba(211, 211, 211, 0.2);
+
+}
+
+.featured-tag {
+  background-color: #ff9800;
+  color: #fff;
+  font-size: 22rpx;
+  font-weight: bold;
+  padding: 8rpx 10rpx;
+  border-radius: 8rpx;
+  margin-left: 6rpx;
+  line-height: 22rpx;
+  text-align: center;
+  display: inline-block;
+}
+
+.super-long {
+  display: block;
+  border-radius: 8rpx;
+  margin-top: 10rpx;
+
+  /* max-width: 66vw; */
+  width: 25vw;
+  height: 58vw;
+
+  border: 1rpx solid rgba(211, 211, 211, 0.2);
+
+}
+
+.post-image-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  margin-top: 5rpx;
+  /* justify-content: space-between; */
+}
+
+.grid-image-wrapper {
+  position: relative;
+  width: calc((100vw - 60rpx - 20rpx)/3);
+  color: white;
+  text-align: center;
+  /* padding: 20rpx; */
+  box-sizing: border-box;
+}
+
+.grid-image-wrapper1 {
+  position: relative;
+  width: calc((100vw - 60rpx - 20rpx - 32rpx)/3);
+  color: white;
+  text-align: center;
+  /* padding: 20rpx; */
+  box-sizing: border-box;
+}
+
+
+.grid-image {
+  width: 100%;
+  height: calc((100vw - 60rpx - 20rpx)/3);
+}
+
+.grid-image1 {
+  width: 100%;
+  height: calc((100vw - 60rpx - 20rpx - 32rpx)/3);
+}
+
+.extra-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  padding: 4rpx 6rpx;
+  font-size: 24rpx;
+  border-top-right-radius: 8rpx;
+  border-bottom-left-radius: 8rpx;
+}
+
+.post-actions {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 0 0 0;
+  color: #666;
+}
+
+/* 普通操作按钮 */
+.action {
+  width: 100rpx;
+  display: flex;
+  align-items: center;
+  margin-right: 60rpx;
+  font-size: 24rpx;
+}
+
+/* 最右侧更多按钮 */
+.more-btn {
+  margin-left: auto;
+  margin-right: 5px;
+  width: auto;
+  /* 自动占满左边空间，把自己推到最右边 */
+}
+
+.action-text {
+  margin-left: 5px;
+}
+
+.action-icon {
+  width: 28rpx;
+  height: 28rpx;
+  margin-right: 6rpx;
+}
+
+.divider {
+  height: 20rpx;
+  background-color: #f5f5f5;
+  /* margin-top: 20rpx; */
+}
+
+
+.emoji {
+  /* background-color: red; */
+  position: relative;
+  bottom: 5rpx;
+  display: inline-block;
+  width: 40rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  /* line-height: 40rpx; */
+  /* margin-bottom: 10rpx; */
+  margin-left: 4rpx;
+  vertical-align: middle;
+}
+
+.emoji-hot {
+  width: 36rpx;
+  height: 36rpx;
+}
+
+
+.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;
+}
+
+
+/* 置顶角标 */
+.pin-badge {
+  position: absolute;
+  top: 30rpx;
+  right: 0rpx;
+  width: 110rpx;
+  /* 调整宽度 */
+  height: 54rpx;
+  /* 调整高度 */
+  background-color: #ffe2d7;
+  color: #ff4604;
+  font-size: 24rpx;
+  font-weight: bold;
+  text-align: center;
+  line-height: 54rpx;
+  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
+  z-index: 10;
+}
+
+
+.level-icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  margin-left: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.level-img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.level-text {
+  position: absolute;
+  font-size: 10px;
+  color: #6d6d6d;
+  text-align: center;
+  line-height: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+
+/* 热评 */
+
+.hot-comment {
+  display: flex;
+  align-items: center;
+  /* padding: 10rpx; */
+  background-color: #fff8f7;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+  margin-top: 12rpx;
+}
+
+/* 左侧 热评 */
+.hot-label {
+  margin-left: 16rpx;
+  text-align: center;
+  font-style: italic;
+  font-weight: bold;
+  color: #f44336;
+  font-size: 30rpx;
+}
+
+/* 中间内容 */
+.hot-body {
+  flex: 1;
+  margin-left: 12rpx;
+  overflow: hidden;
+  padding: 16rpx;
+  /* margin-top: 10rpx; */
+}
+
+.hot-user {
+  color: #406ce3;
+  font-size: 26rpx;
+}
+
+.hot-content {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 26rpx;
+  line-height: 40rpx;
+}
+
+.hot-text {
+  color: #333;
+}
+
+.hot-link {
+  color: #406ce3;
+}
+
+/* 右侧点赞 */
+.hot-like {
+  margin-right: 16rpx;
+  width: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 5rpx;
+}
+
+.hot-like-icon {
+  width: 36rpx;
+  height: 36rpx;
+}
+
+.hot-like-count {
+  font-size: 24rpx;
+  color: #999;
+  height: 36rpx;
+  line-height: 36rpx;
+
+  position: relative;
+  top: 3rpx
+}
+
+
+
+.deleted {
+  display: flex;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  margin: 6px 0;
+  padding-right: 6px;
+  align-items: flex-start;
+  box-sizing: border-box;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  color: #999;
+  font-size: 14px;
+}
+
+
+/* 视频播放器 */
+
+.banner-video-wrapper {
+  position: relative;
+  width: 100%;
+  height: calc((100vw - 60rpx)* 9/16);
+  background-color: #000000;
+}
+
+.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%);
+  /* 完全居中三角形 */
+}