文章详情 样式优化

src/main/resources/config/dev/application-dev.yml

@@ -53,7 +53,7 @@ logging:
 # 服务域名
 caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
-  spiServer: http://192.168.2.75:8008
+  spiServer: https://spi-b.caimei365.com
   imageDomain: https://img-b.caimei365.com
   wwwDomain: https://www-b.caimei365.com
 

src/main/resources/static/css/article/article.css

@@ -163,12 +163,11 @@ dl,dd,dt{zoom:1}
 	.article .new-mian img{max-width:100%;display:inline-block;display:block;margin:0 auto;height:auto !important}
 	.article p{font-size:16px;line-height:30px;color:#777;margin-bottom:15px}
 	.dianzan{width:auto;text-align:center}
-	.article .like{cursor:pointer;display:inline-block;height:60px;line-height:60px;margin:30px auto;border:1px solid #eee;color:#777;border-radius:5px;padding:0 20px}
-	.article .like:before{width:50px;height:50px;background-position:-320px -60px;vertical-align:middle;margin-right:5px}
+	.article .like{color: #e15616; cursor: pointer;display: inline-block;height: 80px;width: 80px;line-height: 110px;margin: 30px auto;border-radius: 50%;background: #fef6f3;text-align: center;position: relative}
+	.article .like:before{width: 45px;height: 45px;background-position: 5px -539px;vertical-align: middle;border-radius: 50%;position: absolute;left: 17px}
 	.like.hasDian{color:#e15616}
-	.dea-tag a{display:inline-block;color:#fff;height:32px;line-height:32px;padding:0 12px;background:#e15616;text-align:center;border-radius:4px;margin-right:15px;cursor:pointer}
-
-
+	.dea-tag a{display:inline-block;color:#fff;height:32px;line-height:32px;padding:0 12px;background:#e15616;text-align:center;border-radius:4px;margin-right:15px;cursor:pointer;margin-bottom: 10px}
+	.article .like:hover{background: #ffe6dc}
 
 }
 @media screen and (max-width:768px){.header .logo,.header .home{display:none}
@@ -239,9 +238,9 @@ dl,dd,dt{zoom:1}
 	.article .join img{width:126px;height:126px;margin:20px auto;margin-right:15px}
 	.article .join img:last-child{margin-right:0}
 	.dea-tag a{display:inline-block;font-size:3.4vw;color:#fff;height:8vw;line-height:8vw;padding:0 3vw;background:#e15616;text-align:center;border-radius:2px;margin:3vw 3vw 0 0;cursor:pointer}
-	.article .like{display:block;width:35vw;height:12vw;line-height:12vw;margin:5vw auto;border:1px solid #eee;color:#777;padding:0 6vw;border-radius:5px;background:#f7f7f7}
-	.article .like:before{height:10vw;width:10vw;background-position:-75.3vw -38.6vw;vertical-align:middle;margin-right:1vw}
+	/*.article .like{display:block;width:35vw;height:12vw;line-height:12vw;margin:5vw auto;border:1px solid #eee;color:#777;padding:0 6vw;border-radius:5px;background:#f7f7f7}*/
+	/*.article .like:before{height:10vw;width:10vw;background-position:-75.3vw -38.6vw;vertical-align:middle;margin-right:1vw}*/
 	.classify{height:10vw;line-height:10vw;border-left:solid 4px #e15616;font-size:3.7vw;color:#333;padding:0 3vw;background:#fff}
-
-
+	.article .like{color: #e15616;cursor: pointer;display: block;height: 18.4vw;width: 18.4vw;line-height: 27.4vw;margin: 5vw auto;border-radius: 50%;background: #fef6f3;text-align: center;position: relative}
+	.article .like:before{ width: 8vw;height: 8vw;background-position: -14vw -78.4vw;vertical-align: middle;border-radius: 50%;position: absolute;top: 3.2vw}
 }

src/main/resources/static/js/article/detail.js

@@ -2,15 +2,15 @@
     //点赞
     $("body").on("click", ".dianzan .like", function(){
         if($(this).hasClass("hasDian")){
-            alertInfo("您已经给该信息点过赞!");
+            CAIMEI.Alert("您已经给该信息点过赞!",'确定');
         }else{
             var infoId = $(this).attr("data-id");
             $.get("/article/like", {id: infoId}, function(res){
                 if(res.code === 0){
                     console.log("点赞成功!");
-                    $(".like").text("赞" + (parseInt($(".like").attr("data-count"))+1)).addClass("hasDian");
+                    $(".like").text( parseInt($(".like").attr("data-count"))+1).addClass("hasDian");
                 } else {
-                    alertInfo(res.msg);
+                    CAIMEI.Alert(res.msg,'确定');
                 }
             });
         }

src/main/resources/templates/article/detail.html

@@ -30,7 +30,7 @@
             </p>
             <div class="new-mian" id="contentDiv" th:utext="*{content}"></div>
             <div class="dianzan">
-                <span class="like icon mIcon" th:attr="data-count=*{likes}, data-id=*{id}" th:text="'赞'+*{likes}"></span>
+                <span class="like icon mIcon" th:attr="data-count=*{likes}, data-id=*{id}" th:text="*{likes}"></span>
             </div>
             <p class="dea-tag">
                 <span th:each="label,labelStat:*{labels}" th:if="${not #strings.isEmpty(label)}">