135 lines
3.3 KiB
Vue
135 lines
3.3 KiB
Vue
<template>
|
|
<div class="platform">
|
|
<h2 class="platform-title">数字农业产业管理平台</h2>
|
|
<div class="platform-panel">
|
|
<div class="platform-panel-item">
|
|
<div class="icon"><img :src="getAssetsFile('images/platform/icon-yy.png')" /></div>
|
|
<b>农业产业运营服务平台</b>
|
|
<ul class="entry">
|
|
<li v-for="item in leftApps" :key="item.name" @click="gotoPage(item)">
|
|
<span class="entry-icon">
|
|
<img :src="getAssetsFile(item.icon)" />
|
|
</span>
|
|
<span class="entry-name">{{ item.title }} </span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="platform-panel-item">
|
|
<div class="icon"><img :src="getAssetsFile('images/platform/icon-zw.png')" /></div>
|
|
<b>农业产业政务服务平台</b>
|
|
<ul class="entry">
|
|
<li v-for="item in rightApps" :key="item.name" @click="gotoPage(item)">
|
|
<span class="entry-icon">
|
|
<img :src="getAssetsFile(item.icon)" />
|
|
</span>
|
|
<span class="entry-name">{{ item.title }} </span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { leftApps, rightApps, microApps } from '@/micro/app';
|
|
import actions from '@/micro/actions';
|
|
import { getAssetsFile } from '@/utils';
|
|
|
|
const gotoPage = (row) => {
|
|
// const curentApp = microApps.find((item) => row.name === item.name);
|
|
// actions.setGlobalState({
|
|
// curentApp,
|
|
// });
|
|
console.log('===', actions.getGlobalState('user'));
|
|
window.history.pushState({}, row.name, row.activeRule);
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.platform {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('@/assets/images/platform/bg.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
&-title {
|
|
width: 1200px;
|
|
height: 156px;
|
|
margin: 0 auto 20px;
|
|
padding-top: 120px;
|
|
text-indent: -999rem;
|
|
background-image: url('@/assets/images/platform/title.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
&-panel {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
@include flex-row();
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&-item {
|
|
width: 480px;
|
|
margin: 0 40px;
|
|
text-align: center;
|
|
@include flex-column();
|
|
|
|
.icon {
|
|
width: 280px;
|
|
height: 280px;
|
|
margin: 0 auto 24px;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
b {
|
|
line-height: 48px;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.entry {
|
|
width: 100%;
|
|
height: 140px;
|
|
border-radius: 20px;
|
|
margin-top: 44px;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 1);
|
|
color: #fff;
|
|
@include flex-row();
|
|
align-items: center;
|
|
|
|
&-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 24px;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&-name {
|
|
font-size: 20px;
|
|
}
|
|
|
|
li {
|
|
@include flex-column();
|
|
flex: 1;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|