|
@ -13,6 +13,8 @@
|
||||||
"element-ui": "^2.15.14",
|
"element-ui": "^2.15.14",
|
||||||
"ezuikit-js": "^7.7.7",
|
"ezuikit-js": "^7.7.7",
|
||||||
"flv.js": "^1.6.2",
|
"flv.js": "^1.6.2",
|
||||||
|
"html2canvas": "^1.4.1",
|
||||||
|
"qrcode": "^1.5.3",
|
||||||
"video.js": "^7.21.5",
|
"video.js": "^7.21.5",
|
||||||
"videojs-contrib-hls": "^5.15.0",
|
"videojs-contrib-hls": "^5.15.0",
|
||||||
"videojs-contrib-hls.js": "^3.2.0",
|
"videojs-contrib-hls.js": "^3.2.0",
|
||||||
|
|
|
@ -235,7 +235,27 @@ export default {
|
||||||
//根据id添加status设备
|
//根据id添加status设备
|
||||||
addPermissionStatus(id1,id2){
|
addPermissionStatus(id1,id2){
|
||||||
return sendPostRequest(`/getcontrol/addStatepermission?deviceId=${id1}&Permissionid=${id2}`, '')
|
return sendPostRequest(`/getcontrol/addStatepermission?deviceId=${id1}&Permissionid=${id2}`, '')
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//二维码溯源
|
||||||
|
//查看农事作物信息
|
||||||
|
getAgriculturalInformation(data){
|
||||||
|
return sendGetRequest(`/code/getAgriculturalInformation`, data)
|
||||||
|
},
|
||||||
|
//查看种植计划
|
||||||
|
getplant(data){
|
||||||
|
return sendGetRequest(`/code/getplant`, data)
|
||||||
|
},
|
||||||
|
//查看农场信息管理
|
||||||
|
getcodeFarmInformationManagement(data){
|
||||||
|
return sendGetRequest(`/code/getcodeFarmInformationManagement`, data)
|
||||||
|
},
|
||||||
|
|
||||||
|
//上传图片
|
||||||
|
uploadImage(data){
|
||||||
|
return sendPostRequest(`/code/uploadImage`, data)
|
||||||
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -30,6 +30,37 @@
|
||||||
/*滚动条边角*/
|
/*滚动条边角*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-scroll {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-scroll::-webkit-scrollbar {
|
||||||
|
/*滚动条整体*/
|
||||||
|
width: 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-scroll::-webkit-scrollbar-track {
|
||||||
|
/*滚动条轨道*/
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-scroll::-webkit-scrollbar-thumb {
|
||||||
|
/*滚动条里面的滑块*/
|
||||||
|
width: 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ccc;
|
||||||
|
border: 0px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-scroll::-webkit-scrollbar-thumb:hover {
|
||||||
|
/*滚动条鼠标事件,鼠标放上去出现的事件*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-scroll::-webkit-scrollbar-corner {
|
||||||
|
/*滚动条边角*/
|
||||||
|
}
|
||||||
|
|
||||||
.el-popconfirm__main,
|
.el-popconfirm__main,
|
||||||
.el-date-table td span,
|
.el-date-table td span,
|
||||||
.el-date-range-picker__header div {
|
.el-date-range-picker__header div {
|
||||||
|
@ -2332,7 +2363,10 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode .el-menu, .el-submenu__title:hover, .el-menu-item:hover, .el-menu-item:focus {
|
.vrcode .el-menu,
|
||||||
|
.el-submenu__title:hover,
|
||||||
|
.el-menu-item:hover,
|
||||||
|
.el-menu-item:focus {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2371,12 +2405,14 @@
|
||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode .el-submenu__title, .vrcode .el-menu-item {
|
.vrcode .el-submenu__title,
|
||||||
|
.vrcode .el-menu-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode .el-submenu__title .img, .vrcode .el-menu-item .img {
|
.vrcode .el-submenu__title .img,
|
||||||
|
.vrcode .el-menu-item .img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -2446,7 +2482,8 @@
|
||||||
background: rgba(0, 47, 94, 0.35);
|
background: rgba(0, 47, 94, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode-table .vrcode-table-view.table-view .el-table .el-table__cell, .vrcode-table .vrcode-table-view.table-view .el-table__row {
|
.vrcode-table .vrcode-table-view.table-view .el-table .el-table__cell,
|
||||||
|
.vrcode-table .vrcode-table-view.table-view .el-table__row {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2588,6 +2625,7 @@
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode-model .vrcode-model-title::after {
|
.vrcode-model .vrcode-model-title::after {
|
||||||
|
@ -2601,36 +2639,6 @@
|
||||||
top: 4px;
|
top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode-model .vrcode-input {
|
|
||||||
width: 300px;
|
|
||||||
margin-right: 30px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-input .input-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: Microsoft YaHei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #FFFFFF;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-input input {
|
|
||||||
width: 300px;
|
|
||||||
height: 44px;
|
|
||||||
background: rgba(90, 210, 255, 0.25);
|
|
||||||
border: 2px solid rgba(86, 209, 255, 0.5);
|
|
||||||
font-size: 16px;
|
|
||||||
padding-left: 15px;
|
|
||||||
font-family: Microsoft YaHei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-input input::placeholder {
|
|
||||||
color: #92B1D0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-input-sel {
|
.vrcode-model .vrcode-input-sel {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
@ -2772,77 +2780,6 @@
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage > .title {
|
|
||||||
margin-bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view #sel-img {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view .sel-div {
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
margin-right: 30px;
|
|
||||||
background: rgba(86, 209, 255, 0.25);
|
|
||||||
border: 1px dashed #56D1FF;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img {
|
|
||||||
position: relative;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img:hover .del-img {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img .el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img .del-img {
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
display: none;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img .del-img img {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-image-sel {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-image-sel > img {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-model .vrcode-title {
|
.vrcode-model .vrcode-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
@ -2897,6 +2834,107 @@
|
||||||
min-height: 30vh;
|
min-height: 30vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vrcode-input {
|
||||||
|
width: 300px;
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-input .input-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-input input {
|
||||||
|
width: 300px;
|
||||||
|
height: 44px;
|
||||||
|
background: rgba(90, 210, 255, 0.25);
|
||||||
|
border: 2px solid rgba(86, 209, 255, 0.5);
|
||||||
|
font-size: 16px;
|
||||||
|
padding-left: 15px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-input input::placeholder {
|
||||||
|
color: #92B1D0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage > .title {
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view #sel-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view .sel-div {
|
||||||
|
width: 130px;
|
||||||
|
height: 130px;
|
||||||
|
margin-right: 30px;
|
||||||
|
background: rgba(86, 209, 255, 0.25);
|
||||||
|
border: 1px dashed #56D1FF;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view .sel-div.sel-img {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view .sel-div.sel-img:hover .del-img {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view .sel-div.sel-img .el-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view .sel-div.sel-img .del-img {
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view .sel-div.sel-img .del-img img {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view .sel-div.sel-image-sel {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage .sel-image-view .sel-div.sel-image-sel > img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.dialog-footer {
|
.dialog-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -2982,6 +3020,54 @@
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.productTraceability .productTraceability-content {
|
||||||
|
margin-top: 135px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productTraceability .productTraceability-content > div {
|
||||||
|
margin: 0 45px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productTraceability .productTraceability-content .content-1 {
|
||||||
|
width: 200px;
|
||||||
|
height: 316px;
|
||||||
|
background: url(../img/productTraceability-1.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productTraceability .productTraceability-content .content-1:hover {
|
||||||
|
background: url(../img/productTraceability-1hover.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productTraceability .productTraceability-content .content-2 {
|
||||||
|
width: 240px;
|
||||||
|
height: 316px;
|
||||||
|
background: url(../img/productTraceability-2.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productTraceability .productTraceability-content .content-2:hover {
|
||||||
|
background: url(../img/productTraceability-2hover.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productTraceability .productTraceability-content .content-3 {
|
||||||
|
width: 200px;
|
||||||
|
height: 316px;
|
||||||
|
background: url(../img/productTraceability-3.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productTraceability .productTraceability-content .content-3:hover {
|
||||||
|
background: url(../img/productTraceability-3hover.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.model-title {
|
.model-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -3026,3 +3112,197 @@
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.setsuyuan {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page {
|
||||||
|
width: 375px;
|
||||||
|
height: 736px;
|
||||||
|
background: url(../img/setsuyuan-page.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 22px 23px 21px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 30px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page > div {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page .mobile-img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page .mobile-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 240px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page .mobile-top > div {
|
||||||
|
font-family: Microsoft Yahei;
|
||||||
|
font-size: 30px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page .mobile-content {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 453px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 35px 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page .mobile-view {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page .mobile-view .mobile-view-content {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page .mobile-view .mobile-text {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-page .mobile-page .mobile-content-title {
|
||||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAfCAYAAAA4LFWUAAACiElEQVR4Xu2bvU8UURTFz51Ag6wFauOfIWurnUtoiI2JEEuFkIBKokRpaDYIFmiIBpeSBI2VdkAHLR9/Bo26haPbwL5LZmZn3I+ZjUvyHnOTO+XOzrvnnfvLm5PdXEK3a3t+jLz+52C+DWCg63f1plQHaiA6YHO6ipHl71mboKwb3u6rZWbvpdTdq+7eHSAyK+be0nzak+mgbC+MEeFb76X0CekOcN3cx+hSR+9TQaGdhT0Ad6RvWvVfyIF9LpXvtj/ZCcrms1t0Y+AIlPlWulB1fUiIA8zgH7VhPHp33Ky4gwZva2adr12dFLItlWnBAfr1+5MZX5vKBuXr9CCd9p3geqFgob4uKcWBn77P/Wc38eDjn1hy64nyeeYxgSoYUk6k9NSKzqoPBj/Bw7WNVFBo6+kBiIsKihX75Sxa9QGmQx5/H/x+Fl7/TpQgxPaZo/BTPVHkNNWG0gAUAHzmJaE2ASUMsURRiFVQbNgvZ80GKMSchNoIlDjEeojCiYIip6k2lDZAgUESaiNQ4hAbF1VQbNgvZ80YlOD1Y+qTmPhQCUFJQqyCIqeZNpU2gRKHWkJziFVQbNovZ+1mUMJTBUVqCbEKipxm2lTaBkoQaglfZuc8boTYRnEeKiza1KFr59sBqvot/TcEP+vfY873VlSdTQe4VO7gQkGx6bjQtRUUoY1zLVtBce240HoKitDGuZatoLh2XGg9BUVo41zLVlBcOy60noIitHGuZfcCyl+dDHTdntzUq3GpfKVdjc715KY/uRHyn3M9gV6dFMxN11wL6WlSMBDn7bxeYdAL10K13uU5QKi/NaU3qfPm3ccBo5NlDkBRM8vlNdBy5RqAQ66b1bSZ47j2Odyz15vs+mViAAAAAElFTkSuQmCC) no-repeat center;
|
||||||
|
width: 138px;
|
||||||
|
height: 31px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
z-index: 2;
|
||||||
|
font-size: 15px;
|
||||||
|
position: absolute;
|
||||||
|
top: -16px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .page-content {
|
||||||
|
width: calc(100% - 400px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .vrcode-selimage {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .vrcode-selimage .sel-image-view .sel-div {
|
||||||
|
width: 200px;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .vrcode-selimage .sel-image-view .sel-div.sel-img .del-img {
|
||||||
|
width: 178px;
|
||||||
|
height: 138px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-tips {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FF9999;
|
||||||
|
margin: 0px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .vrcode-input {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .vrcode-input input {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-input {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-input .setsuyuan-input-name {
|
||||||
|
width: 120px;
|
||||||
|
padding-right: 20px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 40px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-input .el-color-picker__trigger {
|
||||||
|
background: rgba(90, 210, 255, 0.25);
|
||||||
|
border: 2px solid rgba(86, 209, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .save-btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
background: #19ABFF;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-input-select {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-shrink: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-height: 50px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-input-select .no-sel {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
box-shadow: 0 0 15px rgba(53, 187, 247, 0.5) inset;
|
||||||
|
border: 1px solid rgba(0, 204, 255, 0.7);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan .setsuyuan-input-select .sel {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background: url(../image/radio.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button span {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
|
@ -32,21 +32,59 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-scroll {
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
/*滚动条整体*/
|
||||||
|
width: 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
/*滚动条轨道*/
|
||||||
|
|
||||||
|
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
/*滚动条里面的滑块*/
|
||||||
|
width: 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ccc;
|
||||||
|
border: 0px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
|
/*滚动条鼠标事件,鼠标放上去出现的事件*/
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-corner {
|
||||||
|
/*滚动条边角*/
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.el-popconfirm__main,
|
.el-popconfirm__main,
|
||||||
.el-date-table td span,
|
.el-date-table td span,
|
||||||
.el-date-range-picker__header div {
|
.el-date-range-picker__header div {
|
||||||
color: #606266!important;
|
color: #606266 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-date-table td.end-date div span,
|
.el-date-table td.end-date div span,
|
||||||
.el-date-table td.start-date div span {
|
.el-date-table td.start-date div span {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
.el-button--text{
|
|
||||||
span{
|
.el-button--text {
|
||||||
color:#409EFF!important;
|
span {
|
||||||
|
color: #409EFF !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dropdown-menu {
|
.el-dropdown-menu {
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
@extend .scroll;
|
@extend .scroll;
|
||||||
|
@ -245,7 +283,8 @@
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #00FFBA;
|
color: #00FFBA;
|
||||||
}
|
}
|
||||||
.title-text{
|
|
||||||
|
.title-text {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
@ -522,15 +561,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.margin-none{
|
|
||||||
margin: 0!important;
|
.margin-none {
|
||||||
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
.padding-none{
|
|
||||||
padding: 0!important;
|
.padding-none {
|
||||||
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
.border-right{
|
|
||||||
|
.border-right {
|
||||||
border-right: 1px solid rgba(2, 148, 226, 0.5);
|
border-right: 1px solid rgba(2, 148, 226, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-main {
|
.input-main {
|
||||||
span {
|
span {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
@ -799,13 +842,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title-tips{
|
|
||||||
|
.title-tips {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #8BEAFF;
|
color: #8BEAFF;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-view {
|
.flex-view {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -1956,13 +2001,16 @@ margin-top: 20px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
&.status-add{
|
|
||||||
|
&.status-add {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
>img{
|
|
||||||
|
>img {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
>img {
|
>img {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -2061,13 +2109,15 @@ margin-top: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.wufang{
|
|
||||||
.flex-sel{
|
.wufang {
|
||||||
|
.flex-sel {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-sel {
|
.no-sel {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -2087,6 +2137,7 @@ margin-top: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dataAnalysis {
|
.dataAnalysis {
|
||||||
.page-content {
|
.page-content {
|
||||||
.search-flex {
|
.search-flex {
|
||||||
|
@ -2300,12 +2351,13 @@ margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skylight {
|
.skylight {
|
||||||
.flex-sel{
|
.flex-sel {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-sel {
|
.no-sel {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -2324,6 +2376,7 @@ margin-top: 20px;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-sel {
|
.input-sel {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
|
||||||
|
@ -2335,9 +2388,11 @@ margin-top: 20px;
|
||||||
.flex-view {
|
.flex-view {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.border-bottom{
|
|
||||||
|
.border-bottom {
|
||||||
border-bottom: 1px solid rgba(2, 148, 226, 0.5);
|
border-bottom: 1px solid rgba(2, 148, 226, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-main {
|
.input-main {
|
||||||
|
|
||||||
>input {
|
>input {
|
||||||
|
@ -2466,25 +2521,33 @@ margin-top: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//二维码部分css
|
//二维码部分css
|
||||||
.flex-end{
|
.flex-end {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
.vrcode .el-menu,.el-submenu__title:hover,.el-menu-item:hover,.el-menu-item:focus{
|
|
||||||
|
.vrcode .el-menu,
|
||||||
|
.el-submenu__title:hover,
|
||||||
|
.el-menu-item:hover,
|
||||||
|
.el-menu-item:focus {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
.vrcode{
|
|
||||||
.el-menu{
|
.vrcode {
|
||||||
|
.el-menu {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
.el-submenu__icon-arrow{
|
|
||||||
|
.el-submenu__icon-arrow {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.el-submenu .el-menu-item{
|
|
||||||
|
.el-submenu .el-menu-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 31px;
|
padding-left: 31px;
|
||||||
|
@ -2497,7 +2560,8 @@ margin-top: 20px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
&::before{
|
|
||||||
|
&::before {
|
||||||
content: " ";
|
content: " ";
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
|
@ -2508,10 +2572,13 @@ margin-top: 20px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-submenu__title,.el-menu-item{
|
|
||||||
|
.el-submenu__title,
|
||||||
|
.el-menu-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.img{
|
|
||||||
|
.img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -2520,54 +2587,64 @@ margin-top: 20px;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-submenu .el-menu-item.is-active{
|
|
||||||
|
.el-submenu .el-menu-item.is-active {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode-textarea{
|
.vrcode-textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
.title{
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: Microsoft YaHei;
|
|
||||||
margin-bottom:7px;
|
|
||||||
}
|
|
||||||
textarea{
|
|
||||||
width: 680px;
|
|
||||||
height: 160px;
|
|
||||||
background: rgba(90,210,255,0.25);
|
|
||||||
border: 2px solid rgba(86,209,255,0.5);
|
|
||||||
padding: 15px;
|
|
||||||
color: #fff;
|
|
||||||
&::placeholder{
|
|
||||||
|
|
||||||
color: #92B1D0;
|
.title {
|
||||||
}
|
font-size: 16px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 680px;
|
||||||
|
height: 160px;
|
||||||
|
background: rgba(90, 210, 255, 0.25);
|
||||||
|
border: 2px solid rgba(86, 209, 255, 0.5);
|
||||||
|
padding: 15px;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
|
||||||
|
color: #92B1D0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.vrcode-table{
|
|
||||||
.vrcode-btn{
|
.vrcode-table {
|
||||||
|
.vrcode-btn {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.vrcode-table-view{
|
|
||||||
|
.vrcode-table-view {
|
||||||
&.table-view {
|
&.table-view {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
margin-top:10px;
|
margin-top: 10px;
|
||||||
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
|
||||||
|
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
:empty::before{
|
|
||||||
content:'--';
|
:empty::before {
|
||||||
color:#fff;
|
content: '--';
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table .warning-row {
|
.el-table .warning-row {
|
||||||
background: rgba(0, 180, 255, 0.2);
|
background: rgba(0, 180, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
@ -2576,9 +2653,12 @@ color: #92B1D0;
|
||||||
background: rgba(0, 47, 94, 0.35);
|
background: rgba(0, 47, 94, 0.35);
|
||||||
|
|
||||||
}
|
}
|
||||||
.el-table .el-table__cell,.el-table__row{
|
|
||||||
|
.el-table .el-table__cell,
|
||||||
|
.el-table__row {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table::before,
|
.el-table::before,
|
||||||
.el-table--border::after {
|
.el-table--border::after {
|
||||||
height: 0;
|
height: 0;
|
||||||
|
@ -2604,44 +2684,50 @@ color: #92B1D0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode-table-btn{
|
.vrcode-table-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center
|
justify-content: center
|
||||||
}
|
}
|
||||||
.table-flex{
|
|
||||||
|
.table-flex {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.el-table__body-wrapper{
|
|
||||||
|
.el-table__body-wrapper {
|
||||||
@extend .scroll;
|
@extend .scroll;
|
||||||
}
|
}
|
||||||
.el-table__cell.gutter{
|
|
||||||
|
.el-table__cell.gutter {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.isOpen{
|
|
||||||
|
.isOpen {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
&.open-green{
|
|
||||||
background: rgba(0,255,186,0.1);
|
&.open-green {
|
||||||
|
background: rgba(0, 255, 186, 0.1);
|
||||||
color: #00FFBA;
|
color: #00FFBA;
|
||||||
border: 1px solid rgba(0,255,186,0.4);
|
border: 1px solid rgba(0, 255, 186, 0.4);
|
||||||
}
|
}
|
||||||
&.open-red{
|
|
||||||
background: rgba(245,108,108,0.6);
|
&.open-red {
|
||||||
border: 1px solid #F56C6C;
|
background: rgba(245, 108, 108, 0.6);
|
||||||
color: #FFFFFF;
|
border: 1px solid #F56C6C;
|
||||||
}
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2658,7 +2744,7 @@ color: #FFFFFF;
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 7.5px 10px 7.5px 0!important;
|
margin: 7.5px 10px 7.5px 0 !important;
|
||||||
|
|
||||||
>img {
|
>img {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
@ -2722,6 +2808,7 @@ color: #FFFFFF;
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
|
@ -2736,35 +2823,7 @@ color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vrcode-input {
|
|
||||||
width: 300px;
|
|
||||||
margin-right: 30px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
.input-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: Microsoft YaHei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #FFFFFF;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 300px;
|
|
||||||
height: 44px;
|
|
||||||
background: rgba(90, 210, 255, 0.25);
|
|
||||||
border: 2px solid rgba(86, 209, 255, 0.5);
|
|
||||||
font-size: 16px;
|
|
||||||
padding-left: 15px;
|
|
||||||
font-family: Microsoft YaHei;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #FFFFFF;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: #92B1D0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-input-sel {
|
.vrcode-input-sel {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
|
@ -2873,11 +2932,13 @@ color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.vrcode-radio{
|
|
||||||
|
.vrcode-radio {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
.no-sel {
|
.no-sel {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -2894,81 +2955,17 @@ color: #FFFFFF;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
>div{
|
|
||||||
|
>div {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
span{
|
|
||||||
|
span {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.vrcode-selimage {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
>.title {
|
|
||||||
margin-bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sel-image-view {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
#sel-img{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.sel-div {
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
margin-right: 30px;
|
|
||||||
background: rgba(86, 209, 255, 0.25);
|
|
||||||
border: 1px dashed #56D1FF;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
&.sel-img{
|
|
||||||
position: relative;
|
|
||||||
padding: 10px;
|
|
||||||
&:hover{
|
|
||||||
.del-img{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-image{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.del-img{
|
|
||||||
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
display: none;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
img{
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.sel-image-sel {
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
>img {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vrcode-title {
|
.vrcode-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -3027,6 +3024,111 @@ color: #FFFFFF;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vrcode-input {
|
||||||
|
width: 300px;
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
.input-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 300px;
|
||||||
|
height: 44px;
|
||||||
|
background: rgba(90, 210, 255, 0.25);
|
||||||
|
border: 2px solid rgba(86, 209, 255, 0.5);
|
||||||
|
font-size: 16px;
|
||||||
|
padding-left: 15px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #92B1D0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
>.title {
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sel-image-view {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
#sel-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sel-div {
|
||||||
|
width: 130px;
|
||||||
|
height: 130px;
|
||||||
|
margin-right: 30px;
|
||||||
|
background: rgba(86, 209, 255, 0.25);
|
||||||
|
border: 1px dashed #56D1FF;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&.sel-img {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.del-img {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.del-img {
|
||||||
|
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.sel-image-sel {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
>img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dialog-footer {
|
.dialog-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -3078,24 +3180,27 @@ color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productTraceability{
|
|
||||||
|
.productTraceability {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.productTraceability-title{
|
|
||||||
width:100%;
|
.productTraceability-title {
|
||||||
|
width: 100%;
|
||||||
max-width: 1182px;
|
max-width: 1182px;
|
||||||
height: 110px;
|
height: 110px;
|
||||||
background: url(../img/vrcode-title1.png) no-repeat ;
|
background: url(../img/vrcode-title1.png) no-repeat;
|
||||||
background-size: 1182px 110px;
|
background-size: 1182px 110px;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
>span{
|
|
||||||
|
>span {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
font-family: Alimama ShuHeiTi;
|
font-family: Alimama ShuHeiTi;
|
||||||
|
@ -3103,29 +3208,79 @@ color: #FFFFFF;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: #DDF1FF;
|
color: #DDF1FF;
|
||||||
|
|
||||||
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(125,171,255,1) 76.7333984375%, rgba(243,247,255,1) 88.0859375%, rgba(243,247,255,1) 92.626953125%, rgba(210,226,255,1) 100%);
|
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(125, 171, 255, 1) 76.7333984375%, rgba(243, 247, 255, 1) 88.0859375%, rgba(243, 247, 255, 1) 92.626953125%, rgba(210, 226, 255, 1) 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.productTraceability-content {
|
||||||
|
margin-top: 135px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
>div {
|
||||||
|
margin: 0 45px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-1 {
|
||||||
|
width: 200px;
|
||||||
|
height: 316px;
|
||||||
|
background: url(../img/productTraceability-1.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: url(../img/productTraceability-1hover.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-2 {
|
||||||
|
width: 240px;
|
||||||
|
height: 316px;
|
||||||
|
background: url(../img/productTraceability-2.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: url(../img/productTraceability-2hover.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-3 {
|
||||||
|
width: 200px;
|
||||||
|
height: 316px;
|
||||||
|
background: url(../img/productTraceability-3.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: url(../img/productTraceability-3hover.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.model-title{
|
.model-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
}
|
}
|
||||||
.model-sel{
|
|
||||||
|
.model-sel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height:200px ;
|
min-height: 200px;
|
||||||
max-height: 700px;
|
max-height: 700px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
>div{
|
|
||||||
|
>div {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
@ -3152,3 +3307,195 @@ color: #FFFFFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.setsuyuan {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.setsuyuan-page {
|
||||||
|
width: 375px;
|
||||||
|
height: 736px;
|
||||||
|
background: url(../img/setsuyuan-page.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 22px 23px 21px 24px;
|
||||||
|
|
||||||
|
.mobile-page {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 30px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
>div{
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
.mobile-img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 240px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
|
||||||
|
>div {
|
||||||
|
font-family: Microsoft Yahei;
|
||||||
|
font-size: 30px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-content {
|
||||||
|
width: 100%;
|
||||||
|
min-height:453px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 35px 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-view {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
.mobile-view-content {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.mobile-text{
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-content-title {
|
||||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAfCAYAAAA4LFWUAAACiElEQVR4Xu2bvU8UURTFz51Ag6wFauOfIWurnUtoiI2JEEuFkIBKokRpaDYIFmiIBpeSBI2VdkAHLR9/Bo26haPbwL5LZmZn3I+ZjUvyHnOTO+XOzrvnnfvLm5PdXEK3a3t+jLz+52C+DWCg63f1plQHaiA6YHO6ipHl71mboKwb3u6rZWbvpdTdq+7eHSAyK+be0nzak+mgbC+MEeFb76X0CekOcN3cx+hSR+9TQaGdhT0Ad6RvWvVfyIF9LpXvtj/ZCcrms1t0Y+AIlPlWulB1fUiIA8zgH7VhPHp33Ky4gwZva2adr12dFLItlWnBAfr1+5MZX5vKBuXr9CCd9p3geqFgob4uKcWBn77P/Wc38eDjn1hy64nyeeYxgSoYUk6k9NSKzqoPBj/Bw7WNVFBo6+kBiIsKihX75Sxa9QGmQx5/H/x+Fl7/TpQgxPaZo/BTPVHkNNWG0gAUAHzmJaE2ASUMsURRiFVQbNgvZ80GKMSchNoIlDjEeojCiYIip6k2lDZAgUESaiNQ4hAbF1VQbNgvZ80YlOD1Y+qTmPhQCUFJQqyCIqeZNpU2gRKHWkJziFVQbNovZ+1mUMJTBUVqCbEKipxm2lTaBkoQaglfZuc8boTYRnEeKiza1KFr59sBqvot/TcEP+vfY873VlSdTQe4VO7gQkGx6bjQtRUUoY1zLVtBce240HoKitDGuZatoLh2XGg9BUVo41zLVlBcOy60noIitHGuZfcCyl+dDHTdntzUq3GpfKVdjc715KY/uRHyn3M9gV6dFMxN11wL6WlSMBDn7bxeYdAL10K13uU5QKi/NaU3qfPm3ccBo5NlDkBRM8vlNdBy5RqAQ66b1bSZ47j2Odyz15vs+mViAAAAAElFTkSuQmCC)no-repeat center;
|
||||||
|
width: 138px;
|
||||||
|
height: 31px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
z-index: 2;
|
||||||
|
font-size: 15px;
|
||||||
|
position: absolute;
|
||||||
|
top: -16px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
width: calc(100% - 400px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-selimage {
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
.sel-image-view .sel-div {
|
||||||
|
width: 200px;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sel-image-view .sel-div.sel-img .del-img {
|
||||||
|
width: 178px;
|
||||||
|
height: 138px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan-tips {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FF9999;
|
||||||
|
margin: 0px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vrcode-input {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan-input {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
.setsuyuan-input-name {
|
||||||
|
width: 120px;
|
||||||
|
padding-right: 20px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 40px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-color-picker__trigger {
|
||||||
|
background: rgba(90, 210, 255, 0.25);
|
||||||
|
border: 2px solid rgba(86, 209, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
background: #19ABFF;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setsuyuan-input-select {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-shrink: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-height: 50px;
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
.no-sel {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
box-shadow: 0 0 15px rgba(53, 187, 247, 0.50) inset;
|
||||||
|
border: 1px solid rgba(0, 204, 255, 0.70);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sel {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background: url(../image/radio.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button span {
|
||||||
|
|
||||||
|
color: #606266;
|
||||||
|
}
|
Before Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 68 KiB |
After Width: | Height: | Size: 66 KiB |
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 83 KiB |
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 77 KiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 6.2 KiB |
|
@ -165,6 +165,11 @@ const routes = [
|
||||||
path: '/productTraceability',
|
path: '/productTraceability',
|
||||||
name: 'productTraceability',
|
name: 'productTraceability',
|
||||||
component: () => import('../views/vrcode/productTraceability.vue')
|
component: () => import('../views/vrcode/productTraceability.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/setsuyuan',
|
||||||
|
name: 'setsuyuan',
|
||||||
|
component: () => import('../views/vrcode/setsuyuan.vue')
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
|
@ -72,6 +72,7 @@ export default {
|
||||||
{ name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
|
{ name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
|
||||||
//systemManage systemManage
|
//systemManage systemManage
|
||||||
{ name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
|
{ name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
|
||||||
|
{ name: '生成二维码', router: 'setsuyuan', index: 1, routerList: ['setsuyuan'], img: require('../assets/image/header-img4.png') },
|
||||||
{ name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
|
{ name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
@ -19,15 +19,15 @@
|
||||||
<div class="index-content">
|
<div class="index-content">
|
||||||
<div class="left collapse scroll">
|
<div class="left collapse scroll">
|
||||||
<el-menu :default-active="routerNow" class="el-menu-vertical-demo" @open="clickmenu" @close="clickmenu">
|
<el-menu :default-active="routerNow" class="el-menu-vertical-demo" @open="clickmenu" @close="clickmenu">
|
||||||
<template v-for="item, index in leftList" >
|
<template v-for="item, index in leftList">
|
||||||
<el-submenu @click="toRouter1(item)" :index="item.router" v-if="item.list.length">
|
<el-submenu @click="toRouter1(item)" :index="item.router" v-if="item.list.length">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<div class="img"><img :src="item.img" alt=""></div>
|
<div class="img"><img :src="item.img" alt=""></div>
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
</template>
|
</template>
|
||||||
<el-menu-item-group>
|
<el-menu-item-group>
|
||||||
<el-menu-item :disabled="item1.router?false:true" @click="toRouter1(item1)" :index="item1.router"
|
<el-menu-item :disabled="item1.router ? false : true" @click="toRouter1(item1)"
|
||||||
v-for="item1, index1 in item.list">{{ item1.name }}</el-menu-item>
|
:index="item1.router" v-for="item1, index1 in item.list">{{ item1.name }}</el-menu-item>
|
||||||
</el-menu-item-group>
|
</el-menu-item-group>
|
||||||
</el-submenu>
|
</el-submenu>
|
||||||
<el-menu-item @click="toRouter1(item)" :index="item.router" v-else>
|
<el-menu-item @click="toRouter1(item)" :index="item.router" v-else>
|
||||||
|
@ -55,10 +55,44 @@ export default {
|
||||||
|
|
||||||
activeNames: [3],
|
activeNames: [3],
|
||||||
leftList: [
|
leftList: [
|
||||||
{ name: '种植计划', router: 'plantingPlan', img: require('../assets/image/vrcode-icon0.png'), list: [], isRouter: true, },
|
{
|
||||||
{ name: '生产环节',router:'productionProcess', routerList: ['agricultural', 'sprayInsecticide', 'spreadManure', 'pickingRecords'], img: require('../assets/image/vrcode-icon1.png'), list: [{ name: '农事管理', router: 'agricultural' }, { name: '施肥记录', router: 'spreadManure' }, { name: '打药记录', router: 'sprayInsecticide' }, { name: '采摘记录', router: 'pickingRecords' }, { name: '清洁记录',router:'' }, { name: '病虫害管理',router:'' },] },
|
name: '种植计划', router: 'plantingPlan',
|
||||||
{ name: '产品追溯',router:'productTraceability', routerList: [], img: require('../assets/image/vrcode-icon2.png'), list: [{ name: '溯源批次',router:'' }, { name: '配置溯源版面',router:'' }, { name: '各种报告库',router:'' }] },
|
img: require('../assets/image/vrcode-icon0.png'),
|
||||||
{ name: '基础信息设置',router:'setting', routerList: [], img: require('../assets/image/vrcode-icon3.png'), list: [{ name: '作物品种',router:'' }, { name: '种植栽培模式',router:'' }, { name: '农事作业工序',router:'' }, { name: '人员管理',router:'' }, { name: '农场信息管理',router:'' }, { name: '供应商管理',router:'' }, { name: '生产资料管理',router:'' }, { name: '农机工具管理',router:'' }, { name: '作物外观图片库',router:'' },] },],
|
list: [],
|
||||||
|
isRouter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '生产环节', router: 'productionProcess',
|
||||||
|
routerList: ['agricultural', 'sprayInsecticide', 'spreadManure', 'pickingRecords'],
|
||||||
|
img: require('../assets/image/vrcode-icon1.png'),
|
||||||
|
list: [{ name: '农事管理', router: '' },//agricultural
|
||||||
|
{ name: '施肥记录', router: '' },//spreadManure
|
||||||
|
{ name: '打药记录', router: '' },//sprayInsecticide
|
||||||
|
{ name: '采摘记录', router: '' },//pickingRecords
|
||||||
|
{ name: '清洁记录', router: '' },
|
||||||
|
{ name: '病虫害管理', router: '' },]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产品追溯', router: 'productTraceability',
|
||||||
|
routerList: ['setsuyuan'],
|
||||||
|
img: require('../assets/image/vrcode-icon2.png'),
|
||||||
|
list: [{ name: '溯源批次', router: '' },
|
||||||
|
{ name: '配置溯源版面', router: 'setsuyuan' },
|
||||||
|
{ name: '各种报告库', router: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '基础信息设置', router: 'setting', routerList: [],
|
||||||
|
img: require('../assets/image/vrcode-icon3.png'),
|
||||||
|
list: [{ name: '作物品种', router: '' },
|
||||||
|
{ name: '种植栽培模式', router: '' },
|
||||||
|
{ name: '农事作业工序', router: '' },
|
||||||
|
{ name: '人员管理', router: '' },
|
||||||
|
{ name: '农场信息管理', router: '' },
|
||||||
|
{ name: '供应商管理', router: '' },
|
||||||
|
{ name: '生产资料管理', router: '' },
|
||||||
|
{ name: '农机工具管理', router: '' },
|
||||||
|
{ name: '作物外观图片库', router: '' },]
|
||||||
|
},],
|
||||||
routerNow: 'plantingPlan',
|
routerNow: 'plantingPlan',
|
||||||
deviceName: 1,
|
deviceName: 1,
|
||||||
routerIndex: 1,
|
routerIndex: 1,
|
||||||
|
@ -106,8 +140,8 @@ export default {
|
||||||
this.IDTimer && clearInterval(this.IDTimer)
|
this.IDTimer && clearInterval(this.IDTimer)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clickmenu(key, keyPath){
|
clickmenu(key, keyPath) {
|
||||||
if(key=='productTraceability'&&key!=this.routerNow){
|
if (key == 'productTraceability' && key != this.routerNow) {
|
||||||
this.$router.push({ name: key })
|
this.$router.push({ name: key })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -3,6 +3,11 @@
|
||||||
<div class="productTraceability-title">
|
<div class="productTraceability-title">
|
||||||
<span>产品追溯</span>
|
<span>产品追溯</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="productTraceability-content">
|
||||||
|
<div class="content-1" @click="toRouter()"></div>
|
||||||
|
<div class="content-2" @click="toRouter('setsuyuan')"></div>
|
||||||
|
<div class="content-3" @click="toRouter()"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -12,6 +17,11 @@ export default {
|
||||||
},
|
},
|
||||||
mounted() { },
|
mounted() { },
|
||||||
methods: {
|
methods: {
|
||||||
|
toRouter(router){
|
||||||
|
if(router){
|
||||||
|
this.$router.push({ name: router })
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,265 @@
|
||||||
|
<template>
|
||||||
|
<div class="setsuyuan" v-loading="loading" element-loading-text="正在生成二维码" element-loading-background="rgba(0, 0, 0, 0.5)">
|
||||||
|
<div class="page-content scroll">
|
||||||
|
<div class="table-title">
|
||||||
|
<img src="../../assets/img/setsuyuan.png" alt="" />
|
||||||
|
追溯内容设置
|
||||||
|
</div>
|
||||||
|
<div class="flex-view"></div>
|
||||||
|
<div class="vrcode-selimage">
|
||||||
|
<div class="title">顶部图片</div>
|
||||||
|
<div class="sel-image-view">
|
||||||
|
<div class="sel-img sel-div" v-for="item, index in imgList" :key="index">
|
||||||
|
<el-image :src="item"></el-image>
|
||||||
|
<div class="del-img" @click="delImage(index)">
|
||||||
|
<img src="../../assets/img/del-image.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label for="sel-img">
|
||||||
|
<div class="sel-image-sel sel-div" v-if="imgList.length < 1">
|
||||||
|
<img src="../../assets/img/add-image.png" alt="">
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<input ref="fileInput" type="file" multiple id="sel-img" accept="image/*" @change="handleImageChange" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setsuyuan-tips">*上传图片大小应小于2M,建议尺寸为388x280</div>
|
||||||
|
<div class="vrcode-input">
|
||||||
|
<div class="input-title">第一行标题</div>
|
||||||
|
<input type="text" placeholder="请输入标题" v-model="title1">
|
||||||
|
</div>
|
||||||
|
<div class="vrcode-input">
|
||||||
|
<div class="input-title">第二行标题</div>
|
||||||
|
<input type="text" placeholder="请输入标题" v-model="title2">
|
||||||
|
</div>
|
||||||
|
<div class="setsuyuan-input">
|
||||||
|
<div class="setsuyuan-input-name">
|
||||||
|
文字颜色
|
||||||
|
</div>
|
||||||
|
<el-color-picker v-model="color" show-alpha></el-color-picker>
|
||||||
|
</div>
|
||||||
|
<div class="setsuyuan-input">
|
||||||
|
<div class="setsuyuan-input-name">
|
||||||
|
文字样式
|
||||||
|
</div>
|
||||||
|
<div class="setsuyuan-input-select">
|
||||||
|
<div @click="select1 = !select1" :class="select1 ? 'sel' : 'no-sel'"></div>
|
||||||
|
加粗
|
||||||
|
</div>
|
||||||
|
<div class="setsuyuan-input-select">
|
||||||
|
<div @click="select2 = !select2" :class="select2 ? 'sel' : 'no-sel'"></div>
|
||||||
|
斜体
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setsuyuan-input">
|
||||||
|
<div class="setsuyuan-input-name"></div>
|
||||||
|
<div class="setsuyuan-input-select">
|
||||||
|
<div @click="select3 = !select3" :class="select3 ? 'sel' : 'no-sel'"></div>
|
||||||
|
显示阴影
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setsuyuan-input">
|
||||||
|
<div class="setsuyuan-input-name">
|
||||||
|
阴影颜色
|
||||||
|
</div>
|
||||||
|
<el-color-picker v-model="color1" show-alpha></el-color-picker>
|
||||||
|
</div>
|
||||||
|
<div class="setsuyuan-input">
|
||||||
|
<div class="setsuyuan-input-name">
|
||||||
|
主体背景颜色
|
||||||
|
</div>
|
||||||
|
<el-color-picker v-model="color2" show-alpha></el-color-picker>
|
||||||
|
</div>
|
||||||
|
<div class="flex-view"></div>
|
||||||
|
<div class="save-btn" @click="captureScreenshot">保存</div>
|
||||||
|
</div>
|
||||||
|
<div class="setsuyuan-page">
|
||||||
|
<div class="mobile-page mobile-scroll">
|
||||||
|
<div ref="targetElement">
|
||||||
|
<div class="mobile-top" :style="`background: url(${imgList[0]}) no-repeat center;`">
|
||||||
|
<div class="title1"
|
||||||
|
:style="`color: ${color};${select3 ? 'text-shadow:' + color1 + '3px -2px 0px;' : ''}font-style: ${select2 ? 'italic' : 'normal'};font-weight: ${select1 ? 'bold' : 'normal'};`">
|
||||||
|
{{ title1 }}</div>
|
||||||
|
<div class="title2"
|
||||||
|
:style="`color: ${color};${select3 ? 'text-shadow:' + color1 + '3px -2px 0px;' : ''}font-style: ${select2 ? 'italic' : 'normal'};font-weight: ${select1 ? 'bold' : 'normal'};`">
|
||||||
|
{{ title2 }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-content" :style="`background-color: ${color2};`">
|
||||||
|
<div class="mobile-view">
|
||||||
|
<div class="mobile-content-title">农场信息</div>
|
||||||
|
<div class="mobile-view-content">
|
||||||
|
<template v-if="userDetail">
|
||||||
|
<div class="mobile-text">
|
||||||
|
联系人:{{ userDetail.linkman }}
|
||||||
|
</div>
|
||||||
|
<div class="mobile-text">
|
||||||
|
联系方式:{{ userDetail.contactInformation }}
|
||||||
|
</div>
|
||||||
|
<div class="mobile-text">
|
||||||
|
邮箱地址:{{ userDetail.email }}
|
||||||
|
</div>
|
||||||
|
<div class="mobile-text">
|
||||||
|
农场名称:{{ userDetail.organizationName }}
|
||||||
|
</div>
|
||||||
|
<div class="mobile-text">
|
||||||
|
农场地址:{{ userDetail.organizationAddress }}
|
||||||
|
</div>
|
||||||
|
<div class="mobile-text">
|
||||||
|
农场网址:{{ userDetail.organizationWebsite }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-view" v-for="item, index in plant">
|
||||||
|
<div class="mobile-content-title">种植计划</div>
|
||||||
|
<div class="mobile-view-content">
|
||||||
|
<template v-if="item">
|
||||||
|
<div class="mobile-text">
|
||||||
|
名称:{{ item.plantingPlanShort }}
|
||||||
|
</div>
|
||||||
|
<div class="mobile-text">
|
||||||
|
价格:{{ item.numberOfSeeds }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog class="vrcode-model" title="提示" :append-to-body="true" :visible.sync="qrModel" width="30%" :before-close="handleClose">
|
||||||
|
<div class="vrcode-image" style="text-align: center;">
|
||||||
|
<div class="vrcode-model-title" >
|
||||||
|
生成的二维码
|
||||||
|
</div>
|
||||||
|
<img :src="qrCodeUrl" alt="" style="width: 200px;height: 200px;margin-top: 20px;">
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="qrModel = false">关 闭</el-button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import html2canvas from 'html2canvas';
|
||||||
|
import QRCode from 'qrcode';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imgList: [require('../../assets/img/image.jpeg')],
|
||||||
|
title1: '智慧云温室',
|
||||||
|
title2: '追溯系统',
|
||||||
|
color: 'rgba(255,255,255,1)',
|
||||||
|
color1: 'rgba(19, 206, 102, 0.8)',
|
||||||
|
color2: 'rgba(19, 206, 102, 0.8)',
|
||||||
|
select1: false,
|
||||||
|
select2: true,
|
||||||
|
select3: false,
|
||||||
|
userDetail: null,//农场信息
|
||||||
|
plant: [],//计划
|
||||||
|
qrCodeUrl: '',//生成的二维码
|
||||||
|
qrModel: false,
|
||||||
|
loading: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.dataInit()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClose() {
|
||||||
|
this.qrCodeUrl = ''
|
||||||
|
},
|
||||||
|
dataInit() {
|
||||||
|
var userid = JSON.parse(localStorage.getItem('userInfo')).userid
|
||||||
|
var data = {
|
||||||
|
userId: userid
|
||||||
|
}
|
||||||
|
this.api.getAgriculturalInformation(data).then(res => {
|
||||||
|
})
|
||||||
|
|
||||||
|
this.api.getplant(data).then(res => {
|
||||||
|
if (res.data.code == 200) {
|
||||||
|
this.plant = res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.api.getcodeFarmInformationManagement(data).then(res => {
|
||||||
|
if (res.data.code == 200) {
|
||||||
|
this.userDetail = res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
async captureScreenshot() {
|
||||||
|
// 获取目标元素
|
||||||
|
this.loading = true
|
||||||
|
const targetElement = this.$refs.targetElement;
|
||||||
|
|
||||||
|
// 使用html2canvas生成截图
|
||||||
|
const canvas = await html2canvas(targetElement);
|
||||||
|
|
||||||
|
// 将canvas转为图片
|
||||||
|
const imageData = canvas.toDataURL('image/png')
|
||||||
|
var userid = JSON.parse(localStorage.getItem('userInfo')).userid
|
||||||
|
var data = {
|
||||||
|
userId: userid,
|
||||||
|
base64Data:imageData
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = false
|
||||||
|
}, 5000);
|
||||||
|
// 创建一个新的窗口显示图片(可以根据需要进行其他操作,比如保存图片)
|
||||||
|
this.api.uploadImage(data).then(res=>{
|
||||||
|
if(res.data){
|
||||||
|
this.generateQRCode(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// const imageWindow = window.open();
|
||||||
|
// imageWindow.document.write(`<img src="${imageData}" alt="Screenshot"/>`);
|
||||||
|
},
|
||||||
|
async generateQRCode(imageData) {
|
||||||
|
const that = this
|
||||||
|
// 生成二维码的数据,这里假设是一个 base64 图片的数据
|
||||||
|
|
||||||
|
// 使用 qrcode 库生成二维码
|
||||||
|
QRCode.toDataURL(imageData)
|
||||||
|
.then(url => {
|
||||||
|
this.qrCodeUrl = url;
|
||||||
|
this.qrModel = true
|
||||||
|
that.loading = false
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
delImage(index) {
|
||||||
|
console.log('删除图片', index);
|
||||||
|
this.imgList.splice(index, 1);
|
||||||
|
},
|
||||||
|
handleImageChange(event) {
|
||||||
|
const files = event.target.files;
|
||||||
|
if (files.length > 0) {
|
||||||
|
for (let i = 0; i < files.length; i++) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = (e) => {
|
||||||
|
this.imgList.push(e.target.result);
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsDataURL(files[i]);
|
||||||
|
}
|
||||||
|
this.$refs.fileInput.value = '';
|
||||||
|
} else {
|
||||||
|
console.log(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss"></style>
|