Blame view

apps/pages/showorder/components/desc-footer.vue 2.2 KB
htoooth authored
1 2
<template>
  <div class="footer">
htoooth authored
3
    <TextEllipsis :text="text" class="desc" :isLimitHeight="isLimitHeight" :height="75">
htoooth authored
4 5 6 7 8 9 10 11
      <template slot="more"><span>...</span><span class="link" @click="onClick">展开</span></template>
      <span slot="after" v-if="!isLimitHeight" @click="isLimitHeight=true"></span>
    </TextEllipsis>

    <div class="product-wrapper">
      <div class="products">
        <Products></Products>
      </div>
htoooth authored
12
      <div class="share">
htoooth authored
13 14
        <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onCommentClick"></WidgetIconBtn>
        <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
htoooth authored
15
        <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
htoooth authored
16
      </div>
htoooth authored
17 18 19 20 21 22
    </div>
  </div>
</template>

<script>
htoooth authored
23
import Products from './products';
htoooth authored
24 25 26 27

export default {
  name: 'DescFooter',
  components: {
htoooth authored
28
    Products,
htoooth authored
29 30 31 32
  },
  data() {
    return {
      text: '很好,能抢到真的不容易!整体感觉很舒服,庆幸下手一定要快准狠!如果能够再抢到一双就更好了,下次加买很多双,很好,能抢到真的不容易!整体感觉很舒服,庆幸下手一定要快准狠!如果能够再抢到一双就更好了,下次加买很多双',
htoooth authored
33 34 35 36 37
      isLimitHeight: true,
      option: {
        emitName: 'click',
        color: 'white'
      }
htoooth authored
38 39 40 41
    };
  },
  methods: {
    onClick() {
htoooth authored
42
      console.log('展开');
htoooth authored
43
      this.isLimitHeight = false;
htoooth authored
44 45 46 47 48 49
    },
    onCommentClick() {
      this.$emit('on-comment-click', {});
    },
    onFavClick() {
      this.$emit('on-favorite-click', {});
htoooth authored
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
    }
  },
};
</script>

<style lang="scss" scoped>

.footer {
  position: relative;
  min-height: 280px;
  background: rgba(0, 0, 0, 0.5);
}

.desc {
  min-height: 134px;
  font-size: 26px;
  color: white;
陈峰 authored
67
  letter-spacing: 0.01PX;
htoooth authored
68 69 70 71
  padding: 30px 28px 0 28px;
}

.product-wrapper {
htoooth authored
72 73
  display: flex;
  justify-content: space-between;
htoooth authored
74 75 76 77 78 79 80 81 82 83 84 85 86 87
  height: 166px;
  padding: 0 28px;
}

.products {
  display: inline-block;
  width: 290px;
  height: 100px;
  margin-top: 36px;
}

.link {
  color: #4a90e2;
}
htoooth authored
88 89 90 91 92 93 94 95 96

.share {
  height: 100px;
  margin-top: 86px;
}

.item {
  margin-left: 50px;
}
htoooth authored
97
</style>