mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-13 04:46:46 +08:00
feat:修改创建项目页面
This commit is contained in:
李晓鸽
@@ -71,7 +71,11 @@ export default defineComponent({
|
|||||||
background-color: rgba(245, 247, 250, 1);
|
background-color: rgba(245, 247, 250, 1);
|
||||||
|
|
||||||
main {
|
main {
|
||||||
flex: 1;
|
height: 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
// flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
overflow-y: scroll;
|
||||||
width: calc(100% - 40px);
|
width: calc(100% - 40px);
|
||||||
// margin-bottom: 20px;
|
// margin-bottom: 20px;
|
||||||
margin: 0px 20px 20px 20px;
|
margin: 0px 20px 20px 20px;
|
||||||
|
|||||||
@@ -1,303 +1,501 @@
|
|||||||
<!---- 创建项目页面 --->
|
<!---- 创建项目页面 --->
|
||||||
<template>
|
<template>
|
||||||
|
<div class="projectAdd">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="title">创建/编辑单层项目</span>
|
<span class="title">创建/编辑单层项目</span>
|
||||||
<div class="goback"><span class="return"></span><span class="returntext">返回</span></div>
|
<router-link to="/projectmanage" class="goback">
|
||||||
|
<span class="return"></span
|
||||||
|
><span class="returntext">返回</span></router-link
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<div class="d">*</div>
|
<div class="namebox">
|
||||||
<div class="inname">项目名称</div>
|
<img
|
||||||
<div class="in">
|
class="nameimg"
|
||||||
<a-input v-model:value="valueE" placeholder="请输入项目名称"/>
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
</div>
|
/>
|
||||||
</div>
|
<div class="inname">项目名称</div>
|
||||||
<div class="name">
|
</div>
|
||||||
<div class="d" style="margin-left: 26px">*</div>
|
<div class="in">
|
||||||
<div class="inname" style="width: 50px">分类</div>
|
<a-input v-model:value="valueE" placeholder="请输入项目名称" />
|
||||||
<div class="in" style="margin-left: 2px">
|
</div>
|
||||||
<a-select
|
|
||||||
v-model:value="value1"
|
|
||||||
placeholder="四个养成"
|
|
||||||
:size="size"
|
|
||||||
style="width: 100%"
|
|
||||||
:options="options"
|
|
||||||
></a-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<div class="d" style="margin-left: 9px">*</div>
|
|
||||||
<div class="inname">封面图</div>
|
|
||||||
<div class="box" style="width: 100px;height: 100px;border: 1px solid rgba(78, 166, 255, 1);border-radius: 5px">
|
|
||||||
<div class="box1"></div>
|
|
||||||
<div class="box2"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<div class="d">*</div>
|
|
||||||
<div class="inname">项目时间</div>
|
|
||||||
<div class="in">
|
|
||||||
<a-range-picker separator="至" style="width: 100%;height: 40px;border-radius: 5px" show-time />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<div class="d">*</div>
|
|
||||||
<div class="inname">项目经理</div>
|
|
||||||
<div class="in">
|
|
||||||
<a-input v-model:value="valueE" placeholder="请选择项目经理"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<div class="d">*</div>
|
|
||||||
<div class="inname">资源归属</div>
|
|
||||||
<div class="in">
|
|
||||||
<a-input v-model:value="valueE" placeholder="自动带出 可修改"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name" style="height: 80px">
|
|
||||||
<div class="d"> </div>
|
|
||||||
<div class="inname">项目说明</div>
|
|
||||||
<div class="in">
|
|
||||||
<a-input v-model:value="valueE" placeholder="请输入项目说明" style="height: 80px"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<div class="inname" style="width: 107px;margin-left: -15px">同步学习记录</div>
|
|
||||||
<div class="in">
|
|
||||||
<a-radio v-model:checked="checked"><span style="width: 100%;color: rgba(109, 117, 132, 1); font-size: 14px">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<div class="d">*</div>
|
|
||||||
<div class="inname">项目级别</div>
|
|
||||||
<div class="in">
|
|
||||||
<a-input v-model:value="valueE" placeholder="集团级/组织级/现地级/部门级"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<div class="d">*</div>
|
|
||||||
<div class="inname">培训体系</div>
|
|
||||||
<div class="in">
|
|
||||||
<a-input v-model:value="valueE" placeholder="集团级/组织级/现地级/部门级"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<div class="d" style="margin-left: -30px">*</div>
|
|
||||||
<div class="inname" style="width: 107px;margin-left: 9px">是否BOEU实施</div>
|
|
||||||
<div class="in">
|
|
||||||
<a-radio v-model:checked="checked"><span style="width: 100%;color: rgba(109, 117, 132, 1); font-size: 14px">BOEU实施</span></a-radio>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="template">
|
<div class="name">
|
||||||
<div class="name">
|
<div class="namebox">
|
||||||
<div class="inname" style="width: 50px">模板</div>
|
<img
|
||||||
<div class="in" style="margin-left: 2px">
|
class="nameimg"
|
||||||
<a-select
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
v-model:value="value1"
|
/>
|
||||||
placeholder="请选择模板"
|
<div class="inname">分类</div>
|
||||||
:size="size"
|
</div>
|
||||||
style="width: 100%"
|
<div class="in select">
|
||||||
:options="options"
|
<a-select
|
||||||
></a-select>
|
:value="classifySelect"
|
||||||
</div>
|
placeholder="四个养成"
|
||||||
</div>
|
style="width: 100%"
|
||||||
|
:options="classifyList"
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
></a-select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="namebox">
|
||||||
|
<img
|
||||||
|
class="nameimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="inname">封面图</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="box"
|
||||||
|
style="
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border: 1px solid rgba(78, 166, 255, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="namebox">
|
||||||
|
<img
|
||||||
|
class="nameimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="inname">项目时间</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="in">
|
||||||
|
<a-range-picker
|
||||||
|
separator="至"
|
||||||
|
style="width: 100%; height: 40px; border-radius: 5px"
|
||||||
|
show-time
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="namebox">
|
||||||
|
<img
|
||||||
|
class="nameimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="inname">项目经理</div>
|
||||||
|
</div>
|
||||||
|
<div class="in select">
|
||||||
|
<a-select
|
||||||
|
:value="classifySelect"
|
||||||
|
placeholder="请选择项目经理"
|
||||||
|
style="width: 100%"
|
||||||
|
:options="classifyList"
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
></a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="namebox">
|
||||||
|
<img
|
||||||
|
class="nameimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="inname">资源归属</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="in">
|
||||||
|
<a-input v-model:value="valueE" placeholder="自动带出 可修改" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name name2">
|
||||||
|
<div class="namebox">
|
||||||
|
<div class="inname" style="margin-top: 13px">项目说明</div>
|
||||||
|
</div>
|
||||||
|
<div class="in">
|
||||||
|
<a-textarea
|
||||||
|
v-model:value="valuei"
|
||||||
|
style="height: 80px"
|
||||||
|
placeholder="请输入项目说明"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name name2">
|
||||||
|
<div class="namebox">
|
||||||
|
<div class="inname">同步学习记录</div>
|
||||||
|
</div>
|
||||||
|
<div class="in">
|
||||||
|
<a-radio v-model:checked="checked"
|
||||||
|
><span
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
color: rgba(109, 117, 132, 1);
|
||||||
|
font-size: 14px;
|
||||||
|
"
|
||||||
|
>同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
|
||||||
|
></a-radio
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="namebox">
|
||||||
|
<img
|
||||||
|
class="nameimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="inname">项目级别</div>
|
||||||
|
</div>
|
||||||
|
<div class="in">
|
||||||
|
<a-input
|
||||||
|
v-model:value="valueE"
|
||||||
|
placeholder="集团级/组织级/现地级/部门级"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="namebox">
|
||||||
|
<img
|
||||||
|
class="nameimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="inname">培训体系</div>
|
||||||
|
</div>
|
||||||
|
<div class="in">
|
||||||
|
<a-input
|
||||||
|
v-model:value="valueE"
|
||||||
|
placeholder="集团级/组织级/现地级/部门级"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="namebox">
|
||||||
|
<img
|
||||||
|
class="nameimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="inname">是否BOEU实施</div>
|
||||||
|
</div>
|
||||||
|
<div class="in">
|
||||||
|
<a-radio v-model:checked="checked"
|
||||||
|
><span
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
color: rgba(109, 117, 132, 1);
|
||||||
|
font-size: 14px;
|
||||||
|
"
|
||||||
|
>BOEU实施</span
|
||||||
|
></a-radio
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name name2">
|
||||||
|
<div class="namebox" style="margin-top: 8px">
|
||||||
|
<img
|
||||||
|
class="nameimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="inname">附件</div>
|
||||||
|
</div>
|
||||||
|
<div class="filebox">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
class="fileimg"
|
||||||
|
src="../../assets/images/projectadd/enclosure.png"
|
||||||
|
/>
|
||||||
|
<span class="filetext">上传附件</span>
|
||||||
|
</div>
|
||||||
|
<div class="support">
|
||||||
|
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="template">
|
||||||
|
<div class="name">
|
||||||
|
<div class="inname" style="width: 50px">模板</div>
|
||||||
|
<div class="in select" style="margin-left: 2px">
|
||||||
|
<a-select
|
||||||
|
v-model:value="value1"
|
||||||
|
placeholder="请选择模板"
|
||||||
|
:size="size"
|
||||||
|
style="width: 100%"
|
||||||
|
:options="options"
|
||||||
|
></a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="enclosure">
|
<div class="btn">
|
||||||
<span >附件</span>
|
<a-button
|
||||||
<span class="image"></span>
|
type="primary"
|
||||||
<span class="text1">上传附件</span>
|
style="width: 100px; height: 40px; border-radius: 8px"
|
||||||
</div>
|
>确认</a-button
|
||||||
<div class="text">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
|
>
|
||||||
<div class="btn">
|
<a-button
|
||||||
<a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px">确认</a-button>
|
type="primary"
|
||||||
<a-button type="primary" ghost style="width: 100px;height: 40px;margin-left: 14px;border-radius: 8px">取消</a-button>
|
ghost
|
||||||
</div>
|
style="
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
"
|
||||||
|
>取消</a-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lane="ts">
|
<script>
|
||||||
|
import { reactive, toRefs } from "vue";
|
||||||
|
export default {
|
||||||
|
name: "projectAdd",
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
classifyList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "分类一",
|
||||||
|
label: "分类一",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "分类二",
|
||||||
|
label: "分类二",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "分类三",
|
||||||
|
label: "分类三",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "分类四",
|
||||||
|
label: "分类四",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
classifySelect: null,
|
||||||
|
classifySelectId: null,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.header {
|
.projectAdd {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
// height: inherit;
|
||||||
justify-content: space-between;
|
// flex: 1;
|
||||||
.title {
|
// flex-shrink: 0;
|
||||||
color: #000000;
|
// overflow-y: scroll;
|
||||||
font-size: 18px;
|
|
||||||
//line-height: 36px;
|
.header {
|
||||||
padding-top: 30px;
|
width: 100%;
|
||||||
padding-left: 37px;
|
display: flex;
|
||||||
//font-weight: 500;
|
justify-content: space-between;
|
||||||
}
|
.title {
|
||||||
.goback {
|
color: #000000;
|
||||||
|
font-size: 18px;
|
||||||
padding-right: 70px;
|
//line-height: 36px;
|
||||||
//padding-top: 37px;
|
padding-top: 30px;
|
||||||
position: relative;
|
padding-left: 37px;
|
||||||
.return {
|
//font-weight: 500;
|
||||||
display: inline-block;
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
margin-top: 17px;
|
|
||||||
margin-right: 10px;
|
|
||||||
background-image: url("../../assets/images/projectadd/return.png");
|
|
||||||
}
|
|
||||||
.returntext {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
top: 27px;
|
|
||||||
color: #4EA6FF;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.content {
|
.goback {
|
||||||
display: flex;
|
padding-right: 70px;
|
||||||
.main {
|
//padding-top: 37px;
|
||||||
width: 50%;
|
position: relative;
|
||||||
display: flex;
|
.return {
|
||||||
flex-direction: column;
|
display: inline-block;
|
||||||
align-items: center;
|
width: 42px;
|
||||||
//justify-content: center;
|
height: 42px;
|
||||||
float: left;
|
margin-top: 17px;
|
||||||
border-right: 1px solid rgba(153, 155, 163, 0.3);
|
margin-right: 10px;
|
||||||
.name {
|
background-image: url("../../assets/images/projectadd/return.png");
|
||||||
width: 78%;
|
}
|
||||||
// background-color: lightcoral;
|
.returntext {
|
||||||
display: flex;
|
display: inline-block;
|
||||||
margin-top: 20px;
|
position: absolute;
|
||||||
align-items: center;
|
top: 27px;
|
||||||
//height: 40px;
|
color: #4ea6ff;
|
||||||
// border: 1px solid black;
|
font-size: 14px;
|
||||||
.d {
|
}
|
||||||
margin-top: 8px;
|
|
||||||
font-size: 25px;
|
|
||||||
color: #ff4e4e;
|
|
||||||
}
|
|
||||||
.box {
|
|
||||||
position: relative;
|
|
||||||
.box1 {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
width: 50px;
|
|
||||||
margin-left: -25px;
|
|
||||||
margin-top: -5px;
|
|
||||||
border-top: 2px solid rgba(78, 166, 255, 1);
|
|
||||||
}
|
|
||||||
.box2 {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
height: 50px;
|
|
||||||
//margin-left: -5px;
|
|
||||||
margin-top: -25px;
|
|
||||||
border-left: 2px solid rgba(78, 166, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.inname {
|
|
||||||
color: #6f6f6f;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-left: 7px;
|
|
||||||
width: 65px;
|
|
||||||
}
|
|
||||||
.in {
|
|
||||||
margin-left: 14px;
|
|
||||||
width: 81%;
|
|
||||||
.ant-radio-wrapper {
|
|
||||||
|
|
||||||
}
|
|
||||||
.ant-input {
|
|
||||||
border-radius: 5px;
|
|
||||||
// height: 120%;
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
.ant-select-selector {
|
|
||||||
border-radius: 5px;
|
|
||||||
// height: 120%;
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.template {
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
//justify-content: center;
|
|
||||||
float: right;
|
|
||||||
.name {
|
|
||||||
width: 78%;
|
|
||||||
// background-color: lightcoral;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 20px;
|
|
||||||
align-items: center;
|
|
||||||
height: 40px;
|
|
||||||
// border: 1px solid black;
|
|
||||||
.d {
|
|
||||||
margin-top: 8px;
|
|
||||||
font-size: 25px;
|
|
||||||
color: #ff4e4e;
|
|
||||||
}
|
|
||||||
.inname {
|
|
||||||
color: #6f6f6f;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-left: 7px;
|
|
||||||
width: 65px;
|
|
||||||
}
|
|
||||||
.in {
|
|
||||||
margin-left: 14px;
|
|
||||||
width: 81%;
|
|
||||||
.ant-input {
|
|
||||||
border-radius: 5px;
|
|
||||||
// height: 120%;
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
.ant-select-selector {
|
|
||||||
border-radius: 5px;
|
|
||||||
// height: 120%;
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.footer {
|
}
|
||||||
width: 100%;
|
.content {
|
||||||
margin-top: 31px;
|
display: flex;
|
||||||
margin-bottom: 14px;
|
.main {
|
||||||
.enclosure {
|
width: 50%;
|
||||||
margin-left: 180px;
|
display: flex;
|
||||||
.text1 {
|
flex-direction: column;
|
||||||
margin-left: 10px;
|
align-items: center;
|
||||||
color: rgba(78, 166, 255, 1);
|
//justify-content: center;
|
||||||
font-size: 14px;
|
float: left;
|
||||||
}
|
border-right: 1px solid rgba(153, 155, 163, 0.3);
|
||||||
.image {
|
.name {
|
||||||
display: inline-block;
|
width: 78%;
|
||||||
width: 15px;
|
// background-color: lightcoral;
|
||||||
height: 15px;
|
display: flex;
|
||||||
margin-left: 15px;
|
margin-top: 20px;
|
||||||
background-image: url("../../assets/images/projectadd/enclosure.png");
|
align-items: center;
|
||||||
}
|
//height: 40px;
|
||||||
|
// border: 1px solid black;
|
||||||
|
.namebox {
|
||||||
|
width: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.nameimg {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.btn {
|
.d {
|
||||||
display: flex;
|
margin-top: 8px;
|
||||||
justify-content: center;
|
font-size: 25px;
|
||||||
|
color: #ff4e4e;
|
||||||
}
|
}
|
||||||
.text {
|
.box {
|
||||||
color: rgba(153, 155, 163, 1);
|
position: relative;
|
||||||
|
margin-left: 14px;
|
||||||
|
.box1 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 50px;
|
||||||
|
margin-left: -25px;
|
||||||
|
margin-top: -5px;
|
||||||
|
border-top: 2px solid rgba(78, 166, 255, 1);
|
||||||
|
}
|
||||||
|
.box2 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
height: 50px;
|
||||||
|
//margin-left: -5px;
|
||||||
|
margin-top: -25px;
|
||||||
|
border-left: 2px solid rgba(78, 166, 255, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inname {
|
||||||
|
color: #6f6f6f;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
.in {
|
||||||
|
margin-left: 14px;
|
||||||
|
flex: 1;
|
||||||
|
.ant-radio-wrapper {
|
||||||
|
}
|
||||||
|
.ant-input {
|
||||||
|
border-radius: 5px;
|
||||||
|
// height: 120%;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.ant-select-selector {
|
||||||
|
border-radius: 5px;
|
||||||
|
// height: 120%;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filebox {
|
||||||
|
margin-left: 14px;
|
||||||
|
flex: 1;
|
||||||
|
.fileimg {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.filetext {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-left: 223px;
|
font-weight: 400;
|
||||||
|
color: #4ea6ff;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
.support {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999ba3;
|
||||||
|
line-height: 36px;
|
||||||
|
margin-top: 8px;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.name2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
.template {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
//justify-content: center;
|
||||||
|
float: right;
|
||||||
|
.name {
|
||||||
|
width: 78%;
|
||||||
|
// background-color: lightcoral;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
// border: 1px solid black;
|
||||||
|
.d {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 25px;
|
||||||
|
color: #ff4e4e;
|
||||||
|
}
|
||||||
|
.inname {
|
||||||
|
color: #6f6f6f;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 7px;
|
||||||
|
width: 65px;
|
||||||
|
}
|
||||||
|
.in {
|
||||||
|
margin-left: 14px;
|
||||||
|
width: 81%;
|
||||||
|
.ant-input {
|
||||||
|
border-radius: 5px;
|
||||||
|
// height: 120%;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.ant-select-selector {
|
||||||
|
border-radius: 5px;
|
||||||
|
// height: 120%;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 31px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: rgba(153, 155, 163, 1);
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 223px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -41,13 +41,68 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 投票名称 -->
|
<!-- 投票名称 -->
|
||||||
<div class="vote">
|
<div class="vote">
|
||||||
<div style="font-size: 20px">*</div>
|
<div class="votebox">
|
||||||
<div>投票名称：</div>
|
<img
|
||||||
<div>
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 424px">
|
||||||
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 投票名称 -->
|
<!-- 投票名称 -->
|
||||||
|
<!-- 创建投票 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">创建投票：</div>
|
||||||
|
</div>
|
||||||
|
<div class="votebtn">创建投票</div>
|
||||||
|
</div>
|
||||||
|
<!-- 创建投票 -->
|
||||||
|
<!-- 起止时间 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<div class="voteimg"></div>
|
||||||
|
<div class="votename">起止时间：</div>
|
||||||
|
</div>
|
||||||
|
<div class="votedate">
|
||||||
|
<a-range-picker />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 起止时间 -->
|
||||||
|
<!-- 基础投票数 -->
|
||||||
|
<div class="vote" style="align-items: flex-start">
|
||||||
|
<div class="votebox" style="margin-top: 10px">
|
||||||
|
<div class="voteimg"></div>
|
||||||
|
<div class="votename">基础投票数：</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="votebtn">点击上传</div>
|
||||||
|
<div class="voteclassify">支持：xls.xlsx</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 基础投票数 -->
|
||||||
|
<!-- 投票说明 -->
|
||||||
|
<div class="vote" style="align-items: flex-start">
|
||||||
|
<div class="votebox" style="margin-top: 10px">
|
||||||
|
<div class="voteimg"></div>
|
||||||
|
<div class="votename">投票说明：</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 500px">
|
||||||
|
<a-textarea
|
||||||
|
:rows="4"
|
||||||
|
placeholder="请输入投票说明"
|
||||||
|
:maxlength="6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票说明 -->
|
||||||
</div>
|
</div>
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
</div>
|
</div>
|
||||||
@@ -119,6 +174,51 @@ export default {
|
|||||||
.vote {
|
.vote {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-left: 20px;
|
||||||
|
.votebox {
|
||||||
|
width: 100px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
// background-color: pink;
|
||||||
|
.voteimg {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.votename {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.votebtn {
|
||||||
|
width: 130px;
|
||||||
|
height: 40px;
|
||||||
|
background: #388be1;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.voteclassify {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.ant-picker {
|
||||||
|
width: 424px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user