样式修改

This commit is contained in:
yanran200730
2023-08-08 10:37:07 +08:00
parent 1359688af8
commit e850bd9f3b
2 changed files with 63 additions and 42 deletions

View File

@@ -46,7 +46,7 @@
return { return {
colConfigs: [ colConfigs: [
{ prop: 'title', label: '标题', align: 'left' }, { prop: 'title', label: '标题', align: 'left' },
{ prop: 'isFavorite', label: '是否收藏', align: 'center', format: v => v === '0' ? '否' : '是' }, { prop: 'createTime', label: '发布时间', align: 'center' },
], ],
tableData: [], tableData: [],
total: 0, total: 0,

View File

@@ -23,16 +23,17 @@
:isShowPagination="false" :isShowPagination="false"
style="margin-top: 8px;" style="margin-top: 8px;"
@getList="getList">center @getList="getList">center
<el-table-column slot="productName" width="480px" label="商品信息" show-overflow-tooltip align="center"> <el-table-column slot="productName" width="480px" label="商品信息" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="order-manage_productInfo__1pD83"> <div class="product">
<img :src="scope.row.productSkcPicture"> <img :src="scope.row.productSkcPicture">
<div class="right"> <div class="right">
<div>备货母单号: {{ scope.row.originalPurchaseOrderSn }}</div>
<div>备货母单号: {{ scope.row.originalPurchaseOrderSn }}</div> <el-tooltip effect="dark" :content="scope.row.productName" placement="top-start">
<div>{{ scope.row.productName }}</div> <div class="textoverflow">{{ scope.row.productName }}</div>
<div>SKC: {{ scope.row.productSkcId }}</div> </el-tooltip>
<div>货号: {{ scope.row.productSn }}</div> <div>SKC: {{ scope.row.productSkcId }}</div>
<div>货号: {{ scope.row.productSn }}</div>
</div> </div>
</div> </div>
</template> </template>
@@ -53,7 +54,8 @@
</div> </div>
</div> </div>
<div class="order-manage_contentInfo__1Cjd6" style="max-width: 150px;"> <div class="order-manage_contentInfo__1Cjd6" style="max-width: 150px;">
<div class="order-manage_title__1VTO5">属性{{ item.className }}下单数量{{ item.purchaseQuantity }}</div> <div class="order-manage_title__1VTO5">属性{{ item.className }}</div>
<div>下单数量{{ item.purchaseQuantity }}</div>
<div>SKU ID {{ item.productSkuId }}</div> <div>SKU ID {{ item.productSkuId }}</div>
<div class="order-manage_productSku__XP_ke">SKU 货号 {{ item.extCode }}</div> <div class="order-manage_productSku__XP_ke">SKU 货号 {{ item.extCode }}</div>
</div> </div>
@@ -100,21 +102,22 @@
style="margin-top: 8px;" style="margin-top: 8px;"
@selection-change="onChooseChange" @selection-change="onChooseChange"
@getList="getList"> @getList="getList">
<el-table-column slot="productName" width="400px" label="商品信息" show-overflow-tooltip align="center"> <el-table-column slot="productName" width="400px" label="商品信息" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="order-manage_productInfo__1pD83"> <div class="product">
<img :src="scope.row.productSkcPicture"> <img :src="scope.row.productSkcPicture">
<div class="right"> <div class="right">
<div>备货母单号: {{ scope.row.originalPurchaseOrderSn }}</div>
<div>备货母单号: {{ scope.row.originalPurchaseOrderSn }}</div> <el-tooltip effect="dark" :content="scope.row.productName" placement="top-start">
<div>{{ scope.row.productName }}</div> <div class="textoverflow">{{ scope.row.productName }}</div>
<div>SKC: {{ scope.row.productSkcId }}</div> </el-tooltip>
<div>货号: {{ scope.row.productSn }}</div> <div>SKC: {{ scope.row.productSkcId }}</div>
<div>货号: {{ scope.row.productSn }}</div>
</div> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column slot="className" label="SKU信息" width="400px" show-overflow-tooltip align="center"> <el-table-column slot="className" label="SKU信息" width="440px" show-overflow-tooltip align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="order-manage_skuInfo__FW-Nd" v-for="(item, index) in scope.row.detailList" :key="index"> <div class="order-manage_skuInfo__FW-Nd" v-for="(item, index) in scope.row.detailList" :key="index">
<div> <div>
@@ -122,8 +125,9 @@
<div class="index-module__img___p3B1N" :style="getStyle(item.thumbUrlList[0])"></div> <div class="index-module__img___p3B1N" :style="getStyle(item.thumbUrlList[0])"></div>
</div> </div>
</div> </div>
<div class="order-manage_contentInfo__1Cjd6" style="max-width: 150px;"> <div class="order-manage_contentInfo__1Cjd6">
<div class="order-manage_title__1VTO5">属性{{ item.className }}下单数量{{ item.purchaseQuantity }}</div> <div>属性{{ item.className }}</div>
<div>下单数量{{ item.purchaseQuantity }}</div>
<div>SKU ID {{ item.productSkuId }}</div> <div>SKU ID {{ item.productSkuId }}</div>
<div class="order-manage_productSku__XP_ke">SKU 货号 {{ item.extCode }}</div> <div class="order-manage_productSku__XP_ke">SKU 货号 {{ item.extCode }}</div>
</div> </div>
@@ -160,9 +164,9 @@
{ slot: 'status' } { slot: 'status' }
], ],
robColConfigs: [ robColConfigs: [
{ prop: 'subPurchaseOrderSn', width: '180px', label: '备货单号', align: 'left' }, { prop: 'subPurchaseOrderSn', label: '备货单号', align: 'left' },
{ slot: 'productName' }, { slot: 'productName' },
{ prop: 'mallName', label: '店铺来源', width: '120px', align: 'center' }, { prop: 'mallName', label: '店铺来源', align: 'center' },
{ slot: 'className'}, { slot: 'className'},
{ slot: 'robInfo'}, { slot: 'robInfo'},
{ slot: 'status' } { slot: 'status' }
@@ -331,7 +335,7 @@
"subPurchaseOrderSn": sn "subPurchaseOrderSn": sn
}}).then((res) => { }}).then((res) => {
if (res.errorCode == 1000000) { if (res.errorCode == 1000000) {
let t = this.timer.filter((item) => { let t = this.timer.filter((item) => {
return item.id == sn; return item.id == sn;
@@ -377,13 +381,22 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.order-manage_productInfo__1pD83 { .product {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.right { .right {
flex: 1;
text-align: left; text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
width: 60px;
margin-right: 10px;
} }
} }
.order-manage_productInfo__1pD83>img { .order-manage_productInfo__1pD83>img {
@@ -414,8 +427,8 @@
} }
.dot-module__dot___M-RuH { .dot-module__dot___M-RuH {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.index-module__image-preview___2fiZX .index-module__img___p3B1N { .index-module__image-preview___2fiZX .index-module__img___p3B1N {
@@ -433,27 +446,35 @@
position: relative; position: relative;
} }
.order-manage_skuInfo__FW-Nd, .order-manage_skuInfo__FW-Nd .order-manage_contentInfo__1Cjd6 { .textoverflow {
display: -webkit-flex; white-space: nowrap;
display: -moz-box; overflow: hidden;
display: -ms-flexbox; text-overflow: ellipsis;
display: flex; cursor: pointer;
justify-content: center;
} }
.order-manage_skuInfo__FW-Nd .order-manage_contentInfo__1Cjd6 { .order-manage_skuInfo__FW-Nd {
-webkit-flex-direction: column; display: flex;
-moz-box-orient: vertical; align-items: center;
-moz-box-direction: normal; justify-content: center;
-ms-flex-direction: column; margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.order-manage_contentInfo__1Cjd6 {
display: flex;
flex-direction: column; flex-direction: column;
color: rgba(0,0,0,.4); text-align: left;
-webkit-flex: 1 0 auto; white-space: nowrap;
-moz-box-flex: 1; overflow: hidden;
-ms-flex: 1 0 auto; text-overflow: ellipsis;
flex: 1 0 auto; width: 240px;
}
} }
.order-manage_skuInfo__FW-Nd .order-manage_contentInfo__1Cjd6 .order-manage_title__1VTO5 { .order-manage_skuInfo__FW-Nd .order-manage_contentInfo__1Cjd6 .order-manage_title__1VTO5 {
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;