171 lines
4.0 KiB
Vue
171 lines
4.0 KiB
Vue
<template>
|
|
<!-- :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }" -->
|
|
<div class="data-warp">
|
|
<div class="chart-content">
|
|
<div class="top">
|
|
<slot v-if="$slots.top" name="top"></slot>
|
|
<div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
|
|
<div class="top-left"></div>
|
|
<div class="top-content">
|
|
{{ topTitle }}
|
|
</div>
|
|
<!-- <div class="top-right">{{ currentTime }}</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<slot name="center"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useApp } from '@/hooks';
|
|
const router = useRouter();
|
|
const props = defineProps({
|
|
nameVal: {
|
|
type: String,
|
|
default: 'home',
|
|
},
|
|
topTitle: {
|
|
type: String,
|
|
default: '系统',
|
|
},
|
|
});
|
|
|
|
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;
|
|
.top-content-warp {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
.top-left,
|
|
.top-content,
|
|
.top-right {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.top-content {
|
|
width: calc(100% - 400px);
|
|
line-height: 42px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
transform: skewX(-8deg);
|
|
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
|
-webkit-background-clip: text;
|
|
color: #fff;
|
|
letter-spacing: 8px;
|
|
text-shadow: -6px 0 0 1px #add8f1;
|
|
}
|
|
.top-left {
|
|
width: 200px;
|
|
}
|
|
.top-right {
|
|
text-align: right;
|
|
width: 200px;
|
|
color: #add8f1;
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
height: 98px;
|
|
text-align: center;
|
|
|
|
.b-nav {
|
|
margin: auto;
|
|
display: inline-flex;
|
|
gap: 20px;
|
|
.b-nav-item {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
min-width: 132px;
|
|
height: 42px;
|
|
text-align: center;
|
|
line-height: 38px;
|
|
span {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
display: inline-flex;
|
|
transform: skewX(-8deg);
|
|
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% - 156px);
|
|
}
|
|
}
|
|
}
|
|
</style>
|