mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-20 08:16:46 +08:00
feat:修改基础信息-任务大纲横向滚动条
This commit is contained in:
李晓鸽
@@ -208,153 +208,194 @@
|
||||
</div>
|
||||
<!-- 概览（有数据） -->
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="任务" force-render>
|
||||
<div class="split"></div>
|
||||
<div class="onerow">
|
||||
<div class="taskmain">任务大纲</div>
|
||||
<button class="btn">批量面授报名</button>
|
||||
<router-link to="/taskadd" class="edit">
|
||||
<img
|
||||
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 }">
|
||||
<a-tab-pane key="2" tab="任务">
|
||||
<div style="flex: 1">
|
||||
<div class="split"></div>
|
||||
<div class="onerow">
|
||||
<div class="taskmain">任务大纲</div>
|
||||
<button class="btn">批量面授报名</button>
|
||||
<router-link to="/taskadd" class="edit">
|
||||
<img
|
||||
:style="{
|
||||
width: isActive ? 9.1 : 8.1,
|
||||
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')
|
||||
"
|
||||
class="editimg"
|
||||
src="../../assets/images/projectadd/edit.png"
|
||||
/>
|
||||
<div></div>
|
||||
</template>
|
||||
<a-collapse-panel
|
||||
v-for="(value, index) in taskSyllabus"
|
||||
:key="index"
|
||||
:header="value.text"
|
||||
>
|
||||
<div
|
||||
class="course"
|
||||
v-for="(item, key) in value.children"
|
||||
:key="key"
|
||||
<span class="editext">编辑</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="taskSyllabus">
|
||||
<a-collapse v-model:activeKey="taskSyllabusActive" accordion>
|
||||
<template #expandIcon="{ isActive }">
|
||||
<img
|
||||
:style="{
|
||||
width: isActive ? 9.1 : 8.1,
|
||||
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>
|
||||
</template>
|
||||
<a-collapse-panel
|
||||
v-for="(value, index) in taskSyllabus"
|
||||
:key="index"
|
||||
:header="value.text"
|
||||
>
|
||||
<div class="first">
|
||||
<div class="icon">
|
||||
<img src="../../assets/images/leveladd/zai.png" />
|
||||
<div
|
||||
class="course"
|
||||
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 class="iconame">「{{ item.course }}」</div>
|
||||
<div class="icontext">{{ item.name }}</div>
|
||||
</div>
|
||||
</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
|
||||
<div class="type">
|
||||
<div
|
||||
:class="
|
||||
item.classify == '必修' ? 'typename1' : 'typename'
|
||||
"
|
||||
>
|
||||
{{ item.classify }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operations">
|
||||
<div
|
||||
class="operation"
|
||||
style="cursor: pointer"
|
||||
:style="{
|
||||
display: item.course === '面授' ? 'flex' : 'none',
|
||||
}"
|
||||
@click="showFS"
|
||||
>
|
||||
学员
|
||||
<div class="time">
|
||||
<div class="timetext">开始时间</div>
|
||||
<div class="timetext">{{ item.beginTime }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="operation"
|
||||
style="cursor: pointer"
|
||||
@click="showAA"
|
||||
:style="{
|
||||
display:
|
||||
item.course === '直播' || item.course === '活动'
|
||||
? 'flex'
|
||||
: 'none',
|
||||
}"
|
||||
>
|
||||
考勤
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="operation"
|
||||
style="cursor: pointer"
|
||||
:style="{
|
||||
display:
|
||||
<div class="operations">
|
||||
<div
|
||||
class="operation"
|
||||
style="cursor: pointer"
|
||||
: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 === '面授'
|
||||
? '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 === '活动'
|
||||
? 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
|
||||
"
|
||||
>
|
||||
管理
|
||||
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>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
<div style="display: flex; height: 20px"></div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; height: 20px"></div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="学员">
|
||||
<div class="split"></div>
|
||||
@@ -2461,7 +2502,6 @@ export default {
|
||||
background-color: #edf0f5;
|
||||
}
|
||||
.content {
|
||||
//display: flex;
|
||||
//margin: 0 37px;
|
||||
.ant-tabs-top > .ant-tabs-nav::before,
|
||||
.ant-tabs-bottom > .ant-tabs-nav::before,
|
||||
@@ -2695,10 +2735,15 @@ export default {
|
||||
}
|
||||
}
|
||||
.taskSyllabus {
|
||||
// flex: 1;
|
||||
overflow-x: scroll;
|
||||
|
||||
.ant-collapse {
|
||||
border: 0px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
min-width: 1040px;
|
||||
}
|
||||
|
||||
.ant-collapse-content > .ant-collapse-content-box {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
@@ -2746,12 +2791,15 @@ export default {
|
||||
}
|
||||
.course {
|
||||
//width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-right: 24px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 25px 0px;
|
||||
margin-left: 22px;
|
||||
margin-right: 24px;
|
||||
|
||||
//margin: 0 12px;
|
||||
border: 1px solid #f2f6fc;
|
||||
border-top: 0px;
|
||||
@@ -2768,12 +2816,13 @@ export default {
|
||||
//position: absolute;
|
||||
color: #4f5156;
|
||||
font-size: 16px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.icontext {
|
||||
//positipn: absolute;
|
||||
color: #999ba3;
|
||||
font-size: 14px;
|
||||
margin-left: 8px;
|
||||
margin-left: 12px;
|
||||
width: 83px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user