refactor(components): 重构多个组件并优化公共样式

重构了item-head、item-bottom、item-offer、item-summary和item-tenement组件，优化了props传递和数据处理逻辑
将公共头部和导航样式提取到public.css中，避免重复代码
修复了item-tenement组件中图片显示和数据处理的问题
更新了item-bottom组件的点赞和收藏逻辑，增加错误提示
优化了item-head组件的用户信息显示逻辑
调整了多个组件的样式细节，包括间距、图标大小等

css/details.less

@@ -1,76 +1,6 @@
 #details {
     width: 1200px;
     margin: 0 auto;
-    .head-top {
-        margin-bottom: 30px;
-
-        .logo {
-            height: 52px;
-        }
-
-        .input-box {
-            width: 370px;
-            height: 40px;
-            background-color: rgba(235, 235, 235, 1);
-            border: 2px solid rgba(215, 215, 215, 1);
-            border-radius: 11px;
-            padding: 0 15px;
-            justify-content: space-between;
-            margin-right: 20px;
-
-            .input {
-                border: none;
-                outline: none;
-                height: 100%;
-                background-color: transparent;
-            }
-
-            .icon {
-                width: 18px;
-                height: 18px;
-                margin-left: 15rpx;
-                cursor: pointer;
-            }
-        }
-
-        .post-list {
-            .post-item {
-                width: 84px;
-                height: 34px;
-                cursor: pointer;
-
-                &:not(:last-child) {
-                    margin-right: 10px;
-                }
-            }
-        }
-    }
-
-    .head-navigation {
-        margin-bottom: 20px;
-        .icon {
-            width: 16px;
-            height: 16px;
-        }
-
-        .arrows {
-            width: 7px;
-            height: 12px;
-            margin: 0 5px;
-        }
-
-        .text {
-            padding: 0 5px;
-            font-size: 14px;
-            color: #000000;
-            text-decoration: none;
-            max-width: 300px;
-
-            &.textA:hover {
-                text-decoration: underline;
-            }
-        }
-    }
 
     .matter {
         align-items: flex-start;
@@ -691,11 +621,14 @@
     padding-bottom: 10px;
     border-bottom: 1px dotted rgba(215, 215, 215, 0.501961);
     padding-left: 14px;
+    padding-top: 12px;
+    overflow: auto;
 }
 
 .answer-discuss .input-box .picture-box .picture {
     position: relative;
     width: fit-content;
+    margin-right: 10px;
 }
 
 .answer-discuss .input-box .picture-box .picture .img {
@@ -751,14 +684,17 @@
 }
 
 .answer-discuss .input-box .bottom .operate .item .emoji-box {
-    width: 581px;
+    width: 582px;
     border-radius: 8px;
     background-color: #fff;
     filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1));
-    top: 45px;
+    // top: 45px;
+    top: 36px;
     position: absolute;
     z-index: 1;
-    left: -14px;
+    // left: -14px;
+    left: 50%;
+    transform: translateX(-50%);
     border: 1px solid #ebebeb;
     display: none;
     flex-wrap: wrap;
@@ -775,7 +711,9 @@
     border-bottom: 8px solid #ffffff;
     position: absolute;
     top: -8px;
-    left: 15px;
+    // left: 15px;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .answer-discuss .input-box .bottom .operate .item .emoji-box .emoji-icon {