|
|
@@ -30,7 +30,47 @@
|
|
|
<p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right"></div>
|
|
|
+ <div class="right">
|
|
|
+ <img src="@/assets/images/base/placehorder-icon.png"
|
|
|
+ class="header"
|
|
|
+ alt="">
|
|
|
+ <div class="info">
|
|
|
+ <h2>黄老师<span>【185****2109】</span></h2>
|
|
|
+ <p class="subMsg">发至 <span class='san'></span> <span style="margin-left:30px">我</span></p>
|
|
|
+ <div class="textWrap">
|
|
|
+ <p>审批事项: 合班</p>
|
|
|
+ <p>开始时间: 2019-09-01 09:00</p>
|
|
|
+ <p>结束时间: 2019-09-01 09:00</p>
|
|
|
+ <p>备注:班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少</p>
|
|
|
+ </div>
|
|
|
+ <div class="timeline">
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item placement='center'>
|
|
|
+ <div class='timeMsg'>
|
|
|
+ <p class="name">我</p>
|
|
|
+ <p class='status'>审批中</p>
|
|
|
+ </div>
|
|
|
+ <div slot='dot'>
|
|
|
+ <img class='dot'
|
|
|
+ src="@/assets/images/base/clock.png"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+ </el-timeline-item>
|
|
|
+ <el-timeline-item placement='center'>
|
|
|
+ <div class='timeMsg'>
|
|
|
+ <p class="name">我</p>
|
|
|
+ <p class='status'>审批中</p>
|
|
|
+ </div>
|
|
|
+ <div slot='dot'>
|
|
|
+ <img class='dot'
|
|
|
+ src="@/assets/images/base/clock.png"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -44,7 +84,10 @@ export default {
|
|
|
Htrashicon: require('@/assets/images/base/trashicon-h.png'),
|
|
|
boxicon: require('@/assets/images/base/boxicon.png'),
|
|
|
Hboxicon: require('@/assets/images/base/boxicon-h.png')
|
|
|
- }
|
|
|
+ },
|
|
|
+ activities: [{
|
|
|
+
|
|
|
+ }]
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -157,5 +200,85 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .right {
|
|
|
+ padding: 18px 24px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ width: 570px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #e4e8eb;
|
|
|
+ margin-left: 25px;
|
|
|
+ .header {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ position: relative;
|
|
|
+ top: 7px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ position: relative;
|
|
|
+ h2 {
|
|
|
+ color: #212223;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 0px;
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subMsg {
|
|
|
+ position: relative;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #444;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .san {
|
|
|
+ // margin-left: 110px;
|
|
|
+ float: left;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-width: 5px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: transparent #909191 transparent transparent;
|
|
|
+ transform: rotate(180deg); /*顺时针旋转90°*/
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .textWrap {
|
|
|
+ width: 316px;
|
|
|
+ line-height: 21px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #212223;
|
|
|
+ margin: 12px 0 34px;
|
|
|
+ }
|
|
|
+ .dot {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ .timeMsg {
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ .name {
|
|
|
+ font-size: #444;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #62a070;
|
|
|
+ }
|
|
|
+ .status.waring {
|
|
|
+ color: #f97215;
|
|
|
+ }
|
|
|
+ .status.end {
|
|
|
+ color: #aaaaaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
