Merge remote-tracking branch 'origin/master'

zengh

2022-07-08 3720e2ca52962794aec5a7cc965ccdce98fe0496

Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/views/manage/index.vue

 public/img/icon/1016.png

 public/img/icon/360.png

 public/img/icon/3666.png

 public/img/icon/public-close.png

 src/components/publicBox/index.vue

New file
@@ -0,0 +1,29 @@
<template>
    <div ref="publicBox">
        <div class="header">
            <slot name="public-box-header"></slot>
        </div>
        <div class="content">
            <slot name="public-box-content"></slot>
        </div>
    </div>
</template>

<script>

export default {
    name: 'PublicBox',
    data () {
        return {
        }
    },
    created () {
    },
    methods: {

    }
}
</script>

<style scoped lang='scss'>
</style>

 src/router/page/index.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-06-27 10:25:01
 * @Last Modified time: 2022-07-08 10:54:29
 */

import Vue from 'vue'
@@ -58,6 +58,13 @@
            }]
    },
    {
        path: '/farmDetails',
        meta: {
            title: '农场详情'
        },
        component: () => import('../../views/farm/index.vue')
    },
    {
        path: '/403',
        component: () =>
            import(/* webpackChunkName: "page" */ '@/components/error-page/403'),

 src/styles/element-ui.scss

@@ -4,4 +4,29 @@
        border-color: #849EAE;
        color: rgba(255, 255, 255, 0.6);
    }
}


.el-icon-my-sy {
    background: url('/img/icon/1016.png') center no-repeat;
    // background-size: 100% 100%;
    /* background-size: cover;*/
}

.el-icon-my-sy:before {
    content: "替";
    font-size: 18px;
    visibility: hidden;
}

.el-icon-my-sb {
    background: url('/img/icon/3666.png') center no-repeat;
    // background-size: 100% 100%;
    /* background-size: cover;*/
}

.el-icon-my-sb:before {
    content: "替";
    font-size: 24px;
    visibility: hidden;
}

 src/styles/index.scss

@@ -1,4 +1,5 @@
@import "./element-ui.scss";
@import "./publicBox/arc-nav-bar.scss";

html,
body {

 src/styles/publicBox/arc-nav-bar.scss

New file
@@ -0,0 +1,141 @@
.public-org-nav-bar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1208px;

    background-color: transparent;
    z-index: 99;
    font-size: 14px;
    box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.1600);
    border: 1px solid #69E2ED;
    background: rgba(20, 66, 104, 0.8);

    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 58px;
        line-height: 58px;
        background: linear-gradient(96deg, #142B4B 0%, #0F1525 100%);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        .logo {
            position: aboslute;
            top: 0;
            left: 0;
            width: 8px;
            height: 100%;
            background: #69E2ED;
        }

        .title {
            position: absolute;
            top: 0;
            left: 25px;
            font-size: 18px;
            font-weight: bold;
            color: #66DDE9;
        }

        .close {
            position: absolute;
            right: 20px;
            top: 0;
            left: auto;
            bottom: 0;
            margin: auto;
            width: 28px;
            height: 28px;
            cursor: pointer;
            opacity: 0.6;
        }
    }

    .content {
        clear: both;
        width: 100%;
        height: 500px;
        margin-top: 0px;
        text-align: center;
        overflow-y: auto;
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 0 0 8px 8px;

        .farm-profiles {
            position: relative;

            .btn-grounp {
                position: absolute;
                top: 18px;
                right: 20px;

                .details {
                    text-align: right;
                    font-size: 18px;
                    color: #08F4FF;
                    cursor: pointer;
                }

                .scene {
                    margin-top: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100px;
                    height: 30px;
                    background: rgba(102, 221, 233, 0.16);
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #66DDE9;
                    box-sizing: border-box;

                    img {
                        // width: 70px;
                        height: 24px;
                    }
                }
            }

            .farm-content {

                padding: 30px 20px;
                font-size: 16px;
                color: #fff;

                .row {
                    display: flex;
                    justify-content: space-between;

                    .l {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-end;
                        width: 100px;
                        height: 50px;
                        color: #A9D1D7;
                    }

                    .r {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;
                        margin-left: 24px;
                        flex: 1;

                        img {
                            margin-right: 16px;
                            width: 102px;
                            height: 102px;
                            border-radius: 4px 4px 4px 4px;
                        }
                    }
                }

            }

        }


    }
}

 src/views/farm/index.vue

New file
@@ -0,0 +1,207 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-08 14:08:30
* 驾驶舱
*/
<template>
    <div class="container">
        <mapBox ref="modalForm" />

        <div class="header">
            <div class="return">
                <span @click="prev">
                    <i class="el-icon-back"></i> 返回
                </span>
            </div>
            <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>
            </div>
        </div>

        <div class="l-content">
            <div class="tab-btn">
                <div>
                    <div class="item" :class="{on: ncjscz == 'ncjs'}">
                        <div @click="ncjscz = 'ncjs'" class="title">农场介绍</div>
                        <span></span>
                    </div>
                </div>

                <div>
                    <div class="item" :class="{on: ncjscz == 'cz'}">
                        <div @click="ncjscz = 'cz'" class="title">农事操作</div>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="content"></div>
        </div>

        <div class="r-content">
            <div class="tab-btn">
                <div>种养品种</div>
                <div>地块</div>
                <div>物联网设备</div>
            </div>
            <div class="content"></div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            ncjscz: 'cz'
        }
    },
    created () {

    },
    mounted () {
    },
    methods: {
        prev () {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'DS-Digital';
    src: url('/DS-Digital/DS-DIGI-1.ttf');
    src: url('/DS-Digital/DS-DIGIB-2.ttf');
    src: url('/DS-Digital/DS-DIGII-3.ttf');
    src: url('/DS-Digital/DS-DIGIT-4.ttf');
}

.container {
    position: relative;
    width: 100%;
    height: 100%;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        line-height: 80px;
        background: rgba(0, 0, 0, 0.5);

        .return {
            margin-left: 40px;
            font-size: 16px;
            font-weight: bold;
            color: #66dde9;

            & > span {
                cursor: pointer;

                i {
                    margin-right: 4px;
                }
            }
        }

        .title {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 200px;
            font-size: 28px;
            font-weight: bold;
            color: #08f4ff;
        }

        .btn-grounp {
            margin-right: 64px;
            display: flex;
            justify-content: space-between;

            button {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 150px;
                height: 34px;
                background: #21a3a1;
                border-color: #21a3a1;
            }
        }
    }

    .l-content,
    .r-content {
        position: absolute;
        top: 248px;
        width: 440px;
        height: 640px;
        background: #06344e;
        border-radius: 30px 30px 30px 30px;

        .tab-btn {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 60px;
            border-bottom: 1px solid #7ccfd6;
            box-sizing: border-box;

            & > div {
                height: 100%;
                font-size: 18px;
                color: #a9d1d7;

                & > div {
                    display: flex;
                    align-items: center;
                    position: relative;
                    height: 100%;
                }

                .title {
                    cursor: pointer;
                }

                .on {
                    position: relative;
                    font-weight: bold;
                    color: #7ccfd6;

                    span {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 4px;
                        border-radius: 4px;
                        background: #08f4ff;
                    }
                }
            }
        }
    }

    .l-content {
        left: 68px;
    }

    .r-content {
        right: 68px;
    }
}
</style>

 src/views/home/index.vue

@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-07 17:26:40
 * @Last Modified time: 2022-07-08 10:58:39
* 驾驶舱
*/
<template>
@@ -190,7 +190,7 @@
        </div>

        <div class="down-menu">
            <div class="nc">
            <div class="nc" @click="farmProfiles = true">
                <span>农场</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
@@ -248,6 +248,60 @@
                <img @click="cityShow = false" style="cursor: pointer;" src="/img/sclt.png" alt />
            </div>
        </div>

        <public-box v-if="farmProfiles" class="public-org-nav-bar">
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">123</div>
                <img
                    @click="farmProfiles = false"
                    src="/img/icon/public-close.png"
                    alt
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="farm-profiles">
                    <div class="btn-grounp">
                        <div class="details" @click="goPath('/farmDetails')">
                            进入农场
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="scene">
                            <img src="/img/icon/360.png" alt />
                        </div>
                    </div>

                    <div class="farm-content">
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">
                                <img src="/img/icon/yx.jpg" alt />
                                <img src="/img/icon/yx.jpg" alt />
                                <img src="/img/icon/yx.jpg" alt />
                                <img src="/img/icon/yx.jpg" alt />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </public-box>
    </div>
</template>

@@ -273,7 +327,8 @@
            // 销售总额
            salaNum: [],
            // 每月销售统计
            salaNumY: []
            salaNumY: [],
            farmProfiles: false
        }
    },
    created () {
@@ -688,6 +743,10 @@

        cityFlowShow () {
            this.cityShow = true
        },

        goPath (path) {
            this.$router.push(path)
        }

    }