Discharge7443/Nexior
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Update index and nav bar style (#126)

Browse Source 
Co-authored-by: AceDataCloud <office@acedata.cloud>
This commit is contained in:
Germey
2024-08-21 10:45:10 +08:00
committed by GitHub
co-authored by AceDataCloud
parent d8632ff699
commit c74d9e5a37
5 changed files with 87 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
change/@acedatacloud-nexior-3e383e03-d004-417d-8433-96d33f72ed7c.json
+7
View File
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "update navbar and index bg color",
"packageName": "@acedatacloud/nexior",
"email": "office@acedata.cloud",
"dependentChangeType": "patch"
}
index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Nexior</title>
<title>Ace Data Cloud</title>
</head>
<body>
<div id="app">
src/components/common/Logo.vue
+35 -7
View File
@@ -4,17 +4,45 @@
<script lang="ts">
import { getCookie } from 'typescript-cookie';
import { defineComponent } from 'vue';
import { BASE_URL_HUB } from '@/constants';
export default defineComponent({
export default {
emits: ['click'],
computed: {
data() {
return {
url1: 'https://cdn.acedata.cloud/logo.png/thumb_450x_',
url2: 'https://cdn.acedata.cloud/logo2.png/thumb_450x_',
dark: getCookie('THEME') === 'dark',
url: '',
isOfficial: window.location.origin === BASE_URL_HUB,
interval: undefined as number | undefined
};
},
watch: {
dark() {
return getCookie('THEME') === 'dark';
this.updateUrl();
}
},
mounted() {
this.interval = window.setInterval(this.checkCookie, 500);
this.updateUrl();
},
unmounted() {
if (this.interval) {
clearInterval(this.interval);
}
},
methods: {
checkCookie() {
this.dark = getCookie('THEME') === 'dark';
},
url() {
return this.$store.state.site?.logo;
updateUrl() {
if (this.isOfficial) {
this.url = this.dark ? this.url2 : this.url1;
} else {
this.url = this.$store.state.site?.logo || '';
}
}
}
});
};
</script>
src/components/common/TopHeader.vue
+4 -2
View File
@@ -4,7 +4,7 @@
<logo @click="onHome" />
</el-col>
<el-col :md="16" :xs="13">
<el-menu :default-active="active" mode="horizontal" :ellipsis="false" @select="onSelect">
<el-menu :default-active="active" mode="horizontal" class="menu" :ellipsis="true" @select="onSelect">
<el-sub-menu :index="1">
<template #title>{{ $t('common.nav.products') }}</template>
<el-menu-item v-if="site?.features?.chat?.enabled" v-t="'index.title.chat'" index="/chat"></el-menu-item>
@@ -156,12 +156,14 @@ $height: 60px;
float: right;
}
.el-menu {
.el-menu.menu {
--el-menu-hover-bg-color: var(--el-bg-color);
--el-menu-active-color: var(--el-color-primary);
background: none;
border: none;
height: $height;
min-width: 300px;
overflow-x: hidden;
.el-menu-item {
height: $height;
color: inherit !important;
src/pages/index/Index.vue
+40 -36
View File
@@ -64,7 +64,7 @@
</el-row>
</div>
</div>
<div id="chat" class="block">
<div v-if="site?.features?.chat?.enabled" id="chat" class="block">
<div class="container">
<el-row>
<el-col :md="16" :xs="24" class="preview">
@@ -90,7 +90,7 @@
</el-row>
</div>
</div>
<div id="midjourney" class="block">
<div v-if="site?.features?.midjourney?.enabled" id="midjourney" class="block">
<div class="container">
<el-row>
<el-col :md="8" :xs="24" class="info">
@@ -116,15 +116,7 @@
</el-row>
</div>
</div>
<div
id="qrart"
class="block"
@click="
$router.push({
path: '/qrart'
})
"
>
<div v-if="site?.features?.qrart?.enabled" id="qrart" class="block">
<div class="container">
<el-row>
<el-col :md="16" :xs="24" class="preview">
@@ -134,28 +126,38 @@
<el-col :md="8" :xs="24" class="info">
<h2 class="title">{{ $t('index.title.qrart') }}</h2>
<p class="subtitle">{{ $t('index.subtitle.qrart') }}</p>
<el-button type="primary" round class="btn-try">
<el-button
type="primary"
round
class="btn-try"
@click="
$router.push({
path: '/qrart'
})
"
>
{{ $t('index.button.try') }}
</el-button>
</el-col>
</el-row>
</div>
</div>
<div
id="suno"
class="block"
@click="
$router.push({
path: '/suno'
})
"
>
<div v-if="site?.features?.suno?.enabled" id="suno" class="block">
<div class="container">
<el-row>
<el-col :md="8" :xs="24" class="info">
<h2 class="title">{{ $t('index.title.suno') }}</h2>
<p class="subtitle">{{ $t('index.subtitle.suno') }}</p>
<el-button type="primary" round class="btn-try">
<el-button
type="primary"
round
class="btn-try"
@click="
$router.push({
path: '/suno'
})
"
>
{{ $t('index.button.try') }}
</el-button>
</el-col>
@@ -166,15 +168,7 @@
</el-row>
</div>
</div>
<div
id="luma"
class="block"
@click="
$router.push({
path: '/luma'
})
"
>
<div v-if="site?.features?.luma?.enabled" id="luma" class="block">
<div class="container">
<el-row>
<el-col :md="16" :xs="24" class="preview">
@@ -184,7 +178,16 @@
<el-col :md="8" :xs="24" class="info">
<h2 class="title">{{ $t('index.title.luma') }}</h2>
<p class="subtitle">{{ $t('index.subtitle.luma') }}</p>
<el-button type="primary" round class="btn-try">
<el-button
type="primary"
round
class="btn-try"
@click="
$router.push({
path: '/luma'
})
"
>
{{ $t('index.button.try') }}
</el-button>
</el-col>
@@ -381,7 +384,8 @@ export default defineComponent({
color: var(--el-text-color-primary);
}
.subtitle {
font-size: 24px;
font-size: 20px;
padding: 0 20px;
color: var(--el-text-color-secondary);
}
.btn-try {
@@ -395,7 +399,7 @@ export default defineComponent({
}
#banner {
padding: 100px 0;
padding: 50px 0;
.left {
.info {
@media (max-width: 767px) {
@@ -474,14 +478,14 @@ export default defineComponent({
#introduction,
#midjourney,
#suno {
background: linear-gradient(90deg, #ebe7ff, #f2faff 53%, #e0f5fe);
background: #f5f7fa;
}
.dark {
#introduction,
#midjourney,
#suno {
background-image: linear-gradient(270deg, #277186 0%, #330867 100%);
background: #1e1e1e;
}
}