update:部分体验优化v1

src/main/resources/static/js/my-video.js

@@ -119,7 +119,7 @@ function search(pageNo, startFlag, searchSelectFlag) {
                     str += "<li class=\"col-lg-8 col-md-6 col-sm-4 col-xs-3\">" +
                         "   <div class=\"myui-vodlist__box\">" +
                         "       <a class=\"myui-vodlist__thumb lazyload\" title=\"\" style=\"background-image: url(&quot;apics/" + videoInfo.imgUrl + "&quot;);\">" +
-                        "           <span class=\"playvideo play hidden-xs\" identificationCode='" + videoInfo.identificationCode + "'></span>" +
+                        "           <span class=\"bigpreview playvideo play hidden-xs\" imgUrl='" + videoInfo.imgUrl + "'></span>" +
                         "           <span class=\"pic-tag pic-tag-top\">" +
                         "               <span class=\"tag identificationCode\" style=\"background-color: #FB7299;\">" + videoInfo.identificationCode + "</span>" +
                         "               <span class=\"tag\" style=\"background-color: #00C0FF;\">" + date + "</span>" +
@@ -127,7 +127,7 @@ function search(pageNo, startFlag, searchSelectFlag) {
                         "           <span class=\"pic-text text-right\" title='" + videoInfo.comment + "'>" + videoInfo.score + "</span>" +
                         "       </a>" +
                         "       <div class=\"myui-vodlist__detail\">" +
-                        "           <h4 class=\"bigpreview title text-overflow\" imgUrl='" + videoInfo.imgUrl + "' ><a title=\" " + videoInfo.name + " \">" + videoInfo.name + "</a></h4>" +
+                        "           <h4 class=\"videodetail title text-overflow\" identificationCode='" + videoInfo.identificationCode + "' ><a title=\" " + videoInfo.name + " \">" + videoInfo.name + "</a></h4>" +
                         "           <p class=\"text text-overflow text-muted hidden-xs\" title='" + videoInfo.mainWho + "'>直属：" + videoInfo.mainWho + "</p>" +
                         "       </div>" +
                         "   </div>" +
@@ -202,7 +202,7 @@ function getQueryHeaderInfo(bigType, startFlag, searchSelectFlag) {
             } else {
                 $(".leixingli").css("display", "block");
             }
-            if (searchSelectFlag){
+            if (searchSelectFlag) {
                 $("ul.leixingul").find("a:eq(1)").addClass("btn-warm");
                 $("ul.yanyuanul").find("a:eq(1)").addClass("btn-warm");
                 $("ul.paixuul").find("a.btn-warm").removeClass("btn-warm");
@@ -310,7 +310,8 @@ function initContentEvent() {
     //         $("#playvideo").find("video").attr("src", "");
     //     }
     // });
-    $(".playvideo").click(function () {
+
+    $(".videodetail").click(function () {
         var type = $("#bigType").attr("prepath");
         var code = $(this).attr("identificationCode");
         window.open("voddetail.html?type=" + type + "&code=" + code, "_blank");

src/main/resources/static/voddetail.html

@@ -27,6 +27,84 @@
     <![endif]-->
     <style type="text/css">
         body {
+            background: #ffffff;
+            color: #000000;
+        }
+
+        a, h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+            color: #000000;
+        }
+
+        a:hover {
+            color: #00A1D6;
+        }
+
+        .text-muted {
+            color: #99a2aa;
+            font-weight: bold;
+        }
+
+        .split-line {
+            background-color: #f4f4f4;
+        }
+
+        .bottom-line:after {
+            border-color: #f4f4f4;
+        }
+
+        .nav li.active a {
+            border-color: #00A1D6;
+            color: #00A1D6;
+        }
+
+        .myui-panel-bg {
+            background-color: #ffffff;
+        }
+
+        .myui-vodlist__text.striped .striped-head, .myui-vodlist__text.to-color li:nth-of-type(odd), .myui-extra li a {
+            background-color: #ffffff;
+        }
+
+        .myui-foot {
+            background-color: #ffffff;
+        }
+
+        .myui-content__thumb .myui-vodlist__thumb {
+            width: 800px;
+        }
+
+        @media (max-width: 767px) {
+            .myui-content__thumb {
+                float: initial;
+                border-right: none;
+                padding-right: 0px;
+            }
+
+            .myui-content__thumb .myui-vodlist__thumb {
+                width: calc(100%);
+                height: 180px;
+            }
+
+            .myui-content__detail {
+                float: left;
+                width: calc(100%);
+                padding-left: 0px;
+                margin-top: 10px;
+            }
+
+            .myui-content__operate {
+                float: left;
+                width: 100%;
+                padding-left: 20px;
+            }
+
+            .myui-content__detail .score .rating li .fa {
+                font-size: 14px;
+            }
+        }
+    </style>
+    <style type="text/css">
+        body {
             font-family: "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
         }
 
@@ -117,54 +195,6 @@
             }
         }
     </style>
-    <style type="text/css">
-        body {
-            background: #ffffff;
-            color: #000000;
-        }
-
-        a, h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
-            color: #000000;
-        }
-
-        a:hover {
-            color: #00A1D6;
-        }
-
-        .text-muted {
-            color: #99a2aa;
-            font-weight: bold;
-        }
-
-        .split-line {
-            background-color: #f4f4f4;
-        }
-
-        .bottom-line:after {
-            border-color: #f4f4f4;
-        }
-
-        .nav li.active a {
-            border-color: #00A1D6;
-            color: #00A1D6;
-        }
-
-        .myui-panel-bg {
-            background-color: #ffffff;
-        }
-
-        .myui-vodlist__text.striped .striped-head, .myui-vodlist__text.to-color li:nth-of-type(odd), .myui-extra li a {
-            background-color: #ffffff;
-        }
-
-        .myui-foot {
-            background-color: #ffffff;
-        }
-
-        .myui-content__thumb .myui-vodlist__thumb {
-            width: 800px;
-        }
-    </style>
 </head>
 <body>
 <div class="container dynamic_hide" id="my">
@@ -175,9 +205,10 @@
                 <div class="myui-panel-box clearfix">
                     <div class="col-xs-1">
                         <span class="text-muted">当前位置：</span>
-                        <a href="https://jav.lvzhiqiang.top/video.html">首页</a> <i class="fa fa-angle-right text-muted"></i>
-                        <a href="javascript:void(0);" id ="videoType"></a> <i class="fa fa-angle-right text-muted"></i>
-                        <span class="text-muted" id ="videoName"></span>
+                        <a href="https://jav.lvzhiqiang.top/video.html">首页</a> <i
+                            class="fa fa-angle-right text-muted"></i>
+                        <a href="javascript:void(0);" id="videoType"></a> <i class="fa fa-angle-right text-muted"></i>
+                        <span class="text-muted" id="videoName"></span>
                     </div>
                     <div class="col-xs-1">
                         <div class="myui-content__thumb">
@@ -248,8 +279,10 @@
                         <div class="myui-panel__head active bottom-line clearfix">
                             <h3 class="title">样品图像 </h3>
                             <ul class="nav nav-tabs active" id="imgtul">
-                                <li class="active"><a href="javascript:void(0);" data-toggle="tab" data-div="imggfdiv">官方</a></li>
-                                <li class=""><a href="javascript:void(0);" data-toggle="tab" data-div="imgsydiv">自有</a></li>
+                                <li class="active"><a href="javascript:void(0);" data-toggle="tab" data-div="imggfdiv">官方</a>
+                                </li>
+                                <li class=""><a href="javascript:void(0);" data-toggle="tab" data-div="imgsydiv">自有</a>
+                                </li>
                             </ul>
                         </div>
                     </div>
@@ -274,9 +307,11 @@
                     <div class="myui-panel_hd">
                         <div class="myui-panel__head active bottom-line clearfix">
                             <h3 class="title">样品描述</h3>
-                            <ul class="nav nav-tabs active" id ="commentul">
-                                <li class="active"><a href="javascript:void(0);" data-toggle="tab" data-div="commentfirstspan">简介</a></li>
-                                <li class=""><a href="javascript:void(0);" data-toggle="tab" data-div="commentspan">评论</a></li>
+                            <ul class="nav nav-tabs active" id="commentul">
+                                <li class="active"><a href="javascript:void(0);" data-toggle="tab"
+                                                      data-div="commentfirstspan">简介</a></li>
+                                <li class=""><a href="javascript:void(0);" data-toggle="tab"
+                                                data-div="commentspan">评论</a></li>
                             </ul>
                         </div>
                     </div>