135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/screenbg.png') + ')' }">
|
||
|
|
<div class="chart-content">
|
||
|
|
<div class="top">头部</div>
|
||
|
|
<div class="content">
|
||
|
|
<slot name="center"></slot>
|
||
|
|
</div>
|
||
|
|
<div class="bottom" :style="{ 'background-image': 'url(' + getAssetsFile('images/bottombj.jpg') + ')' }">
|
||
|
|
<div class="b-nav">
|
||
|
|
<div
|
||
|
|
v-for="n in navlist"
|
||
|
|
:key="n.name"
|
||
|
|
class="b-nav-item"
|
||
|
|
:class="currentName == n.name ? 'nav-act' : 'nav-normal'"
|
||
|
|
@click="itemAct(n.name)"
|
||
|
|
>
|
||
|
|
<!-- <router-link :to="n.name"> -->
|
||
|
|
<span>{{ n.title }}</span>
|
||
|
|
<!-- </router-link> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||
|
|
import { ref, reactive, onMounted, watch } from 'vue';
|
||
|
|
import { useRouter } from 'vue-router';
|
||
|
|
import { useApp } from '@/hooks';
|
||
|
|
const router = useRouter();
|
||
|
|
const props = defineProps({
|
||
|
|
nameVal: {
|
||
|
|
type: String,
|
||
|
|
default: 'home',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const navlist = ref([
|
||
|
|
{ title: '首页', name: 'home' },
|
||
|
|
{ title: '土地资源', name: 'land' },
|
||
|
|
{ title: '投入品', name: 'inputs' },
|
||
|
|
{ title: '生产经营主体', name: 'entities' },
|
||
|
|
{ title: '智慧种植检测', name: 'plant' },
|
||
|
|
{ title: '智慧养殖检测', name: 'breed' },
|
||
|
|
{ title: '全流程溯源', name: 'trace' },
|
||
|
|
{ title: '产业预警决策', name: 'early' },
|
||
|
|
]);
|
||
|
|
|
||
|
|
let currentName = ref('home');
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.nameVal,
|
||
|
|
() => {
|
||
|
|
currentName.value = props.nameVal;
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true,
|
||
|
|
immediate: true,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
const itemAct = (name) => {
|
||
|
|
currentName.value = name;
|
||
|
|
router.push({ name: name });
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
div {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.data-warp {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
|
||
|
|
.chart-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
z-index: 1;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
.top,
|
||
|
|
.content,
|
||
|
|
.bottom {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 16px;
|
||
|
|
background-size: cover;
|
||
|
|
display: inline-flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.top {
|
||
|
|
height: 55px;
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
height: 98px;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.b-nav {
|
||
|
|
margin: auto;
|
||
|
|
display: inline-flex;
|
||
|
|
gap: 20px;
|
||
|
|
.b-nav-item {
|
||
|
|
display: inline-block;
|
||
|
|
cursor: pointer;
|
||
|
|
span {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
display: flex;
|
||
|
|
transform: skewX(-13deg);
|
||
|
|
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
|
||
|
|
letter-spacing: 4px;
|
||
|
|
text-shadow: -2px 0 0 1px #add8f1;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.nav-act {
|
||
|
|
color: rgba(255, 255, 255, 1);
|
||
|
|
}
|
||
|
|
&.nav-normal {
|
||
|
|
color: rgba(255, 255, 255, 0.6);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
height: calc(100% - 153px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|