样式优化

src/views/im/components/Discover/Discover.vue

@@ -12,7 +12,7 @@
   </div>
 
   <div class="content">
-    <div class="content-item" v-for="item in 10">
+    <div class="content-item" v-for="(item, index) in 10" :key="index">
       <div class="item-header">
         <van-image class="avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
         <div class="user-info">
@@ -21,18 +21,29 @@
           <van-image class="main-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
           <div class="item-footer">
             <div class="time">8小时前23分钟前</div>
-            <svg-icon class="actions-icon" name="more1" />
+            <div style="position: relative;">
+              <div @click="toggleActions(index)" style="cursor: pointer; display: inline-block;">
+                <svg-icon class="actions-icon" name="more1" />
+              </div>
+
+              <transition name="slide-left-fade">
+                <div v-if="showActionsMap[index]" class="actions-popup" @click.stop>
+                  <button class="action-btn" @click="onLike(index)">👍 点赞</button>
+                  <button class="action-btn" @click="onComment(index)">💬 评论</button>
+                </div>
+              </transition>
+            </div>
           </div>
           <div class="like-row">
             <van-image v-for="n in 4" :key="n" class="like-avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
           </div>
           <div class="comment-list">
-              <div class="comment-item">
-                <van-image class="comment-avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
-                  <span class="comment-nickname">甘比</span>
-                  <span class="comment-time">12:34</span>
-                  <div class="comment-content">可以送我一杯吗</div>
-              </div>
+            <div class="comment-item">
+              <van-image class="comment-avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+              <span class="comment-nickname">甘比</span>
+              <span class="comment-time">12:34</span>
+              <div class="comment-content">可以送我一杯吗</div>
+            </div>
           </div>
         </div>
       </div>
@@ -42,6 +53,26 @@
 
 <script setup>
 const router = useRouter();
+
+const showActionsMap = reactive({});
+
+const toggleActions = (index) => {
+  for (const key in showActionsMap) {
+    if (Number(key) !== index) showActionsMap[key] = false;
+  }
+  showActionsMap[index] = !showActionsMap[index];
+}
+
+const onLike = (index) => {
+  alert(`点赞了第${index + 1}条`);
+  showActionsMap[index] = false;
+}
+
+const onComment = (index) => {
+  alert(`评论了第${index + 1}条`);
+  showActionsMap[index] = false;
+}
+
 const gotoRecord = () => {
   router.push('record')
 }
@@ -252,4 +283,50 @@ const gotoRecord = () => {
 .content::-webkit-scrollbar{
   width: 0;
 }
+.actions-popup {
+  position: absolute;
+  top: -2px;
+  right: calc(100% + 8px); /* 这里改成相对右边按钮左侧向左3px */
+  background: #333;
+  border-radius: 5px;
+  padding: 5px 10px;
+  display: flex;
+  gap: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  color: white;
+  user-select: none;
+  white-space: nowrap;
+  z-index: 1000;
+}
+
+/* 动画：从右往左淡入 */
+.slide-left-fade-enter-active,
+.slide-left-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-left-fade-enter-from,
+.slide-left-fade-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.slide-left-fade-enter-to,
+.slide-left-fade-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.action-btn {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.action-btn:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
 </style>