农场详细

shuishen

2022-07-12 b8e77aaf556123206ceb9c5c3f16eeedb6ab021c

农场详细

 public/img/icon/sym.png

 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;
}

 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;
                }
            }

        }

 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
        }
    }
}