|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div id="self-calendar">
|
|
|
- <el-col :span="24">
|
|
|
- <el-col :span="12">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="calendar">
|
|
|
<el-calendar>
|
|
|
<template #dateCell="{date, data}">
|
|
|
<el-row>
|
|
@@ -10,35 +10,35 @@
|
|
|
</template>
|
|
|
</el-calendar>
|
|
|
</el-col>
|
|
|
- <el-col :span="12" class="right">
|
|
|
- <el-col :span="24" class="info" v-if="info.id">
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <span class="jiantou"></span>
|
|
|
+ <el-col :span="24" class="listInfo" v-if="info.id">
|
|
|
<el-col :span="24" class="time">
|
|
|
<p>
|
|
|
<i class="el-icon-time"></i><span value-format="MM-dd">{{ info.time | getTime }}</span>
|
|
|
</p>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="organizer">
|
|
|
- {{ info.organizer }}
|
|
|
+ <p class="textOver">{{ info.organizer }}</p>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="title">
|
|
|
- {{ info.title }}
|
|
|
+ <p class="textOver">{{ info.title }}</p>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="date">
|
|
|
- <p>时间:{{ info.date }}</p>
|
|
|
+ <p class="textOver">时间:{{ info.date }}</p>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="address">
|
|
|
- <p>地点:{{ info.address }}</p>
|
|
|
+ <p class="textOver">地点:{{ info.address }}</p>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="info" v-else>
|
|
|
- <el-col :span="24" class="time">
|
|
|
+ <el-col :span="24" class="listInfo" v-else>
|
|
|
+ <!-- <el-col :span="24" class="time">
|
|
|
<p><i class="el-icon-time"></i><span value-format="MM-dd">--:--</span></p>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="organizer">
|
|
|
- 该日无招聘会
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="24" class="none">
|
|
|
+ 2020年毕业季大型招聘会 7月敬请关注
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- <span class="jiantou"></span>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</div>
|
|
@@ -105,22 +105,28 @@ p {
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
}
|
|
|
-/deep/.el-calendar {
|
|
|
- background-color: transparent;
|
|
|
+.textOver {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
-/deep/.el-calendar__body {
|
|
|
- padding: 0;
|
|
|
+.info {
|
|
|
+ padding: 0 10px;
|
|
|
}
|
|
|
-/deep/.el-calendar__header {
|
|
|
- border-bottom: none;
|
|
|
+.calendar {
|
|
|
+ height: 395px;
|
|
|
+ background: #789699;
|
|
|
+}
|
|
|
+/deep/.el-calendar {
|
|
|
+ background-color: #789699;
|
|
|
}
|
|
|
/deep/.el-calendar__title {
|
|
|
color: yellow;
|
|
|
font-weight: 微软雅黑;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
-/deep/.el-calendar__button-group {
|
|
|
- display: none;
|
|
|
+/deep/.el-calendar__body {
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
/deep/.el-calendar-table thead th {
|
|
|
padding: 12px 0;
|
|
@@ -128,9 +134,11 @@ p {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
/deep/.el-calendar-table .el-calendar-day {
|
|
|
- line-height: 70px;
|
|
|
- font-size: 25px;
|
|
|
+ line-height: 50px;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 18px;
|
|
|
text-align: center;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
/deep/.el-calendar-table tr td:first-child {
|
|
|
border-left: none;
|
|
@@ -142,6 +150,12 @@ p {
|
|
|
border-bottom: none;
|
|
|
border-right: none;
|
|
|
}
|
|
|
+/deep/.el-calendar__header {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+/deep/.el-calendar__button-group {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
/deep/.el-calendar-table td.is-today {
|
|
|
color: yellow;
|
|
|
background: #f8ab55;
|
|
@@ -152,62 +166,69 @@ p {
|
|
|
color: yellow;
|
|
|
border-radius: 50px;
|
|
|
}
|
|
|
-.right {
|
|
|
- width: 540px;
|
|
|
- height: 623px;
|
|
|
+.list {
|
|
|
+ position: relative;
|
|
|
+ height: 226px;
|
|
|
+ background: #789699;
|
|
|
+}
|
|
|
+.listInfo {
|
|
|
+ height: 200px;
|
|
|
+ width: 89%;
|
|
|
background: #fff;
|
|
|
+ margin: 13px 20px;
|
|
|
border-radius: 10px;
|
|
|
- position: relative;
|
|
|
- float: right;
|
|
|
}
|
|
|
.jiantou {
|
|
|
- top: 50%;
|
|
|
- left: -60px;
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
+ top: -17px;
|
|
|
+ left: 45%;
|
|
|
width: 0px;
|
|
|
height: 0;
|
|
|
- border-width: 30px;
|
|
|
+ border-width: 15px;
|
|
|
border-style: solid;
|
|
|
- border-color: #789699 #fff #789699 #789699;
|
|
|
+ border-color: #789699 #789699 #fff #789699;
|
|
|
}
|
|
|
-.time p {
|
|
|
- width: 185px;
|
|
|
- height: 57px;
|
|
|
- line-height: 57px;
|
|
|
+.listInfo .time p {
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
text-align: center;
|
|
|
border-radius: 50px;
|
|
|
background: #139cac;
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 13px;
|
|
|
color: #fff;
|
|
|
float: right;
|
|
|
- margin: 45px 25px 43px 0;
|
|
|
+ margin: 12px;
|
|
|
}
|
|
|
-.time p i {
|
|
|
- margin: 0 15px 0 0;
|
|
|
+.listInfo .time p i {
|
|
|
+ margin: 0 5px 0 0;
|
|
|
}
|
|
|
.organizer {
|
|
|
- font-size: 50px;
|
|
|
+ font-size: 20px;
|
|
|
color: #000;
|
|
|
text-align: center;
|
|
|
- padding: 0 25px;
|
|
|
- margin: 70px 0 100px 0;
|
|
|
+ padding: 0px 25px;
|
|
|
+}
|
|
|
+.none{
|
|
|
+ font-size: 24px;
|
|
|
+ color: #676767;
|
|
|
+ text-align: center;
|
|
|
+ padding: 70px 25px;
|
|
|
}
|
|
|
.title {
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 20px;
|
|
|
color: #000;
|
|
|
- padding: 15px 25px;
|
|
|
+ padding: 5px 25px;
|
|
|
}
|
|
|
.date {
|
|
|
- font-size: 24px;
|
|
|
+ font-size: 20px;
|
|
|
color: #000;
|
|
|
- text-align: cener;
|
|
|
- padding: 10px 25px;
|
|
|
+ padding: 0px 25px;
|
|
|
}
|
|
|
.address {
|
|
|
- font-size: 24px;
|
|
|
+ font-size: 20px;
|
|
|
color: #000;
|
|
|
- text-align: cener;
|
|
|
- padding: 10px 25px;
|
|
|
+ padding: 5px 25px;
|
|
|
}
|
|
|
</style>
|