首页更新

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="在线咨询">
<span class="consult-badge"></span>
</div>
<span class="floating-consult-text">在线咨询</span>
<!-- <span class="floating-consult-text">在线咨询</span> -->
</a>
</div>
</div>
@ -899,16 +899,17 @@ export default {
}
.floating-consult-btn.primary {
width: 56px;
width: 80px;
height: 80px;
padding: 12px 8px;
border-radius: 28px;
border-radius: 50%;
gap: 8px;
}
.floating-consult-icon {
position: relative;
width: 36px;
height: 36px;
width: 100%;
height: 100%;
}
.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"
ref="productTrigger"
class="nav-item nav-item--product"
:class="{ active: isShowPanel }"
@mouseenter="sildeIn(product_service)"
@ -48,14 +49,14 @@
>
{{ $t('topbar.login') }}
</button>
<button
<!-- <button
v-if="!loginState"
type="button"
class="register-btn"
@click="$router.push('/registrationPage')"
>
{{ $t('topbar.registerNow') }}
</button>
</button> -->
<el-dropdown
v-if="loginState"
@ -100,17 +101,25 @@
</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">
<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="goComputeMarket">算力市场</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="goAgentStore">智能体商店</button>
<button type="button" class="product-side-item" @click="goSupplySquare">供需广场</button>
<button type="button" class="product-side-item" @click="goAbout">关于我们</button>
</aside>
<div class="product-panel__content">
<!-- <div class="product-panel__content">
<div class="product-panel__head">
<div>
<h3 class="product-panel__title">精选产品</h3>
@ -173,9 +182,9 @@
</button>
</div>
</div>
</div>
</div> -->
</div>
<!-- AI咨询弹窗 -->
<div
v-show="aiDialogVisible"
ref="aiChatPanel"
@ -248,7 +257,7 @@
</div>
</div>
</div>
<!-- 消息中心 -->
<message-center
ref="messageCenter"
:visible.sync="messageCenterVisible"
@ -315,7 +324,9 @@ export default Vue.extend({
threeData: [],
fourData: [],
product_service: [],
messageCount: 0
messageCount: 0,
productPanelLeft: null,
productPanelTop: 82
}
},
created() {
@ -367,9 +378,12 @@ export default Vue.extend({
document.documentElement.style.backgroundColor = 'transparent';
});
window.addEventListener('kboss-open-ai-chat', this.handleExternalAIOpen);
window.addEventListener('resize', this.updateProductPanelPosition);
this.$nextTick(this.updateProductPanelPosition)
},
beforeDestroy() {
window.removeEventListener('kboss-open-ai-chat', this.handleExternalAIOpen);
window.removeEventListener('resize', this.updateProductPanelPosition);
this.stopAIPanelDrag()
},
computed: {
@ -426,9 +440,27 @@ export default Vue.extend({
right: 'auto',
bottom: 'auto'
}
},
productPanelStyle() {
if (this.productPanelLeft === null) return {}
return {
left: `${this.productPanelLeft}px`,
top: `${this.productPanelTop}px`
}
}
},
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) {
this.$store.commit('setShowHomeNav', false)
if (this.$route.path === path) return
@ -914,6 +946,7 @@ export default Vue.extend({
if (this.hideTimer) clearTimeout(this.hideTimer)
this.showTimer = setTimeout(() => {
this.$store.commit('setShowHomeNav', true)
this.$nextTick(this.updateProductPanelPosition)
}, 100)
},
sildeOut() {
@ -1113,20 +1146,19 @@ export default Vue.extend({
}
.login-btn {
height: 36px;
height: 48px;
width: 100px;
padding: 0;
border: 0;
border-radius: 99px;
background: transparent;
color: #333;
color: #fff;
background-color: #000;
cursor: pointer;
font-size: 16px !important;
font-weight: 700;
// line-height: 36px
transition: color 0.2s ease;
&:hover {
color: #1E6FFF;
}
}
.register-btn {
@ -1187,11 +1219,28 @@ export default Vue.extend({
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 {
width: 210px;
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;
display: flex;
flex-direction: column;
gap: 6px;
}
.product-side-item {
@ -1209,8 +1258,7 @@ export default Vue.extend({
text-align: left;
transition: all 0.2s ease;
&:hover,
&.active {
&:hover {
background: #e8f1ff;
color: #1e6fff;
font-weight: 600;

View File

@ -122,7 +122,7 @@
<div class="news-inner">
<div class="news-head">
<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 class="news-list">
@ -387,9 +387,7 @@ export default {
goCases() {
this.navigateTo('/homePage/agentStore')
},
goNews() {
this.navigateTo('/homePage/new')
},
nextSolution() {
this.switchSolution(1)