fix: 修改图标和页面

This commit is contained in:
mtruning
2022-01-16 15:28:33 +08:00
parent 26b698097d
commit f626d8a157
9 changed files with 43 additions and 112 deletions
@@ -5,7 +5,8 @@ import { PageEnum } from '@/enums/pageEnum'
import { MenuOption, MenuGroupOption } from 'naive-ui'
import { icon } from '@/plugins'
const { GridIcon, BeerIcon, DesktopIcon, LaptopOutlineIcon } = icon.ionicons5
const { GridIcon, DesktopIcon } = icon.ionicons5
const { StoreIcon, ObjectStorageIcon, DevicesIcon } = icon.carbon
export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
return option.label
}
@@ -18,12 +19,12 @@ export const menuOptionsInit = () => {
return reactive([
{
key: 'divider-1',
type: 'divider'
type: 'divider',
},
{
label: () => h('span', null, { default: () => t('project.project') }),
key: 'all-project',
icon: renderIcon(GridIcon),
icon: renderIcon(DevicesIcon),
children: [
{
type: 'group',
@@ -36,13 +37,13 @@ export const menuOptionsInit = () => {
RouterLink,
{
to: {
name: PageEnum.BASE_HOME_ITEMS_NAME
}
name: PageEnum.BASE_HOME_ITEMS_NAME,
},
},
{ default: () => t('project.all_project') }
),
key: PageEnum.BASE_HOME_ITEMS_NAME,
icon: renderIcon(DesktopIcon)
icon: renderIcon(DesktopIcon),
},
{
label: () =>
@@ -50,22 +51,22 @@ export const menuOptionsInit = () => {
RouterLink,
{
to: {
name: PageEnum.BASE_HOME_TEMPLATE_NAME
}
name: PageEnum.BASE_HOME_TEMPLATE_NAME,
},
},
{ default: () => t('project.my_templete') }
),
key: PageEnum.BASE_HOME_TEMPLATE_NAME,
icon: renderIcon(LaptopOutlineIcon)
}
]
}
]
icon: renderIcon(ObjectStorageIcon),
},
],
},
],
},
{
key: 'divider-2',
type: 'divider'
type: 'divider',
},
{
label: () =>
@@ -73,13 +74,13 @@ export const menuOptionsInit = () => {
RouterLink,
{
to: {
name: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME
}
name: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
},
},
{ default: () => t('project.template_market') }
),
key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
icon: renderIcon(BeerIcon)
}
icon: renderIcon(StoreIcon),
},
])
}
@@ -1,3 +0,0 @@
import TopCarousel from './index.vue'
export { TopCarousel }
@@ -1,12 +0,0 @@
<template>
<div class="go-template-market-top-carousel">
<h1>轮播图</h1>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@include go('project-template-market-top-carousel') {
}
</style>
+10 -65
View File
@@ -1,74 +1,19 @@
<template>
<div class="go-project-template-market">
<header class="top-box">
<div class="top-box-bg"></div>
<div class="top-content">
<n-carousel class="top-content-carousel" show-arrow>
<n-card title="模板1" hoverable>
<n-space>
<img
class="carousel-img"
src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
/>
<n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
</n-space>
</n-card>
<n-card title="模板2" hoverable>
<n-space>
<img
class="carousel-img"
src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
/>
<n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
</n-space>
</n-card>
<n-card title="模板2" hoverable>
<n-space>
<img
class="carousel-img"
src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
/>
<n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
</n-space>
</n-card>
<n-card title="模板2" hoverable>
<n-space>
<img
class="carousel-img"
src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
/>
<n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
</n-space>
</n-card>
</n-carousel>
</div>
<n-divider />
</header>
<n-space vertical>
<n-image object-fit="contain" height="300" preview-disabled :src="requireFallbackImg()" />
<n-h3>暂时还没有东西呢</n-h3>
</n-space>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { requireFallbackImg } from '@/utils'
</script>
<style lang="scss" scoped>
@include go('project-template-market') {
.top-box {
background: url('@/assets/images/project/project-top-bg.png');
background-position: top -185px left -1560px;
&-bg {
position: absolute;
width: 100%;
height: 100%;
@include background-image('items-top-bg');
}
.top-content {
display: flex;
justify-content: center;
position: relative;
padding-top: 30px;
&-carousel {
width: 70%;
}
}
}
@include go("project-template-market") {
margin-top: 100px;
@extend .go-flex-center;
}
</style>