Commit 252bce2a authored by baiyinhao's avatar baiyinhao

修改需求大厅

parent 956b542a
......@@ -28,3 +28,33 @@ export const formSchema = [
label: '预计金额',
},
];
export const FormSchemaDetail = [
{
field: 'name',
label: '需求名称',
},
{
field: 'type',
label: '类型',
},
{
field: 'person',
label: '联系人',
},
{
field: 'phone',
label: '联系电话',
},
{
field: 'company',
label: '公司',
},
{
field: 'des',
label: '需求描述',
},
{
field: 'amount',
label: '预计金额',
},
];
......@@ -2,9 +2,9 @@
<div class="d-detail">
<div class="d-title"> 需求详情 </div>
<div class="d-card1">
<div class="w-2/3 d-left">
<div class="w-1/1 d-left">
<div>
<Icon icon="ant-design:line-chart-outlined" style="font-size: 50px; color: #7295fe" />
<Icon icon="ant-design:line-chart-outlined" style="color: #7295fe; font-size: 50px" />
</div>
<div class="d-des">
<div class="d-hd">
......@@ -39,10 +39,10 @@
</div>
</div>
</div>
<div class="w-1/3 d-right">
<!-- <div class="w-1/3 d-right">
<div class="dr-hd">
<div>
<Icon icon="ant-design:heart-outlined" style="font-size: 20px; color: #4475fe" />
<Icon icon="ant-design:heart-outlined" style="color: #4475fe; font-size: 20px" />
</div>
<div class="hd-title"> 需求信息 </div>
</div>
......@@ -58,6 +58,82 @@
<div style="color: #4e80f8"> {{ data.tab }} </div>
</div>
</div>
</div> -->
</div>
<div class="d-card1 d-card3">
<div class="cd-header">
<div class="h-left">
<div class="title"> </div>
<!-- <div class="tab"> 简单&nbsp;&nbsp;·&nbsp;&nbsp;高效&nbsp;&nbsp;·&nbsp;&nbsp;安全 </div> -->
</div>
</div>
<div class="formWrapper">
<el-form :model="formData" :rules="rules" ref="form2" label-width="80px">
<el-row :gutter="20" style="margin-bottom: 20px">
<el-col :span="12">
<el-form-item prop="company" label="所属公司" class="formItemWrapper">
<el-textarea v-model="formData.company" placeholder="请输入用户名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="publishDate" label="发布日期" class="formItemWrapper">
<el-textarea v-model="formData.publishDate" placeholder="请输入密码" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-bottom: 20px">
<el-col :span="12">
<el-form-item prop="requirementCategory" label="需求类别" class="formItemWrapper">
<el-textarea v-model="formData.requirementCategory" placeholder="请输入邮箱" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="budgetAmount" label="预算金额" class="formItemWrapper">
<el-textarea v-model="formData.budgetAmount" placeholder="请输入手机号" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-bottom: 20px">
<el-col :span="12">
<el-form-item prop="contact" label="联系人" class="formItemWrapper">
<el-textarea v-model="formData.contact" placeholder="请输入地址" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="phone" label="联系方式" class="formItemWrapper">
<el-textarea v-model="formData.phone" placeholder="请输入公司名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-bottom: 20px">
<el-col :span="12">
<el-form-item prop="dataFormat" label="数据格式" class="formItemWrapper">
<el-textarea v-model="formData.dataFormat" placeholder="请输入部门名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="updateTime" label="更新时间" class="formItemWrapper">
<el-textarea v-model="formData.updateTime" placeholder="请输入职位名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-bottom: 20px">
<el-col :span="24">
<el-form-item
prop="dataTimeliness"
label="数据时效性"
class="formItemWrapper"
style="white-space: nowrap"
>
<el-textarea
v-model="formData.dataTimeliness"
placeholder="请输入职位名称"
readonly
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<div class="d-card1 d-card2">
......@@ -67,7 +143,7 @@
<div class="tab"> 简单&nbsp;&nbsp;·&nbsp;&nbsp;高效&nbsp;&nbsp;·&nbsp;&nbsp;安全 </div>
</div>
<div class="h-right">
<el-button type="text" style="padding: 0; height: 14px">查看详细流程></el-button>
<!-- <el-button type="text" style="height: 14px; padding: 0">查看详细流程></el-button> -->
</div>
</div>
<div class="h-img">
......@@ -166,6 +242,8 @@
import { Row, Col } from 'ant-design-vue';
import { nextTick } from 'vue';
import { FormSchemaDetail } from './detail.data';
export default {
components: { Icon, Row, Col },
data() {
......@@ -186,6 +264,27 @@
// },
// ],
// },
formData: {
phone: 'ad',
company: 'ad',
requirementCategory: 'ad',
publishDate: 'asd',
budgetAmount: 'sd',
contact: 'ds',
dataFormat: 'sa',
updateTime: 'as',
dataTimeliness: 'ds',
},
// rules: {
// username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
// password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
// email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
// phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
// address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
// company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
// department: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
// jobTitle: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
// },
form: {},
typeOptions: [
{
......@@ -264,11 +363,28 @@
],
};
},
mounted() {
this.formData = {
...this.formData,
phone: '12312413123123',
company: '1312312312213',
requirementCategory: '',
publishDate: '',
budgetAmount: '',
contact: '',
dataFormat: '',
updateTime: '',
dataTimeliness: '',
};
console.log(this.formData, '1');
this.$refs.form2.resetFields();
},
methods: {
handleCloseConnect() {
this.connectVisible = false;
this.similar = false;
},
handleSubmitC() {},
handleOpenConnect() {
this.connectVisible = true;
......@@ -290,91 +406,107 @@
};
</script>
<style scoped>
<style scoped lang="scss">
.d-detail {
padding-top: 30px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 30px;
gap: 20px;
}
.d-title {
width: 70%;
margin-bottom: 20px;
float: left;
color: #081546;
font-size: 30px;
width: 70%;
margin-bottom: 20px;
}
.d-card1 {
display: flex;
box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2);
border: 2px solid #eff1f6;
width: 70%;
padding: 40px;
border: 2px solid #eff1f6;
box-shadow: 3px 2px 15px rgb(0 0 0 / 20%);
.d-left {
display: flex;
gap: 30px;
.d-des {
flex: 1;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
gap: 80px;
.d-hd {
display: flex;
flex-direction: column;
gap: 15px;
.d-row {
display: flex;
gap: 15px;
}
.title {
font-size: 20px;
font-weight: bolder;
}
.tab {
font-size: 12px;
padding: 4px 10px;
background-color: #fff3ef;
color: #fe9693;
padding: 4px 10px;
font-size: 12px;
}
}
.d-ft {
flex: 1;
display: flex;
flex: 1;
justify-content: space-between;
padding-right: 10%;
.ft-left {
display: flex;
gap: 10px;
.money {
font-size: 22px;
color: #f5413f;
display: flex;
align-items: center;
color: #f5413f;
font-size: 22px;
}
.status {
font-size: 14px;
display: flex;
align-items: center;
color: #f9c331;
font-size: 14px;
}
}
}
}
}
.d-right {
background-color: #f8f9fc;
padding: 15px;
background-color: #f8f9fc;
.dr-hd {
display: flex;
gap: 10px;
}
.dr-list {
display: flex;
flex-direction: column;
gap: 18px;
padding: 25px 5px;
.list-item {
display: flex;
gap: 20px;
......@@ -383,43 +515,87 @@
}
}
}
.d-card2 {
flex-direction: column;
gap: 40px;
margin-bottom: 130px;
.cd-header {
display: flex;
justify-content: space-between;
flex: 1;
justify-content: space-between;
.h-left {
display: flex;
gap: 20px;
.title {
font-size: 18px;
}
.tab {
font-size: 14px;
padding: 4px 8px;
background-color: #eff1f6;
color: #777e91;
font-size: 14px;
}
}
}
.h-img > img {
width: 100%;
}
}
.col-item {
display: flex;
gap: 10px;
.item-label {
width: 100px;
}
}
.modal-detail {
padding: 40px 80px;
}
.form-item {
width: 90%;
}
.d-card3 {
flex-direction: column;
gap: 40px;
margin-bottom: 0;
.cd-header {
display: flex;
flex: 1;
justify-content: space-between;
.h-left {
display: flex;
gap: 20px;
.title {
font-size: 18px;
}
.tab {
padding: 4px 8px;
background-color: #eff1f6;
color: #777e91;
font-size: 14px;
}
}
}
}
.formItemWrapper {
:deep(.el-input__inner) {
border: none !important;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment