monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 7dbbf93c45b740d59262bf7d5e0c0fbbef7004b0 1 parent f133c0e1

【无】公司网站-样式修改，移动端 #1

Inline Side-by-side
Showing 17 changed files with 161 additions and 12 deletions
@@ -3390,6 +3390,7 @@ blockquote:before { @@ -3390,6 +3390,7 @@ blockquote:before {
3390 display: flex; 3390 display: flex;
3391 align-items: center; 3391 align-items: center;
3392 justify-content: space-between; 3392 justify-content: space-between;
  3393 + flex-wrap: wrap;
3393 } 3394 }
3394 .lifeCycle-item:nth-child(2){ 3395 .lifeCycle-item:nth-child(2){
3395 padding: 30px; 3396 padding: 30px;
@@ -3600,8 +3601,17 @@ blockquote:before { @@ -3600,8 +3601,17 @@ blockquote:before {
3600 .home-bg-3{ 3601 .home-bg-3{
3601 background: url(../img/index/3.png); 3602 background: url(../img/index/3.png);
3602 } 3603 }
  3604 +.hzlc-sm{
  3605 + display: none;
  3606 +}
3603 /*992以下的一些样式*/ 3607 /*992以下的一些样式*/
3604 @media only screen and (max-width: 991px){ 3608 @media only screen and (max-width: 991px){
  3609 + .hzlc-sm{
  3610 + display: block;
  3611 + }
  3612 + .hzlc{
  3613 + display: none;
  3614 + }
3605 .recruit-Hot-lg{ 3615 .recruit-Hot-lg{
3606 display:none; 3616 display:none;
3607 } 3617 }
@@ -3644,6 +3654,13 @@ blockquote:before { @@ -3644,6 +3654,13 @@ blockquote:before {
3644 } 3654 }
3645 .func-bottom-intro{ 3655 .func-bottom-intro{
3646 padding:0 15px; 3656 padding:0 15px;
  3657 + flex:1;
  3658 + }
  3659 + .func-l-p.func-bottom-intro{
  3660 + padding: 0;
  3661 + }
  3662 + .func-l-1{
  3663 + flex:inherit;
3647 } 3664 }
3648 .funcIntro-span{ 3665 .funcIntro-span{
3649 padding-right:20px; 3666 padding-right:20px;
@@ -3666,7 +3683,8 @@ blockquote:before { @@ -3666,7 +3683,8 @@ blockquote:before {
3666 padding:15px; 3683 padding:15px;
3667 } 3684 }
3668 .func-symbol{ 3685 .func-symbol{
3669 - font-size: 70px; 3686 + font-size: 50px;
  3687 + line-height: 20px;
3670 } 3688 }
3671 .count-text{ 3689 .count-text{
3672 /*原48px*/ 3690 /*原48px*/
@@ -3736,7 +3754,8 @@ blockquote:before { @@ -3736,7 +3754,8 @@ blockquote:before {
3736 } 3754 }
3737 .func-top-item{ 3755 .func-top-item{
3738 max-width: 50%; 3756 max-width: 50%;
3739 - padding:0 5px; 3757 + padding:3px 5px;
  3758 + text-align: center;
3740 } 3759 }
3741 .func-top{ 3760 .func-top{
3742 flex:1; 3761 flex:1;
@@ -3760,7 +3779,7 @@ blockquote:before { @@ -3760,7 +3779,7 @@ blockquote:before {
3760 max-width: 33.3%; 3779 max-width: 33.3%;
3761 } 3780 }
3762 .dataAbility-col{ 3781 .dataAbility-col{
3763 - max-width: 50%; 3782 + /*max-width: 50%;*/
3764 } 3783 }
3765 .maintenance-title{ 3784 .maintenance-title{
3766 padding-top:20px; 3785 padding-top:20px;
@@ -3771,12 +3790,123 @@ blockquote:before { @@ -3771,12 +3790,123 @@ blockquote:before {
3771 .know-intro-bg{ 3790 .know-intro-bg{
3772 background-image: url("../img/about/know-intro-img-sm.png"); 3791 background-image: url("../img/about/know-intro-img-sm.png");
3773 } 3792 }
  3793 + .partner-img-bg{
  3794 + background-image: url("../img/about/partner-bg-img-sm.png");
  3795 +
  3796 + }
  3797 + .culturalValues-bg{
  3798 + background-image: url("../img/about/cultural-img-sm.png");
  3799 + }
  3800 + .about-concat-bg{
  3801 + background-image: url("../img/about/about-concat-bg-sm.png");
  3802 +
  3803 + }
  3804 + .dataAbility-bg{
  3805 + /*background-image: url("../img/serviceSecond/Aview/ability-bg-sm.png");*/
  3806 + background-image: none;
  3807 + }
  3808 + .dataAbility-bg-logo{
  3809 + display: none;
  3810 + }
  3811 + .info-characterP .info-characterP-bg{
  3812 + /*background-image:url("../img/serviceSecond/Aview/characterP-bg-sm.png");*/
  3813 + background-image:none;
  3814 + background-color:#ffffff;
  3815 + border-radius: 3px;
  3816 + }
  3817 + .info-characterP:hover .info-characterP-bg{
  3818 + /*background-image:url("../img/serviceSecond/Aview/characterP-bg-active-sm.png");*/
  3819 + background-image:none;
  3820 + background-color:#1E9FFF;
  3821 + border-radius: 3px;
  3822 + }
  3823 + .about-section .container{
  3824 + flex:1;
  3825 + }
3774 .about-content-intro .title-style{ 3826 .about-content-intro .title-style{
3775 padding-top:30px; 3827 padding-top:30px;
3776 } 3828 }
3777 .home-bg-1{ 3829 .home-bg-1{
3778 background: url(../img/index/1-sm.png); 3830 background: url(../img/index/1-sm.png);
3779 } 3831 }
  3832 + .func-bottom{
  3833 + margin:0;
  3834 + }
  3835 + .func-bg{
  3836 + display: none;
  3837 + }
  3838 + .func-bg-1{
  3839 + background-image: url("../img/serviceSecond/cmdb/func-1-sm.png");
  3840 + background-size: cover;
  3841 + background-repeat: no-repeat;
  3842 + flex-flow: column;
  3843 + }
  3844 + .func-bg-2{
  3845 + background-image: url("../img/serviceSecond/cmdb/func-2-sm.png");
  3846 + background-size: cover;
  3847 + background-repeat: no-repeat;
  3848 + flex-flow: column;
  3849 + }
  3850 + .func-bg-3{
  3851 + background-image: url("../img/serviceSecond/cmdb/func-3-sm.png");
  3852 + background-size: cover;
  3853 + background-repeat: no-repeat;
  3854 + flex-flow: column;
  3855 + }
  3856 + .func-bg-4{
  3857 + background-image: url("../img/serviceSecond/cmdb/func-4-sm.png");
  3858 + background-size: cover;
  3859 + background-repeat: no-repeat;
  3860 + flex-flow: column;
  3861 + }
  3862 + .func-bg-5{
  3863 + background-image: url("../img/serviceSecond/cmdb/func-5-sm.png");
  3864 + background-size: cover;
  3865 + background-repeat: no-repeat;
  3866 + flex-flow: column;
  3867 + }
  3868 + .func-bottom-title{
  3869 + flex:1;
  3870 + }
  3871 + .funcIntro-span{
  3872 + padding-top:5px;
  3873 + }
  3874 + .dataAbility-bg-logo img{
  3875 + max-width: 60px;
  3876 + }
  3877 + .logo-title{
  3878 + display: none;
  3879 + }
  3880 + .dataAbility-col:nth-child(3) .dataAbility-item .dataAbility-item-intro-item:first-child{
  3881 + max-width: 100%;
  3882 + }
  3883 + .dataAbility-col:nth-child(2n) .dataAbility-item{
  3884 + margin-left:0;
  3885 + }
  3886 + .dataAbility-item{
  3887 + padding: 15px;
  3888 + background: #1E9FFF;
  3889 + margin: 8px 0;
  3890 + border-radius: 3px;
  3891 + }
  3892 + .dataAbility-con{
  3893 + margin-top:20px;
  3894 + }
  3895 + .info-container-ability{
  3896 + padding-top:20px;
  3897 + }
  3898 + .info-container-ability.all-height{
  3899 + height:calc(100vh + 60px);
  3900 + }
  3901 + .info-container-system,.info-container-service{
  3902 + margin-bottom: 20px;
  3903 + }
  3904 + .dataAbility-item-intro-item{
  3905 + min-height: auto;
  3906 + }
  3907 + .dataAbility-item-intro{
  3908 + padding-top:10px;
  3909 + }
3780 } 3910 }
3781 @media only screen and (max-width: 767px){ 3911 @media only screen and (max-width: 767px){
3782 .info-character.info-characterP{ 3912 .info-character.info-characterP{
@@ -3809,4 +3939,17 @@ blockquote:before { @@ -3809,4 +3939,17 @@ blockquote:before {
3809 .row-bottom{ 3939 .row-bottom{
3810 /*display: none;*/ 3940 /*display: none;*/
3811 } 3941 }
  3942 + .lifeCycle-item:nth-child(2) .lifeCycle-intro-item{
  3943 + width:50%;
  3944 + }
  3945 + .hero-section{
  3946 + padding-top:70px;
  3947 + }
  3948 + .main-header{
  3949 + top:0;
  3950 + }
  3951 + .header-inner{
  3952 + padding:0!important;
  3953 + }
  3954 +
3812 } 3955 }
@@ -720,27 +720,32 @@ export function cmdb() { @@ -720,27 +720,32 @@ export function cmdb() {
720 { 720 {
721 title:'数据模型管理', 721 title:'数据模型管理',
722 introduction:'提供配置类别、配置项模型和配置关系的自定义。提供图形化界面定义CMDB的数据结构，包括CI类型、每个CI类型包含的属性、对应的CI状态取值、允许的关系类型、CI实例唯一性判断规则，定义每个CI属性字段的数据类型、合法性校验规则、数据调和规则。', 722 introduction:'提供配置类别、配置项模型和配置关系的自定义。提供图形化界面定义CMDB的数据结构，包括CI类型、每个CI类型包含的属性、对应的CI状态取值、允许的关系类型、CI实例唯一性判断规则，定义每个CI属性字段的数据类型、合法性校验规则、数据调和规则。',
723 - img:'assets/img/serviceSecond/cmdb/func-1.png' 723 + img:'assets/img/serviceSecond/cmdb/func-1.png',
  724 + imgSm:'assets/img/serviceSecond/cmdb/func-1.png'
724 }, 725 },
725 { 726 {
726 title:'配置数据收集', 727 title:'配置数据收集',
727 introduction:'提供企业级配置自动化发现模块，实现对IT环境中各类环境设施、IT基础架构、应用系统和业务服务信息的收集。 ', 728 introduction:'提供企业级配置自动化发现模块，实现对IT环境中各类环境设施、IT基础架构、应用系统和业务服务信息的收集。 ',
728 - img:'assets/img/serviceSecond/cmdb/func-2.png' 729 + img:'assets/img/serviceSecond/cmdb/func-2.png',
  730 + imgSm:'assets/img/serviceSecond/cmdb/func-2-sm.png'
729 }, 731 },
730 { 732 {
731 title:'配置数据管理', 733 title:'配置数据管理',
732 introduction:'采用非结构化数据库技术，完成对海量CMDB信息的管理，包括维护模型、配置项、关系映射的版本，对采集获取的管理对象数据进行模型化和实例化，并将配置项实例映射到应用服务和业务服务。', 734 introduction:'采用非结构化数据库技术，完成对海量CMDB信息的管理，包括维护模型、配置项、关系映射的版本，对采集获取的管理对象数据进行模型化和实例化，并将配置项实例映射到应用服务和业务服务。',
733 - img:'assets/img/serviceSecond/cmdb/func-3.png' 735 + img:'assets/img/serviceSecond/cmdb/func-3.png',
  736 + imgSm:'assets/img/serviceSecond/cmdb/func-3-sm.png'
734 }, 737 },
735 { 738 {
736 title:'数据消费服务', 739 title:'数据消费服务',
737 introduction:'提供可视化拓扑展现、报表、访问权限控制等功能。同时为外部运维场景消费CMDB中存储的各类资源配置数据提供标准Restful API接口。', 740 introduction:'提供可视化拓扑展现、报表、访问权限控制等功能。同时为外部运维场景消费CMDB中存储的各类资源配置数据提供标准Restful API接口。',
738 - img:'assets/img/serviceSecond/cmdb/func-4.png' 741 + img:'assets/img/serviceSecond/cmdb/func-4.png',
  742 + imgSm:'assets/img/serviceSecond/cmdb/func-4-sm.png'
739 }, 743 },
740 { 744 {
741 title:'关系可视化展现', 745 title:'关系可视化展现',
742 introduction:'提供从应用视角、网络环境视角、业务逻辑视角等可视化展现IT设备之间、IT设备和业务之间、业务和业务之间的关联关系，使IT管理人员对信息的理解和应用关联一目了然。', 746 introduction:'提供从应用视角、网络环境视角、业务逻辑视角等可视化展现IT设备之间、IT设备和业务之间、业务和业务之间的关联关系，使IT管理人员对信息的理解和应用关联一目了然。',
743 - img:'assets/img/serviceSecond/cmdb/func-5.png' 747 + img:'assets/img/serviceSecond/cmdb/func-5.png',
  748 + imgSm:'assets/img/serviceSecond/cmdb/func-5-sm.png'
744 } 749 }
745 ], 750 ],
746 type:'func' 751 type:'func'
@@ -103,7 +103,7 @@ router.beforeEach(async (to, from, next) => { @@ -103,7 +103,7 @@ router.beforeEach(async (to, from, next) => {
103 $('html, body').animate({ 103 $('html, body').animate({
104 scrollTop: 0 104 scrollTop: 0
105 }, 100); 105 }, 100);
106 - 106 + $('.collapse').removeClass('show');
107 next(); 107 next();
108 }) 108 })
109 109
@@ -191,7 +191,8 @@ @@ -191,7 +191,8 @@
191 </div> 191 </div>
192 </div> 192 </div>
193 <div class="about-process pt-60"> 193 <div class="about-process pt-60">
194 - <img src="assets/img/about/hzlc.png"> 194 + <img class="hzlc" src="assets/img/about/hzlc.png">
  195 + <img class="hzlc-sm" src="assets/img/about/hzlc-sm.png">
195 </div> 196 </div>
196 </div> 197 </div>
197 <div class="about-concat mt-10"> 198 <div class="about-concat mt-10">
@@ -64,9 +64,9 @@ @@ -64,9 +64,9 @@
64 {{itemF.title}} 64 {{itemF.title}}
65 </div> 65 </div>
66 </div> 66 </div>
67 - <div class="func-bottom row pt-30"> 67 + <div :class="'func-bottom row pt-30 func-bg-'+(funcActive+1)">
68 <div class="col-lg-6 func-bottom-title"><span></span><span>{{funcTitle}}</span></div> 68 <div class="col-lg-6 func-bottom-title"><span></span><span>{{funcTitle}}</span></div>
69 - <div :class="['col-lg-6', 'func-bottom-intro','flex-column-center',{'func-l-p':funcActive==1}]"> 69 + <div :class="['col-lg-6', 'func-bottom-intro','flex-column-center',{'func-l-p':funcActive==1,'func-l-1':funcActive==0}]">
70 <div class="func-bottom-con "> 70 <div class="func-bottom-con ">
71 <span class="func-symbol">“</span> 71 <span class="func-symbol">“</span>
72 <span class="funcIntro-span">{{funcIntro}}</span> 72 <span class="funcIntro-span">{{funcIntro}}</span>