提交车间管家官网

fhKeeper/formulahousekeeper/inva_4_tivo/css/workshop/workshop.css

@@ -0,0 +1,369 @@
+/* 在原来的 customer 的样式基础上覆盖 */
+.collTeam {
+    background: url(../../image/workshopimage/wokeTime.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+
+/* 公共样式 */
+* {
+    box-sizing: border-box;
+}
+
+.content {
+    width: 1200px;    
+    margin: auto;
+    position: relative;
+    z-index: 1;
+}
+
+.moduleTitle {
+    padding-bottom: 24px;
+}
+.moduleTitle .title {
+    width: 100%;
+    font-size: 48px;
+    color: #333;
+    margin-bottom: 20px;
+    text-align: center;
+}
+.moduleTitle .subTitle {
+    width: 100%;
+    font-size: 18px;
+    color: #666666;
+    text-align: center;
+}
+.moduleTitle span {
+    color: #2162e4;
+}
+
+
+/* 车间管理 */
+.shopManagement {
+    background: url(../../image/workshopimage/shopMan_back.png) no-repeat;
+    background-size: 100% 100%;
+    padding: 90px 0 160px 0;
+    position: relative;
+    top: -6px;
+} 
+.shopManagement .shopManagementContent {
+    width: 100%;
+    height: 580px;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    background: url(../../image/workshopimage/shopManagementContent.png) no-repeat;
+    background-size: 100% 570px;
+}
+.shopManagement .shopManagementContent .serialNumber {
+    display: flex;
+    margin: 0 auto;
+    padding-left: 72px;
+}
+.shopManagement .shopManagementContent .serialNumber div {
+    width: 210px;
+    height: 60px;
+    color: #fff;
+    font-size: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url(../../image/workshopimage/rightImg.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+}
+
+.shopManagementContent .serialNumber div:first-child {
+    left: 0;
+}
+
+.shopManagement .shopManagementContent .serialNumber .on {
+    background: url(../../image/workshopimage/rightImgHover.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.shopManagement .shopManagementContent .shopManagementList {
+    position: relative;
+    width: 100%;
+    height: 428px;
+    top: -30px;
+}
+.shopManagement .shopManagementContent .shopManagementList .module {
+    width: 252px;
+    height: 307px;
+    border: 1px solid #fff;
+    background: linear-gradient(180deg, #ebf4ff 0%, #ffffff 100%);
+    padding: 24px;
+}
+.shopManagement .shopManagementContent .shopManagementList .module img {
+    width: 64px;
+    height: 64px;
+}
+.shopManagement .shopManagementContent .shopManagementList .module .module_title {
+    font-size: 20px;
+    color: #404041;
+    margin: 15px 0 35px 0;
+}
+.shopManagement .shopManagementContent .shopManagementList .module .module_text {
+    font-size: 16px;
+    color: #707070;
+    margin: 0 0 26px 0;
+    padding-left: 18px;
+    position: relative;
+}
+.shopManagement .shopManagementContent .shopManagementList .module .module_text::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #2162e4;
+    position: absolute;
+    left: 0;
+    top: 6px;
+}
+.moduleOne, .moduleTwo, .moduleThree, .moduleFo {
+    position: absolute;
+}
+.moduleOne {
+    left: 0;
+    top: 0;
+}
+.moduleTwo {
+    left: 315px;
+    bottom: 0;
+}
+.moduleThree {
+    right: 315px;
+    bottom: 0;
+}
+.moduleFo {
+    right: 0;
+    top: 0;
+}
+
+/* 零门槛 */
+.zeroThreshold {
+    width: 100%;
+    background: #f6fafd;
+    padding-bottom: 80px;
+    position: relative;
+    margin-top: -6px;
+}
+
+.zeroThreshold .zeroThresholdContent {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.zeroThresholdContentList {
+    width: 370px;
+    height: 200px;
+    padding: 28px 0 20px 0;
+    border-radius: 20px;
+    background: #2162E4;
+    box-shadow: 0px 9px 16px 0px rgba(153, 153, 153, 0.5);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 40px;
+}
+.zeroThresholdContentList_on {
+    background: none !important;
+    box-shadow: none;
+}
+.zeroThresholdContentList_on .zeroThresholdContentList_title, .zeroThresholdContentList_on .zeroThresholdContentList_text {
+    color: #333333;
+}
+.zeroThresholdContentList_Img {
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -100px;
+}
+.zeroThresholdContentListImg {
+    width: 50px;
+    height: 50px;
+}
+.zeroThresholdContentList_title {
+    width: 100%;
+    text-align: center;
+    height: 24px;
+    font-size: 20px;
+    color: #fff;
+}
+.zeroThresholdContentList_text {
+    width: 100%;
+    text-align: center;
+    height: 24px;
+    font-size: 16px;
+    color: #fff;
+}
+
+/* 电脑端 */
+.computer {
+    padding-top: 112px;
+    background: url(../../image/workshopimage/Group.png) no-repeat;
+    background-size: 837px 380px;
+    background-position: right bottom;
+}
+.computerOns {
+    background: none;
+}
+.computer .contentTab {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 50px;
+}
+.computer .on {
+    color: #fff !important;
+    background: #2162E4;
+}
+.computer .contentTab div {
+    width: 160px;
+    height: 50px;
+    margin-right: 18px;
+    font-size: 16px;
+    color: #666666;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+.computer .contentTab img {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+}
+.computer_main {
+    width: 100%;
+    height: 540px;
+    position: relative;
+}
+.computer_main .con {
+    position: absolute;
+}
+.computer_left_title{
+    font-size: 30px;
+    color: #2162E4;
+    display: flex;
+    align-items: center;
+}
+.computer_left_title img {
+    width: 36px;
+    height: 36px;
+    margin-right: 16px;
+    margin-top: 50px;
+    margin-bottom: 36px;
+    position: relative;
+    top: -4px;
+}
+.computer_left_List {
+    position: relative;
+    padding-left: 66px;
+    margin-bottom: 40px;
+}
+.computer_left_List .computerLeft_title {
+    font-size: 22px;
+    color: #333333;
+    margin-bottom: 16px;
+}
+.computer_left_List .computerLeft_text {
+    font-size: 14px;
+    color: #666666;
+} 
+.computer_left_List .computerLeft_title::after {
+    content: '';
+    width: 4px;
+    height: 100%;
+    background: #2162E4;
+    position: absolute;
+    left: 46px;
+}
+.computer_left_Btn {
+    margin: 106px 0 0 40px;
+    font-size: 16px;
+    color: #fff;
+    width: 150px;
+    height: 48px;
+    border-radius: 4px;
+    background: #2162E4;
+}
+.computer_left_Btn a {
+    color: #fff;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.computer_right img{
+    width: 765px;
+    height: 410px;
+}
+
+/* 移动端 */
+.mobileTerminal {
+    padding-top: 114px;
+    background: #F6FAFD;
+    position: relative;
+}
+.mobileTerminal .mobileTerminal_Img {
+    width: 100%;
+    height: 755px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+.mobileTerminal_project {
+    margin-top: 40px;
+    margin-bottom: 25px;
+    padding-left: 50px;
+}
+.mobileTerminalProject {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+.mobileTerminalProject .left {
+    font-size: 16px;
+    color: #000;
+    margin-right: 10px;
+    width: 75px;
+}
+.mobileTerminalProject .right {
+    display: flex;
+    align-items: center;
+}
+.mobileTerminalProject .right div {
+    width: 177px;
+    height: 44px;
+    font-size: 16px;
+    color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url(../../image/workshopimage/rightImg.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+}
+.mobileTerminalProject .right .on {
+    background: url(../../image/workshopimage/rightImgHover.png) no-repeat;
+    background-size: 100% 100%;
+}
+.mobileTerminal_ImgList {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 40px;
+}
+.mobileTerminal_ImgList img {
+    width: 310px;
+    height: 600px;
+    margin: 33px 0 60px 0;
+}

fhKeeper/formulahousekeeper/inva_4_tivo/js/workshop/workshop.js

@@ -0,0 +1,39 @@
+
+$(document).ready(function () {
+    // 初始化，只显示第一个 .computer_main 元素
+    $('.computer_main').eq(0).show().siblings('.computer_main').hide();
+    
+    // 监听 .contentTab 下的 div 点击事件
+    $('.contentTab div').click(function () {
+      // 移除所有 div 的 'on' 类
+      $('.contentTab div').removeClass('on');
+      // 给当前点击的 div 添加 'on' 类
+      $(this).addClass('on');
+  
+      // 重置所有图片的 src，移除 'Hover' 字样
+      $('.contentTab div img').each(function () {
+        var src = $(this).attr('src');
+        $(this).attr('src', src.replace('Hover', ''));
+      });
+  
+      // 获取当前 div 的 img 元素的 src 属性
+      var img = $(this).find('img');
+      var imgSrc = img.attr('src');
+  
+      // 在图片地址后面添加 'Hover'
+      img.attr('src', imgSrc.replace('.png', 'Hover.png'));
+  
+      // 获取当前点击 div 的索引，并显示对应的 .computer_main
+      var index = $(this).index();
+      $('.computer_main').eq(index).fadeIn().siblings('.computer_main').fadeOut();
+      
+      // 根据索引决定是否给 .computer 添加 .computerOns 类
+      if (index === 1 || index === 3) {
+        $('.computer').addClass('computerOns');
+      } else {
+        $('.computer').removeClass('computerOns');
+      }
+    });
+  });
+  
+