..

frontend/src/pages/activity/team/index.vue

@@ -59,7 +59,6 @@
               <div class="member-name">
                 {{ member.name }}
                 <span class="member-role" v-if="member.role === 'leader'">队长</span>
-                <span class="member-role" v-else-if="member.role === 'admin'" style="background-color: #ff9a5a;">管理员</span>
               </div>
               <div class="member-detail">
                 <div class="member-detail-item">
@@ -80,17 +79,18 @@
 
         <!-- 当前角色与申请队长 -->
         <div v-if="currentUserRole !== 'leader'">
-          <div class="role-notice" v-if="currentUserRole === 'admin'">
-            <i class="bi bi-info-circle"></i>
-            您当前是管理员身份，拥有团队管理权限
-          </div>
-          <div class="role-notice" v-else>
+          <div class="role-notice">
             <i class="bi bi-info-circle"></i>
             您当前是普通成员身份
           </div>
-          <button class="apply-leader-btn" @click="showLeaderConfirm">
+          <t-button block
+                    theme="primary"
+                    variant="outline"
+                    size="large"
+                    shape="round"
+                    @click="leaderConfirmVisible = true">
             <i class="bi bi-award"></i>申请成为队长
-          </button>
+          </t-button>
         </div>
         <div class="role-notice" v-else>
           <i class="bi bi-check-circle"></i>
@@ -100,15 +100,32 @@
 
       <!-- 项目报名按钮 -->
       <div class="team-section">
-        <button class="register-btn" @click="goToEventRegistration">
+        <t-button block
+                theme="primary"
+                size="large"
+                shape="round" @click="goToEventRegistration">
           <i class="bi bi-calendar-check"></i>
           项目报名
-        </button>
+        </t-button>
       </div>
     </div>
-
-
   </view>
+
+  <t-dialog
+      v-model:visible="leaderConfirmVisible"
+      title="申请成为队长"
+      cancel-btn="取消"
+      confirm-btn="确认"
+      @confirm="onLeaderConfirm"
+      @cancel="leaderConfirmVisible = false"
+  >
+    <template #content>
+        <p>申请成为队长前，请确认您已与团队其他成员商议并达成一致意见。</p>
+        <p>一个团队仅能有一名队长，作为队长，您可以帮助队员一键报名项目。</p>
+    </template>
+  </t-dialog>
+
+
 </template>
 
 <script setup>
@@ -124,7 +141,7 @@ const teamId = ''
 
 const team = reactive({
   id: teamId,
-  name: '江苏健康跑团',
+  name: 'xx队',
   logoUrl: null,
   createdDate: '2023-10-15',
   eventId: '',
@@ -132,7 +149,7 @@ const team = reactive({
   memberCount: 12,
   rank: 5,
   score: 256,
-  description: '我们是一支来自江苏省的健康跑团队，致力于推广健康跑步文化，鼓励大家积极参与体育活动，共同展现江苏的活力风采。',
+  description: 'xxxxxxxxxxxxxxxxxxx',
 
   // 团队成员
   members: [
@@ -179,6 +196,9 @@ const team = reactive({
   ]
 });
 
+const currentUserRole = ref('')
+// 申请成为队长弹框提示
+const leaderConfirmVisible = ref(false)
 
 function handleMenuOpened(){
 
@@ -190,6 +210,12 @@ function actChange(val){
   console.log(val)
 }
 
+// 申请成为队长
+function onLeaderConfirm(){
+
+}
+
+function goToEventRegistration(){}
 
 
 </script>
@@ -310,4 +336,127 @@ function actChange(val){
   font-size: 13px;
   color: #666;
 }
+
+
+/* 团队成员列表 */
+.team-section {
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.section-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #333;
+  display: flex;
+  align-items: center;
+}
+
+.section-title i {
+  margin-right: 8px;
+  color: #e74c3c;
+  font-size: 20px;
+}
+
+.member-list {
+  background: white;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.member-item {
+  display: flex;
+  padding: 15px;
+  border-bottom: 1px solid #f0f0f0;
+  align-items: center;
+}
+
+.member-item:last-child {
+  border-bottom: none;
+}
+
+.member-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #f0f0f0;
+  margin-right: 15px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.member-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.member-info {
+  flex: 1;
+}
+
+.member-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.member-role {
+  display: inline-block;
+  font-size: 12px;
+  background-color: #e74c3c;
+  color: white;
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-left: 8px;
+}
+
+.member-detail {
+  display: flex;
+  font-size: 13px;
+  color: #666;
+}
+
+.member-detail-item {
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+}
+
+.member-detail-item i {
+  margin-right: 4px;
+  font-size: 14px;
+  color: #999;
+}
+
+.member-actions {
+  color: #999;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+.role-notice {
+  background-color: #f8f9fa;
+  padding: 12px 15px;
+  border-radius: 8px;
+  margin-top: 15px;
+  font-size: 13px;
+  color: #666;
+  display: flex;
+  align-items: center;
+}
+
+.role-notice i {
+  color: #ffa63f;
+  margin-right: 8px;
+  font-size: 16px;
+}
+
 </style>