项目详情模块的配色以及table弹窗

main
严飞永 1 month ago
parent 87fb0ffa43
commit 204444e01d

@ -21,8 +21,18 @@ export default {
}
};
</script>
<style scoped>
<style >
#app .theme-picker {
display: none;
}
/* 项目详情中的表单label */
.el-descriptions-item__label.is-bordered-label {
background: #F4F7FE !important;
width: 13.13rem;
font-size: 0.5rem;
}
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell{
width: 13.13rem;
font-size: 0.88rem;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

@ -20,6 +20,7 @@
<right-panel>
<settings/> <!-- 设置面板组件 -->
</right-panel>
<el-backtop target=".main-container"></el-backtop>
</div>
</template>

@ -248,6 +248,9 @@ export default {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #FAFAFA;
color: #808080;
border: none;
}
.el-tag+.el-tag {
margin-left: 10px;

@ -7,26 +7,24 @@
<span>现场实况</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</el-button>
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="">
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
新增
</el-button>
</div>
</div>
<!-- 视频 -->
<div class="image-container">
<div v-for="(image, index) in images" :key="index" class="image-box">
<img :src="image.src" alt="项目录像" class="image">
<!-- 播放按钮 -->
<div class="player-button">
<img src="../../../assets/images/detailsicon/icon-bf@2x (1).png" alt="">
</div>
<!-- 关闭按钮 -->
<div class = "close-button" @click="removeImage(index)">
<div class="close-button" @click="removeImage(index)">
<img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
</div>
<!-- 播放按钮 -->
@ -129,9 +127,22 @@ export default {
top: 0.2rem;
right: 0.2rem;
}
.close-button img {
width: 100%;
height: 100%;
object-fit: cover;
}
.player-button {
position: absolute;
top: 4.8rem;
left: 8.8rem;
width: 25%;
}
.player-button img {
width: 4.19rem;
height: 4.19rem;
}
</style>

@ -137,7 +137,7 @@ export default {
}
.left-column {
border-right: 1px solid black;
border-right: 1px solid #ccc;
}
.right-columns {

@ -7,18 +7,12 @@
<span>项目巡礼</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</el-button>
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="">
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
新增
</el-button>
</div>
</div>
<!-- 图片盒子容器 -->

@ -13,12 +13,6 @@
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
</el-button>
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
</el-button>
</div>
</div>
<!-- 内容区 -->
@ -28,10 +22,12 @@
</div>
<div class="descriptionsdiv">
<div>评价等级</div>
<el-descriptions direction="vertical" :column="4" border>
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
</el-descriptions>
<div class="tablebody">
<el-descriptions direction="vertical" :column="4" border>
<el-descriptions-item label="评价要素">kooriookami</el-descriptions-item>
<el-descriptions-item label="评价排名">18100000000</el-descriptions-item>
</el-descriptions>
</div>
</div>
</div>
</div>
@ -161,4 +157,7 @@ export default {
.two-row-item {
height: 20rem;
}
.tablebody {
margin-top: 2rem;
}
</style>

@ -0,0 +1,25 @@
<template>
<el-descriptions title="自定义样式列表" :column="3" border>
<el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">
kooriookami
</el-descriptions-item>
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
<el-descriptions-item label="备注">
<el-tag size="small">学校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">
江苏省苏州市吴中区吴中大道 1188
</el-descriptions-item>
</el-descriptions>
</template>
<style>
:deep(.my-label) {
background: #E1F3D8 !important;
}
.my-content {
background: #FDE2E2;
}
</style>

@ -2,16 +2,8 @@
<div class="containerbody">
<!-- 目录 -->
<div class="containerhead">
<el-menu
:default-active="activeSection"
mode="horizontal"
@select="scrollToSection"
>
<el-menu-item
v-for="(item, index) in sections"
:key="index"
:index="item.id"
>
<el-menu :default-active="activeSection" mode="horizontal" @select="scrollToSection" class="custom-menu">
<el-menu-item v-for="(item, index) in sections" :key="index" :index="item.id" class="custom-menu-item">
{{ item.label }}
</el-menu-item>
</el-menu>
@ -30,22 +22,24 @@
<Companyenter id="companyenter"></Companyenter>
<!-- 项目画像 -->
<Projectpicture id="projectpicture"></Projectpicture>
<!-- 项目图例 -->
<Projectpicturetwo id="projectpicturetwo"></Projectpicturetwo>
<!-- 项目巡礼 -->
<Projectgift id="projectgift"></Projectgift>
<!-- 现场实况 -->
<Liver id="liver"></Liver>
<!-- 项目备忘录 -->
<Memo id="memo"></Memo>
<el-backtop
target="body">
</el-backtop>
<!-- 其他信息 -->
<Memo id="others"></Memo>
<!-- 返回顶部 -->
<!-- <el-backtop target=".backtop"></el-backtop> -->
</div>
</template>
<script>
import Basic from '../../components/ProjectDetails/Basic.vue';
import Buildings from '../../components/ProjectDetails/Buildings.vue';
import Buildings from '../../components/ProjectDetails/Buildings.vue';
import Companyenter from '../../components/ProjectDetails/companyenter.vue';
import Liver from '../../components/ProjectDetails/Liver.vue';
import Memo from '../../components/ProjectDetails/Memo.vue';
@ -54,6 +48,7 @@ import Months from '../../components/ProjectDetails/Months.vue';
import Programme from '../../components/ProjectDetails/Programme.vue';
import Projectgift from '../../components/ProjectDetails/Projectgift.vue';
import Projectpicture from '../../components/ProjectDetails/Projectpicture.vue';
import Projectpicturetwo from '../../components/ProjectDetails/Projectpicturetwo.vue';
export default {
components: {
@ -66,7 +61,8 @@ export default {
Months,
Programme,
Projectgift,
Projectpicture
Projectpicture,
Projectpicturetwo
},
data() {
return {
@ -79,9 +75,11 @@ export default {
{ id: 'months', label: '月度进展信息' },
{ id: 'companyenter', label: '企业入驻信息' },
{ id: 'projectpicture', label: '项目画像' },
{ id: 'projectpicturetwo', label: '项目图例' },
{ id: 'projectgift', label: '项目巡礼' },
{ id: 'liver', label: '现场实况' },
{ id: 'memo', label: '项目备忘录' }
{ id: 'memo', label: '项目备忘录' },
{ id: 'others', label: '其他信息' }
]
};
},
@ -102,12 +100,13 @@ export default {
<style scoped>
.containerbody {
height: auto;
padding: .3rem .5rem;
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
overflow: auto;
gap: 1rem;
position: relative;
overflow: auto;
}
.containerhead {
@ -119,4 +118,42 @@ export default {
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.custom-menu {
margin: 1rem;
display: flex;
gap: 1rem;
border: none;
}
.custom-menu-item {
color: #3D424C;
width: 7.25rem;
height: 2rem;
background: #F4F7FE;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
display: flex;
align-items: center;
justify-content: center;
}
/* 高亮 */
.custom-menu-item.is-active {
background-color: #2B62F1;
color: #fff !important;
}
/* 悬停 */
.custom-menu-item:hover {
background-color: #2B62F1;
color: #fff !important;
}
/* 默认的下划线 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
background-color: #2B62F1;
border-bottom: none;
}
</style>

@ -6,7 +6,7 @@
<el-row>
<el-col :span="5">
<el-form-item label="项目名称" prop="postName" style="width: 100%;">
<el-input v-model="queryParams.postName" placeholder="请输入项目名称" clearable
<el-input v-model="queryParams.postName" placeholder="请输入项目名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
@ -18,15 +18,15 @@
</el-col>
<el-col :span="5">
<el-form-item label="现状分类" prop="status">
<el-select v-model="queryParams.status" placeholder="现状分类" clearable >
<el-select v-model="queryParams.status" placeholder="现状分类" clearable>
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
:value="dict.value" />
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域" >
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
@ -49,8 +49,8 @@
<div class="tablehead">
<div class="headtitle"><span>项目清单</span></div>
<div class="headbtn">
<el-button type="primary" icon="el-icon-search">下载模板</el-button>
<el-button type="primary" icon="el-icon-search">批量导入</el-button>
<el-button type="primary" icon="el-icon-search">下载模板</el-button>
<el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleImport"></el-button>
</div>
</div>
<!-- 导出行 -->
@ -95,9 +95,9 @@
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
</div>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改项目对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@ -126,6 +126,25 @@
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 批量导入对话框 :headers="upload.headers" -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xlsxlsx格式文件</span>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
@ -176,13 +195,49 @@ export default {
postSort: [
{ required: true, message: "项目顺序不能为空", trigger: "blur" }
]
}
},
//
upload: {
//
open: false,
//
title: "移动应用程序资产导入",
//
isUploading: false,
//
updateSupport: 0,
//
// headers: { Authorization: "Bearer " + getToken() },
//
url: process.env.VUE_APP_BASE_API + "/tc/assetApp/importData"
// url: location.origin + "/api/tc/assetApp/importData"
},
};
},
created() {
this.getList();
},
methods: {
//
handleImport() {
this.upload.open = true;
},
//
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
//
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
this.getList();
},
//
submitFileForm() {
this.$refs.upload.submit();
},
/** 查询项目列表 */
getList() {
this.loading = true;
@ -269,7 +324,7 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const postIds = row.postId || this.ids;
this.$modal.confirm('是否确认删除项目编号为"' + postIds + '"的数据项?').then(function () {
this.$modal.confirm('是否确认删除项目编号为"' + postIds + '"的数据项?' + '删除这条信息之后有可能找不回来了,请思考一下哟!' ).then(function () {
return delPost(postIds);
}).then(() => {
this.getList();
@ -313,7 +368,8 @@ export default {
.headbtn {
display: flex;
}
.tablebtntwo{
.tablebtntwo {
margin-top: 1rem;
margin-bottom: 1rem;
}

Loading…
Cancel
Save