【无】 web网站home首页及图片

@@ -345,7 +345,6 @@ textarea:placeholder,
 
 
 .hero-content p {
 .hero-content p {
     font-size: 18px;
     font-size: 18px;
-    max-width: 535px;
     font-weight: 600;
     font-weight: 600;
     margin-bottom: 40px;
     margin-bottom: 40px;
 }
 }
@@ -569,6 +568,7 @@ textarea:placeholder,
 /*** ====================================================================
 /*** ====================================================================
   Start Success Section
   Start Success Section
 ====================================================================***/
 ====================================================================***/
+
 .success-section {
 .success-section {
     position: relative;
     position: relative;
 }
 }
@@ -1705,8 +1705,109 @@ blockquote:before {
 /*** ====================================================================
 /*** ====================================================================
   End Footer Section
   End Footer Section
 ====================================================================***/
 ====================================================================***/
-
 .hg-logo{
 .hg-logo{
     width: 162px;
     width: 162px;
     height: 40px;
     height: 40px;
 }
 }
+@media (min-width: 992px){
+    .col-lg-3-self {
+        max-width: 20%;
+    }
+}
+.service-icon{
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+.single-service-box{
+    padding:0;
+}
+.tooltip-self{
+    background-color: transparent;
+    width:100%;
+    height:100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 30px;
+}
+.principle-item{
+    background-color: #000;
+    padding:40px 20px;
+    color:#fff;
+    border-radius: 4px;
+}
+.principle-item h4{
+    color:#aaaaaa;
+    margin-top:20px;
+}
+.principle-item-title{
+    display: flex;
+}
+.num-icon{
+    border: 1px solid #fff;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right:6px;
+}
+.tooltip{
+    top:0;
+}
+.opacity1{
+    opacity:1;
+}
+.opacity0{
+    opacity:0;
+}
+.color-white{
+    color:#fff;
+}
+.flex-column-center{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.flex-column-start{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+.flex-text-left{
+    text-align: left;
+}
+.success-bg-self{
+    height:100%;
+}
+.section-item-content{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.item-content{
+    flex:1;
+}
+.item-text{
+    flex: 1;
+}
+.section-item img,.owl-carousel .owl-item .title-icon img,.owl-carousel .owl-item .img-right img{
+    width:auto;
+}
+.team-item-right{
+    padding:20px;
+}
+
+.team-item{
+    width:100%;
+    padding:20px;
+}
+.title-icon{padding:20px 0;}
+.team-item-left{
+    padding:40px;
+}
+.item-content h4{
+    margin:20px 0;
+}

 <div>
 <div>
+    <section class="hero-section rel pt-220 rpt-150 pb-130 rpb-0">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-7">
+                    <div class="hero-content my-50">
+                        <h1 class="wow customFadeInUp delay-0-1s slow">"魔镜智能"全面完成国产化兼容适配认证</h1>
+                        <p class="wow customFadeInUp delay-0-3s slow">鸿果科技旗下“魔镜智能”自研“A-View智能综合监控管理平台系统”V3.0</p>
+                        <a href="#" class="theme-btn btn-big wow customFadeInUp delay-0-5s slow">完成对主流国产服务器、数据库、操作系统、中间件等兼容适配，并取得一系列兼容性互认证</a>
+                    </div>
+                </div>
+                <div class="col-lg-5">
+                    <div class="hero-img">
+                        <img src="assets/img/hero/hero.png" alt="Hero Image">
+                    </div>
+                </div>
+            </div>
+        </div>
 
 
+        <div class="shape shapeAnimationOne l-10 t-60">
+            <img src="assets/img/shapes/shape1.png" alt="Shape">
+        </div>
+        <div class="shape shapeAnimationTwo l-70 t-60">
+            <img src="assets/img/shapes/shape2.png" alt="Shape">
+        </div>
+        <div class="shape shapeAnimationThree l-50 t-100">
+            <img src="assets/img/shapes/shape3.png" alt="Shape">
+        </div>
+    </section>
 
 
+    <section class="services-section rel text-center mt-100 mb-70">
+        <div class="container">
+            <h3>技术优势</h3>
+            <h4>以AI激活运维数据智慧，助力客户数字化运维</h4>
+            <div class="row">
 
 
-    首页11
+                <!-- single-service -->
+                <div v-for="item in techData" :key="item" class="col-lg-3 col-md-6 col-lg-3-self">
+                    <div class="single-service-box style-three">
+                        <div class="service-icon"  data-toggle="tooltip" @mouseenter="tooltipHover(item)" @mouseleave="tooltipLeave">
+                            <img :src="'assets/img/technology/technology-0'+item.id+'.png'" alt="Service Icon">
+                            <div :class="['tooltip-inner', 'tooltip', 'tooltip-self',{'opacity1':item.isHover,'opacity0':!item.isHover}]" >
+                                <img :src="'assets/img/technology/technology-0'+item.id+'-tip.png'" alt="Service Icon">
+                                <!--                                    横向融合市场主流IT系统架构，从传统巨石IT架构到现今的分布式微服务架构；纵向融合从基础IaaS层、PaaS层到应用层及业务层，实现从普通运维监控到系统洞察与业务洞察的提升。-->
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
 
+            </div>
+        </div>
+
+        <div class="shape shapeAnimationOne l-10 t-0">
+            <img src="assets/img/shapes/shape3.png" alt="Shape">
+        </div>
+        <div class="shape shapeAnimationTwo t-100 r-5">
+            <img src="assets/img/shapes/shape1.png" alt="Shape">
+        </div>
+    </section>
+
+    <section class="success-section pt-105 pb-70 color-white">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-12">
+                    <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">
+                        <div class="section-title mb-35">
+                            <h2 class="color-white">魔镜智能运维建设三大原则</h2>
+                        </div>
+                        <p>魔镜智能能够通过海量数据处理分析能力和强大的算法支撑能力 | 协助企业灵活构建多样化智能运维场景</p>
+
+                    </div>
+                </div>
+                <!--   <div class="col-lg-7">
+                       <div class="about-image wow customFadeInLeft delay-0-1s slow">
+                           <img src="assets/img/about/about.png" alt="about image">
+                       </div>
+                   </div>-->
+            </div>
+            <div class="row principle">
+                <div class="col-lg-4">
+                    <div class="principle-item">
+                        <div class="principle-item-title">
+                            <span class="num-icon">1</span>
+                            <span>数据</span>
+                        </div>
+                        <h4>从自身运维出发</h4>
+                    </div>
+                </div>
+                <div class="col-lg-4">
+                    <div class="principle-item">
+                        <div class="principle-item-title">
+                            <span class="num-icon">2</span>
+                            <span>中台</span>
+                        </div>
+                        <h4>夯实数据处理能力</h4>
+                    </div>
+                </div>
+                <div class="col-lg-4">
+                    <div class="principle-item">
+                        <div class="principle-item-title">
+                            <span class="num-icon">3</span>
+                            <span>场景化</span>
+                        </div>
+                        <h4>循序渐进进行建设</h4>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="success-bg success-bg-self"></div>
+        <div class="shape shapeAnimationFour r-5 t-100">
+            <img src="assets/img/shapes/shape3.png" alt="Shape">
+        </div>
+    </section>
+
+    <section class="about-section rel mb-100  pt-105 pb-70">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-12">
+                    <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">
+                        <div class="section-title mb-35">
+                            <h2>魔镜智能运维建设六步走路线</h2>
+                        </div>
+                        <p>智能运维的本质是提升运维数据的洞察和处理能力</p>
+
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <img src="assets/img/web-route.png" alt="">
+            </div>
+        </div>
+
+        <div class="shape shapeAnimationFour l-10 t-5">
+            <img src="assets/img/shapes/shape4.png" alt="Shape">
+        </div>
+        <div class="shape shapeAnimationFive r-10 t-100 zm-1">
+            <img src="assets/img/shapes/shape2.png" alt="Shape">
+        </div>
+    </section>
+
+    <section class="team-section rel mb-65">
+        <div class="container">
+            <div class="section-title mb-35 pr-65  align-items-center flex-column-center">
+                <h2>”魔镜智能“全面完成国产化兼容适配认证</h2>
+                <h4>完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</h4>
+            </div>
+            <div class="section-item-content owl-dots">
+                <div class="section-item owl-dot" v-for="item in logoData">
+                    <img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
+                </div>
+            </div>
+            <div class="team-carousel owl-carousel text-center" ref="teamCarousel">
+                <div class="team-item row" v-for="item in compatibleData">
+                    <div class="col-lg-8 team-item-left flex-column-start">
+                        <div class="title-icon">
+                            <img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
+                        </div>
+                        <div class="item-content flex-column-start flex-text-left">
+                            <h4>国产中间件兼容认证</h4>
+                            <div class="item-text">
+                                {{item.content}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 img-right team-item-right">
+                        <img :src="'assets/img/index/'+item.urlName+'.png'" alt="">
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+        <div class="shape shapeAnimationThree b-30 r-10">
+            <img src="assets/img/shapes/shape1.png" alt="Shape">
+        </div>
+        <div class="shape shapeAnimationTwo t-90 l-10">
+            <img src="assets/img/shapes/shape4.png" alt="Shape">
+        </div>
+    </section>
 
 
 </div>
 </div>

@@ -4,7 +4,127 @@ export default {
     components: {},
     components: {},
     props: [],
     props: [],
     setup(props, {attrs, slots, emit}) {
     setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
 
 
+        let isHover=Vue.ref(false);
+        let techData=Vue.ref([]);
+        for(let i=1;i<6;i++){
+            techData.value.push({
+                id:i,
+                isHover:false
+            })
+        }
+        //技术优势悬浮提示
+        let tooltipHover=(row)=>{
+            techData.value.map(item=>{
+                if(item.id==row.id){
+                    item.isHover=true;
+                }
+            })
+        }
+        //技术优势鼠标离开事件
+        let tooltipLeave=()=>{
+            techData.value.map(item=>{
+                    item.isHover=false;
+            })
+        }
+        //兼容认证logo数据
+        let logoData=Vue.ref([
+            {
+                id:'1',
+                logoUrl:'logo-dong'
+            },
+            {
+                id:'2',
+                logoUrl:'logo-da'
+            },
+            {
+                id:'3',
+                logoUrl:'logo-nan'
+            },
+            {
+                id:'4',
+                logoUrl:'logo-ren'
+            },
+            {
+                id:'5',
+                logoUrl:'logo-tong'
+            }
+        ])
+        let compatibleData=Vue.ref([
+            {
+                id:'1',
+                logoUrl:'logo-dong',
+                urlName:'dong',
+                content:'东方通应用服务器软件TongWeb V7.0 产品，是由东方通推出的遵循JavaEE7规范的企业级应用服务器，不仅为企业应用提供了可靠、可伸缩、可管理和高安全的基础平台，同时具有功能完善、支持开放标准和基于组件开发、多层架构、轻量等特点。'
+            },
+            {
+                id:'2',
+                logoUrl:'logo-da',
+                urlName:'da',
+                content:'达梦数据库管理系统V8（简称DM8）融合了分布式、弹性计算与云计算的优势，多样化架构充分满足不同场景需求，支持超大规模并发事务处理和事务-分析混合型业务处理，动态分配计算资源，实现更精细化的资源利用、更低成本的投入。'
+            },
+            {
+                id:'3',
+                logoUrl:'logo-nan',
+                urlName:'nan',
+                content:'南大通用大规模分布式并行数据库集群系统[简称：GBase 8a MPP Cluster] 是基于 GBase 8a 列存储数据库的一款 Shared Nothing 架构的分布式并行分析型数据库集群，具备高性能、高可用、高扩展特性，可以为超大规模数据管理提供高性价比的通用计算平台。'
+            },
+            {
+                id:'4',
+                logoUrl:'logo-ren',
+                urlName:'ren',
+                content:'金仓数据库管理系统KingbaseES是面向事务处理类、兼顾分析类应用领域的通用数据库产品，致力于解决高安全、高并发、高可靠数据存储计算问题，是一款为企事业单位等管理信息系统、业务系统量身打造，具有高成熟度的数据库产品。'
+            },
+            {
+                id:'5',
+                logoUrl:'logo-tong',
+                urlName:'tong',
+                content:'统信服务器操作系统V20是一款用于构建信息化基础设施环境的平台级软件，是款体现当今主流 Linux 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中，服务端基础设施的安装部署、运行维护、应用支撑等需求，具有极高的可靠性、持久的可用性、优良的可维护性。'
+            }
+        ])
+
+        // 挂载完
+        Vue.onMounted(() => {
+            $('.team-carousel').owlCarousel({
+                loop:true,
+                items: 1,
+                margin: 20,
+                nav: false,
+                dots: true,
+                active: true,
+                dotsEach: 2,
+                smartSpeed: 1000,
+                autoplay: 5000,
+                // navText: ['<span class="flaticon-left-arrow"></span>', '<span class="flaticon-right-arrow"></span>'],
+                dotsText: ['<span class="flaticon-left-arrow"></span>', '<span class="flaticon-right-arrow"></span>'],
+                responsive: {
+                   /* 0: {
+                        items: 1,
+                    },
+                    575: {
+                        items: 1,
+                    },
+                    768: {
+                        items: 2,
+                    },
+                    992: {
+                        items: 3,
+                    },
+                    1200: {
+                        items: 3,
+                    }*/
+                }
+            });
+        })
+        return{
+            isHover,
+            tooltipHover,
+            tooltipLeave,
+            techData,
+            logoData,
+            compatibleData
+        }
     }
     }
 
 
 }
 }