修正项目

xlcs-user/components/ListImgItem/ListImgItem.vue

@@ -0,0 +1,99 @@
+<template>
+  <view :style="[{ width: width, height: height }]" class="gg">
+    <view class="gg-left u-font-xs u-p-l-10 u-p-r-10">
+      <block v-if="showLeft">
+        <slot name="left">秒杀</slot>
+      </block>
+    </view>
+    <view class="gg-right u-font-xs u-p-l-10 u-p-r-10">
+      <block v-if="showRight">
+        <slot name="right">推荐</slot>
+      </block>
+    </view>
+    <u-image :border-radius="borderRadius" :height="height" :lazy-load="lazyLoad" :src="src" :width="width"/>
+    <view class="gg-bottom u-font-xs u-p-l-10 u-p-r-10">
+      <block v-if="showBottom">
+        <slot name="bottom">新人专享</slot>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ListImgItem',
+  props: {
+    lazyLoad: {
+      type: Boolean,
+      default: true
+    },
+    borderRadius: {
+      type: String,
+      default: '10rpx'
+    },
+    src: {
+      type: String,
+      default: '',
+      required: true
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '200rpx'
+    },
+    showLeft: {
+      type: Boolean,
+      default: true
+    },
+    showRight: {
+      type: Boolean,
+      default: true
+    },
+    showBottom: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.gg {
+  position: relative;
+
+  &-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: $u-type-primary;
+    color: $u-type-info-light;
+    border-top-left-radius: 10rpx;
+  }
+
+  &-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    background-color: $u-type-error;
+    color: $u-type-info-light;
+    border-top-right-radius: 10rpx;
+  }
+
+  &-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    background-color: $u-type-success;
+    color: $u-type-info-light;
+    border-bottom-left-radius: 10rpx;
+    border-bottom-right-radius: 10rpx;
+  }
+}
+</style>