From b8e77aaf556123206ceb9c5c3f16eeedb6ab021c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 12 Jul 2022 12:00:05 +0800
Subject: [PATCH] 农场详细
---
public/img/icon/sym.png | 0
src/views/farm/index.vue | 45 ++++++++++++--
src/styles/publicBox/trace-table.scss | 68 ++++++++++++++++++++--
src/styles/element-ui.scss | 9 +++
4 files changed, 108 insertions(+), 14 deletions(-)
diff --git a/public/img/icon/sym.png b/public/img/icon/sym.png
new file mode 100644
index 0000000..fb38abd
--- /dev/null
+++ b/public/img/icon/sym.png
Binary files differ
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 9ec4a61..a5febae 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -29,4 +29,13 @@
content: "替";
font-size: 24px;
visibility: hidden;
+}
+
+.dialog-fixed {
+ margin: 0 !important;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 99;
}
\ No newline at end of file
diff --git a/src/styles/publicBox/trace-table.scss b/src/styles/publicBox/trace-table.scss
index 3686034..e048357 100644
--- a/src/styles/publicBox/trace-table.scss
+++ b/src/styles/publicBox/trace-table.scss
@@ -4,10 +4,9 @@
left: 50%;
transform: translate(-50%, -50%);
width: 1208px;
-
background-color: transparent;
z-index: 99;
- font-size: 14px;
+ font-size: 16px;
box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.1600);
border: 1px solid #69E2ED;
background: rgba(20, 66, 104, 0.8);
@@ -54,12 +53,14 @@
}
.content {
+ display: flex;
+ flex-direction: column;
clear: both;
width: 100%;
- height: 500px;
+ height: 600px;
margin-top: 0px;
text-align: center;
- overflow-y: auto;
+ overflow: hidden;
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 0 0 8px 8px;
@@ -100,6 +101,9 @@
}
.table-list {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
.t-header {
display: flex;
@@ -110,16 +114,59 @@
font-weight: bold;
color: #fff;
background: linear-gradient(90deg, rgba(49, 137, 153, .5) 0%, rgba(49, 161, 168, .5) 44%, rgba(49, 137, 153, .5) 100%);
+
+ .sym-style {
+ text-align: left;
+ }
}
- .t-body {}
+ .t-body {
+ flex: 1;
+ overflow-y: auto;
+ }
.table-list {
display: flex;
+ flex-direction: row;
align-items: center;
justify-content: space-between;
height: 94px;
border-bottom: 1px solid #E8ECEF;
+ color: #fff;
+
+ .sym-style {
+ display: flex;
+ justify-content: space-between;
+
+ .l {
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 94px;
+ height: 56px;
+ }
+
+ }
+
+ .r {
+ margin-left: 20px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-around;
+
+ .title {
+ font-size: 18px;
+ font-weight: bold;
+ }
+
+ .unit {
+ font-size: 14px;
+ }
+ }
+ }
}
.table-list:last-child {
@@ -128,6 +175,7 @@
.t-header>div:first-child,
.table-list>div:first-child {
+ margin-left: 30px;
flex: 1;
}
@@ -143,12 +191,18 @@
.t-header>div:nth-child(4),
.table-list>div:nth-child(4) {
- width: 240px;
+ width: 260px;
}
.t-header>div:nth-child(5),
.table-list>div:nth-child(5) {
- width: 160px;
+ width: 200px;
+
+ .look {
+ color: #00F0FF;
+ background: rgba(0, 240, 255, 0.2);
+ border-color: #00F0FF;
+ }
}
}
diff --git a/src/views/farm/index.vue b/src/views/farm/index.vue
index 0e1bccd..94bf6c5 100644
--- a/src/views/farm/index.vue
+++ b/src/views/farm/index.vue
@@ -18,7 +18,7 @@
<div class="title">古田米庄</div>
<div class="btn-grounp">
<el-button type="primary" icon="el-icon-my-sb">物联网设备总览</el-button>
- <el-button type="primary" icon="el-icon-my-sy">农产品溯源</el-button>
+ <el-button type="primary" icon="el-icon-my-sy" @click="tracePopupFlag = true">农产品溯源</el-button>
</div>
</div>
@@ -135,12 +135,12 @@
</div>
</div>
- <public-box class="public-trace-table">
+ <public-box v-show="tracePopupFlag" class="public-trace-table">
<template slot="public-box-header">
<div class="logo"></div>
<div class="title">农产品溯源码</div>
<img
- @click="farmProfiles = false"
+ @click="tracePopupFlag = false"
src="/img/icon/public-close.png"
alt
class="close"
@@ -174,7 +174,7 @@
</div>
<div class="table-list">
<div class="t-header">
- <div>溯源码样式</div>
+ <div class="sym-style">溯源码样式</div>
<div>溯源码编号</div>
<div>已绑定溯源/总数</div>
<div>创建时间</div>
@@ -182,16 +182,40 @@
</div>
<div class="t-body">
<div class="table-list">
- <div></div>
+ <div class="sym-style">
+ <div class="l">
+ <img src="/img/icon/sym.png" alt />
+ </div>
+ <div class="r">
+ <div class="title">常规-样式1</div>
+ <div class="unit">5cm*3cm</div>
+ </div>
+ </div>
<div>193500000030</div>
<div>1/1</div>
<div>2022-06-10 15:50</div>
- <div></div>
+ <div>
+ <el-button
+ @click="openPopup('/img/icon/sym.png')"
+ size="small"
+ class="look"
+ type="info"
+ >查看</el-button>
+ </div>
</div>
</div>
</div>
</template>
</public-box>
+
+ <el-dialog
+ title="溯源码"
+ custom-class="dialog-fixed"
+ :visible.sync="dialogVisible"
+ :before-close="handleClose"
+ >
+ <img style="width: 500px;" :src="currentUrl" alt />
+ </el-dialog>
</div>
</template>
@@ -201,7 +225,10 @@
data () {
return {
ncjscz: 'cz',
- zydksb: 'sb'
+ zydksb: 'sb',
+ dialogVisible: false,
+ currentUrl: '',
+ tracePopupFlag: false
}
},
created () {
@@ -212,6 +239,10 @@
methods: {
prev () {
this.$router.go(-1)
+ },
+ openPopup (url) {
+ this.currentUrl = url
+ this.dialogVisible = true
}
}
}
--
Gitblit v1.9.3