zhibo/pages_course/components/liveGoods.vue

<template>
  <view class="goods" v-if="isShow" @click.stop="goShop">
    <view class="top">
      <view class="left">
        <image class="w30 h30 mr8" src="/static/images/signal.png" />
        讲解中
      </view>
      <image @click.stop="close" class="w40 h40 mr10" src="/static/images/del_black.png" />
    </view>
    <image class="photo" :src="goodsData.imgUrl" />
    <view class="item">
      <view class="price">
        <text class="red">￥{{ goodsData.price }}</text>
        <text class="del">￥{{ goodsData.otPrice }}</text>
      </view>
      <view class="title oneline-hide">{{ goodsData.productName }}</view>
      <view class="button">立即抢购</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "LiveGoods",
  props: {
    // 控制组件显示
    isShow: {
      type: Boolean,
      default: false
    },
    // 商品数据
    goodsData: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    // 点击商品，通知父组件跳转
    goShop() {
      this.$emit('goShop', this.goodsData);
    },
    // 关闭商品卡片，通知父组件
    close() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped lang="scss">
	.goods {
		position: fixed;
		bottom: 140rpx;
		right: 104rpx;
		z-index: 5;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		width: 280rpx;
		padding: 4rpx;
	
		.top {
			position: absolute;
			top: 4rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			width: 100%;
			padding-right: 10rpx;
			box-sizing: border-box;
	
			.left {
				background-color: rgba(0, 0, 0, 0.8);
				padding: 12rpx;
				font-size: 22rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 10rpx;
			}
		}
	
		.photo {
			width: 100%;
			height: 180rpx;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;
		}
	
		.item {
			padding: 4rpx;
	
			.price {
				font-size: 30rpx;
	
				.red {
					color: #ff5701;
					font-weight: 600;
					margin-right: 10rpx;
				}
	
				.del {
					color: #828282;
					font-weight: 500;
					font-size: 28rpx;
					text-decoration: line-through;
				}
			}
	
			.title {
				font-weight: 500;
				font-size: 30rpx;
				margin: 10rpx 0 12rpx;
			}
	
			.button {
				background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
				color: #fff;
				text-align: center;
				padding: 16rpx 0;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 30rpx;
			}
		}
	}
	
</style>