shop-applet/pages/product/addGoodDetail/goodsPrice.vue

<template>
	<view class="content">
		<u-button icon="plus" text="新增规格" class="custom-style" iconColor='#38BE41'></u-button>

		<view class="card">
			<view class="card-head card-li">
				<text>规格1</text>
				<view class="" style="width: 300rpx;">
					<u--input placeholder="请输入规格名称" v-model="text"></u--input>
				</view>
			</view>
			<u-line direction="row" style="margin: 30rpx 0;" color="#ECECEC"></u-line>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<u--input style="flex: 2; background-color: #F6F6F6;" placeholder="请输入商品单价" v-model="text"></u--input>
				<view class="" style="flex: 1;text-align: center;">
					/
				</view>
				<u--input style=" flex: 2;width:100rpx;background-color: #F6F6F6;" placeholder="请输入计量单位"
					v-model="text"></u--input>
			</view>
			<u-line direction="row" style="margin: 30rpx 0;" color="#ECECEC"></u-line>
			<view class=" card-li">
				<text>商品库存</text>
				<view class="" style="width: 300rpx;">
					<u--input placeholder="请填写库存数量" v-model="text"></u--input>
				</view>
			</view>
			<u-line direction="row" style="margin: 30rpx 0;" color="#ECECEC"></u-line>
			<view class=" card-li">
				<text>条形码</text>
				<view class="" style="width: 300rpx;">
					<u--input placeholder="请填写商品条形码" v-model="text"></u--input>
				</view>
			</view>
			<u-line direction="row" style="margin: 30rpx 0;" color="#ECECEC"></u-line>
			<view class="card-li">
				<view style="display: flex;">
					<u-icon name="trash" style='margin-right: 8rpx;'></u-icon> 删除
				</view>
				<view class="" style="display: flex;align-items: center;">
					<u-switch v-model="value" type='primaryy' activeColor="#38BE41"></u-switch>
					<text style="margin-left: 8rpx;">启用</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: "",
				value: ""
			}
		}

	}
</script>

<style lang='scss'>
	.custom-style {
		color: $uni-newTheme-color;
		height: 104rpx;
	}

	.content {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #F1F1F1;
		min-height: 100vh;
		position: relative;
		font-size: 28rpx;
		font-family: PingFangFamily;

		.card {
			margin-top: 30rpx;
			padding: 30rpx 46rpx;
			background-color: white;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			position: relative;

			.card-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

		}


		.card-head::after {
			content: '';
			position: absolute;
			font-size: 32rpx;
			left: 20rpx;
			width: 8rpx;
			height: 32rpx;
			top: 50rpx;
			background-color: #40AE36;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
		}

	}
</style>