feat:hebing

This commit is contained in:
dongwug
2022-10-12 18:43:59 +08:00
8 changed files with 1987 additions and 1967 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 B

File diff suppressed because it is too large Load Diff

View File

@@ -64,7 +64,7 @@
</div> </div>
<!-- 搜索框及按钮 --> <!-- 搜索框及按钮 -->
<!-- 表格 --> <!-- 表格 -->
<div class="tableBox"> <div class="tableBox" style="padding-bottom: 160px; position: relative">
<a-table <a-table
style="border: 1px solid #f2f6fe" style="border: 1px solid #f2f6fe"
:columns="tableDataFunc()" :columns="tableDataFunc()"
@@ -75,7 +75,6 @@
@expand="expandTable" @expand="expandTable"
:pagination="false" :pagination="false"
/> />
<div class="pa"> <div class="pa">
<a-pagination <a-pagination
showSizeChanger="true" showSizeChanger="true"
@@ -90,83 +89,86 @@
</div> </div>
<!-- 表格 --> <!-- 表格 -->
<div :class="out ? 'out' : 'unout'">
<div class="top"> <a-modal v-model:visible="out" footer="null" style="margin-top: 400px">
<img class="topimg" src="../../assets/images/courseManage/add1.png" /> <div class="out">
<div class="topc">创建路径</div> <div class="top">
<div @click="handleOut" style="margin-left: 500px; cursor: pointer"> <img class="topimg" src="../../assets/images/courseManage/add1.png" />
<img <div class="topc">创建路径</div>
style="width: 20px; height: 20px" <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
src="../../assets/images/basicinfo/close.png"
/>
</div>
</div>
<div class="mid clearfix">
<div class="name">
<div class="d" style="margin-top: -4px">
<img <img
style="width: 10px; height: 10px" style="width: 20px; height: 20px"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/close.png"
/> />
</div> </div>
<div class="inname">路径图名称</div>
<div class="in">
<a-input
v-model:value="valueE"
maxlength="20"
style="border-radius: 4px"
/>
<div class="showcount">{{ valuei.length }}/20</div>
</div>
</div> </div>
<div class="bac"> <div class="mid clearfix">
<div class="d" style="margin-top: 12px"> <div class="name">
<img <div class="d" style="margin-top: -4px">
style="width: 10px; height: 10px" <img
src="../../assets/images/basicinfo/asterisk.png" style="width: 10px; height: 10px"
/> src="../../assets/images/basicinfo/asterisk.png"
</div> />
<div class="inname">路径图背景</div> </div>
<div class="in"> <div class="inname">路径图名称</div>
<!-- <img class="im" src="../../assets/px.jpg" /> <div class="in">
<img class="im" src="../../assets/px.jpg" /> <a-input
<img class="im" src="../../assets/px.jpg" /> --> v-model:value="valueE"
<div maxlength="20"
@click="chooseImg(item.id)" style="border-radius: 4px"
v-for="item in imgData" />
:key="item.key" <div class="showcount">{{ valueE.length }}/20</div>
style="
border-radius: 8px;
width: 136px;
height: 106px;
background-size: 100%;
background-repeat: no-repeat;
"
:style="{
border:
learnPathBg === item.id
? '2px solid rgba(78, 166, 255, 1)'
: '2px solid rgba(78, 166, 255, 0)',
'background-image': 'url(' + item.source + ')',
}"
>
<!-- <img class="im" :src="item.source" /> -->
</div> </div>
</div> </div>
</div> <div class="bac">
<div class="info"> <div class="d" style="margin-top: 12px">
<div class="inname">路径说明</div> <img
<div class="in"> style="width: 10px; height: 10px"
<a-textarea v-model:value="valuei" maxlength="150" /> src="../../assets/images/basicinfo/asterisk.png"
<div class="showcount">{{ valuei.length }}/150</div> />
</div>
<div class="inname">路径图背景</div>
<div class="in">
<!-- <img class="im" src="../../assets/px.jpg" />
<img class="im" src="../../assets/px.jpg" />
<img class="im" src="../../assets/px.jpg" /> -->
<div
@click="chooseImg(item.id)"
v-for="item in imgData"
:key="item.key"
style="
border-radius: 8px;
width: 136px;
height: 106px;
background-size: 100%;
background-repeat: no-repeat;
"
:style="{
border:
learnPathBg === item.id
? '2px solid rgba(78, 166, 255, 1)'
: '2px solid rgba(78, 166, 255, 0)',
'background-image': 'url(' + item.source + ')',
}"
>
<!-- <img class="im" :src="item.source" /> -->
</div>
</div>
</div>
<div class="info">
<div class="inname">路径说明</div>
<div class="in">
<a-textarea v-model:value="valuei" maxlength="150" />
<div class="showcount">{{ valuei.length }}/150</div>
</div>
</div>
<div class="btn">
<button class="samtn btn1" @click="handleOut">取消</button>
<button class="samtn btn2" @click="handleOut">确定</button>
</div> </div>
</div> </div>
<div class="btn"> </div></a-modal
<button class="samtn btn1" @click="handleOut">取消</button> >
<button class="samtn btn2" @click="handleOut">确定</button>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
@@ -564,6 +566,174 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.out {
display: block;
position: absolute;
top: 90px;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
margin-top: -2px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.bac {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// border: 1px solid black;
.d {
margin-top: 18px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
height: 110px;
// background-color: red;
display: flex;
justify-content: space-between;
.im {
border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer;
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #fff;
}
}
}
}
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: " "; content: " ";
@@ -671,6 +841,7 @@ export default {
} }
.tableBox { .tableBox {
margin: 20px 38px 30px; margin: 20px 38px 30px;
th.h { th.h {
background-color: #eff4fc !important; background-color: #eff4fc !important;
} }
@@ -770,174 +941,6 @@ export default {
// } // }
// } // }
.out {
display: block;
position: absolute;
top: 90px;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
margin-top: -2px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.bac {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// border: 1px solid black;
.d {
margin-top: 18px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
height: 110px;
// background-color: red;
display: flex;
justify-content: space-between;
.im {
border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer;
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #fff;
}
}
}
}
.unout { .unout {
display: none; display: none;
} }

View File

@@ -28,9 +28,11 @@
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/back.png" /> <router-link to="/learningpath"
<router-link to="/learningpath"> ><div style="display: flex">
<div class="return">返回</div></router-link <img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div></router-link
> >
</div> </div>
</div> </div>
@@ -434,7 +436,7 @@ export default {
.return { .return {
color: #4ea6ff; color: #4ea6ff;
font-size: 14px; font-size: 14px;
margin-top: 5px; margin-top: 10px;
margin-right: 60px; margin-right: 60px;
} }
.more { .more {

View File

@@ -74,10 +74,13 @@
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/back.png" />
<router-link to="/leveladd"> <router-link to="/leveladd">
<div class="return">返回</div></router-link <div style="display: flex">
> <img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div>
</router-link>
</div> </div>
</div> </div>
</div> </div>
@@ -791,6 +794,7 @@ export default {
.allCon { .allCon {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto;
background-color: #f1f4f8; background-color: #f1f4f8;
display: flex; display: flex;
// min-width: 1200px; // min-width: 1200px;
@@ -983,7 +987,7 @@ export default {
.return { .return {
color: #4ea6ff; color: #4ea6ff;
font-size: 14px; font-size: 14px;
margin-top: 5px; margin-top: 13px;
margin-right: 20px; margin-right: 20px;
} }

View File

@@ -163,6 +163,7 @@ const columns = [
key: "operation", key: "operation",
width: 300, width: 300,
align: "center", align: "center",
fixed: "right",
}, },
]; ];

View File

@@ -11,7 +11,7 @@
<div class="fort">起止时间2022-07-21 00:00至2020-10-21 00:00</div> <div class="fort">起止时间2022-07-21 00:00至2020-10-21 00:00</div>
</div> </div>
<div class="right"> <div class="right">
<div class="end"> <div class="end" style="margin-right: 5px">
<div style="margin-top: 20px;margin-left: 10px"> <div style="margin-top: 20px;margin-left: 10px">
<img class="endimg" src="../../assets/images/projectadd/ending.png"/> <img class="endimg" src="../../assets/images/projectadd/ending.png"/>
<span class="endtext">结束项目</span> <span class="endtext">结束项目</span>
@@ -39,23 +39,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="end"> <router-link to="/projectmanage" class="end">
<div style="margin-top: 20px;margin-left: 10px;margin-right:30px"> <div style="margin-top: 20px;margin-left: 10px;margin-right:30px">
<img class="ending" src="../../assets/images/leveladd/back.png" /> <img class="ending" src="../../assets/images/leveladd/back.png" />
<span class="endtext" style="color:#4EA6FF">返回</span> <span class="endtext" style="color:#4EA6FF">返回</span>
</div> </div>
</div> </router-link>
</div> </div>
</div> </div>
<div class="split"></div> <div class="split" style="flex-shrink: 0;"></div>
<div class="content"> <div class="content">
<a-tabs class="tab" <a-tabs class="tab"
v-model:activeKey="activeKey" v-model:activeKey="activeKey"
size="large" size="large"
:tabBarStyle="{ marginLeft: '10px' }"> :tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }">
<a-tab-pane key="2" tab="概览">Content of Tab Pane 1</a-tab-pane> <a-tab-pane key="1" tab="概览"><div class="split"></div></a-tab-pane>
<a-tab-pane key="1" tab="任务" force-render> <a-tab-pane key="2" tab="任务" force-render>
<div class="split"></div>
<div class="onerow"> <div class="onerow">
<div class="taskmain">任务大纲</div> <div class="taskmain">任务大纲</div>
<button class="btn">批量面授报名</button> <button class="btn">批量面授报名</button>
@@ -65,7 +65,7 @@
</div> </div>
</div> </div>
<div class="stage"> <div class="stage">
<span class="stageimg"><img src="../../assets/images/projectadd/close.png"/></span> <span class="stageimg"><img src="../../assets/images/projectadd/open.png"/></span>
<span class="stagename">阶段1腾飞班阶级1</span> <span class="stagename">阶段1腾飞班阶级1</span>
</div> </div>
<div class="course"> <div class="course">
@@ -333,21 +333,27 @@
} }
.content { .content {
//display: flex; //display: flex;
margin: 0 37px; //margin: 0 37px;
.ant-tabs-nav-wrap {
margin-left: 30px;
}
.onerow { .onerow {
width: 100%; //width: 100%;
display: flex; display: flex;
height: 40px; height: 40px;
position: relative; position: relative;
//margin-top: 5xp; margin-top: 15px;
margin-left: 38px;
//margin-right: 38px;
.taskmain { .taskmain {
font-size: 18px; font-size: 18px;
padding-top: 7px;
color: #000000; color: #000000;
} }
.btn { .btn {
position: absolute; position: absolute;
top: 0; top: 0;
right: 110px; right: 168px;
background-color: #409EFF; background-color: #409EFF;
width: 130px; width: 130px;
height: 40px; height: 40px;
@@ -358,7 +364,7 @@
} }
.edit { .edit {
position: absolute; position: absolute;
right: 0; right: 48px;
top: 0; top: 0;
color: #409EFF; color: #409EFF;
width: 100px; width: 100px;
@@ -391,6 +397,8 @@
background-color: #EFF4FC; background-color: #EFF4FC;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
margin-left: 38px;
margin-right: 38px;
.stageimg { .stageimg {
margin-left: 31px; margin-left: 31px;
} }
@@ -402,11 +410,13 @@
} }
} }
.course { .course {
width: 100%; //width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
margin-left: 38px;
margin-right: 38px;
//margin: 0 12px; //margin: 0 12px;
border: 1px solid #F2F6FC; border: 1px solid #F2F6FC;
.first { .first {

View File

@@ -69,7 +69,9 @@
@expand="expandTable" @expand="expandTable"
:pagination="false" :pagination="false"
/> />
<div class="pa">
</div>
<div class="pa">
<a-pagination <a-pagination
showSizeChanger="true" showSizeChanger="true"
showQuickJumper="true" showQuickJumper="true"
@@ -79,7 +81,6 @@
:total="tableDataTotal" :total="tableDataTotal"
class="pagination" class="pagination"
/> />
</div>
</div> </div>
<!-- 表格 --> <!-- 表格 -->
<div :class="out ? 'out' : 'unout'"> <div :class="out ? 'out' : 'unout'">
@@ -354,6 +355,7 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//align-items: center;
position: relative; position: relative;
// position: relative; // position: relative;
.filter { .filter {
@@ -451,6 +453,7 @@ export default {
.tableBox { .tableBox {
margin: 20px 38px 30px ; margin: 20px 38px 30px ;
display: flex; display: flex;
flex: 1;
//position: relative; //position: relative;
flex-direction: column; flex-direction: column;
@@ -463,17 +466,20 @@ export default {
> td { > td {
background: #f6f9fd; background: #f6f9fd;
} }
.pa {
left: 0; }
.pa {
width: 100%; width: 100%;
// height: 20px; // height: 20px;
// background-color: red; // background-color: red;
display: flex; display: flex;
justify-content: center; justify-content: center;
//position: absolute; //position: absolute;
//bottom: 20px; margin-bottom: 20px;
.pagination {
margin-bottom: 20px;
}
} }
}
.out { .out {
display: block; display: block;
position: absolute; position: absolute;
@@ -540,7 +546,7 @@ export default {
border-radius: 5px; border-radius: 5px;
// height: 120%; // height: 120%;
width: 100%; width: 100%;
height: 40px; height: 30px;
} }
} }
} }