Web/digital-agriculture-screen
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:头部和主容器改造

Browse Source
This commit is contained in:
李想 2025-04-24 11:07:38 +08:00
parent cb914e8582
commit 6b29a9e741
5 changed files with 85 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/images/land/底纹_upscayl_5x_upscayl-standard-4x.png → src/assets/images/basic/containerBG.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

31
src/components/custom-scroll-title/index.vue
View File

@ -34,7 +34,8 @@
<script setup>
import { ref, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
onMounted(() => {
handleWidth();
});
@ -44,25 +45,14 @@ const props = defineProps({
type: Array,
default() {
return [
{ label: '标题1', value: '1' },
{ label: '标题2', value: '2' },
{ label: '标题3', value: '3' },
{ label: '标题4', value: '4' },
{ label: '标题5', value: '5' },
{ label: '标题6', value: '6' },
{ label: '标题7', value: '7' },
{ label: '标题8', value: '8' },
{ label: '标题9', value: '9' },
{ label: '标题10', value: '10' },
{ label: '标题11', value: '11' },
{ label: '标题12', value: '12' },
{ label: '标题13', value: '13' },
{ label: '标题14', value: '14' },
{ label: '标题15', value: '15' },
{ label: '标题16', value: '16' },
{ label: '标题17', value: '17' },
{ label: '标题18', value: '18' },
{ label: '标题19', value: '19' },
{ label: '首页', value: 'home' },
{ label: '土地资源', value: 'land' },
{ label: '投入品', value: 'inputs' },
{ label: '生产经营主体', value: 'entities' },
// { label: '智慧种植监测', value: 'plant' },
// { label: '智慧养殖监测', value: 'breed' },
{ label: '全流程溯源', value: 'trace' },
{ label: '产业预警决策', value: 'early' },
];
},
},
@ -120,6 +110,7 @@ function handleTitleBtn(t = -1) {
function handleTitleClick(val) {
activeTitle.value = val;
emit('changeTitle', val);
router.push({ name: val });
}
</script>

22
src/layouts/index.vue
View File

@ -1,3 +1,23 @@
<template>
<router-view />
<section class="_contaioner">
<custom-scroll-title class="header_titles" @change-title="handleChangeTitle" />
<section class="_content">
<router-view />
</section>
</section>
</template>
<style lang="scss" scoped>
._contaioner {
box-sizing: border-box;
width: 100vw;
height: 100vh;
background: url('../assets/images/basic/containerBG.png') no-repeat center;
background-size: 100% 100%;
.header_titles {
height: 60px;
}
._content {
height: calc(100vh - 60px);
}
}
</style>

2
src/router/index.js
View File

@ -20,7 +20,7 @@ export const constantRoutes = [
path: '/',
name: 'layout',
component: Layout,
redirect: '/home',
// redirect: '/home',
meta: { title: '首页', icon: 'House' },
children: [
{

188
src/views/home/index.vue
View File

@ -1,77 +1,56 @@
<template>
<div class="data-home-index">
<baseBg ref="homebase" :name-val="'home'" top-title=" ">
<!-- <template #top> </template> -->
<template #center>
<el-row style="width: 100%; height: 100%">
<el-col :span="6" class="left-charts">
<div class="left-charts-item">
<customBack top-title="综合数据统计" :top-postion="'left'">
<template #back>
<comprehensive></comprehensive>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="土地分布数据统计" :top-postion="'left'">
<template #back>
<rolllist :items="rollDataList"></rolllist>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="种养殖数据统计" :top-postion="'left'">
<template #back>
<plantBreedCharts></plantBreedCharts>
</template>
</customBack>
</div>
</el-col>
<el-col :span="12">
<centerMap></centerMap>
</el-col>
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="使用投入品数据统计" :top-postion="'left'">
<template #back>
<inputs></inputs>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="经营主体数据统计" :top-postion="'left'">
<template #back>
<entitiesCharts></entitiesCharts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
<template #back>
<traceCharts></traceCharts>
</template>
</customBack>
</div>
</el-col>
</el-row>
</template>
</baseBg>
<div class="home-index-top-warp">
<div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
<div class="home-data-p">
<!-- <h3 class="home-title">耿马县农产品销售情况</h3> -->
<div class="home-data-top">￥1284.624万</div>
<div class="home-data-contrast">
<span class="tips">同比去年</span>
<span class="value">￥4684.629</span>
<el-icon style="vertical-align: middle" class="contrast-icon" color="#6beff9">
<TopRight />
</el-icon>
</div>
<el-row style="width: 100%; height: 100%">
<el-col :span="6" class="left-charts">
<div class="left-charts-item">
<customBack top-title="综合数据统计" :top-postion="'left'">
<template #back>
<comprehensive></comprehensive>
</template>
</customBack>
</div>
</div>
</div>
<div class="left-charts-item">
<customBack top-title="土地分布数据统计" :top-postion="'left'">
<template #back>
<rolllist :items="rollDataList"></rolllist>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="种养殖数据统计" :top-postion="'left'">
<template #back>
<plantBreedCharts></plantBreedCharts>
</template>
</customBack>
</div>
</el-col>
<el-col :span="12">
<centerMap></centerMap>
</el-col>
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="使用投入品数据统计" :top-postion="'left'">
<template #back>
<inputs></inputs>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="经营主体数据统计" :top-postion="'left'">
<template #back>
<entitiesCharts></entitiesCharts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
<template #back>
<traceCharts></traceCharts>
</template>
</customBack>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
@ -95,89 +74,26 @@ let rollDataList = reactive([
// 更多项...
]);
// const homebase = ref(null);
// onMounted(() => {
// homebase.value && homebase.value.startTime();
// });
// onUnmounted(() => {
// homebase.value && homebase.value.chearTime();
// });
</script>
<style lang="scss" scoped>
.data-home-index {
.home-index-top-warp {
position: fixed;
top: 48px;
left: 0;
width: 100%;
height: 120px;
text-align: center;
padding-top: 24px;
.home-index-top {
margin: auto;
width: calc(100% - 400px);
height: 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
position: relative;
.home-data-p {
position: absolute;
left: 0;
top: 13px;
width: 100%;
}
.home-title {
display: inline-block;
font-size: 18px;
font-weight: bold;
transform: skewX(-10deg);
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-webkit-background-clip: text;
color: #fff;
letter-spacing: 4px;
text-shadow: -2px 0 0 1px #add8f1;
}
.home-data-top {
font-size: 18px;
font-weight: bold;
color: #fff;
letter-spacing: 8px;
margin-bottom: 10px;
}
.home-data-contrast {
.tips {
font-size: 10px;
color: #6beff9;
}
.value {
padding: 0 8px;
font-size: 12px;
font-weight: bold;
color: #fff;
}
}
}
}
height: 100%;
width: 100%;
.left-charts {
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
flex-direction: column;
}
.left-charts-item {
width: 100%;
height: calc((100% - 30px) / 3);
background: transparent;
}
.right-charts {
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
flex-direction: column;
}