|
@@ -6,78 +6,80 @@
|
|
</header>
|
|
</header>
|
|
<section>
|
|
<section>
|
|
<div class="left">
|
|
<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 class="left_chart">
|
|
|
|
+ <E-Left1 style="height: 50%; width: 95%"></E-Left1>
|
|
|
|
+ <E-Left2 style="height: 50%; width: 95%"></E-Left2>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="left_title">
|
|
|
|
+ <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 class="item">
|
|
|
|
+ <div>
|
|
|
|
+ <span class="title">出栏量:</span>
|
|
|
|
+ <span class="num">6.83</span>
|
|
|
|
+ <span class="unit">万只</span>
|
|
</div>
|
|
</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 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 class="item">
|
|
|
|
+ <div>
|
|
|
|
+ <span class="title">肉羊价:</span>
|
|
|
|
+ <span class="num">33</span>
|
|
|
|
+ <span class="unit">元/kg</span>
|
|
</div>
|
|
</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 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 class="item">
|
|
|
|
+ <div>
|
|
|
|
+ <span class="title">产值:</span>
|
|
|
|
+ <span class="num">1.13</span>
|
|
|
|
+ <span class="unit">亿元</span>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<div class="center">
|
|
<div class="center">
|
|
- <E-MiddleMap style="height: 100%;"></E-MiddleMap>
|
|
|
|
|
|
+ <E-MiddleMap style="height: 100%"></E-MiddleMap>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right">
|
|
<div class="warp">
|
|
<div class="warp">
|
|
<div class="cell cell1">
|
|
<div class="cell cell1">
|
|
- <img src="../../assets/u871.jpg" width="80%" height="80%" />
|
|
|
|
|
|
+ <img
|
|
|
|
+ src="../../assets/u871.jpg"
|
|
|
|
+ width="80%"
|
|
|
|
+ height="80%"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
- <div class="cell cell2">
|
|
|
|
- <img src="../../assets/u871.jpg" width="80%" height="80%" />
|
|
|
|
|
|
+ <div class="cell e_cell">
|
|
|
|
+ <E-Right1 style="height: 100%"></E-Right1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="warp">
|
|
<div class="warp">
|
|
- <div class="cell">
|
|
|
|
- <E-Right1 style="height: 100%"></E-Right1>
|
|
|
|
|
|
+ <div class="cell cell2">
|
|
|
|
+ <img
|
|
|
|
+ src="../../assets/u871.jpg"
|
|
|
|
+ width="80%"
|
|
|
|
+ height="80%"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
- <div class="cell">
|
|
|
|
|
|
+ <div class="cell e_cell">
|
|
<E-Right2 style="height: 100%"></E-Right2>
|
|
<E-Right2 style="height: 100%"></E-Right2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -124,13 +126,13 @@ export default {
|
|
EBottom2,
|
|
EBottom2,
|
|
EMiddleMap,
|
|
EMiddleMap,
|
|
EBottom3,
|
|
EBottom3,
|
|
- EBottom4
|
|
|
|
|
|
+ EBottom4,
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {};
|
|
return {};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- document.title = '湖羊养殖'
|
|
|
|
|
|
+ document.title = "湖羊养殖";
|
|
},
|
|
},
|
|
methods: {},
|
|
methods: {},
|
|
};
|
|
};
|
|
@@ -166,52 +168,54 @@ export default {
|
|
height: 61%;
|
|
height: 61%;
|
|
display: flex;
|
|
display: flex;
|
|
> .left {
|
|
> .left {
|
|
- width: 32%;
|
|
|
|
- // border: 1px solid rgb(218, 99, 99);
|
|
|
|
|
|
+ width: 35%;
|
|
display: flex;
|
|
display: flex;
|
|
- flex-direction: column;
|
|
|
|
- .top {
|
|
|
|
|
|
+ .left_chart {
|
|
|
|
+ width: 57%;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ }
|
|
|
|
+ .left_title {
|
|
margin: 40px 0 60px 0;
|
|
margin: 40px 0 60px 0;
|
|
- .warp {
|
|
|
|
|
|
+ width: 43%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ .item {
|
|
|
|
+ border-radius: 20px;
|
|
|
|
+ height: 90px;
|
|
|
|
+ min-width: 450px;
|
|
|
|
+ border: 4px solid #53bafd;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ margin: 20px 60px;
|
|
|
|
+ padding: 10px 10px 10px 80px;
|
|
|
|
+ font-size: 35px;
|
|
|
|
+ font-weight: 600;
|
|
display: flex;
|
|
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;
|
|
|
|
- }
|
|
|
|
|
|
+ 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 {
|
|
> .center {
|
|
- width: 36%;
|
|
|
|
|
|
+ width: 30%;
|
|
// border: 1px solid rgb(163, 147, 58);
|
|
// border: 1px solid rgb(163, 147, 58);
|
|
}
|
|
}
|
|
> .right {
|
|
> .right {
|
|
- width: 32%;
|
|
|
|
|
|
+ width: 35%;
|
|
// border: 1px solid rgb(23, 131, 116);
|
|
// border: 1px solid rgb(23, 131, 116);
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -221,11 +225,14 @@ export default {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
> .cell {
|
|
> .cell {
|
|
- width: 48.5%;
|
|
|
|
|
|
+ width: 40.5%;
|
|
background-image: url(../../assets/download.png);
|
|
background-image: url(../../assets/download.png);
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
+ > .e_cell {
|
|
|
|
+ width: 57%;
|
|
|
|
+ }
|
|
> .cell1,
|
|
> .cell1,
|
|
.cell2 {
|
|
.cell2 {
|
|
display: flex;
|
|
display: flex;
|
|
@@ -238,22 +245,23 @@ export default {
|
|
> footer {
|
|
> footer {
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
// > div {}
|
|
// > div {}
|
|
.cell_one {
|
|
.cell_one {
|
|
// border: 1px solid rgb(126, 95, 38);
|
|
// border: 1px solid rgb(126, 95, 38);
|
|
- width: 25%;
|
|
|
|
|
|
+ width: 20%;
|
|
}
|
|
}
|
|
.cell_two {
|
|
.cell_two {
|
|
// border: 1px solid rgb(61, 90, 38);
|
|
// border: 1px solid rgb(61, 90, 38);
|
|
- width: 25%;
|
|
|
|
|
|
+ width: 27%;
|
|
}
|
|
}
|
|
.cell_three {
|
|
.cell_three {
|
|
// border: 1px solid rgb(176, 86, 204);
|
|
// border: 1px solid rgb(176, 86, 204);
|
|
- width: 25%;
|
|
|
|
|
|
+ width: 27%;
|
|
}
|
|
}
|
|
.cell_four {
|
|
.cell_four {
|
|
// border: 1px solid rgb(218, 99, 99);
|
|
// border: 1px solid rgb(218, 99, 99);
|
|
- width: 25%;
|
|
|
|
|
|
+ width: 20%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|