You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
746 lines
17 KiB
746 lines
17 KiB
<template>
|
|
<div>
|
|
<div class="card h292">
|
|
<screen-title-zd>
|
|
<div slot="left" class="screen-title-left">国家战略</div>
|
|
<div slot="right" class="screen-title-right" @click="set_ldhg(true)">
|
|
<span>更多</span>
|
|
</div>
|
|
</screen-title-zd>
|
|
<div class="card-item-ldgh">
|
|
<div class="title">用中国种子保障中国粮食安全</div>
|
|
<div class="content">
|
|
<div class="content-image">
|
|
<img src="@/assets/images/index/bannerX.png" alt="" />
|
|
</div>
|
|
<div class="content-txt">
|
|
“农业现代化，种子是基础，必须把民族种业搞上去”。
|
|
习近平总书记对种业振兴念兹在兹，党的十八大以来，多次作出重要指示，
|
|
强调“只有用自己的手攥紧中国种子，才能端稳中国饭碗，才能实现粮食安全”。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card h292" style="margin-top: 8px">
|
|
<screen-title-zd>
|
|
<div
|
|
slot="left"
|
|
class="screen-title-left"
|
|
@click="handelClickEmap"
|
|
style="cursor: pointer"
|
|
>
|
|
优势条件
|
|
</div>
|
|
</screen-title-zd>
|
|
<div class="card-item-yfys">
|
|
<div class="item">
|
|
<div class="item-image">
|
|
<ul class="bg-bubbles">
|
|
<li v-for="i in 10" :key="i"></li>
|
|
</ul>
|
|
<img src="@/assets/images/index/yfys1-icon.png" alt="" />
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">战略优势</div>
|
|
<div class="center yellow"><span class="num">3</span> 年</div>
|
|
<div class="bot">中央1号文件</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-image">
|
|
<ul class="bg-bubbles">
|
|
<li v-for="i in 10" :key="i"></li>
|
|
</ul>
|
|
<img src="@/assets/images/index/yfys2-icon.png" alt="" />
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">自然优势</div>
|
|
<div class="center green">北纬 <span class="num">36°</span></div>
|
|
<div class="bot">黄金育种地带</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-image">
|
|
<ul class="bg-bubbles">
|
|
<li v-for="i in 10" :key="i"></li>
|
|
</ul>
|
|
<img src="@/assets/images/index/yfys3-icon.png" alt="" />
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">区位优势</div>
|
|
<div class="center violet"><span class="num">1</span> 小时</div>
|
|
<div class="bot">交通辐射圈</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-image">
|
|
<ul class="bg-bubbles">
|
|
<li v-for="i in 10" :key="i"></li>
|
|
</ul>
|
|
<img src="@/assets/images/index/yfys4-icon.png" alt="" />
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">产业优势</div>
|
|
<div class="center blue"><span class="num">5.2</span> 亿元</div>
|
|
<div class="bot">种子年销售额</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card h292 m-top12">
|
|
<screen-title-zd>
|
|
<div slot="left" class="screen-title-left">农品动态</div>
|
|
<!-- <div slot="right" @click="set_yfcj(true)" class="screen-title-right">
|
|
<span>发展历程</span>
|
|
</div> -->
|
|
</screen-title-zd>
|
|
<div class="npdt">
|
|
<div class="npdt-shichang">
|
|
<div class="npdt-title">今日市场</div>
|
|
<div class="npdt-shichang-header">
|
|
<div>品名</div>
|
|
<div>均价(元/公斤)</div>
|
|
<div>较昨日</div>
|
|
</div>
|
|
<div style="height: 180px; overflow: hidden">
|
|
<vue-seamless-scroll
|
|
:class-option="optionHover1"
|
|
:data="shichangList"
|
|
>
|
|
<div class="scroll-box">
|
|
<div
|
|
class="scroll-item"
|
|
v-for="(item, index) in shichangList"
|
|
:key="'dyfc' + index"
|
|
>
|
|
<div class="npdt-shichang-row">
|
|
<div>{{ item.Name }}</div>
|
|
<div>{{ item.price.toFixed(2) }}</div>
|
|
<div style="display: flex">
|
|
<div style="width: 38px">
|
|
{{ item.jzrPrice.toFixed(2) }}
|
|
</div>
|
|
<img
|
|
v-if="item.jzrPrice >= 0"
|
|
width="16px"
|
|
height="16px"
|
|
src="@/assets/images/icon/upRed.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
width="16px"
|
|
height="16px"
|
|
src="@/assets/images/icon/downLv.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
<div class="npdt-yfclz">
|
|
<div class="npdt-title">移风菜篮子</div>
|
|
<div class="npdt-yfclz-header">
|
|
<div>品名</div>
|
|
<div>产量(吨)</div>
|
|
</div>
|
|
<div style="height: 180px; overflow: hidden">
|
|
<vue-seamless-scroll
|
|
:class-option="optionHover1"
|
|
:data="shichangList"
|
|
>
|
|
<div class="scroll-box" @click="openClz">
|
|
<div
|
|
class="scroll-item"
|
|
v-for="(item, index) in yfclzList"
|
|
:key="'dyfc' + index"
|
|
>
|
|
<div class="npdt-yfclz-row">
|
|
<div>{{ item.name }}</div>
|
|
<div>{{ item.num.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex'
|
|
import { prcCollectionListForGov } from '@/api/zdyf'
|
|
export default {
|
|
data () {
|
|
return {
|
|
shichangList: [
|
|
{
|
|
name: '豌豆荚',
|
|
num: 14,
|
|
jzr: 1
|
|
},
|
|
{
|
|
name: '白玉菇',
|
|
num: 14,
|
|
jzr: 1
|
|
},
|
|
{
|
|
name: '生菜球',
|
|
num: 14,
|
|
jzr: -1
|
|
},
|
|
{
|
|
name: '秋葵',
|
|
num: 14,
|
|
jzr: -1
|
|
},
|
|
{
|
|
name: '苦菊',
|
|
num: 14,
|
|
jzr: 1
|
|
},
|
|
{
|
|
name: '白菜',
|
|
num: 14,
|
|
jzr: 1
|
|
}
|
|
],
|
|
yfclzList: [
|
|
{
|
|
name: '豌豆荚',
|
|
num: 460
|
|
},
|
|
{
|
|
name: '白玉菇',
|
|
num: 389
|
|
},
|
|
{
|
|
name: '生菜球',
|
|
num: 322
|
|
},
|
|
{
|
|
name: '秋葵',
|
|
num: 266
|
|
},
|
|
{
|
|
name: '苦菊',
|
|
num: 198
|
|
},
|
|
{
|
|
name: '白菜',
|
|
num: 890
|
|
}
|
|
],
|
|
optionHover1: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 2000 // 单步运动停止的时间(默认值1000ms)
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
const params = {
|
|
Country: 0,
|
|
FEndDate: this.$moment().format('yyyy-MM-DD'),
|
|
FParentPartyID: 1,
|
|
FPartyName: '青岛移风蔬菜批发市场有限公司',
|
|
FPartyType: 1010,
|
|
FStartDate: this.$moment().format('yyyy-MM-DD'),
|
|
FStoreId: 1,
|
|
Name: '全部',
|
|
page: 1,
|
|
pageSize: 10,
|
|
singletype: 0,
|
|
sort: ''
|
|
}
|
|
prcCollectionListForGov(params).then((res) => {
|
|
prcCollectionListForGov({
|
|
...params,
|
|
FEndDate: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'),
|
|
FStartDate: this.$moment().subtract(1, 'days').format('yyyy-MM-DD')
|
|
}).then((res1) => {
|
|
this.shichangList = this.getScData(res.priceslist, res1.priceslist)
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
showGlobalDialog: 'showGlobalDialog',
|
|
set_yfcj: 'SET_YFCJ',
|
|
set_yfclz: 'SET_YFCLZ',
|
|
set_ldhg: 'SET_LDGH'
|
|
}),
|
|
openClz () {
|
|
console.log('zoule?')
|
|
this.set_yfclz(true)
|
|
},
|
|
deduplicationJs (arr) {
|
|
const data = []
|
|
arr.forEach((item, index) => {
|
|
if ((index + 1) % 2 === 0) {
|
|
const num = (arr[index - 1].AvgPrice + item.AvgPrice) / 2
|
|
data.push({ ...item, price: num })
|
|
}
|
|
})
|
|
return data
|
|
},
|
|
getScData (arr, arr1) {
|
|
const dataD = this.deduplicationJs(arr)
|
|
const dataTd = this.deduplicationJs(arr1)
|
|
return dataD.map((item, index) => {
|
|
const priceTd = dataTd.filter(item1 => item.Name === item1.Name)[0].price
|
|
const jzrPrice = item.price - priceTd
|
|
return {
|
|
...item,
|
|
jzrPrice
|
|
}
|
|
})
|
|
},
|
|
handelClickEmap () {
|
|
this.$EventBus.$emit('switcMapType', 'Emap')
|
|
}
|
|
},
|
|
components: {},
|
|
computed: {},
|
|
watch: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.scroll-box {
|
|
justify-content: space-around;
|
|
overflow: hidden;
|
|
}
|
|
.npdt {
|
|
padding: 16px;
|
|
display: flex;
|
|
&-shichang {
|
|
width: 233px;
|
|
&-header {
|
|
display: flex;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 300;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
div:nth-child(1) {
|
|
width: 79px;
|
|
opacity: 0.76;
|
|
}
|
|
div:nth-child(2) {
|
|
width: 109px;
|
|
opacity: 0.76;
|
|
}
|
|
div:nth-child(3) {
|
|
width: 58px;
|
|
opacity: 0.76;
|
|
}
|
|
}
|
|
&-row {
|
|
display: flex;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
line-height: 32px;
|
|
height: 32px;
|
|
border-bottom: 1px dashed #d9fdff;
|
|
img {
|
|
margin-top: 7px;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
div:nth-child(1) {
|
|
width: 79px;
|
|
}
|
|
div:nth-child(2) {
|
|
width: 109px;
|
|
}
|
|
div:nth-child(3) {
|
|
width: 58px;
|
|
}
|
|
}
|
|
}
|
|
&-yfclz {
|
|
margin-left: 32px;
|
|
width: 154px;
|
|
&-header {
|
|
display: flex;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 300;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
div:nth-child(1) {
|
|
width: 99px;
|
|
opacity: 0.76;
|
|
}
|
|
div:nth-child(2) {
|
|
width: 100px;
|
|
opacity: 0.76;
|
|
}
|
|
}
|
|
&-row {
|
|
display: flex;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
line-height: 32px;
|
|
height: 32px;
|
|
border-bottom: 1px dashed #d9fdff;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
div:nth-child(1) {
|
|
width: 99px;
|
|
}
|
|
div:nth-child(2) {
|
|
width: 100px;
|
|
}
|
|
}
|
|
}
|
|
&-title {
|
|
background-size: 100% 100%;
|
|
padding-left: 27px;
|
|
background: url("~@/assets/images/icon/ncpdt.png") no-repeat;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
@keyframes moveUpDown {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-15px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes rise {
|
|
0% {
|
|
bottom: -100px;
|
|
}
|
|
50% {
|
|
bottom: 100%;
|
|
}
|
|
100% {
|
|
bottom: -100px;
|
|
}
|
|
}
|
|
.card {
|
|
width: 100%;
|
|
height: 292px;
|
|
|
|
&-item-ldgh {
|
|
padding: 16px;
|
|
width: 100%;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
// @include flex(column);
|
|
// justify-content: space-around;
|
|
position: relative;
|
|
.title {
|
|
text-align: center;
|
|
font-family: FZZhengHeiS-B-GB;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
.content {
|
|
display: flex;
|
|
padding-top: 24px;
|
|
.content-image {
|
|
width: 126px;
|
|
height: 170px;
|
|
img {
|
|
width: 126px;
|
|
height: 170px;
|
|
}
|
|
}
|
|
.content-txt {
|
|
padding-left: 16px;
|
|
width: 286px;
|
|
height: 170px;
|
|
line-height: 24px;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
text-indent: 2em;
|
|
color: #ffffff;
|
|
letter-spacing: 45;
|
|
}
|
|
}
|
|
img {
|
|
height: 110px;
|
|
width: 100%;
|
|
}
|
|
|
|
span {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
text-indent: 2em;
|
|
}
|
|
}
|
|
|
|
&-item-yfys {
|
|
padding: 16px;
|
|
width: 100%;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
width: 50%;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.right {
|
|
flex: 1;
|
|
|
|
.top {
|
|
background-size: 100% 100%;
|
|
background: url("~@/assets/images/index/yfyskuang.png") no-repeat;
|
|
background-position-y: 20px;
|
|
}
|
|
|
|
.center {
|
|
.num {
|
|
font-family: pangmenzhengdao;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
.bot {
|
|
color: #bcd0f0;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
&-image {
|
|
position: relative;
|
|
top: -20px;
|
|
width: 80px;
|
|
height: 120px;
|
|
img {
|
|
position: relative;
|
|
top: -150px;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 10px;
|
|
margin-left: 16px;
|
|
z-index: 99999;
|
|
animation: moveUpDown 3s infinite linear;
|
|
}
|
|
}
|
|
}
|
|
.item:nth-child(1) {
|
|
.item-image {
|
|
background: url("~@/assets/images/index/yfys1.png") no-repeat;
|
|
background-position-y: 40px;
|
|
|
|
.bg-bubbles li {
|
|
background-color: rgba(247, 220, 111, 0.467);
|
|
}
|
|
}
|
|
}
|
|
.item:nth-child(2) {
|
|
.item-image {
|
|
background: url("~@/assets/images/index/yfys2.png") no-repeat;
|
|
background-position-y: 40px;
|
|
|
|
.bg-bubbles li {
|
|
background-color: rgba(98, 205, 179, 5);
|
|
}
|
|
}
|
|
}
|
|
.item:nth-child(3) {
|
|
.item-image {
|
|
background: url("~@/assets/images/index/yfys3.png") no-repeat;
|
|
background-position-y: 40px;
|
|
|
|
.bg-bubbles li {
|
|
background-color: rgba(173, 117, 222, 0.5);
|
|
}
|
|
}
|
|
}
|
|
.item:nth-child(4) {
|
|
.item-image {
|
|
background: url("~@/assets/images/index/yfys4.png") no-repeat;
|
|
background-position-y: 40px;
|
|
|
|
.bg-bubbles li {
|
|
background-color: rgba(70, 126, 226, 0.45);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.yellow {
|
|
color: #ffdfa7;
|
|
}
|
|
|
|
.green {
|
|
color: #25e3b6;
|
|
}
|
|
|
|
.violet {
|
|
color: #ca8aed;
|
|
}
|
|
|
|
.blue {
|
|
color: #d4e7ff;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes zoomIn {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.bg-bubbles {
|
|
// position: absolute;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 30px;
|
|
height: 160px;
|
|
// background: linear-gradient(to bottom right, #50A3A2, #53E3A6);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-bubbles li {
|
|
position: absolute;
|
|
bottom: 26px;
|
|
width: 4px;
|
|
height: 4px;
|
|
list-style: none;
|
|
animation: square 10s infinite;
|
|
transition-timing-function: linear;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(1) {
|
|
left: 16%;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(2) {
|
|
left: 20%;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
animation-delay: 2s;
|
|
animation-duration: 7s;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(3) {
|
|
left: 30%;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(4) {
|
|
left: 40%;
|
|
width: 6px;
|
|
height: 6px;
|
|
animation-duration: 8s;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(5) {
|
|
left: 50%;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(6) {
|
|
left: 60%;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 6px;
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(7) {
|
|
left: 70%;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(8) {
|
|
left: 75%;
|
|
width: 7px;
|
|
height: 7px;
|
|
animation-delay: 4s;
|
|
border-radius: 3.5px;
|
|
animation-duration: 15s;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(9) {
|
|
left: 80%;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
animation-delay: 2s;
|
|
animation-duration: 12s;
|
|
}
|
|
|
|
.bg-bubbles li:nth-child(10) {
|
|
left: 90%;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
@keyframes square {
|
|
0% {
|
|
opacity: 0.3;
|
|
transform: translateY(-70px);
|
|
}
|
|
|
|
25% {
|
|
opacity: 0.75;
|
|
transform: translateY(-95px);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: translateY(-109px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-130px);
|
|
}
|
|
}
|
|
</style>
|
|
|