hwnc/components/ui-component/U_seckill/m/index.vue

<template>
	<view class="component-wrapper u000242" :style="wrapper_style">
		<view class="seckill_top">
			<view class="seckill_top_left">
				<u-icon name="bag-fill" size="28"></u-icon>
				<view class="expenditures">爆款秒杀</view>
				<view>一件也是批发价</view>
			</view>
			<view class="more">
				查看更多
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
		</view>
		<view class="seckill_bottom">
			<view class="item" v-for="item in list" :key="item.id">
				<image class="img" :src="emptyImage||item.img"></image>
				<view class="remaining">
					<view>仅剩</view>
					<view>{{item.remaining}}</view>
				</view>
				<view class="info">
					<view class="public_info">{{item.name}}</view>
					<view class="info_a">
						<view>省</view>
						<view>立省{{item.originalprice-item.price}}元</view>
					</view>
					<view class="price2">
						<view class="price">
							<view :style="price_style">¥{{item.price}}</view>
							<view>¥{{item.originalprice}}</view>
						</view>
						<view class="buybtn" :style="btn_style">
							去抢购
							<u-icon :color="datas.text_color" name="arrow-right" size="17"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ['styles', 'datas'],
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			return {
				settingFile: siteinfo,
				emptyImage: siteinfo.root_img + '/static/app/image.png',
			}
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				const {
					bg_color,
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
				} = this.datas;
				return `
				min-height: 40px;
				padding: ${padding_top}px ${padding_right}px ${padding_bottom}px  ${padding_left}px;
                background-color: ${bg_color};
                background-size: 100% auto;
                bakcground-position: center;
            `;
			},
			list() {
				let list = this.datas.list || [];
				return list
			},

			//价格颜色
			price_style() {
				const { price_color } = this.datas
				return `
				color:${price_color};
				font-size:20px;
				font-weight:500;
				margin-right:5px;
				`;
			},
			//按钮及文字颜色
			btn_style() {
				const { button_color, text_color } = this.datas
				return `
				    width: 80px;
				    background-color: ${button_color};
				    text-align: center;
					color:${text_color};
					border-radius: 90px;
					line-height:30px;
				`;
			},
		},

		mounted() {
			this.$emit('loaded');
		}
	};
</script>
<style lang="less" scoped>
	.component-wrapper {
		display: block;
		max-width: 100%;
		// text-align: center;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		text-decoration: none;
		align-items: center;

		.seckill_top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.seckill_top_left {
				display: flex;
				align-items: center;

				.expenditures {
					margin: 0 10px;
					font-size: 16px;
					font-weight: 600;
				}
				view:last-child{
					font-size: 12px;
				}
			}

			.more {
				display: flex;
				align-items: center;
			}
		}

		.seckill_bottom {
			margin-top: 10px;
			padding: 0;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10px;
				background-color: #fff;
				padding: 10px;
				border-radius: 10px;
				position: relative;

				.img {
					width: 100px;
					height: 100px;
					border-radius: 5px;
					margin-right: 10px;
				}

				.remaining {
					color: #fff;
					width: 45px;
					height: 45px;
					border-radius: 50%;
					position: absolute;
					top: 5px;
					right: 10px;
					background-color: red;
					text-align: center;
					font-size: 12px;
					line-height: 20px;

					view:last-child {
						font-size: 18px;
						line-height: 25px;
					}
				}

				.info {
					overflow: hidden;
					width: 80%;

					.public_info {
						width: 70%;
						height: 40px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 16px;
						font-weight: 600;
						line-height: 20px;
					}

					.info_a {
						font-size: 10px;
						color: #F26914;
						width: 100px;
						display: flex;
						border-radius: 50px;
						border: 1px solid red;
						overflow: hidden;
						margin: 5px 0;

						view:first-child {
							width: 25%;
							border-right: 1px solid #F26914;
							text-align: center;
							background-color: #FBD2D2;
						}

						view:last-child {
							width: 75%;
							text-align: center;
						}
					}

					.price2 {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price {
							line-height: 20px;
							display: flex;

							view:last-child {
								text-decoration: line-through;
								color: #999;
							}
						}
					}

					.buybtn {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>