elink-star
/
epmet-work-pc
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

日历。。。

V1.0
dai 4 years ago
parent
c25de0c9cf
commit
794b198cfe
1 changed files with 184 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 232
      src/views/modules/communityParty/calendar/index.vue

232
src/views/modules/communityParty/calendar/index.vue
View File

@ -1,54 +1,118 @@
<template>
<div class="g-cnt">
<div class="m-cal">
<div class="sizer">
<div class="sizer-year">
<el-date-picker
v-model="currentYearStr"
value-format="yyyy"
type="year"
placeholder="选择年"
size="small"
style="width: 150px"
>
</el-date-picker>
</div>
<div class="sizer-month">
<div
class="month-item"
:class="{ 'z-on': m - 1 == currentMonth }"
:key="'month' + m"
@click="currentMonth = m - 1"
v-for="m in 12"
>
<el-badge :value="12" :hidden="m != 3" class="item">
<div class="month-text">{{ m }}月</div>
</el-badge>
<el-row :gutter="15">
<el-col :span="6">
<div class="m-sizer">
<div class="item">
<el-cascader
v-model="fmData.party"
:options="partyOptions"
@change="handleChangeParty"
></el-cascader>
</div>
<div class="item">
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</div>
</div>
<div class="sizer-btn">
<el-button type="primary" size="small">批量生成年度报表</el-button>
<div class="m-date">
<div class="date-top">2222年2月22日</div>
<div class="date-big">22</div>
<div class="date-week">星期五</div>
</div>
</div>
<calendar
:currentYear="currentYear"
:currentMonth="currentMonth"
@clickDate="handleChangeDate"
>
<template v-slot:date-item="{ info }">
<div class="tip">
<div class="tip-text">
<span class="z-on">主题当日</span> (已发布)
<div class="m-list">
<div class="list-title">今日活动</div>
<div class="list">
<div class="item">
<div class="item-title">
不忘初心牢记使命巴巴爸爸不不嘻嘻，分 额阿发文发文额
</div>
<div class="item-prop">
<span>活动类型：</span>
<span>发发发发发发付付</span>
</div>
<div class="item-prop">
<span>活动类型：</span>
<span>发发发发发发付付</span>
</div>
<div class="item-prop">
<span>活动类型：</span>
<span>发发发发发发付付</span>
</div>
<div class="item-prop">
<span>活动类型：</span>
<span>发发发发发发付付</span>
</div>
<div class="item-ope">
<el-button type="primary" size="mini">发布</el-button>
<el-button type="success" size="mini">编辑</el-button>
<el-button size="mini">删除</el-button>
</div>
</div>
<div class="tip-cnt">巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</div>
</div>
<div class="corn">
<div class="corn-num">8</div>
<div class="corn-text">日程</div>
</div>
<div class="m-ope">
<el-button type="warning" style="width: 48%">添加活动计划</el-button>
<el-button style="width: 48%">添加日程</el-button>
</div>
</el-col>
<el-col :span="18">
<div class="m-cal">
<div class="hd">
<div class="hd-year">
<el-date-picker
v-model="currentYearStr"
value-format="yyyy"
type="year"
placeholder="选择年"
size="small"
style="width: 150px"
>
</el-date-picker>
</div>
<div class="hd-month">
<div
class="month-item"
:class="{ 'z-on': m - 1 == currentMonth }"
:key="'month' + m"
@click="currentMonth = m - 1"
v-for="m in 12"
>
<el-badge :value="12" :hidden="m != 3" class="item">
<div class="month-text">{{ m }}月</div>
</el-badge>
</div>
</div>
<div class="hd-btn">
<el-button type="primary" size="small"
>批量生成年度报表</el-button
>
</div>
</div>
</template>
</calendar>
</div>
<calendar
:currentYear="currentYear"
:currentMonth="currentMonth"
@clickDate="handleChangeDate"
>
<template v-slot:date-item="{ info }">
<div class="tip">
<div class="tip-text">
<span class="z-on">主题当日</span> (已发布)
</div>
<div class="tip-cnt">巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</div>
</div>
<div class="corn">
<div class="corn-num">8</div>
<div class="corn-text">日程</div>
</div>
</template>
</calendar>
</div>
</el-col>
</el-row>
</div>
</template>
@ -68,6 +132,12 @@ export default {
return {
currentYearStr: todayObj.getFullYear() + "",
currentMonth: todayObj.getMonth(),
partyOptions: [],
fmData: {
party: "",
},
};
},
computed: {
@ -79,6 +149,8 @@ export default {
// await this.getPartyOggList()
},
methods: {
handleChangeParty() {},
handleChangeDate(item) {
console.log("handleChangeDate");
this.currentYearStr = item.year + "";
@ -105,16 +177,19 @@ export default {
@import "@/assets/scss/c/config.scss";
@import "@/assets/scss/c/function.scss";
$blue: #3e8ef7;
$red: #f33;
.g-cnt {
background-color: #ffffff;
padding: 20px;
}
.m-cal {
.sizer {
.hd {
display: flex;
margin-bottom: 20px;
.sizer-month {
.hd-month {
display: flex;
.month-item {
@ -127,7 +202,7 @@ export default {
&.z-on {
.month-text {
background-color: #3e8ef7;
background-color: $blue;
color: #ffffff;
}
}
@ -145,6 +220,10 @@ export default {
}
}
}
.hd-btn {
margin-left: auto;
}
}
.tip {
@ -159,7 +238,7 @@ export default {
cursor: pointer;
color: #999999;
.z-on {
color: #ff3333;
color: $red;
}
.tip-text {
@include toe;
@ -182,7 +261,7 @@ export default {
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #ff3333;
background-color: $red;
}
}
@ -231,4 +310,61 @@ export default {
}
}
}
.m-sizer {
.item {
margin-bottom: 10px;
}
}
.m-date {
text-align: center;
color: $blue;
line-height: 1.5;
background-color: #f3f4f5;
padding: 20px;
.date-top {
font-size: 24px;
}
.date-big {
font-size: 100px;
}
.date-week {
font-size: 24px;
}
}
.m-list {
margin-top: 20px;
.list-title {
width: 100px;
text-align: center;
line-height: 24px;
background-color: $red;
color: #ffffff;
}
.list {
.item {
border-top: 1px solid #eee;
padding: 10px 0;
line-height: 1.5;
overflow: hidden;
.item-title {
font-weight: bold;
}
.item-prop {
margin: 4px 0;
}
.item-ope {
margin-top: 10px;
float: right;
}
}
}
}
.m-ope {
margin-top: 40px;
display: flex;
justify-content: space-between;
}
</style>

Write Preview
Loading…
Cancel
Save