Skip to content

G
gs1
Commit 7982ca48 by Tang
Options

feat: 境内境外查询页面【90%】，样式问题未解决，添加其他查询基础页面

parent 307434ab
Showing with 680 additions and 0 deletions
src/assets/css/_reset.css 0 → 100644
@charset "utf-8";
/* CSS Document */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
img {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
background: #f0f5fa;
}
body {
font-size: 12px;
font-family: PingFangSC-Regular, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
a {
text-decoration: none;
}
ul,
ol {
list-style: none;
}
input {
border: none;
padding-top: 0;
padding-bottom: 0;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
select,
input {
vertical-align: middle;
}
select,
input,
textarea {
margin: 0;
}
input[type="text"],
input[type="password"],
textarea {
outline-style: none;
-webkit-appearance: none;
}
button {
cursor: pointer;
border: none;
outline: none;
}
textarea {
resize: none;
}
table {
border-collapse: collapse;
}
em,
i {
font-style: normal;
}
a,
button,
input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
a,
input[type="button"],
input[type="submit"] {
cursor: pointer;
}
::-webkit-scrollbar-track-piece {
background: #fff1d9;
border-radius: 2px;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
min-height: 30px;
background: #ffb73f;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #e59f29;
}
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
select::-ms-expand {
display: none;
}
textarea {
overflow: hidden;
}
src/views/Search/bike.vue 0 → 100644
<template>
<div class="search-content">
<div class="title">自行车企业代码公告查询</div>
<div class="body">
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
<div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search: { code: "", validate: "" },
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
};
</script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/check.vue 0 → 100644
<template>
<div class="search-content">
<div class="title">计算校验码</div>
<div class="body">
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
<div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search: { code: "", validate: "" },
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
};
</script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/country.vue 0 → 100644
<template>
<div class="search-content">
<div class="title">国家及地区前缀码查询</div>
<div class="body">
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
<div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search: { code: "", validate: "" },
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
};
</script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/gln.vue 0 → 100644
<template>
<div class="search-content">
<div class="title">GLN查询</div>
<div class="body">
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
<div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search: { code: "", validate: "" },
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
};
</script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/glossary.vue 0 → 100644
<template>
<div class="search-content">
<div class="title">条码术语查询</div>
<div class="body">
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
<div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search: { code: "", validate: "" },
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
};
</script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment