395 lines
9.0 KiB
HTML
395 lines
9.0 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
|
|
<!--公共css-->
|
|
<style>
|
|
.el-card {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.image-slot {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f5f7fa;
|
|
color: #909399;
|
|
}
|
|
|
|
.el-icon-picture-outline {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.ele-body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.el-card {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<!--个人信息css-->
|
|
<style>
|
|
.home-user-info .el-card {
|
|
width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.home-user-info .info {
|
|
line-height: 40px;
|
|
color: black;
|
|
}
|
|
</style>
|
|
|
|
<!--待办css-->
|
|
<style>
|
|
.home-todo{
|
|
background: #ffffff;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.home-todo .el-tabs {
|
|
height: 100%;
|
|
}
|
|
|
|
.home-todo .el-tabs__content {
|
|
height: calc(100% - 55px);
|
|
overflow-y: auto;
|
|
}
|
|
.el-table__header,.el-table__body {
|
|
width: auto !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!--快速入口css-->
|
|
<style>
|
|
.home-quick-entry .el-card {
|
|
width: 100%;
|
|
}
|
|
.home-quick-entry .el-card .el-card__body{
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
height: calc(100% - 53.5px);
|
|
}
|
|
|
|
|
|
.home-quick-entry .quickEntries {
|
|
overflow-y: auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 50px;
|
|
}
|
|
|
|
.home-quick-entry .quickEntries .quickEntryItem img {
|
|
max-width: 50px;
|
|
}
|
|
|
|
.home-quick-entry .quickEntries .quickEntryItem {
|
|
border-radius: 10px;
|
|
font-size: 27px;
|
|
height: 90px;
|
|
max-height: 90px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 10px;
|
|
transition: transform 0.3s ease-in-out,
|
|
box-shadow 0.3s ease-in-out;
|
|
}
|
|
|
|
.home-quick-entry .quickEntries .quickEntryItem span {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.home-quick-entry .quickEntries .quickEntryItem:hover {
|
|
cursor: pointer;
|
|
background: #f3f3f3;
|
|
}
|
|
|
|
.home-quick-entry .quickEntries .quickEntryItem:hover {
|
|
animation: shake 0.3s;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
25% {
|
|
transform: translateX(-5px);
|
|
}
|
|
50% {
|
|
transform: translateX(5px);
|
|
}
|
|
75% {
|
|
transform: translateX(-5px);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!--活动css-->
|
|
<style>
|
|
.home-activity{
|
|
min-width: 500px;
|
|
}
|
|
.home-activity .el-card {
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.home-activity .el-empty {
|
|
padding: 40px 0 !important;
|
|
}
|
|
</style>
|
|
|
|
<!--平台入口css-->
|
|
<style>
|
|
.home-app-module .el-card {
|
|
width: 100%;
|
|
}
|
|
.home-app-module .el-card .el-card__body{
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
height: calc(100% - 53.5px);
|
|
}
|
|
|
|
.v-item-handle {
|
|
width: 120px;
|
|
height: 100px;
|
|
border: 1px solid #f3efef;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
transition: all 500ms;
|
|
color: #0779e4;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
flex: 0 0 auto;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.v-item-handle-label {
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.v-item-handle .el-image {
|
|
transition: width 0.3s ease,
|
|
height 0.3s ease;
|
|
transform-origin: center; /* 缩放的中心点 */
|
|
}
|
|
|
|
.v-item-handle:hover .el-image {
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
}
|
|
|
|
.v-item-handle:hover .fa {
|
|
color: white !important;
|
|
}
|
|
|
|
.v-item-handle span {
|
|
transition: all 500ms;
|
|
color: #000;
|
|
font-size: 16px;
|
|
}
|
|
.appModuleCard {
|
|
border: 3px solid #409EFF;
|
|
}
|
|
</style>
|
|
|
|
<!--工会新闻css-->
|
|
<style>
|
|
.home-news {
|
|
background: #ffffff;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.home-news .el-tabs {
|
|
height: 100%;
|
|
}
|
|
|
|
.home-news .el-tabs__content {
|
|
height: calc(100% - 55px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.home-news .el-tab-pane {
|
|
line-height: 38px;
|
|
color: black;
|
|
}
|
|
|
|
.home-news .el-tab-pane .news_time {
|
|
color: white;
|
|
padding: 4px 10px;
|
|
border-radius: 10px;
|
|
background: #1867b0;
|
|
}
|
|
|
|
.home-news .el-tab-pane div {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.home-news .el-tab-pane .news_text:hover {
|
|
color: #1867b0;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.el-card__header {
|
|
padding: 15px 20px !important;
|
|
}
|
|
.layout-grid-container{
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(100px, 1fr));
|
|
grid-template-rows: 220px 255px auto;
|
|
gap: 10px;
|
|
width: calc(100% - 20px);
|
|
height: calc(100% - 20px);
|
|
margin: 10px auto;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
.layout-grid-container .grid-item {
|
|
color: white;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.appModule-grid {
|
|
grid-column: 1 / 3; /* 元素1占据第1和第2列 */
|
|
grid-row: 1 / 2; /* 元素1占据第1行 */
|
|
}
|
|
|
|
.activity-grid {
|
|
grid-column: 3 / 4; /* 元素2占据第3列 */
|
|
grid-row: 1 / 3; /* 元素2跨越第1和第2行 */
|
|
}
|
|
|
|
.quickEntry-grid {
|
|
grid-column: 1 / 3; /* 元素3占据第1和第2列 */
|
|
grid-row: 2 / 3; /* 元素3占据第2行 */
|
|
}
|
|
|
|
.news-grid,
|
|
.todo-grid,
|
|
.user-grid {
|
|
grid-column: span 1; /* 每个元素占据1列 */
|
|
grid-row: 3 / 4; /* 所有元素都在第3行 */
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<div class="layout-grid-container">
|
|
<app-module class="appModule-grid grid-item"></app-module>
|
|
<quick-entry class="quickEntry-grid grid-item"></quick-entry>
|
|
<activity class="activity-grid grid-item"></activity>
|
|
<news class="news-grid grid-item"></news>
|
|
<todo class="todo-grid grid-item"></todo>
|
|
<user-info class="user-grid grid-item"></user-info>
|
|
</div>
|
|
|
|
|
|
<!-- <el-row type="flex" class="p10" style="column-gap: 10px;height: 100%">-->
|
|
<!-- <el-col :span="16">-->
|
|
<!-- <app-module class="appModule mb10"></app-module>-->
|
|
<!-- <quick-entry class="quickEntry mb10"></quick-entry>-->
|
|
<!-- <el-row :gutter="10">-->
|
|
<!-- <el-col :span="12">-->
|
|
<!-- <news></news>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="12">-->
|
|
<!-- <todo></todo>-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="8">-->
|
|
<!-- <activity class="mb10"></activity>-->
|
|
<!-- <user-info></user-info>-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
</div>
|
|
<script>
|
|
<!--#include("userInfo.js"){}#-->
|
|
<!--#include("todo.js"){}#-->
|
|
<!--#include("quickEntry.js"){}#-->
|
|
<!--#include("activity.js"){}#-->
|
|
<!--#include("appModule.js"){}#-->
|
|
<!--#include("news.js"){}#-->
|
|
|
|
new Vue({
|
|
el: "#app",
|
|
components: {
|
|
"user-info": userInfo,
|
|
todo,
|
|
"quick-entry": quickEntry,
|
|
activity,
|
|
"app-module": appModule,
|
|
news: news
|
|
},
|
|
data: function () {
|
|
return {
|
|
quickEntries: [],
|
|
activityOptions: [],
|
|
processInstanceOptions: [],
|
|
|
|
icon: "alipay"
|
|
}
|
|
},
|
|
methods: {
|
|
listQuickEntry() {
|
|
$.post("/platform/home/listQuickEntry").then((res) => {
|
|
if (res.code === 0) {
|
|
this.quickEntries = res.data
|
|
}
|
|
})
|
|
},
|
|
listActivity() {
|
|
$.post("/platform/h5/listHomeActivity").then((resp) => {
|
|
if (resp.code === 0) {
|
|
this.activityOptions = resp.data
|
|
}
|
|
})
|
|
},
|
|
enterActivity(item) {
|
|
// this.$store.dispatch("pjaxRoute", item.url)
|
|
},
|
|
|
|
//查询流程实例
|
|
listProcessInstance() {
|
|
$.post("/platform/wf/processInstance/page", {
|
|
pageNumber: 1,
|
|
pageSize: 10
|
|
})
|
|
.then((resp) => {
|
|
if (resp.code === 0) {
|
|
this.processInstanceOptions = resp.data.list
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
}
|
|
})
|
|
</script>
|
|
<style scoped></style>
|
|
|
|
<!--# } #-->
|