修改了软著交易现在的著作权分类换行问题

src/components/TransactionCenter.vue

@@ -14,9 +14,31 @@
           <div class="content1" v-if="currentModule === 'mod1'">
             <div class="row1">
               <em>著作权分类：</em>
-              <div class="sort-buttons">
+              <div class="sort-buttons-container"> <!-- 新增容器 -->
-                <button
+                <div class="sort-buttons">
-                  v-for="(sort, index) in sorts" 
+                  <button
+                    v-for="(sort, index) in visibleSorts" 
+                    :key="index" 
+                    class="sort-button" 
+                    :class="{ 'selected': selectedSortId === sort.dataId }" 
+                    @click="selectSort(sort)"
+                  >
+                    {{ sort.dataName }}
+                  </button>
+                  <button 
+                    v-if="hasMoreSorts" 
+                    class="more-button" 
+                    @click="showMore1 = true"
+                  >
+                    更多+
+                  </button>
+                </div>
+              </div>
+              
+              <!-- 弹出层使用绝对定位 -->
+              <div v-if="showMore1" class="popup1">
+                <button 
+                  v-for="(sort, index) in hiddenSorts" 
                   :key="index" 
                   class="sort-button" 
                   :class="{ 'selected': selectedSortId === sort.dataId }" 
@@ -24,21 +46,7 @@
                 >
                   {{ sort.dataName }}
                 </button>
-                <button v-if="hasMoreSorts" class="more-button" @click="showMore1 = true">
+                <button class="close-button" @click="showMore1 = false">关闭</button>
-                  更多+
-                </button>
-                <div v-if="showMore1" class="popup1">
-                  <button 
-                  v-for="(sort, index) in hiddenSorts" 
-                  :key="index" 
-                  class="sort-button" 
-                  :class="{ 'selected': selectedSort === sort }" @click="selectSort(sort)"
-                  >
-                    {{ sort }}
-                  </button>
-                  <button class="close-button" @click="showMore1 = false">关闭</button>
-                </div>
-
               </div>
 
 
@@ -738,8 +746,13 @@ export default {
   background-color: #f0f0f0;
   cursor: pointer;
 } */
-.center .box1 .content1 .row1,
+.center .box1 .content1 .row1 {
-.center .box1 .content1 .row2,
+  position: relative;
+  display: flex;
+  align-items: flex-start; /* 顶部对齐 */
+  height: .5rem;
+  margin: .25rem .125rem;
+}
 .center .box1 .content1 .row3 {
   position: relative;
   display: flex;
@@ -822,20 +835,24 @@ input::-webkit-input-placeholder {
   width: 2.25rem;
 }
 .center .box1 .content1 .row1 em,
-.center .box1 .content1 .row2 em,
 .center .box1 .content1 .row3 em {
   padding: .075rem .0625rem;
-  width: 1.375rem;
+  width: 1.5rem;
   /* background-color: pink; */
 }
-.sort-buttons,
+.sort-buttons-container {
-.language-buttons {
+  flex: 1;
-  display: flex;
+  overflow-x: auto; /* 添加横向滚动 */
-  flex-wrap: wrap;
+  padding-bottom: 10px; /* 给滚动条留空间 */
-  gap: .125rem; /* 按钮之间的间隔 */
 }
-.sort-button,
+.sort-buttons {
-.language-button {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: .125rem; /* 按钮之间的间隔 */
+  padding-right: .5rem; /* 防止按钮被截断 */
+}
+.sort-button {
+  height: .5rem;
   padding: .075rem .375rem;
   /* border: 1px solid #ccc; */
   border: none;
@@ -844,14 +861,12 @@ input::-webkit-input-placeholder {
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
 }
-.sort-button.selected,
+.sort-button.selected {
-.language-button.selected {
   background-color: #fa7c38; 
   /* background: linear-gradient(to right,#ffbd52,#e86f12); */
   color: white; /* 白色文字 */
 }
-.sort-button:hover,
+.sort-button:hover {
-.language-button:hover {
   background-color: #fa7c38;
   color: #FFF;
 }
@@ -864,11 +879,20 @@ input::-webkit-input-placeholder {
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
 }
+/* 按钮样式微调 */
+.sort-button, .more-button {
+  flex-shrink: 0; /* 禁止按钮缩小 */
+  min-width: 1rem; /* 最小宽度 */
+  height: .5rem;
+  padding: 0 0.1875rem;
+  white-space: nowrap; /* 文字不换行 */
+}
 .popup1 {
   position: absolute;
-  top: .5625rem;
+  top: .6rem;
-  width: 13.125rem;
+  left: 1.5rem;
-  /* max-width: 1050px; */
+  /* max-width: 13rem; */
+  width: 13rem;
   background-color: white;
   border: .0125rem solid #ccc;
   padding: .125rem;
@@ -907,7 +931,14 @@ input::-webkit-input-placeholder {
   background-color: #e7e7e7;
 }
 
-
+/* 隐藏滚动条（可选） */
+.sort-buttons-container::-webkit-scrollbar {
+  height: 5px;
+}
+.sort-buttons-container::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 10px;
+}
 
 .center .box1 .content2 {
   width: 15rem;
@@ -1085,8 +1116,8 @@ input::-webkit-input-placeholder {
 .modal-content {
   position: relative;
   z-index: 1;
-  max-width: 80%;
+  max-width: 8rem;
-  max-height: 70%;
+  max-height: 9.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;