|
|
@@ -39,7 +39,13 @@
|
|
|
<div class="center">
|
|
|
<div class="top">
|
|
|
<article class="upper">
|
|
|
- <div class="date">{{ `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}` }}</div>
|
|
|
+ <div class="date">
|
|
|
+ {{
|
|
|
+ `${new Date().getFullYear()}-${
|
|
|
+ new Date().getMonth() + 1
|
|
|
+ }-${new Date().getDate()}`
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
<div class="title">首 页</div>
|
|
|
<img class="icon" src="../../assets/chilun.png" />
|
|
|
</article>
|
|
|
@@ -68,56 +74,56 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</article>
|
|
|
- <article class="lower">
|
|
|
+ <article class="lower" v-if="true">
|
|
|
<main class="inputWrap">
|
|
|
- <input type="text" class="input" v-model="searchStr">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="input"
|
|
|
+ v-model.number="searchStr"
|
|
|
+ />
|
|
|
<i class="icon_search" @click="search"></i>
|
|
|
</main>
|
|
|
- <div class="item_1">
|
|
|
- <h3>入库</h3>
|
|
|
- <div class="row">入库时间：10:15:11 </div>
|
|
|
- </div>
|
|
|
- <div class="item_2">
|
|
|
- <h3>运输</h3>
|
|
|
- <div class="row">运输单号：586874578</div>
|
|
|
- <div class="row">目的地：浙江金华超市</div>
|
|
|
- </div>
|
|
|
- <div class="item_3">
|
|
|
- <h3>收购</h3>
|
|
|
- <div class="row">来源：吕山牧场</div>
|
|
|
- <div class="row">收购重量：浙江金华超市</div>
|
|
|
- <div class="row">收购时间：8月28日</div>
|
|
|
- </div>
|
|
|
- <div class="item_4">
|
|
|
- <h3>屠宰</h3>
|
|
|
- <div class="row">屠宰时间：9月2日</div>
|
|
|
- </div>
|
|
|
- <div class="item_5">
|
|
|
- <h3>分割</h3>
|
|
|
- <div class="row">分割批次：12451</div>
|
|
|
- </div>
|
|
|
- <div class="item_6">
|
|
|
- <h3>检疫</h3>
|
|
|
- <div class="row">检疫结果：合格</div>
|
|
|
- <div class="row">检疫时间：8月30日</div>
|
|
|
- </div>
|
|
|
- <div class="item_7">
|
|
|
- <h3>排酸</h3>
|
|
|
- <div class="row">排酸时间：9月3日</div>
|
|
|
- </div>
|
|
|
- <div class="item_8">
|
|
|
- <h3>运输</h3>
|
|
|
- <div class="row">运输单号：586874578</div>
|
|
|
- <div class="row">目的地：浙江金华超市</div>
|
|
|
+ <div class="container">
|
|
|
+ <div v-for="(item, index) in retrospectInfo" :key="index" :class="'item_'+(index+1)">
|
|
|
+ <h3>{{ item.title }}</h3>
|
|
|
+ <div class="row" v-for="(item1, index1) in item.list" :key="index1">{{ item1 }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="item_1">
|
|
|
+ <h3>入库</h3>
|
|
|
+ <div class="row">入库时间：10:15:11</div>
|
|
|
+ </div>
|
|
|
+ <div class="item_2">
|
|
|
+ <h3>运输</h3>
|
|
|
+ <div class="row">运输单号：586874578</div>
|
|
|
+ <div class="row">目的地：浙江金华超市</div>
|
|
|
+ </div>
|
|
|
+ <div class="item_3">
|
|
|
+ <h3>收购</h3>
|
|
|
+ <div class="row">来源：吕山牧场</div>
|
|
|
+ <div class="row">收购重量：浙江金华超市</div>
|
|
|
+ <div class="row">收购时间：8月28日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item_4">
|
|
|
+ <h3>屠宰</h3>
|
|
|
+ <div class="row">屠宰时间：9月2日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item_5">
|
|
|
+ <h3>分割</h3>
|
|
|
+ <div class="row">分割批次：12451</div>
|
|
|
+ </div>
|
|
|
+ <div class="item_6">
|
|
|
+ <h3>检疫</h3>
|
|
|
+ <div class="row">检疫结果：合格</div>
|
|
|
+ <div class="row">检疫时间：8月30日</div>
|
|
|
+ </div> -->
|
|
|
+ <span v-for="(item, index) in retrospectInfo" :key="item.title" :class="'time_'+(index+1)">{{ item.time }}</span>
|
|
|
+ <!-- <span class="time_1">9月3日</span>
|
|
|
+ <span class="time_2">9月3日</span>
|
|
|
+ <span class="time_3">8月30日</span>
|
|
|
+ <span class="time_4">9月3日</span>
|
|
|
+ <span class="time_5">9月4日</span>
|
|
|
+ <span class="time_6">8月28日</span> -->
|
|
|
</div>
|
|
|
- <span class="time_1">9月3</span>
|
|
|
- <span class="time_2">9月3</span>
|
|
|
- <span class="time_3">8月30</span>
|
|
|
- <span class="time_4">9月3</span>
|
|
|
- <span class="time_5">9月4</span>
|
|
|
- <span class="time_6">8月28</span>
|
|
|
- <span class="time_7">9月2</span>
|
|
|
- <span class="time_8">9月3</span>
|
|
|
</article>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
@@ -191,67 +197,150 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- searchStr: '',
|
|
|
+ searchStr: "00008",
|
|
|
sheepPriceList: [
|
|
|
{
|
|
|
description: "肉羊",
|
|
|
- price: '32.5',
|
|
|
- site: '长兴',
|
|
|
- isRise: true
|
|
|
+ price: "32.5",
|
|
|
+ site: "长兴",
|
|
|
+ isRise: true,
|
|
|
},
|
|
|
{
|
|
|
description: "肉羊",
|
|
|
- price: '32.5',
|
|
|
- site: '杭州',
|
|
|
- isRise: true
|
|
|
+ price: "32.5",
|
|
|
+ site: "杭州",
|
|
|
+ isRise: true,
|
|
|
},
|
|
|
{
|
|
|
description: "肉羊",
|
|
|
- price: '33',
|
|
|
- site: '金华',
|
|
|
- isRise: true
|
|
|
+ price: "33",
|
|
|
+ site: "金华",
|
|
|
+ isRise: true,
|
|
|
},
|
|
|
{
|
|
|
description: "肉羊",
|
|
|
- price: '32.5',
|
|
|
- site: '苏州',
|
|
|
- isRise: false
|
|
|
+ price: "32.5",
|
|
|
+ site: "苏州",
|
|
|
+ isRise: false,
|
|
|
},
|
|
|
{
|
|
|
description: "肉羊",
|
|
|
- price: '31',
|
|
|
- site: '安徽',
|
|
|
- isRise: false
|
|
|
+ price: "31",
|
|
|
+ site: "安徽",
|
|
|
+ isRise: false,
|
|
|
},
|
|
|
{
|
|
|
description: "肉羊",
|
|
|
- price: '31',
|
|
|
- site: '湖南',
|
|
|
- isRise: true
|
|
|
+ price: "31",
|
|
|
+ site: "湖南",
|
|
|
+ isRise: true,
|
|
|
},
|
|
|
{
|
|
|
description: "肉羊",
|
|
|
- price: '32',
|
|
|
- site: '江西',
|
|
|
- isRise: true
|
|
|
+ price: "32",
|
|
|
+ site: "江西",
|
|
|
+ isRise: true,
|
|
|
},
|
|
|
{
|
|
|
description: "肉羊",
|
|
|
- price: '29',
|
|
|
- site: '内蒙古',
|
|
|
- isRise: true
|
|
|
+ price: "29",
|
|
|
+ site: "内蒙古",
|
|
|
+ isRise: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ retrospectInfo: [],
|
|
|
+ retrospectInfo1: [
|
|
|
+ {
|
|
|
+ title: "收购",
|
|
|
+ list: [
|
|
|
+ "来源：永盛牧场",
|
|
|
+ "收购重量：50kg",
|
|
|
+ "收购时间：11月30日",
|
|
|
+ ],
|
|
|
+ time: "11月30日",
|
|
|
},
|
|
|
- ]
|
|
|
+ {
|
|
|
+ title: "检疫",
|
|
|
+ list: ["检疫结果：合格", "检疫时间：11月30日"],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "屠宰",
|
|
|
+ list: ["屠宰时间：11月30日"],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "排酸",
|
|
|
+ list: ["排酸时间：11月30日"],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "分割",
|
|
|
+ list: ["分割时间：11月30日"],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "运输",
|
|
|
+ list: [
|
|
|
+ "运输单号：50kg",
|
|
|
+ "目的地：杭州",
|
|
|
+ ],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ retrospectInfo2: [
|
|
|
+ {
|
|
|
+ title: "收购",
|
|
|
+ list: [
|
|
|
+ "来源：永盛牧场",
|
|
|
+ "收购重量：50kg",
|
|
|
+ "收购时间：11月30日",
|
|
|
+ ],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "检疫",
|
|
|
+ list: ["检疫结果：合格", "检疫时间：11月30日"],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "屠宰",
|
|
|
+ list: ["屠宰时间：11月30日"],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "排酸",
|
|
|
+ list: ["排酸时间：11月30日"],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "入库",
|
|
|
+ list: ["入库时间：11月30日"],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "运输",
|
|
|
+ list: [
|
|
|
+ "运输单号：50kg",
|
|
|
+ "目的地：杭州",
|
|
|
+ ],
|
|
|
+ time: "11月30日",
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- document.title = '湖羊产业'
|
|
|
+ document.title = "湖羊产业";
|
|
|
},
|
|
|
methods: {
|
|
|
search() {
|
|
|
- console.log(this.searchStr)
|
|
|
- console.log("search")
|
|
|
- }
|
|
|
+ console.log(this.searchStr);
|
|
|
+ if(this.searchStr%2 == 0) {
|
|
|
+ this.retrospectInfo = this.retrospectInfo1
|
|
|
+ } else {
|
|
|
+ this.retrospectInfo = this.retrospectInfo2
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -300,7 +389,9 @@ export default {
|
|
|
// border: 1px solid rgb(218, 99, 99);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- > .left_1, .left_2, .left_3 {
|
|
|
+ > .left_1,
|
|
|
+ .left_2,
|
|
|
+ .left_3 {
|
|
|
min-width: 600px;
|
|
|
}
|
|
|
> .left_1 {
|
|
|
@@ -396,8 +487,8 @@ export default {
|
|
|
.lower {
|
|
|
min-height: 800px;
|
|
|
flex-grow: 1;
|
|
|
- background: url(../../assets/bg_main.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
margin: 0 3% 1.5% 3%;
|
|
|
color: #fff;
|
|
|
font-size: 30px;
|
|
|
@@ -430,7 +521,7 @@ export default {
|
|
|
outline: none;
|
|
|
}
|
|
|
}
|
|
|
- > .icon_search{
|
|
|
+ > .icon_search {
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
width: 60px;
|
|
|
@@ -439,93 +530,86 @@ export default {
|
|
|
background-size: contain;
|
|
|
}
|
|
|
}
|
|
|
- > div {
|
|
|
- // border: 1px solid rgb(243, 14, 14);
|
|
|
- display: inline-block;
|
|
|
- width: 15.1%;
|
|
|
- height: 17.4%;
|
|
|
- box-sizing: border-box;
|
|
|
- position: absolute;
|
|
|
- color: #333333;
|
|
|
- > h3 {
|
|
|
- text-align: center;
|
|
|
+ > .container {
|
|
|
+ position: relative;
|
|
|
+ // border: 1px solid #797979;
|
|
|
+ margin: 80px 0;
|
|
|
+ flex-grow: 1;
|
|
|
+ background: url(../../assets/bg_main.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ // border: 1px solid rgb(243, 14, 14);
|
|
|
+ display: inline-block;
|
|
|
+ width: 15.1%;
|
|
|
+ height: 27.3%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ color: #333333;
|
|
|
+ > h3 {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ > .row {
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
}
|
|
|
- > .row {
|
|
|
- font-weight: normal;
|
|
|
- font-size: 25px;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow:ellipsis;
|
|
|
+ > .item_1 {
|
|
|
+ left: 0.7%;
|
|
|
+ top: 4.7%;
|
|
|
+ }
|
|
|
+ > .item_2 {
|
|
|
+ left: 13.2%;
|
|
|
+ top: 69%;
|
|
|
+ }
|
|
|
+ > .item_3 {
|
|
|
+ left: 27.3%;
|
|
|
+ top: 5.5%;
|
|
|
+ }
|
|
|
+ > .item_4 {
|
|
|
+ left: 40.4%;
|
|
|
+ top: 69.3%;
|
|
|
+ }
|
|
|
+ > .item_5 {
|
|
|
+ left: 64.3%;
|
|
|
+ top: 5.4%;
|
|
|
+ }
|
|
|
+ > .item_6 {
|
|
|
+ left: 79.8%;
|
|
|
+ top: 68.9%;
|
|
|
}
|
|
|
- }
|
|
|
- > .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%;
|
|
|
+ > span {
|
|
|
+ font-size: 35px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ > .time_1 {
|
|
|
+ left: 5.2%;
|
|
|
+ top: 57%;
|
|
|
+ }
|
|
|
+ > .time_2 {
|
|
|
+ left: 18.3%;
|
|
|
+ top: 37%;
|
|
|
+ }
|
|
|
+ > .time_3 {
|
|
|
+ left: 32%;
|
|
|
+ top: 57%;
|
|
|
+ }
|
|
|
+ > .time_4 {
|
|
|
+ left: 45.6%;
|
|
|
+ top: 37%;
|
|
|
+ }
|
|
|
+ > .time_5 {
|
|
|
+ left: 69.1%;
|
|
|
+ top: 57%;
|
|
|
+ }
|
|
|
+ > .time_6 {
|
|
|
+ left: 84.7%;
|
|
|
+ top: 37%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
李楠
