107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
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> |