bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面样式修改

This commit is contained in:
cwchen 2025-11-14 15:03:21 +08:00
parent 84092b55b3
commit 47fb3304f6
6 changed files with 114 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/enterpriseLibrary/technical/components/TechnicalDetail.vue
View File

@ -11,6 +11,8 @@
<el-col :span="6" class="pane-left"> <el-col :span="6" class="pane-left">
<BasicInfoDetail ref="basicInfo" :detailData="detailData" /> <BasicInfoDetail ref="basicInfo" :detailData="detailData" />
</el-col> </el-col>
</el-row>
<el-row :gutter="24" class="content-row">
<!-- 文件上传 --> <!-- 文件上传 -->
<el-col :span="6" class="pane-center"> <el-col :span="6" class="pane-center">
<FileInfoDetail ref="fileInfo" :detailData="detailData" /> <FileInfoDetail ref="fileInfo" :detailData="detailData" />
@ -85,25 +87,24 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.app-container { .app-container {
height: calc(100vh - 84px);
width: 100%;
padding: 24px; padding: 24px;
box-sizing: border-box;
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%); background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
min-height: 100vh; display: flex;
overflow-y: auto; flex-direction: column;
overflow: hidden;
position: relative; position: relative;
margin: 0;
// 当显示动画时，禁用页面点击
&.no-pointer-events {
pointer-events: none;
// 子元素也继承禁用点击
* {
pointer-events: none;
}
}
} }
.content-body { .content-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
margin-top: 20px; margin-top: 20px;
min-height: 0; // 确保 flex 子元素可以正确收缩
} }
.content-row { .content-row {
@ -118,10 +119,10 @@ export default {
.pane-right { .pane-right {
background: #fff; background: #fff;
border-radius: 16px 16px 16px 16px; border-radius: 16px 16px 16px 16px;
min-height: 600px; min-height: 200px;
box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1); box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
padding: 0; padding: 0;
margin-bottom: 20px; margin-bottom: 10px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
@ -130,8 +131,8 @@ export default {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
margin-bottom: 20px;
gap: 12px; gap: 12px;
flex-shrink: 0;
} }
.edit-btn { .edit-btn {
@ -172,27 +173,4 @@ export default {
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3); box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
} }
} }
// 动画定义
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
</style> </style>

21
src/views/enterpriseLibrary/technical/components/TechnicalForm.vue
View File

@ -16,6 +16,8 @@
<el-col :span="6" class="pane-left"> <el-col :span="6" class="pane-left">
<BasicInfo ref="basicInfo" :detailData="detailData" /> <BasicInfo ref="basicInfo" :detailData="detailData" />
</el-col> </el-col>
</el-row>
<el-row :gutter="24" class="content-row">
<!-- 文件上传 --> <!-- 文件上传 -->
<el-col :span="6" class="pane-center"> <el-col :span="6" class="pane-center">
<FileInfo ref="fileInfo" :detailData="detailData" /> <FileInfo ref="fileInfo" :detailData="detailData" />
@ -200,11 +202,16 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.app-container { .app-container {
height: calc(100vh - 84px);
width: 100%;
padding: 24px; padding: 24px;
box-sizing: border-box;
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%); background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
min-height: 100vh; display: flex;
overflow-y: auto; flex-direction: column;
overflow: hidden;
position: relative; position: relative;
margin: 0;
// 当显示动画时，禁用页面点击 // 当显示动画时，禁用页面点击
&.no-pointer-events { &.no-pointer-events {
@ -305,7 +312,11 @@ export default {
} }
.content-body { .content-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
margin-top: 20px; margin-top: 20px;
min-height: 0; // 确保 flex 子元素可以正确收缩
} }
.content-row { .content-row {
@ -320,10 +331,10 @@ export default {
.pane-right { .pane-right {
background: #fff; background: #fff;
border-radius: 16px 16px 16px 16px; border-radius: 16px 16px 16px 16px;
min-height: 600px; min-height: 200px;
box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1); box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
padding: 0; padding: 0;
margin-bottom: 20px; margin-bottom: 10px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
@ -332,8 +343,8 @@ export default {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
margin-bottom: 20px;
gap: 12px; gap: 12px;
flex-shrink: 0;
} }
.search-btn { .search-btn {

67
src/views/enterpriseLibrary/technical/components/child/BasicInfo.vue
View File

@ -5,30 +5,45 @@
<span>基础信息</span> <span>基础信息</span>
</div> </div>
<el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top"> <el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top">
<el-form-item label="电压等级" prop="voltageLevel"> <el-row :gutter="24">
<el-select v-model="form.voltageLevel" placeholder="请选择电压等级" class="form-item"> <el-col :span="8">
<el-option v-for="item in dict.type.voltage_level" :key="item.value" :label="item.label" <el-form-item label="电压等级" prop="voltageLevel">
:value="item.value"></el-option> <el-select v-model="form.voltageLevel" placeholder="请选择电压等级" class="form-item">
</el-select> <el-option v-for="item in dict.type.voltage_level" :key="item.value" :label="item.label"
</el-form-item> :value="item.value"></el-option>
<el-form-item label="建设性质" prop="natureConstruction"> </el-select>
<el-select v-model="form.natureConstruction" placeholder="请选择工程性质" class="form-item" multiple> </el-form-item>
<el-option v-for="item in dict.type.construction_nature" :key="item.value" :label="item.label" </el-col>
:value="item.value"></el-option> <el-col :span="8">
</el-select> <el-form-item label="建设性质" prop="natureConstruction">
</el-form-item> <el-select v-model="form.natureConstruction" placeholder="请选择工程性质" class="form-item" multiple>
<el-form-item label="结构形式" prop="structuralForm"> <el-option v-for="item in dict.type.construction_nature" :key="item.value"
<el-select v-model="form.structuralForm" placeholder="请选择结构形式" class="form-item"> :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in dict.type.structural_form" :key="item.value" :label="item.label" </el-select>
:value="item.value"></el-option> </el-form-item>
</el-select> </el-col>
</el-form-item> <el-col :span="8">
<el-form-item label="基础形式" prop="basicForm"> <el-form-item label="结构形式" prop="structuralForm">
<el-select v-model="form.basicForm" placeholder="请选择基础形式" class="form-item"> <el-select v-model="form.structuralForm" placeholder="请选择结构形式" class="form-item">
<el-option v-for="item in dict.type.basic_form" :key="item.value" :label="item.label" <el-option v-for="item in dict.type.structural_form" :key="item.value" :label="item.label"
:value="item.value"></el-option> :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="基础形式" prop="basicForm">
<el-select v-model="form.basicForm" placeholder="请选择基础形式" class="form-item">
<el-option v-for="item in dict.type.basic_form" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
</div> </div>
</template> </template>
@ -68,9 +83,9 @@ export default {
} }
}, },
watch: { watch: {
detailData:{ detailData: {
handler(newVal) { handler(newVal) {
if(Object.keys(newVal).length > 0){ if (Object.keys(newVal).length > 0) {
this.setFormData(newVal) this.setFormData(newVal)
} }
}, },

25
src/views/enterpriseLibrary/technical/components/child/BasicInfoDetail.vue
View File

@ -5,10 +5,23 @@
<span>基础信息</span> <span>基础信息</span>
</div> </div>
<div class="detail-content"> <div class="detail-content">
<DetailItem label="电压等级" :value="form.voltageLevel" /> <el-row :gutter="24">
<DetailItem label="建设性质" :value="form.natureConstruction" /> <el-col :span="8">
<DetailItem label="结构形式" :value="form.structuralForm" /> <DetailItem label="电压等级" :value="form.voltageLevel" />
<DetailItem label="基础形式" :value="form.basicForm" /> </el-col>
<el-col :span="8">
<DetailItem label="建设性质" :value="form.natureConstruction" />
</el-col>
<el-col :span="8">
<DetailItem label="结构形式" :value="form.structuralForm" />
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<DetailItem label="基础形式" :value="form.basicForm" />
</el-col>
</el-row>
</div> </div>
</div> </div>
</template> </template>
@ -37,9 +50,9 @@ export default {
} }
}, },
watch: { watch: {
detailData:{ detailData: {
handler(newVal) { handler(newVal) {
if(Object.keys(newVal).length > 0){ if (Object.keys(newVal).length > 0) {
this.setDetailData(newVal) this.setDetailData(newVal)
} }
}, },

29
src/views/enterpriseLibrary/technical/components/child/FileInfo.vue
View File

@ -5,12 +5,17 @@
<span>文件上传</span> <span>文件上传</span>
</div> </div>
<el-form :model="form" :rules="rules" ref="fileInfoForm" label-width="110px" label-position="top"> <el-form :model="form" :rules="rules" ref="fileInfoForm" label-width="110px" label-position="top">
<!-- 文件上传 --> <el-row :gutter="24">
<el-form-item label="文件上传" prop="fileList"> <el-col :span="8">
<UploadMoreFile :fileList="form.fileList" @file-change="handleFileChange" @del-file="handleDelFile" <!-- 文件上传 -->
type="business_license" :uploadType="uploadType" :maxFileTips="maxFileTips" <el-form-item label="文件上传" prop="fileList">
:fileUploadRule="fileUploadRule" :limitUploadNum="limitUploadNum" :disabled="disabled" /> <UploadMoreFile :fileList="form.fileList" @file-change="handleFileChange"
</el-form-item> @del-file="handleDelFile" type="business_license" :uploadType="uploadType"
:maxFileTips="maxFileTips" :fileUploadRule="fileUploadRule" :limitUploadNum="limitUploadNum"
:disabled="disabled" />
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
</div> </div>
</template> </template>
@ -61,9 +66,9 @@ export default {
} }
}, },
watch: { watch: {
detailData:{ detailData: {
handler(newVal) { handler(newVal) {
if(Object.keys(newVal).length > 0){ if (Object.keys(newVal).length > 0) {
this.limitUploadNum = 1; this.limitUploadNum = 1;
this.disabled = true; this.disabled = true;
this.setFormData(newVal) this.setFormData(newVal)
@ -98,7 +103,7 @@ export default {
// 文件删除时触发 // 文件删除时触发
handleDelFile(file) { handleDelFile(file) {
const delPath = file?.response?.fileRes?.filePath || file?.filePath || null; const delPath = file?.response?.fileRes?.filePath || file?.filePath || null;
if(delPath){ if (delPath) {
this.form.delFileList.push(delPath); this.form.delFileList.push(delPath);
} }
}, },
@ -109,13 +114,13 @@ export default {
delFileList: [] delFileList: []
} }
}, },
getFileList(){ getFileList() {
return this.detailData.resourceFileVoList.map(item => { return this.detailData.resourceFileVoList.map(item => {
return { return {
name: item.fileName, name: item.fileName,
filePath: item.filePath, filePath: item.filePath,
lsFilePath:item.lsFilePath, lsFilePath: item.lsFilePath,
fileType:item.fileType fileType: item.fileType
}; };
}); });
} }

6
src/views/enterpriseLibrary/technical/components/child/FileInfoDetail.vue
View File

@ -5,7 +5,11 @@
<span>文件上传</span> <span>文件上传</span>
</div> </div>
<div class="detail-content"> <div class="detail-content">
<FileOrImageDisplay label="文件上传" :file="form.fileList[0]" :image-url="form.url" /> <el-row :gutter="24">
<el-col :span="8">
<FileOrImageDisplay label="文件上传" :file="form.fileList[0]" :image-url="form.url" />
</el-col>
</el-row>
</div> </div>
</div> </div>
</template> </template>