[前端] 修复研读模块布局问题：统一圆角、Tab换行、拖拽改变大小、折叠面板、checkbox批量删除

chat_web_front/src/components/ReadingBox.vue

@@ -64,18 +64,21 @@ defineExpose({
 <style lang="less" scoped>
 .head {
   display: flex;
-  //第三个title的margin-left为40px
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  &::-webkit-scrollbar { height: 0; }
   .tagLeft{
-    margin-left: 20px;
+    margin-left: 10px;
   }
   .title {
-    min-width: 58px;
+    min-width: auto;
     height: 28px;
-    margin: 20px 15px 0 15px;
+    margin: 16px 8px 0 8px;
     font-family: PingFang SC, PingFang SC;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 15px;
     cursor: pointer;
+    white-space: nowrap;
   }
 
   .active {
@@ -83,16 +86,16 @@ defineExpose({
   }
 
   .title-tag {
-    width: 58px;
+    width: 40px;
-    height: 8px;
+    height: 6px;
-    margin-left: 15px;
+    margin-left: 8px;
     margin-top: 3px;
     background: linear-gradient(90deg, #1F4D9B 0%, rgba(211, 232, 255, 0) 100%);
     border-radius: 8px 0px 0px 0px;
   }
 }
 .message-box{
-  height: calc(100% - 58px);
+  height: calc(100% - 50px);
   overflow: auto;
   &::-webkit-scrollbar {
     width: 0;