|
|
@@ -3,186 +3,69 @@
|
|
|
<el-tabs type="border-card" v-model="activeTab">
|
|
|
<!-- 基本信息标签页 -->
|
|
|
<el-tab-pane label="基本信息" name="basic">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">活动名称</label>
|
|
|
- <div class="detail-value">{{ activity.activityName || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">活动类型</label>
|
|
|
- <div class="detail-value">
|
|
|
- <dict-tag :options="stgl_activity_type" :value="activity.activityType" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">活动主题</label>
|
|
|
- <div class="detail-value">{{ activity.activityTheme || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">活动地点</label>
|
|
|
- <div class="detail-value">{{ activity.location || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">开始时间</label>
|
|
|
- <div class="detail-value">{{ activity.startTime || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">结束时间</label>
|
|
|
- <div class="detail-value">{{ activity.endTime || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">活动状态</label>
|
|
|
- <div class="detail-value">
|
|
|
- <dict-tag :options="stgl_activity_status" :value="activity.activityStatus" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">关联社团/队伍</label>
|
|
|
- <div class="detail-value">{{ activity.relatedClubName || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">活动海报</label>
|
|
|
- <div class="detail-value">
|
|
|
- <div v-if="activity.posterUrl" class="view-poster">
|
|
|
- <image-preview :src="activity.posterUrl" :width="200" :height="150" />
|
|
|
- </div>
|
|
|
- <div v-else class="no-poster">
|
|
|
- <span class="no-poster-text">暂无海报</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 基本信息区域 -->
|
|
|
+ <el-divider content-position="left">基本信息</el-divider>
|
|
|
+ <el-descriptions :column="2" border class="basic-info-section custom-width-registration">
|
|
|
+ <el-descriptions-item label="活动名称">{{ activity.activityName || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="活动类型">
|
|
|
+ <dict-tag :options="stgl_activity_type" :value="activity.activityType" />
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="活动主题">{{ activity.activityTheme || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="活动地点">{{ activity.location || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="开始时间">{{ activity.startTime || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="结束时间">{{ activity.endTime || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="活动状态">
|
|
|
+ <dict-tag :options="stgl_activity_status" :value="activity.activityStatus" />
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="关联社团/队伍">{{ activity.relatedClubName || '暂无' }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <!-- 活动海报区域 -->
|
|
|
+ <el-divider content-position="left">活动海报</el-divider>
|
|
|
+ <div v-if="activity.posterUrl" class="view-poster">
|
|
|
+ <image-preview :src="activity.posterUrl" :width="200" :height="150" />
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">活动简介</label>
|
|
|
- <div class="detail-value">
|
|
|
- <div class="view-description">
|
|
|
- {{ activity.description || '暂无简介' }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div v-else class="no-poster">
|
|
|
+ <span class="no-poster-text">暂无海报</span>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 主办方信息 -->
|
|
|
- <div class="section-divider">
|
|
|
- <h4 class="section-title">主办方信息</h4>
|
|
|
+ <!-- 活动简介区域 -->
|
|
|
+ <el-divider content-position="left">活动简介</el-divider>
|
|
|
+ <div class="view-description">
|
|
|
+ {{ activity.description || '暂无简介' }}
|
|
|
</div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">主办方名称</label>
|
|
|
- <div class="detail-value">{{ activity.organizerName || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">联系人</label>
|
|
|
- <div class="detail-value">{{ activity.organizerContact || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">联系电话</label>
|
|
|
- <div class="detail-value">{{ activity.organizerPhone || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
|
|
|
- <!-- 承办方信息 -->
|
|
|
- <div class="section-divider">
|
|
|
- <h4 class="section-title">承办方信息</h4>
|
|
|
- </div>
|
|
|
+ <!-- 主办方信息区域 -->
|
|
|
+ <el-divider content-position="left">主办方信息</el-divider>
|
|
|
+ <el-descriptions :column="3" border class="organizer-info-section custom-width-organizer">
|
|
|
+ <el-descriptions-item label="主办方名称" :label-style="{ width: '13%' }" :content-style="{ width: '35%' }">{{ activity.organizerName || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系人" :label-style="{ width: '10%' }" :content-style="{ width: '15%' }">{{ activity.organizerContact || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系电话" :label-style="{ width: '10%' }" :content-style="{ width: '17%' }">{{ activity.organizerPhone || '暂无' }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <!-- 承办方信息区域 -->
|
|
|
+ <el-divider content-position="left">承办方信息</el-divider>
|
|
|
<div v-if="coOrganizerList.length > 0">
|
|
|
- <div v-for="(organizer, index) in coOrganizerList" :key="index" class="co-organizer-item">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">承办方名称</label>
|
|
|
- <div class="detail-value">{{ organizer.name || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">承办方类型</label>
|
|
|
- <div class="detail-value">{{ organizer.type || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">联系人</label>
|
|
|
- <div class="detail-value">{{ organizer.contact || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">联系电话</label>
|
|
|
- <div class="detail-value">{{ organizer.phone || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div v-for="(organizer, index) in coOrganizerList" :key="index" class="co-organizer-item custom-width-co-organizer">
|
|
|
+ <el-descriptions :column="3" border>
|
|
|
+ <el-descriptions-item label="承办方名称" :label-style="{ width: '12%' }" :content-style="{ width: '36%' }">{{ organizer.name || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系人" :label-style="{ width: '10%' }" :content-style="{ width: '16%' }">{{ organizer.contact || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系电话" :label-style="{ width: '10%' }" :content-style="{ width: '16%' }">{{ organizer.phone || '暂无' }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="no-data">暂无承办方信息</div>
|
|
|
|
|
|
- <!-- 指导老师信息 -->
|
|
|
- <div class="section-divider">
|
|
|
- <h4 class="section-title">指导老师信息</h4>
|
|
|
- </div>
|
|
|
+ <!-- 指导老师信息区域 -->
|
|
|
+ <el-divider content-position="left">指导老师信息</el-divider>
|
|
|
<div v-if="instructorList.length > 0">
|
|
|
- <div v-for="(instructor, index) in instructorList" :key="index" class="instructor-item">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">姓名</label>
|
|
|
- <div class="detail-value">{{ instructor.name || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">部门</label>
|
|
|
- <div class="detail-value">{{ instructor.dept || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">电话</label>
|
|
|
- <div class="detail-value">{{ instructor.phone || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">邮箱</label>
|
|
|
- <div class="detail-value">{{ instructor.email || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div v-for="(instructor, index) in instructorList" :key="index" class="instructor-item custom-width-instructor">
|
|
|
+ <el-descriptions :column="4" border size="small">
|
|
|
+ <el-descriptions-item label="姓名" :label-style="{ width: '8%' }" :content-style="{ width: '15%' }">{{ instructor.name || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="部门" :label-style="{ width: '8%' }" :content-style="{ width: '17%' }">{{ instructor.dept || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="电话" :label-style="{ width: '8%' }" :content-style="{ width: '15%' }">{{ instructor.phone || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="邮箱" :label-style="{ width: '8%' }" :content-style="{ width: '17%' }">{{ instructor.email || '暂无' }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="no-data">暂无指导老师信息</div>
|
|
|
@@ -190,100 +73,46 @@
|
|
|
|
|
|
<!-- 报名设置标签页 -->
|
|
|
<el-tab-pane label="报名设置" name="registration">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">报名方式</label>
|
|
|
- <div class="detail-value">
|
|
|
- <dict-tag :options="stgl_registration_type" :value="activity.registrationType" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">是否需要审核</label>
|
|
|
- <div class="detail-value">
|
|
|
- <!-- 临时解决方案:直接显示中文文本 -->
|
|
|
- <el-tag v-if="activity.needApproval === 1" type="warning" size="small">需要审核</el-tag>
|
|
|
- <el-tag v-else-if="activity.needApproval === 0" type="success" size="small">无需审核</el-tag>
|
|
|
- <span v-else class="text-gray-400">{{ activity.needApproval }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">报名范围</label>
|
|
|
- <div class="detail-value">
|
|
|
- <dict-tag :options="stgl_activity_range" :value="activity.activityRange" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">报名开始时间</label>
|
|
|
- <div class="detail-value">{{ activity.registrationStart || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">报名结束时间</label>
|
|
|
- <div class="detail-value">{{ activity.registrationEnd || '暂无' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20" v-if="activity.maxParticipants">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">总人数上限</label>
|
|
|
- <div class="detail-value">{{ activity.maxParticipants }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20" v-if="activity.maxTeams || activity.teamSizeMin || activity.teamSizeMax">
|
|
|
- <el-col :span="8" v-if="activity.maxTeams">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">团队数量上限</label>
|
|
|
- <div class="detail-value">{{ activity.maxTeams }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" v-if="activity.teamSizeMin">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">每队最小人数</label>
|
|
|
- <div class="detail-value">{{ activity.teamSizeMin }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" v-if="activity.teamSizeMax">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">每队最大人数</label>
|
|
|
- <div class="detail-value">{{ activity.teamSizeMax }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">报名状态</label>
|
|
|
- <div class="detail-value">
|
|
|
- <dict-tag :options="stgl_registration_status" :value="activity.registrationStatus" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label class="detail-label">报名人数</label>
|
|
|
- <div class="detail-value">{{ activity.registrationCount || 0 }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <!-- 报名方式和审核设置区域 -->
|
|
|
+ <el-divider content-position="left">报名方式和审核设置</el-divider>
|
|
|
+ <el-descriptions :column="2" border class="registration-info-section custom-width-registration">
|
|
|
+ <el-descriptions-item label="报名方式" :label-style="{ width: '10%' }" :content-style="{ width: '40%' }">
|
|
|
+ <dict-tag :options="stgl_registration_type" :value="activity.registrationType" />
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="是否需要审核" :label-style="{ width: '10%' }" :content-style="{ width: '40%' }">
|
|
|
+ <!-- 临时解决方案:直接显示中文文本 -->
|
|
|
+ <el-tag v-if="activity.needApproval === 1" type="warning" size="small">需要审核</el-tag>
|
|
|
+ <el-tag v-else-if="activity.needApproval === 0" type="success" size="small">无需审核</el-tag>
|
|
|
+ <span v-else class="text-gray-400">{{ activity.needApproval }}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="报名范围" :label-style="{ width: '10%' }" :content-style="{ width: '40%' }">
|
|
|
+ <dict-tag :options="stgl_activity_range" :value="activity.activityRange" />
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="报名状态" :label-style="{ width: '10%' }" :content-style="{ width: '40%' }">
|
|
|
+ <dict-tag :options="stgl_registration_status" :value="activity.registrationStatus" />
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <!-- 报名时间区域 -->
|
|
|
+ <el-divider content-position="left">报名时间</el-divider>
|
|
|
+ <el-descriptions :column="2" border class="registration-time-section custom-width-registration">
|
|
|
+ <el-descriptions-item label="报名开始时间">{{ activity.registrationStart || '暂无' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="报名结束时间">{{ activity.registrationEnd || '暂无' }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <!-- 人数限制区域 -->
|
|
|
+ <el-divider content-position="left">人数限制</el-divider>
|
|
|
+ <el-descriptions :column="2" border class="registration-limit-section custom-width-registration">
|
|
|
+ <el-descriptions-item label="总人数上限" v-if="activity.maxParticipants">{{ activity.maxParticipants }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="团队数量上限" v-if="activity.maxTeams">{{ activity.maxTeams }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="每队最小人数" v-if="activity.teamSizeMin">{{ activity.teamSizeMin }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="每队最大人数" v-if="activity.teamSizeMax">{{ activity.teamSizeMax }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <!-- 如果没有任何限制信息,显示提示 -->
|
|
|
+ <div v-if="!activity.maxParticipants && !activity.maxTeams && !activity.teamSizeMin && !activity.teamSizeMax" class="no-limit-data">
|
|
|
+ 暂无人数限制设置
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 报名查看标签页 -->
|
|
|
@@ -506,36 +335,149 @@ onMounted(() => {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
-/* 详情项样式 */
|
|
|
-.detail-item {
|
|
|
+/* el-descriptions组件相关样式 */
|
|
|
+.basic-info-section,
|
|
|
+.organizer-info-section,
|
|
|
+.registration-info-section,
|
|
|
+.registration-time-section,
|
|
|
+.registration-limit-section {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-.detail-label {
|
|
|
- display: inline-block;
|
|
|
- width: 120px;
|
|
|
- color: #606266;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 8px;
|
|
|
- text-align: right;
|
|
|
- padding-right: 12px;
|
|
|
+/* 自定义宽度的报名信息表格 */
|
|
|
+.custom-width-registration :deep(.el-descriptions__table) {
|
|
|
+ table-layout: fixed !important;
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-width-registration :deep(.el-descriptions__cell) {
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
|
|
|
-.detail-value {
|
|
|
- display: inline-block;
|
|
|
+/* 强制设置标签和内容的宽度 */
|
|
|
+.custom-width-registration :deep(.el-descriptions__label) {
|
|
|
+ width: 20% !important;
|
|
|
+ min-width: 20% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-width-registration :deep(.el-descriptions__content) {
|
|
|
+ width: 30% !important;
|
|
|
+ min-width: 30% !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 自定义宽度的主办方信息表格 */
|
|
|
+.custom-width-organizer :deep(.el-descriptions__table) {
|
|
|
+ table-layout: fixed !important;
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-width-organizer :deep(.el-descriptions__cell) {
|
|
|
vertical-align: top;
|
|
|
- width: calc(100% - 120px);
|
|
|
- color: #303133;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
+/* 强制设置主办方信息标签和内容的宽度 */
|
|
|
+.custom-width-organizer :deep(.el-descriptions__label) {
|
|
|
+ box-sizing: border-box !important;
|
|
|
+ word-wrap: break-word !important;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-width-organizer :deep(.el-descriptions__content) {
|
|
|
+ box-sizing: border-box !important;
|
|
|
+ word-wrap: break-word !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 主办方信息区域 - 具体宽度控制 */
|
|
|
+.custom-width-organizer :deep(.el-descriptions__table tr td:nth-child(1)) {
|
|
|
+ width: 13% !important;
|
|
|
+}
|
|
|
+.custom-width-organizer :deep(.el-descriptions__table tr td:nth-child(2)) {
|
|
|
+ width: 35% !important;
|
|
|
+}
|
|
|
+.custom-width-organizer :deep(.el-descriptions__table tr td:nth-child(3)) {
|
|
|
+ width: 10% !important;
|
|
|
+}
|
|
|
+.custom-width-organizer :deep(.el-descriptions__table tr td:nth-child(4)) {
|
|
|
+ width: 15% !important;
|
|
|
+}
|
|
|
+.custom-width-organizer :deep(.el-descriptions__table tr td:nth-child(5)) {
|
|
|
+ width: 10% !important;
|
|
|
+}
|
|
|
+.custom-width-organizer :deep(.el-descriptions__table tr td:nth-child(6)) {
|
|
|
+ width: 17% !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 承办方信息区域 - 具体宽度控制 */
|
|
|
+.custom-width-co-organizer :deep(.el-descriptions__table tr td:nth-child(1)) {
|
|
|
+ width: 12% !important;
|
|
|
+}
|
|
|
+.custom-width-co-organizer :deep(.el-descriptions__table tr td:nth-child(2)) {
|
|
|
+ width: 36% !important;
|
|
|
+}
|
|
|
+.custom-width-co-organizer :deep(.el-descriptions__table tr td:nth-child(3)) {
|
|
|
+ width: 10% !important;
|
|
|
+}
|
|
|
+.custom-width-co-organizer :deep(.el-descriptions__table tr td:nth-child(4)) {
|
|
|
+ width: 16% !important;
|
|
|
+}
|
|
|
+.custom-width-co-organizer :deep(.el-descriptions__table tr td:nth-child(5)) {
|
|
|
+ width: 10% !important;
|
|
|
+}
|
|
|
+.custom-width-co-organizer :deep(.el-descriptions__table tr td:nth-child(6)) {
|
|
|
+ width: 16% !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 自定义宽度的指导老师信息表格 */
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table) {
|
|
|
+ table-layout: fixed !important;
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-width-instructor :deep(.el-descriptions__cell) {
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
+
|
|
|
+/* 强制设置指导老师信息标签和内容的宽度 */
|
|
|
+.custom-width-instructor :deep(.el-descriptions__label) {
|
|
|
+ box-sizing: border-box !important;
|
|
|
+ word-wrap: break-word !important;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-width-instructor :deep(.el-descriptions__content) {
|
|
|
+ box-sizing: border-box !important;
|
|
|
+ word-wrap: break-word !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 指导老师信息区域 - 具体宽度控制 (8+15+8+17+8+15+8+17) */
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table tr td:nth-child(1)) {
|
|
|
+ width: 8% !important;
|
|
|
+}
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table tr td:nth-child(2)) {
|
|
|
+ width: 15% !important;
|
|
|
+}
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table tr td:nth-child(3)) {
|
|
|
+ width: 8% !important;
|
|
|
+}
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table tr td:nth-child(4)) {
|
|
|
+ width: 17% !important;
|
|
|
+}
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table tr td:nth-child(5)) {
|
|
|
+ width: 8% !important;
|
|
|
+}
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table tr td:nth-child(6)) {
|
|
|
+ width: 15% !important;
|
|
|
+}
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table tr td:nth-child(7)) {
|
|
|
+ width: 8% !important;
|
|
|
+}
|
|
|
+.custom-width-instructor :deep(.el-descriptions__table tr td:nth-child(8)) {
|
|
|
+ width: 17% !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 海报显示区域样式 */
|
|
|
.view-poster {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
+ justify-content: center;
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
|
|
|
@@ -548,6 +490,7 @@ onMounted(() => {
|
|
|
border: 1px dashed #dcdfe6;
|
|
|
border-radius: 4px;
|
|
|
background-color: #fafafa;
|
|
|
+ margin: 20px auto;
|
|
|
}
|
|
|
|
|
|
.no-poster-text {
|
|
|
@@ -556,6 +499,7 @@ onMounted(() => {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
+/* 描述文本区域样式 */
|
|
|
.view-description {
|
|
|
padding: 12px;
|
|
|
border: 1px solid #e4e7ed;
|
|
|
@@ -567,26 +511,12 @@ onMounted(() => {
|
|
|
white-space: pre-wrap;
|
|
|
word-break: break-word;
|
|
|
background-color: #fafafa;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-/* 章节分隔样式 */
|
|
|
-.section-divider {
|
|
|
- margin: 24px 0 16px 0;
|
|
|
- padding-top: 16px;
|
|
|
- border-top: 1px solid #e4e7ed;
|
|
|
-}
|
|
|
-
|
|
|
-.section-title {
|
|
|
- margin: 0 0 16px 0;
|
|
|
- color: #303133;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- border-bottom: 2px solid #409eff;
|
|
|
- padding-bottom: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 承办方项目样式 */
|
|
|
-.co-organizer-item {
|
|
|
+/* 承办方和指导老师项目样式 */
|
|
|
+.co-organizer-item,
|
|
|
+.instructor-item {
|
|
|
margin-bottom: 16px;
|
|
|
padding: 16px;
|
|
|
background: #f8f9fa;
|
|
|
@@ -594,24 +524,14 @@ onMounted(() => {
|
|
|
border: 1px solid #e9ecef;
|
|
|
}
|
|
|
|
|
|
-.co-organizer-item:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* 指导老师项目样式 */
|
|
|
-.instructor-item {
|
|
|
- margin-bottom: 16px;
|
|
|
- padding: 16px;
|
|
|
- background: #fafafa;
|
|
|
- border-radius: 6px;
|
|
|
- border: 1px solid #ebeef5;
|
|
|
-}
|
|
|
-
|
|
|
+.co-organizer-item:last-child,
|
|
|
.instructor-item:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
-.no-data {
|
|
|
+/* 无数据提示样式 */
|
|
|
+.no-data,
|
|
|
+.no-limit-data {
|
|
|
color: #909399;
|
|
|
font-size: 13px;
|
|
|
font-style: italic;
|
|
|
@@ -620,10 +540,9 @@ onMounted(() => {
|
|
|
background: #f8f9fa;
|
|
|
border-radius: 4px;
|
|
|
border: 1px solid #e9ecef;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
/* 附件显示区域样式 */
|
|
|
.attachment-list {
|
|
|
display: flex;
|
|
|
@@ -647,4 +566,78 @@ onMounted(() => {
|
|
|
.attachment-icon {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
+
|
|
|
+/* el-divider样式优化 */
|
|
|
+:deep(.el-divider--horizontal) {
|
|
|
+ margin: 24px 0 16px 0;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-divider__text) {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #303133;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* el-descriptions样式优化 */
|
|
|
+:deep(.el-descriptions) {
|
|
|
+ .el-descriptions__header {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-descriptions__title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-descriptions__body {
|
|
|
+ .el-descriptions__table {
|
|
|
+ .el-descriptions__cell {
|
|
|
+ padding: 12px 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-descriptions__label {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606266;
|
|
|
+ background-color: #fafafa;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-descriptions__content {
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 标签样式优化 */
|
|
|
+:deep(.el-tag) {
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式布局优化 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .activity-detail-view {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-descriptions) {
|
|
|
+ .el-descriptions__body {
|
|
|
+ .el-descriptions__table {
|
|
|
+ .el-descriptions__cell {
|
|
|
+ padding: 8px 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .co-organizer-item,
|
|
|
+ .instructor-item {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|