463 lines
12 KiB
Vue
463 lines
12 KiB
Vue
<template>
|
||
<div id="homeOut" class="homeOut">
|
||
<TopBox id="topBox"></TopBox>
|
||
|
||
<div class="home-router-view">
|
||
<router-view></router-view>
|
||
</div>
|
||
<!-- footer-->
|
||
<div class="footer">
|
||
<div class="footer-main">
|
||
<div class="footer-brand-col">
|
||
<img
|
||
v-if="hasLogoInfo"
|
||
:src="footerHomeInfo.logoImg"
|
||
alt="logo"
|
||
class="footer-brand-logo"
|
||
>
|
||
</div>
|
||
|
||
<div class="footer-link-cols">
|
||
|
||
|
||
<div class="footer-link-col">
|
||
<h4 class="footer-col-title">{{ $t('home.footerProducts') }}</h4>
|
||
<ul class="footer-link-list">
|
||
<li
|
||
v-for="item in footerProductServices"
|
||
:key="item.label"
|
||
class="footer-link-item"
|
||
:class="{ clickable: !!item.path }"
|
||
@click="goFooterService(item.path)"
|
||
>
|
||
{{ item.label }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-contact-col">
|
||
<h4 class="footer-col-title">{{ $t('home.footerContact') }}</h4>
|
||
<ul class="footer-contact-list">
|
||
<li>地址：<span>{{ footerHomeInfo.adress }}</span></li>
|
||
<li>邮箱：<span>{{ footerHomeInfo.email }}</span></li>
|
||
<li>电话：<span>{{ footerHomeInfo.mobile }}</span></li>
|
||
</ul>
|
||
<div v-if="showFooterQrcode" class="footer-qrcode-row">
|
||
<div class="qr-box">
|
||
<div class="qr-code">
|
||
<img src="./img/img.png" alt="">
|
||
</div>
|
||
<span class="qr-content">{{ $t('home.onlineChat') }}</span>
|
||
</div>
|
||
<div class="qr-box">
|
||
<div class="qr-code">
|
||
<img src="./img/kefu.jpg" alt="">
|
||
</div>
|
||
<span class="qr-content">关注公众号</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="footer-record">
|
||
<span v-if="hasLogoInfo"
|
||
class="footer-record__text"><span
|
||
class="goStyle"
|
||
@click="goOut('https://beian.miit.gov.cn/#/Integrated/index')">
|
||
京ICP备{{
|
||
footerHomeInfo.license
|
||
}}
|
||
<span style="padding: 4px;"></span>
|
||
</span> {{
|
||
footerHomeInfo.footerTitle
|
||
}} {{
|
||
footerHomeInfo.copyright
|
||
}} </span>
|
||
<!-- IPC备案号:{{ ICP }} <span style="margin-left: 0.267rem">版权所有 @kaiyuanyun 2023</span>-->
|
||
<!-- <img src="../../image/login/policeInsignia/policeInsignia.png" alt=""-->
|
||
<!-- style="width:0.227rem;height:0.227rem;margin-right: 0.027rem;">-->
|
||
<!-- <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer"-->
|
||
<!-- target="_blank"-->
|
||
<!-- style="margin-right:0.4rem;">京公网安备11010502054007</a>-->
|
||
<!-- <span>-->
|
||
<!-- <router-link tag="a" target="_blank"-->
|
||
<!-- :to="{ name: 'homePageImage' }">经营许可证:京B2-20232313</router-link>-->
|
||
<!-- </span>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import Vue from 'vue'
|
||
import TopBox from "@/views/homePage/components/topBox/index.vue";
|
||
import {mapGetters, mapState} from "vuex";
|
||
|
||
export default Vue.extend({
|
||
name: "indexLast",
|
||
components: {TopBox},
|
||
data() {
|
||
return {
|
||
currentBaseMenu: "hot", // 默认选中热门推荐
|
||
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: "cun",
|
||
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")
|
||
}
|
||
],
|
||
footerProductServices: [
|
||
{ label: 'Token市集', path: '/homePage/tokenMarket' },
|
||
{ label: '算力市场', path: '/homePage/computeMarket' },
|
||
{ label: 'OPC公共服务平台', path: '/homePage/opc' },
|
||
{ label: '训推平台', path: '/homePage/trainPlatform' },
|
||
{ label: '智能体商店', path: '/homePage/agentStore' },
|
||
{ label: '供需广场', path: '/ncmatchHome/supplyAndDemandSquare' },
|
||
{ label: '文档中心', path: '/homePage/new' },
|
||
],
|
||
footerAboutUs: [
|
||
{ label: '关于我们', path: '/homePage/about' },
|
||
{ label: '文件中心', path: '/homePage/new' },
|
||
{ label: '联系我们', path: '/homePage/about' },
|
||
{ label: '人才招聘', path: '' },
|
||
{ label: '云作坊', path: '' },
|
||
{ label: '友情链接', path: '' },
|
||
],
|
||
footerSolutions: [
|
||
{ label: '汽车行业', path: '/homePage/solve/hospital' },
|
||
{ label: '金融行业', path: '' },
|
||
{ label: '政务行业', path: '' },
|
||
{ label: '工业行业', path: '' },
|
||
{ label: '教育行业', path: '' },
|
||
{ label: '医疗行业', path: '' },
|
||
{ label: '互联网行业', path: '' },
|
||
],
|
||
footerSupports: [
|
||
{ label: '备案服务', path: '' },
|
||
{ label: '服务咨询', path: '' },
|
||
{ label: '建议与反馈', path: '/homePage/about' },
|
||
{ label: '常见问题', path: '/homePage/new' },
|
||
{ label: '帮助中心', path: '/homePage/new' },
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(["sidebar", "avatar", "device"]),
|
||
...mapState({
|
||
isShowPanel: (state) => state.product.showHomeNav,
|
||
navIndex: (state) => state.product.navIndex,
|
||
gridObj: state => state.operationAnalysis.gridObj,
|
||
mybalance: state => state.user.mybalance,
|
||
logoutUrl: state => state.login.logoutUrl,
|
||
loginState: state => state.login.loginState,
|
||
logoInfoNew: state => state.product.logoInfoNew,
|
||
}),
|
||
showRegisterButton() {
|
||
const orgType = window.sessionStorage.getItem('org_type');
|
||
const userId = window.sessionStorage.getItem('userId');
|
||
console.log("此时是:", orgType !== '2' && orgType !== '3' && userId !== null)
|
||
return orgType !== '2' && orgType !== '3' && userId === null;
|
||
},
|
||
hasLogoInfo() {
|
||
return this.logoInfoNew && JSON.stringify(this.logoInfoNew) !== '{}' && this.logoInfoNew.home
|
||
},
|
||
footerHomeInfo() {
|
||
return this.hasLogoInfo ? this.logoInfoNew.home : {}
|
||
},
|
||
showFooterQrcode() {
|
||
return this.hasLogoInfo && this.footerHomeInfo.bannerTitle !== '开元数智'
|
||
},
|
||
username() {
|
||
return sessionStorage.getItem('username') || '';
|
||
},
|
||
|
||
},
|
||
watch: {
|
||
'$route.fullPath'() {
|
||
this.$nextTick(() => {
|
||
this.scrollHomeToTop()
|
||
window.setTimeout(this.scrollHomeToTop, 0)
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
scrollHomeToTop() {
|
||
const container = this.$el
|
||
if (container) container.scrollTop = 0
|
||
window.scrollTo(0, 0)
|
||
document.documentElement.scrollTop = 0
|
||
document.body.scrollTop = 0
|
||
},
|
||
goOut(url){
|
||
window.open(url)
|
||
},
|
||
goFooterService(path) {
|
||
if (!path || this.$route.path === path) return
|
||
this.$router.push(path)
|
||
},
|
||
scrollToElement(id) {
|
||
const element = document.getElementById(id);
|
||
if (element) {
|
||
element.scrollIntoView({
|
||
behavior: 'smooth', // 平滑滚动
|
||
block: 'start', // 滚动到顶部对齐（可选：'start', 'center', 'end', 'nearest'）
|
||
});
|
||
}
|
||
},
|
||
clickBaseMenu(menu) {
|
||
console.log("emnu", menu)
|
||
this.currentBaseMenu = menu.id;
|
||
},
|
||
async goBaidu() {
|
||
this.scrollToElement('topBox')
|
||
await this.$store.commit('setShowHomeNav', true)
|
||
await this.$store.commit('setNavIndex', 0)
|
||
|
||
// const orgType = window.sessionStorage.getItem('org_type');
|
||
// let isKehu = orgType === '2' || orgType === '3';
|
||
// if (isKehu) {
|
||
// this.$router.push({path: '/product/baiduProduct',})
|
||
// } else {
|
||
// this.$router.push({
|
||
// path: "/login",
|
||
// query: {
|
||
// type: 'homePage',
|
||
// }
|
||
// })
|
||
// }
|
||
},
|
||
async goAliyun() {
|
||
|
||
this.scrollToElement('topBox')
|
||
await this.$store.commit('setShowHomeNav', true)
|
||
await this.$store.commit('setNavIndex', 1)
|
||
|
||
// const orgType = window.sessionStorage.getItem('org_type');
|
||
// let isKehu = orgType === '2' || orgType === '3';
|
||
// if (isKehu) {
|
||
// reqNewHomeFestival().then(res => {
|
||
// if (res.status) {
|
||
// window.open(res.data)
|
||
// } else {
|
||
// this.$message.warning(res.msg)
|
||
// }
|
||
// })
|
||
//
|
||
// } else {
|
||
// this.$router.push({
|
||
// path: "/login",
|
||
// query: {
|
||
// type: 'homePage',
|
||
// }
|
||
// })
|
||
// }
|
||
},
|
||
}
|
||
})
|
||
</script>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.homeOut {
|
||
//padding-top: 60px;
|
||
height: 100%;
|
||
overflow: auto !important;
|
||
min-width: 1500px;
|
||
// background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%);
|
||
}
|
||
#topBox{
|
||
// height: 82px;
|
||
background: transparent!important;
|
||
background-color: transparent!important;
|
||
box-shadow: none!important;
|
||
border: 0!important;
|
||
}
|
||
|
||
.home-router-view {
|
||
width: 100%;
|
||
padding-top: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.footer {
|
||
padding: 38px 0 22px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
background: #f1f3f7;
|
||
}
|
||
|
||
.footer-main {
|
||
width: 1400px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 38px;
|
||
padding: 0 0 32px;
|
||
border-bottom: 1px solid rgba(122, 130, 160, 0.22);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.footer-brand-col {
|
||
width: 150px;
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.footer-brand-logo {
|
||
width: 180px;
|
||
height: 50px;
|
||
object-fit: contain;
|
||
object-position: left center;
|
||
}
|
||
|
||
.footer-link-cols {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
gap: 60px;
|
||
}
|
||
|
||
.footer-link-col {
|
||
min-width: 110px;
|
||
}
|
||
|
||
.footer-col-title {
|
||
margin: 0 0 14px;
|
||
color: #202634;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.footer-link-list {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-link-item {
|
||
margin-bottom: 9px;
|
||
color: #5d6477;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
white-space: nowrap;
|
||
transition: color .2s ease, transform .2s ease;
|
||
}
|
||
|
||
.footer-link-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.footer-link-item.clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.footer-link-item.clickable:hover {
|
||
color: #1b5bff;
|
||
transform: translateX(3px);
|
||
}
|
||
|
||
.footer-contact-list {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
color: #5d6477;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
|
||
li {
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
|
||
.footer-qrcode-row {
|
||
margin-top: 14px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
}
|
||
|
||
.qr-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.qr-code {
|
||
width: 120px;
|
||
height: 120px;
|
||
padding: 4px;
|
||
border: 1px solid #dde3ef;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.qr-content {
|
||
margin-top: 8px;
|
||
color: #5d6477;
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.footer-record {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-record__text {
|
||
width: 1400px;
|
||
margin: 18px 0 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #7a82a0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.goStyle {
|
||
cursor: pointer;
|
||
transition: all .3s ease-in-out;
|
||
|
||
&:hover {
|
||
transition: all .3s ease-in-out;
|
||
color: #1b5bff;
|
||
}
|
||
}
|
||
</style>
|