图片上传至阿里云oss,产业运营首页头部优化
Before Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 296 KiB |
Before Width: | Height: | Size: 55 KiB |
Before Width: | Height: | Size: 220 KiB |
Before Width: | Height: | Size: 320 KiB |
Before Width: | Height: | Size: 766 KiB |
Before Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 205 KiB After Width: | Height: | Size: 196 KiB |
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 148 KiB |
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 167 KiB |
Before Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 131 KiB |
Before Width: | Height: | Size: 124 KiB |
Before Width: | Height: | Size: 129 KiB |
Before Width: | Height: | Size: 97 KiB |
Before Width: | Height: | Size: 305 KiB |
Before Width: | Height: | Size: 205 KiB After Width: | Height: | Size: 188 KiB |
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 143 KiB |
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 160 KiB |
Before Width: | Height: | Size: 602 KiB |
Before Width: | Height: | Size: 345 KiB |
@ -162,6 +162,7 @@ const toCart = () => {
|
||||
text-align: center;
|
||||
background: $color-fff;
|
||||
.layout-header-menu {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
::v-deep() {
|
||||
.el-menu {
|
||||
@ -190,7 +191,7 @@ const toCart = () => {
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
width: 1200px;
|
||||
height: 206px;
|
||||
// height: 206px;
|
||||
&-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -254,7 +255,7 @@ const toCart = () => {
|
||||
}
|
||||
&-bottom {
|
||||
display: flex;
|
||||
padding: 20px 32px 0;
|
||||
padding: 0px 32px 0;
|
||||
&-left {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="data-home-index" :style="{ backgroundImage: `url(${bgImageUrl})` }">
|
||||
<div class="data-home-index">
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item">
|
||||
@ -90,10 +90,10 @@ let four = reactive({
|
||||
const bgImageUrl = ref('');
|
||||
|
||||
// 初始化加载背景图
|
||||
onMounted(() => {
|
||||
getAssetsFile('images/basic/containerBG.png');
|
||||
bgImageUrl.value = getAssetsFile('images/basic/containerBG.png');
|
||||
});
|
||||
// onMounted(() => {
|
||||
// getAssetsFile('images/basic/containerBG.png');
|
||||
// bgImageUrl.value = getAssetsFile('images/basic/containerBG.png');
|
||||
// });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
@ -101,6 +101,7 @@ onMounted(() => {
|
||||
height: calc(100vh - 240px);
|
||||
position: relative;
|
||||
background-color: #000000;
|
||||
background-image: url('https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/containerBG.png');
|
||||
background-size: cover; /* 填充整个容器 */
|
||||
background-position: center; /* 图片居中 */
|
||||
background-repeat: no-repeat;
|
||||
|
@ -1,55 +1,57 @@
|
||||
<template>
|
||||
<div class="c-goods-item-warp" @click="toDetail(data.id, data.parentId)">
|
||||
<div class="goods-img">
|
||||
<img :src="processedGoodUrl" alt="" style="width: 100%" />
|
||||
<!-- <el-image :src="encodeURIComponent(data.goodUrl) ? encodeURIComponent(data.goodUrl) : ''" fit="cover" @error="handleImageError" />-->
|
||||
</div>
|
||||
<div class="goods-name txt-ellipsis clamp2">{{ data.goodName }}</div>
|
||||
<div class="goods-do">
|
||||
<div class="price txt-ellipsis clamp">{{ data.goodPrice }}</div>
|
||||
<div class="do" @click.stop="openDialog(data)">
|
||||
<div class="iconfont icon-cart"></div>
|
||||
<div>
|
||||
<div class="c-goods-item-warp" @click="toDetail(data.id, data.parentId)">
|
||||
<div class="goods-img">
|
||||
<img :src="processedGoodUrl" alt="" style="width: 100%" />
|
||||
<!-- <el-image :src="encodeURIComponent(data.goodUrl) ? encodeURIComponent(data.goodUrl) : ''" fit="cover" @error="handleImageError" />-->
|
||||
</div>
|
||||
<div class="goods-name txt-ellipsis clamp2">{{ data.goodName }}</div>
|
||||
<div class="goods-do">
|
||||
<div class="price txt-ellipsis clamp">{{ data.goodPrice }}</div>
|
||||
<div class="do" @click.stop="openDialog(data)">
|
||||
<div class="iconfont icon-cart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="centerDialogVisible" title="Warning" width="80%" align-center :show-close="false" style="border-radius: 16px">
|
||||
<template #header>
|
||||
<div style="display: flex; justify-content: space-between; padding: 0 20px" @click="centerDialogVisible = false">
|
||||
<div style="font-size: 20px">商品购买</div>
|
||||
<el-icon size="25" style="cursor: pointer"><Close /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div style="padding: 0 20px 20px 20px; text-align: left">
|
||||
<div style="text-align: left; display: flex">
|
||||
<img :src="currentGood.goodUrl" style="width: 120px" alt="" />
|
||||
<div style="margin-left: 15px; display: flex; flex-direction: column; justify-content: space-around">
|
||||
<div style="font-size: 20px; color: #25bf82">¥{{ currentGood.netWeight ? currentGood.netWeight[0].goodPrice : 0 }}</div>
|
||||
<div style="font-size: 18px; color: black">{{ currentGood.goodName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialogSubTitle">选择规格</div>
|
||||
<div class="weight">
|
||||
<div
|
||||
v-for="(item, index) in currentGood.netWeight"
|
||||
:key="item.id"
|
||||
:class="{ weightActive: currentWeight === index }"
|
||||
@click="currentWeight = index"
|
||||
>
|
||||
{{ item.goodSpecs }}{{ item.unit }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialogSubTitle">购买数量</div>
|
||||
<el-input-number v-model="buyCount" :min="1" :max="10" style="margin-top: 20px" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="dialog-footer" style="text-align: center">
|
||||
<el-button class="btnBottom" style="background-color: #25bf82" @click="buyGood">立即购买</el-button>
|
||||
<el-button class="btnBottom" style="background-color: #ffbe4d" @click="addGoodToCart">加入购物车</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-dialog v-model="centerDialogVisible" title="Warning" width="80%" align-center :show-close="false" style="border-radius: 16px">
|
||||
<template #header>
|
||||
<div style="display: flex; justify-content: space-between; padding: 0 20px" @click="centerDialogVisible = false">
|
||||
<div style="font-size: 20px">商品购买</div>
|
||||
<el-icon size="25" style="cursor: pointer"><Close /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div style="padding: 0 20px 20px 20px; text-align: left">
|
||||
<div style="text-align: left; display: flex">
|
||||
<img :src="currentGood.goodUrl" style="width: 120px" alt="" />
|
||||
<div style="margin-left: 15px; display: flex; flex-direction: column; justify-content: space-around">
|
||||
<div style="font-size: 20px; color: #25bf82">¥{{ currentGood.netWeight ? currentGood.netWeight[0].goodPrice : 0 }}</div>
|
||||
<div style="font-size: 18px; color: black">{{ currentGood.goodName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialogSubTitle">选择规格</div>
|
||||
<div class="weight">
|
||||
<div
|
||||
v-for="(item, index) in currentGood.netWeight"
|
||||
:key="item.id"
|
||||
:class="{ weightActive: currentWeight === index }"
|
||||
@click="currentWeight = index"
|
||||
>
|
||||
{{ item.goodSpecs }}{{ item.unit }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialogSubTitle">购买数量</div>
|
||||
<el-input-number v-model="buyCount" :min="1" :max="10" style="margin-top: 20px" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="dialog-footer" style="text-align: center">
|
||||
<el-button class="btnBottom" style="background-color: #25bf82" @click="buyGood">立即购买</el-button>
|
||||
<el-button class="btnBottom" style="background-color: #ffbe4d" @click="addGoodToCart">加入购物车</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
|
@ -49,7 +49,7 @@
|
||||
<div style="width: 100%">
|
||||
<div v-for="(item, index) in tableData" :key="index" class="card-item">
|
||||
<div style="width: 100%; display: flex; align-items: center; justify-content: center">
|
||||
<img src="../../../assets/images/1.png" alt="" width="200px" style="height: 200px" />
|
||||
<img src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/1.png" alt="" width="200px" style="height: 200px" />
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 0 20px">
|
||||
<div>
|
||||
|
@ -9,7 +9,7 @@
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<div>
|
||||
<img style="width: 300px; height: 300px" src="../../../assets/images/1.png" alt="" />
|
||||
<img style="width: 300px; height: 300px" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/1.png" alt="" />
|
||||
</div>
|
||||
<div style="line-height: 300px; font-size: 30px; margin: 0 20px; cursor: pointer; color: #aaa">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
@ -271,7 +271,7 @@
|
||||
:key="item"
|
||||
style="width: 30%; text-align: left; background: #fff; border-radius: 5px; padding: 10px 20px; margin-bottom: 10px"
|
||||
>
|
||||
<img style="width: 200px; height: 200px" src="../../../assets/images/njIcon/01.png" alt="" />
|
||||
<img style="width: 200px; height: 200px" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/01.png" alt="" />
|
||||
<p style="font-size: 16px">约翰迪尔 9B 播种机</p>
|
||||
<p style="display: flex; font-size: 14px; color: #aaa">
|
||||
<span style="font-size: 16px"
|
||||
|
@ -59,7 +59,7 @@
|
||||
<!-- <h2 style="text-align: left">农业政策</h2> -->
|
||||
<div class="card-item">
|
||||
<div style="width: 220px; background-color: white">
|
||||
<img src="../../../assets/images/zj.png" alt="" width="200px" style="height: 200px" />
|
||||
<img src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/zj.png" alt="" width="200px" style="height: 200px" />
|
||||
</div>
|
||||
<div style="width: 75%; display: flex; flex-direction: column; justify-content: space-between">
|
||||
<div>
|
||||
|
@ -281,7 +281,7 @@
|
||||
<div style="font-size: 20px; font-weight: bold">服务案例</div>
|
||||
<div style="margin-top: 20px; display: flex; justify-content: space-between">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<img style="height: 150px" src="../../../assets/images/nj1.png" alt="" />
|
||||
<img style="height: 150px" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/nj1.png" alt="" />
|
||||
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
|
||||
<div style="font-size: 16px; font-weight: bold">丘北县稻田增产案例</div>
|
||||
<el-rate v-model="value1" disabled />
|
||||
@ -289,7 +289,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<img style="height: 150px" src="../../../assets/images/nj2.png" alt="" />
|
||||
<img style="height: 150px" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/nj2.png" alt="" />
|
||||
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
|
||||
<div style="font-size: 16px; font-weight: bold">丘北县病虫害防治案例</div>
|
||||
<el-rate v-model="value2" disabled />
|
||||
@ -297,7 +297,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<img style="height: 150px" src="../../../assets/images/nj3.png" alt="" />
|
||||
<img style="height: 150px" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/nj3.png" alt="" />
|
||||
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
|
||||
<div style="font-size: 16px; font-weight: bold">丘北县稻田增产案例</div>
|
||||
<el-rate v-model="value1" disabled />
|
||||
|
@ -55,7 +55,7 @@
|
||||
<!-- <h2 style="text-align: left">农业政策</h2> -->
|
||||
<div class="card-item">
|
||||
<div style="width: 220px; background-color: white">
|
||||
<img src="../../../assets/images/gr.jpg" alt="" width="200px" />
|
||||
<img src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/gr.jpg" alt="" width="200px" />
|
||||
</div>
|
||||
<div style="width: 75%; display: flex; flex-direction: column; justify-content: space-between">
|
||||
<div>
|
||||
|
@ -207,9 +207,9 @@
|
||||
<div class="page-title">服务照片</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px; display: flex; gap: 20px">
|
||||
<img style="flex: 1; height: 150px" :src="getAssetsFile('images/farmingService/11.png')" alt="" />
|
||||
<img style="flex: 1; height: 150px" :src="getAssetsFile('images/farmingService/12.png')" alt="" />
|
||||
<img style="flex: 1; height: 150px" :src="getAssetsFile('images/farmingService/13.png')" alt="" />
|
||||
<img style="flex: 1; height: 150px" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/11.png" alt="" />
|
||||
<img style="flex: 1; height: 150px" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/12.png" alt="" />
|
||||
<img style="flex: 1; height: 150px" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/13.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
|
@ -95,7 +95,7 @@
|
||||
</div> -->
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
<img :src="data.imageUrl" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ data.title }}</h3>
|
||||
@ -145,13 +145,13 @@
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/location.png" alt="" />
|
||||
地理位置
|
||||
</h3>
|
||||
<img :src="getAssetsFile(`${data.locationUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
<img :src="data.locationUrl" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/image.png" alt="" />图片
|
||||
</h3>
|
||||
<img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
<img :src="data.imageUrl" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -9,7 +9,7 @@
|
||||
</div> -->
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
<img :src="data.imageUrl" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ data.title }}</h3>
|
||||
@ -57,13 +57,13 @@
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/location.png" alt="" />
|
||||
地理位置
|
||||
</h3>
|
||||
<img :src="getAssetsFile(`${data.locationUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
<img :src="data.locationUrl" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/image.png" alt="" />图片
|
||||
</h3>
|
||||
<img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
<img :src="data.imageUrl" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -100,7 +100,7 @@
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
|
||||
<img :src="item.imageUrl" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<div class="storage-desc">
|
||||
@ -154,7 +154,7 @@ const state = reactive({
|
||||
price: '8元/个',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
locationUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/dz.png',
|
||||
//联系人
|
||||
contact: '张爱林',
|
||||
type: '塑料筐',
|
||||
@ -162,7 +162,7 @@ const state = reactive({
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/slk.png',
|
||||
imageUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/slk.png',
|
||||
},
|
||||
{
|
||||
title: '快递水果纸箱,苹果橙子纸箱定做印刷纸箱',
|
||||
@ -172,7 +172,7 @@ const state = reactive({
|
||||
price: '1.40元/件',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
locationUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/dz.png',
|
||||
//联系人
|
||||
contact: '张可然',
|
||||
type: '纸箱',
|
||||
@ -180,7 +180,7 @@ const state = reactive({
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/33.jpg',
|
||||
imageUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/33.jpg',
|
||||
},
|
||||
{
|
||||
title: '纸箱包装盒,物流箱包装箱',
|
||||
@ -190,7 +190,7 @@ const state = reactive({
|
||||
price: '0.50/个',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
locationUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/dz.png',
|
||||
//联系人
|
||||
contact: '张可然',
|
||||
type: '纸箱',
|
||||
@ -198,7 +198,7 @@ const state = reactive({
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/44.jpg',
|
||||
imageUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/44.jpg',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
@ -144,7 +144,8 @@
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
|
||||
<!-- <img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" /> -->
|
||||
<img :src="item.imageUrl" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h2 class="storage-title">
|
||||
<span class="span">{{ item.title }}</span>
|
||||
@ -229,14 +230,14 @@ const state = reactive({
|
||||
title: '云南农泰数字农业科技有限公司',
|
||||
description: '根茎类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
locationUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/dz.png',
|
||||
//分拣
|
||||
type: '自动化分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '15',
|
||||
rank: '1',
|
||||
imageUrl: 'images/5.png',
|
||||
imageUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/5.png',
|
||||
//联系人
|
||||
contact: '李志强',
|
||||
phone: '13988324687',
|
||||
@ -248,14 +249,14 @@ const state = reactive({
|
||||
title: '云南农泰数字农业科技有限公司',
|
||||
description: '豆类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
locationUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/dz.png',
|
||||
//分拣
|
||||
type: '人工分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '23',
|
||||
rank: '1',
|
||||
imageUrl: 'images/6.png',
|
||||
imageUrl: 'https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/6.png',
|
||||
//联系人
|
||||
contact: '张 莉',
|
||||
phone: '13888013256',
|
||||
|
@ -106,19 +106,75 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div class="video-wrapper">
|
||||
<video v-if="num === 1" ref="videoPlayer" src="../components/jiankong.mp4" controls loop autoplay muted></video>
|
||||
<video v-else-if="num === 2" ref="videoPlayer" src="../components/jiankong6.mp4" controls loop autoplay muted></video>
|
||||
<video v-else-if="num === 3" ref="videoPlayer" src="../components/jiankong5.mp4" controls loop autoplay muted></video>
|
||||
<video v-else-if="num === 4" ref="videoPlayer" src="../components/jiankong2.mp4" controls loop autoplay muted></video>
|
||||
<video v-else-if="num === 5" ref="videoPlayer" src="../components/jiankong3.mp4" controls loop autoplay muted></video>
|
||||
<video v-else-if="num === 6" ref="videoPlayer" src="../components/jiankong4.mp4" controls loop autoplay muted></video>
|
||||
<video
|
||||
v-if="num === 1"
|
||||
ref="videoPlayer"
|
||||
src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/jiankong.mp4"
|
||||
controls
|
||||
loop
|
||||
autoplay
|
||||
muted
|
||||
></video>
|
||||
<video
|
||||
v-else-if="num === 2"
|
||||
ref="videoPlayer"
|
||||
src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/jiankong6.mp4"
|
||||
controls
|
||||
loop
|
||||
autoplay
|
||||
muted
|
||||
></video>
|
||||
<video
|
||||
v-else-if="num === 3"
|
||||
ref="videoPlayer"
|
||||
src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/jiankong5.mp4"
|
||||
controls
|
||||
loop
|
||||
autoplay
|
||||
muted
|
||||
></video>
|
||||
<video
|
||||
v-else-if="num === 4"
|
||||
ref="videoPlayer"
|
||||
src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/jiankong2.mp4"
|
||||
controls
|
||||
loop
|
||||
autoplay
|
||||
muted
|
||||
></video>
|
||||
<video
|
||||
v-else-if="num === 5"
|
||||
ref="videoPlayer"
|
||||
src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/jiankong3.mp4"
|
||||
controls
|
||||
loop
|
||||
autoplay
|
||||
muted
|
||||
></video>
|
||||
<video
|
||||
v-else-if="num === 6"
|
||||
ref="videoPlayer"
|
||||
src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/jiankong4.mp4"
|
||||
controls
|
||||
loop
|
||||
autoplay
|
||||
muted
|
||||
></video>
|
||||
<div v-if="loading" class="status-message">正在加载直播流...</div>
|
||||
<div v-if="error" class="status-message error">{{ error }}</div>
|
||||
</div>
|
||||
<div class="pictures-wrapper">
|
||||
<img :src="getAssetsFile('images/smartFarm/goUp.png')" alt="" style="width: 100px" />
|
||||
<img :src="getAssetsFile('images/smartFarm/testPic2.png')" style="width: 80%; margin: 5px 0" :alt="devices[currentDevice].detail" />
|
||||
<img :src="getAssetsFile('images/smartFarm/testPic3.png')" style="width: 80%; margin: 5px 0" :alt="devices[currentDevice].detail" />
|
||||
<img
|
||||
src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/testPic2.png"
|
||||
style="width: 80%; margin: 5px 0"
|
||||
:alt="devices[currentDevice].detail"
|
||||
/>
|
||||
<img
|
||||
src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/testPic3.png"
|
||||
style="width: 80%; margin: 5px 0"
|
||||
:alt="devices[currentDevice].detail"
|
||||
/>
|
||||
<img :src="getAssetsFile('images/smartFarm/goDown.png')" alt="" style="width: 100px" />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -311,7 +311,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 50%">
|
||||
<img style="width: 100%" :src="getAssetsFile('images/smartFarm/locationPic.png')" alt="" />
|
||||
<img style="width: 100%" src="https://gov-cloud.oss-cn-chengdu.aliyuncs.com/frontend/chanye/locationPic.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 116 KiB |
Before Width: | Height: | Size: 478 KiB After Width: | Height: | Size: 138 KiB |
Before Width: | Height: | Size: 534 KiB After Width: | Height: | Size: 105 KiB |
@ -154,19 +154,6 @@ const state = reactive({
|
||||
price: '¥1.5元/吨/月',
|
||||
rank: '2',
|
||||
},
|
||||
// {
|
||||
// imageUrl: img3,
|
||||
// typeId: 3,
|
||||
// typeName: '恒温仓储',
|
||||
// title: '蔗糖储备恒温库',
|
||||
// operationUnit: '耿马糖业有限公司',
|
||||
// pricingUnit: '元/托·月',
|
||||
// storageArea: '3,200㎡',
|
||||
// usableArea: '800㎡',
|
||||
// location: '耿马糖厂东侧',
|
||||
// price: '¥28元/托/月',
|
||||
// rank: '3',
|
||||
// },
|
||||
{
|
||||
imageUrl: img4,
|
||||
typeId: 4,
|
||||
@ -180,19 +167,6 @@ const state = reactive({
|
||||
price: '¥2.8元/板/月',
|
||||
rank: '4',
|
||||
},
|
||||
// {
|
||||
// imageUrl: img5,
|
||||
// typeId: 5,
|
||||
// typeName: '气调仓储',
|
||||
// title: '高原蔬菜气调保鲜库',
|
||||
// operationUnit: '耿马高原农业合作社 ',
|
||||
// pricingUnit: '元/吨·月',
|
||||
// storageArea: '1,800㎡',
|
||||
// usableArea: '300㎡',
|
||||
// location: '勐撒镇蔬菜基地',
|
||||
// price: '¥45元/吨/月',
|
||||
// rank: '5',
|
||||
// },
|
||||
],
|
||||
});
|
||||
const allData = ref([...state.data]);
|
||||
|