Browse Source

首页上报可移动视频,路由跳转

master
是小王呀\24601 1 year ago
parent
commit
91e0d9a59a
  1. 5
      yarn.lock
  2. BIN
      yifengdian-company-report/src/assets/images/home/shangbao.gif
  3. 4
      yifengdian-company-report/src/router/router_modular/index.js
  4. 78
      yifengdian-company-report/src/views/home.vue

5
yarn.lock

@ -3903,6 +3903,11 @@ data-view-byte-offset@^1.0.0:
es-errors "^1.3.0" es-errors "^1.3.0"
is-data-view "^1.0.1" is-data-view "^1.0.1"
dayjs@^1.11.7:
version "1.11.11"
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
de-indent@^1.0.2: de-indent@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz" resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz"

BIN
yifengdian-company-report/src/assets/images/home/shangbao.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB

4
yifengdian-company-report/src/router/router_modular/index.js

@ -10,11 +10,13 @@ const router_modular = [
path: '/list', path: '/list',
name: 'list', name: 'list',
component: () => import(/* webpackChunkName: "about" */ '@/views/vegetableList.vue') component: () => import(/* webpackChunkName: "about" */ '@/views/vegetableList.vue')
}, },
{ {
path: '/vegetableDetails', path: '/vegetableDetails',
name: 'vegetableDetails', name: 'vegetableDetails',
component: () => import(/* webpackChunkName: "about" */ '@/views/vegetableDetails.vue') component: () => import(/* webpackChunkName: "about" */ '@/views/vegetableDetails.vue'),
title:'产量上报'
}, },
{ {
path: '/home', path: '/home',

78
yifengdian-company-report/src/views/home.vue

@ -1,4 +1,5 @@
<template> <template>
<div class="home"> <div class="home">
<div class="header"> <div class="header">
<div class="tel_box flex flex-center2 flex-end"> <div class="tel_box flex flex-center2 flex-end">
@ -23,8 +24,8 @@
<section style="overflow: hidden;"> <section style="overflow: hidden;">
<vue-seamless-scroll :class-option="optionHover" :data="vegetableList"> <vue-seamless-scroll :class-option="optionHover" :data="vegetableList">
<div class="scroll-content"> <div class="scroll-content">
<div class="flex flex-end item" v-for="(item, index) in vegetableList" <div class="flex flex-end item" v-for="(item, index) in vegetableList" :key="'vegetable' + index"
:key="'vegetable' + index" style="padding: 0 26px;"> style="padding: 0 26px;">
<!-- <img :src="item.imageList[0]" v-if="item.imageList.length >0"/> <!-- <img :src="item.imageList[0]" v-if="item.imageList.length >0"/>
<img src="../../assets/images/dyfc.png" v-else alt=""> --> <img src="../../assets/images/dyfc.png" v-else alt=""> -->
<div class="flex1 van-ellipsis text-anign-left">{{ item.vegetableCategory }} </div> <div class="flex1 van-ellipsis text-anign-left">{{ item.vegetableCategory }} </div>
@ -53,15 +54,15 @@
<section style="overflow: hidden;"> <section style="overflow: hidden;">
<vue-seamless-scroll :class-option="optionHover" :data="priceList"> <vue-seamless-scroll :class-option="optionHover" :data="priceList">
<div class="scroll-content"> <div class="scroll-content">
<div class="flex flex-mean item" v-for="(item, index) in priceList" <div class="flex flex-mean item" v-for="(item, index) in priceList" :key="'price' + index">
:key="'price' + index">
<div class="flex1 van-ellipsis">{{ item.Name }} </div> <div class="flex1 van-ellipsis">{{ item.Name }} </div>
<div class="flex1 van-ellipsis">{{ item.price }} </div> <div class="flex1 van-ellipsis">{{ item.price }} </div>
<div class="vegetable-item-row2 flex1 van-ellipsis">{{ item.jzrPrice }} <div class="vegetable-item-row2 flex1 van-ellipsis">{{ item.jzrPrice }}
<img v-if="item.jzrPrice > 0 && item.jzrPrice != '暂无'" <img v-if="item.jzrPrice > 0 && item.jzrPrice != '暂无'" src="@/assets/up.png" alt=""
src="@/assets/up.png" alt="" style="width: 11px;height: 15px;"> style="width: 11px;height: 15px;">
<img v-if="item.jzrPrice < 0 && item.jzrPrice != '暂无'" <img v-if="item.jzrPrice < 0 && item.jzrPrice != '暂无'" src="@/assets/down.png" alt=""
src="@/assets/down.png" alt="" style="width: 11px;height: 15px;"></div> style="width: 11px;height: 15px;">
</div>
</div> </div>
</div> </div>
@ -82,14 +83,20 @@
</div> </div>
<div class="flex flex-end m-top12"> <div class="flex flex-end m-top12">
<div class="flex font-size14 flex-center2"> <div class="flex font-size14 flex-center2">
<img src="@/assets/images/home/unit.png" class="img-13" alt=""><span <img src="@/assets/images/home/unit.png" class="img-13" alt=""><span class="blue">青岛市人民政府</span>
class="blue">青岛市人民政府</span>
</div> </div>
<span class="gray">2024-03-05</span> <span class="gray">2024-03-05</span>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<div class="container1">
<div class="movable-area" @touchstart="onMovableStart" @touchmove="onMovableMove" @touchend="onMovableEnd" @click="$router.push('/vegetableDetails')">
<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> </div>
</template> </template>
<script> <script>
@ -132,13 +139,37 @@ export default {
], ],
dayList: [], dayList: [],
tDayList: [] tDayList: [],
dragging: false,
startX: 0,
startY: 0,
x: 279,
y: 625
}; };
}, },
created() { created() {
this.getDayScData() this.getDayScData()
}, },
methods: { 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() { handelClickEmap() {
this.$EventBus.$emit('switcMapType', 'Emap') this.$EventBus.$emit('switcMapType', 'Emap')
}, },
@ -332,4 +363,29 @@ export default {
} }
} }
} }
.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> </style>
Loading…
Cancel
Save