Delivery-merchant/pages/Storeclassification.vue

<template>
	<view class="titlenav">
		<!-- <titlenav :flag="true"></titlenav> -->
		<view class="top">
			<view class="title">添加分类</view>
		</view>
		<view class="content">
			<view class="add">
				<view class="name">分类一</view>
				<view class="inpt"><input type="number" value="" placeholder="请输入" v-model="form.name" /></view>
				<image class="imgBox" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-29-12-21-44BiuCgnNh.png" mode=""></image>
			</view>
			<view class="add">
				<view class="name">分类二</view>
				<view class="inpt"><input type="number" value="" placeholder="请输入" v-model="form.name1" /></view>
				<image class="imgBox" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-29-12-21-44BiuCgnNh.png" mode=""></image>
			</view>
			<view class="add">
				<view class="name">分类三</view>
				<view class="inpt"><input type="number" value="" placeholder="请输入" v-model="form.name2" /></view>
				<image class="imgBox" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-29-12-21-44BiuCgnNh.png" mode=""></image>
			</view>
		</view>
		<view class="btn">
			<u-button block class="btn2" @click="submit">添加分类</u-button>
			<u-button block type="primary" @click="submit2">保存修改</u-button>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: { Titlenav },
	data() {
		return {
			form: {}
		};
	},
	computed: {
		...mapState(['systemInfo'])
	},
	methods: {}
};
</script>
<style lang="scss" scoped>
.titlenav {
	background: #214bbe;
	.top {
		height: 50px;
		.title {
			font-size: 22px;
			font-weight: bold;
			color: #ffffff;
			line-height: 26px;
			padding: 10px 0 20px 20px;
		}
	}
	.content {
		background: #ffffff;
		border-radius: 16px 16px 0px 0px;
		padding: 1px 20px;
	
	}
	/deep/ .uni-input-placeholder {
		font-size: 16px;
		text-align: center;
		line-height: 24px;
	}
	/deep/ .uni-input-input{
		text-align: center;
	}
	/deep/ .u-btn {
		width: 162px;
		height: 48px;
		font-size: 16px;
		font-weight: 400;
		color: #ffffff;
		border-radius: 4px;
	}
	.add{
		padding: 11px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.inpt {
			background: #f5f7fa;
			width: 70%;
			height: 48px;
			border-radius: 8px;
			padding: 11px 12px;
		}
		.name {
			font-size: 14px;
			font-weight: bold;
			color: #aaabad;
			line-height: 24px;
			width: 42px;
		}
		.imgBox {
			width: 24px;
			height: 24px;
		}
	}
	.btn {
		display: flex;
		align-items: center;
		position: fixed;
		justify-content: space-between;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 6px 20px;
		padding-bottom: 34px;
		padding-bottom: calc(34px + constant(safe-area-inset-bottom)); // 兼容 IOS<11.2
		padding-bottom: calc(34px + env(safe-area-inset-bottom)); // 兼容 IOS>=11.2
		background-color: #ffffff;
		.btn2 {
			color: #214bbe;
		}
	}
}
</style>