535 lines
13 KiB
Vue
535 lines
13 KiB
Vue
<template>
|
||
<div style="width: 100%;">
|
||
<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>
|
||
<!-- <img v-if="JSON.stringify(logoInfoNew) !== '{}'" :src="logoInfoNew.home.logoImg" alt=""> -->
|
||
</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 class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage1.png') + ')' }">
|
||
<div class="content-wrapper">
|
||
<div class="top-tit">
|
||
精准定位
|
||
</div>
|
||
<div class="btm-tit">
|
||
专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage2.png') + ')' }">
|
||
<div class="content-wrapper">
|
||
<div class="top-tit">
|
||
技术服务
|
||
</div>
|
||
<div class="btm-tit">
|
||
提供人工智能相关的技术服务，为企业解决复杂的技术难题。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage3.png') + ')' }">
|
||
<div class="content-wrapper">
|
||
<div class="top-tit">
|
||
产品定制
|
||
</div>
|
||
<div class="btm-tit">
|
||
根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage4.png') + ')' }">
|
||
<div class="content-wrapper">
|
||
<div class="top-tit">
|
||
产业赋能
|
||
</div>
|
||
<div class="btm-tit">
|
||
通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage5.png') + ')' }">
|
||
<div class="content-wrapper">
|
||
<div class="top-tit">
|
||
一站式、本地化服务
|
||
</div>
|
||
<div class="btm-tit">
|
||
从售前、售中到售后提供一站式全方位服务
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage6.png') + ')' }">
|
||
<div class="content-wrapper">
|
||
<div class="top-tit">
|
||
提供AI基础设施与模型服务
|
||
</div>
|
||
<div class="btm-tit">
|
||
提供整体底层技术架构和系统支持及模型服务
|
||
</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 {
|
||
// 删除了language和translations相关数据
|
||
}
|
||
},
|
||
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方法
|
||
}
|
||
})
|
||
</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;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
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;
|
||
|
||
/* 默认状态：白色半透明遮罩，黑色文字 */
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12px;
|
||
z-index: 1;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.content-wrapper {
|
||
position: relative;
|
||
z-index: 2;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 悬停状态：蓝色半透明遮罩，白色文字 */
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 102, 255, 0.2);
|
||
|
||
&::before {
|
||
background: rgba(0, 102, 255, 0.9);
|
||
}
|
||
|
||
.top-tit {
|
||
color: #fff;
|
||
}
|
||
|
||
.btm-tit {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 - 适配不同屏幕尺寸 */
|
||
@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>
|