首页更新
This commit is contained in:
parent
64893f1a49
commit
15bd988891
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user