修改发布日历

src/components/PublishMenu/index.module.scss

@@ -0,0 +1,206 @@
+.publishMenu {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  z-index: 1000;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 999;
+}
+
+.menuCard {
+  position: absolute;
+  bottom: 80px;
+  right: 0;
+  width: 302px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 12px;
+  animation: slideIn 0.3s ease-out;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  /* 小三角指示器 */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    right: 20px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid white;
+    /* 移除阴影，避免连接处的黑色 */
+  }
+  
+  /* 为小三角添加单独的阴影效果 */
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: -9px;
+    right: 20px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid rgba(0, 0, 0, 0.1);
+    z-index: -1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-radius: 20px;
+  border: 0.5px solid rgba(0, 0, 0, 0.08);
+  background: var(--Backgrounds-Primary, #FFF);
+  height: 68px;
+}
+
+.menuIcon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+}
+
+.ballIcon {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #333;
+  border-radius: 50%;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 8px;
+    border: 1px solid #333;
+    border-radius: 50%;
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 4px;
+    height: 4px;
+    background: #333;
+    border-radius: 50%;
+  }
+}
+
+.activityIcon {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #333;
+    border-radius: 50% 50% 0 50%;
+    transform: rotate(-45deg);
+  }
+  
+  &::after {
+    content: '+';
+    position: absolute;
+    top: -2px;
+    right: 0;
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.menuContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.menuTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #000;
+  margin-bottom: 2px;
+  line-height: 24px; /* 150% */
+}
+
+.menuDesc {
+  font-size: 12px;
+  color: rgba(60, 60, 67, 0.60);
+  line-height: 18px;
+}
+
+.menuArrow {
+  font-size: 16px;
+  color: #ccc;
+  margin-left: 8px;
+  .img{
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.greenButton {
+  border-radius: 50%;
+  display: flex;
+  width: 60px;
+  height: 60px;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  &.rotated {
+    transform: rotate(45deg);
+  }
+}
+
+.closeIcon {
+  color: white;
+  font-size: 24px;
+  width: 60px;
+  height: 60px;
+  font-weight: bold;
+  line-height: 1;
+}