suzhou-jichuang-lanhai
/
Gyyq-Upstairs
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
严飞永 1 month ago
parent 87fb0ffa43
commit 204444e01d
12 changed files with 204 additions and 68 deletions
Show Stats Download Patch File Download Diff File

12
src/App.vue
Unescape View File

@ -21,8 +21,18 @@ export default {
} }
}; };
</script> </script>
<style scoped> <style >
#app .theme-picker { #app .theme-picker {
display: none; 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> </style>

BIN
src/assets/images/detailsicon/icon-bf@2x (1).png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
src/assets/images/icon-bf@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

1
src/layout/index.vue
Unescape View File

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

3
src/views/components/ProjectDetails/Buildings.vue
Unescape View File

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

37
src/views/components/ProjectDetails/Liver.vue
Unescape View File

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

2
src/views/components/ProjectDetails/Models.vue
Unescape View File

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

18
src/views/components/ProjectDetails/Projectgift.vue
Unescape View File

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

19
src/views/components/ProjectDetails/Projectpicture.vue
Unescape View File

@ -13,12 +13,6 @@
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;"> style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑 编辑
</el-button> </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>
</div> </div>
<!-- 内容区 --> <!-- 内容区 -->
@ -28,10 +22,12 @@
</div> </div>
<div class="descriptionsdiv"> <div class="descriptionsdiv">
<div>评价等级</div> <div>评价等级</div>
<el-descriptions direction="vertical" :column="4" border> <div class="tablebody">
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item> <el-descriptions direction="vertical" :column="4" border>
<el-descriptions-item label="手机号">18100000000</el-descriptions-item> <el-descriptions-item label="评价要素">kooriookami</el-descriptions-item>
</el-descriptions> <el-descriptions-item label="评价排名">18100000000</el-descriptions-item>
</el-descriptions>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -161,4 +157,7 @@ export default {
.two-row-item { .two-row-item {
height: 20rem; height: 20rem;
} }
.tablebody {
margin-top: 2rem;
}
</style> </style>

25
src/views/components/ProjectDetails/Projectpicturetwo.vue
Unescape View File

@ -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>

71
src/views/manage/details/index.vue
Unescape View File

@ -2,16 +2,8 @@
<div class="containerbody"> <div class="containerbody">
<!-- 目录 --> <!-- 目录 -->
<div class="containerhead"> <div class="containerhead">
<el-menu <el-menu :default-active="activeSection" mode="horizontal" @select="scrollToSection" class="custom-menu">
:default-active="activeSection" <el-menu-item v-for="(item, index) in sections" :key="index" :index="item.id" class="custom-menu-item">
mode="horizontal"
@select="scrollToSection"
>
<el-menu-item
v-for="(item, index) in sections"
:key="index"
:index="item.id"
>
{{ item.label }} {{ item.label }}
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
@ -30,16 +22,18 @@
<Companyenter id="companyenter"></Companyenter> <Companyenter id="companyenter"></Companyenter>
<!-- 项目画像 --> <!-- 项目画像 -->
<Projectpicture id="projectpicture"></Projectpicture> <Projectpicture id="projectpicture"></Projectpicture>
<!-- 项目图例 -->
<Projectpicturetwo id="projectpicturetwo"></Projectpicturetwo>
<!-- 项目巡礼 --> <!-- 项目巡礼 -->
<Projectgift id="projectgift"></Projectgift> <Projectgift id="projectgift"></Projectgift>
<!-- 现场实况 --> <!-- 现场实况 -->
<Liver id="liver"></Liver> <Liver id="liver"></Liver>
<!-- 项目备忘录 --> <!-- 项目备忘录 -->
<Memo id="memo"></Memo> <Memo id="memo"></Memo>
<!-- 其他信息 -->
<el-backtop <Memo id="others"></Memo>
target="body"> <!-- 返回顶部 -->
</el-backtop> <!-- <el-backtop target=".backtop"></el-backtop> -->
</div> </div>
</template> </template>
@ -54,6 +48,7 @@ import Months from '../../components/ProjectDetails/Months.vue';
import Programme from '../../components/ProjectDetails/Programme.vue'; import Programme from '../../components/ProjectDetails/Programme.vue';
import Projectgift from '../../components/ProjectDetails/Projectgift.vue'; import Projectgift from '../../components/ProjectDetails/Projectgift.vue';
import Projectpicture from '../../components/ProjectDetails/Projectpicture.vue'; import Projectpicture from '../../components/ProjectDetails/Projectpicture.vue';
import Projectpicturetwo from '../../components/ProjectDetails/Projectpicturetwo.vue';
export default { export default {
components: { components: {
@ -66,7 +61,8 @@ export default {
Months, Months,
Programme, Programme,
Projectgift, Projectgift,
Projectpicture Projectpicture,
Projectpicturetwo
}, },
data() { data() {
return { return {
@ -79,9 +75,11 @@ export default {
{ id: 'months', label: '月度进展信息' }, { id: 'months', label: '月度进展信息' },
{ id: 'companyenter', label: '企业入驻信息' }, { id: 'companyenter', label: '企业入驻信息' },
{ id: 'projectpicture', label: '项目画像' }, { id: 'projectpicture', label: '项目画像' },
{ id: 'projectpicturetwo', label: '项目图例' },
{ id: 'projectgift', label: '项目巡礼' }, { id: 'projectgift', label: '项目巡礼' },
{ id: 'liver', label: '现场实况' }, { id: 'liver', label: '现场实况' },
{ id: 'memo', label: '项目备忘录' } { id: 'memo', label: '项目备忘录' },
{ id: 'others', label: '其他信息' }
] ]
}; };
}, },
@ -102,10 +100,11 @@ export default {
<style scoped> <style scoped>
.containerbody { .containerbody {
height: auto;
padding: .3rem .5rem; padding: .3rem .5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 1rem;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
@ -119,4 +118,42 @@ export default {
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1); box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem; 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> </style>

76
src/views/manage/information/index.vue
Unescape View File

@ -18,15 +18,15 @@
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="现状分类" prop="status"> <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" <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-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="活动区域"> <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="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
@ -49,8 +49,8 @@
<div class="tablehead"> <div class="tablehead">
<div class="headtitle"><span>项目清单</span></div> <div class="headtitle"><span>项目清单</span></div>
<div class="headbtn"> <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>
</div> </div>
<!-- 导出行 --> <!-- 导出行 -->
@ -95,9 +95,9 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
</div> </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> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@ -126,6 +126,25 @@
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog> </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>仅允许导入xls、xlsx格式文件。</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> </div>
</template> </template>
@ -176,13 +195,49 @@ export default {
postSort: [ postSort: [
{ required: true, message: "项目顺序不能为空", trigger: "blur" } { 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() { created() {
this.getList(); this.getList();
}, },
methods: { 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() { getList() {
this.loading = true; this.loading = true;
@ -269,7 +324,7 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const postIds = row.postId || this.ids; const postIds = row.postId || this.ids;
this.$modal.confirm('是否确认删除项目编号为"' + postIds + '"的数据项？').then(function () { this.$modal.confirm('是否确认删除项目编号为"' + postIds + '"的数据项？' + '删除这条信息之后有可能找不回来了，请思考一下哟！' ).then(function () {
return delPost(postIds); return delPost(postIds);
}).then(() => { }).then(() => {
this.getList(); this.getList();
@ -313,7 +368,8 @@ export default {
.headbtn { .headbtn {
display: flex; display: flex;
} }
.tablebtntwo{
.tablebtntwo {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }

Write Preview
Loading…
Cancel
Save