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

style：完成创建关卡细节页面设置部分

Browse Source
This commit is contained in:
宋文超
2022-10-09 21:35:44 +08:00
parent 53072721d0
commit 2a327c5c19
2 changed files with 1021 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

520
src/views/courselibrary/CoursewareManage.vue
View File

@@ -6,13 +6,25 @@
<div class="filter">
<div class="filterItems">
<div class="fi_input fitems">
<a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入项目名称" />
<a-input
v-model:value="value"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
/>
</div>
<div class="fi_input fitems">
<a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入名称" />
<a-input
v-model:value="value"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入名称"
/>
</div>
<div class="fi_input fitems">
<a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入所属项目" />
<a-input
v-model:value="value"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入所属项目"
/>
</div>
<div class="select fitems">
<a-select
@@ -69,7 +81,10 @@
</div>
<!-- 新建选择线上还是面授课弹窗 -->
<div class="selectonlineface" :style="{display:of_hs ? 'block' :'none' }">
<div
class="selectonlineface"
:style="{ display: of_hs ? 'block' : 'none' }"
>
<div class="of_header"></div>
<div class="of_main">
<div class="m_header">
@@ -79,27 +94,42 @@
</div>
<div class="m_body">
<div class="b_header">
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
<span style="margin-right:14px;">课程名称</span>
<span style="font-weight: 900; color: red; margin-right: 6px"
>⃰</span
>
<span style="margin-right: 14px">课程名称</span>
<div class="b_input">
<a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入课程名称" />
<a-input
v-model:value="value"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入课程名称"
/>
</div>
</div>
<div class="b_sub">
<div class="bs_header">
<div class="b_left">课程命名规则</div>
<div class="b_right" @click="hideShow">
<div class="b_zk" :style="{display:hideshow ? 'block' :'none' }">
<span style="color: #4EA6FF;">收起</span>
<div
class="b_zk"
:style="{ display: hideshow ? 'block' : 'none' }"
>
<span style="color: #4ea6ff">收起</span>
</div>
<div class="b_sq" :style="{display:hideshow ? 'none' :'block' }">
<span style="color: #4EA6FF;">展开</span>
<div
class="b_sq"
:style="{ display: hideshow ? 'none' : 'block' }"
>
<span style="color: #4ea6ff">展开</span>
</div>
<div class="b_icon"></div>
</div>
</div>
<div class="bl_detail" :style="{display:hideshow ? 'block' :'none' }">
<span style="color: #999BA3;">
<div
class="bl_detail"
:style="{ display: hideshow ? 'block' : 'none' }"
>
<span style="color: #999ba3">
1、课程名称统一不加书名号。<br />
2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
@@ -110,29 +140,33 @@
</div>
</div>
<div class="b_center">
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
<span style="margin-right:14px;">授课形式</span>
<span style="font-weight: 900; color: red; margin-right: 6px"
>⃰</span
>
<span style="margin-right: 14px">授课形式</span>
<div class="bc_boxl">
<div class="ol_checkbox"><div class="checkbtn"></div></div>
<span style="margin:auto 31px auto 5px;">线上</span>
<span style="margin: auto 31px auto 5px">线上</span>
</div>
<div class="bc_boxr" @click="bs_hShow">
<div class="ol_checkbox"><div class="checkbtn"></div></div>
<span style="margin:auto 31px auto 5px;">面授</span>
<span style="margin: auto 31px auto 5px">面授</span>
</div>
</div>
<div class="b_sup" :style="{ display: bs_hs ? 'block' : 'none' }">
<div class="bs_box">
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
<span style="margin-right:14px;">是否设置目录</span>
<span style="font-weight: 900; color: red; margin-right: 6px"
>⃰</span
>
<span style="margin-right: 14px">是否设置目录</span>
<div class="ol_checkbox">
<div class="checkbtn"></div>
</div>
<span style="margin:auto 45px auto 5px;">是</span>
<span style="margin: auto 45px auto 5px">是</span>
<div class="ol_checkbox">
<div class="checkbtn"></div>
</div>
<span style="margin:auto 0px auto 5px;">否</span>
<span style="margin: auto 0px auto 5px">否</span>
</div>
</div>
<div class="b_footer">
@@ -161,27 +195,42 @@
<div class="m_body">
<div class="mb_left">
<div class="mbl_items1">
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
<span style="margin-right:14px;">课程名称</span>
<span style="font-weight: 900; color: red; margin-right: 6px"
>⃰</span
>
<span style="margin-right: 14px">课程名称</span>
<div class="i1_input">
<a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入课程名称" />
<a-input
v-model:value="value"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入课程名称"
/>
</div>
</div>
<div class="mbl_items2">
<div class="i2_top">
<div class="i2_left">课程命名规则</div>
<div class="i2_right" @click="hideShow">
<div class="b_zk" :style="{display:hideshow ? 'block' :'none' }">
<span style="color: #4EA6FF;">收起</span>
<div
class="b_zk"
:style="{ display: hideshow ? 'block' : 'none' }"
>
<span style="color: #4ea6ff">收起</span>
</div>
<div class="b_sq" :style="{display:hideshow ? 'none' :'block' }">
<span style="color: #4EA6FF;">展开</span>
<div
class="b_sq"
:style="{ display: hideshow ? 'none' : 'block' }"
>
<span style="color: #4ea6ff">展开</span>
</div>
<div class="b_icon"></div>
</div>
</div>
<div class="i2_detail" :style="{display:hideshow ? 'block' :'none' }">
<span style="color: #999BA3;">
<div
class="i2_detail"
:style="{ display: hideshow ? 'block' : 'none' }"
>
<span style="color: #999ba3">
1、课程名称统一不加书名号。<br />
2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
@@ -193,8 +242,10 @@
</div>
<div class="mbl_items3">
<div class="i3_top">
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
<span style="margin-right:14px;">封面图</span>
<span style="font-weight: 900; color: red; margin-right: 6px"
>⃰</span
>
<span style="margin-right: 14px">封面图</span>
<div class="i3_upload">
<a-upload
v-model:file-list="fileList"
@@ -216,25 +267,39 @@
</div>
</div>
<div class="i3_bottom">
<span style="color:#999BA3;">高宽比为16:9 (如:800*450) png或jpg图片</span>
<span style="color: #999ba3"
>高宽比为16:9 (如:800*450) png或jpg图片</span
>
</div>
</div>
<div class="mbl_items4">
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
<span style="margin-right:14px;">目标人群</span>
<span style="font-weight: 900; color: red; margin-right: 6px"
>⃰</span
>
<span style="margin-right: 14px">目标人群</span>
<div class="i1_input">
<a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入目标人群" />
<a-input
v-model:value="value"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入目标人群"
/>
</div>
</div>
<div class="mbl_items5">
<span style="margin-right:14px;">课程价值</span>
<span style="margin-right: 14px">课程价值</span>
<div class="i1_input">
<a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入课程价值" />
<a-input
v-model:value="value"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入课程价值"
/>
</div>
</div>
<div class="mbl_items6">
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
<span style="margin-right:14px;">内容分类</span>
<span style="font-weight: 900; color: red; margin-right: 6px"
>⃰</span
>
<span style="margin-right: 14px">内容分类</span>
<div class="select i6_input">
<a-select
dropdownClassName="dropdown-style"
@@ -247,7 +312,7 @@
</div>
</div>
<div class="mbl_items7">
<span style="margin-right:14px;">场景</span>
<span style="margin-right: 14px">场景</span>
<div class="select i7_input">
<a-select
dropdownClassName="dropdown-style"
@@ -261,9 +326,13 @@
</div>
<div class="mbl_items8">
<div class="i8_top">
<span style="margin-right:14px;">内容标签</span>
<span style="margin-right: 14px">内容标签</span>
<div class="i1_input">
<a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入按回车键创建成功" />
<a-input
v-model:value="value"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入按回车键创建成功"
/>
</div>
</div>
<div class="i8_bottom">
@@ -274,23 +343,33 @@
</div>
<div class="mb_right">
<div class="mbl_items9">
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
<span style="margin-right:14px;">授课教师</span>
<span style="font-weight: 900; color: red; margin-right: 6px"
>⃰</span
>
<span style="margin-right: 14px">授课教师</span>
<div class="i1_input">
<a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入" />
<a-input
v-model:value="value"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入"
/>
</div>
</div>
<div class="mbl_items10">
<span style="margin-right:14px;">课程简介</span>
<span style="margin-right: 14px">课程简介</span>
<div class="i10_textarea">
<a-textarea v-model:value="value" style="width: 440px ;height:100px;border-radius: 8px; " placeholder="请输入" />
<a-textarea
v-model:value="value"
style="width: 440px; height: 100px; border-radius: 8px"
placeholder="请输入"
/>
</div>
</div>
<div class="mbl_items11">
<div class="i11_top">
<span style="margin-right: 10px;">附件</span>
<span style="margin-right: 10px">附件</span>
<div class="accessory_icon"></div>
<span style="color:#4EA6FF;">添加附件</span>
<span style="color: #4ea6ff">添加附件</span>
</div>
</div>
</div>
@@ -313,130 +392,148 @@
</div>
</template>
<script>
import { reactive, toRefs, defineComponent, ref } from 'vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
const columns = [{
title: '序号',
import { reactive, toRefs, defineComponent, ref } from "vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
const columns = [
{
title: "序号",
width: 200,
dataIndex: 'num',
key: 'num',
dataIndex: "num",
key: "num",
align: "center",
}, {
title: '名称',
},
{
title: "名称",
width: 200,
dataIndex: 'name',
key: 'name',
}, {
title: '内容分类',
dataIndex: "name",
key: "name",
},
{
title: "内容分类",
width: 200,
dataIndex: 'content',
key: '1',
dataIndex: "content",
key: "1",
align: "center",
}, {
title: '课程形式',
},
{
title: "课程形式",
width: 200,
dataIndex: 'courseform',
key: '2',
dataIndex: "courseform",
key: "2",
align: "center",
}, {
title: ' 所属项目',
},
{
title: " 所属项目",
width: 300,
dataIndex: 'project',
key: '3',
dataIndex: "project",
key: "3",
align: "center",
}, {
title: '学习人数',
},
{
title: "学习人数",
width: 200,
dataIndex: 'stunum',
key: '4',
dataIndex: "stunum",
key: "4",
align: "center",
}, {
title: '评分',
},
{
title: "评分",
width: 200,
dataIndex: 'grade',
key: '5',
dataIndex: "grade",
key: "5",
align: "center",
}, {
title: '状态',
},
{
title: "状态",
width: 200,
dataIndex: 'status',
key: '6',
dataIndex: "status",
key: "6",
align: "center",
}, {
title: '是否发布',
},
{
title: "是否发布",
width: 200,
dataIndex: 'ynpub',
key: '7',
dataIndex: "ynpub",
key: "7",
align: "center",
}, {
title: '创建人',
},
{
title: "创建人",
width: 200,
dataIndex: 'creator',
key: '8',
dataIndex: "creator",
key: "8",
align: "center",
}, {
title: '创建时间',
},
{
title: "创建时间",
width: 280,
dataIndex: 'createtime',
key: '9',
dataIndex: "createtime",
key: "9",
align: "center",
}, {
title: '上线时间',
},
{
title: "上线时间",
width: 280,
dataIndex: 'pubtime',
key: '10',
dataIndex: "pubtime",
key: "10",
align: "center",
}, {
title: '是否停用',
},
{
title: "是否停用",
width: 200,
key: 'either',
dataIndex: 'ynuse',
key: "either",
dataIndex: "ynuse",
align: "center",
}, {
title: '操作',
},
{
title: "操作",
width: 400,
key: 'operation',
fixed: 'right',
key: "operation",
fixed: "right",
align: "center",
}];
const data = [{
key: '1',
},
];
const data = [
{
key: "1",
num: 1,
name: '时间管理',
content: '领导力',
courseform: '线上',
project: '管理者进阶-腾飞班1',
stunum: '50',
grade: '5',
status: '未提交',
ynpub: '未发布',
creator: '管理员',
createtime: '2022-07-20 9:30',
pubtime: '2022-07-20 9:30',
ynuse: '启用',
name: "时间管理",
content: "领导力",
courseform: "线上",
project: "管理者进阶-腾飞班1",
stunum: "50",
grade: "5",
status: "未提交",
ynpub: "未发布",
creator: "管理员",
createtime: "2022-07-20 9:30",
pubtime: "2022-07-20 9:30",
ynuse: "启用",
kkty: false,
}, {
key: '2',
},
{
key: "2",
num: 2,
name: '智能制造初级课程',
content: '专业力',
courseform: '线上',
project: '-',
stunum: '200',
grade: '5',
status: '待审核',
ynpub: '未发布',
creator: '管理员',
createtime: '2022-07-20 9:30',
pubtime: '2022-07-20 9:30',
ynuse: '启用',
name: "智能制造初级课程",
content: "专业力",
courseform: "线上",
project: "-",
stunum: "200",
grade: "5",
status: "待审核",
ynpub: "未发布",
creator: "管理员",
createtime: "2022-07-20 9:30",
pubtime: "2022-07-20 9:30",
ynuse: "启用",
kkty: true,
}];
},
];
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
}
export default defineComponent({
@@ -448,39 +545,40 @@ export default defineComponent({
setup() {
const fileList = ref([]);
const loading = ref(false);
const imageUrl = ref('');
const imageUrl = ref("");
const handleChange = info => {
if (info.file.status === 'uploading') {
const handleChange = (info) => {
if (info.file.status === "uploading") {
loading.value = true;
return;
}
if (info.file.status === 'done') {
if (info.file.status === "done") {
// Get this url from response in real world.
getBase64(info.file.originFileObj, base64Url => {
getBase64(info.file.originFileObj, (base64Url) => {
imageUrl.value = base64Url;
loading.value = false;
});
}
if (info.file.status === 'error') {
if (info.file.status === "error") {
loading.value = false;
message.error('upload error');
message.error("upload error");
}
};
const beforeUpload = file => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
const beforeUpload = (file) => {
const isJpgOrPng =
file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
message.error('You can only upload JPG file!');
message.error("You can only upload JPG file!");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
message.error("Image must smaller than 2MB!");
}
return isJpgOrPng && isLt2M;
@@ -495,38 +593,48 @@ export default defineComponent({
};
},
data() {
const options1 = ref([ {
value: 'value1',
label: '请选择状态',
},{
value: 'uncommitted',
label: '未提交',
}, {
value: 'tocheck',
label: '待审核',
}, {
value: 'checked',
label: '已审核',
}, {
value: 'uncheck',
label: '审核未通过',
}]);
const options1 = ref([
{
value: "value1",
label: "请选择状态",
},
{
value: "uncommitted",
label: "未提交",
},
{
value: "tocheck",
label: "待审核",
},
{
value: "checked",
label: "已审核",
},
{
value: "uncheck",
label: "审核未通过",
},
]);
const options2 = ref([{
value: 'value2',
label: '请选择内容分类',
}, {
value: 'leadership',
label: '领导力',
}, {
value: 'ingeneral',
label: '通用力',
}, {
value: 'profession',
label: '专业力',
}]);
const options2 = ref([
{
value: "value2",
label: "请选择内容分类",
},
{
value: "leadership",
label: "领导力",
},
{
value: "ingeneral",
label: "通用力",
},
{
value: "profession",
label: "专业力",
},
]);
const state = reactive({
of_hs: false,
@@ -536,30 +644,30 @@ export default defineComponent({
const of_hShow = () => {
if (state.of_hs == false) {
state.of_hs = true
}
state.of_hs = true;
}
};
const hideShow = () => {
if (state.hideshow == false) {
state.hideshow = true
state.hideshow = true;
} else {
state.hideshow = false
}
state.hideshow = false;
}
};
const bs_hShow = () => {
if (state.bs_hs == true) {
state.bs_hs = false
state.bs_hs = false;
} else {
state.bs_hs = true
}
state.bs_hs = true;
}
};
const createft = () => {
if (state.bs_hs == false) {
state.of_hs = false
}
state.of_hs = false;
}
};
return {
...toRefs(state),
data,
@@ -573,7 +681,6 @@ export default defineComponent({
};
},
});
</script>
<style lang="scss">
// .dropdown-style{
@@ -706,7 +813,7 @@ export default defineComponent({
z-index: 1000;
width: 679px;
height: 525px;
background: #FFFFFF;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: 50%;
@@ -716,7 +823,10 @@ export default defineComponent({
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.of_main {
width: calc(100%);
@@ -745,8 +855,8 @@ export default defineComponent({
.checkbtn {
width: 7.8px;
height: 7.8px;
border: 1px solid #4EA6FF;
background-color: #4EA6FF;
border: 1px solid #4ea6ff;
background-color: #4ea6ff;
border-radius: 50%;
}
.ol_checkbox {
@@ -780,7 +890,8 @@ export default defineComponent({
display: flex;
align-items: center;
margin: 21px auto 14px 80px;
.bc_boxl,.bc_boxr{
.bc_boxl,
.bc_boxr {
display: flex;
align-items: center;
}
@@ -815,10 +926,10 @@ export default defineComponent({
}
.btn5 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4EA6FF ;
color: #4ea6ff;
}
.btn6 {
background-color: #4EA6FF;
background-color: #4ea6ff;
color: #ffffff;
}
}
@@ -827,12 +938,12 @@ export default defineComponent({
}
.faceteach {
// display: none;
display: none;
z-index: 1000;
width: 1358px;
min-width: 1000px;
height: 805px;
background: #FFFFFF;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: 50%;
@@ -842,7 +953,10 @@ export default defineComponent({
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.ft_main {
width: calc(100%);
@@ -964,7 +1078,7 @@ export default defineComponent({
.accessory_icon {
width: 15px;
height: 15px;
background-color: #4EA6FF;
background-color: #4ea6ff;
margin-right: 6px;
}
}

246
src/views/learningpath/LevelAdd.vue
View File

@@ -134,7 +134,10 @@
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="学员管理" force-render
><div class="sametab">
><div class="sametab"></div
></a-tab-pane>
<a-tab-pane key="3" tab="设置">
<div class="sametab">
<div class="Gcon">
<div class="pad"></div>
<div class="Gin">
@@ -143,14 +146,111 @@
<div class="onetitle">关卡内容可见可学设置</div>
<div class="oneedi">编辑</div>
</div>
<div class="onemain">fewfew</div>
<div class="onemain clearfix">
<div class="checkcon">
<input
type="checkbox"
name="cb1"
value="yulan"
class="in"
/>
<span class="yulan">预览其他关卡</span><br />
<div style="width: 10px; height: 4px"></div>
<span class="yulan2">学员可预览第</span
><span style="color: #4ea6ff">1</span><span>关-第</span
><span style="color: #4ea6ff">4</span><span>关内容</span>
</div>
<div class="checkcon" style="margin-top: 20px">
<input
type="checkbox"
name="cb1"
value="xuexi"
class="in"
/>
<span class="yulan">学习其他关卡</span><br />
<div style="width: 10px; height: 4px"></div>
<span class="yulan2">学员可预览第</span
><span style="color: #4ea6ff">1</span><span>关-第</span
><span style="color: #4ea6ff">4</span><span>关内容</span>
</div>
<br />
</div>
</div>
</div>
<div class="Gcon">
<div class="pad"></div>
<div class="Gin" style="margin-top: 0px">
<div class="headone">
<div class="box"></div>
<div class="onetitle">关卡晋级规则</div>
</div>
<div class="twomain">
<a-switch size="small" v-model:checked="checked2" />
<span class="info">启用关卡自动规则加入</span>
<div class="infor">
若开启“新建/编辑关卡-添加学员”支持设定自动加入规则，将于每日8点同步数据
</div>
<div :class="[checked2 ? 'chooseshow' : 'choo']">
<div class="fane">选择范围</div>
<div class="select">
<a-select
v-model:value="projectName"
style="
width: 250px;
border-radius: 8px;
margin-top: 15px;
"
placeholder="请选择部门"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
</div>
<div class="select">
<a-select
v-model:value="projectName2"
style="
width: 250px;
border-radius: 8px;
margin-top: 15px;
"
placeholder="请选择岗位"
:options="projectNameList2"
@change="selectProjectName2"
allowClear
showSearch
></a-select>
</div>
</div>
<div class="btm">
<div class="bmo">关卡学习方案展示设置</div>
<div class="bmt">仅支持移动端</div>
<div class="chosecon">
<div class="chose">
<input
type="checkbox"
name="cb1"
value="lieb"
class="inl"
/><span class="sh">列表展示</span>
</div>
<div class="chose" style="margin-left: 20px">
<input
type="checkbox"
name="cb1"
value="lieb"
class="inl"
/><span class="sh">路径展示</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div></a-tab-pane
>
<a-tab-pane key="3" tab="设置">
<div class="sametab">eee</div></a-tab-pane
>
</a-tabs>
</div>
</div>
@@ -164,8 +264,53 @@ export default {
methods: {},
setup() {
const state = reactive({
projectNameList: [
{
id: 1,
value: "项目一",
label: "项目一",
},
{
id: 2,
value: "项目二",
label: "项目二",
},
{
id: 3,
value: "项目三",
label: "项目三",
},
{
id: 4,
value: "项目四",
label: "项目四",
},
],
projectNameList2: [
{
id: 1,
value: "项目一",
label: "项目一",
},
{
id: 2,
value: "项目二",
label: "项目二",
},
{
id: 3,
value: "项目三",
label: "项目三",
},
{
id: 4,
value: "项目四",
label: "项目四",
},
],
activeKey: ref("1"),
value: ref(" "),
checked2: false,
level: [
{
id: 1,
@@ -191,8 +336,16 @@ export default {
},
],
});
const selectProjectName = (value, index) => {
console.log("value", value, index);
};
const selectProjectName2 = (value, index) => {
console.log("value", value, index);
};
return {
...toRefs(state),
selectProjectName,
selectProjectName2,
};
},
};
@@ -571,8 +724,7 @@ export default {
width: 40px;
}
.Gin {
background-color: #bfa;
// background-color: #bfa;
margin-top: 30px;
.headone {
// background-color: red;
@@ -595,8 +747,86 @@ export default {
}
}
.onemain {
margin-top: 30px;
margin-top: 20px;
margin-left: 55px;
color: #6f6f6f;
font-size: 14px;
.checkcon {
position: relative;
.in {
position: absolute;
// margin-top: 10px;
left: 0;
top: 5px;
}
.yulan {
// color: yellow;
margin-left: 22px;
// display: inline-block;
}
.yulan2 {
margin-left: 22px;
}
}
}
.twomain {
margin-left: 20px;
margin-top: 20px;
.info {
margin-left: 10px;
color: #6f6f6f;
font-size: 14px;
}
.infor {
margin-left: 38px;
margin-top: 10px;
color: #c7cbd2;
font-size: 14px;
}
.chooseshow {
// background-color: red;
margin-left: 38px;
margin-top: 12px;
.fane {
color: #6f6f6f;
font-size: 14px;
}
.select {
}
}
.choo {
display: none;
}
.btm {
margin-left: 38px;
margin-top: 20px;
.bmo {
color: #6f6f6f;
font-size: 14px;
}
.bmt {
color: #c7cbd2;
font-size: 14px;
margin-top: 3px;
}
.chosecon {
display: flex;
margin-top: 6px;
margin-bottom: 20px;
.chose {
position: relative;
.inl {
position: absolute;
top: 5px;
}
.sh {
margin-left: 23px;
color: #6f6f6f;
}
}
}
}
}
}
}