|
@@ -1,260 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="Yield">
|
|
|
- <header>
|
|
|
- <!-- <h1 class="title">湖羊全产业链数字化管理系统</h1> -->
|
|
|
- <hy-header :navTag="3"></hy-header>
|
|
|
- </header>
|
|
|
- <section>
|
|
|
- <div class="left">
|
|
|
- <div class="top">
|
|
|
- <div class="warp">
|
|
|
- <div class="item">
|
|
|
- <div>
|
|
|
- <span class="title">存栏量:</span>
|
|
|
- <span class="num">11.09</span>
|
|
|
- <span class="unit">万只</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div>
|
|
|
- <span class="title">出栏量:</span>
|
|
|
- <span class="num">6.83</span>
|
|
|
- <span class="unit">万只</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="warp">
|
|
|
- <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">33</span>
|
|
|
- <span class="unit">元/kg</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="warp">
|
|
|
- <div class="item">
|
|
|
- <div>
|
|
|
- <span class="title">产肉量:</span>
|
|
|
- <span class="num">1145.65</span>
|
|
|
- <span class="unit">吨</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div>
|
|
|
- <span class="title">产值:</span>
|
|
|
- <span class="num">1.13</span>
|
|
|
- <span class="unit">亿元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottom">
|
|
|
- <E-Left1 style="height: 100%; width: 50%"></E-Left1>
|
|
|
- <E-Left2 style="height: 100%; width: 50%"></E-Left2>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="center">
|
|
|
- <E-MiddleMap style="height: 100%;"></E-MiddleMap>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="warp">
|
|
|
- <div class="cell cell1">
|
|
|
- <img src="../../assets/u871.jpg" width="80%" height="80%" />
|
|
|
- </div>
|
|
|
- <div class="cell cell2">
|
|
|
- <img src="../../assets/u871.jpg" width="80%" height="80%" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="warp">
|
|
|
- <div class="cell">
|
|
|
- <E-Right1 style="height: 100%"></E-Right1>
|
|
|
- </div>
|
|
|
- <div class="cell">
|
|
|
- <E-Right2 style="height: 100%"></E-Right2>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <footer>
|
|
|
- <div class="cell_one">
|
|
|
- <E-Bottom1 style="height: 100%"></E-Bottom1>
|
|
|
- </div>
|
|
|
- <div class="cell_two">
|
|
|
- <E-Bottom2 style="height: 100%"></E-Bottom2>
|
|
|
- </div>
|
|
|
- <div class="cell_three">
|
|
|
- <E-Bottom3 style="height: 100%"></E-Bottom3>
|
|
|
- </div>
|
|
|
- <div class="cell_four">
|
|
|
- <E-Bottom4 style="height: 100%"></E-Bottom4>
|
|
|
- </div>
|
|
|
- </footer>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import HyHeader from "@/components/HyHeader";
|
|
|
-import ELeft1 from "./charts/ELeft1";
|
|
|
-import ELeft2 from "./charts/ELeft2";
|
|
|
-import ERight1 from "./charts/ERight1";
|
|
|
-import ERight2 from "./charts/ERight2";
|
|
|
-import EBottom1 from "./charts/EBottom1";
|
|
|
-import EBottom2 from "./charts/EBottom2";
|
|
|
-import EBottom3 from "./charts/EBottom3";
|
|
|
-import EBottom4 from "./charts/EBottom4";
|
|
|
-import EMiddleMap from "./charts/EMiddleMap";
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "Yield",
|
|
|
- components: {
|
|
|
- HyHeader,
|
|
|
- ELeft1,
|
|
|
- ELeft2,
|
|
|
- ERight1,
|
|
|
- ERight2,
|
|
|
- EBottom1,
|
|
|
- EBottom2,
|
|
|
- EMiddleMap,
|
|
|
- EBottom3,
|
|
|
- EBottom4
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- created() {
|
|
|
- document.title = '湖羊养殖'
|
|
|
- },
|
|
|
- methods: {},
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scope>
|
|
|
-.Yield {
|
|
|
- background-image: url(../../assets/bg.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- // > header {
|
|
|
- // height: 180px;
|
|
|
- // display: flex;
|
|
|
- // justify-content: center;
|
|
|
- // .title {
|
|
|
- // // border: 1px solid rgb(218, 99, 99);
|
|
|
- // background: url(../../assets/bg_header.png) no-repeat;
|
|
|
- // background-size: 100% 100%;
|
|
|
- // width: 80%;
|
|
|
- // height: 100%;
|
|
|
- // font-size: 50px;
|
|
|
- // line-height: 110px;
|
|
|
- // color: #fff;
|
|
|
- // display: flex;
|
|
|
- // justify-content: center;
|
|
|
- // }
|
|
|
- // }
|
|
|
- > section {
|
|
|
- // border: 1px solid rgb(62, 58, 128);
|
|
|
- height: 61%;
|
|
|
- display: flex;
|
|
|
- > .left {
|
|
|
- width: 32%;
|
|
|
- // border: 1px solid rgb(218, 99, 99);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .top {
|
|
|
- margin: 40px 0 60px 0;
|
|
|
- .warp {
|
|
|
- display: flex;
|
|
|
- .item {
|
|
|
- border-radius: 20px;
|
|
|
- height: 90px;
|
|
|
- border: 4px solid #53bafd;
|
|
|
- box-sizing: border-box;
|
|
|
- flex: 1 0 20%;
|
|
|
- margin: 20px 60px;
|
|
|
- padding: 10px 10px 10px 80px;
|
|
|
- font-size: 35px;
|
|
|
- font-weight: 600;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .title {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .num {
|
|
|
- color: #53bafd;
|
|
|
- font-size: 1.2em;
|
|
|
- }
|
|
|
- .unit {
|
|
|
- color: #53bafd;
|
|
|
- font-size: 20px;
|
|
|
- margin-left: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- flex-grow: 1;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- }
|
|
|
- > .center {
|
|
|
- width: 36%;
|
|
|
- // border: 1px solid rgb(163, 147, 58);
|
|
|
- }
|
|
|
- > .right {
|
|
|
- width: 32%;
|
|
|
- // border: 1px solid rgb(23, 131, 116);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- > .warp {
|
|
|
- height: 48%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- > .cell {
|
|
|
- width: 48.5%;
|
|
|
- background-image: url(../../assets/download.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
- > .cell1,
|
|
|
- .cell2 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- > footer {
|
|
|
- flex-grow: 1;
|
|
|
- display: flex;
|
|
|
- // > div {}
|
|
|
- .cell_one {
|
|
|
- // border: 1px solid rgb(126, 95, 38);
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- .cell_two {
|
|
|
- // border: 1px solid rgb(61, 90, 38);
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- .cell_three {
|
|
|
- // border: 1px solid rgb(176, 86, 204);
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- .cell_four {
|
|
|
- // border: 1px solid rgb(218, 99, 99);
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|