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

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

@ -22,7 +22,7 @@
<p>596854040</p>
</div>
<div class="BB">
<p>3.Page of pages</p>
<p>3.Page of pages &nbsp;&nbsp;&nbsp; 1-1</p>
</div>
<div class="flex">
<div class="F1 BR"><p>4.Shipper's reference</p></div>
@ -68,19 +68,23 @@
</div>
</div>
<div class="F1">
<p>9.Additional handling information</p>
<p>
<span class="RXing">*</span> 9.Additional handling information
</p>
<p>
24 hr Emergency contact person :
<el-input
v-model="input"
placeholder="请输入内容"
:style="{ width: '40%', marginLeft: '15px' }"
size="small"
:style="{ width: '40%', margin: '0 0 5px 15px' }"
></el-input>
<br />
24 hr Emergency contact telephone:
<el-input
v-model="input"
placeholder="请输入内容"
size="small"
:style="{ width: '40%' }"
></el-input>
<br />
@ -135,22 +139,48 @@
<div class="flex column">
<div class="flex">
<div class="F1">
<p>UN No</p>
<p><span class="RXing">*</span>UN No</p>
<el-input
v-model="item.input"
:style="{ width: '90%' }"
placeholder="UN No"
></el-input>
</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">
<p>Proper Shipping Name</p>
<p><span class="RXing">*</span>Proper Shipping Name</p>
<el-input
v-model="item.input1"
:style="{ width: '95%' }"
placeholder="Proper Shipping Name"
></el-input>
</div>
<div class="F1">
<div class="F2">
<p>Technical Name (if have)</p>
<el-input
v-model="item.input2"
@ -161,22 +191,9 @@
</div>
<div class="flex">
<div class="F1">
<p>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>Packing Group</p>
<!-- <el-input
v-model="item.input4"
:style="{ width: '90%' }"
placeholder="Packing Group"
></el-input> -->
<p><span class="RXing">*</span>Packing Group</p>
<el-select
v-model="item.input6"
v-model="item.input4"
:style="{ width: '90%' }"
placeholder="Packing Group"
>
@ -186,51 +203,16 @@
</el-select>
</div>
<div class="F1">
<p>Flash Point (if have )</p>
<p><span class="RXing">*</span>EMS</p>
<el-input
v-model="item.input5"
:style="{ width: '90%' }"
placeholder="Flash Point (if have )"
>
<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)"
placeholder="EMS"
>
<el-option label="P" value="P"> </el-option>
<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>
</el-input>
</div>
<div class="F1">
<p>Packing Code</p>
<p><span class="RXing">*</span>Packing Code</p>
<el-input
v-model="item.input9"
:style="{ width: '90%' }"
@ -238,48 +220,54 @@
></el-input>
</div>
<div class="F1">
<p>Gross Weight</p>
<p><span class="RXing">*</span>Packing Type</p>
<el-input
v-model="item.input10"
v-model="item.input9"
:style="{ width: '90%' }"
placeholder="Gross Weight "
>
<template slot="append">KGS</template>
</el-input>
placeholder="Packing Type"
></el-input>
</div>
</div>
<div class="flex">
<div class="F1">
<p>Net Weight</p>
<p>Flash Point (if have )</p>
<el-input
v-model="item.input11"
v-model="item.input5"
: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 class="F1">
<p>Reportable/Excepted/Limited Quantifu</p>
<p><span class="RXing">*</span>Marine Pollutant(p or no)</p>
<el-select
v-model="item.input12"
placeholder="Reportable/Excepted/Limited Quantifu"
v-model="item.input6"
:style="{ width: '90%' }"
placeholder="Marine Pollutant(p or no)"
>
<el-option label="Reportable" value="Reportable">
</el-option>
<el-option label="Excepted" value="Excepted"> </el-option>
<el-option label="Limited" value="Limited"> </el-option>
<el-option label="P" value="P"> </el-option>
<el-option label="N" value="N"> </el-option>
</el-select>
</div>
<div class="F1">
<p>Lighter's Brand and Factory(if have)</p>
<p><span class="RXing">*</span>Package Quantity</p>
<el-input
v-model="item.input13"
v-model="item.input8"
:style="{ width: '90%' }"
placeholder="Lighter's Brand and Factory(if have)"
placeholder="Package Quantity "
></el-input>
</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">
<p>Inner Package</p>
<el-select
@ -309,180 +297,102 @@
</el-option>
</el-select>
</div>
</div>
<!-- <div class="flex">
<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>
<div class="F1">
<p>Inner Package Type</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
v-model="item.input7"
:style="{ width: '90%' }"
placeholder="Packing Group"
placeholder="Inner Package Type"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Flash Point (if have )</p>
<div class="F1">
<p><span class="RXing">*</span>Gross Weight</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
v-model="item.input10"
:style="{ width: '90%' }"
placeholder="Flash Point (if have )"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
placeholder="Gross Weight "
>
<template slot="append">KGS</template>
</el-input>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Marine Pollutant(p or no)</p>
<div class="F1">
<p><span class="RXing">*</span>Net Weight</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
v-model="item.input11"
:style="{ width: '90%' }"
placeholder="Marine Pollutant(p or no) "
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
placeholder="Net Weight "
>
<template slot="append">KGS</template>
</el-input>
</div>
</div>
<div class="flex">
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Boiling Point(if have)</p>
<div class="F1">
<p>NA number</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
v-model="item.input7"
:style="{ width: '90%' }"
placeholder="Boiling Point(if have) "
placeholder="美国货，按需填写"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Package Quantity and Type</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
<div class="F1">
<p>
Reportable/Excepted/Limited Quantify
<el-tooltip
class="item"
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%' }"
placeholder="Package Quantity and Type"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
>
<el-option label="Reportable" value="Reportable">
</el-option>
<el-option label="Excepted" value="Excepted"> </el-option>
<el-option label="Limited" value="Limited"> </el-option>
</el-select>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Packing Code</p>
<div class="F1">
<p>Control Temperature</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
v-model="item.input7"
:style="{ width: '90%' }"
placeholder="Packing Code"
placeholder="控制温度，特定UN填写"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Gross Weight</p>
<div class="F1">
<p>Emergency Temperature</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
v-model="item.input7"
:style="{ width: '90%' }"
placeholder="Gross Weight "
placeholder="紧急温度，特定UN填写"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
</div>
<div class="flex">
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Net Weight</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>
<div class="F2">
<p>UNNO suffix/Sequence</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
v-model="item.input13"
:style="{ width: '90%' }"
placeholder="Limited Quantity(if have)"
placeholder="UNNO suffix/Sequence"
></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>
<div class="F2">
<p>IMDG Code Segregation Group</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
v-model="item.input13"
:style="{ width: '90%' }"
placeholder="Lighter's Brand and Factory(if have)"
placeholder="货物有隔离性需要选择"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
<div class="F1" @dblclick="FnTableCheckboxClick(item, 'input')">
<p>Inner Package</p>
<el-input
v-model="item.input"
@blur="FnTableCheckboxInputBlur(item, 'input')"
v-if="item.Web_input_type"
:style="{ width: '90%' }"
placeholder="Inner Package"
></el-input>
<p class="CsMt" v-else>{{ item.input }}</p>
</div>
</div> -->
</div>
</el-checkbox>
<div class="CsCheckboxButtonBox">
@ -845,7 +755,7 @@ export default {
padding: 0;
}
.main {
width: 60%;
width: 70%;
margin: 0 auto;
display: flex;
flex-direction: column;
@ -1019,4 +929,8 @@ export default {
color: #dd5643;
// font-size: 1rem;
}
.RXing {
color: red;
margin-right: 2px;
}
</style>

Write Preview
Loading…
Cancel
Save