548 lines
13 KiB
Vue
548 lines
13 KiB
Vue
<template>
|
||
<div class="about-page" style="width: 100%;">
|
||
<!-- Banner部分 -->
|
||
<div class="banner">
|
||
<div v-if="JSON.stringify(logoInfoNew) !== '{}'" style="font-size: 38px;">
|
||
<div>{{ logoInfoNew.home.bannerTitle }}</div>
|
||
<p style="color: #0e0b0b">全球领先的AI服务运营商</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关于我们部分 -->
|
||
<div class="mainBox" style="padding-top: 35px">
|
||
<div class="inBox">
|
||
<div class="leftBox">
|
||
<p class="leftBoxtitle">关于<span class="gradient-text">我们</span></p>
|
||
</div>
|
||
<div v-if="JSON.stringify(logoInfoNew) !== '{}'" class="rightBox">
|
||
<p v-for="(i, index) in logoInfoNew.about.content" :key="index">
|
||
{{ i }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 公司资质 -->
|
||
<div class="zizhi">
|
||
<div style="width: 1400px;">
|
||
<div style="text-align:center;font-size: 30px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
|
||
公司<span class="gradient-text">资质</span>
|
||
</div>
|
||
<LogoTwo></LogoTwo>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业文化 -->
|
||
<div class="enterprise">
|
||
<div class="enterprise-inner">
|
||
<div class="left-box">
|
||
<div class="left-title">
|
||
<span>企业<span class="gradient-text">文化</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="right-box">
|
||
<div class="item">
|
||
<div class="item-img">
|
||
<img src="./img/sm.png" alt="使命图标">
|
||
</div>
|
||
<div class="item-content">
|
||
<div class="item-tit">
|
||
<div>使命</div>
|
||
<div>Mission</div>
|
||
</div>
|
||
<div class="item-text">
|
||
<p>让AI无处不在，让智能如此简单</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-img">
|
||
<img src="./img/yj.png" alt="愿景图标">
|
||
</div>
|
||
<div class="item-content">
|
||
<div class="item-tit">
|
||
<div>愿景</div>
|
||
<div>Vision</div>
|
||
</div>
|
||
<div class="item-text">
|
||
<p>全球领先的AI服务运营商</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-img">
|
||
<img src="./img/jzg.png" alt="价值观图标">
|
||
</div>
|
||
<div class="item-content">
|
||
<div class="item-tit">
|
||
<div>价值观</div>
|
||
<div>Value</div>
|
||
</div>
|
||
<div class="item-text">
|
||
<p>卓越、开放、创新</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优势部分 - 使用动态绑定 -->
|
||
<div class="advantage">
|
||
<div class="advantage-tit">
|
||
<span>平台<span class="gradient-text">优势</span></span>
|
||
</div>
|
||
<!-- 优势列表 -->
|
||
<div class="advantage-content">
|
||
<div class="advantage-grid">
|
||
<div
|
||
v-for="(item, index) in advantageItems"
|
||
:key="index"
|
||
class="advantage-item"
|
||
:class="{
|
||
'hovered': hoveredIndex === index && item.hasHoverEffect,
|
||
'no-hover-effect': !item.hasHoverEffect
|
||
}"
|
||
@mouseenter="hoveredIndex = index"
|
||
@mouseleave="hoveredIndex = null"
|
||
:style="{
|
||
backgroundImage: `url(${getBackgroundImage(index)})`
|
||
}"
|
||
>
|
||
<div class="content-wrapper">
|
||
<div class="top-tit">
|
||
{{ item.title }}
|
||
</div>
|
||
<div class="btm-tit">
|
||
{{ item.description }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
import LogoTwo from "@/views/homePage/mainPage/logoG/logoTwo.vue";
|
||
import { mapGetters, mapState } from "vuex";
|
||
|
||
export default Vue.extend({
|
||
name: "about",
|
||
components: { LogoTwo },
|
||
data() {
|
||
return {
|
||
hoveredIndex: null,
|
||
advantageItems: [
|
||
{
|
||
title: '精准定位',
|
||
description: '专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。',
|
||
normalImage: 'advantage1.png',
|
||
hoverImage: 'advantageColor1.png', // 第一张没有彩色版本，使用同一张图片
|
||
hasHoverEffect: true // 标记没有悬停效果
|
||
},
|
||
{
|
||
title: '技术服务',
|
||
description: '提供人工智能相关的技术服务，为企业解决复杂的技术难题。',
|
||
normalImage: 'advantage2.png',
|
||
hoverImage: 'advantageColor2.png',
|
||
hasHoverEffect: true
|
||
},
|
||
{
|
||
title: '产品定制',
|
||
description: '根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。',
|
||
normalImage: 'advantage3.png',
|
||
hoverImage: 'advantageColor3.png',
|
||
hasHoverEffect: true
|
||
},
|
||
{
|
||
title: '产业赋能',
|
||
description: '通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。',
|
||
normalImage: 'advantage4.png',
|
||
hoverImage: 'advantageColor4.png',
|
||
hasHoverEffect: true
|
||
},
|
||
{
|
||
title: '一站式、本地化服务',
|
||
description: '从售前、售中到售后提供一站式全方位服务',
|
||
normalImage: 'advantage5.png',
|
||
hoverImage: 'advantageColor5.png',
|
||
hasHoverEffect: true
|
||
},
|
||
{
|
||
title: '提供AI基础设施与模型服务',
|
||
description: '提供整体底层技术架构和系统支持及模型服务',
|
||
normalImage: 'advantage6.png',
|
||
hoverImage: 'advantageColor6.png',
|
||
hasHoverEffect: true
|
||
}
|
||
]
|
||
}
|
||
},
|
||
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: {
|
||
getBackgroundImage(index) {
|
||
const item = this.advantageItems[index];
|
||
|
||
// 如果有悬停效果且当前被悬停，使用悬停图片
|
||
if (this.hoveredIndex === index && item.hasHoverEffect) {
|
||
return require(`./img/${item.hoverImage}`);
|
||
} else {
|
||
// 正常状态或没有悬停效果
|
||
return require(`./img/${item.normalImage}`);
|
||
}
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.banner {
|
||
background: url("./img/Newbanner.png") no-repeat top center;
|
||
display: flex;
|
||
justify-content: center;
|
||
background-size: cover;
|
||
align-items: center;
|
||
height: 500px;
|
||
flex-direction: column;
|
||
font-weight: bold;
|
||
|
||
div {
|
||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.mainBox {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
background: linear-gradient(180deg, #fff 0%, #f6f8fd 40%, #fff 100%);
|
||
|
||
.inBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 1450px;
|
||
|
||
.leftBox {
|
||
width: 25%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.leftBoxtitle {
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
img {
|
||
width: 300px;
|
||
}
|
||
}
|
||
|
||
.rightBox {
|
||
width: 75%;
|
||
height: 100%;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 企业文化部分样式 */
|
||
.enterprise {
|
||
width: 100%;
|
||
background: linear-gradient(180deg, #d7e9ff 0%, #fff 100%);
|
||
padding: 80px 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.enterprise-inner {
|
||
width: 1400px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.left-box {
|
||
width: 25%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.left-title {
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.right-box {
|
||
width: 70%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 40px;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.item-img {
|
||
flex-shrink: 0;
|
||
margin-right: 25px;
|
||
|
||
img {
|
||
width: 70px;
|
||
height: 70px;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.item-content {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item-tit {
|
||
margin-bottom: 15px;
|
||
|
||
div:first-child {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
div:last-child {
|
||
font-size: 16px;
|
||
color: #666;
|
||
font-style: italic;
|
||
}
|
||
}
|
||
|
||
.item-text {
|
||
margin-left: 40px;
|
||
|
||
p {
|
||
font-size: 18px;
|
||
line-height: 1.6;
|
||
color: #444;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.zizhi {
|
||
height: 900px;
|
||
width: 100%;
|
||
background: url("./img/zizhi.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
padding-bottom: 15px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 新增渐变文字样式 */
|
||
.gradient-text {
|
||
background: linear-gradient(to right, #0066FF, #66CCFF);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
// 优势样式
|
||
.advantage {
|
||
padding: 80px 0;
|
||
background:#fff;
|
||
|
||
.advantage-tit {
|
||
text-align: center;
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.advantage-content {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.advantage-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 30px;
|
||
width: 1200px;
|
||
|
||
.advantage-item {
|
||
position: relative;
|
||
border-radius: 12px;
|
||
padding: 40px 30px;
|
||
transition: all 0.3s ease;
|
||
height: 140px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
|
||
/* 背景图设置 */
|
||
background-size: cover !important;
|
||
background-position: center !important;
|
||
background-repeat: no-repeat !important;
|
||
|
||
.content-wrapper {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.top-tit {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btm-tit {
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
color: #666;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 有悬停效果的卡片 */
|
||
&:not(.no-hover-effect) {
|
||
&.hovered {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 102, 255, 0.2);
|
||
|
||
.top-tit {
|
||
color: #fff;
|
||
}
|
||
|
||
.btm-tit {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 没有悬停效果的卡片（第一张） */
|
||
&.no-hover-effect {
|
||
cursor: default;
|
||
|
||
&:hover {
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.top-tit, .btm-tit {
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 - 适配不同屏幕尺寸 */
|
||
@media (max-width: 1200px) {
|
||
.mainBox .inBox,
|
||
.enterprise .enterprise-inner,
|
||
.advantage-content .advantage-grid {
|
||
width: 95% !important;
|
||
}
|
||
|
||
.advantage-content .advantage-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.banner {
|
||
height: 300px;
|
||
font-size: 28px !important;
|
||
|
||
p {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.mainBox .inBox {
|
||
flex-direction: column;
|
||
|
||
.leftBox, .rightBox {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.leftBox {
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
.enterprise .enterprise-inner {
|
||
flex-direction: column;
|
||
|
||
.left-box, .right-box {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.left-box {
|
||
margin-bottom: 40px;
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
|
||
.zizhi {
|
||
height: auto;
|
||
padding: 50px 0;
|
||
}
|
||
|
||
.advantage-item {
|
||
height: 160px !important;
|
||
}
|
||
}
|
||
</style>
|