|
@@ -0,0 +1,429 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="Butcher">
|
|
|
|
+ <header>
|
|
|
|
+ <h1 class="title">湖羊全产业链数字化管理系统</h1>
|
|
|
|
+ </header>
|
|
|
|
+ <section>
|
|
|
|
+ <aside class="left">
|
|
|
|
+ <article class="left_1">
|
|
|
|
+ <h3>市场行情</h3>
|
|
|
|
+ <table class="table">
|
|
|
|
+ <tr>
|
|
|
|
+ <th>产品</th>
|
|
|
|
+ <th>价格</th>
|
|
|
|
+ <th>市场</th>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr v-for="item in 8" :key="item">
|
|
|
|
+ <td>羊肉</td>
|
|
|
|
+ <td>
|
|
|
|
+ 55元/公斤
|
|
|
|
+ <b v-if="item % 2 == 0" style="color: #00ca01"
|
|
|
|
+ >▲</b
|
|
|
|
+ >
|
|
|
|
+ <b v-else style="color: red">▼</b>
|
|
|
|
+ </td>
|
|
|
|
+ <td>杭州市</td>
|
|
|
|
+ </tr>
|
|
|
|
+ </table>
|
|
|
|
+ </article>
|
|
|
|
+ <article class="left_2">
|
|
|
|
+ <h3>市场行情</h3>
|
|
|
|
+ <E-Left1 style="height: 100%"></E-Left1>
|
|
|
|
+ </article>
|
|
|
|
+ <article class="left_3">
|
|
|
|
+ <h3>长兴县销售情况</h3>
|
|
|
|
+ <E-Left2 style="height: 100%"></E-Left2>
|
|
|
|
+ </article>
|
|
|
|
+ </aside>
|
|
|
|
+ <div class="center">
|
|
|
|
+ <div class="top">
|
|
|
|
+ <article class="upper">
|
|
|
|
+ <div class="date">2020-10-12</div>
|
|
|
|
+ <div class="title">首 页</div>
|
|
|
|
+ <img class="icon" src="../../assets/chilun.png">
|
|
|
|
+ </article>
|
|
|
|
+ <article class="mid">
|
|
|
|
+ <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">94.2</span>
|
|
|
|
+ <span class="unit">%</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </article>
|
|
|
|
+ <article class="lower">
|
|
|
|
+ <div class="item_1">6465</div>
|
|
|
|
+ <div class="item_2"></div>
|
|
|
|
+ <div class="item_3"></div>
|
|
|
|
+ <div class="item_4"></div>
|
|
|
|
+ <div class="item_5"></div>
|
|
|
|
+ <div class="item_6"></div>
|
|
|
|
+ <div class="item_7"></div>
|
|
|
|
+ <div class="item_8"></div>
|
|
|
|
+ <span class="time_1">8月26</span>
|
|
|
|
+ <span class="time_2">8月16</span>
|
|
|
|
+ <span class="time_3">8月16</span>
|
|
|
|
+ <span class="time_4">8月16</span>
|
|
|
|
+ <span class="time_5">8月16</span>
|
|
|
|
+ <span class="time_6">8月16</span>
|
|
|
|
+ <span class="time_7">8月16</span>
|
|
|
|
+ <span class="time_8">8月16</span>
|
|
|
|
+ </article>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="bottom">
|
|
|
|
+ <article>
|
|
|
|
+ <E-Bottom1 style="height: 100%"></E-Bottom1>
|
|
|
|
+ </article>
|
|
|
|
+ <article>
|
|
|
|
+ <E-Bottom2 style="height: 100%"></E-Bottom2>
|
|
|
|
+ </article>
|
|
|
|
+ <article>
|
|
|
|
+ <E-Bottom3 style="height: 100%"></E-Bottom3>
|
|
|
|
+ </article>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <aside class="right">
|
|
|
|
+ <article class="right_1">
|
|
|
|
+ <h3>产品运输任务</h3>
|
|
|
|
+ <E-Right1 style="height: 100%"></E-Right1>
|
|
|
|
+ </article>
|
|
|
|
+ <article class="right_2">
|
|
|
|
+ <h3>屠宰采购来源</h3>
|
|
|
|
+ <!-- cellspacing="0px" -->
|
|
|
|
+ <table class="table">
|
|
|
|
+ <tr>
|
|
|
|
+ <th>羊只</th>
|
|
|
|
+ <th>来源地</th>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr v-for="item in 8" :key="item" class="row">
|
|
|
|
+ <td>12457</td>
|
|
|
|
+ <td>湖州市长兴县吕山乡</td>
|
|
|
|
+ </tr>
|
|
|
|
+ </table>
|
|
|
|
+ </article>
|
|
|
|
+ <article class="right_3">
|
|
|
|
+ <h3>屠宰销售去向</h3>
|
|
|
|
+ <table class="table">
|
|
|
|
+ <tr>
|
|
|
|
+ <th>羊只</th>
|
|
|
|
+ <th>去向</th>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr v-for="item in 8" :key="item" class="row">
|
|
|
|
+ <td>12457</td>
|
|
|
|
+ <td>湖州市长兴县吕山乡</td>
|
|
|
|
+ </tr>
|
|
|
|
+ </table>
|
|
|
|
+ </article>
|
|
|
|
+ </aside>
|
|
|
|
+ </section>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import ELeft1 from "./charts/ELeft1";
|
|
|
|
+import ELeft2 from "./charts/ELeft2";
|
|
|
|
+import ERight1 from "./charts/ERight1";
|
|
|
|
+import EBottom1 from "./charts/EBottom1";
|
|
|
|
+import EBottom2 from "./charts/EBottom2";
|
|
|
|
+import EBottom3 from "./charts/EBottom3";
|
|
|
|
+export default {
|
|
|
|
+ name: "Butcher",
|
|
|
|
+ components: {
|
|
|
|
+ ELeft1,
|
|
|
|
+ ELeft2,
|
|
|
|
+ ERight1,
|
|
|
|
+ EBottom1,
|
|
|
|
+ EBottom2,
|
|
|
|
+ EBottom3,
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {};
|
|
|
|
+ },
|
|
|
|
+ created() {},
|
|
|
|
+ methods: {},
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scope>
|
|
|
|
+.Butcher {
|
|
|
|
+ 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 {
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ height: 61%;
|
|
|
|
+ display: flex;
|
|
|
|
+ > aside {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ > article {
|
|
|
|
+ height: 31%;
|
|
|
|
+ background-image: url(../../assets/download.png);
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ > h3 {
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 25px;
|
|
|
|
+ margin-left: 12%;
|
|
|
|
+ margin-top: 13px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ &:before {
|
|
|
|
+ content: "";
|
|
|
|
+ display: inline-block;
|
|
|
|
+ height: 25px;
|
|
|
|
+ width: 25px;
|
|
|
|
+ margin-right: 50px;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ > .left {
|
|
|
|
+ width: 20%;
|
|
|
|
+ // border: 1px solid rgb(218, 99, 99);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ > .left_1 {
|
|
|
|
+ > .table {
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ margin: 20px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ > .center {
|
|
|
|
+ width: 60%;
|
|
|
|
+ // border: 1px solid rgb(163, 147, 58);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ > .top {
|
|
|
|
+ height: 72%;
|
|
|
|
+ // border: 1px solid rgb(62, 58, 128);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .upper {
|
|
|
|
+ font-size: 40px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ margin: 20px 3%;
|
|
|
|
+ // .date {}
|
|
|
|
+ .title {
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ text-align: center;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ &::before {
|
|
|
|
+ content: "";
|
|
|
|
+ border: 1px solid #4b81ec;
|
|
|
|
+ height: 0px;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ margin: 0 50px;
|
|
|
|
+ }
|
|
|
|
+ &::after {
|
|
|
|
+ content: "";
|
|
|
|
+ border: 1px solid #4b81ec;
|
|
|
|
+ height: 0px;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ margin: 0 50px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .icon {
|
|
|
|
+ width: 50px;
|
|
|
|
+ height: 50px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .mid {
|
|
|
|
+ > .warp {
|
|
|
|
+ display: flex;
|
|
|
|
+ margin: 20px 5%;
|
|
|
|
+ .item {
|
|
|
|
+ border-radius: 20px;
|
|
|
|
+ height: 90px;
|
|
|
|
+ border: 4px solid #53bafd;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ flex: 1 0 20%;
|
|
|
|
+ margin: 20px 80px;
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .lower {
|
|
|
|
+ // border: 1px solid rgb(163, 147, 58);
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ background: url(../../assets/bg_main.png) no-repeat;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ margin: 0 3% 1.5% 3%;
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ position: relative;
|
|
|
|
+ > div {
|
|
|
|
+ border: 1px solid rgb(243, 14, 14);
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 15.1%;
|
|
|
|
+ height: 17.4%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ position: absolute;
|
|
|
|
+ }
|
|
|
|
+ > .item_1{
|
|
|
|
+ left: 59.1%;
|
|
|
|
+ top: 18.7%;
|
|
|
|
+ }
|
|
|
|
+ > .item_2{
|
|
|
|
+ left: 81.4%;
|
|
|
|
+ top: 18%;
|
|
|
|
+ }
|
|
|
|
+ > .item_3{
|
|
|
|
+ left: 0.8%;
|
|
|
|
+ top: 42.3%;
|
|
|
|
+ }
|
|
|
|
+ > .item_4{
|
|
|
|
+ left: 27.3%;
|
|
|
|
+ top: 42.3%;
|
|
|
|
+ }
|
|
|
|
+ > .item_5{
|
|
|
|
+ left: 64.3%;
|
|
|
|
+ top: 42.3%;
|
|
|
|
+ }
|
|
|
|
+ > .item_6{
|
|
|
|
+ left: 13.2%;
|
|
|
|
+ top: 80.8%;
|
|
|
|
+ }
|
|
|
|
+ > .item_7{
|
|
|
|
+ left: 40.5%;
|
|
|
|
+ top: 80.8%;
|
|
|
|
+ }
|
|
|
|
+ > .item_8{
|
|
|
|
+ left: 79.9%;
|
|
|
|
+ top: 80.8%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ > span {
|
|
|
|
+ font-size: 35px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ }
|
|
|
|
+ > .time_1 {
|
|
|
|
+ left: 64.8%;
|
|
|
|
+ top: 0%;
|
|
|
|
+ }
|
|
|
|
+ > .time_2 {
|
|
|
|
+ left: 87%;
|
|
|
|
+ top: 0%;
|
|
|
|
+ }
|
|
|
|
+ > .time_3 {
|
|
|
|
+ left: 19%;
|
|
|
|
+ top: 61%;
|
|
|
|
+ }
|
|
|
|
+ > .time_4 {
|
|
|
|
+ left: 46%;
|
|
|
|
+ top: 61%;
|
|
|
|
+ }
|
|
|
|
+ > .time_5 {
|
|
|
|
+ left: 85.4%;
|
|
|
|
+ top: 61%;
|
|
|
|
+ }
|
|
|
|
+ > .time_6 {
|
|
|
|
+ left: 6.4%;
|
|
|
|
+ top: 74%;
|
|
|
|
+ }
|
|
|
|
+ > .time_7 {
|
|
|
|
+ left: 33%;
|
|
|
|
+ top: 74%;
|
|
|
|
+ }
|
|
|
|
+ > .time_8 {
|
|
|
|
+ left: 70%;
|
|
|
|
+ top: 74%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ > .bottom {
|
|
|
|
+ height: 28%;
|
|
|
|
+ // border: 1px solid rgb(23, 131, 116);
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ > article {
|
|
|
|
+ width: 33%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ > .right {
|
|
|
|
+ width: 20%;
|
|
|
|
+ // border: 1px solid rgb(61, 197, 179);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ > .right_2,
|
|
|
|
+ > .right_3 {
|
|
|
|
+ > .table {
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ margin: 20px;
|
|
|
|
+ width: 96%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ .row {
|
|
|
|
+ background-color: #006666ee;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|