Forráskód Böngészése

T31 UI adjust: 团队切换器每行两项布局(每两项一行,flex 实现,未用 CSS Grid)

Agnes Agent 1 hete
szülő
commit
672bfbba13
1 módosított fájl, 17 hozzáadás és 13 törlés
  1. 17 13
      cfc-frontend/pages/vendor/team-system/team-system.vue

+ 17 - 13
cfc-frontend/pages/vendor/team-system/team-system.vue

@@ -1,8 +1,8 @@
 <template>
 <template>
   <view class="page-team-system" :style="{ '--font-scale': fontScale }">
   <view class="page-team-system" :style="{ '--font-scale': fontScale }">
-    <!-- 团队切换器(T31 多团队管理) -->
+    <!-- 团队切换器(T31 多团队管理;每行两项) -->
     <view class="team-switcher-wrap" v-if="teamList.length > 0">
     <view class="team-switcher-wrap" v-if="teamList.length > 0">
-      <scroll-view class="team-switcher" scroll-x="true" :show-scrollbar="false">
+      <view class="team-switcher">
         <view
         <view
           class="team-tab"
           class="team-tab"
           v-for="team in teamList"
           v-for="team in teamList"
@@ -12,7 +12,7 @@
         >
         >
           <text class="team-tab-text">{{ team.name || '未命名团队' }}</text>
           <text class="team-tab-text">{{ team.name || '未命名团队' }}</text>
         </view>
         </view>
-      </scroll-view>
+      </view>
     </view>
     </view>
 
 
     <!-- 头部:体系信息 -->
     <!-- 头部:体系信息 -->
@@ -383,7 +383,7 @@ export default {
   box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
   box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
 }
 }
 
 
-/* 团队切换器(T31 多团队管理) */
+/* 团队切换器(T31 多团队管理;每行两项) */
 .team-switcher-wrap {
 .team-switcher-wrap {
   background-color: $app-surface;
   background-color: $app-surface;
   padding: 20rpx 0;
   padding: 20rpx 0;
@@ -391,24 +391,25 @@ export default {
 }
 }
 
 
 .team-switcher {
 .team-switcher {
-  width: 100%;
-  white-space: nowrap;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 $uni-space-page;
 }
 }
 
 
+/* 每行两项:50% 宽 + 半间距,两列之间自动留 16rpx 空隙 */
 .team-tab {
 .team-tab {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   align-items: center;
-  padding: 12rpx 28rpx;
-  margin-left: $uni-space-lg;
+  justify-content: center;
+  width: calc(50% - 8rpx);
+  margin: 0 8rpx 16rpx;
+  padding: 16rpx 20rpx;
   border-radius: 999rpx;
   border-radius: 999rpx;
   background-color: $uni-primary-pale;
   background-color: $uni-primary-pale;
+  box-sizing: border-box;
   flex-shrink: 0;
   flex-shrink: 0;
 }
 }
 
 
-.team-tab:last-child {
-  margin-right: $uni-space-lg;
-}
-
 .team-tab-active {
 .team-tab-active {
   background-color: $brand-primary;
   background-color: $brand-primary;
 }
 }
@@ -417,6 +418,9 @@ export default {
   font-size: calc(26rpx * var(--font-scale, 1));
   font-size: calc(26rpx * var(--font-scale, 1));
   color: $facade-text-body;
   color: $facade-text-body;
   white-space: nowrap;
   white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 }
 
 
 .team-tab-active .team-tab-text {
 .team-tab-active .team-tab-text {