<!--
|
* @Description:
|
* @Author: 王旭
|
* @Date: 2023-02-27 11:30:56
|
* @LastEditTime: 2023-03-01 20:10:12
|
* @LastEditors: 王旭
|
-->
|
<template>
|
<div class="Solution">
|
<div class="banner">
|
<div class="title">
|
<p>联系我们，为您提供专业的方案服务</p>
|
</div>
|
</div>
|
<div class="Solution_content">
|
<div class="content_G content_box">
|
<div class="content_box_h">
|
<p>SaaS方案</p>
|
</div>
|
<div class="content_box_b">
|
<div class="title">扫码获取试用账号<br />即刻登陆体验CIM引擎平台</div>
|
<img src="../assets/img/JJFA/saas.png" alt="" />
|
<!-- <p>扫码试用</p> -->
|
</div>
|
</div>
|
<div class="content_S content_box">
|
<div class="content_box_h">
|
<p>私有云方案</p>
|
</div>
|
<div class="content_box_b">
|
<div class="title">如需定制开发你的专属产品<br />请联系我们</div>
|
<img src="../assets/img/JJFA/siyou.png" alt="" />
|
<!-- <p>联系电话：<span>(010) 6484 5922</span></p> -->
|
</div>
|
</div>
|
</div>
|
<div class="content1"></div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, reactive, defineProps, defineEmits } from "vue";
|
|
onMounted(() => {});
|
</script>
|
<style lang="less" scoped>
|
.Solution {
|
position: relative;
|
}
|
.banner {
|
width: 100%;
|
height: 639px;
|
background: url("../assets/img/JJFA/banner2.png") no-repeat;
|
background-position-x: center;
|
background-position-y: center;
|
background-size: 100% 100%;
|
position: relative;
|
.title {
|
position: absolute;
|
top: 35%;
|
left: 50%;
|
transform: translateX(-50%);
|
p {
|
font-size: 40px;
|
font-family: WDCHT;
|
color: #fafafa;
|
margin: 0;
|
font-weight: bold;
|
}
|
}
|
}
|
.Solution_content {
|
width: 1000px;
|
position: absolute;
|
left: 50%;
|
top: 420px;
|
transform: translateX(-50%);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
z-index: 100;
|
.content_box {
|
width: 410px;
|
height: 532px;
|
box-shadow: 0px 15px 30px 0px rgba(25, 34, 54, 0.1);
|
background: #ffffff;
|
.content_box_h {
|
height: 100px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
p {
|
font-size: 28px;
|
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
font-weight: bold;
|
}
|
}
|
.content_box_b {
|
height: 432px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-around;
|
.title {
|
font-size: 20px;
|
font-family: MicrosoftYaHei;
|
color: #192236;
|
text-align: center;
|
}
|
p {
|
font-size: 20px;
|
font-family: MicrosoftYaHei;
|
color: #192236;
|
span {
|
font-family: Futura-Bold, Futura;
|
font-weight: bold;
|
color: #6889d8;
|
}
|
}
|
img {
|
width: 224px;
|
height: 224px;
|
}
|
}
|
}
|
.content_G {
|
.content_box_h {
|
background: #6889d8;
|
p {
|
color: #ffffff;
|
}
|
}
|
}
|
.content_S {
|
.content_box_h {
|
background: rgba(104, 137, 216, 0.2);
|
p {
|
color: #192236;
|
}
|
}
|
}
|
}
|
.content1 {
|
height: 462px;
|
}
|
</style>
|
