2025/9/27/23:14

miniprogram/pages/articledetail/articledetail.wxss

@@ -280,81 +280,95 @@
     color: #888888;
 }
 
+/* 1. 容器核心：Flex 布局，控制按钮和图标的位置 */
 .vote-btn-wrapper {
-    display: flex;
-    justify-content: center;
-    margin-top: 10rpx;
+  display: flex;          /* 开启 Flex 布局 */
+  justify-content: center;/* 按钮水平居中（Flex 主轴居中） */
+  align-items: center;    /* 按钮和图标垂直居中对齐 */
+  margin-top: 10rpx;
+  padding: 0 16rpx;       /* 左右留边距，避免图标贴容器边缘（可选） */
+  position: relative;     /* 备用：若需微调图标位置可使用 */
 }
 
-/* 投票按钮样式修改：核心居中修正 */
+/* 2. 投票按钮：保持原有样式，仅确保不影响 Flex 布局 */
 .vote-btn {
-    width: 50%;
-    /* 核心修正：使用明确的 height 和 line-height 替代 padding */
-    height: 70rpx; /* 按钮高度 */
-    line-height: 70rpx; /* 行高与高度一致，确保文字垂直居中 */
-    padding: 0; /* 移除默认 padding 干扰 */
-    padding-bottom: 2vh;
-    background-color: #4F46E5;
-    color: #ffffff;
-    border-radius: 16rpx;
-    font-size: 28rpx; /* 字体增大一点，更具视觉冲击力 */
-    font-weight: 600;
-    
-    /* 核心居中：使用 flex 布局 */
-    display: flex;
-    justify-content: center; /* 水平居中 */
-    align-items: center; /* 垂直居中 */
-    
-    transition: all 0.2s ease;
+  width: 50%;
+  height: 70rpx; 
+  line-height: 70rpx; 
+  padding: 0; /* 移除默认 padding 干扰 */
+  /* 移除 padding-bottom: 2vh; 避免按钮垂直偏移，影响与图标的垂直对齐 */
+  background-color: #4F46E5;
+  color: #ffffff;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+  display: flex;
+  justify-content: center; 
+  align-items: center;
+  transition: all 0.2s ease;
 }
 
-/* 确保内部的文本和图标能够正确居中 */
+/* 3. 图标核心：固定在容器最右侧，与按钮垂直居中 */
+.wrapper-link-icon {
+  /* 去掉绝对定位，改用 Flex 布局的 margin-left: auto 右靠 */
+  margin-left: auto;  /* 关键：自动占据左侧所有空间，把图标推到最右侧 */
+  
+  /* 图标样式（调整尺寸适配 rpx，与按钮协调） */
+  font-size: 32rpx;  /* 用 rpx 适配多端，比按钮文字稍大 */
+  color: #1677ff;   
+  
+  /* 点击区域优化 + 视觉效果 */
+  padding: 8rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+  
+  /* 与按钮保持水平间距（避免贴太紧） */
+  margin-left: 16rpx; /* 若需更靠右，可增大此值；若需顶格右靠，保留 margin-left: auto 即可 */
+}
+
+/* 4. 图标点击反馈（保持原有） */
+.wrapper-link-icon:active {
+  transform: scale(0.95);
+  color: #096dd9;
+}
+
+/* 以下为原有样式，保持不变 */
 .vote-btn .iconfont {
-    font-size: 28rpx; /* 图标大小与文字一致 */
-
-    /* 确保图标不占用额外高度空间 */
-    height: auto;
-    line-height: 1; /* 图标行高设为1 */
+  font-size: 28rpx;
+  height: auto;
+  line-height: 1;
 }
-
-/* 确保内部的文字不会有额外的行高干扰垂直居中 */
 .vote-btn .btn-text {
-    /* 移除 display: block 的默认行高干扰 */
-    line-height: 1; 
+  line-height: 1;
 }
-
-
-/* 清除小程序button默认边框 */
 .vote-btn::after {
-    border: none;
+  border: none;
 }
-
-/* hover状态保持原有逻辑 */
 .vote-btn:not(.vote-btn-ended):not(.vote-btn-disabled):hover {
-    background-color: rgba(79, 70, 229, 0.9);
+  background-color: rgba(79, 70, 229, 0.9);
 }
-
-/* 点击状态保持原有逻辑 */
 .vote-btn:not(.vote-btn-ended):not(.vote-btn-disabled):active {
-    transform: scale(0.98);
+  transform: scale(0.98);
 }
-
-/* 禁用状态样式保持不变 */
 .vote-btn-ended, .vote-btn-disabled {
-    background-color: #cccccc !important;
-    color: #888888 !important;
-    cursor: not-allowed;
+  background-color: #cccccc !important;
+  color: #888888 !important;
+  cursor: not-allowed;
+}
+.share-btn {
+  /* 清除按钮默认样式 */
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  /* 去掉点击时的默认灰色背景 */
+  opacity: 1;
 }
 
-.vote-status-tip {
-    width: 100%;
-    text-align: center;
-    font-size: 28rpx;
-    color: #666666;
-}
-
-.vote-status-tip.error {
-    color: #ff4d4f;
+/* 去除按钮点击时的默认边框和背景 */
+.share-btn::after {
+  border: none;
 }
 
 .section-divider {