yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

uptada

Browse Source
This commit is contained in:
hrx 2025-09-29 18:01:09 +08:00
parent 0fbccbea23
commit a14b81318b
6 changed files with 495 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
f/web-kboss/src/router/index.js
View File

@ -314,7 +314,7 @@ export const asyncRoutes = [
children: [ children: [
{ {
path: "overview", path: "overview",
component: () => import('@/views/product/productHome/productIndex/index.vue'), component: () => import('../views/customer/orderManagement/index.vue'),
name: 'ProductOverview', name: 'ProductOverview',
meta: { meta: {
title: "资源概览", title: "资源概览",

36
f/web-kboss/src/utils/language.js Normal file
View File

@ -0,0 +1,36 @@
// src/utils/language.js
import Vue from 'vue'
// 创建一个事件总线用于组件通信
export const languageBus = new Vue()
// 语言状态管理
export const languageStore = {
state: {
language: 'zh'
},
setLanguage(lang) {
if (lang === 'zh' || lang === 'en') {
this.state.language = lang
localStorage.setItem('language', lang)
// 触发语言改变事件
languageBus.$emit('language-changed', lang)
}
},
getLanguage() {
return this.state.language
},
init() {
const savedLanguage = localStorage.getItem('language')
if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) {
this.state.language = savedLanguage
}
return this.state.language
}
}
// 初始化
languageStore.init()

3
f/web-kboss/src/views/customer/orderDetil/index.vue
View File

@ -452,7 +452,7 @@ export default {
padding-top: 25px; padding-top: 25px;
//margin-top: -20px; //margin-top: -20px;
display: flex; display: flex;
justify-content: flex-start; justify-content: center ;
align-items: center; align-items: center;
//margin-right: 25%; //margin-right: 25%;
list-style: none; list-style: none;
@ -516,6 +516,7 @@ export default {
} }
.itemMobile { .itemMobile {
height: auto !important; height: auto !important;
} }
} }

134
f/web-kboss/src/views/customer/orderManagement/index.vue
View File

@ -5,25 +5,25 @@
<el-row :span="24"> <el-row :span="24">
<el-col :span="24" class="search"> <el-col :span="24" class="search">
<el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择" <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
size="small"> size="small">
<!-- <el-option label="全部" value="all" /> --> <!-- <el-option label="全部" value="all" /> -->
<el-option label="订单号" value="id"/>
<el-option label="订单日期" value="order_date"/> <el-option label="订单号" value="id" />
<el-option label="订单状态:未支付" value="0"/> <el-option label="订单日期" value="order_date" />
<el-option label="订单状态:已支付" value="1"/> <el-option label="订单状态:未支付" value="0" />
<el-option label="订单状态:已取消" value="3"/> <el-option label="订单状态:已支付" value="1" />
<el-option label="订单状态:已取消" value="3" />
</el-select> </el-select>
<el-input size="small" v-show="this.select=='id'" placeholder="请输入内容" class="input-with-select" <el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select" @input="input"
@input="input" v-model="searchValue" clearable></el-input> v-model="searchValue" clearable></el-input>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24" style="margin-top:5px;"> <el-col :span="24" style="margin-top:5px;">
<div v-if="select=='order_date'"> <div v-if="select == 'order_date'">
<div class="datePicker"> <div class="datePicker">
<el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至" <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
value-format="yyyy-MM-dd">
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>
@ -41,34 +41,32 @@
<el-row :span="24"> <el-row :span="24">
<el-col :span="24" class="search" style="display: flex;justify-content: flex-start;align-items: center"> <el-col :span="24" class="search" style="display: flex;justify-content: flex-start;align-items: center">
<el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择" <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
width="130px" size="small"> width="130px" size="small">
<!-- <el-option label="全部" value="all" /> --> <!-- <el-option label="全部" value="all" /> -->
<el-option label="订单号" value="id"/> <el-option label="订单号" value="id" />
<el-option label="订单日期" value="order_date"/> <el-option label="订单日期" value="order_date" />
<el-option label="订单状态:未支付" value="0"/> <el-option label="订单状态:未支付" value="0" />
<el-option label="订单状态:已支付" value="1"/> <el-option label="订单状态:已支付" value="1" />
<el-option label="订单状态:已取消" value="3"/> <el-option label="订单状态:已取消" value="3" />
</el-select> </el-select>
<el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select=='id'" <el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select == 'id'" placeholder="请输入内容"
placeholder="请输入内容" class="input-with-select" @input="input" v-model="searchValue" class="input-with-select" @input="input" v-model="searchValue" clearable></el-input>
clearable></el-input> <div v-if="select == 'order_date'">
<div v-if="select=='order_date'">
<div style="display:flex;margin-left:10px;"> <div style="display:flex;margin-left:10px;">
<el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至" <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
value-format="yyyy-MM-dd">
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>
<el-button type="primary" style="padding: 0 5px;height: 30px; margin-left:10px;" class="searchSelectIcon" <el-button type="primary" style="padding: 0 5px;height: 30px; margin-left:10px;" class="searchSelectIcon"
@click="set">重置 @click="set">重置
</el-button> </el-button>
<span <span
style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额: style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额:
<div style="width: 250px;line-height: 36px"> <div style="width: 250px;line-height: 36px">
<el-skeleton animated v-if="all_price_show" rows="2"/> <el-skeleton animated v-if="all_price_show" rows="2" />
<span v-else> ¥ {{ all_price }}</span> <span v-else> ¥ {{ all_price }}</span>
</div> </div>
</span> </span>
</el-col> </el-col>
@ -76,23 +74,31 @@
</el-card> </el-card>
<!-- 表格 --> <!-- 表格 -->
<el-card class="orderList"> <el-card class="orderList">
<el-table border :data="tableData" class="table" height="calc(100vh - 200px)" v-loading="all_price_show"> <el-table border :data="tableData" class="table" height="calc(100vh - 280px)" v-loading="all_price_show">
<el-table-column min-width="200" align="center" header-align="center" prop="id" <!-- 序号 -->
label="订单号"></el-table-column> <el-table-column label="序号" width="80">
<el-table-column min-width="80" align="center" header-align="center" label="原价"> <template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<!-- 订单名称 -->
<el-table-column align="center" min-width="180" header-align="center" prop="source" label="产品名称">
</el-table-column>
<el-table-column align="center" min-width="300" header-align="center" prop="id" label="订单号"></el-table-column>
<el-table-column align="center" header-align="center" label="订单原价">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <div style="padding-left: 35px">--> <!-- <div style="padding-left: 35px">-->
￥{{ scope.row.countprice }} ￥{{ scope.row.countprice }}
<!-- </div>--> <!-- </div>-->
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="80" align="center" header-align="center" label="折后实付价"> <el-table-column align="center" header-align="center" label="订单折后价">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.amount ? "￥" + scope.row.amount : "-" }} {{ scope.row.amount ? "￥" + scope.row.amount : "-" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="80" align="center" header-align="center" label="订单类型"> <el-table-column align="center" header-align="center" label="订单类型">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- {{ orderTypeMap(scope.row.business_op) }}--> <!-- {{ orderTypeMap(scope.row.business_op) }}-->
<el-tag :style="{ padding: '0 8px' }" :type="orderTypeMap(scope.row.business_op).type"> <el-tag :style="{ padding: '0 8px' }" :type="orderTypeMap(scope.row.business_op).type">
@ -100,14 +106,13 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="150" align="center" header-align="center" prop="order_date"
label="订单日期"></el-table-column> <el-table-column align="center" header-align="center" label="订单状态">
<el-table-column min-width="150" align="center" header-align="center" label="订单状态">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.order_status==='0'" style="padding: 0 5px" type="warning" effect="dark"> <el-tag v-if="scope.row.order_status === '0'" style="padding: 0 5px" type="warning" effect="dark">
{{ getResult(scope.row.order_status) }} {{ getResult(scope.row.order_status) }}
</el-tag> </el-tag>
<el-tag v-else-if="scope.row.order_status==='1'" style="padding: 0 5px" type="success" effect="dark"> <el-tag v-else-if="scope.row.order_status === '1'" style="padding: 0 5px" type="success" effect="dark">
{{ getResult(scope.row.order_status) }} {{ getResult(scope.row.order_status) }}
</el-tag> </el-tag>
<el-tag v-else style="padding: 0 5px" type="info" effect="dark"> <el-tag v-else style="padding: 0 5px" type="info" effect="dark">
@ -115,10 +120,11 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" header-align="center" prop="order_date" label="订单日期"></el-table-column>
<el-table-column align="center" header-align="center" label="操作"> <el-table-column align="center" header-align="center" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="small" v-if="scope.row.order_status==='0'" type="primary" @click="orderDetails(scope.row)" <el-button size="small" v-if="scope.row.order_status === '0'" type="primary" @click="orderDetails(scope.row)"
style="padding: 8px 15px">去支付 style="padding: 8px 15px">去支付
</el-button> </el-button>
<el-button size="small" v-else type="primary" @click="orderDetails(scope.row)" style="padding: 8px"> <el-button size="small" v-else type="primary" @click="orderDetails(scope.row)" style="padding: 8px">
查看详情 查看详情
@ -126,16 +132,25 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分 页-->
<div class="page">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</el-card> </el-card>
</div> </div>
</template> </template>
<script> <script>
import {getOrderAPI} from "@/api/product/product"; import { getOrderAPI } from "@/api/product/product";
export default { export default {
data() { data() {
return { return {
all_price_show: true,//金额显示骨架屏 all_price_show: true,//金额显示骨架屏
// 获取用户代理字P串 // 获取用户代理字P串
userAgent: window.navigator.userAgent, userAgent: window.navigator.userAgent,
@ -197,17 +212,18 @@ export default {
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent); this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
}, },
methods: { methods: {
// 订单类型映射
orderTypeMap(type) { orderTypeMap(type) {
switch (type) { switch (type) {
case 'BUY_REVERSE': case 'BUY_REVERSE':
// return <el-tag type="danger"></el-tag>; // return <el-tag type="danger"></el-tag>;
return {text: "退款", type: "danger"}; return { text: "退款", type: "danger" };
case 'RENEW': case 'RENEW':
return {text: "续费", type: "primary"}; return { text: "续费", type: "primary" };
case 'BUY': case 'BUY':
return {text: "购买", type: "success"}; return { text: "购买", type: "success" };
default: default:
return {text: "-", type: "primary"}; return { text: "-", type: "primary" };
} }
}, },
getOrder(data) {//获取订单 getOrder(data) {//获取订单
@ -263,7 +279,7 @@ export default {
this.getOrder(e) this.getOrder(e)
}, },
orderDetails(row) { //查看订单详情 orderDetails(row) { //查看订单详情
this.$router.push({name: "orderDetil", query: {id: row.id}}); this.$router.push({ name: "orderDetil", query: { id: row.id } });
}, },
getResult(data) { getResult(data) {
switch (data) { switch (data) {
@ -280,24 +296,29 @@ export default {
} }
}, },
}, },
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.orderManagement { .orderManagement {
height: 100%; height: calc(100vh - 180px);
.mobileCaed { .mobileCaed {
height: 100px; height: 100px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.search { .search {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -353,8 +374,8 @@ export default {
} }
.orderList { .orderList {
margin-top: 5px; margin-top: 10px;
height: calc(100vh - 180px); // height: calc(100vh - 180px);
.table { .table {
width: 100%; width: 100%;
@ -362,6 +383,10 @@ export default {
} }
} }
} }
.page{
text-align: center;
margin: 20px;
}
</style> </style>
<style> <style>
.el-table .el-table__header { .el-table .el-table__header {
@ -371,4 +396,5 @@ export default {
::v-deep .el-tag { ::v-deep .el-tag {
padding: 0 8px !important; padding: 0 8px !important;
} }
</style> </style>

24
f/web-kboss/src/views/homePage/components/topBox/index.vue
View File

@ -268,6 +268,9 @@ import { reqApplyChannel } from "@/api/customer/channel";
import store from "@/store"; import store from "@/store";
// 导入工具函数 // 导入工具函数
import { getHomePath } from '@/views/setting/tools' import { getHomePath } from '@/views/setting/tools'
// 导入语言管理
import { languageStore, languageBus } from '@/utils/language'
export default Vue.extend({ export default Vue.extend({
name: "TopBox", name: "TopBox",
data() { data() {
@ -287,7 +290,7 @@ export default Vue.extend({
threeData: [], // 三级菜单数据 threeData: [], // 三级菜单数据
fourData: [], // 四级菜单数据（未使用） fourData: [], // 四级菜单数据（未使用）
product_service: [], // 产品服务数据 product_service: [], // 产品服务数据
language: 'zh', // 默认语言 language: languageStore.getLanguage(), // 从共享状态获取语言
translations: { translations: {
zh: { zh: {
home: '首页', home: '首页',
@ -336,11 +339,10 @@ export default Vue.extend({
// 初始化组件 // 初始化组件
this.init() this.init()
// 尝试从本地存储获取语言设置 // 监听语言变化事件
const savedLanguage = localStorage.getItem('language'); languageBus.$on('language-changed', (lang) => {
if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) { this.language = lang
this.language = savedLanguage; })
}
}, },
mounted() { mounted() {
// 组件挂载时，从sessionStorage获取用户名 // 组件挂载时，从sessionStorage获取用户名
@ -361,6 +363,10 @@ export default Vue.extend({
// 初始化导航数据 // 初始化导航数据
this.initData() this.initData()
}, },
beforeDestroy() {
// 移除事件监听
languageBus.$off('language-changed')
},
computed: { computed: {
// 判断当前是否为ncmatchHome页面 // 判断当前是否为ncmatchHome页面
isNcmatchHome() { isNcmatchHome() {
@ -404,10 +410,10 @@ export default Vue.extend({
this.$router.push('/operation/supplierManagement') this.$router.push('/operation/supplierManagement')
} }
}, },
// 切换语言 // 切换语言 - 修改为使用共享状态
toggleLanguage() { toggleLanguage() {
this.language = this.language === 'zh' ? 'en' : 'zh'; const newLanguage = this.language === 'zh' ? 'en' : 'zh';
localStorage.setItem('language', this.language); languageStore.setLanguage(newLanguage)
}, },
// 初始化Logo信息 // 初始化Logo信息
init() { init() {

468
f/web-kboss/src/views/homePage/mainPage/index.vue
View File

@ -3,7 +3,7 @@
<!-- 粘性导航组件 --> <!-- 粘性导航组件 -->
<HomePageSticky <HomePageSticky
ref="stickyNav" ref="stickyNav"
:sections="stickySections" :sections="getStickySections()"
@navigate="handleNavigation" @navigate="handleNavigation"
:show-threshold-element-selector="'.tagUl'" :show-threshold-element-selector="'.tagUl'"
:show-offset="0" :show-offset="0"
@ -14,30 +14,30 @@
<div class="centerBox"> <div class="centerBox">
<span style="margin-top: 100px" class="title"> <span style="margin-top: 100px" class="title">
<span v-if="JSON.stringify(logoInfoNew) !== '{}'" class="leftText"> <span v-if="JSON.stringify(logoInfoNew) !== '{}'" class="leftText">
{{ logoInfoNew.home.bannerTitle || "" }} {{ getBannerTitle() }}
</span> </span>
<span class="rightText"> 您身边的AI管家</span> <span class="rightText"> {{ translations[language].aiButler }}</span>
</span> </span>
<!-- 当滚动到这个元素位置时，显示粘性导航 --> <!-- 当滚动到这个元素位置时，显示粘性导航 -->
<ul style="margin-top: 50px" class="tagUl"> <ul style="margin-top: 50px" class="tagUl">
<li>全 球 领 先 的 AI 服 务 运 营 商</li> <li>{{ translations[language].slogan }}</li>
</ul> </ul>
</div> </div>
<div style="cursor: pointer" class="tag"> <div style="cursor: pointer" class="tag">
<span @click="openTalk" class="product"> <span @click="openTalk" class="product">
<span class="productName">4090 裸金属</span> <span class="productName">{{ translations[language].product1Name }}</span>
<span class="price"> <span class="price">
<span class="smallText">￥</span> <span class="smallText">￥</span>
<span class="bigText">6000</span> <span class="bigText">6000</span>
<span class="smallText">/台/月</span> <span class="smallText">/{{ translations[language].month }}</span>
</span> </span>
</span> </span>
<span @click="goBaiduFn" style="top: 180px" class="product"> <span @click="goBaiduFn" style="top: 180px" class="product">
<span class="productName">云资源</span> <span class="productName">{{ translations[language].product2Name }}</span>
<span class="price"> <span class="price">
<span style="margin-top: 15px" class="smallText"> <span style="margin-top: 15px" class="smallText">
直降 {{ translations[language].discount }}
<span style="font-size: 30px; display: inline-block" class="bigText">20%</span> <span style="font-size: 30px; display: inline-block" class="bigText">20%</span>
</span> </span>
</span> </span>
@ -50,18 +50,18 @@
<div class="bg"></div> <div class="bg"></div>
<div class="itemTitle"> <div class="itemTitle">
<span class="topText"> <span class="topText">
<span>云筑</span> <span>{{ translations[language].baseTitle1 }}</span>
<span class="commonTextColor">企业基座</span> <span class="commonTextColor">{{ translations[language].baseTitle2 }}</span>
</span> </span>
<span class="bottomText">多云融合 让上云更简单</span> <span class="bottomText">{{ translations[language].baseSubtitle }}</span>
</div> </div>
<ul class="myTab"> <ul class="myTab">
<li <li
v-for="menu in baseMenu" v-for="menu in getBaseMenu()"
:class="currentBaseMenu === menu.id ? 'activeMenu' : ''" :class="currentBaseMenu === menu.id ? 'activeMenu' : ''"
@click="clickBaseMenu(menu)" @click="clickBaseMenu(menu)"
:key="menu.name" :key="menu.id"
> >
<img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" /> <img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
{{ menu.name }} {{ menu.name }}
@ -74,10 +74,10 @@
:style="{ backgroundImage: 'url(' + baseItem.bgImgUrl + ')' }" :style="{ backgroundImage: 'url(' + baseItem.bgImgUrl + ')' }"
class="itemContent" class="itemContent"
> >
<span class="title">{{ baseItem.title }}</span> <span class="title">{{ getBaseItemTitle() }}</span>
<p style="line-height: 2" class="description">{{ baseItem.description }}</p> <p style="line-height: 2" class="description">{{ getBaseItemDescription() }}</p>
<ul class="itemContentTag"> <ul class="itemContentTag">
<li v-for="(item, index) in baseItem.list" :key="index"> <li v-for="(item, index) in getBaseItemList()" :key="index">
<img :src="item.icon" alt="" /> <img :src="item.icon" alt="" />
<span <span
v-if="item.name" v-if="item.name"
@ -95,16 +95,16 @@
</span> </span>
<div class="twoBtn"> <div class="twoBtn">
<div class="butStyle" @click="goBaiduFn(baseItem)"> <div class="butStyle" @click="goBaiduFn(baseItem)">
立即购买 {{ translations[language].buyNow }}
<span style="display: inline-block; margin-left: 5px; color: white">></span> <span style="display: inline-block; margin-left: 5px; color: white">></span>
</div> </div>
<div v-show="false" class="lookDetailStyle"> <div v-show="false" class="lookDetailStyle">
查看详情&nbsp;&nbsp;> {{ translations[language].viewDetails }}&nbsp;&nbsp;>
<span style="display: inline-block; margin-left: 5px;"></span> <span style="display: inline-block; margin-left: 5px;"></span>
</div> </div>
</div> </div>
<span class="discountStyle"> <span class="discountStyle">
<span style="font-size: 18px">官网折扣</span> <span style="font-size: 18px">{{ translations[language].officialDiscount }}</span>
<span style="font-size: 24px">{{ baseItem.discount }}折</span> <span style="font-size: 24px">{{ baseItem.discount }}折</span>
</span> </span>
</div> </div>
@ -115,18 +115,18 @@
<div class="bg"></div> <div class="bg"></div>
<div class="itemTitle"> <div class="itemTitle">
<span class="topText"> <span class="topText">
<span>智算</span> <span>{{ translations[language].suanTitle1 }}</span>
<span class="commonTextColor">未来征程</span> <span class="commonTextColor">{{ translations[language].suanTitle2 }}</span>
</span> </span>
<span class="bottomText">多元异构 灵活短租</span> <span class="bottomText">{{ translations[language].suanSubtitle }}</span>
</div> </div>
<ul class="myTab"> <ul class="myTab">
<li <li
v-for="menu in suanMenu" v-for="menu in getSuanMenu()"
:class="currentSuanMenu === menu.id ? 'activeMenu' : ''" :class="currentSuanMenu === menu.id ? 'activeMenu' : ''"
@click="clickSuanMenu(menu)" @click="clickSuanMenu(menu)"
:key="menu.name" :key="menu.id"
> >
<img :src="currentSuanMenu === menu.id ? menu.icon : menu.activeIcon" alt="" /> <img :src="currentSuanMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
{{ menu.name }} {{ menu.name }}
@ -135,9 +135,9 @@
<transition name="slide-fade" mode="out-in"> <transition name="slide-fade" mode="out-in">
<div :key="currentSuanMenu" class="itemContentSuan"> <div :key="currentSuanMenu" class="itemContentSuan">
<span class="title">{{ suanItem.title }}</span> <span class="title">{{ getSuanItemTitle() }}</span>
<ul class="itemContentTag"> <ul class="itemContentTag">
<li v-for="(item, index) in suanItem.list" :key="index"> <li v-for="(item, index) in getSuanItemList()" :key="index">
<img :src="item.icon" alt="" /> <img :src="item.icon" alt="" />
<span <span
v-if="item.name" v-if="item.name"
@ -153,16 +153,16 @@
<span style="font-weight: bold;">￥</span> <span style="font-weight: bold;">￥</span>
<span style="font-weight: bold; font-size: 48px">{{ suanItem.price }}</span> <span style="font-weight: bold; font-size: 48px">{{ suanItem.price }}</span>
<span style="color: #7a82a0">/{{ suanItem.price_unit }}</span> <span style="color: #7a82a0">/{{ suanItem.price_unit }}</span>
<span style="color: #222f60">（可短租）</span> <span style="color: #222f60">（{{ translations[language].shortRent }}）</span>
</span> </span>
<div style="margin-top: 10px !important;" class="twoBtn"> <div style="margin-top: 10px !important;" class="twoBtn">
<div class="butStyle" @click="openTalk"> <div class="butStyle" @click="openTalk">
立即咨询 {{ translations[language].consultNow }}
<span style="display: inline-block; margin-left: 5px; color: white">></span> <span style="display: inline-block; margin-left: 5px; color: white">></span>
</div> </div>
<div v-show="false" class="lookDetailStyle"> <div v-show="false" class="lookDetailStyle">
查看详情&nbsp;&nbsp;> {{ translations[language].viewDetails }}&nbsp;&nbsp;>
<span style="display: inline-block; margin-left: 5px;"></span> <span style="display: inline-block; margin-left: 5px;"></span>
</div> </div>
</div> </div>
@ -174,17 +174,17 @@
<div class="bg"></div> <div class="bg"></div>
<div class="itemTitle"> <div class="itemTitle">
<span class="topText"> <span class="topText">
<span>网织</span> <span>{{ translations[language].netTitle1 }}</span>
<span class="commonTextColor">智能经纬</span> <span class="commonTextColor">{{ translations[language].netTitle2 }}</span>
</span> </span>
<span class="bottomText">云算网融合 让连接更简单</span> <span class="bottomText">{{ translations[language].netSubtitle }}</span>
</div> </div>
<ul class="myTab"> <ul class="myTab">
<li <li
v-for="menu in netMenu" v-for="menu in getNetMenu()"
:class="currentNetMenu === menu.id ? 'activeMenu' : ''" :class="currentNetMenu === menu.id ? 'activeMenu' : ''"
@click="clickNetMenu(menu)" @click="clickNetMenu(menu)"
:key="menu.name" :key="menu.id"
> >
<img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" /> <img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
{{ menu.name }} {{ menu.name }}
@ -193,29 +193,29 @@
<transition name="slide-fade" mode="out-in"> <transition name="slide-fade" mode="out-in">
<div :key="currentNetMenu" class="itemContentNet"> <div :key="currentNetMenu" class="itemContentNet">
<span style="margin-bottom: 15px" class="title">{{ netItem.title }}</span> <span style="margin-bottom: 15px" class="title">{{ getNetItemTitle() }}</span>
<p style="line-height: 2; margin-bottom: 15px" class="description"> <p style="line-height: 2; margin-bottom: 15px" class="description">
{{ netItem.description }} {{ getNetItemDescription() }}
</p> </p>
<span class="subTitle">产品优势</span> <span class="subTitle">{{ translations[language].productAdvantage }}</span>
<ul class="itemContentTag"> <ul class="itemContentTag">
<li v-for="(item, index) in netItem.advantageList" :key="index"> <li v-for="(item, index) in getNetAdvantageList()" :key="index">
<img :src="item.icon" alt="" /> <img :src="item.icon" alt="" />
<span style="width: fit-content !important;" class="tagTitle">{{ item.name }}</span> <span style="width: fit-content !important;" class="tagTitle">{{ item.name }}</span>
<span class="tagContent">{{ item.content }}</span> <span class="tagContent">{{ item.content }}</span>
</li> </li>
</ul> </ul>
<span class="subTitle">应用场景</span> <span class="subTitle">{{ translations[language].applicationScenario }}</span>
<ul class="netTagUl"> <ul class="netTagUl">
<li v-for="(i, d) in netItem.tagList" :key="d">{{ i.name }}</li> <li v-for="(i, d) in getNetTagList()" :key="d">{{ i.name }}</li>
</ul> </ul>
<div class="twoBtn"> <div class="twoBtn">
<div @click="openTalk" class="butStyle"> <div @click="openTalk" class="butStyle">
立即咨询 {{ translations[language].consultNow }}
<span style="display: inline-block; margin-left: 5px; color: white">></span> <span style="display: inline-block; margin-left: 5px; color: white">></span>
</div> </div>
<div @click="goDetail(netItem.id)" class="lookDetailStyle"> <div @click="goDetail(netItem.id)" class="lookDetailStyle">
查看详情&nbsp;&nbsp;> {{ translations[language].viewDetails }}&nbsp;&nbsp;>
<span style="display: inline-block; margin-left: 5px;"></span> <span style="display: inline-block; margin-left: 5px;"></span>
</div> </div>
</div> </div>
@ -225,7 +225,7 @@
<div style="margin-top: 80px; margin-bottom: 50px" class="itemTitle"> <div style="margin-top: 80px; margin-bottom: 50px" class="itemTitle">
<span class="topText"> <span class="topText">
<span></span> <span></span>
<span class="commonTextColor">合作伙伴</span> <span class="commonTextColor">{{ translations[language].partners }}</span>
</span> </span>
</div> </div>
<div <div
@ -239,31 +239,31 @@
<div class="bg"></div> <div class="bg"></div>
<div style="margin-top: 140px" class="itemTitle"> <div style="margin-top: 140px" class="itemTitle">
<span class="topText"> <span class="topText">
<span>算力</span> <span>{{ translations[language].resourcesTitle1 }}</span>
<span class="commonTextColor">资源</span> <span class="commonTextColor">{{ translations[language].resourcesTitle2 }}</span>
</span> </span>
</div> </div>
<div class="mapBox"> <div class="mapBox">
<div style="display: flex; justify-content: space-around; width: 100%;"> <div style="display: flex; justify-content: space-around; width: 100%;">
<div class="map"> <div class="map">
<span class="mapItem" style="top: 130px; right: 149px"> <span class="mapItem" style="top: 130px; right: 149px">
<span class="title">北京</span> <span class="title">{{ translations[language].beijing }}</span>
<img src="./img/map.png" alt="" /> <img src="./img/map.png" alt="" />
</span> </span>
<span class="mapItem" style="top: 154px; right: 124px"> <span class="mapItem" style="top: 154px; right: 124px">
<span class="title">天津</span> <span class="title">{{ translations[language].tianjin }}</span>
<img src="./img/map.png" alt="" /> <img src="./img/map.png" alt="" />
</span> </span>
<span class="mapItem" style="top: 278px; right: 310px"> <span class="mapItem" style="top: 278px; right: 310px">
<span class="title">四川</span> <span class="title">{{ translations[language].sichuan }}</span>
<img src="./img/map.png" alt="" /> <img src="./img/map.png" alt="" />
</span> </span>
<span class="mapItem" style="top: 291px; right: 136px"> <span class="mapItem" style="top: 291px; right: 136px">
<span class="title">上海</span> <span class="title">{{ translations[language].shanghai }}</span>
<img src="./img/map.png" alt="" /> <img src="./img/map.png" alt="" />
</span> </span>
<span class="mapItem" style="top: 261px; right: 174px"> <span class="mapItem" style="top: 261px; right: 174px">
<span class="title">江苏</span> <span class="title">{{ translations[language].jiangsu }}</span>
<img src="./img/map.png" alt="" /> <img src="./img/map.png" alt="" />
</span> </span>
</div> </div>
@ -274,7 +274,7 @@
8 8
<span class="mapTag">+</span> <span class="mapTag">+</span>
</span> </span>
<span style="color: #222f60; font-size: 18px; margin-top: 5px">算力中心接入</span> <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].computeCenters }}</span>
</div> </div>
</li> </li>
<li> <li>
@ -283,7 +283,7 @@
2000 2000
<span style="right: -35px" class="mapTag">P+</span> <span style="right: -35px" class="mapTag">P+</span>
</span> </span>
<span style="color: #222f60; font-size: 18px; margin-top: 5px">算力</span> <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].computingPower }}</span>
</div> </div>
</li> </li>
<li> <li>
@ -292,7 +292,7 @@
10 10
<span style="right: -35px" class="mapTag">ms</span> <span style="right: -35px" class="mapTag">ms</span>
</span> </span>
<span style="color: #222f60; font-size: 18px; margin-top: 5px">实时算力响应</span> <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].realTimeResponse }}</span>
</div> </div>
</li> </li>
<li> <li>
@ -301,7 +301,7 @@
100,000 100,000
<span class="mapTag">+</span> <span class="mapTag">+</span>
</span> </span>
<span style="color: #222f60; font-size: 18px; margin-top: 5px">注册用户</span> <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].registeredUsers }}</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -311,7 +311,7 @@
<div class="tiyan"> <div class="tiyan">
<div> <div>
<el-input v-model="phone" placeholder="请输入您的手机号" class="custom-input"> <el-input v-model="phone" :placeholder="translations[language].phonePlaceholder" class="custom-input">
<template #append> <template #append>
<span <span
@click=" @click="
@ -321,7 +321,7 @@
}) })
" "
class="experience-btn" class="experience-btn"
>立即体验</span >{{ translations[language].experienceNow }}</span
> >
</template> </template>
</el-input> </el-input>
@ -336,23 +336,23 @@
:before-close="handleClose" :before-close="handleClose"
width="30%" width="30%"
> >
<span class="title">官方申明</span> <span class="title">{{ translations[language].officialStatement }}</span>
<p>尊敬用户：</p> <p>{{ translations[language].dearUser }}：</p>
<p>您好~~</p> <p>{{ translations[language].greeting }}</p>
<p>本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。</p> <p>{{ translations[language].statement1 }}</p>
<p> <p>
特别说明：<span style="color: #7a82a0 !important;" {{ translations[language].specialNote }}：<span style="color: #7a82a0 !important;"
>云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。</span >{{ translations[language].statement2 }}</span
> >
</p> </p>
<p>请您知悉上述条款并放心进行购买决策，如有任何疑问，可随时联系平台官方客服，我们将为您详细说明。</p> <p>{{ translations[language].statement3 }}</p>
<div style="margin-top: 85px" class="footerBox"> <div style="margin-top: 85px" class="footerBox">
<div class="item"> <div class="item">
<span style="margin-bottom: 10px">客服热线</span> <span style="margin-bottom: 10px">{{ translations[language].customerService }}</span>
<span style="color: #7a82a0 !important;">4006150805</span> <span style="color: #7a82a0 !important;">4006150805</span>
</div> </div>
<div style="margin-right: 50px" class="item"> <div style="margin-right: 50px" class="item">
<span>2025年6月30日</span> <span>{{ translations[language].currentDate }}</span>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
@ -368,6 +368,8 @@ import { mapState } from "vuex";
import IndexTwo from "@/views/homePage/mainPage/logoG/indexTwo.vue"; import IndexTwo from "@/views/homePage/mainPage/logoG/indexTwo.vue";
import HomePageSticky from "@/components/HomePageSticky/index.vue"; import HomePageSticky from "@/components/HomePageSticky/index.vue";
// 导入语言管理
import { languageStore, languageBus } from '@/utils/language'
export default Vue.extend({ export default Vue.extend({
name: "mainPage", name: "mainPage",
@ -379,55 +381,195 @@ export default Vue.extend({
currentBaseMenu: "hot", currentBaseMenu: "hot",
currentNetMenu: "hot", currentNetMenu: "hot",
currentSuanMenu: 'hot', currentSuanMenu: 'hot',
suanMenu: [
{ id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
{ id: "4090", name: "4090", icon: require("./img/suan/1.png"), activeIcon: require("./img/suan/1.png") },
{ id: "A100", name: "A100", icon: require("./img/suan/2.png"), activeIcon: require("./img/suan/2.png") },
{ id: "A800", name: "A800", icon: require("./img/suan/3.png"), activeIcon: require("./img/suan/3.png") },
{ id: "910B", name: "910B", icon: require("./img/suan/5.png"), activeIcon: require("./img/suan/5.png") }
],
baseMenu: [
{ id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
{ id: "computing", name: "计算", icon: require("../newImg/computing.png"), activeIcon: require("../newImg/computingActive.png") },
{ id: "storage", name: "存储", icon: require("../newImg/cun.png"), activeIcon: require("../newImg/cunActive.png") },
{ id: "database", name: "数据库", icon: require("../newImg/database.png"), activeIcon: require("../newImg/databaseActive.png") },
{ id: "container", name: "人脸识别", icon: require("../newImg/container.png"), activeIcon: require("../newImg/containerActive.png") }
],
netMenu: [
{ id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
{ id: "hlzx", name: "互联网专线", icon: require("./img/net/1.png"), activeIcon: require("./img/net/1.png") },
{ id: "SDWAN", name: "SDWAN", icon: require("./img/net/2.png"), activeIcon: require("./img/net/2.png") },
{ id: "DCI", name: "DCI", icon: require("./img/net/3.png"), activeIcon: require("./img/net/3.png") },
{ id: "AI", name: "AI专线", icon: require("./img/net/4.png"), activeIcon: require("./img/net/4.png") }
],
base: {}, base: {},
baseItem: {}, baseItem: {},
net: {}, net: {},
netItem: {}, netItem: {},
suan: {}, suan: {},
suanItem: {}, suanItem: {},
// 定义导航项数据，传递给子组件 // 从共享状态获取语言
stickySections: [ language: languageStore.getLanguage(),
{ title: '云筑企业基座', ref: 'baseSection' }, translations: {
{ title: '智算未来征程', ref: 'suanSection' }, zh: {
{ title: '网织智能经纬', ref: 'netSection' }, // Banner 区域
] aiButler: '您身边的AI管家',
slogan: '全 球 领 先 的 AI 服 务 运 营 商',
product1Name: '4090 裸金属',
product2Name: '云资源',
month: '台/月',
discount: '直降',
// 基础产品区域
baseTitle1: '云筑',
baseTitle2: '企业基座',
baseSubtitle: '多云融合 让上云更简单',
// 智算区域
suanTitle1: '智算',
suanTitle2: '未来征程',
suanSubtitle: '多元异构 灵活短租',
shortRent: '可短租',
// 网络区域
netTitle1: '网织',
netTitle2: '智能经纬',
netSubtitle: '云算网融合 让连接更简单',
productAdvantage: '产品优势',
applicationScenario: '应用场景',
partners: '合作伙伴',
// 资源区域
resourcesTitle1: '算力',
resourcesTitle2: '资源',
beijing: '北京',
tianjin: '天津',
sichuan: '四川',
shanghai: '上海',
jiangsu: '江苏',
computeCenters: '算力中心接入',
computingPower: '算力',
realTimeResponse: '实时算力响应',
registeredUsers: '注册用户',
// 按钮文本
buyNow: '立即购买',
consultNow: '立即咨询',
viewDetails: '查看详情',
experienceNow: '立即体验',
officialDiscount: '官网折扣',
// 输入框
phonePlaceholder: '请输入您的手机号',
// 弹窗内容
officialStatement: '官方申明',
dearUser: '尊敬用户',
greeting: '您好~~',
statement1: '本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。',
specialNote: '特别说明',
statement2: '云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。',
statement3: '请您知悉上述条款并放心进行购买决策，如有任何疑问，可随时联系平台官方客服，我们将为您详细说明。',
customerService: '客服热线',
currentDate: '2025年6月30日',
// 菜单项
hotRecommend: '热门推荐',
computing: '计算',
storage: '存储',
database: '数据库',
container: '人脸识别',
internetLine: '互联网专线',
sdwan: 'SDWAN',
dci: 'DCI',
aiLine: 'AI专线',
// 粘性导航
stickyBase: '云筑企业基座',
stickySuan: '智算未来征程',
stickyNet: '网织智能经纬'
},
en: {
// Banner 区域
aiButler: 'Your AI Butler',
slogan: 'Leading AI Service Operator Worldwide',
product1Name: '4090 Bare Metal',
product2Name: 'Cloud Resources',
month: 'unit/month',
discount: 'Off',
// 基础产品区域
baseTitle1: 'Cloud Build',
baseTitle2: 'Enterprise Foundation',
baseSubtitle: 'Multi-cloud integration makes cloud migration easier',
// 智算区域
suanTitle1: 'Intelligent Computing',
suanTitle2: 'Future Journey',
suanSubtitle: 'Multi-source heterogeneous Flexible short-term rental',
shortRent: 'Short rent available',
// 网络区域
netTitle1: 'Network Weaving',
netTitle2: 'Smart Framework',
netSubtitle: 'Cloud-computing-network integration makes connection easier',
productAdvantage: 'Product Advantages',
applicationScenario: 'Application Scenarios',
partners: 'Partners',
// 资源区域
resourcesTitle1: 'Computing',
resourcesTitle2: 'Resources',
beijing: 'Beijing',
tianjin: 'Tianjin',
sichuan: 'Sichuan',
shanghai: 'Shanghai',
jiangsu: 'Jiangsu',
computeCenters: 'Compute Centers Access',
computingPower: 'Computing Power',
realTimeResponse: 'Real-time Response',
registeredUsers: 'Registered Users',
// 按钮文本
buyNow: 'Buy Now',
consultNow: 'Consult Now',
viewDetails: 'View Details',
experienceNow: 'Experience Now',
officialDiscount: 'Official Discount',
// 输入框
phonePlaceholder: 'Please enter your phone number',
// 弹窗内容
officialStatement: 'Official Statement',
dearUser: 'Dear User',
greeting: 'Hello~~',
statement1: 'All product discount activities displayed on this platform are valid and the pricing system strictly follows the principle of transparency.',
specialNote: 'Special Note',
statement2: 'The prices shown on cloud service product pages are reference prices, and the actual transaction amount shall be subject to the resource list order page.',
statement3: 'Please be aware of the above terms and make purchase decisions with confidence. If you have any questions, please contact our official customer service at any time for detailed explanation.',
customerService: 'Customer Service',
currentDate: 'June 30, 2025',
// 菜单项
hotRecommend: 'Hot Recommend',
computing: 'Computing',
storage: 'Storage',
database: 'Database',
container: 'Face Recognition',
internetLine: 'Internet Line',
sdwan: 'SDWAN',
dci: 'DCI',
aiLine: 'AI Line',
// 粘性导航
stickyBase: 'Cloud Enterprise Foundation',
stickySuan: 'Intelligent Computing Journey',
stickyNet: 'Smart Network Framework'
}
}
} }
}, },
created() {
// 监听语言变化事件
languageBus.$on('language-changed', (lang) => {
this.language = lang
})
},
mounted() { mounted() {
// 监听滚动 控制sticky显示隐藏 // 监听滚动 控制sticky显示隐藏
document.getElementById("homeOut").addEventListener('scroll', (e) =>{ document.getElementById("homeOut").addEventListener('scroll', (e) =>{
if (e.target.scrollTop > 500) {
// console.log("滚动条事件",e.target.scrollTop); document.getElementById('sticky').style.display = 'block'
if (e.target.scrollTop > 500) { } else {
document.getElementById('sticky').style.display = 'block' document.getElementById('sticky').style.display = 'none'
} else { }
document.getElementById('sticky').style.display = 'none'
}
}) })
this.initData() this.initData()
}, },
beforeDestroy() {
// 移除事件监听
languageBus.$off('language-changed')
},
computed: { computed: {
...mapState({ ...mapState({
logoInfoNew: state => state.product.logoInfoNew, logoInfoNew: state => state.product.logoInfoNew,
@ -438,6 +580,120 @@ export default Vue.extend({
}, },
}, },
methods: { methods: {
// 获取粘性导航数据
getStickySections() {
return [
{ title: this.translations[this.language].stickyBase, ref: 'baseSection' },
{ title: this.translations[this.language].stickySuan, ref: 'suanSection' },
{ title: this.translations[this.language].stickyNet, ref: 'netSection' },
]
},
// 获取基础菜单
getBaseMenu() {
return [
{ id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
{ id: "computing", name: this.translations[this.language].computing, icon: require("../newImg/computing.png"), activeIcon: require("../newImg/computingActive.png") },
{ id: "storage", name: this.translations[this.language].storage, icon: require("../newImg/cun.png"), activeIcon: require("../newImg/cunActive.png") },
{ id: "database", name: this.translations[this.language].database, icon: require("../newImg/database.png"), activeIcon: require("../newImg/databaseActive.png") },
{ id: "container", name: this.translations[this.language].container, icon: require("../newImg/container.png"), activeIcon: require("../newImg/containerActive.png") }
]
},
// 获取智算菜单
getSuanMenu() {
return [
{ id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
{ id: "4090", name: "4090", icon: require("./img/suan/1.png"), activeIcon: require("./img/suan/1.png") },
{ id: "A100", name: "A100", icon: require("./img/suan/2.png"), activeIcon: require("./img/suan/2.png") },
{ id: "A800", name: "A800", icon: require("./img/suan/3.png"), activeIcon: require("./img/suan/3.png") },
{ id: "910B", name: "910B", icon: require("./img/suan/5.png"), activeIcon: require("./img/suan/5.png") }
]
},
// 获取网络菜单
getNetMenu() {
return [
{ id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
{ id: "hlzx", name: this.translations[this.language].internetLine, icon: require("./img/net/1.png"), activeIcon: require("./img/net/1.png") },
{ id: "SDWAN", name: this.translations[this.language].sdwan, icon: require("./img/net/2.png"), activeIcon: require("./img/net/2.png") },
{ id: "DCI", name: this.translations[this.language].dci, icon: require("./img/net/3.png"), activeIcon: require("./img/net/3.png") },
{ id: "AI", name: this.translations[this.language].aiLine, icon: require("./img/net/4.png"), activeIcon: require("./img/net/4.png") }
]
},
// 获取Banner标题
getBannerTitle() {
if (this.language === 'en') {
// 这里可以根据需要提供英文的banner标题
return this.logoInfoNew.home.bannerTitle || ""
}
return this.logoInfoNew.home.bannerTitle || ""
},
// 获取基础产品标题
getBaseItemTitle() {
if (this.language === 'en') {
// 这里可以根据实际数据结构提供英文标题
return this.baseItem.title || ""
}
return this.baseItem.title || ""
},
// 获取基础产品描述
getBaseItemDescription() {
if (this.language === 'en') {
// 这里可以根据实际数据结构提供英文描述
return this.baseItem.description || ""
}
return this.baseItem.description || ""
},
// 获取基础产品列表
getBaseItemList() {
// 这里可以处理产品列表的翻译
return this.baseItem.list || []
},
// 获取智算产品标题
getSuanItemTitle() {
if (this.language === 'en') {
return this.suanItem.title || ""
}
return this.suanItem.title || ""
},
// 获取智算产品列表
getSuanItemList() {
return this.suanItem.list || []
},
// 获取网络产品标题
getNetItemTitle() {
if (this.language === 'en') {
return this.netItem.title || ""
}
return this.netItem.title || ""
},
// 获取网络产品描述
getNetItemDescription() {
if (this.language === 'en') {
return this.netItem.description || ""
}
return this.netItem.description || ""
},
// 获取网络产品优势列表
getNetAdvantageList() {
return this.netItem.advantageList || []
},
// 获取网络产品标签列表
getNetTagList() {
return this.netItem.tagList || []
},
goBaiduFn(item) { goBaiduFn(item) {
if (this.loginState) { if (this.loginState) {
this.$store.commit('setRedirectUrl', item.url) this.$store.commit('setRedirectUrl', item.url)
@ -507,7 +763,7 @@ export default Vue.extend({
// 处理来自子组件的导航事件 // 处理来自子组件的导航事件
handleNavigation(index) { handleNavigation(index) {
console.log('父组件接收到导航事件，索引:', index); console.log('父组件接收到导航事件，索引:', index);
const sectionRef = this.stickySections[index]?.ref; const sectionRef = this.getStickySections()[index]?.ref;
if (sectionRef && this.$refs[sectionRef]) { if (sectionRef && this.$refs[sectionRef]) {
// 使用原生 scrollIntoView 实现平滑滚动 // 使用原生 scrollIntoView 实现平滑滚动
this.$refs[sectionRef].scrollIntoView({ this.$refs[sectionRef].scrollIntoView({
@ -515,14 +771,16 @@ export default Vue.extend({
block: 'start', block: 'start',
inline: 'start' inline: 'start'
}); });
} }
} }
}, }
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 原有的样式保持不变...
// 添加动画样式 // 添加动画样式
.slide-fade-enter-active { .slide-fade-enter-active {
transition: all 0.3s ease; transition: all 0.3s ease;
@ -1365,7 +1623,3 @@ export default Vue.extend({
} }
</style> </style>