Переглянути джерело

优化文章上传样式逻辑及展示样式。

huanggang 8 роки тому
батько
коміт
1d5b44517f

+ 13 - 1
cms/templates/default/publish_article.php

@@ -79,7 +79,19 @@
         </tr>
         <tr>
           <th><?php echo $lang['cms_article_content'];?><?php echo $lang['nc_colon'];?></th>
-          <td colspan="2"><?php showEditor('article_content',$output['article_detail']['article_content'],'700px','400px','visibility:hidden;',"false",$output['editor_multimedia'],'simple');?></td>
+          <td colspan="2">
+              <?php showEditor('article_content',$output['article_detail']['article_content'],'700px','400px','visibility:hidden;',"false",$output['editor_multimedia'],'simple');?>
+              <div>
+                  <h2  style="color: red; font-size: 16px;">文章正文上传标准:</h2>
+                  <ul>
+                      <li>1. 文章正文只允许有文章的内容段落,不允许有文章的大标题,大标题放在标题部分。</li>
+                      <li>2. 文章正文字体大小为<span style="color: red;">18px</span>,颜色为#333333,没有特殊需要不要在编辑器内自定义文字大小,系统自动处理。</li>
+                      <li>3. 图片地址:<span style="color: red;">占一行图片</span>上传时必须加上宽高为<span style="color: red;">750</span>,否则系统不予处理,按原始大小显示。</li>
+                      <li>4. 段落特有分段小icon,例如:<img src="<?php echo RESOURCE_SITE_URL;?>/mobile/article/images/1.png" style="width: 25px;vertical-align: middle;"> ,地址为:<span style="color: red;"><?php echo RESOURCE_SITE_URL;?>/mobile/article/images/{ 1~10 }.png</span>宽高度必须为25*25。</li>
+                      <li>5. 图片下方的产品名称,必须为<span style="color: red;">链接</span>形式展示,必须占据一行。</li>
+                  </ul>
+              </div>
+          </td>
         </tr>
         <tr>
           <th><?php echo $lang['cms_text_publisher'];?><?php echo $lang['nc_colon'];?></th>

+ 47 - 18
data/resource/mobile/article/css/article.css

@@ -1,22 +1,51 @@
-img {
-    width:100%;
-    height: auto;
+html,body {
+    font-family: "NotoSansHans-Medium",PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;
+}
+.maincontent {
+    margin: 22px 15px 50px 15px;
+    font-size: 18px;
+    color: #333333;
+    padding-bottom: 30px;
+    border-bottom: 1px solid #DADADA;
 }
 p {
-    font-size:16px;
-    line-height:1.5;
-    margin:5px 0;
-}
-html {
-    padding:0 10px;
-    font-size:16px;
-    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;
-}
-h1 {
-    font-size: 22px;
-    font-weight: bolder;
-    padding-bottom: 15px;
+    font-size: 16px;
+    margin-top: 25px;
+    line-height: 1.7;
+}
+img {
+    vertical-align: text-bottom;
+    width: 25px;
+    height: 25px;
+    padding-right: 10px;
+}
+.title {
+    color: #333333;
+    font-size: 23px;
     line-height: 1.3;
-    margin: 0;
-    color: #000;
+    font-weight: bold;
+}
+.time {
+    font-size: 14px;
+    color: #7E7E7E;
+    margin-top: 30px;
+    padding-bottom: 23px;
+    position: relative;
+}
+.time:after {
+    content: "";
+    height: 0;
+    width: 82px;
+    border-bottom: 1px solid #DADADA;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+.img_full{
+    width: 100%;
+    height: auto;
+    margin-top: -7px;
+}
+a {
+    -webkit-tap-highlight-color:rgba(255,255,255,0);
 }

+ 1 - 1
mobile/control/control.php

@@ -272,7 +272,7 @@ class mbMemberControl extends mobileControl
 
 function bonus_version()
 {
-    return "v=20170112";
+    return "v=201703124";
 }
 function shop_version()
 {

+ 29 - 4
mobile/templates/default/article/show.php

@@ -3,16 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name=viewport>
-    <title>熊猫美妆红包</title>
+    <title>精选文章</title>
     <meta name="format-detection" content="telephone=no" />
     <link rel="stylesheet" href="<?php echo RESOURCE_SITE_URL; ?>/mobile/article/css/common.css?<?php echo bonus_version(); ?>"/>
     <link rel="stylesheet" href="<?php echo RESOURCE_SITE_URL; ?>/mobile/article/css/article.css?<?php echo bonus_version(); ?>"/>
 </head>
 <body>
-    <?php echo $output['article']['article_content'];
-    ?>
+    <div class="maincontent">
+        <h3 class="title">
+            <?php echo $output['article']['article_title']?>
+        </h3>
+        <div class="time">
+
+            <?php
+             $article_publish_time=date("Y年m月d日",$output['article']['article_publish_time']);
+             echo $article_publish_time;
+            ?>更新
+        </div>
+        <?php echo $output['article']['article_content'];
+        ?>
+    </div>
 </body>
 <script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/bridge.js"></script>
+<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery.js" charset="utf-8"></script>
+
 <script>
     window.onload=function()
     {
@@ -36,9 +50,20 @@
                     }
                 }
             })(i);
+            (function(){
+//                判断是否为全屏图片
+                var imgArray=$('img');
+                for(var i=0;i<imgArray.length;i++) {
+                    if (imgArray.eq(i).attr('width') == 750) {
+                        $('img').eq(i).addClass('img_full');
+                    }
+                }
+                //清除系统自带样式
+                $('*').removeAttr('style');
+                $('a').css({"display":"block","font-size":"14px","color":"#7E7E7E","text-align":'center',"margin-top":"-17px"}).attr('href','javascript:void(0)');
+            })()
         }
     };
-
     if(isMobile.iOS()) {
         init_ios_bridge(function(bridge) { });
     } else if (isMobile.Android) {