|
|
@@ -0,0 +1,586 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="switch">
|
|
|
+ <div class="switch_left">
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="item in tabOptions"
|
|
|
+ :key="item.key"
|
|
|
+ :class="{ active: activeComp == item.key }"
|
|
|
+ @click="changeActive(item)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="activeComp == 'main'">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="130px">
|
|
|
+ <headerTitle title="发货信息"></headerTitle>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item
|
|
|
+ label="客户名称:"
|
|
|
+ prop="contactName"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ {{ form.contactName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="客户联系人:"
|
|
|
+ prop="linkName"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ {{ form.linkName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="客户电话:"
|
|
|
+ prop="linkPhone"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ {{ form.linkPhone }}
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="客户地址:"
|
|
|
+ prop="partaAddress"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ {{ form.receiveAddress }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="发货附件:"
|
|
|
+ prop="sendFiles"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ <fileMain v-model="detailData.sendFiles" type="view"></fileMain>
|
|
|
+<!-- <div v-if="detailData.sendFiles && detailData.sendFiles?.length">-->
|
|
|
+<!-- <el-link-->
|
|
|
+<!-- v-for="link in detailData.sendFiles"-->
|
|
|
+<!-- :key="link.id"-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- :underline="false"-->
|
|
|
+<!-- @click="downloadFile(link)"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- {{ link.name }}</el-link-->
|
|
|
+<!-- >-->
|
|
|
+<!-- </div>-->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="回执附件:"
|
|
|
+ prop="sendFiles"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ <fileMain v-model="detailData.repliedFiles" type="view"></fileMain>
|
|
|
+<!-- <div-->
|
|
|
+<!-- v-if="-->
|
|
|
+<!-- detailData.repliedFiles && detailData.repliedFiles?.length-->
|
|
|
+<!-- "-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <el-link-->
|
|
|
+<!-- v-for="link in detailData.repliedFiles"-->
|
|
|
+<!-- :key="link.id"-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- :underline="false"-->
|
|
|
+<!-- @click="downloadFile(link)"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- {{ link.name }}</el-link-->
|
|
|
+<!-- >-->
|
|
|
+<!-- </div>-->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="计价方式:" style="margin-bottom: 22px">
|
|
|
+ {{ form.pricingWay == 1 ? '按数量计费' : '按重量计费' }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item
|
|
|
+ label="车牌号:"
|
|
|
+ prop="carNo"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ {{ form.carNo }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="发货确认单编码:"
|
|
|
+ prop="docNo"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ {{ form.docNo }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="制单人:"
|
|
|
+ prop="makerName"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ {{ form.makerName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="orderNo" label="订单编码:">
|
|
|
+ {{ form.orderNo }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="orderNo" label="发货单编码:">
|
|
|
+ {{ form.sendNo }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="replied" label="是否回执:">
|
|
|
+ {{ form.replied == 1 ? '是' : '否' }}
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="审核状态:"
|
|
|
+ prop="reviewStatus"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ {{ reviewStatusEnum[form.reviewStatus]?.label }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <headerTitle title="产品清单"></headerTitle>
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ :needPage="false"
|
|
|
+ :columns="competAnalysisListcolumns"
|
|
|
+ :toolkit="[]"
|
|
|
+ :datasource="detailData.productList"
|
|
|
+ row-key="id"
|
|
|
+ >
|
|
|
+ <!-- <template v-slot:toolbar>
|
|
|
+ <div class="headbox">
|
|
|
+ <span class="amount">总计:{{detailData.totalAmount}}元</span>
|
|
|
+ <span class="amount">应付金额:{{detailData.payAmount}}元</span>
|
|
|
+ </div>
|
|
|
+ </template> -->
|
|
|
+ <template v-slot:stockLedger="scope">
|
|
|
+ <el-popover placement="right" width="60%" trigger="hover">
|
|
|
+ <ele-pro-table
|
|
|
+ :ref="'childrenTable' + scope.$index"
|
|
|
+ row-key="id"
|
|
|
+ max-height="300px"
|
|
|
+ :needPage="false"
|
|
|
+ :columns="childrenColumns"
|
|
|
+ :toolkit="[]"
|
|
|
+ :datasource="scope.row.sendProductDetail"
|
|
|
+ cache-key="stockLedgerRoleTable"
|
|
|
+ class="time-form"
|
|
|
+ >
|
|
|
+ </ele-pro-table>
|
|
|
+ <el-button type="text" slot="reference">明细</el-button>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ <template v-slot:industryArtFiles="{ row, $index }">
|
|
|
+ <el-form-item
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ :prop="'datasource.' + $index + '.industryArtFiles'"
|
|
|
+ >
|
|
|
+ <fileMain v-model="row.industryArtFiles" type="view"></fileMain>
|
|
|
+<!-- <div v-if="row.industryArtFiles && row.industryArtFiles?.length">-->
|
|
|
+<!-- <el-link-->
|
|
|
+<!-- v-for="link in row.industryArtFiles"-->
|
|
|
+<!-- :key="link.id"-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- :underline="false"-->
|
|
|
+<!-- @click="downloadFile(link)"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- {{ link.name }}</el-link-->
|
|
|
+<!-- >-->
|
|
|
+<!-- </div>-->
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-slot:otherFiles="{ row, $index }">
|
|
|
+ <el-form-item
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ :prop="'datasource.' + $index + '.otherFiles'"
|
|
|
+ >
|
|
|
+ <fileMain v-model="row.otherFiles" type="view"></fileMain>
|
|
|
+<!-- <div v-if="row.otherFiles && row.otherFiles?.length">-->
|
|
|
+<!-- <el-link-->
|
|
|
+<!-- v-for="link in row.otherFiles"-->
|
|
|
+<!-- :key="link.id"-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- :underline="false"-->
|
|
|
+<!-- @click="downloadFile(link)"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- {{ link.name }}</el-link-->
|
|
|
+<!-- >-->
|
|
|
+<!-- </div>-->
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-slot:technicalDrawings="{ row }">
|
|
|
+ <fileMain v-model="row.technicalDrawings" type="view"></fileMain>
|
|
|
+<!-- <div v-if="row.technicalDrawings && row.technicalDrawings?.length">-->
|
|
|
+<!-- <el-link-->
|
|
|
+<!-- v-for="link in row.technicalDrawings"-->
|
|
|
+<!-- :key="link.id"-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- :underline="false"-->
|
|
|
+<!-- @click="downloadFile(link)"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- {{ link.name }}</el-link-->
|
|
|
+<!-- >-->
|
|
|
+<!-- </div>-->
|
|
|
+ </template>
|
|
|
+ </ele-pro-table>
|
|
|
+ </div>
|
|
|
+ <keep-alive>
|
|
|
+ <add
|
|
|
+ ref="add"
|
|
|
+ v-if="activeComp == 'outBound'"
|
|
|
+ :form="form"
|
|
|
+ :sourceBizNo="form.docNo"
|
|
|
+ :bizType="3"
|
|
|
+ :saleProductList="form.productList"
|
|
|
+ type="销售发货出库"
|
|
|
+ ></add>
|
|
|
+ </keep-alive>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getFile } from '@/api/system/file';
|
|
|
+ import dictMixins from '@/mixins/dictMixins';
|
|
|
+ import { getSendSaleOrderrecordDetail } from '@/api/bpm/components/saleManage/saleorder';
|
|
|
+ import { reviewStatusEnum } from '@/enum/dict';
|
|
|
+ import { copyObj } from '@/utils/util';
|
|
|
+ import add from '@/views/bpm/outgoingManagement/outbound.vue';
|
|
|
+ import fileMain from "@/components/addDoc/index.vue";
|
|
|
+ import {getSendSaleOrderConfirmDetail} from "@/api/bpm/components/saleManage/invoiceConfirm";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mixins: [dictMixins],
|
|
|
+ components: {
|
|
|
+ fileMain,
|
|
|
+ add
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeComp: 'main',
|
|
|
+ tabOptions: [{ key: 'main', name: '发货单详情' }],
|
|
|
+ reviewStatusEnum,
|
|
|
+ visible: false,
|
|
|
+ detailId: '',
|
|
|
+ title: '详情',
|
|
|
+ row: {},
|
|
|
+ activeName: 'base',
|
|
|
+ form: {
|
|
|
+ orderFiles: []
|
|
|
+ },
|
|
|
+ rules: {},
|
|
|
+ detailData: {},
|
|
|
+ childrenColumns: [
|
|
|
+ {
|
|
|
+ width: 45,
|
|
|
+ type: 'index',
|
|
|
+ columnKey: 'index',
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ minWidth: 100,
|
|
|
+ prop: 'code',
|
|
|
+ label: '编码',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ minWidth: 140,
|
|
|
+ prop: 'barcodes',
|
|
|
+ label: '发货条码',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ minWidth: 100,
|
|
|
+ prop: 'engrave',
|
|
|
+ label: '刻码',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ competAnalysisListcolumns: [
|
|
|
+ {
|
|
|
+ width: 45,
|
|
|
+ type: 'index',
|
|
|
+ columnKey: 'index',
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'productName',
|
|
|
+ label: '名称',
|
|
|
+ slot: 'productName',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'productCode',
|
|
|
+ label: '编码',
|
|
|
+ slot: 'productCode',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'productCategoryName',
|
|
|
+ label: '类型',
|
|
|
+ slot: 'productCategoryName',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 160,
|
|
|
+ prop: 'productBrand',
|
|
|
+ label: '牌号',
|
|
|
+ slot: 'productBrand',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'modelType',
|
|
|
+ label: '型号',
|
|
|
+ slot: 'modelType',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'specification',
|
|
|
+ label: '规格',
|
|
|
+ slot: 'specification',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'customerMark',
|
|
|
+ label: '客户代号',
|
|
|
+ slot: 'customerMark',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'warehouseName',
|
|
|
+ label: '仓库名称',
|
|
|
+ slot: 'warehouseName',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 100,
|
|
|
+ prop: 'stockLedger',
|
|
|
+ label: '发货明细',
|
|
|
+ slot: 'stockLedger',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'totalCount',
|
|
|
+ label: '数量',
|
|
|
+ slot: 'totalCount',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'measuringUnit',
|
|
|
+ label: '计量单位',
|
|
|
+ slot: 'measuringUnit',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'singleWeight',
|
|
|
+ label: '单重',
|
|
|
+ slot: 'singleWeight',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 100,
|
|
|
+ prop: 'receiveTotalWeight',
|
|
|
+ label: '收货总重',
|
|
|
+ slot: 'receiveTotalWeight',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'sendTotalWeight',
|
|
|
+ label: '发货总重',
|
|
|
+ slot: 'sendTotalWeight',
|
|
|
+ align: 'center',
|
|
|
+ headerSlot: 'headerTotalCount'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ width: 100,
|
|
|
+ prop: 'increaseTotalWeight',
|
|
|
+ label: '增重重量',
|
|
|
+ slot: 'increaseTotalWeight',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 100,
|
|
|
+ prop: 'weightUnit',
|
|
|
+ label: '重量单位',
|
|
|
+ slot: 'weightUnit',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 160,
|
|
|
+ prop: 'singlePrice',
|
|
|
+ label: '单价',
|
|
|
+ slot: 'singlePrice',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'totalPrice',
|
|
|
+ label: '销售总金额',
|
|
|
+ slot: 'totalPrice',
|
|
|
+ formatter: (_row, _column, cellValue) => {
|
|
|
+ return _row.totalPrice? _row.totalPrice+ '元' : '';
|
|
|
+ },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'deliveryDays',
|
|
|
+ label: '交期(天)',
|
|
|
+ slot: 'deliveryDays',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'guaranteePeriod',
|
|
|
+ label: '质保期',
|
|
|
+ slot: 'guaranteePeriod',
|
|
|
+ formatter: (_row, _column, cellValue) => {
|
|
|
+ return (
|
|
|
+ (_row.guaranteePeriod || '') + (_row.guaranteePeriodUnitName|| '')
|
|
|
+ );
|
|
|
+ },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // width: 120,
|
|
|
+ // prop: 'guaranteePeriodUnitCode',
|
|
|
+ // label: '',
|
|
|
+ // slot: 'guaranteePeriodUnitCode'
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'technicalAnswerName',
|
|
|
+ label: '技术答疑人',
|
|
|
+ slot: 'technicalAnswerName',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 220,
|
|
|
+ prop: 'technicalParams',
|
|
|
+ label: '技术参数',
|
|
|
+ slot: 'technicalParams',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 240,
|
|
|
+ prop: 'technicalDrawings',
|
|
|
+ label: '技术图纸',
|
|
|
+ slot: 'technicalDrawings',
|
|
|
+ formatter: (_row, _column, cellValue) => {
|
|
|
+ return (
|
|
|
+ (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
|
|
|
+ );
|
|
|
+ },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 220,
|
|
|
+ prop: 'remark',
|
|
|
+ label: '备注',
|
|
|
+ slot: 'remark',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ businessId: {
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ taskDefinitionKey: {}
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ await this.getDetailData(this.businessId);
|
|
|
+ console.log('this.taskDefinitionKey--------', this.taskDefinitionKey);
|
|
|
+ if (this.taskDefinitionKey == 'storemanApprove') {
|
|
|
+ this.tabOptions.push({ key: 'outBound', name: '出库单' });
|
|
|
+ this.activeComp = 'outBound';
|
|
|
+ this.$emit('activeCompChange', 'outBound');
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.add.eomSuccess(this.form);
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeActive(item) {
|
|
|
+ this.activeComp = item.key;
|
|
|
+ this.$emit('activeCompChange', item.key);
|
|
|
+ // if (
|
|
|
+ // this.taskDefinitionKey == 'storemanApprove' &&
|
|
|
+ // item.key == 'outBound'
|
|
|
+ // ) {
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.add.eomSuccess(this.form);
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ save(data) {
|
|
|
+ this.$refs.add.handleNewSave(data);
|
|
|
+ },
|
|
|
+ success() {
|
|
|
+ this.$emit('handleClose');
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 关闭后,销毁所有的表单数据
|
|
|
+ (this.form = copyObj(this.formDef)),
|
|
|
+ (this.otherForm = copyObj(this.otherFormDef)),
|
|
|
+ (this.tableBankData = []);
|
|
|
+ this.tableLinkData = [];
|
|
|
+ this.visible = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downloadFile(file) {
|
|
|
+ getFile({ objectName: file.storePath }, file.name);
|
|
|
+ },
|
|
|
+ async getTableValue() {
|
|
|
+ return {
|
|
|
+ form: this.form,
|
|
|
+ returnStorageData:
|
|
|
+ this.$refs.add && (await this.$refs.add.getReturnStorage())
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async getDetailData(id) {
|
|
|
+ this.loading = true;
|
|
|
+ const data = await getSendSaleOrderConfirmDetail(id);
|
|
|
+ this.loading = false;
|
|
|
+ if (data) {
|
|
|
+ data.categoryLevelTopId = data.topCategoryIds;
|
|
|
+ this.form = data;
|
|
|
+ this.detailData = data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .ele-dialog-form {
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .headbox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .amount {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|