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.
248 lines
9.0 KiB
248 lines
9.0 KiB
1 year ago
|
<template>
|
||
|
|
<div class="home">
|
||
|
|
<div class="header">
|
||
|
|
<div class="tel_box flex flex-center2 flex-end">
|
||
|
|
<span>服务热线：</span><span class="m-right7">0532-58773877</span>
|
||
|
|
<a :href='`tel:0532-58773877`'>拨打</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<section class="container">
|
||
|
|
<div class="card">
|
||
|
|
<div class="title">
|
||
|
|
<span>移风菜篮子 <span>（单位：吨）</span></span>
|
||
|
|
<span>更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""></span>
|
||
|
|
</div>
|
||
|
|
<div class="scroll-box m-top18">
|
||
|
|
<div class="scroll-title flex flex-mean flex-center2" style="padding: 0 26px;">
|
||
|
|
<span class="flex1 text-anign-left">品名</span>
|
||
|
|
<span class="flex1 text-anign-right">产量 <span>(吨)</span></span>
|
||
|
|
</div>
|
||
|
|
<section style="overflow: hidden;">
|
||
|
|
<vue-seamless-scroll :class-option="optionHover"
|
||
|
|
:data="vegetableList">
|
||
|
|
<div class="scroll-content">
|
||
|
|
<div class="flex flex-end item"
|
||
|
|
v-for="(item,index) in vegetableList"
|
||
|
|
:key="'vegetable'+index" style="padding: 0 26px;">
|
||
|
|
<!-- <img :src="item.imageList[0]" v-if="item.imageList.length >0"/>
|
||
|
|
<img src="../../assets/images/dyfc.png" v-else alt=""> -->
|
||
|
|
<div class="flex1 van-ellipsis text-anign-left">{{item.name}} </div>
|
||
|
|
<div class="vegetable-item-row2 van-ellipsis text-anign-right flex1">{{item.num}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</vue-seamless-scroll>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card m-top10">
|
||
|
|
<div class="title">
|
||
|
|
<span>今日市场 <span>（单位：元/公斤）</span></span>
|
||
|
|
<span>更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""></span>
|
||
|
|
</div>
|
||
|
|
<div class="scroll-box m-top18">
|
||
|
|
<div class="scroll-title flex flex-mean flex-center2 text-anign-center">
|
||
|
|
<span class="flex1">品名</span>
|
||
|
|
<span class="flex1">均价</span>
|
||
|
|
<span class="flex1">较昨日</span>
|
||
|
|
</div>
|
||
|
|
<section style="overflow: hidden;">
|
||
|
|
<vue-seamless-scroll :class-option="optionHover"
|
||
|
|
:data="priceList">
|
||
|
|
<div class="scroll-content">
|
||
|
|
<div class="flex flex-mean item"
|
||
|
|
v-for="(item,index) in priceList"
|
||
|
|
:key="'price'+index">
|
||
|
|
<div class="flex1 van-ellipsis">{{item.name}} </div>
|
||
|
|
<div class="flex1 van-ellipsis">{{item.price}} </div>
|
||
|
|
<div class="vegetable-item-row2 flex1 van-ellipsis">{{item.old}} <img src="@/assets/up.png" alt="" style="width: 11px;height: 15px;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</vue-seamless-scroll>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card m-top10">
|
||
|
|
<div class="title">
|
||
|
|
<span>政策资讯</span>
|
||
|
|
<span>更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""></span>
|
||
|
|
</div>
|
||
|
|
<div class="flex-y">
|
||
|
|
<div class="van-multi-ellipsis--l2 font-bold" style="font-weight: 500;">
|
||
|
|
市农业农村局开展智慧农业、设施农业建设工作指导
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-end m-top12">
|
||
|
|
<div class="flex font-size14 flex-center2">
|
||
|
|
<img src="@/assets/images/home/unit.png" class="img-13" alt=""><span class="blue">青岛市人民政府</span>
|
||
|
|
</div>
|
||
|
|
<span class="gray">2024-03-05</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
optionHover: {
|
||
|
|
step: 1, // 数值越大速度滚动越快
|
||
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 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)
|
||
|
|
},
|
||
|
|
vegetableList:[
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
num:100000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
}, {
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
}
|
||
|
|
, {
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
}, {
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
}
|
||
|
|
, {
|
||
|
|
name:'土豆',
|
||
|
|
num:100,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
priceList:[
|
||
|
|
{
|
||
|
|
name:'哇啊哇擦哇啊哇擦哇啊哇擦哇啊哇擦',
|
||
|
|
price:100,
|
||
|
|
old:'1.1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
price:100,
|
||
|
|
old:'1.1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
price:100,
|
||
|
|
old:'1.1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'土豆',
|
||
|
|
price:100,
|
||
|
|
old:'1.1'
|
||
|
|
}, {
|
||
|
|
name:'土豆',
|
||
|
|
price:100,
|
||
|
|
old:'1.1'
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.home{
|
||
|
|
position: relative;
|
||
|
|
.header{
|
||
|
|
height: 135px;
|
||
|
|
background: url('@/assets/images/home/header.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
.tel_box{
|
||
|
|
padding: 79px 25px 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-style: italic;
|
||
|
|
:nth-child(1){
|
||
|
|
color: #cce6fd;
|
||
|
|
height: 35px;
|
||
|
|
font-size: 17px;
|
||
|
|
font-family: fangzheng-bold;
|
||
|
|
line-height: 39px;
|
||
|
|
|
||
|
|
}
|
||
|
|
:nth-child(2){
|
||
|
|
font-weight:300;
|
||
|
|
font-family:Impact;
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 25px;
|
||
|
|
height: 35px;
|
||
|
|
line-height: 35px;
|
||
|
|
}
|
||
|
|
a{
|
||
|
|
text-align: center;
|
||
|
|
color: #ffffff;
|
||
|
|
width: 63px;
|
||
|
|
height: 30px;
|
||
|
|
border-radius: 17px;
|
||
|
|
font-style: normal;
|
||
|
|
line-height: 30px;
|
||
|
|
background: linear-gradient(45deg, #ffd14d, #f78919);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
>section{
|
||
|
|
position: absolute;
|
||
|
|
top: 110px;
|
||
|
|
width: calc(100% - 20px);
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.scroll-box{
|
||
|
|
height: 225px;
|
||
|
|
overflow: hidden;
|
||
|
|
.scroll-title{
|
||
|
|
height: 45px;
|
||
|
|
background: url('@/assets/images/home/table_header.png') no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
padding: 0 5px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
color:#0082f0 ;
|
||
|
|
}
|
||
|
|
.scroll-content{
|
||
|
|
height: 225px;
|
||
|
|
overflow: hidden;
|
||
|
|
.item{
|
||
|
|
padding: 0 5px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 45px;
|
||
|
|
border: 1px solid #E0E9F5;
|
||
|
|
border-bottom: none;
|
||
|
|
line-height: 45px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.vegetable-item-row2{
|
||
|
|
color: #ff9805;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|