Browse Source

样式优化:修复选中样式、分类面包屑、行高压缩、自动带入分类等

admin 1 tháng trước cách đây
mục cha
commit
298e51dd36
2 tập tin đã thay đổi với 276 bổ sung101 xóa
  1. 4 1
      .claude/settings.local.json
  2. 272 100
      src/components/page/third/goods/StoreGoodsList1.vue

+ 4 - 1
.claude/settings.local.json

@@ -32,7 +32,10 @@
       "Bash(curl -s -o /dev/null -w \"%{http_code}\" -X POST \"http://localhost:8080/api/settingManage/getSettingInfo\")",
       "Bash(curl -s -o /dev/null -w \"%{http_code}\" -X POST \"http://localhost:8081/a2/orderYear/homeDataInfo\")",
       "Bash(curl -s -o /dev/null -w \"%{http_code}\" -X POST \"http://localhost:8081/a1/settingManage/getSettingInfo\")",
-      "Bash(curl -s -o /dev/null -w \"%{http_code}\" -X POST \"http://localhost:8081/a1/orderYear/homeDataInfo\")"
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" -X POST \"http://localhost:8081/a1/orderYear/homeDataInfo\")",
+      "Bash(git add *)",
+      "Bash(git commit *)",
+      "Bash(git push *)"
     ],
     "additionalDirectories": [
       "C:\\Users\\admin"

+ 272 - 100
src/components/page/third/goods/StoreGoodsList1.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
     <div class="page-wrap">
         <div class="crumbs">
             <el-breadcrumb separator="/">
@@ -8,15 +8,15 @@
         <div class="background">
             <div class="leftbox">
                 <ul class="storelist">
-                    <li v-for="(item,index) in goodsTypeList" :class="item.selected ? 'selected' : ''"@click="debouncedClickType(item)" @mouseenter="showIcon(item,index)"@mouseleave="hideIcon(item,index)">
+                    <li v-for="(item,index) in goodsTypeList" :class="item.selected ? 'selected' : ''"@click="clickType(item)" @mouseenter="showIcon(item,index)"@mouseleave="hideIcon(item,index)">
                         <span class="store_name">{{item.goodsTypeName}}
                             <span class="goods-count">{{item.goodsCounts || 0}}</span>
                             <span class="new-flag" v-if="item.newFlag">上新</span>
                         </span>
-                        <i class="el-icon-top" v-show="item.showIcon" @click="debouncedChangOrderKey(item.goodsTypeId,1)"></i>
-                        <i class="el-icon-edit" v-show="item.showIcon" @click="updateType(item)"></i>
-                        <i class="el-icon-delete" v-show="item.showIcon" @click="deleteType(item)"></i>
-                        <i class="el-icon-upload2" v-show="item.showIcon" @click="debouncedChangOrderKey(item.goodsTypeId,2)"></i>
+                        <i class="el-icon-top" v-show="item.showIcon" @click.stop="debouncedChangOrderKey(item.goodsTypeId,1)"></i>
+                        <i class="el-icon-edit" v-show="item.showIcon" @click.stop="updateType(item)"></i>
+                        <i class="el-icon-delete" v-show="item.showIcon" @click.stop="deleteType(item)"></i>
+                        <i class="el-icon-upload2" v-show="item.showIcon" @click.stop="debouncedChangOrderKey(item.goodsTypeId,2)"></i>
                     </li>
                 </ul>
                 <div class="leftbox-footer">
@@ -25,32 +25,22 @@
             </div>
 
             <div class="topbox">
-                <el-col :span="20" :xs="24">
-                    <el-row :gutter="10" v-show="!isSort">
-                        <el-col :span="1.5">
-                            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addGoods"
-                            >新增</el-button
-                            >
-                        </el-col>
-                        <el-col :span="1.5">
-                            <el-button plain icon="el-icon-edit" size="mini" :disabled="!allGoodsList.length > 0" @click="sortGoods"
-                            >排序管理</el-button
-                            >
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="10" v-show="isSort">
-                        <el-col :span="1.5">
-                            <el-button plain icon="el-icon-plus" size="mini" @click="closeSortGoods"
-                            >取消排序</el-button
-                            >
-                        </el-col>
-                        <el-col :span="1.5">
-                            <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="debouncedUpdateSort"
-                            >保存排序</el-button
-                            >
-                        </el-col>
-                    </el-row>
-                </el-col>
+                <div class="topbox-left">
+                    <span class="current-category" v-if="currentCategoryName">
+                        <i class="el-icon-s-fold"></i> {{ currentCategoryName }}
+                    </span>
+                    <span class="current-category" v-else style="color: #c0c4cc;">未选择分类</span>
+                </div>
+                <div class="topbox-right">
+                    <template v-if="!isSort">
+                        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addGoods">新增</el-button>
+                        <el-button plain icon="el-icon-edit" size="mini" :disabled="!allGoodsList.length > 0" @click="sortGoods">排序管理</el-button>
+                    </template>
+                    <template v-if="isSort">
+                        <el-button plain icon="el-icon-plus" size="mini" @click="closeSortGoods">取消排序</el-button>
+                        <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="debouncedUpdateSort">保存排序</el-button>
+                    </template>
+                </div>
             </div>
 
             <div class="rightbox">
@@ -61,6 +51,7 @@
                     :data="goodsList"
                     tooltip-effect="dark"
                     :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
+                    :row-class-name="tableRowClassName"
                     style="width: 100%; margin-top: 10px"
                     @cell-mouse-enter="mouseEnter"
                     @cell-mouse-leave="mouseLeave"
@@ -87,7 +78,7 @@
                                                 <span v-if="scope.row.status === 1">
                                                     <div class="transparent-layer el-popover__reference" tabindex="0"></div>
                                                 </span>
-                                                <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 60px;height: 60px">
+                                                <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 44px;height: 44px">
                                             </div>
                                         </div>
                                         <div class="popover-modal">
@@ -122,7 +113,7 @@
                                                 @show="showName(scope.row)"
                                                 @hide="hideName(scope.row)"
                                                 :append-to-body="false">
-                                                <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
+                                                <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 16px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
                                                 <div class="popover-modal">
                                                     <p>修改商品名称</p>
                                                     <br>
@@ -155,7 +146,7 @@
                                     trigger="click"
                                     @hide="hidePrice()"
                                     :append-to-body="false">
-                                    <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
+                                    <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 16px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
                                     <form class="popover-modal">
                                         <p>修改价格</p>
                                         <div class="mutiple-specifications">
@@ -188,7 +179,7 @@
                                         @hide="hidePrice()"
                                         :append-to-body="false"
                                         style="margin-left: 5px">
-                                        <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
+                                        <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 16px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
 
                                         <div class="popover-modal">
                                             <p style="text-align: center">修改库存</p>
@@ -229,7 +220,7 @@
                                         <el-link :underline="false" slot="reference" style="font-size: 12px">库存管理</el-link>
                                         <div class="popover-modal">
                                             <p style="text-align: center">修改库存</p>
-                                            <div>
+                                            <div style="max-height: 240px; overflow-y: auto;">
                                                 <div class="sku-mutiple-input" v-for="(item,index) in scope.row.skuList">
                                                     <span class="item-name">{{item.modelName}}</span>
                                                     <div class="list-item">
@@ -293,7 +284,7 @@
                                                 <span v-if="scope.row.status === 1">
                                                     <div class="transparent-layer el-popover__reference" tabindex="0"></div>
                                                 </span>
-                                                <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 60px;height: 60px">
+                                                <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 44px;height: 44px">
                                             </div>
                                         </div>
                                         <div class="popover-modal">
@@ -399,16 +390,25 @@
                         </el-form-item>
                         <el-form-item label="商品图片">
                             <div style="display: flex;align-items: center;">
-                                <div class="add" v-if="isShow">
-                                    <input type="file" id="saveImage" name="upath" accept="image/png,image/jpg,image/jpeg"
-                                           ref="new_image" @change="addImage" style="width: 178px;height: 178px;opacity: 0;">
-                                </div>
-                                <div style="position: relative;" v-if="!isShow" class="add1">
-                                    <input type="file" id="saveImage" name="upath" accept="image/png,image/jpg,image/jpeg"
-                                           ref="new_image" @change="addImage" style="width: 178px;height: 178px;opacity: 0;position: absolute;top: 0;left: 0;z-index: 99;">
-                                    <img v-if="!goodsInfo.pictureUrl" style="width:178px;height:178px;border-radius: 6px;" id="img" src alt />
-                                    <img v-if="goodsInfo.pictureUrl" style="width:178px;height:178px;border-radius: 6px;" id="img" :src="goodsInfo.pictureUrl" alt/>
-                                </div>
+                                <el-upload
+                                    class="avatar-uploader"
+                                    :action="uploadGoodsPicUrl"
+                                    :file-list="goodsPicFileList"
+                                    :limit="1"
+                                    :multiple="false"
+                                    :show-file-list="false"
+                                    :disabled="goodsPicUploading"
+                                    accept="image/png,image/jpg,image/jpeg"
+                                    :before-upload="beforeGoodsPicUpload"
+                                    :on-progress="progressGoodsPicUpload"
+                                    :on-success="successGoodsPicUpload"
+                                    :on-error="errorGoodsPicUpload">
+                                    <div class="goods-upload-box" v-loading="goodsPicUploading">
+                                        <img v-if="goodsInfo.pictureUrl" :src="goodsInfo.pictureUrl" class="goods-upload-img" alt/>
+                                        <i v-else class="el-icon-plus goods-upload-icon"></i>
+                                    </div>
+                                </el-upload>
+                                <div class="upload-tip">建议上传 jpg/png/jpeg 图片,大小不超过 200KB</div>
                             </div>
                         </el-form-item>
                         <el-form-item label="商品分类" :required="true" style="text-align:left">
@@ -436,50 +436,48 @@
                     <el-form-item label="商品规格" style="text-align:left">
                         <el-form-item :required="true" style="text-align:left">
                             <div>为您的商品添加不同的规格,如:大杯、小杯等</div>
-                            <div class="goods-sku" v-for="(item,index) in modelBeanList" :key="item.id">
-                                <div style="display: flex; align-items: center; width: 720px; flex-wrap: wrap;">
-                                    <div class="mr-r-20">
-                                        <div>
+                            <div class="goods-sku sku-row" v-for="(item,index) in modelBeanList" :key="item.id">
+                                <div class="sku-field sku-field-name">
+                                        <div class="sku-label">
                                             <span class="require-icon"></span>
                                             规格名
                                         </div>
-                                        <div class="el-input" style="width: 100px;">
+                                        <div class="el-input">
                                             <el-input placeholder="规格名" v-model="item.modelName">
                                             </el-input>
                                         </div>
                                     </div>
-                                    <div class="mr-r-20">
-                                        <div>
+                                    <div class="sku-field sku-field-price">
+                                        <div class="sku-label">
                                             <span class="require-icon"></span>
                                             价格
                                         </div>
-                                        <div class="el-input" style="width: 150px;">
+                                        <div class="el-input">
                                             <el-input v-model="item.costPrice">
                                                 <template slot="append">元</template>
                                             </el-input>
                                         </div>
                                     </div>
-                                    <div class="mr-r-20">
-                                        <div>
+                                    <div class="sku-field sku-field-price">
+                                        <div class="sku-label">
                                             <span class="require-icon"></span>
                                             餐盒费
                                         </div>
-                                        <div class="el-input" style="width: 150px;">
+                                        <div class="el-input">
                                             <el-input v-model="item.packingFee">
                                                 <template slot="append">元</template>
                                             </el-input>
                                         </div>
                                     </div>
-                                    <div class="mr-r-20">
-                                        <div>
+                                    <div class="sku-field sku-field-stock">
+                                        <div class="sku-label">
                                             <span class="require-icon"></span>
                                             库存
                                         </div>
-                                        <div class="el-input" style="width: 100px;">
+                                        <div class="el-input">
                                             <el-input  v-model="item.inventory"></el-input>
                                         </div>
                                     </div>
-                                </div>
                             </div>
                             <div class="hover" style="margin-top: 10px;">
                                 <el-link :underline="false" style="font-size: 14px" @click="addModel">
@@ -570,6 +568,7 @@ export default {
             getTypeUrl: '/thirdStoreGoodsManage/getTypeList',
             goodsUrl: '/thirdStoreGoodsManage/getStoreGoodsListForThird',
             updatePicUrl: '/thirdStoreGoodsManage/updateGoodsPicForThird',
+            uploadGoodsPicUrl: '/thirdStoreGoodsManage/uploadGoodsPicForThird',
             updateNameUrl: '/thirdStoreGoodsManage/updateGoodsNameForThird',
             updatePriceUrl: '/thirdStoreGoodsManage/updateGoodsPriceForThird',
             updateInventoryUrl: '/thirdStoreGoodsManage/updateGoodsInventoryForThird',
@@ -605,6 +604,8 @@ export default {
             rowId: '',
             showGoodsIcon: false,
             fileList: [],
+            goodsPicFileList: [],
+            goodsPicUploading: false,
             goodsName: '',
             goodsTypeId: '',
             skuList: [],
@@ -622,7 +623,6 @@ export default {
                 modelBeanList: [],
                 propertyBeanList: [],
             },
-            isShow: true,
             modelBeanList: [{
                 id: 1,
                 modelId: '',
@@ -643,6 +643,12 @@ export default {
             total: 0,
         };
     },
+    computed: {
+        currentCategoryName() {
+            const item = this.goodsTypeList.find(i => i.selected);
+            return item ? item.goodsTypeName : '';
+        }
+    },
     created () {
         if (this.$isMobile()){
             // 移动端
@@ -655,12 +661,13 @@ export default {
 
         if (areaId) {
             this.updatePicUrl = "/a" + areaId + this.updatePicUrl
+            this.uploadGoodsPicUrl = "/a" + areaId + this.uploadGoodsPicUrl
         }
         this.store = JSON.parse(localStorage.getItem("storeInfo"));
         this.getDataList()
 
         // 防抖处理:避免快速重复点击导致的重复请求
-        this.debouncedClickType = debounce(this.clickType, 300)
+        this.debouncedGetGoodsList = debounce(this.getGoodsList, 300)
         this.debouncedUpdateStatus = debounce(this.updateStatus, 500)
         this.debouncedDeleteGoods = debounce(this.deleteGoods, 500)
         this.debouncedSetNewGoods = debounce(this.setNewGoods, 500)
@@ -739,14 +746,16 @@ this.$axios.post(this.updateSortUrl,querystring.stringify({
         },
         addGoods() {
             this.editTitle = '新增商品'
+            // 自动带入当前选中的分类
+            if (this.goodsTypeId) {
+                this.goodsInfo.goodsTypeId = this.goodsTypeId;
+            }
             this.dialogVisible = true;
             this.getGoodsTypeList()
         },
         updateGoods(row) {
             this.goodsInfo = JSON.parse(JSON.stringify(row))
-            if(row.pictureUrl != null && row.pictureUrl !== '' &&  row.pictureUrl !== 'null'){
-                this.isShow = false;
-            }
+            this.goodsPicFileList = row.pictureUrl ? [{ name: row.goodsName, url: row.pictureUrl }] : []
             this.modelBeanList = JSON.parse(JSON.stringify(row.skuList))
             this.propertyBeanList = row.params || []
             this.editTitle = '编辑商品'
@@ -948,6 +957,9 @@ this.$axios.post(this.checkSpecialUrl, querystring.stringify({
             this.skuList = []
             document.body.click()
         },
+        tableRowClassName({row}) {
+            return row.status !== 1 ? 'row-offline' : '';
+        },
         //鼠标移入单元格事件
         mouseEnter(row) {
             this.showGoodsIcon = true;
@@ -974,6 +986,38 @@ this.$axios.post(this.checkSpecialUrl, querystring.stringify({
             this.fileList = []
             this.getGoodsList()
         },
+        beforeGoodsPicUpload(file) {
+            if (!file.type.includes("image/png") && !file.type.includes("image/jpg") && !file.type.includes("image/jpeg")) {
+                this.$message.error("鍥剧墖鏍煎紡閿欒");
+                return false;
+            }
+            if (file.size >= 204800) {
+                this.$message.error('涓婁紶鍥剧墖澶у皬涓嶈兘瓒呰繃 200KB,璇疯皟鏁存竻鏅板害涔嬪悗鍐嶈瘯');
+                return false;
+            }
+            return true;
+        },
+        progressGoodsPicUpload() {
+            this.goodsPicUploading = true;
+        },
+        successGoodsPicUpload(res, file) {
+            this.goodsPicUploading = false;
+            if (res.rtnBean && res.rtnBean.rtnCode === 0) {
+                this.goodsInfo.pictureUrl = res.obj;
+                this.goodsPicFileList = [{
+                    name: file.name,
+                    url: res.obj
+                }];
+                return;
+            }
+            this.goodsPicFileList = [];
+            this.$message.error(res.rtnBean ? res.rtnBean.rtnMsg : '涓婁紶澶辫触');
+        },
+        errorGoodsPicUpload() {
+            this.goodsPicUploading = false;
+            this.goodsPicFileList = [];
+            this.$message.error('涓婁紶澶辫触');
+        },
         changOrderKey (id,type) {
             if (this.isSort){
                 this.$message.info('请先保存/取消排序');
@@ -1063,13 +1107,15 @@ this.$axios.post(this.url,querystring.stringify({
             if (this.isSort){
                 return;
             }
+            // 立即更新选中样式,不受防抖影响
             this.goodsTypeList.forEach(item => {
                 item.selected = false
             })
             item.selected = true
             this.goodsTypeId = item.goodsTypeId
             this.pageNum = 1
-            this.getGoodsList()
+            // 仅数据请求走防抖
+            this.debouncedGetGoodsList();
         },
         showIcon(item,index) {
             this.$set(this.goodsTypeList,index,{...item,showIcon:true})
@@ -1143,15 +1189,8 @@ this.$axios.post(this.updateTypeUrl,querystring.stringify({
             item.inventory = 9999;
         },
         closeDialog(){
-            if(this.upath !== '' && this.upath != null){
-                if(this.$refs.new_image !== '' && this.$refs.new_image != null){
-                    this.$refs.new_image.value = '';
-                    this.upath = '';
-                }
-            }
             this.initForm();
             this.dialogVisible = false;
-            this.isShow = true;
             this.isSpecial = false
         },
         initForm() {
@@ -1182,29 +1221,10 @@ this.$axios.post(this.updateTypeUrl,querystring.stringify({
                 inventory: ''
             }]
             this.propertyBeanList = []
-            this.isShow = true
+            this.goodsPicFileList = []
+            this.goodsPicUploading = false
 
         },
-        addImage(e){
-            const file = e.target.files[0];
-            if (!file.type.includes("image/png") && !file.type.includes("image/jpg") && !file.type.includes("image/jpeg")) {
-                this.$message.error("图片格式错误");
-                this.upath = "";
-                return;
-            }
-            const isLt2M = file.size < 204800;
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 200KB,请调整清晰度之后再试');
-                return;
-            }
-            this.isShow = false;
-            this.upath = file;
-            var reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = function(e) {
-                document.getElementById("img").src = reader.result;
-            }
-        },
 
         addModel() {
             if (this.isSpecial) {
@@ -1251,8 +1271,7 @@ this.$axios.post(this.updateTypeUrl,querystring.stringify({
         save(){
             this.goodsInfo.modelBeanList = this.modelBeanList;
             this.goodsInfo.propertyBeanList= this.propertyBeanList;
-            if ((this.goodsInfo.pictureUrl === null || this.goodsInfo.pictureUrl === undefined || this.goodsInfo.pictureUrl === '') &&
-                (this.upath === null || this.upath === undefined || this.upath === '')) {
+            if (this.goodsInfo.pictureUrl === null || this.goodsInfo.pictureUrl === undefined || this.goodsInfo.pictureUrl === '') {
                 this.$message.error("请上传商品图片");
                 return;
             } else if (this.goodsInfo.goodsName == null || this.goodsInfo.goodsName === '') {
@@ -1337,7 +1356,6 @@ this.$axios.post(this.updateTypeUrl,querystring.stringify({
                 if (aoo && boo) {
 
                         var formdata = new FormData();
-                    formdata.append("file", that.upath);
                     formdata.append("goodsId", that.goodsInfo.goodsId || '');
                     formdata.append("storeId", that.store.storeId || '');
                     formdata.append("goodsName", that.goodsInfo.goodsName || '');
@@ -1460,8 +1478,25 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
     min-height: 52px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding: 10px 16px;
 }
+.topbox-left{
+    flex-shrink: 0;
+}
+.current-category{
+    font-size: 14px;
+    color: #409EFF;
+    font-weight: 600;
+}
+.current-category i{
+    margin-right: 4px;
+}
+.topbox-right{
+    flex-shrink: 0;
+    display: flex;
+    gap: 8px;
+}
 .newkind{
     display: inline-flex;
     justify-content: center;
@@ -1494,6 +1529,11 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
 .storelist li:active{
     background-color: #d9eafb;
 }
+.storelist li.selected{
+    background-color: #ecf5ff;
+    border-left: 3px solid #409EFF;
+    color: #409EFF;
+}
 .storelist li span{
     flex: 1;
     overflow: hidden;
@@ -1507,6 +1547,10 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
     font-size: 14px;
     cursor: pointer;
 }
+.comfirm{
+    text-align: center;
+    margin-top: 10px;
+}
 .store_name {
     padding-left: 5px;
     margin-bottom: 10px;
@@ -1516,6 +1560,55 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
     color: #2c3e50;
     font-weight: 700;
 }
+/* 商品名 */
+.goods-name {
+    font-weight: 500;
+    color: #303133;
+}
+/* 弹窗 */
+.popover-modal p {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+}
+.popover-modal .el-input {
+    margin-bottom: 8px;
+}
+.mutiple-specifications > div {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+}
+.mutiple-specifications > div > span {
+    min-width: 60px;
+    font-size: 13px;
+    color: #606266;
+}
+.list-item {
+    flex: 1;
+}
+.goods-img {
+    position: relative;
+    border-radius: 6px;
+    overflow: hidden;
+}
+.goods-img img {
+    border-radius: 6px;
+    object-fit: cover;
+}
+.has-new-g {
+    display: inline-block;
+    margin-left: 4px;
+    padding: 0 4px;
+    font-size: 10px;
+    color: #fff;
+    background: #f56c6c;
+    border-radius: 2px;
+    vertical-align: middle;
+    line-height: 1.5;
+}
 .new-flag {
     display: inline-block;
     margin-left: 6px;
@@ -1527,6 +1620,40 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
     vertical-align: middle;
     line-height: 1.4;
 }
+.sku-mutiple-input{
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+.sku-mutiple-input .item-name{
+    min-width: 70px;
+    text-align: right;
+}
+.sku-row {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: 12px;
+    width: 720px;
+    padding: 10px 0;
+}
+.sku-field {
+    flex: 0 0 auto;
+}
+.sku-field-name,
+.sku-field-stock {
+    width: 120px;
+}
+.sku-field-price {
+    width: 150px;
+}
+.sku-label {
+    margin-bottom: 6px;
+    color: #606266;
+    font-size: 13px;
+    line-height: 18px;
+}
 .goods-count {
     display: inline-flex;
     align-items: center;
@@ -1542,4 +1669,49 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
     font-weight: 400;
     line-height: 1;
 }
+.avatar-uploader /deep/ .el-upload {
+    width: 178px;
+    height: 178px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    overflow: hidden;
+}
+.avatar-uploader /deep/ .el-upload:hover {
+    border-color: #409EFF;
+}
+.goods-upload-icon {
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    font-size: 28px;
+    color: #8c939d;
+    text-align: center;
+}
+.goods-upload-img {
+    display: block;
+    width: 178px;
+    height: 178px;
+    object-fit: cover;
+}
+.goods-upload-box {
+    width: 178px;
+    height: 178px;
+}
+.upload-tip {
+    margin-left: 12px;
+    color: #909399;
+    font-size: 12px;
+    line-height: 20px;
+}
+</style>
+<style>
+.row-offline { background-color: #f5f5f5 !important; }
+.row-offline .cell,
+.row-offline .cell span,
+.row-offline .cell .el-link { color: #c0c4cc !important; }
+.el-table th { font-weight: 600; font-size: 13px; }
+.el-table .cell { padding: 6px 8px; }
+.cell .pd-r-10 { font-weight: 600; color: #f56c6c; font-size: 14px; }
+.el-popover { border-radius: 8px; padding: 16px; }
 </style>