|
|
|
@ -1,96 +1,103 @@ |
|
|
|
<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> |
|
|
|
<div @click="$router.push('/vegetable')"> |
|
|
|
更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""> |
|
|
|
</div> |
|
|
|
|
|
|
|
</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.vegetableCategory }} </div> |
|
|
|
<div class="vegetable-item-row2 van-ellipsis text-anign-right flex1">{{ item.output }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<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> |
|
|
|
<div @click="$router.push('/vegetable')"> |
|
|
|
更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""> |
|
|
|
</div> |
|
|
|
|
|
|
|
</vue-seamless-scroll> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card m-top10"> |
|
|
|
<div class="title"> |
|
|
|
<span>今日市场 <span>（单位：元/公斤）</span></span> |
|
|
|
<div @click="$router.push('/bazaar')"> |
|
|
|
更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""> |
|
|
|
</div> |
|
|
|
</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.vegetableCategory }} </div> |
|
|
|
<div class="vegetable-item-row2 van-ellipsis text-anign-right flex1">{{ item.output }} |
|
|
|
</div> |
|
|
|
</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.jzrPrice }} |
|
|
|
<img v-if="item.jzrPrice > 0 && item.jzrPrice != '暂无'" |
|
|
|
src="@/assets/up.png" alt="" style="width: 11px;height: 15px;"> |
|
|
|
<img v-if="item.jzrPrice < 0 && item.jzrPrice != '暂无'" |
|
|
|
src="@/assets/down.png" alt="" style="width: 11px;height: 15px;"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</vue-seamless-scroll> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card m-top10"> |
|
|
|
<div class="title"> |
|
|
|
<span>今日市场 <span>（单位：元/公斤）</span></span> |
|
|
|
<div @click="$router.push('/bazaar')"> |
|
|
|
更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""> |
|
|
|
</div> |
|
|
|
</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.jzrPrice }} |
|
|
|
<img v-if="item.jzrPrice > 0 && item.jzrPrice != '暂无'" src="@/assets/up.png" alt="" |
|
|
|
style="width: 11px;height: 15px;"> |
|
|
|
<img v-if="item.jzrPrice < 0 && item.jzrPrice != '暂无'" src="@/assets/down.png" alt="" |
|
|
|
style="width: 11px;height: 15px;"> |
|
|
|
</div> |
|
|
|
|
|
|
|
</vue-seamless-scroll> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card m-top10"> |
|
|
|
<div class="title"> |
|
|
|
<span>政策资讯</span> |
|
|
|
<span @click="$router.push('/policy')">更多 <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> |
|
|
|
|
|
|
|
</vue-seamless-scroll> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card m-top10"> |
|
|
|
<div class="title"> |
|
|
|
<span>政策资讯</span> |
|
|
|
<span @click="$router.push('/policy')">更多 <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> |
|
|
|
</section> |
|
|
|
<span class="gray">2024-03-05</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<div class="container1"> |
|
|
|
<div class="movable-area" @touchstart="onMovableStart" @touchmove="onMovableMove" @touchend="onMovableEnd"> |
|
|
|
<div class="movable-view" :style="{ left: x + 'px', top: y + 'px' }"> |
|
|
|
<img src="@/assets/images/home/shangbao.gif" class="draggable" alt="draggable image"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
|
|
|
|
@ -98,48 +105,72 @@ import { mapActions } from 'vuex' |
|
|
|
import { prcCollectionListForGov, getVegetableOutputList } from '@/api/test' |
|
|
|
export default { |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
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: '' |
|
|
|
}, |
|
|
|
times: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'), |
|
|
|
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: [ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
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: '' |
|
|
|
}, |
|
|
|
times: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'), |
|
|
|
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: [ |
|
|
|
|
|
|
|
], |
|
|
|
priceList: [ |
|
|
|
], |
|
|
|
priceList: [ |
|
|
|
|
|
|
|
], |
|
|
|
dayList: [], |
|
|
|
tDayList: [] |
|
|
|
}; |
|
|
|
}, |
|
|
|
created () { |
|
|
|
], |
|
|
|
dayList: [], |
|
|
|
tDayList: [], |
|
|
|
dragging: false, |
|
|
|
startX: 0, |
|
|
|
startY: 0, |
|
|
|
x: 279, |
|
|
|
y: 625 |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getDayScData() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handelClickEmap () { |
|
|
|
methods: { |
|
|
|
onMovableStart(event) { |
|
|
|
console.log("123"); |
|
|
|
this.dragging = true; |
|
|
|
this.startX = event.touches[0].clientX - this.x; |
|
|
|
this.startY = event.touches[0].clientY - this.y; |
|
|
|
}, |
|
|
|
onMovableMove(event) { |
|
|
|
console.log("123"); |
|
|
|
event.preventDefault(); // 阻止默认滚动行为 |
|
|
|
if (this.dragging) { |
|
|
|
this.x = event.touches[0].clientX - this.startX; |
|
|
|
this.y = event.touches[0].clientY - this.startY; |
|
|
|
} |
|
|
|
console.log(this.x, this.y); |
|
|
|
}, |
|
|
|
onMovableEnd() { |
|
|
|
this.dragging = false; |
|
|
|
}, |
|
|
|
|
|
|
|
handelClickEmap() { |
|
|
|
this.$EventBus.$emit('switcMapType', 'Emap') |
|
|
|
}, |
|
|
|
...mapActions({ |
|
|
|
@ -149,13 +180,13 @@ export default { |
|
|
|
set_yfclz: 'SET_YFCLZ', |
|
|
|
set_ldhg: 'SET_LDGH' |
|
|
|
}), |
|
|
|
openClz () { |
|
|
|
openClz() { |
|
|
|
this.set_yfclz(true) |
|
|
|
}, |
|
|
|
openPdf () { |
|
|
|
openPdf() { |
|
|
|
this.set_viewPdf(true) |
|
|
|
}, |
|
|
|
deduplicationJs (arr) { |
|
|
|
deduplicationJs(arr) { |
|
|
|
const data = [] |
|
|
|
arr.forEach((item, index) => { |
|
|
|
if ((index + 1) % 2 === 0) { |
|
|
|
@ -167,22 +198,22 @@ export default { |
|
|
|
}, |
|
|
|
getDayScData(data) { |
|
|
|
|
|
|
|
console.log(data,"123"); |
|
|
|
console.log(this.params, data ); |
|
|
|
console.log(this.times,"事件"); |
|
|
|
console.log(data, "123"); |
|
|
|
console.log(this.params, data); |
|
|
|
console.log(this.times, "事件"); |
|
|
|
prcCollectionListForGov({ ...this.params, ...data }).then((res) => { |
|
|
|
console.log(res,"XIAOWANG"); |
|
|
|
console.log(res, "XIAOWANG"); |
|
|
|
if (res.data.priceslist.length > 0) { |
|
|
|
this.dayList = res.data.priceslist |
|
|
|
console.log("day"); |
|
|
|
console.log(this.dayList,"day"); |
|
|
|
console.log(this.dayList, "day"); |
|
|
|
this.getDayScTData() |
|
|
|
} else { |
|
|
|
console.log("11"); |
|
|
|
console.log("11"); |
|
|
|
this.times = this.$moment(this.times) |
|
|
|
.subtract(1, 'days') |
|
|
|
.format('yyyy-MM-DD') |
|
|
|
console.log( this.times); |
|
|
|
console.log(this.times); |
|
|
|
this.getDayScData({ |
|
|
|
FEndDate: this.$moment(this.times) |
|
|
|
.subtract(1, 'days') |
|
|
|
@ -196,24 +227,24 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
getVegetableOutputList().then(res => { |
|
|
|
console.log(res,"12651651651"); |
|
|
|
console.log(res, "12651651651"); |
|
|
|
this.vegetableList = res.data.data, |
|
|
|
console.log(res.data.data,"12651651651"); |
|
|
|
console.log(this.vegetableList,"1232432"); |
|
|
|
console.log(res.data.data, "12651651651"); |
|
|
|
console.log(this.vegetableList, "1232432"); |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
getDayScTData () { |
|
|
|
console.log(this.times); |
|
|
|
getDayScTData() { |
|
|
|
console.log(this.times); |
|
|
|
prcCollectionListForGov({ |
|
|
|
...this.params, |
|
|
|
FEndDate: this.times, |
|
|
|
FStartDate: this.times |
|
|
|
}).then((res1) => { |
|
|
|
console.log(res1.data,"15216516516"); |
|
|
|
console.log(res1.data, "15216516516"); |
|
|
|
if (res1.data.priceslist.length > 0) { |
|
|
|
this.priceList = this.getScData(this.dayList, res1.data.priceslist) |
|
|
|
console.log( this.priceList); |
|
|
|
console.log(this.priceList); |
|
|
|
} else { |
|
|
|
this.times = this.$moment(this.times) |
|
|
|
.subtract(1, 'days') |
|
|
|
@ -222,7 +253,7 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
getScData (arr, arr1) { |
|
|
|
getScData(arr, arr1) { |
|
|
|
const dataD = this.deduplicationJs(arr) |
|
|
|
const dataTd = this.deduplicationJs(arr1) |
|
|
|
return dataD.map((item, index) => { |
|
|
|
@ -243,93 +274,118 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.home { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.header { |
|
|
|
height: 135px; |
|
|
|
background: url('@/assets/images/home/header.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
.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; |
|
|
|
.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(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; |
|
|
|
} |
|
|
|
: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); |
|
|
|
} |
|
|
|
} |
|
|
|
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; |
|
|
|
} |
|
|
|
>section { |
|
|
|
position: absolute; |
|
|
|
top: 110px; |
|
|
|
width: calc(100% - 20px); |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.scroll-box { |
|
|
|
height: 225px; |
|
|
|
overflow: hidden; |
|
|
|
.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-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; |
|
|
|
.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; |
|
|
|
} |
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
.vegetable-item-row2 { |
|
|
|
color: #ff9805; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.container1 { |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.movable-area { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.movable-view { |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
position: absolute; |
|
|
|
cursor: move; |
|
|
|
} |
|
|
|
|
|
|
|
.draggable { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
</style> |
是小王呀\24601
11 months ago
