hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-20 16:26:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:修改基础信息-任务大纲横向滚动条

Browse Source
This commit is contained in:
李晓鸽
2022-10-22 10:44:37 +08:00
parent 10738f80d0
commit 2bf6c525a8
1 changed files with 187 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
src/views/projectcenter/TaskPage.vue
View File

@@ -208,153 +208,194 @@
</div> </div>
<!-- 概览（有数据） --> <!-- 概览（有数据） -->
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="任务" force-render> <a-tab-pane key="2" tab="任务">
<div class="split"></div> <div style="flex: 1">
<div class="onerow"> <div class="split"></div>
<div class="taskmain">任务大纲</div> <div class="onerow">
<button class="btn">批量面授报名</button> <div class="taskmain">任务大纲</div>
<router-link to="/taskadd" class="edit"> <button class="btn">批量面授报名</button>
<img <router-link to="/taskadd" class="edit">
class="editimg"
src="../../assets/images/projectadd/edit.png"
/>
<span class="editext">编辑</span>
</router-link>
</div>
<div class="taskSyllabus">
<a-collapse v-model:activeKey="taskSyllabusActive" accordion>
<template #expandIcon="{ isActive }">
<img <img
:style="{ class="editimg"
width: isActive ? 9.1 : 8.1, src="../../assets/images/projectadd/edit.png"
height: isActive ? 8.1 : 9.1,
'margin-right': isActive ? '12px' : '13px',
}"
:src="
isActive
? require('../../assets/images/projectadd/open.png')
: require('../../assets/images/projectadd/close.png')
"
/> />
<div></div> <span class="editext">编辑</span>
</template> </router-link>
<a-collapse-panel </div>
v-for="(value, index) in taskSyllabus" <div class="taskSyllabus">
:key="index" <a-collapse v-model:activeKey="taskSyllabusActive" accordion>
:header="value.text" <template #expandIcon="{ isActive }">
> <img
<div :style="{
class="course" width: isActive ? 9.1 : 8.1,
v-for="(item, key) in value.children" height: isActive ? 8.1 : 9.1,
:key="key" 'margin-right': isActive ? '12px' : '13px',
}"
:src="
isActive
? require('../../assets/images/projectadd/open.png')
: require('../../assets/images/projectadd/close.png')
"
/>
<div></div>
</template>
<a-collapse-panel
v-for="(value, index) in taskSyllabus"
:key="index"
:header="value.text"
> >
<div class="first"> <div
<div class="icon"> class="course"
<img src="../../assets/images/leveladd/zai.png" /> v-for="(item, key) in value.children"
:key="key"
>
<!-- :style="{width:item.course==='在线'?'28px':
height:item.course==='在线'?'27px':}" -->
<div class="first">
<div class="icon">
<div
style="
width: 31px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
:src="
item.course === '在线'
? require('../../assets/images/leveladd/zai.png')
: item.course === '面授'
? require('../../assets/images/leveladd/mian.png')
: item.course === '案例'
? require('../../assets/images/leveladd/an.png')
: item.course === '作业'
? require('../../assets/images/leveladd/zuo.png')
: item.course === '考试'
? require('../../assets/images/leveladd/kao.png')
: item.course === '直播'
? require('../../assets/images/leveladd/zhi.png')
: item.course === '外链'
? require('../../assets/images/leveladd/wai.png')
: item.course === '讨论'
? require('../../assets/images/leveladd/tao.png')
: item.course === '活动'
? require('../../assets/images/leveladd/huo.png')
: item.course === '测评'
? require('../../assets/images/leveladd/ce.png')
: item.course === '调研'
? require('../../assets/images/leveladd/diao.png')
: item.course === '投票'
? require('../../assets/images/leveladd/tou.png')
: null
"
/>
</div>
</div>
<div>
<div class="iconame">「{{ item.course }}」</div>
<div class="icontext">{{ item.name }}</div>
</div>
</div> </div>
<div> <div class="type">
<div class="iconame">「{{ item.course }}」</div> <div
<div class="icontext">{{ item.name }}</div> :class="
</div> item.classify == '必修' ? 'typename1' : 'typename'
</div> "
<div class="type">
<div
:class="
item.classify == '必修' ? 'typename1' : 'typename'
"
>
{{ item.classify }}
</div>
</div>
<div class="time">
<div class="timetext">开始时间</div>
<div class="timetext">{{ item.beginTime }}</div>
</div>
<div class="progress">
<div class="progresstext">
{{ item.complete }}/{{ item.total }}人
</div>
<div style="display: flex">
<a-progress
:showInfo="false"
:percent="item.percent"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px"
>{{ item.percent }}%</span
> >
{{ item.classify }}
</div>
</div> </div>
</div> <div class="time">
<div class="operations"> <div class="timetext">开始时间</div>
<div <div class="timetext">{{ item.beginTime }}</div>
class="operation"
style="cursor: pointer"
:style="{
display: item.course === '面授' ? 'flex' : 'none',
}"
@click="showFS"
>
学员
</div> </div>
<div <div class="progress">
class="operation" <div class="progresstext">
style="cursor: pointer" {{ item.complete }}/{{ item.total }}人
@click="showAA" </div>
:style="{ <div style="display: flex">
display: <a-progress
item.course === '直播' || item.course === '活动' :showInfo="false"
? 'flex' :percent="item.percent"
: 'none', strokeColor="#FFC067"
}" trailColor="rgba(253, 209, 98, 0.2)"
> />
考勤 <span class="progresstext" style="margin-left: 10px"
>{{ item.percent }}%</span
>
</div>
</div> </div>
<div <div class="operations">
class="operation" <div
style="cursor: pointer" class="operation"
:style="{ style="cursor: pointer"
display: :style="{
display: item.course === '面授' ? 'flex' : 'none',
}"
@click="showFS"
>
学员
</div>
<div
class="operation"
style="cursor: pointer"
@click="showAA"
:style="{
display:
item.course === '直播' || item.course === '活动'
? 'flex'
: 'none',
}"
>
考勤
</div>
<div
class="operation"
style="cursor: pointer"
:style="{
display:
item.course === '直播' ||
item.course === '活动' ||
item.course === '面授'
? 'flex'
: 'none',
}"
>
二维码
</div>
<div
class="operation"
style="cursor: pointer; margin-right: 35px"
@click="
item.course === '在线' ||
item.course === '案例' ||
item.course === '外链' ||
item.course === '讨论' ||
item.course === '直播' || item.course === '直播' ||
item.course === '活动' || item.course === '调研' ||
item.course === '面授' item.course === '投票' ||
? 'flex' item.course === '活动'
: 'none', ? showTime(item.course, item.name)
}" : item.course === '考试' || item.course === '测评'
> ? showTest(item.course, item.name)
二维码 : item.course === '面授'
</div> ? showFace(item.course)
<div : item.course === '作业'
class="operation" ? showWork(item.course)
style="cursor: pointer; margin-right: 35px" : null
@click=" "
item.course === '在线' || >
item.course === '案例' || 管理
item.course === '外链' || </div>
item.course === '讨论' ||
item.course === '直播' ||
item.course === '调研' ||
item.course === '投票' ||
item.course === '活动'
? showTime(item.course, item.name)
: item.course === '考试' || item.course === '测评'
? showTest(item.course, item.name)
: item.course === '面授'
? showFace(item.course)
: item.course === '作业'
? showWork(item.course)
: null
"
>
管理
</div> </div>
</div> </div>
</div> </a-collapse-panel>
</a-collapse-panel> </a-collapse>
</a-collapse> </div>
<div style="display: flex; height: 20px"></div>
</div> </div>
<div style="display: flex; height: 20px"></div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="3" tab="学员"> <a-tab-pane key="3" tab="学员">
<div class="split"></div> <div class="split"></div>
@@ -2461,7 +2502,6 @@ export default {
background-color: #edf0f5; background-color: #edf0f5;
} }
.content { .content {
//display: flex;
//margin: 0 37px; //margin: 0 37px;
.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-top > .ant-tabs-nav::before,
.ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before,
@@ -2695,10 +2735,15 @@ export default {
} }
} }
.taskSyllabus { .taskSyllabus {
// flex: 1;
overflow-x: scroll;
.ant-collapse { .ant-collapse {
border: 0px; border: 0px;
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
min-width: 1040px;
} }
.ant-collapse-content > .ant-collapse-content-box { .ant-collapse-content > .ant-collapse-content-box {
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
@@ -2746,12 +2791,15 @@ export default {
} }
.course { .course {
//width: 100%; //width: 100%;
flex-shrink: 0;
margin-right: 24px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding: 25px 0px; padding: 25px 0px;
margin-left: 22px; margin-left: 22px;
margin-right: 24px;
//margin: 0 12px; //margin: 0 12px;
border: 1px solid #f2f6fc; border: 1px solid #f2f6fc;
border-top: 0px; border-top: 0px;
@@ -2768,12 +2816,13 @@ export default {
//position: absolute; //position: absolute;
color: #4f5156; color: #4f5156;
font-size: 16px; font-size: 16px;
margin-left: 4px;
} }
.icontext { .icontext {
//positipn: absolute; //positipn: absolute;
color: #999ba3; color: #999ba3;
font-size: 14px; font-size: 14px;
margin-left: 8px; margin-left: 12px;
width: 83px; width: 83px;
} }
} }