|
@@ -4,8 +4,6 @@
|
|
|
<div class="bill-left" v-show="isShow==='home'" key="item">
|
|
|
<div class="bill-tab">
|
|
|
<div class="bill-title">导航</div>
|
|
|
- <!-- <el-tree :data="data" node-key="id" :default-expanded-keys="expandedKeys" :props="props"
|
|
|
- @node-click="handleNodeClick"></el-tree> -->
|
|
|
<side-tree :propConfig="treeConfig" @onChange="onChangeTree" />
|
|
|
</div>
|
|
|
</div>
|
|
@@ -49,7 +47,7 @@
|
|
|
</template>
|
|
|
<template v-slot:attributeName>
|
|
|
<div v-if="isSingle" key="item4">
|
|
|
- <by-table :propConfig="singleTable" @onChangeRow="getSingleValue" ref="singeTable"></by-table>
|
|
|
+ <by-table :propConfig="singleTable" @onChangeRow="getInputValue" ref="singeTable"></by-table>
|
|
|
</div>
|
|
|
<div v-if="!isSingle" key="item5">
|
|
|
<el-select :value="selectValue" clearable placeholder="请选择" style="width: 19.5%;"
|
|
@@ -216,7 +214,7 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 20
|
|
|
+ defaultValue: 0
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -229,7 +227,6 @@
|
|
|
attr: {
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
- defaultValue: '袋'
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -242,8 +239,7 @@
|
|
|
attr: {
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
- type: "number",
|
|
|
- defaultValue: 100
|
|
|
+ type: "integer",
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -256,8 +252,7 @@
|
|
|
attr: {
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
- type: "number",
|
|
|
- defaultValue: 100
|
|
|
+ type: "integer",
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -271,7 +266,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 5
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -285,7 +279,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 5
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -299,7 +292,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 18
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -313,7 +305,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 6
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -377,7 +368,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 20
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -390,7 +380,6 @@
|
|
|
attr: {
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
- defaultValue: '袋'
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -404,7 +393,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 100
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -418,7 +406,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 100
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -432,7 +419,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 500
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -446,7 +432,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 28
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -460,7 +445,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 18
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -474,7 +458,6 @@
|
|
|
size: 'mini',
|
|
|
placeholder: ' ',
|
|
|
type: "number",
|
|
|
- defaultValue: 6
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -504,21 +487,15 @@
|
|
|
attr: {
|
|
|
size: 'small',
|
|
|
rules: {
|
|
|
- name: [{
|
|
|
- required: true, message: '请输入名称', trigger: 'blur'
|
|
|
- }],
|
|
|
- basePrice: [{
|
|
|
- required: true, message: '请输入基本售价', trigger: 'blur'
|
|
|
- }],
|
|
|
- categoryName: [{
|
|
|
- required: true, message: '请输入物料分类', trigger: 'change'
|
|
|
- }],
|
|
|
- vmCategoryName: [{
|
|
|
- required: true, message: '请输入虚拟分类', trigger: 'change'
|
|
|
- }],
|
|
|
- organizationCategoryName: [{
|
|
|
- required: true, message: '请输入机构商品分类', trigger: 'change'
|
|
|
- }],
|
|
|
+ // name: [{
|
|
|
+ // required: true, message: '请输入名称', trigger: 'blur'
|
|
|
+ // }],
|
|
|
+ // basePrice: [{
|
|
|
+ // required: true, message: '请输入基本售价', trigger: 'blur'
|
|
|
+ // }],
|
|
|
+ // categoryName: [{
|
|
|
+ // required: true, message: '请输入物料分类', trigger: 'change'
|
|
|
+ // }],
|
|
|
}
|
|
|
},
|
|
|
columns: [
|
|
@@ -663,7 +640,7 @@
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- labelWidth:'116px',
|
|
|
+ labelWidth: '116px',
|
|
|
span: 6,
|
|
|
label: '机构商品分类',
|
|
|
prop: 'organizationCategoryName',
|
|
@@ -886,7 +863,6 @@
|
|
|
},
|
|
|
}
|
|
|
mounted() {
|
|
|
- // this.getTreeList()
|
|
|
this.getAttribute()
|
|
|
this.timer = setInterval(() => {
|
|
|
this.getDataList()
|
|
@@ -923,12 +899,30 @@
|
|
|
let data : any = {}
|
|
|
// 多规格
|
|
|
if (query.materialSpec === 1) {
|
|
|
- if (this.tableList.length <= 0 || this.attributeList.length <= 0) return (this as any).$message({ type: 'warning', message: '多规格商品,物料属性不能为空!' });
|
|
|
+ if (this.tableList.length <= 0 || this.attributeList.length <= 0) return (this as any).$message.warning('多规格商品,物料属性不能为空!');
|
|
|
+
|
|
|
+ console.log('多规格表格数据 ==> ', this.tableList);
|
|
|
+ for (let v of this.tableList) {
|
|
|
+ if (!v.price) return this.$message.warning('物料价格必填');
|
|
|
+ if (parseInt(v.price) <= 0) return this.$message.warning('物料价格不能小于1');
|
|
|
+ if (!v.unit) return this.$message.warning('物料单位必填');
|
|
|
+ if (!v.stock) return this.$message.warning('物料库存必填');
|
|
|
+ if (parseInt(v.stock) <= 0) return this.$message.warning('物料库存必须为自然数');
|
|
|
+ if (!v.shelfLife) return this.$message.warning('物料保质期必填');
|
|
|
+ if (parseInt(v.shelfLife) <= 0) return this.$message.warning('物料保质期必须为自然数');
|
|
|
+ if (!v.weight) return this.$message.warning('物料重量必填');
|
|
|
+ if (parseInt(v.weight) <= 0) return this.$message.warning('物料重量不能小于1');
|
|
|
+ if (!v.length) return this.$message.warning('物料长必填');
|
|
|
+ if (parseInt(v.length) <= 0) return this.$message.warning('物料长不能小于1');
|
|
|
+ if (!v.width) return this.$message.warning('物料宽必填');
|
|
|
+ if (parseInt(v.width) <= 0) return this.$message.warning('物料宽不能小于1');
|
|
|
+ if (!v.height) return this.$message.warning('物料高必填');
|
|
|
+ if (parseInt(v.height) <= 0) return this.$message.warning('物料高不能小于1');
|
|
|
+ };
|
|
|
data = { maindataMaterial: query, maindataMaterialSkus: this.tableList }
|
|
|
let newArray : any = []
|
|
|
let materialSpecData : any = []
|
|
|
let attributeLength = this.attributeList.length
|
|
|
- console.log('表格数据 ==> ', this.tableList);
|
|
|
this.tableList.map((v : any) => {
|
|
|
for (let kyes in v) {
|
|
|
if (kyes.indexOf('_field_name') != -1) {
|
|
@@ -947,30 +941,47 @@
|
|
|
})
|
|
|
} else { // 单规格
|
|
|
data = { maindataMaterial: query, maindataMaterialSkus: (this.$refs.singeTable as any).getValue() }
|
|
|
+ console.log('单规格表格数据 ==> ', data.maindataMaterialSkus);
|
|
|
+ for (let v of data.maindataMaterialSkus) {
|
|
|
+ if (!v.price) return this.$message.warning('物料价格必填');
|
|
|
+ if (parseInt(v.price) <= 0) return this.$message.warning('物料价格不能小于1');
|
|
|
+ if (!v.unit) return this.$message.warning('物料单位必填');
|
|
|
+ if (!v.stock) return this.$message.warning('物料库存必填');
|
|
|
+ if (parseInt(v.stock) <= 0) return this.$message.warning('物料库存必须为自然数');
|
|
|
+ if (!v.shelfLife) return this.$message.warning('物料保质期必填');
|
|
|
+ if (parseInt(v.shelfLife) <= 0) return this.$message.warning('物料保质期必须为自然数');
|
|
|
+ if (!v.weight) return this.$message.warning('物料重量必填');
|
|
|
+ if (parseInt(v.weight) <= 0) return this.$message.warning('物料重量不能小于1');
|
|
|
+ if (!v.length) return this.$message.warning('物料长必填');
|
|
|
+ if (parseInt(v.length) <= 0) return this.$message.warning('物料长不能小于1');
|
|
|
+ if (!v.width) return this.$message.warning('物料宽必填');
|
|
|
+ if (parseInt(v.width) <= 0) return this.$message.warning('物料宽不能小于1');
|
|
|
+ if (!v.height) return this.$message.warning('物料高必填');
|
|
|
+ if (parseInt(v.height) <= 0) return this.$message.warning('物料高不能小于1');
|
|
|
+ };
|
|
|
data.maindataMaterialSkus[0].isDeleted = 0;
|
|
|
- // data.maindataMaterialSkus[0].skuTitle = query.name;
|
|
|
- // data.maindataMaterialSkus[0].skuSubtitle = query.shortName;
|
|
|
data.maindataMaterial.attributeList = ""
|
|
|
}
|
|
|
- console.log('data ==> ', data);
|
|
|
- if (this.isEdit) { // 编辑
|
|
|
- other.updateSpuAndSku(data, 'maindataMaterial').then((res : any) => {
|
|
|
- if (res.code === 200) {
|
|
|
- this.isShow = 'home';
|
|
|
- this.getDataList();
|
|
|
- this.$message({ type: 'success', message: res.msg })
|
|
|
- }
|
|
|
- })
|
|
|
- // 新增
|
|
|
- } else {
|
|
|
- other.saveSpuAndSku(data, 'maindataMaterial').then((res : any) => {
|
|
|
- if (res.code === 200) {
|
|
|
- this.isShow = 'home';
|
|
|
- this.getDataList();
|
|
|
- this.$message({ type: 'success', message: res.msg })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ // console.log('data ==> ', data);
|
|
|
+ // if (this.isEdit) { // 编辑
|
|
|
+ // other.updateSpuAndSku(data, 'maindataMaterial').then((res : any) => {
|
|
|
+ // if (res.code === 200) {
|
|
|
+ // this.isShow = 'home';
|
|
|
+ // this.getDataList();
|
|
|
+ // this.$message({ type: 'success', message: res.msg })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // // 新增
|
|
|
+ // } else {
|
|
|
+ // other.saveSpuAndSku(data, 'maindataMaterial').then((res : any) => {
|
|
|
+ // if (res.code === 200) {
|
|
|
+ // this.isShow = 'home';
|
|
|
+ // this.getDataList();
|
|
|
+ // this.$message({ type: 'success', message: res.msg })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+
|
|
|
});
|
|
|
}
|
|
|
// 新增
|
|
@@ -981,6 +992,7 @@
|
|
|
this.textarea = '' // 描述
|
|
|
this.tagsData = [] // 标签
|
|
|
this.attributeList = [] // 属性规格
|
|
|
+ this.tableList = [] // 表格数据
|
|
|
this.materialSpec = 0; // 单规格
|
|
|
this.isSingle = true; // 显示单表格
|
|
|
this.isEdit = false; // 是否编辑
|
|
@@ -994,72 +1006,93 @@
|
|
|
getDetail(e : any) {
|
|
|
console.log('编辑 ==> ', e);
|
|
|
(this as any).$refs.byTool.setTool({ return: true, save: true, delete: true })
|
|
|
- this.loading = this.$loading({ target: '.my-container' })
|
|
|
+ this.loading = this.$loading({ target: '.my-container' });
|
|
|
+ api.single({ id: e.vmCategoryId }, 'maindataMaterialVmcategory').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (res.data) e.vmCategoryName = res.data.name;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ api.single({ id: e.organizationCategoryId }, 'maindataMaterialOrganizationCategory').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (res.data) e.organizationCategoryName = res.data.name;
|
|
|
+ }
|
|
|
+ });
|
|
|
api.single({ id: e.categoryId }, 'maindataMaterialCategory').then((res : any) => {
|
|
|
- if (res.code === 200) e.categoryName = res.data.name
|
|
|
- }).then(() => {
|
|
|
- api.single({ id: e.vmCategoryId }, 'maindataMaterialVmcategory').then((res : any) => {
|
|
|
- if (res.code === 200) e.vmCategoryName = res.data.name
|
|
|
- }).then(() => {
|
|
|
- api.single({ id: e.organizationCategoryId }, 'maindataMaterialOrganizationCategory').then((res : any) => {
|
|
|
- if (res.code === 200) e.organizationCategoryName = res.data.name
|
|
|
- }).then(() => {
|
|
|
- if (e.attributeId) {
|
|
|
- api.single({ id: e.attributeId }, 'maindataMaterialAttribute').then((res : any) => {
|
|
|
- if (res.code === 200) {
|
|
|
- if (res.data) this.selectValue = res.data.name
|
|
|
- }
|
|
|
- })
|
|
|
+ if (res.code === 200) e.categoryName = res.data.name;
|
|
|
+ if (e.attributeId) {
|
|
|
+ api.single({ id: e.attributeId }, 'maindataMaterialAttribute').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (res.data) this.selectValue = res.data.name
|
|
|
}
|
|
|
- this.intercept = e.attributeId // 拦截物料属性判断
|
|
|
- this.isEdit = true;
|
|
|
- this.editInfo = e;
|
|
|
- this.isShow = 'add';
|
|
|
- // 标签
|
|
|
- if (e.tags) {
|
|
|
- this.tagsData = e.tags.split(",")
|
|
|
- } else this.tagsData = [];
|
|
|
- this.materialSpec = e.materialSpec
|
|
|
- this.isSingle = e.materialSpec === 0 ? true : false;
|
|
|
- if (e.attributeList) this.attributeList = JSON.parse(e.attributeList);
|
|
|
- other.selectByMaterialId({ id: e.id }, 'maindataMaterialSku').then((res : any) => {
|
|
|
- if (res.code === 200) {
|
|
|
- if (this.isSingle) {
|
|
|
- this.selectValue = '' // 物料属性名称
|
|
|
- this.towTable = '' // 表格数据
|
|
|
- this.attributeList = []; // 属性规格
|
|
|
- (this as any).$refs.singeTable.setValue(res.data);
|
|
|
- } else {
|
|
|
- this.forFun(this.attributeList[0], 0) // 生成sku
|
|
|
- let tableConfig = (this as any).$lodash.cloneDeep(this.tableConfig);
|
|
|
- let skuRuleList = (this as any).$lodash.cloneDeep(this.skuRuleList);
|
|
|
- let newColumns = (this as any).$lodash.cloneDeep(this.attributeList).reverse();
|
|
|
- res.data.map((v : any, i : any) => {
|
|
|
- v = Object.assign(v, skuRuleList[i])
|
|
|
- v.dataIndex = i
|
|
|
- })
|
|
|
- newColumns.map((v : any) => {
|
|
|
- tableConfig.columns.unshift({
|
|
|
- width: '80px',
|
|
|
- title: v.title,
|
|
|
- field: v.field,
|
|
|
- })
|
|
|
- });
|
|
|
- this.tableList = (this as any).$lodash.cloneDeep(res.data);
|
|
|
- // console.log('表格配置 ==> ', tableConfig);
|
|
|
- console.log('skuRuleList ==> ', skuRuleList);
|
|
|
- console.log('表格数据 ==> ', this.tableList);
|
|
|
- this.setTableConfig = tableConfig;
|
|
|
- setTimeout(() => {
|
|
|
- (this as any).$refs.table.setConfig(tableConfig); // 设置表格配置
|
|
|
- (this as any).$refs.table.setValue(this.tableList) // 设置表格数据
|
|
|
- }, 300)
|
|
|
- }
|
|
|
- }
|
|
|
- (this as any).$refs.form.setValue(e)
|
|
|
- this.loading.close()
|
|
|
- })
|
|
|
})
|
|
|
+ }
|
|
|
+ this.intercept = e.attributeId // 拦截物料属性判断
|
|
|
+ this.isEdit = true;
|
|
|
+ this.editInfo = e;
|
|
|
+ this.isShow = 'add';
|
|
|
+ // 标签
|
|
|
+ if (e.tags) {
|
|
|
+ this.tagsData = e.tags.split(",")
|
|
|
+ } else this.tagsData = [];
|
|
|
+ this.materialSpec = e.materialSpec
|
|
|
+ this.isSingle = e.materialSpec === 0 ? true : false;
|
|
|
+ if (e.attributeList) this.attributeList = JSON.parse(e.attributeList);
|
|
|
+ other.selectByMaterialId({ id: e.id }, 'maindataMaterialSku').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (this.isSingle) {
|
|
|
+ this.selectValue = '' // 物料属性名称
|
|
|
+ this.towTable = '' // 表格数据
|
|
|
+ this.attributeList = []; // 属性规格
|
|
|
+ let singleTable = (this as any).$lodash.cloneDeep(this.singleTable);
|
|
|
+ singleTable.columns[5] = {
|
|
|
+ width: "80px",
|
|
|
+ field: "stock",
|
|
|
+ title: "库存"
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log(singleTable.columns);
|
|
|
+ setTimeout(() => {
|
|
|
+ (this as any).$refs.singeTable.setConfig(singleTable); // 设置表格配置
|
|
|
+ (this as any).$refs.singeTable.setValue(res.data);
|
|
|
+ }, 0)
|
|
|
+ } else {
|
|
|
+ this.forFun(this.attributeList[0], 0) // 生成sku
|
|
|
+ let tableConfig = (this as any).$lodash.cloneDeep(this.tableConfig);
|
|
|
+ let skuRuleList = (this as any).$lodash.cloneDeep(this.skuRuleList);
|
|
|
+ let newColumns = (this as any).$lodash.cloneDeep(this.attributeList).reverse();
|
|
|
+ res.data.map((v : any, i : any) => {
|
|
|
+ v = Object.assign(v, skuRuleList[i])
|
|
|
+ v.dataIndex = i
|
|
|
+ });
|
|
|
+ newColumns.map((v : any) => {
|
|
|
+ tableConfig.columns.unshift({
|
|
|
+ width: '80px',
|
|
|
+ title: v.title,
|
|
|
+ field: v.field,
|
|
|
+ })
|
|
|
+ });
|
|
|
+ tableConfig.columns.map((v : any, i : any) => {
|
|
|
+ if (v.title == '库存') {
|
|
|
+ tableConfig.columns[i] = {
|
|
|
+ width: "80px",
|
|
|
+ field: "stock",
|
|
|
+ title: "库存"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.tableList = (this as any).$lodash.cloneDeep(res.data);
|
|
|
+ console.log('表格配置 ==> ', tableConfig);
|
|
|
+ console.log('skuRuleList ==> ', skuRuleList);
|
|
|
+ console.log('表格数据 ==> ', this.tableList);
|
|
|
+ this.setTableConfig = tableConfig;
|
|
|
+ setTimeout(() => {
|
|
|
+ (this as any).$refs.table.setConfig(tableConfig); // 设置表格配置
|
|
|
+ (this as any).$refs.table.setValue(this.tableList) // 设置表格数据
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ (this as any).$refs.form.setValue(e)
|
|
|
+ this.loading.close()
|
|
|
})
|
|
|
})
|
|
|
}
|
|
@@ -1267,15 +1300,12 @@
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
- // 监听单表格数据
|
|
|
- getSingleValue(e : any) {
|
|
|
- // console.log('监听单表格 ==> ', e);
|
|
|
- e.volume = (e.length * e.width * e.height).toFixed(2);
|
|
|
- }
|
|
|
// 监听表格数据
|
|
|
getInputValue(e : any) {
|
|
|
// console.log('监听表格 ==> ', e);
|
|
|
- e.volume = (e.length * e.width * e.height).toFixed(2);
|
|
|
+ if (e.length && e.width && e.height) {
|
|
|
+ e.volume = (e.length * e.width * e.height).toFixed(2);
|
|
|
+ }
|
|
|
}
|
|
|
// 排序生成
|
|
|
forFun(data : any, i : number, v ?: any) {
|
|
@@ -1408,19 +1438,6 @@
|
|
|
} else this.failHandle(res)
|
|
|
})
|
|
|
}
|
|
|
- // 获取树型导航数据
|
|
|
- getTreeList() {
|
|
|
- api.treeList('maindataMaterialCategory').then((res : any) => {
|
|
|
- // console.log(res.data[0]);
|
|
|
- if (res.code === 200) {
|
|
|
- this.data = res.data;
|
|
|
- this.expandedKeys.push(res.data[0].id)
|
|
|
- res.data[0].children.map((v : any) => {
|
|
|
- this.expandedKeys.push(v.id)
|
|
|
- })
|
|
|
- } else this.failHandle(res)
|
|
|
- })
|
|
|
- }
|
|
|
// 获取列表数据
|
|
|
getDataList() {
|
|
|
if (!this.$refs.moduleView) {
|
|
@@ -1618,6 +1635,7 @@
|
|
|
padding-right: 16px;
|
|
|
flex-shrink: 0;
|
|
|
height: 740px;
|
|
|
+
|
|
|
// box-sizing: border-box;
|
|
|
.bill-tab {
|
|
|
width: 150px;
|