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

feat:创建调研页面

Browse Source
This commit is contained in:
岳佳鑫
2022-10-10 11:11:43 +08:00
parent 8631b26ac0
commit 195af21a9d
1 changed files with 217 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
src/views/research/ResearchAdd.vue
View File

@@ -1,15 +1,112 @@
<template> <template>
<div class="researchadd">
<div class="header"> <div class="header">
<span class="title">创建调研</span> <span class="title">创建调研</span>
<div class="goback"><span class="return"></span><router-link class="returntext" to="/researchmanage">返回</router-link></div> <div class="goback"><span class="return"></span><router-link class="returntext" to="/researchmanage">返回</router-link></div>
</div> </div>
<div class="content"> <div class="content">
<div class="type"></div>
<div class="name"> <div class="name">
<div class="star">*</div> <div class="namebox">
<div class="inname">提干</div> <div class="inname">类型</div>
</div>
<div class="in"> <div class="in">
<a-input v-model:value="valueE" placeholder="请输入项目名称"/> <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="请输入项目名称" />
</div>
</div>
<div class="name">
<div class="in" style="margin-left: 133px">
<a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px">添加选项</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" />
</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" />
</div>
</div>
<div class="delete">删除</div>
</div>
<div class="picture">
<img class="pictureimg" src=""/>
<div class="picturename">图片名称1.jpg</div>
</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>
</div> </div>
@@ -19,8 +116,16 @@
<a-button type="primary" ghost style="width: 100px;height: 40px;margin-left: 14px;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>
</div> </div>
</div>
</template> </template>
<style> <script lang="ts">
</script>
<style lang="scss">
.researchadd {
width: 100%;
display: flex;
flex-direction: column;
.header { .header {
width: 100%; width: 100%;
display: flex; display: flex;
@@ -57,7 +162,110 @@
.content { .content {
display: flex; display: flex;
flex-direction: column; 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 {
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: 40px;
}
.ant-select-selector {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
} }
.footer { .footer {
width: 100%; width: 100%;
@@ -69,4 +277,6 @@
cursor: pointer; cursor: pointer;
} }
} }
}
</style> </style>