kboss/f/web-kboss/src/views/homePage/indexLast.vue

<template>
  <div id="homeOut" class="homeOut">
    <TopBox id="topBox"></TopBox>

    <router-view></router-view>
    <!--    footer-->
    <div class="footer">
      <div class="left-box" style="border-bottom: 1px solid  #7A82A0">

        <div style="display: flex;flex-direction: column">
          <img v-if="JSON.stringify(logoInfoNew)!=='{}'" style="width: 148px;height: 48px;"
               :src="logoInfoNew.home.logoImg" alt=""
               class="img">
          <div class="content-main">
            <ul class="info">
              <li>{{ translations[language].address }}：<span v-if="JSON.stringify(logoInfoNew)!=='{}'">{{ logoInfoNew.home.adress }}</span>
              </li>
              <li v-if="JSON.stringify(logoInfoNew)!=='{}'"> {{ translations[language].email }}：{{logoInfoNew.home.email}}</li>
              <li v-if="JSON.stringify(logoInfoNew)!=='{}'">{{ translations[language].phone }}： <span class="tel">{{logoInfoNew.home.mobile}}</span>
              </li>

              <li>
                <!-- <a href="" rel="noreferrer" target="_blank"></a> -->
              </li>
            </ul>

          </div>
        </div>
        <ul class="bigUl">

          <!--          <li class="bigLi">-->
          <!--            <span class="title">{{ translations[language].aboutUs }}</span>-->
          <!--            <ul class="smallUl">-->
          <!--              <li class="smallLi" @click="$router.push('/homePage/about')">{{ translations[language].companyIntro }}</li>-->
          <!--            </ul>-->
          <!--            <span class="title"> </span>-->
          <!--          </li>-->
          <!--          <li class="bigLi">-->
          <!--            <span class="title">{{ translations[language].products }}</span>-->
          <!--            <ul class="smallUl">-->
          <!--              <li @click="goBaidu" class="smallLi">{{ translations[language].baiduCloud }}</li>-->
          <!--              <li @click="goAliyun" class="smallLi">{{ translations[language].aliCloud }}</li>-->
          <!--              &lt;!&ndash;              <li class="smallLi">{{ translations[language].kaiyuanCloud }}</li>&ndash;&gt;-->
          <!--            </ul>-->
          <!--            <span class="title"> </span>-->
          <!--          </li>-->
          <!--          <li class="bigLi">-->
          <!--            <span class="title">{{ translations[language].solutions }}</span>-->
          <!--            <ul class="smallUl">-->
          <!--              <li class="smallLi">{{ translations[language].biomedicine }}</li>-->
          <!--            </ul>-->
          <!--            <span class="title"> </span>-->
          <!--          </li>-->
          <!--          <li class="bigLi">-->
          <!--            <span class="title">{{ translations[language].serviceSupport }}</span>-->
          <!--            <ul class="smallUl">-->
          <!--              <li class="smallLi">{{ translations[language].modelFineTuning }}</li>-->
          <!--              <li class="smallLi">{{ translations[language].modelApplication }}</li>-->
          <!--              <li class="smallLi">{{ translations[language].businessConsulting }}</li>-->
          <!--              <li class="smallLi">{{ translations[language].joinKaiyuan }}</li>-->
          <!--            </ul>-->
          <!--            <span class="title"> </span>-->
          <!--          </li>-->
        </ul>
        <div v-if="JSON.stringify(logoInfoNew)!=='{}'&&logoInfoNew.home.bannerTitle!=='开元数智'" class="right-box">
          <div class="qr-box">
            <div class="qr-code">
              <img src="./img/kefu.jpg" style="padding: 0.08rem" alt="">
            </div>
            <span class="qr-content">{{ translations[language].wechatCustomerService }}</span>
          </div>
          <div class="qr-box" style="margin-left: 0.667rem">
            <div class="qr-code">
              <img src="./img/img.png" alt="">
            </div>
            <span class="qr-content">{{ translations[language].followOfficialAccount }}</span>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;width: 100%; ">
        <span v-if="JSON.stringify(logoInfoNew)!=='{}'"
              style="margin:15px 0 ;width: 1400px;display:flex;justify-content:center;align-items:center;color: #7A82A0;"><span
          class="goStyle"
        @click="goOut('https://beian.miit.gov.cn/#/Integrated/index')">
           {{ translations[language].icpRecord }} {{
            logoInfoNew.home.license
          }}&nbsp;
        </span> &nbsp;&nbsp;{{
            logoInfoNew.home.footerTitle
          }}&nbsp;{{
            logoInfoNew.home.copyright
          }}&nbsp; </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 {reqNewHomeFestival} from "@/api/newHome";
import {mapGetters, mapState} from "vuex";
// 导入语言管理
import { languageStore, languageBus } from '@/utils/language'

export default Vue.extend({
  name: "indexLast",
  components: {TopBox},
  data() {
    return {
      currentBaseMenu: "hot", // 默认选中热门推荐
      language: 'zh',
      languageChangedHandler: null,
      translations: {
        zh: {
          address: '地址',
          email: '邮箱',
          phone: '电话',
          wechatCustomerService: '微信客服',
          followOfficialAccount: '关注公众号',
          icpRecord: '京ICP备',
          aboutUs: '关于我们',
          companyIntro: '公司介绍',
          products: '产品',
          baiduCloud: '百度云',
          aliCloud: '阿里云',
          kaiyuanCloud: '开元云',
          solutions: '解决方案',
          biomedicine: '生物医药',
          serviceSupport: '服务与支持',
          modelFineTuning: '模型微调',
          modelApplication: '模型应用',
          businessConsulting: '业务咨询',
          joinKaiyuan: '加入开元'
        },
        en: {
          address: 'Address',
          email: 'Email',
          phone: 'Phone',
          wechatCustomerService: 'WeChat Customer Service',
          followOfficialAccount: 'Follow Official Account',
          icpRecord: 'ICP Record',
          aboutUs: 'About Us',
          companyIntro: 'Company Introduction',
          products: 'Products',
          baiduCloud: 'Baidu Cloud',
          aliCloud: 'Ali Cloud',
          kaiyuanCloud: 'Kaiyuan Cloud',
          solutions: 'Solutions',
          biomedicine: 'Biomedicine',
          serviceSupport: 'Service & Support',
          modelFineTuning: 'Model Fine-tuning',
          modelApplication: 'Model Application',
          businessConsulting: 'Business Consulting',
          joinKaiyuan: 'Join Kaiyuan'
        }
      },
      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")
        }
      ]
    }
  },
  created() {
    // 修复：确保从共享状态获取当前语言
    this.initLanguage()
  },
  beforeDestroy() {
    // 移除事件监听
    if (this.languageChangedHandler) {
      languageBus.$off('language-changed', this.languageChangedHandler)
    }
  },
  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;
    },
    username() {
      return sessionStorage.getItem('username') || '';
    },

  },
  methods: {
    // 初始化语言状态
    initLanguage() {
      // 直接从store获取当前语言，确保一致性
      this.language = languageStore.getLanguage()
      console.log('homeOut组件初始化语言:', this.language)

      // 保存事件处理函数的引用，以便正确移除
      this.languageChangedHandler = (lang) => {
        console.log('homeOut组件接收到语言变化:', lang)
        this.language = lang
      }

      // 监听语言变化事件
      languageBus.$on('language-changed', this.languageChangedHandler)
    },

    goOut(url){
      window.open(url)
    },
    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;
}

.footer {
  padding: 35px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.left-box {
  width: 1400px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
}

.right-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-main {
  mix-blend-mode: normal;
  color: rgba(0, 0, 0, 1);
  font-size: 0.187rem;
}

.qr-code {
  img {
    width: 100%;
    height: 100%;
  }

  width: 1.853rem;
  height: 1.853rem;
}

.qr-content {
  mix-blend-mode: normal;
  color: rgba(24, 24, 24, 1);
  font-family: PingFang SC, serif;
  font-weight: 600;
  font-size: 0.187rem;
}

.qr-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.logo {
  background-color: #32abfc;

  img {
    width: 100%;
    height: 100%;
  }
}

.bigUl {
  margin: 0 15px;
  margin-left: -250px;
  //padding-top: 15px;
  width: fit-content;
  display: flex;
  justify-content: flex-start;

  .bigLi {
    margin: 0 25px;
  }

  height: 100%;

  .title {
    color: #222F60;
    font-size: 18px;
    font-weight: bold;
  }

  .smallUl {
    font-size: 16px;
    color: #7A82A0;

    li {
      margin: 10px 0;
    }
  }
}

.info {
  font-size: 14px;
  color: #7A82A0;

  li {
    margin: 10px 0;
  }
}

.tel {
  color: #222F60;
  font-size: 20px;
}

.smallLi {
  &:hover {
    color: #1b5bff;
    cursor: pointer;
  }
}

.goStyle {
  cursor: pointer;
  transition: all .3s ease-in-out;

  &:hover {
    transition: all .3s ease-in-out;
    color: #1b5bff;
  }
}
</style>