sctang/pages/index/storeDetail.vue

<template>
	<view class="">
		<view class="top-bg"></view>
		<view class="flex store">
			<image class="store-img" src="" mode=""></image>
			<view class="store-name">
				侍草堂官方旗舰店侍草堂官方旗舰店侍
			</view>
			<view class="share">
				
			</view>
		</view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [
					{
						text: '商品'
					},
					{
						text: '生活号'
					}
				]
			}
		},
		methods: {
			
		},
		onLoad() {
			
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	.top-bg {
		height: 130rpx;
		background-image: linear-gradient(to bottom, $base-color, #fff);
		// position: absolute;
		// top: 0;
		width: 100%;
	}
	.store {
		width: 706rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: -100rpx auto 20rpx;
		padding: 30rpx;
		// * {
		// 	flex-shrink: 0;
		// }
		&-img {
			width: 92rpx;
			height: 92rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		&-name {
			font-weight: bold;
			font-size: 26rpx;
			color: #343436;
			flex-grow: 1;
			padding: 0 17rpx;
		}
		.share {
			flex-shrink: 0;
			width: 103rpx;
			height: 47rpx;
			background: linear-gradient(89deg, #0EE48C, #00BE8C);
			border-radius: 10rpx;
		}
	}
	.navbar {
		margin-top: 20rpx;
		display: flex;
		height: 88rpx;
		padding: 0 5px;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #999999;
			position: relative;
			.current {
				color: #000;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
</style>