art(company-sku):公司SKU编辑、新建样式修改

src/views/sku-manage/company-sku/component/ShowSkuDrawer.vue

@@ -106,16 +106,19 @@ onMounted(() => {
 </script>
 
 <template>
+	<div class="drawer-container">
+
 	<el-drawer ref="showSkuDrawer" v-model="showOpen" style="width: 40%">
 		<template #title>
 			<div>
 				<span style="font-size: 16px; font-weight: bold">当前SKU:</span>
-				<el-tag style="margin-left: 5px" type="primary">
-					{{ rowData.sku }}
-				</el-tag>
+				<!--<el-tag style="margin-left: 5px" type="primary">-->
+				<!--	{{ rowData.sku }}-->
+				<!--</el-tag>-->
+				<el-check-tag checked style="margin-left: 5px">{{ rowData.sku }}</el-check-tag>
 			</div>
 		</template>
-		<div class="m-3">
+		<div class="m-4">
 			<el-descriptions v-for="info of attrList" :title="info.section" border style="margin-bottom: 40px">
 				<el-descriptions-item v-for="attr of info.attrItems" label-class-name="my-label">
 					<template #label>
@@ -129,9 +132,15 @@ onMounted(() => {
 			</el-descriptions>
 		</div>
 	</el-drawer>
+	</div>
 </template>
 
 <style scoped>
+.drawer-container :deep(.el-drawer__header) {
+	border-bottom: none;
+	/* font-weight: 500; */
+}
+
 :deep(.my-label) {
 	background: #f5f5f5 !important;
 }

src/views/sku-manage/company-sku/component/SkuBuilder.vue

@@ -292,7 +292,10 @@ onMounted(() => {
 
 <template>
 	<div class="drawer-container">
-		<el-drawer ref="editDrawer" v-model="showSkuBuilder" :close-on-click-modal="false" :close-on-press-escape="false" :title="`SKU生成器`" size="50%">
+		<el-drawer ref="editDrawer" v-model="showSkuBuilder" :close-on-click-modal="false" :close-on-press-escape="false" size="45%">
+			<template #title>
+					<span style="font-size: 16px; font-weight: bold">SKU生成器</span>
+			</template>
 			<div class="m-5">
 				<!--选择器-->
 				<div style="margin-bottom: 20px">
@@ -309,10 +312,13 @@ onMounted(() => {
 				</div>
 				<!--SKU-->
 				<div v-if="selectedKind" class="sku-text">
-					<span>SKU：{{ sku }}</span>
+					<!--<span>SKU：</span>-->
+					<el-check-tag checked>SKU：{{ sku }}</el-check-tag>
+					<el-divider ref="dividerContainer" style="margin: 10px 0 12px 0;" />
+
 				</div>
 				<!--属性-->
-				<div v-if="selectedKind">
+				<div v-if="selectedKind" class="ml-2">
 					<el-form ref="ruleFormRef" :model="formData" label-position="right" label-suffix="：">
 						<template v-for="info in relatedAttrs" :key="info.section">
 							<div class="sku-title">第{{ info.section }}部分</div>
@@ -329,6 +335,7 @@ onMounted(() => {
 									</el-radio>
 								</el-radio-group>
 							</el-form-item>
+							<el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
 						</template>
 						<div class="sku-title">可选部分</div>
 						<el-form-item label="电源" prop="powerType">
@@ -355,10 +362,13 @@ onMounted(() => {
 								prop: 'versionFeature',
 							}"
 						>
-							<el-input v-model="formData.versionFeature" autosize clearable style="width: 25%" />
+							<el-input v-model="formData.versionFeature" autosize clearable style="width: 40%" />
 						</el-form-item>
+
 					</el-form>
 				</div>
+				<el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
+
 				<div class="button-container">
 					<el-button :disabled="disabledSaveButton" type="primary" @click="saveSku('skuForm', false)">保存</el-button>
 					<el-button :disabled="kindInfo.status !== 3" type="primary" @click="saveSku('skuForm', true)">另存</el-button>
@@ -379,7 +389,7 @@ onMounted(() => {
 }
 
 .sku-text {
-	margin: 20px 0;
+	margin: 30px 0 15px 0;
 	color: #515151;
 	font-weight: 500;
 }
@@ -401,4 +411,9 @@ onMounted(() => {
 	font-weight: bold;
 	color: #606266;
 }
+
+.button-container{
+ display: flex;
+ justify-content: flex-end;
+}
 </style>