jiaoyi-uni2/奥莱优品/pages/index/index.vue

<template>
	<view class="content">
		<view class="store-header">
			<view class="home-store">
				<view class="store-logo"><image src="/static/logo.jpg"></image></view>
				<view class="store-info">
					<view class="name">桃奢妍商业广场</view>
					<view class="desc">广东省/广州市/增城区</view>
				</view>
				<view class="store-kf" @click="kfPop">联系客服</view>
			</view>
			<view class="store-address">
				<view class="address-info">
					<image src="/static/image/location.svg"></image>
					<view class="address">天乐社区服务中心蜀山新产业园区海亮九玺海亮九玺南区</view>
				</view>
				<view class="store-time">营业 08:00–22:30</view>
			</view>
		</view>

		<scroll-view class="home-goods" scroll-y scroll-with-animation>
			<view class="goods-title">
				<view class="title-left">
					<text>HOT DEALS</text>
					<view class="name">正在抢购</view>
				</view>
				<view class="title-more">全部商品 <image src="/static/image/right.svg"></image> </view>
			</view>
			<view class="goods-list">
				<view class="list-item" v-for="(item,index) in 10" :key="index" @click="test">
					<view class="image">
						<image src="https://washmy.oss-cn-guangzhou.aliyuncs.com/storage/20260727/2e9fd491e2def96b0dd0677f43d7a31913cf959e.png"></image>
						<text>2.7折</text>
					</view>
					<view class="info">
						<view class="title">赫莲娜/HR黑绷带50ml小露珠200ml两件套 线下兑换券</view>
						<view class="tags"></view>
						<view class="tags">已售0</view>
						<view class="price-btn">
							<view class="price">¥799.00</view>
							<view class="price-line">¥2,999.00</view>
							<view class="buy-btn">立即抢购</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<halfLogin ref="loginCom"></halfLogin>
		<kfService ref="kfService"></kfService>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello'
		}
	},
	onLoad() {

	},
	methods: {
		test(){
			this.$refs.loginCom.open();
			this.loginState = true;
		},
		kfPop(){
			this.$refs.kfService.open();
		}
	}
}
</script>

<style lang="scss" scoped>
.content{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ededed;
	display: flex;
	flex-direction: column;
}
.home-store{
	background-color: $main-color;
	padding: 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	image {
		width: 92rpx;
		height: 92rpx;
		border: 2rpx solid #fff;
		border-radius: 20rpx;
	}
	.store-info{
		flex: 1;
		.name {
			color: #fff;
			font-weight: bold;
			font-size: 32rpx;
		}
		.desc {
			color: $main-sub-color;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
	.store-kf{
		background-color: #fff;
		color: $main-color;
		font-size: 24rpx;
		padding: 20rpx 30rpx;
		border-radius: 40rpx;
	}
}
.store-address {
	display: flex;
	align-self: center;
	width: calc(100% - 40rpx);
	margin: 0 auto;
	box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);
	background-color: #fff;
	border-bottom-right-radius:20rpx;
	border-bottom-left-radius:20rpx;
	padding: 20rpx 20rpx;
	gap: 20rpx;
	color: #475569;
	.address-info {
		flex: 1 1 0%;
		display: flex;
		align-items: center;
		gap: 10rpx;
		overflow: hidden;
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.address{
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.store-time{
		color: #94a3b8;
	}
}
.home-goods{
	height: 0;
	flex: 1;
	width: 95%;
	margin: 20rpx auto;
	.list-item{
		display: flex;
		align-items: center;
		gap: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		.info{
			flex: 1 1 0%;
			overflow: hidden;
			.title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 32rpx;
				color: #333;
				font-weight: 900;
			}
			.tags {
				color: #94a3b8;
				font-size: 24rpx;
				margin: 10rpx 0;
			}
			.price-btn{
				display: flex;
				align-items: center;
				gap: 20rpx;
				align-items: flex-end;
				.price{
					font-size: 30rpx;
					color: $main-color;
					font-weight: 900;
				}
				.price-line {
					color: #999999;font-size: 24rpx;text-decoration-line: line-through;
				}
				.buy-btn{
					margin-left: auto;
					margin-right: 0;
					background-color: $main-color;
					color: #fff;
					border-radius: 30rpx;
					font-size: 28rpx;
					padding: 10rpx 20rpx;
				}
			}
		}
		.image {
			height: 180rpx;
			overflow: hidden;display: flex;align-items: center;min-width: 180rpx;
			position: relative;
			text {
				background-color: $main-color;
				color: #fff;
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				font-size: 24rpx;
				border-radius: 30rpx;
				padding: 10rpx 15rpx;
			}
			image {
				width: 180rpx;
				border-radius: 10upx;
				height: 100%;
			}
		}
	}
	.goods-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title-left{
			.name {
				font-size: 34rpx;
				color: #333;
				font-weight: 900;
			}
			text {
				color: $main-color;
				font-weight: 700;
				font-size: 24rpx;
			}
		}
		.title-more{
			display: flex;
			align-items: center;
			color: #94a3b8;
			font-size: 28rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
}

</style>