首页更新

This commit is contained in:
hrx 2026-07-06 10:52:25 +08:00
parent 64893f1a49
commit 15bd988891
3 changed files with 74 additions and 27 deletions

View File

@ -12,7 +12,7 @@
<img src="./img/ocai.jpg" alt="在线咨询"> <img src="./img/ocai.jpg" alt="在线咨询">
<span class="consult-badge"></span> <span class="consult-badge"></span>
</div> </div>
<span class="floating-consult-text">在线咨询</span> <!-- <span class="floating-consult-text">在线咨询</span> -->
</a> </a>
</div> </div>
</div> </div>
@ -899,16 +899,17 @@ export default {
} }
.floating-consult-btn.primary { .floating-consult-btn.primary {
width: 56px; width: 80px;
height: 80px;
padding: 12px 8px; padding: 12px 8px;
border-radius: 28px; border-radius: 50%;
gap: 8px; gap: 8px;
} }
.floating-consult-icon { .floating-consult-icon {
position: relative; position: relative;
width: 36px; width: 100%;
height: 36px; height: 100%;
} }
.floating-consult-icon img { .floating-consult-icon img {

View File

@ -15,6 +15,7 @@
<button type="button" class="nav-item" :class="{ active: isActiveHome }" @click.stop="goHome">{{ $t('topbar.home') }}</button> <button type="button" class="nav-item" :class="{ active: isActiveHome }" @click.stop="goHome">{{ $t('topbar.home') }}</button>
<button <button
type="button" type="button"
ref="productTrigger"
class="nav-item nav-item--product" class="nav-item nav-item--product"
:class="{ active: isShowPanel }" :class="{ active: isShowPanel }"
@mouseenter="sildeIn(product_service)" @mouseenter="sildeIn(product_service)"
@ -48,14 +49,14 @@
> >
{{ $t('topbar.login') }} {{ $t('topbar.login') }}
</button> </button>
<button <!-- <button
v-if="!loginState" v-if="!loginState"
type="button" type="button"
class="register-btn" class="register-btn"
@click="$router.push('/registrationPage')" @click="$router.push('/registrationPage')"
> >
{{ $t('topbar.registerNow') }} {{ $t('topbar.registerNow') }}
</button> </button> -->
<el-dropdown <el-dropdown
v-if="loginState" v-if="loginState"
@ -100,17 +101,25 @@
</div> </div>
</div> </div>
<div v-show="isShowPanel" class="product-panel" @mouseenter="keepPanel" @mouseleave="sildeOut"> <div
ref="productPanel"
v-show="isShowPanel"
class="product-panel product-panel--side-only"
:style="productPanelStyle"
@mouseenter="keepPanel"
@mouseleave="sildeOut"
>
<aside class="product-panel__side"> <aside class="product-panel__side">
<button type="button" class="product-side-item active">精选产品</button>
<button type="button" class="product-side-item" @click="navigateTo('/homePage/opc')">OPC</button> <button type="button" class="product-side-item" @click="navigateTo('/homePage/opc')">OPC</button>
<button type="button" class="product-side-item" @click="goComputeMarket">算力市场</button> <button type="button" class="product-side-item" @click="goComputeMarket">算力市场</button>
<button type="button" class="product-side-item" @click="handleModelSquareClick">Token市集</button> <button type="button" class="product-side-item" @click="handleModelSquareClick">Token市集</button>
<button type="button" class="product-side-item" @click="goYuanjing">元境</button>
<button type="button" class="product-side-item" @click="goTrainPlatform">训推平台</button> <button type="button" class="product-side-item" @click="goTrainPlatform">训推平台</button>
<button type="button" class="product-side-item" @click="goAgentStore">智能体商店</button> <button type="button" class="product-side-item" @click="goAgentStore">智能体商店</button>
<button type="button" class="product-side-item" @click="goSupplySquare">供需广场</button> <button type="button" class="product-side-item" @click="goSupplySquare">供需广场</button>
<button type="button" class="product-side-item" @click="goAbout">关于我们</button>
</aside> </aside>
<div class="product-panel__content"> <!-- <div class="product-panel__content">
<div class="product-panel__head"> <div class="product-panel__head">
<div> <div>
<h3 class="product-panel__title">精选产品</h3> <h3 class="product-panel__title">精选产品</h3>
@ -173,9 +182,9 @@
</button> </button>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<!-- AI咨询弹窗 -->
<div <div
v-show="aiDialogVisible" v-show="aiDialogVisible"
ref="aiChatPanel" ref="aiChatPanel"
@ -248,7 +257,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 消息中心 -->
<message-center <message-center
ref="messageCenter" ref="messageCenter"
:visible.sync="messageCenterVisible" :visible.sync="messageCenterVisible"
@ -315,7 +324,9 @@ export default Vue.extend({
threeData: [], threeData: [],
fourData: [], fourData: [],
product_service: [], product_service: [],
messageCount: 0 messageCount: 0,
productPanelLeft: null,
productPanelTop: 82
} }
}, },
created() { created() {
@ -367,9 +378,12 @@ export default Vue.extend({
document.documentElement.style.backgroundColor = 'transparent'; document.documentElement.style.backgroundColor = 'transparent';
}); });
window.addEventListener('kboss-open-ai-chat', this.handleExternalAIOpen); window.addEventListener('kboss-open-ai-chat', this.handleExternalAIOpen);
window.addEventListener('resize', this.updateProductPanelPosition);
this.$nextTick(this.updateProductPanelPosition)
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('kboss-open-ai-chat', this.handleExternalAIOpen); window.removeEventListener('kboss-open-ai-chat', this.handleExternalAIOpen);
window.removeEventListener('resize', this.updateProductPanelPosition);
this.stopAIPanelDrag() this.stopAIPanelDrag()
}, },
computed: { computed: {
@ -426,9 +440,27 @@ export default Vue.extend({
right: 'auto', right: 'auto',
bottom: 'auto' bottom: 'auto'
} }
},
productPanelStyle() {
if (this.productPanelLeft === null) return {}
return {
left: `${this.productPanelLeft}px`,
top: `${this.productPanelTop}px`
}
} }
}, },
methods: { methods: {
updateProductPanelPosition() {
const trigger = this.$refs.productTrigger
if (!trigger || typeof trigger.getBoundingClientRect !== 'function') return
const rect = trigger.getBoundingClientRect()
const panel = this.$refs.productPanel
const panelWidth = (panel && panel.offsetWidth) || 210
const nextLeft = rect.left + rect.width / 2 - panelWidth / 2
const maxLeft = Math.max(window.innerWidth - panelWidth - 8, 8)
this.productPanelLeft = Math.min(Math.max(nextLeft, 8), maxLeft)
this.productPanelTop = rect.bottom
},
navigateTo(path) { navigateTo(path) {
this.$store.commit('setShowHomeNav', false) this.$store.commit('setShowHomeNav', false)
if (this.$route.path === path) return if (this.$route.path === path) return
@ -914,6 +946,7 @@ export default Vue.extend({
if (this.hideTimer) clearTimeout(this.hideTimer) if (this.hideTimer) clearTimeout(this.hideTimer)
this.showTimer = setTimeout(() => { this.showTimer = setTimeout(() => {
this.$store.commit('setShowHomeNav', true) this.$store.commit('setShowHomeNav', true)
this.$nextTick(this.updateProductPanelPosition)
}, 100) }, 100)
}, },
sildeOut() { sildeOut() {
@ -1113,20 +1146,19 @@ export default Vue.extend({
} }
.login-btn { .login-btn {
height: 36px; height: 48px;
width: 100px;
padding: 0; padding: 0;
border: 0; border: 0;
border-radius: 99px;
background: transparent; background: transparent;
color: #333; color: #fff;
background-color: #000;
cursor: pointer; cursor: pointer;
font-size: 16px !important; font-size: 16px !important;
font-weight: 700; font-weight: 700;
// line-height: 36px // line-height: 36px
transition: color 0.2s ease; transition: color 0.2s ease;
&:hover {
color: #1E6FFF;
}
} }
.register-btn { .register-btn {
@ -1187,11 +1219,28 @@ export default Vue.extend({
border-top: 1px solid rgba(15, 23, 42, 0.04); border-top: 1px solid rgba(15, 23, 42, 0.04);
} }
.product-panel--side-only {
right: auto;
width: 210px;
min-height: auto;
background: transparent;
backdrop-filter: none;
border-top: 0;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.product-panel__side { .product-panel__side {
width: 210px; width: 210px;
padding: 20px 16px; padding: 20px 16px;
background: linear-gradient(180deg, #f4f8ff 0%, #f8fafc 100%); background: #fff;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 6px;
} }
.product-side-item { .product-side-item {
@ -1209,8 +1258,7 @@ export default Vue.extend({
text-align: left; text-align: left;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover, &:hover {
&.active {
background: #e8f1ff; background: #e8f1ff;
color: #1e6fff; color: #1e6fff;
font-weight: 600; font-weight: 600;

View File

@ -122,7 +122,7 @@
<div class="news-inner"> <div class="news-inner">
<div class="news-head"> <div class="news-head">
<h2 class="section-title">{{ $t('home.companyNewsTitle') }}</h2> <h2 class="section-title">{{ $t('home.companyNewsTitle') }}</h2>
<button type="button" class="case-more" @click="goNews">{{ $t('home.viewMore') }}</button> <button type="button" class="case-more">{{ $t('home.viewMore') }}</button>
</div> </div>
<div class="news-list"> <div class="news-list">
@ -387,9 +387,7 @@ export default {
goCases() { goCases() {
this.navigateTo('/homePage/agentStore') this.navigateTo('/homePage/agentStore')
}, },
goNews() {
this.navigateTo('/homePage/new')
},
nextSolution() { nextSolution() {
this.switchSolution(1) this.switchSolution(1)