添加子界面:菜单,webview界面
parent
98a4ba0163
commit
ddfba0ae1f
@ -1,11 +1,16 @@
|
|||||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||||
import Login from '@renderer/views/Login.vue'
|
import Login from '@renderer/views/Login.vue'
|
||||||
import Home from '@renderer/views/Home..vue'
|
import Home from '@renderer/views/Home..vue'
|
||||||
|
import Menu from '@renderer/views/Menu.vue'
|
||||||
|
import WebContainer from '@renderer/views/WebContainer.vue'
|
||||||
|
|
||||||
export default createRouter({
|
export default createRouter({
|
||||||
history: createWebHashHistory(),
|
history: createWebHashHistory(),
|
||||||
routes: [
|
routes: [
|
||||||
{ path: '/', component: Login },
|
{ path: '/', component: Login },
|
||||||
{ path: '/home', component: Home }
|
{ path: '/home', component: Home, children:[
|
||||||
|
{ path: 'menu', component: Menu },
|
||||||
|
{ path:'webContainer', component: WebContainer}
|
||||||
|
] }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@ -0,0 +1,153 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface Item {
|
||||||
|
platformUrl: string
|
||||||
|
platformId: number
|
||||||
|
platformName: string
|
||||||
|
platformIcon: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const items: Item[] = [
|
||||||
|
{
|
||||||
|
"platformUrl": "https://etax.zhejiang.chinatax.gov.cn:8443/",
|
||||||
|
"platformId": 1,
|
||||||
|
"platformName": "浙江电子税务局",
|
||||||
|
"platformIcon": "http://192.168.0.117:8092/images/zj-tax.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"platformUrl": "https://portal.zjzwfw.gov.cn/pc/portal/hall/#/MainLobby",
|
||||||
|
"platformId": 2,
|
||||||
|
"platformName": "浙江政务服务网",
|
||||||
|
"platformIcon": "https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjservice/resources/index1/newImg/zjzwLogo.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"platformUrl": "https://www.zjzwfw.gov.cn/zjzwfw/",
|
||||||
|
"platformId": 3,
|
||||||
|
"platformName": "浙里办",
|
||||||
|
"platformIcon": "https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjservice/resources/index1/newImg/zjzwLogo.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"platformUrl": "https://etax.chinatax.gov.cn",
|
||||||
|
"platformId": 4,
|
||||||
|
"platformName": "自然人电子税务局",
|
||||||
|
"platformIcon": "http://192.168.0.117:8092/images/personal-tax.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"platformUrl": "https://www.baidu.com/",
|
||||||
|
"platformId": 5,
|
||||||
|
"platformName": "百度",
|
||||||
|
"platformIcon": "http://192.168.0.117:8092/images/personal-tax.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"platformUrl": "https://https://chat.deepseek.com/",
|
||||||
|
"platformId": 6,
|
||||||
|
"platformName": "Deepseek",
|
||||||
|
"platformIcon": "http://192.168.0.117:8092/images/personal-tax.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
import { NButton } from 'naive-ui';
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
const currentIndex = ref(0)
|
||||||
|
const visibleCount = ref(4)
|
||||||
|
let currentButtonList: Item[] = []
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initButtonList()
|
||||||
|
})
|
||||||
|
|
||||||
|
const initButtonList = () => {
|
||||||
|
currentButtonList = items.slice(0, 3)
|
||||||
|
console.log(currentButtonList)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClick = (item) => {
|
||||||
|
console.log(item.platformUrl)
|
||||||
|
}
|
||||||
|
|
||||||
|
const goLeft = () => {
|
||||||
|
currentIndex.value--
|
||||||
|
currentButtonList = items.slice(currentIndex.value, currentIndex.value + 3)
|
||||||
|
console.log(currentIndex.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const goRight = () => {
|
||||||
|
currentIndex.value++
|
||||||
|
currentButtonList = items.slice(currentIndex.value, currentIndex.value + 3)
|
||||||
|
console.log(currentIndex.value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="menu-bg">
|
||||||
|
<div class="side-div">
|
||||||
|
<NButton @click="goLeft" :disabled="currentIndex <= 0">{{ '<' }}</NButton>
|
||||||
|
</div>
|
||||||
|
<div class="center-div">
|
||||||
|
<div v-for="(item, index) in currentButtonList" :key="index" class="custom-button" @click="handleClick(item)">
|
||||||
|
<img :src="item.platformIcon" alt="" class="button-image">
|
||||||
|
<span class="button-text">{{ item.platformName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="side-div">
|
||||||
|
<NButton @click="goRight" :disabled="currentIndex >= 6">{{ '>' }}</NButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.menu-bg {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 92vh;
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
|
.center-div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 550px;
|
||||||
|
width: 1100px;
|
||||||
|
background-color: rgba($color: #fff, $alpha: 0.5);
|
||||||
|
flex-direction: row;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
.custom-button {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 20%;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 50%;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background-color: #6699ff;
|
||||||
|
|
||||||
|
.button-image {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-text {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-div {
|
||||||
|
margin: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>WebContainer</div>
|
||||||
|
</template>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue