|
|
@@ -0,0 +1,574 @@
|
|
|
+<template>
|
|
|
+ <div class="LvShanXiang" @click="qita">
|
|
|
+ <hy-header :navTag="0"></hy-header>
|
|
|
+ <div class="warp">
|
|
|
+ <div class="left">
|
|
|
+ <div class="left1">
|
|
|
+ <E-Left1 style="height: 100%"></E-Left1>
|
|
|
+ </div>
|
|
|
+ <div class="left2">
|
|
|
+ <E-Left2 style="height: 100%"></E-Left2>
|
|
|
+ </div>
|
|
|
+ <div class="left3">
|
|
|
+ <E-Left3 style="height: 100%"></E-Left3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middle">
|
|
|
+ <section class="section">
|
|
|
+ <div class="warp">
|
|
|
+ <div class="item">
|
|
|
+ <div>
|
|
|
+ <span class="title">当月存栏量：</span>
|
|
|
+ <span class="num">10534</span>
|
|
|
+ <span class="unit">只</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div>
|
|
|
+ <span class="title">当月出栏量：</span>
|
|
|
+ <span class="num">1534</span>
|
|
|
+ <span class="unit">只</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div>
|
|
|
+ <span class="title">月种羊出栏：</span>
|
|
|
+ <span class="num">2380</span>
|
|
|
+ <span class="unit">只</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="warp">
|
|
|
+ <div class="item">
|
|
|
+ <div>
|
|
|
+ <span class="title">当前肉羊价：</span>
|
|
|
+ <span class="num">33</span>
|
|
|
+ <span class="unit">元/kg</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div>
|
|
|
+ <span class="title">当前种羊价：</span>
|
|
|
+ <span class="num">53</span>
|
|
|
+ <span class="unit">元/kg</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div>
|
|
|
+ <span class="title">当前羊粪价：</span>
|
|
|
+ <span class="num">0.8</span>
|
|
|
+ <span class="unit">元/kg</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <footer class="footer" v-if="isShowMain">
|
|
|
+ <main class="inputWrap">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="input"
|
|
|
+ v-model="searchStr"
|
|
|
+ placeholder="族谱溯源"
|
|
|
+ />
|
|
|
+ <i class="icon_search" @click.stop="search"></i>
|
|
|
+ </main>
|
|
|
+ <img class="bg_map" src="../../assets/u922.png" />
|
|
|
+ <!-- <div class="point p1" @click.stop="clickPoint('dr')">
|
|
|
+ <i class="warp">
|
|
|
+ <i class="middle">
|
|
|
+ <i class="center"></i>
|
|
|
+ </i>
|
|
|
+
|
|
|
+ </i>
|
|
|
+ </div>
|
|
|
+ <div class="point p2" @click.stop="clickPoint('ys')">
|
|
|
+ <i class="warp">
|
|
|
+ <i class="middle">
|
|
|
+ <i class="center"></i>
|
|
|
+ </i>
|
|
|
+ </i>
|
|
|
+ </div> -->
|
|
|
+ <div class="icon_pasture_1" @click.stop="clickPoint('dr')">
|
|
|
+ <img src="../../assets/icon_pasture.png">
|
|
|
+ <h3>长兴德睿生态农业开发有限公司</h3>
|
|
|
+ </div>
|
|
|
+ <div class="icon_pasture_2" @click.stop="clickPoint('ys')">
|
|
|
+ <img src="../../assets/icon_pasture.png">
|
|
|
+ <h3>长兴永盛牧业有限公司</h3>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="point p3">
|
|
|
+ <i class="warp">
|
|
|
+ <i class="middle">
|
|
|
+ <i class="center"></i>
|
|
|
+ </i>
|
|
|
+ </i>
|
|
|
+ </div> -->
|
|
|
+ </footer>
|
|
|
+ <footer
|
|
|
+ class="footer_2"
|
|
|
+ v-show="!isShowMain"
|
|
|
+
|
|
|
+ >
|
|
|
+ <!-- @click.stop="isShowMain = false" -->
|
|
|
+ <h1>族谱溯源</h1>
|
|
|
+ <article class="tree">
|
|
|
+ <div class="self">021543</div>
|
|
|
+ <div class="f">父：025464</div>
|
|
|
+ <div class="m">母：01348</div>
|
|
|
+ <div class="ff">父父：045645</div>
|
|
|
+ <div class="fm">父母：046595</div>
|
|
|
+ <div class="mf">母父：084561</div>
|
|
|
+ <div class="mm">母母：046585</div>
|
|
|
+ </article>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="right1">
|
|
|
+ <E-Right1 style="height: 100%"></E-Right1>
|
|
|
+ </div>
|
|
|
+ <div class="right2">
|
|
|
+ <E-Right2 style="height: 100%"></E-Right2>
|
|
|
+ </div>
|
|
|
+ <div class="right3">
|
|
|
+ <E-Right3 style="height: 100%"></E-Right3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <article class="dialog" v-if="showDialog">
|
|
|
+ <h3>{{ dialogData.name }}</h3>
|
|
|
+ <div class="container">
|
|
|
+ <p v-for="item in dialogData.content" :key="item.name">{{ item }}</p>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import HyHeader from "@/components/HyHeader";
|
|
|
+import ELeft1 from "./charts/ELeft1";
|
|
|
+import ELeft2 from "./charts/ELeft2";
|
|
|
+import ELeft3 from "./charts/ELeft3";
|
|
|
+import ERight1 from "./charts/ERight1";
|
|
|
+import ERight2 from "./charts/ERight2";
|
|
|
+import ERight3 from "./charts/ERight3";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "LvShanXiang",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchStr: "",
|
|
|
+ isShowMain: true,
|
|
|
+ showDialog: false,
|
|
|
+ fieldInfo: {
|
|
|
+ dr: {
|
|
|
+ name: "长兴德睿生态农业开发有限公司",
|
|
|
+ content: [
|
|
|
+ "占地面积：200余亩",
|
|
|
+ "羊舍数量：18幢",
|
|
|
+ "建筑面积：13000㎡",
|
|
|
+ "常年存栏：8500多只",
|
|
|
+ "每年繁殖羔羊：10000多只",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ys: {
|
|
|
+ name: "长兴永盛牧业有限公司",
|
|
|
+ content: [
|
|
|
+ "占地面积：200余亩",
|
|
|
+ "羊舍数量：24幢",
|
|
|
+ "建筑面积：9500㎡",
|
|
|
+ "常年存栏：8000只",
|
|
|
+ "预计年供应：30000只",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dialogData: {name:'' , content: []}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ HyHeader,
|
|
|
+ ELeft1,
|
|
|
+ ELeft2,
|
|
|
+ ELeft3,
|
|
|
+ ERight1,
|
|
|
+ ERight2,
|
|
|
+ ERight3,
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ document.title = "吕山牧场";
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search() {
|
|
|
+ console.log(this.searchStr);
|
|
|
+ console.log("search");
|
|
|
+ this.isShowMain = false;
|
|
|
+ },
|
|
|
+ clickPoint(v) {
|
|
|
+ this.showDialog = !this.showDialog;
|
|
|
+ this.dialogData = this.fieldInfo[v]
|
|
|
+ },
|
|
|
+ qita() {
|
|
|
+ this.isShowMain = true;
|
|
|
+ this.showDialog = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scope>
|
|
|
+.LvShanXiang {
|
|
|
+ background-image: url(../../assets/bg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // border: 1px solid #f52424;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > .warp {
|
|
|
+ // border: 1px solid #ffee00;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ .left {
|
|
|
+ // border: 1px solid #2b65e0;
|
|
|
+ width: 20%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > .left1 {
|
|
|
+ // border: 1px solid #8bdd77;
|
|
|
+ height: 33.33%;
|
|
|
+ }
|
|
|
+ > .left2 {
|
|
|
+ // border: 1px solid #ddad77;
|
|
|
+ height: 33.33%;
|
|
|
+ }
|
|
|
+ > .left3 {
|
|
|
+ // border: 1px solid #8bdd77;
|
|
|
+ height: 33.33%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .middle {
|
|
|
+ width: 60%;
|
|
|
+ min-width: 1600px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ > .section {
|
|
|
+ width: 92%;
|
|
|
+ .warp {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .item {
|
|
|
+ border-radius: 20px;
|
|
|
+ height: 90px;
|
|
|
+ min-width: 450px;
|
|
|
+ border: 4px solid #53bafd;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex: 1 0 20%;
|
|
|
+ margin: 20px 3%;
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ font-size: 35px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ color: #53bafd;
|
|
|
+ font-size: 1.2em;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ color: #53bafd;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .footer {
|
|
|
+ // border: 1px solid #8877dd;
|
|
|
+ width: 92%;
|
|
|
+ flex-grow: 1;
|
|
|
+ margin: 80px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ transition: all 1s ease;
|
|
|
+ > .inputWrap {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 500px;
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 60px;
|
|
|
+ color: #fff;
|
|
|
+ border: 2px solid #797979;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #0e93b2;
|
|
|
+ > .input {
|
|
|
+ width: 200px;
|
|
|
+ flex-grow: 1;
|
|
|
+ font-size: 60px;
|
|
|
+ color: #fff;
|
|
|
+ padding-left: 20px;
|
|
|
+ background: none;
|
|
|
+ // outline: none;
|
|
|
+ border: none;
|
|
|
+ &:focus {
|
|
|
+ // border: 4px solid #797979;
|
|
|
+ background: none;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .icon_search {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url(../../assets/search.png) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .bg_map {
|
|
|
+ height: 80%;
|
|
|
+ width: 70%;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .point {
|
|
|
+ position: absolute;
|
|
|
+ > .warp {
|
|
|
+ flex-basis: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 6px solid #2793d1;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ animation: animation_warp 2s 0.2s infinite alternate;
|
|
|
+ > .middle {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 6px solid #2793d1;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: animation_middle 2s 0.2s infinite
|
|
|
+ alternate;
|
|
|
+ .center {
|
|
|
+ position: absolute;
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #2793d1;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: animation_center 2s 0.2s infinite;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes animation_warp {
|
|
|
+ 0% {
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ transform: translate(45px, 45px);
|
|
|
+ border: 6px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes animation_middle {
|
|
|
+ 0% {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border: 6px solid transparent;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes animation_center {
|
|
|
+ 0% {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-color: #2793d1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // > .p1 {
|
|
|
+ // left: 50%;
|
|
|
+ // top: 25%;
|
|
|
+ // }
|
|
|
+ // > .p2 {
|
|
|
+ // left: 60%;
|
|
|
+ // top: 45%;
|
|
|
+ // }
|
|
|
+ // > .p3 {
|
|
|
+ // left: 35%;
|
|
|
+ // top: 60%;
|
|
|
+ // }
|
|
|
+ > .p1 {
|
|
|
+ left: 33%;
|
|
|
+ top: 57%;
|
|
|
+ }
|
|
|
+ > .p2 {
|
|
|
+ left: 55%;
|
|
|
+ top: 45%;
|
|
|
+ // z-index: 1;
|
|
|
+ }
|
|
|
+ > .icon_pasture_1 {
|
|
|
+ position: absolute;
|
|
|
+ // left: 29%;
|
|
|
+ // top: 64%;
|
|
|
+ left: 27%;
|
|
|
+ top: 57%;
|
|
|
+ text-align: center;
|
|
|
+ > img {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ > h3{
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .icon_pasture_2 {
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ // left: 54.6%;
|
|
|
+ // top: 51.7%;
|
|
|
+ left: 55%;
|
|
|
+ top: 48%;
|
|
|
+ > img {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ > h3{
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .footer_2 {
|
|
|
+ // border: 1px solid #8bdd77;
|
|
|
+ width: 88%;
|
|
|
+ margin-top: 30px;
|
|
|
+ flex-grow: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // transition: all 3s ease;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > h1 {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 60px;
|
|
|
+ }
|
|
|
+ > .tree {
|
|
|
+ // border: 1px solid #9277dd;
|
|
|
+ flex-grow: 1;
|
|
|
+ width: 95%;
|
|
|
+ margin: 3% auto;
|
|
|
+ background: url(../../assets/tree.png) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ font-size: 60px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ > div {
|
|
|
+ // border: 1px solid #dd7796;
|
|
|
+ position: absolute;
|
|
|
+ width: 22%;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ > .self {
|
|
|
+ left: 5%;
|
|
|
+ top: 50%;
|
|
|
+ }
|
|
|
+ > .f {
|
|
|
+ left: 34.5%;
|
|
|
+ top: 36.4%;
|
|
|
+ }
|
|
|
+ > .m {
|
|
|
+ left: 34.5%;
|
|
|
+ top: 60.9%;
|
|
|
+ }
|
|
|
+ > .ff {
|
|
|
+ left: 71.4%;
|
|
|
+ top: 9%;
|
|
|
+ }
|
|
|
+ > .fm {
|
|
|
+ left: 71.4%;
|
|
|
+ top: 36.4%;
|
|
|
+ }
|
|
|
+ > .mf {
|
|
|
+ left: 71.4%;
|
|
|
+ top: 60.9%;
|
|
|
+ }
|
|
|
+ > .mm {
|
|
|
+ left: 71.4%;
|
|
|
+ top: 85.6%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ // border: 1px solid #2b65e0;
|
|
|
+ width: 20%;
|
|
|
+ > .right1 {
|
|
|
+ // border: 1px solid #8bdd77;
|
|
|
+ height: 33.33%;
|
|
|
+ }
|
|
|
+ > .right2 {
|
|
|
+ // border: 1px solid #ddad77;
|
|
|
+ height: 33.33%;
|
|
|
+ }
|
|
|
+ > .right3 {
|
|
|
+ // border: 1px solid #8bdd77;
|
|
|
+ height: 33.33%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog {
|
|
|
+ // border: 1px solid #8bdd77;
|
|
|
+ min-width: 500px;
|
|
|
+ min-height: 300px;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ top: 30%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ background-color: #203c7a;
|
|
|
+ background-image: linear-gradient(30deg, #0c1c46, #27428b);
|
|
|
+ // background-image: radial-gradient(#203c7a 60%, #277AEB);
|
|
|
+ box-shadow: 0px 0px 50px #454991;
|
|
|
+ border-radius: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // padding: 30px;
|
|
|
+ color: #fff;
|
|
|
+ > h3 {
|
|
|
+ font-size: 50px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #207bc4;
|
|
|
+ padding: 15px 30px 15px 30px;
|
|
|
+ }
|
|
|
+ > .container {
|
|
|
+ font-size: 40px;
|
|
|
+ margin: 20px 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
linan-0110