<template>
|
<div class="main">
|
<div class="main_left">
|
<div class="main_left_head">
|
<div class="head_item">
|
<div class="head_item_left">
|
<span>待办工单</span>
|
<span>12</span>
|
<span>查看更多</span>
|
</div>
|
<img class="head_item_icon" src="@/assets/indexIcon/ic_daibangongdan@2x.png" />
|
</div>
|
<div class="head_item">
|
<div class="head_item_left">
|
<span>待巡检</span>
|
<span>12</span>
|
<span>查看更多</span>
|
</div>
|
<img class="head_item_icon" src="@/assets/indexIcon/ic_daixuncha@2x.png" />
|
</div>
|
<div class="head_item">
|
<div class="head_item_left">
|
<span>待盘点</span>
|
<span>12</span>
|
<span>查看更多</span>
|
</div>
|
<img class="head_item_icon" src="@/assets/indexIcon/ic_daipandian@2x.png" />
|
</div>
|
</div>
|
<div class="main_left_menu">
|
<div class="main_left_menu_title">
|
<span>常用功能</span>
|
<div class="main_left_menu_title_edit">
|
<img src="@/assets/indexIcon/ic_daibangongdan@2x.png" />
|
<span>自定义功能</span>
|
</div>
|
</div>
|
<div class="main_left_menu_list">
|
<div class="list_item" v-for="(item, index) in menu" :key="index">
|
<div class="list_item_left">
|
<img :src="item.icon" />
|
<span>{{item.name}}</span>
|
</div>
|
<i class="el-icon-arrow-right"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main_right">
|
<div class="main_right_title">日程</div>
|
<div class="main_right_search">
|
<el-select v-model="value" style="width: 150px; margin-right: 15px;" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-select v-model="value" style="width: 150px;" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="main_right_date">
|
<el-calendar v-model="value" :mark-data="markData"></el-calendar>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
menu: [
|
{ name: '房态管理', icon: require('@/assets/indexIcon/ic_fangtaiguanli@2x.png') },
|
{ name: '工单列表', icon: require('@/assets/indexIcon/ic_gongdanliebiao@2x.png') },
|
{ name: '问题上报', icon: require('@/assets/indexIcon/ic_wentishangbao@2x.png') },
|
{ name: '新建工单', icon: require('@/assets/indexIcon/ic_xinjiangongdan@2x.png') },
|
{ name: '设备管理', icon: require('@/assets/indexIcon/ic_shebeiguanli@2x.png') },
|
{ name: '巡检任务', icon: require('@/assets/indexIcon/ic_xunjianrenwu@2x.png') },
|
{ name: '合同列表', icon: require('@/assets/indexIcon/ic_hetongliebiao@2x.png') },
|
{ name: '库存查询', icon: require('@/assets/indexIcon/ic_kucunchaxun@2x.png') },
|
{ name: '账单列表', icon: require('@/assets/indexIcon/ic_zhangdanliebiao@2x.png') },
|
{ name: '新增入库单', icon: require('@/assets/indexIcon/ic_xinzengruku@2x.png') },
|
{ name: '新增出库单', icon: require('@/assets/indexIcon/ic_xinzengchuku@2x.png') },
|
{ name: '资产清单', icon: require('@/assets/indexIcon/ic_zichan@2x.png') },
|
],
|
options: [],
|
value: '',
|
markData: [
|
{
|
date: '2025-01-22', // 标记的日期
|
// 自定义标记内容
|
content: '<div style="color: red;">重要事件</div>'
|
},
|
{
|
date: '2025-01-19',
|
content: '生日'
|
}
|
]
|
}
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main {
|
width: 100%;
|
height: calc(100vh - 48px - 56px - 35px);
|
padding: 15px;
|
box-sizing: border-box;
|
background: #F4F7FC;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.main_left {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.main_left_head {
|
width: 100%;
|
height: 199px;
|
background: #FFFFFF;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
padding: 20px;
|
box-sizing: border-box;
|
.head_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #F1F5FF;
|
border-radius: 8px;
|
margin-right: 15px;
|
padding: 28px 20px;
|
box-sizing: border-box;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.head_item_left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
span {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 17px;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 30px;
|
color: #111111;
|
margin-top: 6px;
|
margin-bottom: 14px;
|
}
|
&:nth-child(3) {
|
font-weight: 400;
|
font-size: 13px;
|
color: #999999;
|
}
|
}
|
}
|
.head_item_icon {
|
width: 60px;
|
height: 60px;
|
}
|
}
|
}
|
.main_left_menu {
|
width: 100%;
|
height: calc(100% - 214px);
|
background: #FFFFFF;
|
border-radius: 8px;
|
margin-top: 15px;
|
padding: 20px;
|
box-sizing: border-box;
|
.main_left_menu_title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
font-weight: 600;
|
font-size: 18px;
|
color: #222222;
|
}
|
.main_left_menu_title_edit {
|
display: flex;
|
align-items: center;
|
img {
|
width: 15px;
|
height: 15px;
|
}
|
span {
|
font-weight: 400;
|
font-size: 14px;
|
color: #3E80EF;
|
margin-left: 5px;
|
}
|
}
|
}
|
.main_left_menu_list {
|
width: 100%;
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.list_item {
|
cursor: pointer;
|
width: 24%;
|
height: 70px;
|
background: #FFFFFF;
|
border-radius: 8px;
|
border: 1px solid #EEEEEE;
|
padding: 0 16px;
|
box-sizing: border-box;
|
margin-bottom: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.list_item_left {
|
display: flex;
|
align-items: center;
|
img {
|
width: 40px;
|
height: 40px;
|
margin-right: 5px;
|
}
|
span {
|
font-weight: 500;
|
font-size: 15px;
|
color: #222222;
|
}
|
}
|
}
|
}
|
}
|
}
|
.main_right {
|
flex-shrink: 0;
|
width: 500px;
|
height: 100%;
|
margin-left: 15px;
|
background: #FEFEFF;
|
border-radius: 8px;
|
padding: 20px;
|
box-sizing: border-box;
|
.main_right_title {
|
font-weight: 600;
|
font-size: 18px;
|
color: #222222;
|
margin-bottom: 12px;
|
}
|
.main_right_date {
|
width: 100%;
|
height: 300px;
|
::v-deep .el-calendar-table tr td:first-child{
|
border: none;
|
}
|
::v-deep .el-calendar-table tr:first-child td{
|
border: none;
|
}
|
::v-deep .el-calendar-table__row td{
|
border: none;
|
}
|
::v-deep .el-calendar-table .el-calendar-day {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
}
|
</style>
|
