mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-07 01:46:43 +08:00
Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage
This commit is contained in:
岳佳鑫
11
package-lock.json
generated
11
package-lock.json
generated
@@ -11,6 +11,7 @@
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.2.17",
|
||||
"jquery": "^3.6.1",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuex": "^4.0.0"
|
||||
@@ -6824,6 +6825,11 @@
|
||||
"@sideway/pinpoint": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
|
||||
"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
|
||||
},
|
||||
"node_modules/js-message": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
|
||||
@@ -16576,6 +16582,11 @@
|
||||
"@sideway/pinpoint": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
|
||||
"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
|
||||
},
|
||||
"js-message": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.2.17",
|
||||
"jquery": "^3.6.1",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuex": "^4.0.0"
|
||||
|
||||
BIN
src/assets/images/basicinfo/asterisk.png
Normal file
BIN
src/assets/images/basicinfo/asterisk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
BIN
src/assets/images/basicinfo/close.png
Normal file
BIN
src/assets/images/basicinfo/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 695 B |
BIN
src/assets/images/leveladd/back.png
Normal file
BIN
src/assets/images/leveladd/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/leveladd/ma.png
Normal file
BIN
src/assets/images/leveladd/ma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 595 B |
BIN
src/assets/images/leveladd/more.png
Normal file
BIN
src/assets/images/leveladd/more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/leveladd/pub.png
Normal file
BIN
src/assets/images/leveladd/pub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -42,6 +42,17 @@ export default {
|
||||
},
|
||||
];
|
||||
}
|
||||
if (n === "/leveladd" || n === "/LevelAdd") {
|
||||
state.list = [
|
||||
{
|
||||
name: "学习路径",
|
||||
href: "/learningpath",
|
||||
},
|
||||
{
|
||||
name: "创建关卡",
|
||||
},
|
||||
];
|
||||
}
|
||||
if (n === "/projectmanage" || n === "/ProjectManage") {
|
||||
state.list = [
|
||||
{
|
||||
@@ -66,6 +77,7 @@ export default {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
if (n === "/templatelibrary" || n === "/TemplateLibrary") {
|
||||
state.list = [
|
||||
{
|
||||
@@ -99,12 +111,19 @@ export default {
|
||||
},
|
||||
];
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
if (n === "/researchmanage" || n === "/ResearchManage") {
|
||||
state.list = [
|
||||
{
|
||||
name: "调研管理",
|
||||
href: "",
|
||||
// href: "#/researchmanage",
|
||||
=======
|
||||
if (n === "/systemmanage" || n === "/SystemManage") {
|
||||
state.list = [
|
||||
{
|
||||
name: "系统管理",
|
||||
>>>>>>> e4c5bddd27044684b5bca09f3451b40713469f3a
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
src="../assets/images/navleft/system.png"
|
||||
/>
|
||||
</div>
|
||||
<span>系统管理</span>
|
||||
<router-link to="/systemmanage">系统管理</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
@@ -251,6 +251,12 @@ export default {
|
||||
selectedKeys: "sub1",
|
||||
pagename: "学习路径",
|
||||
},
|
||||
{
|
||||
href: "/leveladd",
|
||||
openKeys: "sub1",
|
||||
selectedKeys: "sub1",
|
||||
pagename: "创建关卡",
|
||||
},
|
||||
{
|
||||
href: "/projectmanage",
|
||||
openKeys: "sub2",
|
||||
@@ -281,6 +287,12 @@ export default {
|
||||
selectedKeys: "sub3-2",
|
||||
pagename: "课程管理",
|
||||
},
|
||||
{
|
||||
href: "/systemmanage",
|
||||
openKeys: "sub9",
|
||||
selectedKeys: "sub9",
|
||||
pagename: "系统管理",
|
||||
},
|
||||
{
|
||||
href: "/researchmanage",
|
||||
openKeys: "sub5",
|
||||
|
||||
@@ -79,6 +79,7 @@ export default {
|
||||
overflow-x: auto;
|
||||
.openItems {
|
||||
width: 272px;
|
||||
// min-width: 250px;
|
||||
height: 50px;
|
||||
border: 1px solid #edf2fa;
|
||||
border-left: 0px;
|
||||
|
||||
245
src/views/TestPage.vue
Normal file
245
src/views/TestPage.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="testPage">
|
||||
<h2>div横向拖拽排序</h2>
|
||||
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li class="drag"><a href="#">导航一</a></li>
|
||||
<li class="drag"><a href="#">导航二导航</a></li>
|
||||
<li class="drag"><a href="#">导航导航导航三</a></li>
|
||||
<li class="drag"><a href="#">导航导航四</a></li>
|
||||
<li class="drag"><a href="#">导五</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import $ from "jquery";
|
||||
export default {
|
||||
name: "TestPage",
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
var range = { x: 0, y: 0 }; //鼠标元素偏移量
|
||||
var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
|
||||
|
||||
var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化
|
||||
|
||||
var theDiv = null,
|
||||
move = false;
|
||||
|
||||
var choose = false; //拖拽对象 拖拽状态 选中状态
|
||||
|
||||
// var theDivId = 0;
|
||||
// var theDivHeight = 0;
|
||||
var theDivHalf = 0;
|
||||
|
||||
// var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
|
||||
|
||||
var tarDiv = null,
|
||||
tarFirst,
|
||||
tempDiv; //要插入的目标元素的对象, 临时的虚线对象
|
||||
|
||||
var initPos = { x: 0, y: 0 };
|
||||
|
||||
var theDivWidth; //拖拽对象的宽度
|
||||
|
||||
$(".drag").each(function () {
|
||||
$(this).mousedown(function (event) {
|
||||
choose = true;
|
||||
|
||||
//拖拽对象
|
||||
|
||||
theDiv = $(this);
|
||||
|
||||
//记录拖拽元素初始位置
|
||||
|
||||
initPos.x = theDiv.position().left;
|
||||
|
||||
initPos.y = theDiv.position().top;
|
||||
|
||||
//鼠标元素相对偏移量
|
||||
|
||||
range.x = event.pageX - theDiv.position().left;
|
||||
|
||||
range.y = event.pageY - theDiv.position().top;
|
||||
|
||||
// theDivId = theDiv.index();
|
||||
|
||||
theDivWidth = theDiv.width();
|
||||
|
||||
theDivHalf = theDivWidth / 2;
|
||||
|
||||
theDiv.removeClass("drag");
|
||||
|
||||
theDiv.addClass("drag-dash");
|
||||
|
||||
theDiv.css({ left: initPos.x + "px", top: initPos.y + "px" });
|
||||
|
||||
// 创建新元素 插入拖拽元素之前的位置(虚线框)
|
||||
|
||||
$("<div class='dash'></div>").insertBefore(theDiv);
|
||||
|
||||
tempDiv = $(".dash");
|
||||
|
||||
$(".dash").css("width", theDivWidth);
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
$(document)
|
||||
.mouseup(function () {
|
||||
if (!choose) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!move) {
|
||||
//恢复对象的初始样式
|
||||
|
||||
theDiv.removeClass("drag-dash");
|
||||
|
||||
theDiv.addClass("drag");
|
||||
|
||||
tempDiv.remove(); // 删除新建的虚线div
|
||||
|
||||
choose = false;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
|
||||
|
||||
//恢复对象的初始样式
|
||||
|
||||
theDiv.removeClass("drag-dash");
|
||||
|
||||
theDiv.addClass("drag");
|
||||
|
||||
tempDiv.remove(); // 删除新建的虚线div
|
||||
|
||||
move = false;
|
||||
|
||||
choose = false;
|
||||
|
||||
return false;
|
||||
})
|
||||
.mousemove(function (event) {
|
||||
if (!choose) {
|
||||
return false;
|
||||
}
|
||||
|
||||
move = true;
|
||||
|
||||
lastPos.x = event.pageX - range.x;
|
||||
|
||||
lastPos.y = event.pageY - range.y;
|
||||
|
||||
lastPos.x1 = lastPos.x + theDivWidth;
|
||||
|
||||
// 拖拽元素随鼠标移动
|
||||
|
||||
theDiv.css({ left: lastPos.x + "px", top: lastPos.y + "px" });
|
||||
|
||||
// 拖拽元素随鼠标移动 查找插入目标元素
|
||||
|
||||
var $main = $(".drag"); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
|
||||
|
||||
$main.each(function () {
|
||||
tarDiv = $(this);
|
||||
|
||||
tarPos.x = tarDiv.position().left;
|
||||
|
||||
tarPos.y = tarDiv.position().top;
|
||||
|
||||
tarPos.x1 = tarPos.x + tarDiv.width() / 2;
|
||||
|
||||
tarFirst = $main.eq(0); // 获得第一个元素\
|
||||
|
||||
let tarFirstX = tarFirst.position().left + theDivHalf; // 第一个元素对象的中心纵坐标
|
||||
|
||||
//拖拽对象 移动到第一个位置
|
||||
|
||||
if (lastPos.x <= tarFirstX) {
|
||||
tempDiv.insertBefore(tarFirst);
|
||||
}
|
||||
|
||||
//判断要插入目标元素的 坐标后， 直接插入
|
||||
|
||||
if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
|
||||
tempDiv.insertAfter(tarDiv);
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.testPage {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
|
||||
overflow-x: auto;
|
||||
.box {
|
||||
position: relative;
|
||||
|
||||
margin-left: 15px;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
padding-right: 0px;
|
||||
|
||||
width: 810px;
|
||||
|
||||
border: blue solid 1px;
|
||||
}
|
||||
|
||||
.box ul {
|
||||
list-style: none;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: 0;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drag {
|
||||
float: left;
|
||||
|
||||
border: #000 solid 1px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box ul li a {
|
||||
display: block;
|
||||
|
||||
padding: 10px 25px;
|
||||
}
|
||||
|
||||
.drag-dash {
|
||||
position: absolute;
|
||||
|
||||
border: #000 solid 1px;
|
||||
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.dash {
|
||||
float: left;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -71,6 +71,7 @@
|
||||
:data-source="tableData"
|
||||
:loading="tableDataTotal === -1 ? true : false"
|
||||
expandRowByClick="true"
|
||||
:scroll="{ x: 1600, y: 800 }"
|
||||
@expand="expandTable"
|
||||
:pagination="
|
||||
tableDataTotal > 10
|
||||
@@ -319,7 +320,10 @@ export default {
|
||||
发布
|
||||
</span>
|
||||
<span style={{ "margin-left": "25px" }}>编辑</span>
|
||||
<span style={{ "margin-left": "25px" }}>关卡</span>
|
||||
<router-link to="/leveladd">
|
||||
<span style={{ "margin-left": "25px" }}>关卡</span>
|
||||
</router-link>
|
||||
|
||||
<span style={{ "margin-left": "25px" }} class="more">
|
||||
<span>授权</span>
|
||||
<div class="moreArrow"></div>
|
||||
|
||||
555
src/views/learningpath/LevelAdd.vue
Normal file
555
src/views/learningpath/LevelAdd.vue
Normal file
@@ -0,0 +1,555 @@
|
||||
<template>
|
||||
<div class="addwrapper">
|
||||
<div class="addhead">
|
||||
<div class="leftimg">
|
||||
<img class="img" src="../../assets/px.jpg" />
|
||||
</div>
|
||||
<div class="imgfor">
|
||||
<div class="forz">产品经理进阶路径</div>
|
||||
<div class="fort">创建时间：2022-07-21 00:00</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img class="img1" src="../../assets/images/leveladd/ma.png" />
|
||||
<div class="line"></div>
|
||||
<img class="img2" src="../../assets/images/leveladd/pub.png" />
|
||||
<div class="pub">发布</div>
|
||||
<div class="line"></div>
|
||||
<img
|
||||
style="margin-right: 15px"
|
||||
class="img2"
|
||||
src="../../assets/images/leveladd/more.png"
|
||||
/>
|
||||
<div class="more">
|
||||
<span style="color: #7096e3">更多</span>
|
||||
<div class="moreArrow"></div>
|
||||
<div class="moreItems">
|
||||
<div class="sammo">撤回</div>
|
||||
<div class="sammo">复制</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<img class="img2" src="../../assets/images/leveladd/back.png" />
|
||||
<router-link to="/learningpath">
|
||||
<div class="return">返回</div></router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="split"></div>
|
||||
<div class="bom clearfix">
|
||||
<a-tabs
|
||||
class="tab"
|
||||
v-model:activeKey="activeKey"
|
||||
size="large"
|
||||
:tabBarStyle="{ marginLeft: '10px' }"
|
||||
>
|
||||
<a-tab-pane key="1" tab="路径管理">
|
||||
<div class="cont">
|
||||
<div class="pad"></div>
|
||||
<div class="sametab">
|
||||
<div class="Lhead">
|
||||
<a-input
|
||||
v-model:value="value"
|
||||
style="width: 270px; height: 40px; border-radius: 8px"
|
||||
placeholder="关卡名称"
|
||||
/>
|
||||
<div class="btns">
|
||||
<div class="btn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
|
||||
<div class="btn btn3" @click="handleOut">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">创建关卡</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Lbom">
|
||||
<div class="item" v-for="item in level" :key="item.id">
|
||||
<div class="itemhead">
|
||||
<div class="lev">{{ item.lev }}</div>
|
||||
<div class="lin"></div>
|
||||
<div class="nam">{{ item.name }}</div>
|
||||
<div class="count">
|
||||
<span>当前关卡</span>
|
||||
<span>{{ item.count }}</span>
|
||||
<span>个人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="itembomm">
|
||||
<div class="it">
|
||||
<div class="on" style="color: #ffb145">
|
||||
{{ item.online }}
|
||||
</div>
|
||||
<div class="ittext">在线</div>
|
||||
</div>
|
||||
<div class="linee"></div>
|
||||
<div class="it">
|
||||
<div class="on" style="color: #ff89a4">
|
||||
{{ item.homework }}
|
||||
</div>
|
||||
<div class="ittext">作业</div>
|
||||
</div>
|
||||
<div class="linee"></div>
|
||||
<div class="it">
|
||||
<div class="on" style="color: #3fc5e3">
|
||||
{{ item.juan }}
|
||||
</div>
|
||||
<div class="ittext">问卷</div>
|
||||
</div>
|
||||
<div class="linee"></div>
|
||||
<div class="it">
|
||||
<div class="on" style="color: #5be1c0">
|
||||
{{ item.ballot }}
|
||||
</div>
|
||||
<div class="ittext">投票</div>
|
||||
</div>
|
||||
<div class="linee"></div>
|
||||
<div class="it">
|
||||
<div class="on" style="color: #a498ff">
|
||||
{{ item.test }}
|
||||
</div>
|
||||
<div class="ittext">考试</div>
|
||||
</div>
|
||||
<div class="linee"></div>
|
||||
<div class="itright">
|
||||
<span class="te">编辑</span>
|
||||
<span class="more">
|
||||
<span class="te" style="margin-left: 20px">更多</span>
|
||||
<div class="moreArrow"></div>
|
||||
<div class="moreItems"></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pad"></div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="学员管理" force-render
|
||||
><div class="sametab">ccc</div></a-tab-pane
|
||||
>
|
||||
<a-tab-pane key="3" tab="设置">
|
||||
<div class="sametab">eee</div></a-tab-pane
|
||||
>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "LevelAdd",
|
||||
components: {},
|
||||
methods: {},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
activeKey: ref("1"),
|
||||
value: ref(" "),
|
||||
level: [
|
||||
{
|
||||
id: 1,
|
||||
lev: "关卡2",
|
||||
name: "中级产品经理",
|
||||
count: 3,
|
||||
online: 5,
|
||||
homework: 1,
|
||||
juan: 1,
|
||||
ballot: 1,
|
||||
test: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
lev: "关卡2",
|
||||
name: "初级产品经理",
|
||||
count: 3,
|
||||
online: 5,
|
||||
homework: 1,
|
||||
juan: 1,
|
||||
ballot: 1,
|
||||
test: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" >
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.addwrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: green;
|
||||
.addhead {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
// background-color: lightgreen;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.leftimg {
|
||||
width: 151px;
|
||||
height: 100px;
|
||||
border: 10px solid #e7f2ff;
|
||||
border-radius: 8px;
|
||||
margin-left: 20px;
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.imgfor {
|
||||
margin-left: 32px;
|
||||
.forz {
|
||||
color: #363636;
|
||||
font-size: 16px;
|
||||
}
|
||||
.fort {
|
||||
color: #878b92;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1030px) {
|
||||
.imgfor {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
// width: 500px;
|
||||
height: 100%;
|
||||
// background-color: red;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img1 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.line {
|
||||
height: 65%;
|
||||
width: 1px;
|
||||
background-color: #e8effa;
|
||||
margin-right: 28px;
|
||||
}
|
||||
.img2 {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-right: 22px;
|
||||
}
|
||||
.pub {
|
||||
color: #ffb64e;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.return {
|
||||
color: #4ea6ff;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
.more {
|
||||
position: relative;
|
||||
margin-right: 30px;
|
||||
|
||||
.moreArrow {
|
||||
width: 13px;
|
||||
height: 7px;
|
||||
display: inline-block;
|
||||
background-image: url("../../assets/images/navtop/down.png");
|
||||
background-size: 100%;
|
||||
margin: 2px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.moreItems {
|
||||
width: 110px;
|
||||
height: 80px;
|
||||
display: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
|
||||
// border-radius: 3px;
|
||||
border: 0px solid #dcdcdc;
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
top: 28px;
|
||||
z-index: 100;
|
||||
.sammo {
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.sammo:hover {
|
||||
color: #4ea6ff;
|
||||
}
|
||||
}
|
||||
.moreItems:hover {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1240px) {
|
||||
.line {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.img1 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.img2 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.return {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.pub {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.more:hover .moreArrow {
|
||||
background-image: url("../../assets/images/navtop/up.png");
|
||||
}
|
||||
.more:hover .moreItems {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.split {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #edf0f5;
|
||||
}
|
||||
.bom {
|
||||
.tab {
|
||||
margin-top: 10px;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
.cont {
|
||||
display: flex;
|
||||
.pad {
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
background-color: red;
|
||||
}
|
||||
.sametab {
|
||||
// margin-left: 30px;
|
||||
// margin-right: 30px;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
// background-color: green;
|
||||
.Lhead {
|
||||
display: flex;
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(64, 158, 255, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 14px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
.search {
|
||||
background-size: 100%;
|
||||
}
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search1.png");
|
||||
}
|
||||
}
|
||||
.btn2 {
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add1.png");
|
||||
}
|
||||
}
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/reset0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.btn3:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Lbom {
|
||||
position: relative;
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
// background-color: green;
|
||||
margin-top: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f4fe;
|
||||
.itemhead {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background-color: #f0f4fe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.lev {
|
||||
margin-left: 27px;
|
||||
margin-right: 16px;
|
||||
line-height: 100%;
|
||||
color: #409eff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.lin {
|
||||
width: 1px;
|
||||
height: 35%;
|
||||
background-color: #c7cbd2;
|
||||
}
|
||||
.nam {
|
||||
margin-left: 16px;
|
||||
color: #4f5156;
|
||||
line-height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.count {
|
||||
position: absolute;
|
||||
line-height: 100%;
|
||||
color: #4f5156;
|
||||
font-size: 14px;
|
||||
right: 40px;
|
||||
span:nth-child(2) {
|
||||
color: #63ca8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itembomm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
.it {
|
||||
// margin-left: 110px;
|
||||
// margin-right: 110px;
|
||||
width: 13%;
|
||||
text-align: center;
|
||||
.on {
|
||||
font-size: 30px;
|
||||
}
|
||||
.ittext {
|
||||
color: #4f5156;
|
||||
margin-top: 16px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
.linee {
|
||||
background-color: #ecf2fb;
|
||||
width: 1px;
|
||||
height: 55%;
|
||||
}
|
||||
.itright {
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
.te {
|
||||
color: #4ea6ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
position: relative;
|
||||
.moreArrow {
|
||||
width: 13px;
|
||||
height: 7px;
|
||||
display: inline-block;
|
||||
background-image: url("../../assets/images/navtop/down.png");
|
||||
background-size: 100%;
|
||||
margin: 2px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.moreItems {
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
display: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 3px;
|
||||
border: 0px solid #dcdcdc;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 18px;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
.more:hover .moreArrow {
|
||||
background-image: url("../../assets/images/navtop/up.png");
|
||||
}
|
||||
.more:hover .moreItems {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="systemManage">
|
||||
<div
|
||||
style="
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
background: #388be1;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="showDrawer"
|
||||
>
|
||||
添加投票
|
||||
</div>
|
||||
<div>
|
||||
<a-drawer
|
||||
v-model:visible="visible"
|
||||
class="drawerStyle"
|
||||
style="color: red"
|
||||
width="70%"
|
||||
title="添加投票"
|
||||
placement="right"
|
||||
@after-visible-change="afterVisibleChange"
|
||||
>
|
||||
<div class="drawerMain">
|
||||
<div class="header">
|
||||
<div class="headerTitle">添加投票</div>
|
||||
<img
|
||||
style="width: 29px; height: 29px; cursor: pointer"
|
||||
src="../../assets/images/basicinfo/close.png"
|
||||
@click="closeDrawer"
|
||||
/>
|
||||
</div>
|
||||
<!-- 投票名称 -->
|
||||
<div class="vote">
|
||||
<div style="font-size: 20px">*</div>
|
||||
<div>投票名称：</div>
|
||||
<div>
|
||||
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 投票名称 -->
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
|
||||
export default {
|
||||
name: "SystemManage",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
visible: true,
|
||||
});
|
||||
|
||||
const afterVisibleChange = (bool) => {
|
||||
console.log("visible", bool);
|
||||
};
|
||||
|
||||
const showDrawer = () => {
|
||||
state.visible = true;
|
||||
};
|
||||
const closeDrawer = () => {
|
||||
state.visible = false;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
afterVisibleChange,
|
||||
showDrawer,
|
||||
closeDrawer,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.systemManage {
|
||||
width: 100%;
|
||||
}
|
||||
.drawerStyle {
|
||||
.ant-drawer-content-wrapper {
|
||||
max-width: 1000px;
|
||||
.ant-drawer-header {
|
||||
display: none !important;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.drawerMain {
|
||||
min-width: 600px;
|
||||
margin: 0px 32px 0px 32px;
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header {
|
||||
height: 73px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.headerTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
.vote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user