fe-manage/src/views/projectcenter/ProjectAdd.vue

<!---- 创建项目页面 --->
<template>
    <div class="header">
        <span class="title">创建/编辑单层项目</span>
        <span class="goback">返回</span>
    </div>
    <div class="content">
        <div class="main">
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left: 140px">*</span>项目名称
                <a-input
                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
                    placeholder="请输入项目名称"                   
                    allowClear
                    showSearch
                ></a-input>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left:166px">*</span>分类
                <a-select
                    style="width: 505px; height: 40px; margin-left: 13px"
                    placeholder="四个养成"                   
                    allowClear
                    showSearch
                ></a-select>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left:152px">*</span>封面图
                <span class="photo"></span>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left:140px">*</span>项目时间
                <a-range-picker v-model:value="value2" show-time style="margin-left:10px;width: 505px"/>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left: 140px">*</span>项目经理
                <a-input
                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
                    placeholder="请选择项目经理"                   
                    allowClear
                    showSearch
                ></a-input>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left: 140px">*</span>资源归属
                <a-input
                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
                    placeholder="自动带出 可修改"                                      
                    allowClear
                    showSearch
                ></a-input>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center;margin-left: 150px">
                项目说明
                <a-input
                    style="width: 500px; height: 80px; border-radius: 8px;margin-left: 13px"
                    placeholder="请输入说明" 
                    type="textarea"                                    
                    allowClear
                    showSearch
                ></a-input>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center;margin-left: 130px">
                同步学习记录
               <a-radio v-model:checked="checked" style="margin-left: 3px">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</a-radio>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left: 140px">*</span>项目级别
                <a-input
                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
                    placeholder="集团级/组织级/现地级/部门级"                                      
                    allowClear
                    showSearch
                ></a-input>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left: 140px">*</span>培训体系
                <a-input
                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
                    placeholder="集团级/组织级/现地级/部门级"                                      
                    allowClear
                    showSearch
                ></a-input>
            </div>
            <div class="select" style="margin-top: 20px;algin-items: center">
                <span class="star" style="margin-left: 110px">*</span>是否BOEU实施
                <a-radio v-model:checked="checked">BOEU实施</a-radio>
            </div>           
        </div>
        <div class="template">
            <div class="select" style="margin-top: 20px;margin-left: 43px;algin-items: center">
                模板<a-select
                    style="width: 505px; height: 40px; margin-left: 13px"
                    placeholder="请选择模板"                   
                    allowClear
                    showSearch
                ></a-select>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="enclosure">
            <span >附件</span>
            <span class="image"></span>
            <span class="text1">上传附件</span>
        </div>
        <div class="text">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
        <div class="btn">
            <a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px">确认</a-button>
            <a-button type="primary" ghost style="width: 100px;height: 40px;margin-left: 14px;border-radius: 8px">取消</a-button>
        </div>
    </div>
</template>
<script lane="ts">
</script>
<style lang="scss">
    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .title {
            color: #000000;
            font-size: 18px;
            //line-height: 36px;
            padding-top: 30px;
            padding-left: 37px;
            //font-weight: 500;
        }
        .goback {
            color: #4EA6FF;
            font-size: 14px;
            padding-right: 39px;
            padding-top: 37px; 
        }
    }
    .content {
        display: flex;
        .template {
            float: right;
        }
        .main {
            width: 50%;
            float: left;
            border-right: 1px solid rgba(153, 155, 163, 0.3);
            .star {
                color: #FF4E4E;
                margin-right: 4px;
                font-size: 20px;
            }
            .photo {
                display: inline-block;
                width: 100px;
                height: 100px;
                margin-left: 13px;
                border: 1px solid #4EA6FF;
                border-radius: 8px;
                //text-align: center;
                //line-height: 100px;               
                //color: #4EA6FF;
            }
        }
    }
    .footer {
        width: 100%;
        margin-top: 31px;
        margin-bottom: 14px;
        .enclosure {
            margin-left: 180px;
            .text1 {
                margin-left: 10px;
                color: rgba(78, 166, 255, 1);
                font-size: 14px;
            }
            .image {
                display: inline-block;
                width: 15px;
                height: 15px;
                margin-left: 15px;
                background-image: url("../../assets/images/projectadd/enclosure.png");
            }
        }
        .btn {
            display: flex;
            justify-content: center;
        }
        .text {
            color: rgba(153, 155, 163, 1);
            font-size: 14px;
            margin-left: 223px;
        }
    }
</style>