前端布局-flex 

 // vue页面编写 组件CountDown
 1 <template>
 2   <router-link
 3     :to="{name: 'classDetail',query: {classId: item.ClassId, title: item.ClassName}}"
 4     tag="div"
 5     class="class-item"
 6   >
 7     <div class="left">
 8       <img
 9         v-lazy="item.ClassImg"
10         class="class-img"
11       >
12       <span
13         v-if="item.ClassType === 1"
14         class="class-type"
15       >
16         线上班
17       </span>
18       <span
19         v-if="item.ClassType === 2"
20         class="class-type"
21       >
22         线下班
23       </span>
24     </div>
25     <div class="right">
26       <div class="class-name">
27         {{ item.ClassName }}
28       </div>
29       <div class="eroll-time">
30         报名时间：{{ item.OrderCreateTimeStr }}
31       </div>
32       <div class="btn-restime">
33         <van-button
34           v-if="item.OrderStatus === 2"
35           class="btn-study"
36           size="small"
37         >
38           立即学习
39         </van-button>
40         <van-button
41           v-if="item.OrderStatus === 1"
42           class="btn-pay"
43           size="small"
44           @click.stop="onPay(item.OrderId, item.OrderNumber)"
45         >
46           立即支付
47         </van-button>
48         <div
49           v-show="item.OrderStatus === 1"
50           class="countdown"
51         >
52           <CountDown
53             :diff-time="+item.OrderRestTime"
54             :interval-time="30"
55             class="order-restime"
56             @timeEnded="onTimeEnded"
57           >
58             <template slot-scope="{cd}">
59               剩余{{ cd.hour }}时{{ cd.minute }}分
60             </template>
61           </CountDown>
62         </div>
63       </div>
64     </div>
65   </router-link>
66 </template>
// css样式
.class-item {
  display: flex;
  justify-content: space-between;
  position: relative; // 为了实现图片左上角的小Tips，对应css的.class-type
  height: 150px;
  width: 100%;
  margin-bottom: 50px;
  align-items: center;
}
.class-item:last-child {
  margin-bottom: 0;
}
.left {
  width: 250px;
  height: 150px;
}
.class-img {
  width: 100%;
  border-radius: 6px;
}
.class-type {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size:22px;
  color: #fff;
  background-color: #03C9BB;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
}
.right {
  width: calc(100% -270px);
}
.class-name {
  width: 100%;
  color: #333333;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 19px;
  @include ellipsis; // 超出部分隐藏、不换行、显示...
}
.eroll-time {
  width: 100%;
  color: #666666;
  font-size: 24px;
  margin-bottom: 20px;
  @include ellipsis;
}
.btn-restime {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/deep/ .van-button--small {
  padding: 0px;
}
.btn-study, .btn-pay {
  width: 120px;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
}
.btn-study {
  color: #03C9BB;
  border: 1px solid #03C9BB;
}
.btn-pay {
  color: #BA2401;;
  border: 1px solid #BA2401;
}
.countdown {
  font-size: 24px;
  color: #BA2401;
}

 下图为代码实现的页面样式：

 

posted @ 2019-03-13 20:57  辰熙ali  阅读(156)  评论(0)    收藏  举报