新增客户案例适配移动端Page_customersMo

新增客户案例详情页适配移动端（媒体查询）

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/assets/css/customerDeMo.css

@@ -0,0 +1,95 @@
+@media screen and (max-width:600px){
+    nav,footer,#sidebar,#newBridge,.content-left{
+        display:none !important;
+    }
+    html{
+        font-size:100px !important;
+        height:100% !important;
+    }
+    *{
+        box-sizing:border-box !important;
+        -moz-box-sizing:border-box !important; /* Firefox */
+        -webkit-box-sizing:border-box !important; /* Safari */
+    }
+    .solution{
+        display:flex !important;
+        display:-webkit-box !important;
+        display: -moz-box !important;
+        display: -ms-flexbox !important;
+        display: -webkit-flex !important;
+        flex-direction:column !important;
+        -webkit-flex-direction:column !important;
+        width:100% !important;
+    }
+    .content{
+        height:100% !important;
+        width:100% !important;
+    }
+    .solution .section{
+        width:100% !important;
+    }
+    .solution .section-1{
+        height:2.6rem !important;
+        width:100% !important;
+    }
+    .solution .section-1 .section-text{
+        margin-top:0.6rem !important;
+        width:100% !important;
+        font-size:0.36rem !important;
+        height:1.3rem !important;
+        padding-left:0.05rem !important
+    }
+    .solution .section-1 .section-text>h3{
+        font-size:0.30rem !important;
+    }
+    .solution .section-1 .section-text>h3:nth-child(2){
+        text-align:left !important;
+        margin-left:1rem !important;
+        margin-top:0.2rem !important;
+    }
+    .solution .section-1 .dot{
+        width:100% !important;
+        float:none !important;
+        margin:0 !important;
+        overflow: hidden !important;
+    }
+    .solution .section-2{
+        flex:1 !important;
+        width:100% !important;
+    }
+    .solution .section-2 .sort-item ul {
+        line-height:0.16rem !important;
+        height:0.68rem;
+        padding-left:0.05rem !important;
+    }
+    .solution .section-2 .sort-item ul li{
+        margin-top:0.15rem !important;
+    }
+    .solution .section-2 .sort-item ul li a{
+        padding: 0 0.08rem 0 0 !important;
+        font-size:0.16rem !important;
+
+    }
+    .solution .section-2 .content-right{
+        width:100% !important;
+        float:none !important;
+    }
+    .solution .section-2 .content-right .content-detail{
+        margin-top:0.2rem !important;
+        font-size:0.16rem !important;
+        padding-left:0.05rem !important;
+        padding-right:0.05rem !important;
+        width:100% !important;
+    }
+    .solution .section-2 .content-right .content-detail li{
+        list-style: disc !important;
+    }
+    .solution .section-2 .content-right .content-toggle{
+        margin-top:0.2rem !important;
+    }
+    .solution .section-2 .content-right .content-toggle p {
+        float:left !important;
+        margin-top: 0.05rem !important;
+        display:inline !important;
+    }
+}

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/assets/css/customerMo.css

@@ -0,0 +1,138 @@
+*{
+    box-sizing:border-box;
+    -moz-box-sizing:border-box; /* Firefox */
+    -webkit-box-sizing:border-box; /* Safari */
+}
+h3,p,ul{
+    margin:0;
+    padding:0;
+}
+ul,li{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+html{
+    height:100%;
+}
+body {
+    font-family: 'Open Sans', 'Microsoft Yahei';
+    text-rendering: optimizeLegibility !important;
+    -webkit-font-smoothing: antialiased !important;
+    margin:0;
+    height:100%;
+}
+.warp{
+    width: 100%;
+    min-height:100%;
+    display:flex;
+    display:-webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    flex-direction:column;
+    -webkit-flex-direction:column;
+}
+.content{
+    height:100%;
+    width:100%;
+}
+.solution{
+    width:100%;
+}
+.solution .section-1{
+    background-color:rgb(65, 142, 255);
+    height: 7rem;
+    width:100%;
+}
+.solution .section-1 .section-text{
+    height:100%;
+    width:100%;
+    color:#fff;
+}
+.solution .section-1 .section-text>h3{
+    font-size:0.6rem;
+    margin:0.3rem;
+    margin-left:0.4rem;
+}
+.solution .section-1 .section-text>p{
+    font-size:0.4rem;
+    line-height:0.3rem;
+    height:0.35rem;
+    margin:0.33rem 0 0 0.4rem;
+}
+.solution .section-1 .section-text .dot{
+    width:100%;
+    height:60%;
+}
+.solution .section-1 .section-text .dot img{
+    width: 90%;
+    height: 100%;
+    margin-left:5%;
+    margin-top:0.33rem;
+}
+.solution .section-2{
+    flex:1;
+    width:100%;
+}
+.solution .section-2 .head-title{
+    width:100%;
+    height:1.3rem;
+    border-bottom:0.01rem solid rgb(90,90,90);
+}
+.solution .section-2 .head-title>h3{
+    float:left;
+    font-size:0.6rem;
+    color:rgb(90,90,90);
+    margin:0.24rem 0 0 0.4rem;
+}
+.solution .section-2 .head-title>a {
+    float:right;
+    font-size:0.4rem;
+    height:1.3rem;
+    line-height:1.30rem;
+    margin-right:0.3rem;
+    color:rgb(17, 85, 204);
+}
+.solution .section-2 .solution-icon-list{
+    width:100%;
+    height: 100%;
+}
+.solution .section-2 .solution-icon-list>ul>li{
+    width:100%;
+    display:block;
+}
+.solution .section-2 .solution-icon-list>ul>li>a{
+    display:block;
+    width:100%;
+    border:0.01rem solid #D3D3D3;
+    height:2.2rem;
+}
+.solution .section-2 .solution-icon-list>ul>li>a .contentText{
+    float:left;
+    width:70%;
+}
+.solution .section-2 .solution-icon-list>ul>li>a .contentText p{
+    font-size:0.35rem;
+    color:rgb(0,0,0);
+    padding:0.68rem 0 0 0.33rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.solution .section-2 .solution-icon-list>ul>li>a .contentImg{
+    float:right;
+    width:30%;
+    height:2.2rem;
+}
+.solution .section-2 .solution-icon-list>ul>li>a .contentImg img{
+    width:100%;
+    height:70%;
+    margin-top:15%;
+}
+
+
+
+
+
+

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/assets/js/customerMo.js

@@ -0,0 +1,17 @@
+(function (doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function () {
+            var clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            if(clientWidth>=640){
+                docEl.style.fontSize = '100px';
+            }else{
+                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
+            }
+        };
+
+    if (!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/content_customers.html

@@ -175,6 +175,11 @@
     .section-2 .content-left li:hover a{text-decoration: underline; cursor: pointer;}
 
 </#macro>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="${CTPATH}/assets/css/customerDeMo.css" />
+</head>
+
 <@layout>
 <!-- content here -->
 <div class="warp solution" style="margin-top:0;">

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/page_customerCaseMo.html

@@ -0,0 +1,59 @@
+<#macro css>
+</#macro>
+<#macro script>
+</#macro>
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="${CTPATH}/assets/css/customerMo.css" />
+    <script src="${CTPATH}/assets/js/customerMo.js"></script>
+</head>
+<body>
+<!-- content here -->
+<div class="warp solution"  style="margin-top:0;">
+    <div class="section section-1">
+        <div class="content">
+            <div class="section-text">
+                <h3>客户案例</h3>
+                <p>让管理不再难，令生意更简单。</p>
+                <p>针对各行业业务特性，打造个性化行业解决方案。</p>
+                <div class="dot"><img src="${CTPATH}/images/cases/banner.png" alt=""></div>
+            </div>
+        </div>
+    </div>
+    <div class="section section-2">
+        <div class="content">
+            <div class="head-title">
+                <h3>经典案例</h3>
+                <@jp.contents module="customers" orderBy="order_number desc">
+                <#list contents as content>
+                    <#if content?is_first>
+                        <a href="${content.url!}">更多></a>
+                    </#if>
+                </#list>
+                </@jp.contents>
+            </div>
+            <div class="solution-icon-list">
+                <ul>
+                    <@jp.contents module="customers" tag="经典案例" orderBy="order_number desc">
+                    <#list contents as content>
+                        <#if content_index==8><#break></#if>
+                        <li>
+                            <a href="${content.url!}">
+                                <div class="contentText">
+                                    <p>${(content.getMetadataByKey("Abbreviation"))!}：${(content.getMetadataByKey("description"))!}</p>
+                                </div>
+                                <div class="contentImg">
+                                    <img src="${content.thumbnail!}" alt="">
+                                </div>
+                            </a>
+                        </li>
+                    </#list>
+                    </@jp.contents>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>