no message

src/components/newPersonalCenter/block/model/SmallComponents/Coupon.vue

+<style scoped>
+._content_item{
+    display: flex;
+    flex-wrap: wrap;
+}
+._content_item ._item{
+    width: 220px;
+    position: relative;
+    transition: all linear .5s;
+    overflow: hidden;
+    margin: 5px 4px;
+}
+._content_item ._item:hover{
+    box-shadow: 0px 1px 13px 0px rgb(189, 189, 189);
+}
+._content_item ._top{
+    background-color: #F1BC69;
+}
+._content_item ._top ._time{
+    color: #A7711C;
+}
+._content_item ._top._blue{
+    background-color: #8794E2;
+}
+._content_item ._top._blue ._time{
+    color: #4C58A4;
+}
+._content_item div._top._gray{
+    background-color: #C3C3C3 !important;
+}
+._content_item div._top._gray ._overdue,._content_item div._top._gray ._info_bottom{
+    display: none
+}
+._content_item div._top._gray ._info_sale{
+    color: #FFFFFF !important;
+}
+._content_item div._top._gray ._time{
+    color: #777777 !important;
+}
+._top_raduis{
+    display: flex;
+    justify-content: space-between;
+}
+._top_raduis span{
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin: 3px;
+    border-radius: 50%;
+    background-color: white;
+    margin-top: -4px;
+}
+._item ._top ._overdue{
+    background-color: #E9F026;
+    color: #666666;
+    padding: 4px 6px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 12px;
+}
+._item ._top ._info_details{
+    padding: 15px 10px;
+}
+._item ._top ._info_details ._info_sale{
+    font-size: 30px;
+    color: white;
+}
+._item ._top ._info_details ._info_sale span{
+    font-size: 20px;
+    color: white;
+}
+._item ._top ._info_details ._info_full{
+    color: #FFFFFF;
+    font-size: 12px;
+    padding: 5px 0;
+}
+._item ._top ._info_details ._info_time{
+    font-size: 12px;
+}
+._item ._top ._info_details  ._info_bottom{
+    padding: 1px 5px;
+    color: #A7711C;
+    font-size: 12px;
+    position: absolute;
+    border: 1px solid #A7711C;
+    border-radius: 4px;
+    right: 13px;
+    top: 24px;
+    cursor: pointer;
+}
+._item ._bottom{
+    padding: 15px 10px;
+    background-color: #F9F9F9;
+}
+._item ._bottom p{
+    font-size: 12px;
+    color: #333333;
+    font-weight: bold;
+    margin-bottom: 13px;
+}
+._item ._bottom p._bottom_info{
+    color: #666666;
+    font-weight: 300;
+}
+._item ._bottom p._margin_bt0{
+    margin-bottom: 0 !important;
+}
+p._info_coupon_name{
+    font-size: 18px !important;
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: white;
+}
+</style>
+<template>
+  <div class="_item">
+    <div class="_top" :class="{'_blue':item.couponsType===1,'_gray':item.couponEffectStatus===3,}">
+      <div class="_top_raduis">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <div class="_overdue" v-if="item.warning">即将过期</div>
+      <div class="_info_details">
+        <p class="_info_coupon_name" :title="item.couponsName">{{item.couponsName}}</p>
+        <p class="_info_sale" v-if="item.couponsType !== 1">
+          {{item.denomination}}
+          <span>折</span>
+        </p>
+        <p class="_info_sale" v-else>
+          <span>￥</span>
+          {{item.denomination}}
+        </p>
+        <p class="_info_full">满{{item.useCondition}}可用</p>
+        <p class="_info_time _time">有效时间：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}</p>
+        <p class="_info_bottom" @click="goUrl('heel',true)">去使用</p>
+      </div>
+    </div>
+    <div class="_bottom">
+      <p class="_bottom_tit">可用线路及系列</p>
+      <p
+        class="_bottom_info"
+      >{{item.lineName === '' ? '不限' : item.lineName}}-{{item.lineTeamName === '' ? '不限' : item.lineTeamName}}</p>
+      <p class="_bottom_tit">优惠券来源</p>
+      <p class="_bottom_info _margin_bt0">{{item.accessType === 1 ? '抽奖活动' : '其他'}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["item"],
+  data() {
+    return {};
+  },
+  methods: {
+    goUrl(path) {
+      this.$router.push({ name: path });
+    }
+  },
+  mounted() {}
+};
+</script>