浏览代码

add:videoinfo列表展示优化v1

lvzhiqiang 1 月之前
父节点
当前提交
c96ab7bf15

+ 16 - 4
src/main/java/top/lvzhiqiang/controller/VideoInfoController.java

@@ -2,13 +2,13 @@ package top.lvzhiqiang.controller;
 
 import com.alibaba.fastjson.JSON;
 import com.github.pagehelper.PageInfo;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
+import top.lvzhiqiang.dto.R;
 import top.lvzhiqiang.dto.VideoInfoQuery;
 import top.lvzhiqiang.entity.VideoInfo;
+import top.lvzhiqiang.exception.ParameterException;
 import top.lvzhiqiang.service.VideoInfoService;
+import top.lvzhiqiang.util.StringUtils;
 
 import javax.annotation.Resource;
 import java.util.HashMap;
@@ -38,4 +38,16 @@ public class VideoInfoController {
     public PageInfo<VideoInfo> getVideoInfoPage(@RequestBody VideoInfoQuery videoInfoQuery) {
         return videoInfoService.getVideoInfoPage(JSON.parseObject(JSON.toJSONString(videoInfoQuery), HashMap.class));
     }
+
+    @RequestMapping("/insertOrUpdateQibing")
+    @ResponseBody
+    public R insertOrUpdateQibing(String identificationCode, String commentfirst, String commenttwo, String commentxp, String commentscore, String userName) {
+        if (StringUtils.isEmpty(identificationCode)) {
+            throw new ParameterException("identificationCode为空!");
+        }
+
+        videoInfoService.insertOrUpdateQibing(identificationCode, commentfirst, commenttwo, commentxp, commentscore);
+
+        return R.ok().data("success");
+    }
 }

+ 2 - 0
src/main/java/top/lvzhiqiang/entity/VideoInfo.java

@@ -132,6 +132,8 @@ public class VideoInfo implements Serializable {
     private String score;
     private String comment;
     private String commentFirst;
+    private String commentXp;
+    private String xpCount;
     private String imgPrefixGFPath;
     private String imgPrefixSYPath;
     private List<String> imgGFList = new ArrayList<>();

+ 2 - 0
src/main/java/top/lvzhiqiang/entity/VideoInfoOther.java

@@ -83,4 +83,6 @@ public class VideoInfoOther implements Serializable {
     @JsonFormat(pattern = DateUtils.PATTERN_TO_SECONDS)
     private LocalDateTime modifyTime;
 
+    private String commentXp;
+
 }

+ 3 - 0
src/main/java/top/lvzhiqiang/mapper/IcodePoolMapper.java

@@ -60,6 +60,9 @@ public interface IcodePoolMapper {
     @Select("SELECT identification_code FROM icode_pool WHERE delete_flag = 1")
     List<String> findIcode();
 
+    @Select("SELECT * FROM icode_pool WHERE identification_code = #{identificationCode}")
+    IcodePool findIcodePoolByCode(String identificationCode);
+
     @Select("SELECT identification_code FROM icode_pool WHERE identification_code = #{identificationCode}")
     List<String> findIcodeByCode(String identificationCode);
 

+ 1 - 1
src/main/java/top/lvzhiqiang/mapper/VideoInfoMapper.java

@@ -123,7 +123,7 @@ public interface VideoInfoMapper {
      * @param code
      * @return
      */
-    @Select("select vi.*, IFNULL(vio.score, 0) AS score, IFNULL(vio.comment, '暂无评论') AS comment, IFNULL(vio.comment_first, '暂无简介') AS commentFirst" +
+    @Select("select vi.*, IFNULL(vio.score, 0) AS score, IFNULL(vio.comment, '暂无评论') AS comment, IFNULL(vio.comment_first, '暂无简介') AS commentFirst, IFNULL(vio.comment_xp, '暂无简介') AS commentXp" +
             "        from video_info vi" +
             "        left join video_info_other vio on vi.identification_code = vio.identification_code and vio.delete_flag = 1" +
             "        where vi.delete_flag = 1 and vi.identification_code=#{code}")

+ 13 - 0
src/main/java/top/lvzhiqiang/mapper/VideoInfoOtherMapper.java

@@ -56,6 +56,11 @@ public interface VideoInfoOtherMapper {
             "ON DUPLICATE KEY UPDATE pic_flag=values(pic_flag),modify_time=now()")
     int insertOrUpdate(String identificationCode, Integer picFlag);
 
+    @Insert("INSERT INTO video_info_other(identification_code, javdb_url, pic_flag, create_time, modify_time) " +
+            "VALUES (#{identificationCode}, #{javdbUrl}, #{picFlag}, now(), now()) " +
+            "ON DUPLICATE KEY UPDATE javdb_url=values(javdb_url),pic_flag=values(pic_flag),modify_time=now()")
+    int insertOrUpdate2(String identificationCode, Integer picFlag, String javdbUrl);
+
     @Insert("INSERT INTO video_info_other(identification_code, resolution_ratio, original, subtitle, recoding, create_time, modify_time) " +
             "VALUES (#{identificationCode},#{resolutionRatio},#{original}, #{subtitle}, #{recoding}, now(), now())")
     void insertVideoInfoOther(String identificationCode, String resolutionRatio, Integer original, Integer subtitle, Integer recoding);
@@ -104,4 +109,12 @@ public interface VideoInfoOtherMapper {
             "   order by modify_time desc" +
             "</script>"})
     List<VideoInfoOther> findVideoInfoOther4MultipleParams(String identificationCode, String resolutionRatio, Integer original, Integer subtitle, Integer recoding);
+
+    @Select("SELECT * FROM video_info_other WHERE identification_code = #{identificationCode}")
+    VideoInfoOther findVideoInfoOtherByCode(String identificationCode);
+
+    @Insert("INSERT INTO video_info_other(identification_code, comment,comment_first,score, comment_xp, create_time, modify_time) " +
+            "VALUES (#{identificationCode}, #{comment}, #{commentFirst}, #{score}, #{commentXp}, now(), now()) " +
+            "ON DUPLICATE KEY UPDATE comment=values(comment),comment_first=values(comment_first),score=values(score),comment_xp=values(comment_xp),modify_time=now()")
+    void updateVideoInfoOther4Xp(VideoInfoOther videoInfoOther);
 }

+ 2 - 0
src/main/java/top/lvzhiqiang/service/VideoInfoService.java

@@ -43,4 +43,6 @@ public interface VideoInfoService {
      * @return
      */
     VideoInfo getVideoInfoDetail(String type, String code);
+
+    void insertOrUpdateQibing(String identificationCode, String commentfirst, String commenttwo, String commentxp, String commentscore);
 }

+ 20 - 0
src/main/java/top/lvzhiqiang/service/impl/BaseServiceImpl.java

@@ -108,8 +108,28 @@ public abstract class BaseServiceImpl<T> implements BaseService<T> {
         //    params.put(ORDER, "desc".equalsIgnoreCase(params.get(ORDER).toString()) ? "asc" : "desc");
         //}
 
+        PageHelper.orderBy(params.get(ORDER_FIELD) + " " + params.get(ORDER));
+    }
+
+    protected void paramsToSort2(Map<String, Object> params, String order2Str) {
+        if (!params.containsKey(ORDER_FIELD) || !params.containsKey(ORDER)
+                || ObjectUtils.isEmpty(params.get(ORDER_FIELD)) || ObjectUtils.isEmpty(params.get(ORDER))) {
+            return;
+        }
+
+        //if ("creditRating".equals(params.get(ORDER_FIELD))) {
+        //    params.put(ORDER_FIELD, "creditRating || 'Z'");
+        //    params.put(ORDER, "desc".equalsIgnoreCase(params.get(ORDER).toString()) ? "asc" : "desc");
+        //}
+
         StringBuilder sb = new StringBuilder();
         sb.append(params.get(ORDER_FIELD)).append(" ").append(params.get(ORDER));
+
+        if (StringUtils.isNotEmpty(order2Str)) {
+            sb.append(",");
+            sb.append(order2Str);
+        }
+
         PageHelper.orderBy(sb.toString());
     }
 }

+ 3 - 1
src/main/java/top/lvzhiqiang/service/impl/BgServiceImpl.java

@@ -566,7 +566,9 @@ public class BgServiceImpl implements BgService {
                     getMaleCast(videoInfo);
 
                     videoInfoMapper.updateJsoupInfoByCode(videoInfo);
-                    videoInfoOtherMapper.insertOrUpdate(identificationCode, 2);
+
+                    IcodePool icodePool = icodePoolMapper.findIcodePoolByCode(identificationCode);
+                    videoInfoOtherMapper.insertOrUpdate2(identificationCode, 2, icodePool != null ? icodePool.getUrl() : null);
 
                     j++;
 

+ 40 - 1
src/main/java/top/lvzhiqiang/service/impl/VideoInfoServiceImpl.java

@@ -7,8 +7,11 @@ import org.springframework.stereotype.Service;
 import top.lvzhiqiang.config.WebAppConfig;
 import top.lvzhiqiang.entity.VideoGenres;
 import top.lvzhiqiang.entity.VideoInfo;
+import top.lvzhiqiang.entity.VideoInfoOther;
 import top.lvzhiqiang.mapper.*;
 import top.lvzhiqiang.service.VideoInfoService;
+import top.lvzhiqiang.util.MarkdownToHtmlUtils;
+import top.lvzhiqiang.util.StringUtils;
 
 import javax.annotation.Resource;
 import java.io.File;
@@ -37,6 +40,9 @@ public class VideoInfoServiceImpl extends BaseServiceImpl<Object> implements Vid
     @Resource
     private CrawlerLoveFootMapper crawlerLoveFootMapper;
 
+    @Resource
+    private VideoInfoOtherMapper videoInfoOtherMapper;
+
     @Value("${spring.profiles.active}")
     private String env;
 
@@ -73,12 +79,21 @@ public class VideoInfoServiceImpl extends BaseServiceImpl<Object> implements Vid
         // 分页
         paramsToPagination(params);
         // 排序
-        paramsToSort(params);
 
         if ("骑兵".equals(bigType)) {
+            paramsToSort2(params,"vi.identification_code desc");
             videoInfoList = videoInfoMapper.getVideoInfoList(params);
+
+            for (VideoInfo videoInfo : videoInfoList) {
+                if (StringUtils.isNotEmpty(videoInfo.getCommentXp())) {
+                    videoInfo.setXpCount(String.valueOf(videoInfo.getCommentXp().split("\\R").length));
+                } else {
+                    videoInfo.setXpCount("0");
+                }
+            }
         } else if ("步兵".equals(bigType)) {
             Object genres = params.get("genres");
+            paramsToSort(params);
             if (null == genres) {
                 List<VideoGenres> videoGenresList = videoInfoInfantryMapper.findGenres();
                 params.put("genres", videoGenresList.get(0).getName());
@@ -86,12 +101,16 @@ public class VideoInfoServiceImpl extends BaseServiceImpl<Object> implements Vid
 
             videoInfoList = videoInfoInfantryMapper.getVideoInfoInfantryList(params);
         } else if ("流出".equals(bigType)) {
+            paramsToSort(params);
             videoInfoList = videoInfoUncensoredMapper.getVideoInfoUncensoredList(params);
         } else if ("码池".equals(bigType)) {
+            paramsToSort2(params, "vi.identification_code desc");
             videoInfoList = videoInfoPoolMapper.getVideoInfoPoolList(params);
         } else if ("足舐".equals(bigType)) {
+            paramsToSort2(params, "vi.identification_code desc");
             videoInfoList = crawlerLoveFootMapper.getVideoInfoLoveFootList(params);
         } else {
+            paramsToSort(params);
             videoInfoList = videoInfoMapper.getVideoInfoList(params);
         }
 
@@ -139,6 +158,10 @@ public class VideoInfoServiceImpl extends BaseServiceImpl<Object> implements Vid
                 }
                 videoInfo.getImgSYList().sort(Comparator.naturalOrder());
             }
+
+            videoInfo.setCommentFirst(MarkdownToHtmlUtils.markdownToHtmlExtensions(videoInfo.getCommentFirst()));
+            videoInfo.setComment(MarkdownToHtmlUtils.markdownToHtmlExtensions(videoInfo.getComment()));
+            videoInfo.setCommentXp(MarkdownToHtmlUtils.markdownToHtmlExtensions(videoInfo.getCommentXp()));
         } else if ("bubing".equals(type)) {
             videoInfo = videoInfoInfantryMapper.getVideoInfoDetail(code);
             if (videoInfo == null) {
@@ -205,4 +228,20 @@ public class VideoInfoServiceImpl extends BaseServiceImpl<Object> implements Vid
 
         return videoInfo;
     }
+
+    @Override
+    public void insertOrUpdateQibing(String identificationCode, String commentfirst, String commenttwo, String commentxp, String commentscore) {
+        VideoInfoOther videoInfoOther = videoInfoOtherMapper.findVideoInfoOtherByCode(identificationCode);
+
+        if (videoInfoOther == null) {
+            videoInfoOther = new VideoInfoOther();
+        }
+
+        videoInfoOther.setComment(commenttwo);
+        videoInfoOther.setCommentFirst(commentfirst);
+        videoInfoOther.setCommentXp(commentxp);
+        videoInfoOther.setScore(commentscore);
+
+        videoInfoOtherMapper.updateVideoInfoOther4Xp(videoInfoOther);
+    }
 }

+ 0 - 1
src/main/resources/env/dev/log4j2-spring.xml

@@ -29,7 +29,6 @@
             <!-- 输出日志的格式 -->
             <PatternLayout pattern="${CONSOLE_LOG_PATTERN}"/>
             <!-- 控制台只输出level及其以上级别的信息(onMatch),其他的直接拒绝(onMismatch)-->
-            <ThresholdFilter level="info" onMatch="ACCEPT" onMismatch="DENY"/>
         </Console>
 
         <!-- 日志文件的 Appender -->

+ 2 - 1
src/main/resources/mapper/VideoInfoMapper.xml

@@ -7,7 +7,8 @@
 
     <select id="getVideoInfoList" resultType="top.lvzhiqiang.entity.VideoInfo">
         select vi.*, IFNULL(vio.score, 0) AS score, IFNULL(vio.comment, '暂无评论') AS comment,
-            IFNULL(vio.resolution_ratio, '?') AS resolutionRatio,vio.original,vio.subtitle,vio.recoding
+            IFNULL(vio.resolution_ratio, '?') AS resolutionRatio,vio.original,vio.subtitle,vio.recoding,
+            vio.comment_first,vio.comment_xp,vio.javdb_url
         from video_info vi
         left join video_info_other vio on vi.identification_code = vio.identification_code and vio.delete_flag = 1
         where vi.delete_flag = 1

+ 1 - 1
src/main/resources/static/css/my-video.css

@@ -18,7 +18,7 @@ body {
 }
 
 .myui-panel {
-    margin-top: 2px;
+    /*margin-top: 2px;*/
     margin-bottom: 10px;
     border-radius: 5px;
 }

+ 168 - 1
src/main/resources/static/js/my-video.js

@@ -173,6 +173,21 @@ function search(pageNo, startFlag, searchSelectFlag) {
                         scoreStr = videoInfo.score;
                     }
 
+                    var str2 = "";
+                    if (bigType == '骑兵') {
+                        str2 = "           <span class=\"pic-tag pic-text\">" +
+                            "               <span class='tag xp' + identificationCode='" + videoInfo.identificationCode + "' title='" + videoInfo.javdbUrl + "' style=\"background-color: rgba(0,0,0,0);\">" + videoInfo.xpCount + "</span>" +
+                            "               <input type='hidden' commentFirst='" + videoInfo.commentFirst + "'>" +
+                            "               <input type='hidden' commentTwo='" + videoInfo.comment + "'>" +
+                            "               <input type='hidden' commentXp='" + videoInfo.commentXp + "'>" +
+                            "               <input type='hidden' commentScore='" + videoInfo.score + "'>" +
+                            "               <input type='hidden' bigType='骑兵'>" +
+                            "               <span class=\"text-right\" style='float:right' title='" + (videoInfo.comment === '' ? '暂无评论' : videoInfo.comment) + "'>" + scoreStr + "</span>" +
+                            "           </span>";
+                    } else {
+                        str2 = "           <span class=\"pic-text text-right\" title='" + (videoInfo.comment === '' ? '暂无评论' : videoInfo.comment) + "'>" + scoreStr + "</span>";
+                    }
+
                     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;);\">" +
@@ -182,7 +197,7 @@ function search(pageNo, startFlag, searchSelectFlag) {
                         "               <input type='hidden' javdbUrl='" + videoInfo.javdbUrl + "'>" +
                         "               <span class=\"tag identificationDate\" title=\"" + orginUrl + "\" style=\"background-color: #00C0FF;\">" + date + "</span>" +
                         "           </span>" +
-                        "           <span class=\"pic-text text-right\" title='" + (videoInfo.comment === '' ? '暂无评论' : videoInfo.comment) + "'>" + scoreStr + "</span>" +
+                        str2 +
                         "       </a>" +
                         "       <div class=\"myui-vodlist__detail\">" +
                         "           <h4 class=\"videodetail title text-overflow\" identificationCode='" + videoInfo.identificationCode + "' orginUrl='" + orginUrl + "'><a title=\" " + videoInfo.name + " \">" + videoInfo.name + "</a></h4>" +
@@ -424,4 +439,156 @@ function initContentEvent() {
             window.open(orginUrlArr[1]);
         }
     });
+
+    initOther4Popup();
+}
+
+function initOther4Popup(){
+    // 打开弹窗
+    $("span.xp").on("click", function () {
+        let parent = $(this).parent();
+        var commentfirst = parent.find("input[type='hidden']").eq(0).attr("commentfirst");
+        var commenttwo = parent.find("input[type='hidden']").eq(1).attr("commenttwo");
+        var commentxp = parent.find("input[type='hidden']").eq(2).attr("commentxp");
+        var commentscore = parent.find("input[type='hidden']").eq(3).attr("commentscore");
+        var bigtype = parent.find("input[type='hidden']").eq(4).attr("bigtype");
+        var identificationCode = $(this).attr("identificationCode");
+        quietPop(bigtype, identificationCode, commentfirst, commenttwo, commentxp, commentscore);
+
+        $(".popup").fadeIn();
+        centerPopup();  // 调用居中函数
+    });
+
+    // 关闭弹窗
+    $(".close-btn").on("click", function () {
+        $(".popup").fadeOut();
+    });
+
+    // 阻止表单默认提交行为
+    $(".popup form").on("submit", function (e) {
+        e.preventDefault();
+
+        var nameEn = $("#popup-form-hidden-nameEn").val();
+        if (nameEn === '骑兵') {
+            insertOrUpdateQibingSubmit();
+        }
+    });
+
+    // 实现拖动功能
+    let isDragging = false;
+    let offsetX, offsetY;
+
+    $("#draggable-popup h2").on("mousedown", function (e) {
+        // 判断如果点击在 input 或 select 上,不触发拖动
+        if ($(e.target).closest("input, select, label").length) {
+            return;  // 如果按在 input 或 select 上,不启动拖动
+        }
+
+        isDragging = true;
+        offsetX = e.clientX - $(this).offset().left;
+        offsetY = e.clientY - $(this).offset().top;
+        $(this).css("cursor", "grabbing"); // 改变鼠标指针样式
+    });
+
+    $(document).on("mousemove", function (e) {
+        if (isDragging) {
+            const left = e.clientX - offsetX;
+            const top = e.clientY - offsetY;
+            $("#draggable-popup").css({
+                left: `${left}px`,
+                top: `${top}px`,
+            });
+        }
+    });
+
+    $(document).on("mouseup", function () {
+        isDragging = false;
+        $("#draggable-popup").css("cursor", "move"); // 恢复鼠标指针样式
+    });
+
+    // 重置按钮的功能
+    $("#reset-button").on("click", function () {
+        $("#result-container").fadeOut();  // 隐藏请求结果区域
+        $(".loading-icon").fadeOut();  // 重置时隐藏加载图标
+    });
+}
+
+// 显示加载图标
+function showLoading() {
+    $("#result-content").text(""); // 清空内容
+    $("#result-container").hide();  // 使用 hide() 快速隐藏
+    $("#loading-icon").fadeIn(); // 显示加载图标
+}
+
+// 计算并设置弹窗居中位置
+function centerPopup() {
+    const popup = $("#draggable-popup");
+    const windowWidth = $(window).width();
+    const windowHeight = $(window).height();
+    const popupWidth = popup.outerWidth();
+    const popupHeight = popup.outerHeight();
+
+    // 计算弹窗的位置
+    const left = (windowWidth - popupWidth) / 2;
+    const top = (windowHeight - popupHeight) / 4;
+
+    // 设置弹窗的位置
+    popup.css({
+        left: `${left}px`,
+        top: `${top}px`,
+    });
+}
+
+function quietPop(bigtype, identificationCode, commentfirst, commenttwo, commentxp, commentscore) {
+    if (bigtype === '骑兵') {
+        let formContent = "";
+        formContent += '<div class="form-item"><label for="identificationCode">code:</label><input readonly type="text" name="identificationCode" style="border:revert;"  value="' + identificationCode + '"></div>';
+        formContent += '<div class="form-item"><label for="commentfirst">commentfirst:</label><textarea rows="5" cols="100" style="background: antiquewhite;width: 100%;height: 100%;" name="commentfirst">' + commentfirst + '</textarea></div>';
+        formContent += '<div class="form-item"><label for="commenttwo">commenttwo:</label><textarea rows="5" cols="100" style="background: antiquewhite;width: 100%;height: 100%;" name="commenttwo">' + commenttwo + '</textarea></div>';
+        formContent += '<div class="form-item"><label for="commentxp">commentxp:</label><textarea rows="6" cols="100" style="background: antiquewhite;width: 100%;height: 100%;" name="commentxp">' + commentxp +'</textarea></div>';
+        formContent += '<div class="form-item"><label for="commentscore">commentscore:</label><input type="text" name="commentscore" placeholder="可为空" style="border:revert;" value="' + commentscore + '"></div>';
+        $("#form-container-2").html(formContent);
+
+        $("#popup-form-hidden-nameEn").val(bigtype);
+
+        $("#draggable-popup > h2").text("InsertOrUpdate4Qibing");
+    }
+}
+
+function insertOrUpdateQibingSubmit(){
+    var formData = new FormData($("#popup-form")[0]);
+    formData.append("userName", getCookie('username'));
+    $.ajax({
+        url: "videoInfo/insertOrUpdateQibing", //请求的url地址
+        dataType: "json", //返回格式为json
+        data: formData, //参数值
+        type: "post", //请求方式
+        processData: false,// 告诉jQuery不要去处理发送的数据
+        contentType: false,// 告诉jQuery不要去设置Content-Type请求头
+        async: true, //请求是否异步,默认为异步,这也是ajax重要特性
+        success: function (data) {
+            //$(".popup > .watchlist-loading").css("display", "none");
+            //请求成功时处理
+            if (data != null && $.trim(data) != "" && data.success) {
+                $("#searchbutton").click();
+            } else {
+                //$("#insertOrUpdateAlert").html(data.message);
+            }
+
+            // 在请求成功后填充数据到结果区域
+            $("#result-content").text(JSON.stringify(data, null, 2));
+            $("#loading-icon").fadeOut();
+            $("#result-container").fadeIn();  // 显示结果区域
+        },
+        beforeSend: function () {
+            //$(".popup > .watchlist-loading").css("display", "block");
+            showLoading();  // 显示加载状态
+        },
+        complete: function () {
+        },
+        error: function (data) {
+            //请求出错处理
+            console.log("insertOrUpdateQibing-submit error," + data);
+        }
+    });
 }

+ 2 - 0
src/main/resources/static/js/my-voddetail.js

@@ -8,6 +8,7 @@ $(function () {
  */
 function initOther() {
     $(".commentdiv").eq(1).css("display", "none");
+    $(".commentdiv").eq(2).css("display", "none");
     $(".imgdiv").eq(1).css("display", "none");
 
     $("#commentul").find("a").click(function () {
@@ -164,6 +165,7 @@ function initDetail() {
 
                 $("#commentfirstspan").html(data.commentFirst);
                 $("#commentspan").html(data.comment);
+                $("#commentxp").html(data.commentXp);
 
                 var imgTitle = data.identificationCode + " " + data.name;
                 if (data.imgGFList.length > 0) {

+ 43 - 4
src/main/resources/static/video.html

@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="css/mytheme-site.css?v=2.8" type="text/css">
     <link rel="stylesheet" href="css/mytheme-font.css?v=2.8" type="text/css">
     <link rel="stylesheet" href="css/my-video.css" type="text/css">
+    <link rel="stylesheet" href="css/my-popup.css" type="text/css">
     <script src="js/jquery-3.6.0.min.js"></script>
     <script src="js/pagination.js"></script>
     <script type="text/javascript" src="js/my-video.js"></script>
@@ -39,16 +40,16 @@
         }
 
         .myui-panel {
-            margin-bottom: 20px;
+            margin-bottom: 10px;
             border-radius: 5px;
         }
 
         .myui-screen__list {
-            padding: 10px 10px 0;
+            padding: 5px 10px 0;
         }
 
         .myui-screen__list li {
-            margin-bottom: 10px;
+            margin-bottom: 5px;
             margin-right: 10px;
         }
 
@@ -138,6 +139,18 @@
         .myui-panel-bg2, .myui-foot, .myui-panel-bg {
             background-color: #ffffff;
         }
+
+        .myui-panel_bd li.displayli{
+            margin-right: 1px;
+        }
+
+        li.displayli a.searchbtn{
+            padding: 7px 7px;
+        }
+
+        .myui-panel-bg2{
+            padding: 5px 10px 0px 10px;
+        }
     </style>
     <style type="text/css">
         .dynamic_hide {
@@ -226,7 +239,7 @@
             </div>
         </div>
         <!--翻页-->
-        <ul class="myui-page text-center clearfix" style="line-height: 140%;margin-top: 20px;">
+        <ul class="myui-page text-center clearfix" style="line-height: 140%;margin-top: 10px;">
         </ul>
         <!-- 翻页-->
     </div>
@@ -248,6 +261,32 @@
     <video src="" width="800" height="500" controls></video>
 </div>
 <div id="bigpreview"><img src=""/></div>
+
+
+<div class="popup" id="draggable-popup">
+    <button class="close-btn">&times;</button>
+    <h2></h2>
+    <form id="popup-form">
+        <!-- 表单内容容器 -->
+        <div id="form-container">
+            <div id="form-container-1"></div>
+            <div id="form-container-2"></div>
+        </div>
+        <!-- 按钮容器 -->
+        <div class="form-buttons">
+            <input type="hidden" value="" id="popup-form-hidden-nameEn"/>
+            <button type="submit">提交</button>
+            <button type="reset" id="reset-button">重置</button>
+        </div>
+    </form>
+    <!-- 请求结果展示区域 -->
+    <div class="result-container" id="result-container">
+        <h4>接口返回结果:</h4>
+        <pre id="result-content"></pre>
+    </div>
+    <!-- 加载图标 -->
+    <div class="loading-icon" id="loading-icon"></div>
+</div>
 </body>
 </html>
 

+ 16 - 0
src/main/resources/static/voddetail.html

@@ -194,6 +194,13 @@
                 margin-right: 5px;
             }
         }
+
+        .commentdiv ul li::marker{
+            content: "• ";
+        }
+        .commentdiv ul{
+            padding-left: 2em;  /* 基础缩进 */
+        }
     </style>
 </head>
 <body>
@@ -312,6 +319,8 @@
                                                       data-div="commentfirstspan">简介</a></li>
                                 <li class=""><a href="javascript:void(0);" data-toggle="tab"
                                                 data-div="commentspan">评论</a></li>
+                                <li class=""><a href="javascript:void(0);" data-toggle="tab"
+                                                data-div="commentxp">XP</a></li>
                             </ul>
                         </div>
                     </div>
@@ -329,6 +338,13 @@
                             <!--<a class="details" href="javascript:">详情 <i class="fa fa-angle-down"></i></a>-->
                         </div>
                     </div>
+                    <div class="myui-panel_bd commentdiv">
+                        <div class="col-pd text-collapse content">
+                            <span class="sketch content" id="commentxp"></span>
+                            <span class="data" style="display: none;"></span>
+                            <!--<a class="details" href="javascript:">详情 <i class="fa fa-angle-down"></i></a>-->
+                        </div>
+                    </div>
                 </div>
             </div>
             <!-- end 剧情简介-->