311 lines
8.7 KiB
HTML
311 lines
8.7 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.home .card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
font-family: cursive;
|
|
}
|
|
|
|
.quickEntries {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 10px;
|
|
max-height: 210px;
|
|
}
|
|
|
|
.quickEntries .quickEntryItem img {
|
|
max-width: 50px;
|
|
}
|
|
|
|
.quickEntries .quickEntryItem {
|
|
max-height: 210px;
|
|
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;
|
|
}
|
|
|
|
.quickEntries .quickEntryItem span {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.quickEntries .quickEntryItem:hover {
|
|
cursor: pointer;
|
|
background: #f3f3f3;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.top-container {
|
|
background: #fff;
|
|
padding: 20px 10px;
|
|
display: grid;
|
|
grid-template-columns: 72px 3fr 1fr 1fr;
|
|
grid-column-gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-container .avatar-wrapper {
|
|
width: 72px;
|
|
height: 72px;
|
|
line-height: 72px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.top-container .avatar-wrapper img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.top-container .basic-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.top-container .basic-wrapper .welcome {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5em;
|
|
color: rgba(0, 0, 0, 0.8509803921568627);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
.top-container .basic-wrapper .text-secondary {
|
|
color: rgba(0, 0, 0, 0.45098039215686275);
|
|
}
|
|
|
|
.top-container .date-wrap {
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
.top-container .date-wrap .date {
|
|
color: rgba(0, 0, 0, 0.8509803921568627);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 1.75rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.activity_list {
|
|
width: calc(100% - 300px);
|
|
max-width: calc(100% - 300px);
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.wrap {
|
|
display: flex;
|
|
column-gap: 20px;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.wrap {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.wrap .activity_list {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.el-calendar {
|
|
width: 300px;
|
|
}
|
|
|
|
.el-calendar .el-calendar__header {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.el-calendar__body {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.el-divider {
|
|
margin: 0;
|
|
}
|
|
|
|
.el-timeline {
|
|
padding: 0;
|
|
}
|
|
|
|
.el-calendar-table td {
|
|
border: none !important;
|
|
}
|
|
|
|
.el-calendar-table td.is-selected {
|
|
border-radius: 9999px;
|
|
background-color: unset !important;
|
|
}
|
|
|
|
.el-calendar-table .el-calendar-day {
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
.el-calendar-table .el-calendar-day:hover {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.tips {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.el-timeline-item__content {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.el-timeline-item__content:hover {
|
|
color: #1890ff;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<div class="padding10X">
|
|
<div class="top-container">
|
|
<div class="avatar-wrapper">
|
|
<img
|
|
v-if="!$store.state.user.sex || $store.state.user.sex==='男'"
|
|
alt=""
|
|
src="/assets/platform/img/home/avatar_boy.png"
|
|
class="user-avatar"
|
|
/>
|
|
<img v-else alt="" src="/assets/platform/img/home/avatar_girl.png" class="user-avatar" />
|
|
</div>
|
|
<div class="basic-wrapper">
|
|
<div class="welcome">{{$store.state.user.username}}，开始您一天的工作吧！</div>
|
|
<span class="text-secondary">{{$store.state.user.unit.name}} {{$store.state.user.union.name}}</span>
|
|
<span class="text-secondary">{{$store.state.user.sex}} {{$store.state.user.userState}} {{$store.state.user.personType}}</span>
|
|
</div>
|
|
<div class="weather-wrap"></div>
|
|
<div class="date-wrap">
|
|
<div class="date">{{$moment().format('YYYY年MM月DD日')}}</div>
|
|
<div class="week">{{$moment().format('dddd')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-card class="mt10" shadow="never">
|
|
<div class="card-title" slot="header">快速入口</div>
|
|
<div class="quickEntries">
|
|
<div v-for="item in quickEntries" :key="item.id" @click="pjaxReplace(item.href)" class="quickEntryItem">
|
|
<svg-icon :name="item.icon" :size="40" style="color: red"></svg-icon>
|
|
<span>{{item.name}}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-row :gutter="20" class="mt10">
|
|
<el-col :span="16"></el-col>
|
|
<el-col :span="8">
|
|
<el-card shadow="never">
|
|
<div class="card-title" slot="header">最新活动</div>
|
|
<div v-for="item in activityOptions" :key="item.id">
|
|
<div style="width: 100%">
|
|
<div style="padding: 14px; background-color: #fff; position: relative">
|
|
<div style="display: flex; justify-content: center; align-items: center">
|
|
<!-- :src="item.cover"-->
|
|
<el-image src="https://img.yzcdn.cn/vant/t-thirt.jpg" alt="" style="margin: 3px 14px 0 0; width: 84px; height: 84px">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
<div style="flex: 1">
|
|
<div style="line-height: 22px; ont-size: 16px; color: #111">{{item.name}}</div>
|
|
<div style="margin-top: 6px; line-height: 20px; color: #999">{{item.startDate}}-{{item.endDate}}</div>
|
|
</div>
|
|
<el-tooltip content="去报名" placement="top-start">
|
|
<div @click="enterActivity(item)">
|
|
<svg-icon name="ant-design_tag-twotone" :size="30" style="color: var(--color-primary)"></svg-icon>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-button type="primary" icon="el-icon-edit" @click="$refs.icon.showIconModal()">cxccc</el-button>
|
|
<icon-selector ref="icon" v-model="icon"></icon-selector>
|
|
</div>
|
|
<script nonce="${cspNonce!}">
|
|
new Vue({
|
|
el: "#app",
|
|
components: {
|
|
"icon-selector": httpVueLoader("/components/plugins/sysIconSelector/index.vue?v=" + new Date().getTime())
|
|
},
|
|
store,
|
|
data: function () {
|
|
return {
|
|
quickEntries: [],
|
|
activityOptions: [],
|
|
icon: "alipay"
|
|
}
|
|
},
|
|
methods: {
|
|
listRecommendApp() {
|
|
this.$axios.post("/platform/home/listRecommendApp").then((res) => {
|
|
if (res.code === 0) {
|
|
this.quickEntries = res.data
|
|
}
|
|
})
|
|
},
|
|
listActivity() {
|
|
this.$axios.post("/platform/h5/listHomeActivity").then((resp) => {
|
|
if (resp.code === 0) {
|
|
this.activityOptions = resp.data
|
|
}
|
|
})
|
|
},
|
|
enterActivity(item) {
|
|
this.$store.dispatch("pjaxRoute", item.url)
|
|
}
|
|
},
|
|
created() {
|
|
this.listRecommendApp()
|
|
this.listActivity()
|
|
this.listProcessInstance()
|
|
}
|
|
})
|
|
</script>
|
|
<style scoped></style>
|
|
|
|
<!--# } #-->
|