提交项目官网

fhKeeper/formulahousekeeper/inva_4_tivo/css/projectt.css

@@ -267,6 +267,81 @@ html {font-size: 10px; -webkit-text-size-adjust:none; -webkit-tap-highlight-colo
     margin-top: -1.5625rem;
 }
 
+/* 新版跨部门 */
+.multipleRoles {
+    background: #ffffff;
+    position: relative;
+    z-index: 3;
+    padding: 4.6875rem 0 6.25rem 0;
+}
+.multCons {
+    display: flex;
+    justify-content: space-between;
+}
+.multipleRolesLeft, .multipleRolesRight {
+    width: 50%;
+    box-sizing: border-box;
+    position: relative;
+}
+.muDiv {
+    display: inline-block;
+    font-size: 2.375rem;
+    color: #333333;
+    font-family: '黑体';
+}
+.muDiv span {
+    color: #f3ac47;
+    font-size: 2.625rem;
+    text-align: center;
+}
+.muRoLezc {
+    float: left;
+    margin-left: 10.9375rem;
+}
+.muRoLetd {
+    padding-top: 4.375rem;
+    padding-left: 2.8125rem;
+}
+.outerRing {
+    width: 31.25rem;
+    height: 31.25rem;
+    padding-top: 1.25rem;
+    position: relative;
+}
+.outerRingNei {
+    position: absolute;
+    width: 16.25rem;
+    height: 16.25rem;
+    top: 50%;
+    left: 50%;
+    margin-left: -8.125rem;
+    margin-top: -8.125rem;
+}
+.multipWaiCont {
+    width: 4.6875rem;
+    height: 4.6875rem;
+    background: #3c86df;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: .9375rem;
+}
+.multipWaiCont div {
+    width: 2.1875rem;
+    height: 2.1875rem;
+}
+.multipWai {
+    width: 4.6875rem;
+    position: absolute;
+}
+.multipWai p {
+    width: 100%;
+    text-align: center;
+    font-size: 1.125rem;
+    color: #333;
+}
+
 /* 支持多种行业和场景使用 */
 .industryScenario {
     background: #ffffff;

fhKeeper/formulahousekeeper/inva_4_tivo/js/one.js

@@ -9,7 +9,7 @@
             if (!clientWidth) return;
             // 设置html字体大小(浏览器默认字体大小为16px)
             docEl.style.fontSize = clientWidth / 1920 * 20  + "px";
-            console.log(clientWidth / 1920 * 20  + "px")
+            // console.log(clientWidth / 1920 * 20  + "px")
         };
     // 不支持addEventListener,返回
     if (!doc.addEventListener) return;

fhKeeper/formulahousekeeper/inva_4_tivo/project.html

@@ -106,7 +106,7 @@
     </div>
 
     <!-- 跨部门 -->
-    <div class="acrossDepartments">
+    <!-- <div class="acrossDepartments">
         <div class="contentes">
             <h2>支持跨部门，<span>多角色</span>的团队协作</h2>
             <div class="acrossCon">
@@ -180,6 +180,81 @@
                 </div>
             </div>
         </div>
+    </div> -->
+    <!-- 新版跨部门 -->
+    <div class="multipleRoles">
+        <div class="contentes">
+            <div class="multCons">
+                <div class="multipleRolesLeft">
+                    <div class="muRoLezc muDiv">
+                        支<br/>持<br/>跨<br/>部<br/>门<br/>,
+                    </div>
+                    <div class="muRoLetd muDiv">
+                        <span>多<br/>角<br/>色</span><br/>的<br/>团<br/>队<br/>协<br/>作
+                    </div>
+                </div>
+                <div class="multipleRolesRight">
+                    <div class="outerRing">
+                        <img src="./image/wai.png" alt="">
+                        <div class="outerRingNei">
+                            <img src="./image/qq.png" alt="">
+                        </div>
+                    </div>
+                    <div class="multipleRolesRightCon">
+                        <!-- 外圈 -->
+                        <div class="multipWai" style="top: -0.9375rem;left: 13.125rem">
+                            <div class="multipWaiCont">
+                                <div><img src="./image/projectImg/jishu.png" alt=""></div>
+                            </div>
+                            <p>技术部</p>
+                        </div>
+                        <div class="multipWai" style="top: 13.125rem;left: 28.75rem;">
+                            <div class="multipWaiCont">
+                                <div><img src="./image/projectImg/shoho.png" alt=""></div>
+                            </div>
+                            <p style="width: 6.25rem; margin-left: 2.5rem">售后服务部</p>
+                        </div>
+                        <div class="multipWai" style="left: 13.125rem;bottom: -3.75rem;">
+                            <div class="multipWaiCont">
+                                <div><img src="./image/projectImg/qita.png" alt=""></div>
+                            </div>
+                            <p>其他部门</p>
+                        </div>
+                        <div class="multipWai" style="top: 13.125rem;left: -2.1875rem;">
+                            <div class="multipWaiCont">
+                                <div><img src="./image/projectImg/shichang.png" alt=""></div>
+                            </div>
+                            <p style="margin-left: -2.1875rem;">市场部</p>
+                        </div>
+                        <!-- 内圈 -->
+                        <div class="multipWai" style="top: 8.125rem; left: 7.1875rem">
+                            <div class="multipWaiCont">
+                                <div style="width: 16px;"><img src="./image/projectImg/jingli.png" alt=""></div>
+                            </div>
+                            <p style="margin-left: -4.6875rem;margin-top: -1rem;">项目经理</p>
+                        </div>
+                        <div class="multipWai" style="top: 8.125rem; left: 19.0625rem;">
+                            <div class="multipWaiCont">
+                                <div><img src="./image/projectImg/zhongjian.png" alt=""></div>
+                            </div>
+                            <p style="margin-left: 4.6875rem;margin-top: -1rem;">市场总监</p>
+                        </div>
+                        <div class="multipWai" style="top: 19.0625rem;left: 19.0625rem;">
+                            <div class="multipWaiCont">
+                                <div><img src="./image/projectImg/yuangong.png" alt=""></div>
+                            </div>
+                            <p>普通员工</p>
+                        </div>
+                        <div class="multipWai" style="top: 19.0625rem;left: 7.1875rem">
+                            <div class="multipWaiCont">
+                                <div style="width: 25px;"><img src="./image/projectImg/zhuguan.png" alt=""></div>
+                            </div>
+                            <p>部门主管</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- 支持多种行业和场景使用 -->