581 lines
14 KiB
Vue
581 lines
14 KiB
Vue
<template>
|
||
<div class="mian">
|
||
<!-- banner -->
|
||
<div class="banner">
|
||
<div class="title">开元云</div>
|
||
<div class="dase">全球领先的AI服务运营商</div>
|
||
</div>
|
||
|
||
<!-- 介绍 -->
|
||
<div class="introduce">
|
||
<!-- 左侧标题 -->
|
||
<div class="left">
|
||
关于<span class="color">我们</span>
|
||
</div>
|
||
|
||
<!-- 右侧内容 -->
|
||
<div class="right">
|
||
<div class="content">
|
||
<div class="text">
|
||
<div v-for="(item, index) in companyData" :key="index" style="margin-bottom: .2rem;">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 公司资质 -->
|
||
<div class="qualifications">
|
||
<div class="qualifications-title">
|
||
公司<span class="color">资质</span>
|
||
</div>
|
||
<div class="img-list">
|
||
<!-- 照片滚动 -->
|
||
<!-- 从左向右滚动 -->
|
||
<div class="top-img">
|
||
<div class="scroll-container row1">
|
||
<div v-for="(image, index) in topImages" :key="index" class="scroll-item">
|
||
<img :src="image" alt="资质证书" />
|
||
</div>
|
||
<!-- 重复用于无缝衔接 -->
|
||
<div v-for="(image, index) in topImages" :key="'top-dup-' + index" class="scroll-item">
|
||
<img :src="image" alt="资质证书" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 从右向左滚动 -->
|
||
<div class="bottom-img">
|
||
<div class="scroll-container row2">
|
||
<div v-for="(image, index) in bottomImages" :key="'bottom-' + index" class="scroll-item">
|
||
<img :src="image" alt="资质证书" />
|
||
</div>
|
||
<!-- 重复用于无缝衔接 -->
|
||
<div v-for="(image, index) in bottomImages" :key="'bottom-dup-' + index" class="scroll-item">
|
||
<img :src="image" alt="资质证书" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业文化 -->
|
||
<div class="culture">
|
||
<!-- 标题 -->
|
||
<div class="culture-title">
|
||
企业<span class="color">文化</span>
|
||
</div>
|
||
<!-- 列表 -->
|
||
<div class="culture-content">
|
||
<div class="culture-item">
|
||
<div class="culture-icon">
|
||
<div class="icon-placeholder">
|
||
<img src="./img/sm.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="culture-text">
|
||
<div class="culture-item-title">
|
||
<div>使命</div>
|
||
<div class="culture-en">Mission</div>
|
||
</div>
|
||
<div class="culture-desc">
|
||
让AI无处不在，让智能如此简单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="culture-item">
|
||
<div class="culture-icon">
|
||
<div class="icon-placeholder">
|
||
<img src="./img/yj.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="culture-text">
|
||
<div class="culture-item-title">
|
||
<div>愿景</div>
|
||
<div class="culture-en">Vision</div>
|
||
</div>
|
||
<div class="culture-desc">
|
||
全球领先的AI服务运营商
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="culture-item">
|
||
<div class="culture-icon">
|
||
<div class="icon-placeholder">
|
||
<img src="./img/jzg.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="culture-text">
|
||
<div class="culture-item-title">
|
||
<div>价值观</div>
|
||
<div class="culture-en">Value</div>
|
||
</div>
|
||
<div class="culture-desc">
|
||
卓越、开放、创新
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 平台优势 -->
|
||
<div class="advantages">
|
||
<!-- 标题 -->
|
||
<div class="advantages-title">
|
||
平台<span class="color">优势</span>
|
||
</div>
|
||
<!-- 列表 -->
|
||
<div class="advantages-content">
|
||
<div
|
||
class="advantages-item"
|
||
v-for="(items, index) in advantagesList"
|
||
:key="index"
|
||
:class="'advantage-item-' + (index + 1)"
|
||
>
|
||
<div class="toptit">
|
||
{{ items.title }}
|
||
</div>
|
||
<div class="btm-text">
|
||
{{ items.desc }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { reqCompany } from '@/api/H5/index.js';
|
||
import '../media'
|
||
import Footer from '../components/footer/footer.vue';
|
||
export default {
|
||
name: 'AboutPage',
|
||
components: {
|
||
Footer
|
||
},
|
||
data() {
|
||
return {
|
||
companyData: {},
|
||
topImages: [
|
||
require('./img/qualifications_img/topimg1.png'),
|
||
require('./img/qualifications_img/topimg2.png'),
|
||
require('./img/qualifications_img/topimg3.png'),
|
||
require('./img/qualifications_img/topimg4.png'),
|
||
require('./img/qualifications_img/topimg5.png'),
|
||
require('./img/qualifications_img/topimg6.png'),
|
||
require('./img/qualifications_img/topimg7.png'),
|
||
require('./img/qualifications_img/topimg8.png')
|
||
],
|
||
bottomImages: [
|
||
require('./img/qualifications_img/btmimg1.png'),
|
||
require('./img/qualifications_img/btmimg2.png'),
|
||
require('./img/qualifications_img/btmimg3.png'),
|
||
require('./img/qualifications_img/btmimg4.png'),
|
||
require('./img/qualifications_img/btmimg5.png'),
|
||
require('./img/qualifications_img/btmimg6.png'),
|
||
require('./img/qualifications_img/btmimg7.png'),
|
||
require('./img/qualifications_img/btmimg8.png'),
|
||
require('./img/qualifications_img/btmimg9.png'),
|
||
require('./img/qualifications_img/btmimg10.png')
|
||
],
|
||
advantagesList: [
|
||
{
|
||
title: '精准定位',
|
||
desc: '专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。'
|
||
},
|
||
{
|
||
title: '技术服务',
|
||
desc: '提供人工智能相关的技术服务，为企业解决复杂的技术难题。'
|
||
},
|
||
{
|
||
title: '产品定制',
|
||
desc: '根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。'
|
||
},
|
||
{
|
||
title: '产业赋能',
|
||
desc: '通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。'
|
||
},
|
||
{
|
||
title: '一站式、本地化服务',
|
||
desc: '从售前、售中到售后提供一站式全方位服务'
|
||
},
|
||
{
|
||
title: '提供AI基础设施与模型服务',
|
||
desc: '提供整体底层技术架构和系统支持及模型服务'
|
||
}
|
||
],
|
||
advantageBgImages: [
|
||
require('./img/advantage1.png'),
|
||
require('./img/advantage2.png'),
|
||
require('./img/advantage3.png'),
|
||
require('./img/advantage4.png'),
|
||
require('./img/advantage5.png'),
|
||
require('./img/advantage6.png')
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
this.getCompanyInfo();
|
||
},
|
||
methods: {
|
||
async getCompanyInfo() {
|
||
// 获取当前页面的URL
|
||
const currentUrl = window.location.href;
|
||
|
||
// 调用接口，传递url_link参数
|
||
const res = await reqCompany({
|
||
url_link: currentUrl
|
||
});
|
||
|
||
console.log('公司信息接口返回:', res);
|
||
|
||
if (res.status === true) {
|
||
this.companyData = res.data[0].additional_msg.about.content;
|
||
} else {
|
||
console.error('获取公司信息失败:', res.msg || '未知错误');
|
||
}
|
||
},
|
||
},
|
||
// 监听路由变化如果路由变化需要重新获取数据
|
||
watch: {
|
||
'$route'(to, from) {
|
||
if (to.path !== from.path) {
|
||
this.getCompanyInfo();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.mian {
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.banner {
|
||
width: 100%;
|
||
background: url('./img/banner.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 4rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.title {
|
||
font-size: .3rem;
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dase {
|
||
font-size: .338rem;
|
||
color: #222f60;
|
||
margin-top: .1rem;
|
||
}
|
||
}
|
||
|
||
.introduce {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
background: linear-gradient(180deg, #fff 0%, #f6f8fd 40%, #fff 100%);
|
||
|
||
.left {
|
||
width: 20%;
|
||
font-size: .3rem;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: .3rem;
|
||
|
||
.color {
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 90%;
|
||
font-size: .2rem;
|
||
color: #000;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
// 公司资质样式
|
||
.qualifications {
|
||
margin-top: .4rem;
|
||
background: url('./img/footer.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 6rem;
|
||
|
||
.qualifications-title {
|
||
font-size: .3rem;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: .3rem;
|
||
|
||
.color {
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
}
|
||
|
||
.img-list {
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.top-img,
|
||
.bottom-img {
|
||
height: 50%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scroll-container {
|
||
display: inline-flex;
|
||
height: 100%;
|
||
white-space: nowrap;
|
||
animation-duration: 40s;
|
||
animation-timing-function: linear;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
|
||
.row1 {
|
||
animation-name: scrollLeftToRight;
|
||
}
|
||
|
||
.row2 {
|
||
animation-name: scrollRightToLeft;
|
||
}
|
||
|
||
.scroll-item {
|
||
flex: 0 0 auto;
|
||
width: 120px;
|
||
height: 100%;
|
||
margin: 0 10px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scroll-item img {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
object-fit: contain;
|
||
padding: .08rem;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 企业文化样式
|
||
.culture {
|
||
padding: 0 .2rem;
|
||
padding-top: .4rem;
|
||
background: linear-gradient(180deg, #d7e9ff 0%, #fff 100%);
|
||
|
||
.culture-title {
|
||
font-size: .3rem;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: .3rem;
|
||
|
||
.color {
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
}
|
||
|
||
.culture-content {
|
||
.culture-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: .3rem;
|
||
padding: .2rem;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
border-radius: .1rem;
|
||
|
||
.culture-icon {
|
||
width: .8rem;
|
||
height: .8rem;
|
||
border-radius: .1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: .2rem;
|
||
flex-shrink: 0;
|
||
|
||
.icon-placeholder {
|
||
font-size: .3rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
img {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
}
|
||
}
|
||
|
||
.culture-text {
|
||
flex: 1;
|
||
|
||
.culture-item-title {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: .1rem;
|
||
|
||
div:first-child {
|
||
font-size: .28rem;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-right: .1rem;
|
||
}
|
||
|
||
.culture-en {
|
||
font-size: .2rem;
|
||
color: #666;
|
||
font-style: italic;
|
||
}
|
||
}
|
||
|
||
.culture-desc {
|
||
font-size: .24rem;
|
||
color: #444;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 平台优势样式
|
||
.advantages {
|
||
padding: 0 .2rem;
|
||
margin-top: .4rem;
|
||
margin-bottom: .4rem;
|
||
|
||
.advantages-title {
|
||
font-size: .3rem;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: .3rem;
|
||
|
||
.color {
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
}
|
||
|
||
.advantages-content {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.advantages-item {
|
||
margin-bottom: .2rem;
|
||
width: 48%;
|
||
padding: .2rem;
|
||
box-shadow: 0 .05rem .15rem rgba(0, 0, 0, 0.05);
|
||
border-radius: .12rem;
|
||
background-size: 180% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position:right;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.toptit {
|
||
font-weight: 600;
|
||
color: #000;
|
||
font-size: .28rem;
|
||
margin-bottom: .1rem;
|
||
}
|
||
|
||
.btm-text {
|
||
font-size: .16rem;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
// 为每个优势项设置不同的背景图片
|
||
.advantage-item-1 {
|
||
background-image: url('./img/advantage1.png');
|
||
}
|
||
|
||
.advantage-item-2 {
|
||
background-image: url('./img/advantage2.png');
|
||
}
|
||
|
||
.advantage-item-3 {
|
||
background-image: url('./img/advantage3.png');
|
||
}
|
||
|
||
.advantage-item-4 {
|
||
background-image: url('./img/advantage4.png');
|
||
}
|
||
|
||
.advantage-item-5 {
|
||
background-image: url('./img/advantage5.png');
|
||
}
|
||
|
||
.advantage-item-6 {
|
||
background-image: url('./img/advantage6.png');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 滚动动画
|
||
@keyframes scrollLeftToRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
@keyframes scrollRightToLeft {
|
||
0% {
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
// 响应式调整
|
||
@media (max-width: 375px) {
|
||
.advantages-content .advantages-item {
|
||
width: 100%;
|
||
margin-bottom: .15rem;
|
||
|
||
.toptit {
|
||
font-size: .26rem;
|
||
}
|
||
|
||
.btm-text {
|
||
font-size: .15rem;
|
||
}
|
||
}
|
||
}
|
||
</style>
|