zth
/
VueMsk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

10/24

Browse Source
master
张同海 2 years ago
parent 3e643bc80f
commit 80a272b088
1 changed files with 134 additions and 220 deletions
Show Stats Download Patch File Download Diff File

354
src/views/index.vue
Unescape Escape View File

@ -22,7 +22,7 @@
<p>596854040</p> <p>596854040</p>
</div> </div>
<div class="BB"> <div class="BB">
<p>3.Page of pages</p> <p>3.Page of pages &nbsp;&nbsp;&nbsp; 1-1</p>
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1 BR"><p>4.Shipper's reference</p></div> <div class="F1 BR"><p>4.Shipper's reference</p></div>
@ -68,19 +68,23 @@
</div> </div>
</div> </div>
<div class="F1"> <div class="F1">
<p>9.Additional handling information</p> <p>
<span class="RXing">*</span> 9.Additional handling information
</p>
<p> <p>
24 hr Emergency contact person : 24 hr Emergency contact person :
<el-input <el-input
v-model="input" v-model="input"
placeholder="请输入内容" placeholder="请输入内容"
:style="{ width: '40%', marginLeft: '15px' }" size="small"
:style="{ width: '40%', margin: '0 0 5px 15px' }"
></el-input> ></el-input>
<br /> <br />
24 hr Emergency contact telephone: 24 hr Emergency contact telephone:
<el-input <el-input
v-model="input" v-model="input"
placeholder="请输入内容" placeholder="请输入内容"
size="small"
:style="{ width: '40%' }" :style="{ width: '40%' }"
></el-input> ></el-input>
<br /> <br />
@ -135,22 +139,48 @@
<div class="flex column"> <div class="flex column">
<div class="flex"> <div class="flex">
<div class="F1"> <div class="F1">
<p>UN No</p> <p><span class="RXing">*</span>UN No</p>
<el-input <el-input
v-model="item.input" v-model="item.input"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="UN No" placeholder="UN No"
></el-input> ></el-input>
</div> </div>
<div class="F1">
<p><span class="RXing">*</span>Imo Class(Sub risk)</p>
<el-input
v-model="item.input3"
:style="{ width: '90%' }"
placeholder="Imo Class(Sub risk)"
></el-input>
</div>
<div class="F1">
<p>Sub Risk1</p>
<el-input
v-model="item.input3"
:style="{ width: '90%' }"
placeholder="Sub Risk1"
></el-input>
</div>
<div class="F1">
<p>Sub Risk2</p>
<el-input
v-model="item.input3"
:style="{ width: '90%' }"
placeholder="Sub Risk2"
></el-input>
</div>
</div>
<div class="flex">
<div class="F2"> <div class="F2">
<p>Proper Shipping Name</p> <p><span class="RXing">*</span>Proper Shipping Name</p>
<el-input <el-input
v-model="item.input1" v-model="item.input1"
:style="{ width: '95%' }" :style="{ width: '95%' }"
placeholder="Proper Shipping Name" placeholder="Proper Shipping Name"
></el-input> ></el-input>
</div> </div>
<div class="F1"> <div class="F2">
<p>Technical Name (if have)</p> <p>Technical Name (if have)</p>
<el-input <el-input
v-model="item.input2" v-model="item.input2"
@ -161,22 +191,9 @@
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1"> <div class="F1">
<p>Imo Class(Sub risk)</p> <p><span class="RXing">*</span>Packing Group</p>
<el-input
v-model="item.input3"
:style="{ width: '90%' }"
placeholder="Imo Class(Sub risk)"
></el-input>
</div>
<div class="F1">
<p>Packing Group</p>
<!-- <el-input
v-model="item.input4"
:style="{ width: '90%' }"
placeholder="Packing Group"
></el-input> -->
<el-select <el-select
v-model="item.input6" v-model="item.input4"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Packing Group" placeholder="Packing Group"
> >
@ -186,51 +203,16 @@
</el-select> </el-select>
</div> </div>
<div class="F1"> <div class="F1">
<p>Flash Point (if have )</p> <p><span class="RXing">*</span>EMS</p>
<el-input <el-input
v-model="item.input5" v-model="item.input5"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Flash Point (if have )" placeholder="EMS"
>
<template slot="append">℃</template></el-input
>
</div>
<div class="F1">
<p>Marine Pollutant(p or no)</p>
<!-- <el-input
v-model="item.input6"
:style="{ width: '90%' }"
placeholder="Marine Pollutant(p or no) "
></el-input> -->
<el-select
v-model="item.input6"
:style="{ width: '90%' }"
placeholder="Marine Pollutant(p or no)"
> >
<el-option label="P" value="P"> </el-option> </el-input>
<el-option label="N" value="N"> </el-option>
</el-select>
</div>
</div>
<div class="flex">
<div class="F1">
<p>Boiling Point(if have)</p>
<el-input
v-model="item.input7"
:style="{ width: '90%' }"
placeholder="Boiling Point(if have) "
></el-input>
</div>
<div class="F1">
<p>Package Quantity and Type</p>
<el-input
v-model="item.input8"
:style="{ width: '90%' }"
placeholder="Package Quantity and Type"
></el-input>
</div> </div>
<div class="F1"> <div class="F1">
<p>Packing Code</p> <p><span class="RXing">*</span>Packing Code</p>
<el-input <el-input
v-model="item.input9" v-model="item.input9"
:style="{ width: '90%' }" :style="{ width: '90%' }"
@ -238,48 +220,54 @@
></el-input> ></el-input>
</div> </div>
<div class="F1"> <div class="F1">
<p>Gross Weight</p> <p><span class="RXing">*</span>Packing Type</p>
<el-input <el-input
v-model="item.input10" v-model="item.input9"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Gross Weight " placeholder="Packing Type"
> ></el-input>
<template slot="append">KGS</template>
</el-input>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1"> <div class="F1">
<p>Net Weight</p> <p>Flash Point (if have )</p>
<el-input <el-input
v-model="item.input11" v-model="item.input5"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Net Weight " placeholder="Flash Point (if have )"
>
<template slot="append">℃</template></el-input
> >
<template slot="append">KGS</template>
</el-input>
</div> </div>
<div class="F1"> <div class="F1">
<p>Reportable/Excepted/Limited Quantifu</p> <p><span class="RXing">*</span>Marine Pollutant(p or no)</p>
<el-select <el-select
v-model="item.input12" v-model="item.input6"
placeholder="Reportable/Excepted/Limited Quantifu"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Marine Pollutant(p or no)"
> >
<el-option label="Reportable" value="Reportable"> <el-option label="P" value="P"> </el-option>
</el-option> <el-option label="N" value="N"> </el-option>
<el-option label="Excepted" value="Excepted"> </el-option>
<el-option label="Limited" value="Limited"> </el-option>
</el-select> </el-select>
</div> </div>
<div class="F1"> <div class="F1">
<p>Lighter's Brand and Factory(if have)</p> <p><span class="RXing">*</span>Package Quantity</p>
<el-input <el-input
v-model="item.input13" v-model="item.input8"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Lighter's Brand and Factory(if have)" placeholder="Package Quantity "
></el-input> ></el-input>
</div> </div>
<div class="F1">
<p><span class="RXing">*</span>Package Type</p>
<el-input
v-model="item.input8"
:style="{ width: '90%' }"
placeholder="Package Type "
></el-input>
</div>
</div>
<div class="flex">
<div class="F1"> <div class="F1">
<p>Inner Package</p> <p>Inner Package</p>
<el-select <el-select
@ -309,180 +297,102 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> <div class="F1">
<!-- <div class="flex"> <p>Inner Package Type</p>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>UN No</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }"
placeholder="UN No"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F2" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Proper Shipping Name</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '95%' }"
placeholder="Proper Shipping Name"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Technical Name (if have)</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }"
placeholder="Technical Name (if have)"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
</div>
<div class="flex">
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Imo Class(Sub risk)</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }"
placeholder="Imo Class(Sub risk)"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Packing Group</p>
<el-input <el-input
v-model="item.input" v-model="item.input7"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Packing Group" placeholder="Inner Package Type"
></el-input> ></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div> </div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')"> <div class="F1">
<p>Flash Point (if have )</p> <p><span class="RXing">*</span>Gross Weight</p>
<el-input <el-input
v-model="item.input" v-model="item.input10"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Flash Point (if have )" placeholder="Gross Weight "
></el-input> >
<p class="CsMt" v-else>{{ item.input }}</p> <template slot="append">KGS</template>
</el-input>
</div> </div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')"> <div class="F1">
<p>Marine Pollutant(p or no)</p> <p><span class="RXing">*</span>Net Weight</p>
<el-input <el-input
v-model="item.input" v-model="item.input11"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Marine Pollutant(p or no) " placeholder="Net Weight "
></el-input> >
<p class="CsMt" v-else>{{ item.input }}</p> <template slot="append">KGS</template>
</el-input>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')"> <div class="F1">
<p>Boiling Point(if have)</p> <p>NA number</p>
<el-input <el-input
v-model="item.input" v-model="item.input7"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Boiling Point(if have) " placeholder="美国货，按需填写"
></el-input> ></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div> </div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')"> <div class="F1">
<p>Package Quantity and Type</p> <p>
<el-input Reportable/Excepted/Limited Quantify
v-model="item.input" <el-tooltip
@blur="FnTableCheckboxInputBlur(item, 'input')" class="item"
v-if="item.Web_input_type" effect="dark"
content="美国RQs是指有害物质释放到环境中，对公众健康或环境造成重大危害的数量。根据CERCLA,当数量达到或超过规定的RQs时，必须通知联邦政府"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
</p>
<el-select
v-model="item.input12"
placeholder="美国RQs/可免除量/限量三选一"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Package Quantity and Type" >
></el-input> <el-option label="Reportable" value="Reportable">
<p class="CsMt" v-else>{{ item.input }}</p> </el-option>
<el-option label="Excepted" value="Excepted"> </el-option>
<el-option label="Limited" value="Limited"> </el-option>
</el-select>
</div> </div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')"> <div class="F1">
<p>Packing Code</p> <p>Control Temperature</p>
<el-input <el-input
v-model="item.input" v-model="item.input7"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Packing Code" placeholder="控制温度，特定UN填写"
></el-input> ></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div> </div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')"> <div class="F1">
<p>Gross Weight</p> <p>Emergency Temperature</p>
<el-input <el-input
v-model="item.input" v-model="item.input7"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Gross Weight " placeholder="紧急温度，特定UN填写"
></el-input> ></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')"> <div class="F2">
<p>Net Weight</p> <p>UNNO suffix/Sequence</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }"
placeholder="Net Weight "
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Limited Quantity(if have)</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }"
placeholder="Limited Quantity(if have)"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Lighter's Brand and Factory(if have)</p>
<el-input <el-input
v-model="item.input" v-model="item.input13"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Lighter's Brand and Factory(if have)" placeholder="UNNO suffix/Sequence"
></el-input> ></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div> </div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')"> <div class="F2">
<p>Inner Package</p> <p>IMDG Code Segregation Group</p>
<el-input <el-input
v-model="item.input" v-model="item.input13"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Inner Package" placeholder="货物有隔离性需要选择"
></el-input> ></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div> </div>
</div> --> </div>
</div> </div>
</el-checkbox> </el-checkbox>
<div class="CsCheckboxButtonBox"> <div class="CsCheckboxButtonBox">
@ -845,7 +755,7 @@ export default {
padding: 0; padding: 0;
} }
.main { .main {
width: 60%; width: 70%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1019,4 +929,8 @@ export default {
color: #dd5643; color: #dd5643;
// font-size: 1rem; // font-size: 1rem;
} }
.RXing {
color: red;
margin-right: 2px;
}
</style> </style>

Write Preview
Loading…
Cancel
Save