fe-manage/src/views/research/ResearchAdd.vue

<!-- 调研管理-基础信息页面 -->
<template>
<div class="researchadd">
    <div class="header">
        <span class="title">创建调研</span>
        <router-link to="/researchmanage" class="goback"><span class="return"></span><router-link class="returntext" to="/researchmanage">返回</router-link></router-link>
    </div>
    <div class="content">
        <div class="name">
          <div class="namebox">
            <div class="inname">类型</div>
          </div>
          <div class="in">
            <input type="radio" name="type" id="single" checked="checked"/><label for="single" class="text" style="margin-left: 5px">单选</label>
            <input type="radio" name="type" id="double" style="margin-left: 10px"/><label for="double" class="text" style="margin-left: 5px">多选</label>
            <input type="radio" name="type" id="score" style="margin-left: 10px"/><label for="score" class="text" style="margin-left: 5px">评分题</label>
          </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="请输入项目名称" show-count :maxlength="20" style="border-radius: 8px"/>
          </div>
        </div>
        <div class="name">
          <div class="in" style="margin-left: 133px">
            <a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px;background-color: #409EFF">添加选项</a-button>
          </div>
        </div>
        <div class="options">
            <div class="name" >
            <div class="namebox">
                <div class="inname">选项1</div>
            </div>
            <div class="in">
                <a-input v-model:value="valueE" show-count :maxlength="20" style="border-radius: 8px" />
            </div>          
            </div>
            <div class="delete">删除</div>
        </div>       
        <div class="name" >
          <div class="in" style="margin-left: 133px">
            <div class="addimg">+添加图片</div>
          </div>          
        </div>
        <div class="options">
            <div class="name" >
            <div class="namebox">
                <div class="inname">选项1</div>
            </div>
            <div class="in">
                <a-input v-model:value="valueE" show-count :maxlength="20" style="border-radius: 8px"/>
            </div>          
            </div>
            <div class="delete">删除</div>
        </div>
        <div class="picture" style="position: relative">
            <img class="pictureimg" src="../../assets/images/research/picture.png"/>
            <div class="picturename">图片名称1.jpg</div>
            <img
                style="width: 20px; height: 20px;position: absolute;right: 0;top:0"
                src="../../assets/images/basicinfo/close.png"
            />
        </div>
    </div>
     <div class="header">
        <span class="title" style="font-size: 14px">选项设置</span>
    </div>
    <div class="content">
        <div class="name" >
          <div class="namebox">
            <div class="inname">最低分</div>
          </div>
          <div class="in">
            <a-input v-model:value="valueE"  />
          </div>
          <div class="namebox" style="margin-left: -50px">
            <div class="inname">最高分</div>
          </div>
          <div class="in">
            <a-input v-model:value="valueE"  />
          </div>           
        </div>
        <div class="scorebox">
            <div class="scoretext">非常满意</div>
            <div class="number">
                <a-button class="btn" style="margin-left:10px">1</a-button>
                <a-button class="btn">2</a-button>
                <a-button class="btn">3</a-button>
                <a-button class="btn">4</a-button>
                <a-button class="btn">5</a-button>
                <a-button class="btn">6</a-button>
                <a-button class="btn">7</a-button>
                <a-button class="btn">8</a-button>
                <a-button class="btn">9</a-button>
                <a-button class="btn" style="margin-right: 10px;">10</a-button>
            </div>
            <div class="scoretext">非常不满意</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"
            />
          </div>
        </div>
    </div>
    <div class="footer">
        <div class="btn">
            <a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px;background-color: #409EFF">保存</a-button>
            <a-button type="primary" ghost style="width: 100px;height: 40px;margin-left: 14px;border-radius: 8px">取消</a-button>
        </div>
    </div>

</div>    
</template>
<script lang="ts">
</script>
<style lang="scss">
.researchadd {
    width: 100%;
    display: flex;
    flex-direction: column;
    .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 {           
            padding-right: 70px;
            //padding-top: 37px;
            position: relative;
            .return {
                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 {
        display: flex;
        flex-direction: column; 
        .scorebox {
            display:flex;
            align-items: center;
            margin-top: 20px;
            margin-left:70px;
            .scoretext {
                font-size: 14px;
                color: #56A3F9;
            }
            .number {
                display: flex;
                border: 1px solid #D7E5FD;
                border-radius: 5px;
                margin: 0 10px;
                .btn {
                    border: 1px solid #56A3F9;
                    border-radius: 5px; 
                    width: 40px;
                    height: 40px;
                    color: #56A3F9;
                    margin: 5px;
                }
            }
        }
        .picture {
            width: 100px;
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            margin-left: 133px;
            .pictureimg {
                width: 100px;
                height: 100px;
            }
            .picturename {
                    color: #6F6F6F;
                    font-size: 14px;
                }
        }
        .name2 {
            display: flex;
            align-items: flex-start;
        }
        .options {
            display:flex;
        }
        .delete {
            margin-top: 27px;
            margin-left: 20px;
            float: right;
            color: #4EA6FF;
            font-size: 14px;
        }
        .name {
            width: 50%;
            // background-color: lightcoral;
            display: flex;
            margin-top: 20px;
            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;
                }
            }
            .inname {
                color: #6f6f6f;
                font-size: 14px;
                margin-left: 7px;
                }
                .in {
                    margin-left: 14px;
                    flex: 1;
                    .addimg {
                        color: rgba(78, 166, 255, 1);
                        font-size: 14px;
                    }
                    .text {
                        color: rgba(109, 117, 132, 1);
                        font-size: 14px;
                        //line-height: 24px;
                    }
                .ant-radio-wrapper {
                }
                .ant-input {
                    border-radius: 5px;
                    // height: 120%;
                    width: 100%;
                    height: 35px;
                }
                .ant-select-selector {
                    border-radius: 5px;
                    // height: 120%;
                    width: 100%;
                    height: 40px;
                }
            }
        }      
    }
    .footer {
        width: 100%;
        margin-top: 31px;
        margin-bottom: 14px;
        .btn {
            display: flex;
            margin-bottom: 20px;
            justify-content: center;
            cursor: pointer;
        }
    }
}
    
</style>