<template>
	<div id="home">
		<div class="header">
			<div class="header-img">
				<img src="@/assets/image/sailunlogo.svg" alt="" />
			</div>
			<div @click="goId">产品与服务</div>
			<!-- <div>项目案例</div> -->
			<div>帮助文档</div>
			<div @click="login">用户登录</div>
		</div>
		<div class="block">
			<el-carousel trigger="click" height="485px" arrow="always" :interval="intervalTime">
				<el-carousel-item v-for="(item, index) in carousel" :key="index">
					<div class="carousel">
						<div class="carousel-content">
							<div class="carousel-header">{{ item.title }}</div>
							<div v-show="item.content.length === 4" class="carousel-body" v-for="(i, k) in item.content" :key="k">
								{{ i }}
							</div>
							<div v-if="item.content.length > 4" class="carousel-body">
								{{ item.content }}
							</div>
							<div class="carousel-btn" @click="login">立即体验</div>
						</div>
						<div class="carousel-img">
							<img :src="item.img" alt="" />
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
		<el-row>
			<el-col :span="20" :offset="2">
				<div class="module-title">
					<div class="module-content">
						<div class="icon">
							<div class="iconOne"></div>
						</div>
						<div class="content-body">
							<div>快速入门</div>
							<div>仅需几步，快速入门</div>
						</div>
					</div>
					<div class="line"></div>
					<div class="module-content">
						<div class="icon">
							<div class="iconTwo"></div>
						</div>
						<div class="content-body" @click="iassGo">
							<div>橡链云 IaaS 平台</div>
							<div>IaaS 基础设施即服务, 可申请虚拟机服务器资源</div>
						</div>
					</div>
					<div class="line"></div>
					<div class="module-content">
						<div class="icon">
							<div class="iconThree"></div>
						</div>
						<div class="content-body" @click="routerGo">
							<div>橡链云容器PaaS平台</div>
							<div>PaaS 平台即服务, 提供应用秒级部署和灰度发布</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="20" :offset="2">
				<div class="title" id="productService">
					<div>产品与服务</div>
					<div>专业的容器 PaaS 云平台</div>
				</div>
			</el-col>
			<el-col :span="20" :offset="2">
				<div class="service">
					<div
						class="service-content"
						v-for="(item, index) in serviceList"
						:key="index"
						:class="active === index ? 'active' : ''"
						@click="switchService(index)"
					>
						<!-- <img :src="item.icon" alt="" /> -->
						<div :class="'serviceImage' + index"></div>
						<div>{{ item.name }}</div>
						<div v-if="active === index" class="service-line"></div>
					</div>
				</div>
				<div class="service-menu" v-show="active === 0 ? true : active">
					<div class="menu-every" v-for="(item, index) in menuList" :key="index">
						<div class="service-title">{{ item.name }}</div>
						<div class="service-desc">{{ item.description }}</div>
					</div>
				</div>
			</el-col>
			<el-col :span="20" :offset="2">
				<div class="service">
					<div
						class="service-content"
						v-for="(item, index) in serviceList1"
						:key="index"
						:class="active1 === index ? 'active1' : ''"
						@click="switchService1(index)"
					>
						<img :src="item.icon" alt="" />
						<div>{{ item.name }}</div>
						<div v-if="active1 === index" class="service-line"></div>
					</div>
				</div>
				<div class="service-menu" v-show="active1 === 0 ? true : active1">
					<div class="menu-every" v-for="(item, index) in menuList" :key="index">
						<div class="service-title">{{ item.name }}</div>
						<div class="service-desc">{{ item.description }}</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- <el-row class="case">
      <el-col :span="20" :offset="2">
        <div class="case-title">
          <div>项目案例</div>
          <div>为客户创造核心价值, 赋能客户成为行业领导者</div>
        </div>
        <div class="case-module">
          <div
            class="case-content"
            v-for="(item, index) in caseList"
            :key="index"
          >
            <div :class="'caseImage' + index"></div>
            <div class="case-name">{{ item.name }}</div>
            <div class="case-desc">{{ item.description }}</div>
          </div>
        </div>
      </el-col>
    </el-row> -->
		<!-- <el-row>
      <el-col :span="20" :offset="2">
        <div class="platform-title">
          <div>平台实力</div>
          <div>全方位保障，支撑业务稳健运行</div>
        </div>
        <div class="platform">
          <div
            class="platform-content"
            v-for="(item, index) in platformList"
            :key="index"
          >
            <el-progress
              type="dashboard"
              :percentage="percentage"
              color="#125fa3"
              :show-text="showText"
            >
            </el-progress>
            <div class="platform-num">
              <span>{{ item.number }}</span>
              <span>+</span><span>{{ item.unit }}</span>
            </div>
            <div class="platform-name">{{ item.name }}</div>
          </div>
        </div>
      </el-col>
    </el-row> -->
		<el-row class="advantage">
			<el-col :span="20" :offset="2">
				<div class="advantage-title">
					<div>橡链云的特点和优势</div>
					<div>赋能业务, 共创未来, 为 Cloud Native 应用而生</div>
				</div>
				<div class="advantage-content">
					<div class="advantage-left">
						<div class="advantage-module" v-for="(item, index) in advantageListLeft" :key="index">
							<div class="advantage-name">{{ item.name }}</div>
							<div class="advantage-desc">{{ item.desc }}</div>
						</div>
					</div>
					<div class="advantage-middle">
						<img src="../assets/image/quto.png" alt="" />
					</div>
					<div class="advantage-right">
						<div class="advantage-module" v-for="(item, index) in advantageListRight" :key="index">
							<div class="advantage-name">{{ item.name }}</div>
							<div class="advantage-desc">{{ item.desc }}</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="journey">
			<div class="journey-font">开启你的云之旅</div>
			<div class="journey-btn" @click="login">立即体验</div>
		</div>
		<el-row class="footer">
			<div class="content">
				<div class="left">
					<img v-if="ServiceTel" class="img" src="../assets/image/foot1.png" alt="客服" />
					<p v-if="ServiceTel">客服热线</p>
					<p v-if="ServiceTel">
						{{ ServiceTel }}
					</p>
				</div>
				<div class="center">
					<div class="outconnection">
						<a v-if="AboutUs" :href="AboutUs" target="_blank">关于我们</a>
						<a v-if="JoinUs" :href="JoinUs" target="_blank">人才招聘</a>
						<a v-if="ContactUs" :href="ContactUs" target="_blank">联系我们</a>
					</div>
					<div class="copyright">
						<span v-if="copyright">{{ copyright }}</span>
					</div>
				</div>
				<div class="right">
					<img v-if="QRcode" :src="QRcode" alt="二维码" />
				</div>
			</div>
		</el-row>
	</div>
</template>

<script>
import { getLoginType } from "@/utils/api/api"
import { getToken } from "@/utils/auth"
import baseURL from "@/utils/app"
export default {
	name: "Home",
	data() {
		return {
			QRcode: baseURL.VUE_APP_QR_CODE,
			ServiceTel: baseURL.VUE_APP_SERVICE_TEL,
			ContactUs: baseURL.VUE_APP_CONTAC_US,
			JoinUs: baseURL.VUE_APP_JOIN_US,
			AboutUs: baseURL.VUE_APP_ABOUT_US,
			copyright: baseURL.VUE_APP_COPYRIGHT,
			intervalTime: 5000, //轮播图轮播时间
			carousel: [
				{
					img: require("../assets/image/home/banner1.png"),
					title: "橡链云 v2.0 正式发布",
					content: "平台版本上线通知"
				},
				{
					img: require("../assets/image/home/banner2.png"),
					title: "支撑与引领创新技术落地",
					content: "具有负载均衡、弹性伸缩、灰度升级、域名绑定和日志监控，提供容器组的服务编排，在构建微服务架构模式上具有领先优势"
				},
				{
					img: require("../assets/image/home/banner3.png"),
					title: "多快好省优势",
					content: [
						"多：覆盖30+系统上云；",
						"快：快速交付；",
						"好：实现云端应用的创建、编译、集成、部署、运行的理想平台；",
						"省：省钱、省时、省力、省心"
					]
				},
				{
					img: require("../assets/image/home/banner4.png"),
					title: "坚持“匠心”精神",
					content: "踏踏实实地用专注做好每一个项目"
				}
			],
			serviceList: [
				{
					icon: require("../assets/image/home/1.png"),
					name: "容器"
				},
				{
					icon: require("../assets/image/home/2.png"),
					name: "CI/CD"
				},
				{
					icon: require("../assets/image/home/3.png"),
					name: "管理与监控"
				},
				{
					icon: require("../assets/image/home/4.png"),
					name: "API 网关"
				}
			],
			serviceList1: [
				{
					icon: require("../assets/image/home/5.png"),
					name: "数据库与缓存"
				},
				{
					icon: require("../assets/image/home/6.png"),
					name: "交付中心"
				},
				{
					icon: require("../assets/image/home/7.png"),
					name: "微服务治理"
				},
				{
					icon: require("../assets/image/home/8.png"),
					name: "软件工程过程管理"
				}
			],
			menuList: [
				{
					name: "容器服务",
					description: "容器是从镜像创建的应用运行实例"
				},
				{
					name: "应用管理",
					description: "应该表示多个容器服务的的集合,对容器进行标识管理"
				},
				{
					name: "工作负载",
					description: "工作负载是业务应用在底层k8s上运行的资源类型"
				},
				{
					name: "网络管理",
					description: "对应k8s Service，主要是为工作负载的原生资源提供 Service 管理"
				},
				{
					name: "存储管理",
					description: "存储（volume）主要用于持久化存储 Docker 容器的数据"
				},
				{
					name: "堆栈",
					description: "堆栈内管理维护，堆栈所有元素资源的生命周期，可以查看堆栈全部的应用、服务、容器等相关资源"
				}
			],
			active: 0,
			active1: undefined,
			caseList: [
				{
					icon: require("../assets/image/home/案例1.png"),
					name: "ECP-X",
					description:
						"基于微服务架构，以提效为目的，提高客户与用户满意度为目标，建立符合橡链云线上及新零售（O2O）业务高效的、统一的营销中台系统"
				},
				{
					icon: require("../assets/image/home/案例2.png"),
					name: "APS",
					description: "计划排产系统，旨在缩短工厂对市场需求的承诺周期，提高内销订单保障率，资源保证情况、计划排产数据等数据透明化"
				},
				{
					icon: require("../assets/image/home/案例3.png"),
					name: "差旅",
					description:
						"该平台可实现员工出差申请、出差消费、报账推送的一站式服务，同时管理员可通过设置差旅标准、超额审批等操作，灵活闭环管理，提高全流程时效"
				},
				{
					icon: require("../assets/image/home/案例4.png"),
					name: "WAS",
					description:
						"基于国际领先的Storm大数据实时计算技术和海量的数据资源，为IT系统提供专注、高效的系统运行统计分析解决方案，提升用户满意度"
				},
				{
					icon: require("../assets/image/home/案例5.png"),
					name: "大物流平台一期",
					description:
						"满足内部业务整合、外部业务拓展、独立物流公司运作要求；构建了B2B仓储配送信息系统管理体系、B2C送装一体全流程信息化支持体系"
				}
			],
			platformList: [
				{
					name: "pod 数量",
					number: "1000",
					unit: "个"
				},
				{
					name: "核心项目数量",
					number: "30",
					unit: "个"
				},
				{
					name: "存储空间",
					number: "20T",
					unit: ""
				},
				{
					name: "服务器总量",
					number: "200",
					unit: "个"
				}
			],
			percentage: 100, //进度条进度
			showText: false,
			advantageListLeft: [
				{
					name: "提供标准的体系建设",
					desc: "提供统一的资源申请、应用开发、应用部署与服务监控解决方案"
				},
				{
					name: "秒级部署和灰度发布",
					desc: "可实现秒级部署与灰度发布，可自动实现应用的负载均衡、弹性伸缩、灰度升级、域名绑定与日志监控"
				},
				{
					name: "精细化运营和可视化管理",
					desc: "通过容器技术实现对资源的精细化运营管理，自主研发看板，可实现开发过程、运维、系统健康可视化管理"
				},
				{
					name: "提供智能运维",
					desc: "基于CaaS容器云平台、统一服务网关和DevOps一体化运维三大功能模块进行构建，为企业内部应用提供镜像构建、持续集成、容器托管与智能运维服务"
				}
			],
			advantageListRight: [
				{
					name: "一站式上云",
					desc: "橡链云团队具备云平台架构、开发、测试和运维经验，提供一站式上云、云端开发和运维技术支持和服务"
				},
				{
					name: "稳定健壮",
					desc: "底层提供高可用的虚拟环境、存储环境和网络环境，来确保上层应用和容器的稳健运行"
				},
				{
					name: "以用户为中心",
					desc: "橡链云团队坚持以用户为中心，致力于科技创新，未来将持续为集团各业务领域用户提供基于云平台战略的IT服务"
				},
				{
					name: "团队保障",
					desc: "流程IT云平台团队汇聚了该技术领域精英，具备云平台架构、开发、测试和运维经验，提供一站式上云、云端开发和运维技术支持和服务"
				}
			],
			footerList: [
				{
					title: "帮助与文档",
					content: [
						{
							title: "产品操作文档",
							link: ""
						},
						{
							title: "微服务操作文档",
							link: ""
						}
					]
				},
				{
					title: "友情链接",
					content: [
						{
							title: "橡链云控股公司",
							link: ""
						}
					]
				},
				{
					title: "热门问题",
					content: [
						{
							title: "热门问题",
							link: ""
						},
						{
							title: "常见问题",
							link: ""
						}
					]
				},
				{
					title: "联系我们",
					content: [
						{
							title: "关于我们",
							link: ""
						},
						{
							title: "合作伙伴",
							link: ""
						},
						{
							title: "联系我们",
							link: ""
						}
					]
				}
			]
		}
	},
	methods: {
		//服务切换
		switchService(index) {
			this.active = index
			if (index === 0) {
				//容器
				this.menuList = [
					{
						name: "容器服务",
						description: "容器是从镜像创建的应用运行实例"
					},
					{
						name: "应用管理",
						description: "应该表示多个容器服务的的集合,对容器进行标识管理"
					},
					{
						name: "工作负载",
						description: "工作负载是业务应用在底层k8s上运行的资源类型"
					},
					{
						name: "网络管理",
						description: "对应k8s Service，主要是为工作负载的原生资源提供 Service 管理"
					},
					{
						name: "存储管理",
						description: "存储（volume）主要用于持久化存储 Docker 容器的数据"
					},
					{
						name: "堆栈",
						description: "堆栈内管理维护，堆栈所有元素资源的生命周期，可以查看堆栈全部的应用、服务、容器等相关资源"
					}
				]
			} else if (index === 1) {
				//cicd
				this.menuList = [
					{
						name: "CI/CD概览",
						description: "CI/CD 是一种通过在应用开发阶段引入自动化来频繁向客户交付应用的方法，持续交付，持续集成"
					},
					{
						name: "代码仓库",
						description: "用存放代码所在的存放仓库"
					},
					{
						name: "流水线",
						description: "在这里完成镜像构建、克隆代码、审批流程、Jenkins任务、部署容器等CI/CD任务的定义与执行"
					},
					{
						name: "Dockerfile",
						description: "保存用户在编辑过程中创建的Dockerfile文件，方便再次查看、编辑或使用"
					},
					{
						name: "缓存卷",
						description: "存放代码就相关文件，用于保存相关代码数据"
					},
					{
						name: "第三方工具",
						description: "支持 Jenkins 平台完整对接"
					}
				]
			} else if (index === 2) {
				//监控与管理
				this.menuList = [
					{
						name: "驾驶舱",
						description: "项目人员查看自己所在项目情况相关数据统计数据"
					},
					{
						name: "日志管理",
						description: "保存容器实例操作生成的日志，并统一化管理"
					},
					{
						name: "监控面板",
						description: "实现监控数据可视化，提供了自定义监控面板的功能，方便时发现问题，快速运维"
					},
					{
						name: "告警设置",
						description: "告警管理包含资源告警和日志告警两个模块，实现实时监控容器应用是否正常运行"
					},
					{
						name: "告警记录",
						description: "告警记录页面呈现了历史所有的告警策略产生的告警情况"
					}
				]
			} else {
				//api网关
				this.menuList = [
					{
						name: "API概览",
						description: "通过预先定义的函数，指定服务间不同组成部分衔接的约定"
					},
					{
						name: "开发API",
						description: "用于创建服务的相关API规则，监控其调用情况"
					},
					{
						name: "调用API",
						description: "发布管理服务的API"
					}
				]
			}
			this.active1 = undefined
		},
		switchService1(index) {
			this.active1 = index
			if (index === 0) {
				//数据库缓存
				this.menuList = [
					{
						name: "MySQL集群",
						description: "MySQL集群是一种分布式设计，目标是要达到没有任何单点故障点"
					},
					{
						name: "Redis集群",
						description: "利用Redis集群，将对Redis的访问分配到各个结点，以减小单个结点的压力"
					},
					{
						name: "ZooKeeper 集群",
						description:
							"ZooKeeper 是一个开源的分布式协调服务，设计目标是将那些复杂且容易出错的分布式一致性服务封装起来，构成一个高效可靠的原语集"
					},
					{
						name: "ES集群",
						description: "ElasticSearch 支持分布式部署，通过集群部署可以提高系统的可用性"
					},
					{
						name: "MongoDB 集群",
						description: "MongoDB 副本集完全兼容MongoDB协议，提供稳定可靠、弹性伸缩的数据库服务"
					}
				]
			} else if (index === 1) {
				//交付中心
				this.menuList = [
					{
						name: "应用模板",
						description: "创建统一服务模板，方便快速创建统一服务"
					},
					{
						name: "镜像仓库",
						description: "应用镜像存放仓库用于，镜像包整理"
					},
					{
						name: "应用包管理",
						description: "应用包整理，使用应用包一键部署"
					},
					{
						name: "编排文件",
						description: "yaml模版文件，修改yaml模板内容快速创建服务"
					},
					{
						name: "应用商店",
						description: "通用镜像，应用包的发布管理"
					},
					{
						name: "服务目录",
						description: "快速创建常用的中间件服务集群"
					}
				]
			} else if (index === 2) {
				//微服务治理
				this.menuList = [
					{
						name: "微服务概览",
						description: "微服务架构是一项在云中部署应用和服务技术，微服务云架构和平台，使部署、管理和服务功能交付变得更加简单"
					},
					{
						name: "治理-SpringCloud",
						description: "实现服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等功能"
					}
				]
			} else {
				//软件工程过程管理
				this.menuList = [
					{
						name: "项目概览",
						description: "相关相关项目的迭代总览情况，项目类型分部"
					},
					{
						name: "需求管理",
						description: "展示项目部门相关需求，迭代进度及关系结果图"
					},
					{
						name: "交付管理",
						description: "统计相关jira项目活动交付情况"
					},
					{
						name: "研发质量",
						description: "相关各项目代码研发质量，根据sonarqube统计代码趋势图"
					},
					{
						name: "版本发布",
						description: "各项目部门项目版本发布管理"
					}
				]
			}
			this.active = undefined
		},
		//获取登录方式
		login() {
			if (getToken()) {
				window.location.href = baseURL.VUE_APP_PDMS_PATH
			} else {
				getLoginType().then(() => {
					this.$router.push({ path: "/login" })
				})
			}
		},
		goId() {
			//选中id
			document.getElementById("productService").scrollIntoView({
				behavior: "smooth", // 平滑过渡
				block: "start" // 上边框与视窗顶部平齐。默认值
			})
		},
		routerGo() {
			if (getToken()) {
				// this.$router.push({ path: "/login" });
				window.location.href = baseURL.VUE_APP_PDMS_PATH
			} else {
				getLoginType().then(() => {
					this.$router.push({ path: "/login" })
				})
			}
		},
		iassGo() {
			if (baseURL.VUE_APP_IAAS_PATH) {
				window.location.href = baseURL.VUE_APP_IAAS_PATH
			}
		}
	}
}
</script>
<style lang="scss">
@import "src/assets/styles/encapsulation";
#home {
	min-width: 100px;
	position: relative;
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
	}

	.el-carousel__item {
		background-image: url("../assets/image/home/banner-bg.jpg");
		background-size: cover;
	}

	::v-deep .el-carousel__arrow {
		font-size: 40px;
		height: 0;
		width: 0;
		top: 40%;
		opacity: 0.5;
	}

	::v-deep .el-carousel__arrow:hover {
		opacity: 1;
	}

	::v-deep .el-carousel__arrow--right {
		right: 53px;
	}

	.header {
		position: absolute;
		z-index: 2;
		width: 100%;
		display: flex;
		height: 70px;
		align-items: center;
		font-size: 14px;
		background-color: rgba(0, 0, 0, 0);
		color: #ffffff;
		div {
			margin-left: 50px;
			cursor: pointer;
		}

		div:last-child {
			position: absolute;
			right: 4%;
			padding: 7px 28px;
			border-radius: 3px;
			background-color: $primary-color;
			color: #ffffff;
			cursor: pointer;
		}
	}
	.block {
		position: relative;
		z-index: 1;
	}
	.header-img img {
		height: 40px;
	}

	::v-deep .el-carousel__indicators--horizontal {
		bottom: 100px;
	}

	::v-deep .el-carousel__button {
		width: 50px;
		height: 4px;
	}

	::v-deep .el-carousel__indicator--horizontal {
		padding: 12px 8px;
	}

	.carousel {
		width: 80%;
		margin: 0 auto;
		display: flex;

		.carousel-content {
			color: #fff;
			width: 50%;
			// margin: 0 auto;
			margin-top: 100px;

			.carousel-header {
				font-size: 42px;
				margin-bottom: 20px;
			}

			.carousel-body {
				font-size: 18px;
				color: #fff;
				line-height: 30px;
				width: 570px;
			}

			.carousel-btn {
				float: left;
				width: 130px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: #ffffff;
				border-radius: 3px;
				cursor: pointer;
				border: 1px solid $primary-color;
				background-color: $primary-color !important;
				margin-top: 40px;
				font-size: 14px;

				&:hover {
					color: inherit;
				}
			}
		}

		.carousel-img {
			width: 50%;
			height: 458px;
			transform: translateY(20px);
			text-align: center;

			img {
				width: 80%;
				height: 80%;
			}
		}
	}

	.module-title {
		display: flex;
		justify-content: space-between;
		height: 110px;
		box-shadow: 0 0 10px 0 rgb(0 0 0 / 18%);
		position: relative;
		top: -55px;
		z-index: 999;
		background-color: #fff;

		.module-content {
			width: 400px;
			display: flex;
			align-items: center;
			cursor: pointer;
			.icon {
				width: 100px;
				height: 86px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconOne {
					background-image: url("../assets/image/home/sprites.png");
					width: 40px;
					height: 40px;
				}
				.iconTwo {
					width: 40px;
					height: 40px;
					background: url("../assets/image/home/sprites.png") -85px 0;
				}
				.iconThree {
					width: 40px;
					height: 40px;
					background: url("../assets/image/home/sprites.png") -41px 0;
				}
			}

			.content-body {
				width: 220px;

				div {
					font-size: 18px;
					line-height: 35px;
				}

				div + div {
					font-size: 14px;
					line-height: 20px;
					opacity: 0.4;
				}
			}
		}

		.line {
			height: 80px;
			width: 1px;
			background: rgba(0, 0, 0, 0.1);
			margin-top: 15px;
		}
	}

	.title {
		text-align: center;
		margin-top: 55px;

		div {
			font-size: 28px;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 20px;
		}

		div + div {
			font-size: 16px;
			color: #999;
		}
	}

	.service {
		display: flex;
		justify-content: space-around;
		margin-top: 40px;

		.service-content {
			width: 25%;
			height: 120px;
			text-align: center;
			cursor: pointer;
			.serviceImage0 {
				width: 60px;
				height: 60px;
				background: url("../assets/image/home/sprites.png") 0 -40px;
				margin: 0 auto;
			}
			.serviceImage1 {
				width: 60px;
				height: 60px;
				background: url("../assets/image/home/sprites.png") -60px -40px;
				margin: 0 auto;
			}
			.serviceImage2 {
				width: 60px;
				height: 60px;
				background: url("../assets/image/home/sprites.png") -120px -40px;
				margin: 0 auto;
			}
			.serviceImage3 {
				width: 60px;
				height: 60px;
				background: url("../assets/image/home/sprites.png") -180px -40px;
				margin: 0 auto;
			}
			.serviceImage4 {
				width: 60px;
				height: 60px;
				background: url("../assets/image/home/sprites.png") -240px -40px;
				margin: 0 auto;
			}
			.serviceImage5 {
				width: 60px;
				height: 60px;
				background: url("../assets/image/home/sprites.png") -300px -40px;
				margin: 0 auto;
			}
			.serviceImage6 {
				width: 60px;
				height: 60px;
				background: url("../assets/image/home/sprites.png") -360px -40px;
				margin: 0 auto;
			}
			.serviceImage7 {
				width: 60px;
				height: 60px;
				background: url("../assets/image/home/sprites.png") -420px -40px;
				margin: 0 auto;
			}
			div {
				height: 56px;
				line-height: 60px;
				font-size: 16px;
			}

			.service-line {
				width: 80px;
				height: 1px;
				background-color: $primary-color;
				margin: 0 auto;
			}
		}

		.active {
			color: $primary-color;
		}

		.active1 {
			color: $primary-color;
		}
	}

	.service-menu {
		padding: 20px 40px;
		background-color: #f5fafb;
		display: flex;
		flex-wrap: wrap;

		.menu-every {
			width: 33.33%;
			padding: 20px;

			.service-title {
				margin-bottom: 10px;
				font-size: 16px;
				color: rgba(0, 0, 0, 0.85);
			}

			.service-desc {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.7);
			}
		}
	}

	.case {
		padding-top: 60px;
		padding-bottom: 80px;
		background-color: #f5fafb;
		margin-top: 80px;

		.case-title {
			text-align: center;

			div {
				font-size: 28px;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 20px;
			}

			div + div {
				font-size: 16px;
				color: #999;
			}
		}

		.case-module {
			display: flex;
			justify-content: space-between;
			margin-top: 70px;

			.case-content {
				width: 18.5%;
				height: 330px;
				border-radius: 8px;
				box-shadow: 0 0 10px rgb(53 153 198 / 10%);
				background: white;
				cursor: pointer;
				transition: all 0.3s;
				transform: translateY(0);
				padding: 20px;
				text-align: center;

				&:hover {
					.case-name {
						color: $primary-color;
					}
				}
				.caseImage0 {
					width: 70px;
					height: 60px;
					background: url("../assets/image/home/sprites.png") 0 -102px;
					margin: 0 auto;
				}
				.caseImage1 {
					width: 70px;
					height: 60px;
					background: url("../assets/image/home/sprites.png") -64px -102px;
					margin: 0 auto;
				}
				.caseImage2 {
					width: 70px;
					height: 60px;
					background: url("../assets/image/home/sprites.png") -129px -102px;
					margin: 0 auto;
				}
				.caseImage3 {
					width: 70px;
					height: 60px;
					background: url("../assets/image/home/sprites.png") -193px -102px;
					margin: 0 auto;
				}
				.caseImage4 {
					width: 70px;
					height: 60px;
					background: url("../assets/image/home/sprites.png") -258px -102px;
					margin: 0 auto;
				}
				i {
					font-size: 50px;
					color: $primary-color;
				}

				.case-name {
					font-size: 14px;
					margin-top: 10px;
				}

				.case-desc {
					font-size: 14px;
					line-height: 26px;
					padding: 0 10px;
					text-align: left;
					color: #aaa;
					margin-top: 20px;
					-webkit-line-clamp: 6;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&:hover {
					box-shadow: 0 0 15px rgb(53 153 198 / 30%);
					transform: translateY(-5px);
				}
			}
		}
	}

	.platform-title {
		text-align: center;
		margin-top: 60px;

		div {
			font-size: 28px;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 20px;
		}

		div + div {
			font-size: 16px;
			color: #999;
		}
	}

	.platform {
		display: flex;
		justify-content: space-between;
		margin-top: 50px;

		.platform-content {
			width: 25%;
			height: 160px;
			text-align: center;
			position: relative;

			.platform-num {
				color: $primary-color;
				width: 100%;
				position: absolute;
				top: 40px !important;
				span:first-child {
					font-size: 36px;
				}

				span:nth-child(2) {
					font-size: 12px;
					position: absolute;
					font-weight: bold;
					margin-left: 4px;
				}

				span:nth-child(3) {
					margin-left: 6px;
				}
			}

			.platform-name {
				width: 100%;
				position: absolute;
				top: 125px;
				font-size: 16px;
				color: rgba(0, 0, 0, 0.7);
			}
		}
	}
	::v-deep .el-progress-circle {
		width: 180px !important;
		height: auto !important;
	}

	.advantage {
		padding-top: 60px;
		padding-bottom: 80px;
		background-color: #f5fafb;
		margin-top: 80px;

		.advantage-title {
			text-align: center;

			div {
				font-size: 28px;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 20px;
			}

			div + div {
				font-size: 16px;
				color: #999;
			}
		}

		.advantage-content {
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-top: 50px;

			.advantage-left {
				text-align: right;

				.advantage-module {
					width: 285px;

					.advantage-name {
						margin-bottom: 20px;
						color: #4d4d4d;
						font-weight: 600;
						font-size: 16px;

						&:hover {
							color: $primary-color;
						}
					}

					.advantage-desc {
						line-height: 25px;
						color: #888888;
						font-size: 14px;
					}
				}

				.advantage-module + .advantage-module {
					margin-top: 40px;
				}

				.advantage-module:first-child,
				.advantage-module:last-child {
					margin-left: 70px;
				}
			}

			.advantage-right {
				text-align: left;

				.advantage-module {
					width: 285px;

					.advantage-name {
						margin-bottom: 20px;
						color: #4d4d4d;
						font-weight: 600;
						font-size: 16px;

						&:hover {
							color: $primary-color;
						}
					}

					.advantage-desc {
						line-height: 25px;
						color: #888888;
						font-size: 14px;
					}
				}

				.advantage-module + .advantage-module {
					margin-top: 40px;
				}

				.advantage-module:first-child,
				.advantage-module:last-child {
					margin-left: -70px;
				}
			}

			.advantage-middle {
				position: absolute;
				width: 250px;
				height: 250px;
				border-radius: 50%;
				line-height: 300px;
				text-align: center;
				left: calc(50% - 125px);
				top: calc(50% - 180px);
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.journey {
		width: 100%;
		height: 200px;
		background-color: #125fa320;
		text-align: center;
		padding-top: 50px;
		box-sizing: border-box;

		.journey-font {
			font-size: 36px;
			color: $primary-color;
			text-align: center;
		}

		.journey-btn {
			width: 120px;
			height: 36px;
			line-height: 36px;
			background-color: $primary-color;
			color: white;
			border-radius: 3px;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
			margin: 25px auto 0;

			&:hover {
				color: $primary-color;
				background-color: white;
			}
		}
	}

	.footer {
		width: 100%;
		padding-top: 25px;
		padding-bottom: 35px;
		background-color: $primary-color;
		.content {
			color: #fff;
			width: 80%;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;
			.left {
				font-size: 18px;
				text-align: center;
				.img {
					width: 50px;
					height: 50px;
				}
			}
			.center {
				font-size: 14px;
				.outconnection {
					width: 250px;
					display: flex;
					justify-content: space-between;
					a {
						color: #fff;
						cursor: pointer;
						text-decoration: none;
					}
				}
				.copyright {
					margin-top: 30px;
				}
			}
			.right {
				img {
					width: 105px;
					height: 105px;
				}
			}
		}
	}
}
</style>
