|
|
@@ -1,44 +1,102 @@
|
|
|
<template>
|
|
|
- <div class="top-banne">
|
|
|
- <p class="title">做中国卓越的智能数据产品和服务供应商</p>
|
|
|
- <div class="btn-list">
|
|
|
- <button class="free">免费试用</button
|
|
|
- ><button class="consult">立即咨询</button>
|
|
|
- </div>
|
|
|
+ <div class="block text-center">
|
|
|
+ <el-carousel arrow="never">
|
|
|
+ <el-carousel-item v-for="(item, index) in banneImageList" :key="index">
|
|
|
+ <img class="version-img" :src="item.imgUrl || item.image" alt="" />
|
|
|
+ <div class="btn-list">
|
|
|
+ <button class="detail" @click="onTrial">
|
|
|
+ {{ item.title }}
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="detail"
|
|
|
+ @click="service"
|
|
|
+ style="background-color: #fff; color: #222"
|
|
|
+ >
|
|
|
+ {{ item.title_2 }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
</div>
|
|
|
<div class="about">
|
|
|
<div class="about-left">
|
|
|
<p class="heng"></p>
|
|
|
<p class="about-name">关于我们</p>
|
|
|
<p class="about-content">
|
|
|
- 格子探索系阿里云旗下主要科技生产型团队、结合阿里的云资源、深度技术架构以及“客户之上”的大厂高空优势，格子致力于为客户提供全生命周期的售前、售中、售后技术开发服务。用超前的技术研发优势，和丰富的项目经验为市场不断提供产品级应用层开发服务。
|
|
|
- 我们的主要产品是云厂长。云厂长 -
|
|
|
- 成长型智能制造的最佳助手，在数字化时代的浪潮中，云厂长全流程生产管理系统，以数字生产4.0为框架，打造了一款专为制造业设计的一站式全流程管理平台。我们的核心是工业ERP系统，它不仅集成了企业资源规划的深度功能，还通过插件式设计，无缝融合了“人"、“财”、“物”、“业”、“项目管理”等多元化办公应用场景。AIGC技术
|
|
|
- -智能内容生成的革命云厂长的创新之处在于其深度融合了人工智能生成内容(AIGC)技术。这项前沿技术赋予了我们的系统以前所未有的智能分析能力，能够根据实时数据生成深度洞察报告，辅助企业决策者洞察市场趋势，优化资源配置。
|
|
|
+ {{ aboutData.about_us_content }}
|
|
|
</p>
|
|
|
</div>
|
|
|
- <div class="about-video"></div>
|
|
|
+ <img class="about-video" :src="aboutData.about_us_image" alt="" />
|
|
|
</div>
|
|
|
<div class="publicize">
|
|
|
<p class="publicize-title">宣传视频</p>
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="用产品征服世界" name="first"
|
|
|
- ><img class="pane-content" src="../../assets/image/bg.png" alt=""
|
|
|
- /></el-tab-pane>
|
|
|
- <el-tab-pane label="用技术应对挑战" name="second">Config</el-tab-pane>
|
|
|
- <el-tab-pane label="用服务温暖人心" name="third">Role</el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="item in publicizeList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.title"
|
|
|
+ :name="item.id"
|
|
|
+ >
|
|
|
+ <video controls class="pane-content" :src="item.video"></video>
|
|
|
+ </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
+ <ContactExpert @close="close" :dialogTableVisible="dialogTableVisible" />
|
|
|
+ <Form :dialogTableVisible2="dialogTableVisible2" @clos="close" />
|
|
|
<Bottom />
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from "vue";
|
|
|
+import { ref, onMounted } from "vue";
|
|
|
+import { config } from "../../api/config";
|
|
|
+import { getVideo } from "../../api/about";
|
|
|
+import { getBanneList } from "../../api/home";
|
|
|
import Bottom from "../../components/Layout/bottom.vue";
|
|
|
-const activeName = ref("first");
|
|
|
+import ContactExpert from "../Home/component/contactExpert.vue";
|
|
|
+import Form from "../../components/Form/from.vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+const activeName = ref("");
|
|
|
+const aboutData: any = ref({});
|
|
|
+const publicizeList: any = ref([]);
|
|
|
+const banneImageList: any = ref([]);
|
|
|
+const dialogTableVisible = ref(false);
|
|
|
+const dialogTableVisible2 = ref(false);
|
|
|
+
|
|
|
+const close = () => {
|
|
|
+ dialogTableVisible.value = false;
|
|
|
+ dialogTableVisible2.value = false;
|
|
|
+};
|
|
|
|
|
|
const handleClick = (tab: any, event: Event) => {
|
|
|
console.log(tab, event);
|
|
|
};
|
|
|
+
|
|
|
+//获取数据
|
|
|
+const getInfo = () => {
|
|
|
+ config({ module: "basic" }).then((res) => {
|
|
|
+ aboutData.value = res.data;
|
|
|
+ });
|
|
|
+ getVideo().then((res) => {
|
|
|
+ publicizeList.value = res.data;
|
|
|
+ activeName.value = res.data[0].id;
|
|
|
+ });
|
|
|
+ getBanneList("about_us").then((res) => {
|
|
|
+ banneImageList.value = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const service = () => {
|
|
|
+ dialogTableVisible.value = true;
|
|
|
+};
|
|
|
+const onTrial = () => {
|
|
|
+ ElMessage({
|
|
|
+ type: "warning",
|
|
|
+ message: "待开放",
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getInfo();
|
|
|
+});
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
.top-banne {
|
|
|
@@ -53,27 +111,6 @@ const handleClick = (tab: any, event: Event) => {
|
|
|
color: #222;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .btn-list {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 74px;
|
|
|
- .free {
|
|
|
- width: 158px;
|
|
|
- height: 56px;
|
|
|
- border: none;
|
|
|
- background-color: #0d0fff;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- margin-right: 24px;
|
|
|
- }
|
|
|
- .consult {
|
|
|
- width: 158px;
|
|
|
- height: 56px;
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
- border: 1px solid #0d0fff;
|
|
|
- color: #0d0fff;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.about {
|
|
|
display: flex;
|
|
|
@@ -103,9 +140,14 @@ const handleClick = (tab: any, event: Event) => {
|
|
|
.about-video {
|
|
|
width: 540px;
|
|
|
height: 450px;
|
|
|
- background-color: #d8d8d8;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.btn-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 74px;
|
|
|
+}
|
|
|
.publicize {
|
|
|
padding: 82px 0 90px;
|
|
|
background-color: #f5f9ff;
|
|
|
@@ -145,4 +187,41 @@ const handleClick = (tab: any, event: Event) => {
|
|
|
color: #0d0fff;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
+.demonstration {
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-carousel__container) {
|
|
|
+ height: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail {
|
|
|
+ position: relative;
|
|
|
+ width: 168px;
|
|
|
+ height: 53px;
|
|
|
+ background-color: #0d0fff;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 1000;
|
|
|
+ bottom: 240px;
|
|
|
+ left: 0px;
|
|
|
+ margin-right: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0px 4px 14px -4px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+.el-carousel__item img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.el-carousel__item:nth-child(2n) {
|
|
|
+ background-color: #99a9bf;
|
|
|
+}
|
|
|
+
|
|
|
+.el-carousel__item:nth-child(2n + 1) {
|
|
|
+ background-color: #d3dce6;
|
|
|
+}
|
|
|
</style>
|
