You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
276 lines
9.5 KiB
276 lines
9.5 KiB
<template>
|
|
<div class="cjy-pages">
|
|
<!-- 页面 头部 -->
|
|
<VHeader></VHeader>
|
|
<!-- 页面 广告条 -->
|
|
<div class="cjy-banner m-t-100">
|
|
<div class="cjy-banner-text">
|
|
<div class="title">{{ banner_data.title }}</div>
|
|
<div class="subtitle">{{ banner_data.subtitle }}</div>
|
|
</div>
|
|
<img :src="banner_data.logo" class="img" />
|
|
</div>
|
|
<!-- 页面 面包屑 -->
|
|
<div class="v-container">
|
|
<el-breadcrumb class="m-t-normal" separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>关于我们</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="cjy-page-item1">
|
|
<div class="v-container">
|
|
<el-row :gutter="150" class=" cjy-about-brief">
|
|
<el-col :span="12">
|
|
<img src="@/assets/images/logo_red.svg" class="logo" />
|
|
<div class="title">一家致力于文旅产业<br />软件研发及系统集成的服务商</div>
|
|
<div class="row date">
|
|
<div class="col-8">
|
|
<div class="top">2006</div>
|
|
<div class="bottom">公司成立(年)</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="top">{{ company_data.honor }}</div>
|
|
<div class="bottom">荣誉资质</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="top">{{ company_data.product }}</div>
|
|
<div class="bottom">研发产品</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" class="info" v-html="company_info.introduction"></el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<!-- 案例 详情 -->
|
|
<div class="v-container">
|
|
<div class="cjy-about-title text-center m-t-large">企业文化</div>
|
|
<div class="cjy-about-culture">
|
|
<div class="culture-top">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<div class="icon"></div>
|
|
<div class="title">定位</div>
|
|
<div class="info">文旅产业软件研发<br />及系统集成服务商</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="icon"></div>
|
|
<div class="title">愿景</div>
|
|
<div class="info">成为一家"小而美"<br />的科技型创新企业</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="icon"></div>
|
|
<div class="title">使命</div>
|
|
<div class="info">为文旅业态赋能<br />让文旅产业更智慧</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="icon"></div>
|
|
<div class="title">精神</div>
|
|
<div class="info">诚信守义<br />规矩方圆</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-row :gutter="30" class="culture-bot">
|
|
<el-col :span="12" v-for="(item, index) in company_culture.image" :key="index"><img :src="item" class="img" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<div class="cjy-page-item3 m-t-large">
|
|
<div>
|
|
<div class="cjy-about-title">企业历程</div>
|
|
<div class="cjy-about-step-info">投入资源提升技术，满足客户需求</div>
|
|
<div class="cjy-about-step row">
|
|
<div class="step-item" :class="index == 0 ? 'active' : ''" v-for="(item, index) in stage_data" :key="index">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="info">{{ item.subtitle }}</div>
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll :data="step_data" :class-option="classOption" class="cjy-about-step-date">
|
|
<ul class="ul-item">
|
|
<li class="li-item" v-for="(item, index) in step_data" :key="index">
|
|
<div class="date">{{ item.title }}</div>
|
|
<div class="content" v-html="item.introduction ? item.introduction : ''"></div>
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="v-container">
|
|
<div class="cjy-about-title text-center m-t-large m-b-base">资质证书及相关软著</div>
|
|
<el-carousel :interval="5000" arrow="always" class="certificate">
|
|
<el-carousel-item v-for="group in groupedCertificates" :key="group">
|
|
<div class="row cjy-about-certificate">
|
|
<div class="col-77" v-for="(item, index) in group" :key="index">
|
|
<div class="list-item flex-align-center">
|
|
<el-image class="img" :src="item" :preview-src-list="[item]">
|
|
</el-image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
|
|
</div>
|
|
<div class="v-container">
|
|
<div class="cjy-about-title text-center m-t-large">企业风采</div>
|
|
<div class="cjy-about-demeanou-info" v-html="demeanour_data.introduction ? demeanour_data.introduction : ''"></div>
|
|
<el-carousel :interval="4000" type="card" height="300px">
|
|
<el-carousel-item v-for="item in demeanour_data.image" :key="item" class="cjy-about-demeanour">
|
|
<el-image class="img" :src="item" :preview-src-list="[item]">
|
|
</el-image>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
<div class="v-container">
|
|
<div class="cjy-page-item4 m-t-large m-b-large">
|
|
<div class="cjy-about-box">
|
|
<div class="title">联系我们</div>
|
|
<div class="info">我们期待您的来信，一起携手建设智慧城市。</div>
|
|
<div class="tel">{{ company_data.phone }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 页面 底部 -->
|
|
<VBottom></VBottom>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import * as Api from "@/api/cjy/columninfo"
|
|
import * as companyApi from '@/api/cjy/company';
|
|
|
|
export default {
|
|
name: "about-us",
|
|
components: {
|
|
vueSeamlessScroll
|
|
},
|
|
data() {
|
|
return {
|
|
banner_data: {
|
|
subtitle: null,
|
|
title: null
|
|
},//广告图
|
|
company_info: {
|
|
content: null
|
|
},//企业简介
|
|
company_data: {
|
|
honor: null,
|
|
product: null,
|
|
content: null,
|
|
},//企业信息
|
|
company_culture: {
|
|
image: []
|
|
},//企业文化
|
|
stage_data: null,//发展阶段数据
|
|
step_data: [],//发展历程数据
|
|
certificates: [], // 假设这是从接口获取的原始数据
|
|
groupedCertificates: [], // 新数组，用于存储分组后的数据
|
|
demeanour_data: {
|
|
introduction: null
|
|
},//企业风采
|
|
classOption: {
|
|
limitMoveNum: 2,
|
|
direction: 2,
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getCompany()//获取公司简介
|
|
this.getStage()//获取发展阶段)
|
|
this.getStep()//获取发展历程
|
|
this.getCertificate()//资质证书及相关软著
|
|
this.getDemeanour()//获取企业风采
|
|
},
|
|
methods: {
|
|
//获取企业信息 函数
|
|
async getCompany() {
|
|
let res = await companyApi.getColumnInfo();
|
|
this.company_data = res.data
|
|
|
|
let info = await Api.getColumnInfoList({ type: 2 });
|
|
this.company_info = info.data.list[0]
|
|
|
|
let banner = await Api.getColumnInfoList({ type: 12 });
|
|
this.banner_data = banner.data.list[0]
|
|
|
|
let culture = await Api.getColumnInfoList({ type: 11 });
|
|
this.company_culture = culture.data.list[0]
|
|
this.company_culture.image = this.company_culture.image.split(',')
|
|
},
|
|
//获取发展阶段 函数
|
|
async getStage() {
|
|
let res = await Api.getColumnInfoList({ type: 9 })
|
|
this.stage_data = res.data.list
|
|
},
|
|
//获取发展历程 函数
|
|
async getStep() {
|
|
let res = await Api.getColumnInfoList({ type: 8 })
|
|
this.step_data = res.data.list
|
|
},
|
|
//获取资质证书及相关软著 函数
|
|
async getCertificate() {
|
|
let res = await Api.getDetail(31)
|
|
if (res.data.image) {
|
|
if (res.data.image.includes(',')) {
|
|
this.certificates = res.data.image.split(',')
|
|
} else {
|
|
this.certificates = [res.data.image]
|
|
}
|
|
}
|
|
|
|
this.groupCertificates(); // 调用分组方法
|
|
},
|
|
groupCertificates() {
|
|
|
|
if (this.certificates && this.certificates.length > 0) {
|
|
for (let i = 0; i < this.certificates.length; i += 14) {
|
|
this.groupedCertificates.push(this.certificates.slice(i, i + 14));
|
|
}
|
|
} else {
|
|
this.groupedCertificates = []
|
|
}
|
|
},
|
|
//获取企业风采 函数
|
|
async getDemeanour() {
|
|
let res = await Api.getColumnInfoList({ type: 10 })
|
|
this.demeanour_data = res.data.list[0]
|
|
this.demeanour_data.image = this.demeanour_data.image.split(',')
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.cjy-page-item1 {
|
|
height: 600px;
|
|
padding-top: 120px;
|
|
margin-top: -30px;
|
|
background: url("~@/assets/images/about-item1-bg.jpg");
|
|
background-size: contain;
|
|
background-position: left;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.cjy-page-item3 {
|
|
padding: 70px 50px 50px 380px;
|
|
height: 514px;
|
|
background: url("~@/assets/images/about-step-bg.png");
|
|
background-size: contain;
|
|
background-position: left;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.cjy-page-item4 {
|
|
padding: 50px;
|
|
height: 360px;
|
|
background: url("~@/assets/images/content-bg.jpg");
|
|
background-size: contain;
|
|
background-position: left;
|
|
background-repeat: no-repeat;
|
|
}
|
|
</style>
|
|
|