Skip to content

G
gs1
Commit 0bcd6429 by 方圆
Options

GRAI 移动端兼容

parent 9c1be01b
Showing with 56 additions and 38 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -15,7 +15,7 @@
"dependencies": {
"@popperjs/core": "^2.10.1",
"@tweenjs/tween.js": "^18.5.0",
"bootstrap": "^4.6",
"bootstrap": "^4.6.1",
"bootstrap-icons": "^1.7.2",
"clear": "^0.1.0",
"core-js": "^2.6.11",
......
src/views/BarCode/GRAI.vue
......@@ -3,10 +3,13 @@
<cate :father="sfmlqdCate"></cate>
<!-- 条码生成区域start -->
<div class="generate_area">
<div class="enter_box">
<div class="enter_name">AI标识符：</div>
<div class="tag_num">{{ inputInfo.codeValue }}</div>
<div class="input_box">
<div class="enter_box row">
<div class="enter_name col-lg-2">AI标识符：</div>
<div class="col-lg-1">
<div class="tag_num">{{ inputInfo.codeValue }}</div>
</div>
<div class="input_box col-lg-8">
<el-input
:placeholder="inputInfo.prompt"
v-model="identifier"
......@@ -17,7 +20,11 @@
</el-input>
</div>
</div>
<div class="operate_button" @click="handleGenerate">生成条码</div>
<div class="row justify-content-center">
<div class="col-lg-3 operate_button" @click="handleGenerate">生成条码</div>
</div>
</div>
<!-- 条码生成区域end -->
<!-- 条码生成成功区域start -->
......@@ -112,14 +119,15 @@ export default {
.enter_box .input_box .el-input,
.enter_box .input_box .el-input .el-input__inner {
width: 242px;
height: 40px;
height: 42px;
}
.enter_box .input_box .el-input {
border-radius: 2px;
position: relative;
/* margin-top: 2px; */
}
.enter_box .input_box .el-input .el-input__inner {
height: 40px;
height: 42px;
border-radius: 2px;
border: 1px solid #cccccc;
font-size: 13px;
......@@ -137,22 +145,29 @@ export default {
.corppay {
@include module-box;
.generate_area {
height: 100px;
// height: 100px;
// background: orchid;
padding: 0 30px;
.enter_box {
display: flex;
height: 40px;
line-height: 40px;
// display: flex;
// height: 40px;
// line-height: 40px;
margin-top: 29px;
margin-bottom: 29px;
box-sizing: border-box;
margin: 29px 0px;
.enter_name {
width: 100px;
// width: 100px;
height: 42px;
line-height: 42px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #414345;
text-align: center;
}
.tag_num {
height: 42px;
line-height: 42px;
width: 72px;
border-radius: 2px;
border: 1px solid #cccccc;
......@@ -161,11 +176,12 @@ export default {
color: #454545;
padding-left: 10px;
padding-left: 10px;
margin-bottom: 5px;
}
.input_box {
width: 242px;
height: 40px;
margin-left: 10px;
height: 42px;
// margin-left: 10px;
}
}
.operate_button {
......@@ -178,8 +194,9 @@ export default {
font-family: MicrosoftYaHei;
color: #ffffff;
text-align: center;
margin-top: 20px;
margin-left: 182px;
// margin-top: 20px;
// margin-left: 182px;
margin-bottom: 20px;
cursor: pointer;
}
.operate_button:hover{
......
src/views/BarCode/codeFooter.vue
<template>
<div class="code_footer">
<div class="code_title">友情提示：</div>
<div class="code_content">
<div class="content_desc">
<div class="row code_title">友情提示：</div>
<div class="code_content row">
<div class="content_desc col-lg-8">
GS1-128条码符号是ANCC系统中使用的一种条码符号，也是一种商品条码符号。GS1-128
条码是Code128的子集。
</div>
<div class="img_box">
<div class="img_box col-lg-4">
<img src="../../assets/image/barcode/barcode.png" alt="" />
</div>
</div>
......@@ -14,29 +14,30 @@
</template>
<style lang="scss" scoped>
.code_footer {
height: 214px;
// height: 214px;
background: rgba(242, 99, 53, 0.03);
padding: 20px 30px;
.code_title {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #f26335;
padding-left: 15px;
}
.code_content {
display: flex;
// display: flex;
padding-top: 30px;
.content_desc {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #414345;
line-height: 24px;
}
.img_box {
padding-left: 30px;
text-align: center;
img {
width: 204px;
height: 107px;
margin: 0 auto;
}
}
}
......
src/views/BarCode/generateSuccess.vue
<template>
<!-- 条码生成成功区域start -->
<div class="success_area">
<div class="suc_area_title">生成条码结果</div>
<div class="suc_area_title row">生成条码结果</div>
<div class="show_area">
<div class="font_title"><span>|</span>条码图片</div>
<div class="code_pic">
<div class="font_title row"><span>|</span>条码图片</div>
<div class="code_pic row">
<img :src="codePicture" alt="" />
</div>
<div class="down_button" @click="downPicture">下载图片</div>
<div class="row justify-content-center">
<div class="down_button col-lg-3" @click="downPicture">下载图片</div>
</div>
</div>
</div>
<!-- 条码生成成功区域end -->
</template>
<script>
import cate from "../comps/cate.vue";
import codeFooter from "./codeFooter.vue";
export default {
components: {
cate,
codeFooter,
},
components: {},
props: {
codePicture: {
type: String,
......@@ -73,6 +70,7 @@ export default {
color: #f26335;
padding-left: 20px;
line-height: 40px;
margin: 0;
}
.show_area {
height: 320px;
......@@ -81,9 +79,11 @@ export default {
.font_title {
font-size: 16px;
height: 49px;
line-height: 49px;
font-family: MicrosoftYaHei;
color: #f26335;
padding-top: 21px;
// padding-top: 21px;
padding-left: 20px;
span {
display: inline-block;
width: 4px;
......@@ -107,7 +107,7 @@ export default {
.down_button {
width: 120px;
height: 40px;
margin: 0 auto;
// margin: 0 auto;
margin-top: 30px;
border-radius: 4px;
border: 1px solid #f26335;
......
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