add:影片详情页页面开发v1

src/main/java/top/lvzhiqiang/controller/VideoDetailController.java

@@ -0,0 +1,38 @@
+package top.lvzhiqiang.controller;
+
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import top.lvzhiqiang.entity.VideoInfo;
+import top.lvzhiqiang.service.VideoInfoService;
+
+import javax.annotation.Resource;
+
+/**
+ * 电影详情 Controller
+ *
+ * @author lvzhiqiang
+ * 2022/5/22 21:35
+ */
+@RestController
+@RequestMapping("/videoDetail")
+public class VideoDetailController {
+
+    @Resource
+    private VideoInfoService videoInfoService;
+
+    /**
+     * 影片信息详情
+     *
+     * @param type
+     * @param code
+     * @return com.github.pagehelper.PageInfo<top.lvzhiqiang.entity.VideoInfo>
+     * @author lvzhiqiang
+     * 2022/5/22 21:35
+     */
+    @PostMapping("/getVideoInfoDetail")
+    public VideoInfo getVideoInfoDetail(String type,String code) {
+        VideoInfo videoInfo = new VideoInfo();
+        return videoInfo;
+    }
+}

src/main/resources/static/css/my-voddetail.css

@@ -0,0 +1,45 @@
+.myui-content__detail {
+    float: left;
+    width: calc(100% - 800px - 16px);
+    padding-left: 20px;
+}
+
+.myui-content__operate {
+    float: left;
+    width: calc(100% - 800px - 16px);
+    padding-left: 20px;
+}
+
+.myui-content__thumb {
+    border-right: 1px solid #E1E1E1;
+    padding-right: 15px;
+}
+
+.myui-content__detail .data {
+    line-height: 25px;
+}
+
+#cover {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    background: #FFFFFF;
+    width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
+    height: 100%;
+    filter: alpha(opacity=60); /*设置透明度为60%*/
+    opacity: 1; /*非IE浏览器下设置透明度为60%*/
+    display: none;
+    z-Index: 999;
+}
+
+#cover img {
+    position: absolute;
+    bottom: 50%;
+    right: 50%;
+    margin-left: 40px;
+    margin-top: 40px;
+}
+
+.dynamic_hide {
+    display: none;
+}

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;" + prepath + "/" + videoInfo.imgUrl + "&quot;);\">" +
-                        "           <span class=\"playvideo play hidden-xs\" videoUrl='" + videoInfo.videoUrl + "'></span>" +
+                        "           <span class=\"playvideo play hidden-xs\" identificationCode='" + videoInfo.identificationCode + "'></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>" +
@@ -296,20 +296,26 @@ function getQueryHeaderInfo(bigType, startFlag, searchSelectFlag) {
 function initContentEvent() {
     var prepath = $("#bigType").attr("prepath");
 
+    // $(".playvideo").dblclick(function () {
+    //     if (prepath == "machi") {
+    //         return;
+    //     }
+    //
+    //     if ($("#playvideo").css("display") === 'none') {
+    //         $("#playvideo").css("display", "block");
+    //         $("#playvideo").find("video").attr("src", prepath + "/" + $(this).attr("videoUrl"));
+    //         $("#playvideo").find("video").prop('muted', true);
+    //     } else if ($("#playvideo").css("display") === 'block') {
+    //         $("#playvideo").css("display", "none");
+    //         $("#playvideo").find("video").attr("src", "");
+    //     }
+    // });
     $(".playvideo").dblclick(function () {
-        if (prepath == "machi") {
-            return;
-        }
-
-        if ($("#playvideo").css("display") === 'none') {
-            $("#playvideo").css("display", "block");
-            $("#playvideo").find("video").attr("src", prepath + "/" + $(this).attr("videoUrl"));
-            $("#playvideo").find("video").prop('muted', true);
-        } else if ($("#playvideo").css("display") === 'block') {
-            $("#playvideo").css("display", "none");
-            $("#playvideo").find("video").attr("src", "");
-        }
+        var type = $("#bigType").attr("prepath");
+        var code = $(this).attr("identificationCode");
+        window.open("voddetail.html?type=" + type + "&code=" + code, "_blank");
     });
+
     $(".bigpreview").dblclick(function () {
         if ($("#bigpreview").css("display") === 'none') {
             $("#bigpreview").css("display", "block");

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

@@ -0,0 +1,65 @@
+$(function () {
+    initOther();
+    initDetail();
+});
+
+/**
+ * 初始化其他操作
+ */
+function initOther() {
+
+}
+
+function getUrlParam(name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+    if (r != null) return unescape(r[2]);
+    return null;
+}
+
+/**
+ * 初始化详情
+ * @param pageNo
+ */
+function initDetail() {
+    var type = getUrlParam('type');
+    var code = getUrlParam('code');
+    $.ajax({
+        url: "videoDetail/getVideoInfoDetail", //请求的url地址
+        dataType: "json", //返回格式为json
+        data: {"type": type, "code": code}, //参数值
+        type: "post", //请求方式
+        async: true, //请求是否异步，默认为异步，这也是ajax重要特性
+        success: function (data) {
+            //请求成功时处理
+            if (data != null && $.trim(data) != "" && data.success) {
+                console.log(data)
+            } else {
+                alert(data.message);
+            }
+        },
+        beforeSend: function () {
+            //请求前的处理
+            $("#cover").css("display", "block");
+        },
+        complete: function () {
+            $("#cover").css("display", "none");
+            show();
+        },
+        error: function (data) {
+            //请求出错处理
+            alert('error：' + data);
+        }
+    });
+}
+
+function show() {
+    var my = $("#my,.myui-foot");
+    $.each(my, function (index, value) {
+        if (value.className.indexOf("dynamic_hide") > -1) {
+            value.classList.remove("dynamic_hide");
+        } else {
+            value.classList.add("dynamic_hide");
+        }
+    });
+}

src/main/resources/static/voddetail.html

@@ -0,0 +1,306 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+<head>
+    <title>影片详情</title>
+    <meta name="referrer" content="never">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="pragma" content="no-cache">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="expires" content="0">
+    <meta name="keywords" content="JAV私人影院，骑兵、步兵、流出等等">
+    <meta name="description" content="JAV私人影院，骑兵、步兵、流出等等">
+    <meta name="renderer" content="webkit|ie-comp|ie-stand">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="shortcut icon" href="cover/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="css/mytheme-ui.css?v=2.8" type="text/css">
+    <link rel="stylesheet" href="css/mytheme-color3.css?v=2.8" type="text/css" name="default">
+    <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-voddetail.css" type="text/css">
+    <script src="js/jquery-3.6.0.min.js"></script>
+    <script type="text/javascript" src="js/my-voddetail.js"></script>
+    <!--[if lt IE 9]>
+    <script src="https://cdn.staticfile.org/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <style type="text/css">
+        body {
+            font-family: "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
+        }
+
+        [class*=col-], .myui-content__list li, .myui-vodlist__media.col li {
+            padding: 10px
+        }
+
+        .btn {
+            border-radius: 5px;
+        }
+
+        .myui-vodlist__thumb {
+            border-radius: 5px;
+            padding-top: 67.5%;
+            background: url(/cover/load.png) no-repeat;
+        }
+
+        .myui-vodlist__thumb.square {
+            padding-top: 100%;
+            background: url(/cover/load.png) no-repeat;
+        }
+
+        .myui-vodlist__thumb.wide {
+            padding-top: 60%;
+            background: url(/cover/load.png) no-repeat;
+        }
+
+        .myui-vodlist__thumb.actor {
+            padding-top: 140%;
+        }
+
+        .myui-panel {
+            margin-bottom: 20px;
+            border-radius: 5px;
+        }
+
+        .myui-player__item .fixed {
+            width: 500px;
+        }
+
+        .myui-vodlist__text li a, .myui-vodlist__media li {
+            padding: 10px 0;
+        }
+
+        .myui-screen__list li {
+            margin-bottom: 10px;
+            margin-right: 10px;
+        }
+
+        @media (min-width: 1440px) {
+            .col-lg-wide-75 {
+                width: 100%
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .container {
+                max-width: 1920px;
+            }
+
+            .container {
+                padding-left: 120px;
+                padding-right: 120px;
+            }
+
+            .container.min {
+                width: 1200px;
+                padding: 0;
+            }
+        }
+
+        @media (max-width: 767px) {
+            body, body.active {
+                padding-bottom: 50px;
+            }
+
+            [class*=col-], .myui-panel, .myui-content__list li {
+                padding: 5px
+            }
+
+            .myui-vodlist__text li a, .myui-vodlist__media li {
+                padding: 10px 0;
+            }
+
+            .myui-screen__list li {
+                margin-bottom: 5px;
+                margin-right: 5px;
+            }
+        }
+    </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">
+    <div class="row">
+        <div class="col-lg-wide-75 col-md-wide-7 col-xs-1 padding-0">
+            <!-- 详细信息-->
+            <div class="myui-panel myui-panel-bg clearfix">
+                <div class="myui-panel-box clearfix">
+                    <div class="col-xs-1">
+                        <span class="text-muted">当前位置：</span>
+                        <a href="https://ty.fantuan.tv">首页</a> <i class="fa fa-angle-right text-muted"></i>
+                        <a href="/vodshow/id/23.html">其它</a> <i class="fa fa-angle-right text-muted"></i>
+                        <span class="text-muted">金属之声·奥斯卡</span>
+                    </div>
+                    <div class="col-xs-1">
+                        <div class="myui-content__thumb">
+                            <a class="myui-vodlist__thumb picture" href="#" title="金属之声·奥斯卡">
+                                <img class="lazyload"
+                                     src="qibing/(女优)岬ななみ/2022-04-08 IPX-855 「課長、一緒にぶっ飛びません？」 逆キメセク痴女子社員 出張先の相部屋で昇天する2人… 岬ななみ.jpg"
+                                     style="">
+                                <span class="play hidden-xs"></span>
+                            </a>
+                        </div>
+                        <div class="myui-content__detail">
+                            <!-- 评分 -->
+                            <div id="rating" class="score" data-mid="1" data-id="143044" data-score="2">
+                                <span class="left text-muted">评分：</span>
+                                <ul class="rating">
+                                    <li title="很差" val="1"><i class="fa fa-star"></i></li>
+                                    <li title="较差" val="2"><i class="fa fa-star"></i></li>
+                                    <li title="还行" val="3"><i class="fa fa-star-o"></i></li>
+                                    <li title="推荐" val="4"><i class="fa fa-star-o"></i></li>
+                                    <li title="力荐" val="5"><i class="fa fa-star-o"></i></li>
+                                </ul>
+                                <span class="branch">3.0</span>
+                                <span class="text-muted" id="ratewords">较差</span>
+                            </div>
+                            <p class="data hidden-sm">
+                                <span class="text-muted">識別碼：</span>
+                                <span class="text-red">RBK-038</span>
+                            </p>
+                            <p class="data hidden-sm">
+                                <span class="text-muted">發行日期：</span>
+                                <span class="">2022-02-25</span>
+                            </p>
+                            <p class="data hidden-sm">
+                                <span class="text-muted">長度：</span>
+                                <span class="">120分鐘</span>
+                            </p>
+                            <p class="data hidden-sm">
+                                <span class="text-muted">導演：</span>
+                                <span class="">芳賀栄太郎</span>
+                            </p>
+                            <p class="data hidden-sm">
+                                <span class="text-muted">製作商：</span>
+                                <span class="">アタッカーズ</span>
+                            </p>
+                            <p class="data hidden-sm">
+                                <span class="text-muted">發行商：</span>
+                                <span class="">龍縛</span>
+                            </p>
+                            <p class="data hidden-sm">
+                                <span class="text-muted">類別：</span>
+                                <span class="">已婚婦女 單體作品 DMM獨家 高畫質</span>
+                            </p>
+                            <p class="data hidden-sm">
+                                <span class="text-muted">演員：</span>
+                                <span class="">九条みちる</span>
+                            </p>
+                        </div>
+                        <div class="myui-content__operate">
+                            <a class="btn btn-warm" href="/vodplay/143044-1-1.html"><i class="fa fa-play"></i> 立即播放</a>
+                            <a class="btn btn-danger" href="javascript:void(0);" onclick=""><i class="fa fa-star"></i>
+                                评分</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- end 详细信息-->
+            <!-- 剧情简介-->
+            <div class="myui-panel myui-panel-bg clearfix" id="desc">
+                <div class="myui-panel-box clearfix">
+                    <div class="myui-panel_hd">
+                        <div class="myui-panel__head active bottom-line clearfix">
+                            <h3 class="title">样品描述</h3>
+                            <ul class="nav nav-tabs active">
+                                <li class="active"><a href="#playlist1" data-toggle="tab">剧情简介</a></li>
+                                <li class="active"><a href="#playlist1" data-toggle="tab">私有评论</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="myui-panel_bd">
+                        <div class="col-pd text-collapse content">
+                            <span class="sketch content">一个摇滚乐队的鼓手突然发现自己失聪，他的乐队搭档露和他都很懊恼，但又不得不面对这残酷的现实。</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 剧情简介-->
+            <!-- 样品图像-->
+            <div class="myui-panel myui-panel-bg clearfix">
+                <div class="myui-panel-box clearfix">
+                    <div class="myui-panel_hd">
+                        <div class="myui-panel__head active bottom-line clearfix">
+                            <h3 class="title">样品图像 </h3>
+                            <ul class="nav nav-tabs active">
+                                <li class="active"><a href="#playlist1" data-toggle="tab">官方</a></li>
+                                <li class="active"><a href="#playlist1" data-toggle="tab">自有</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="tab-content myui-panel_bd">
+                        <div id="playlist1" class="tab-pane fade in clearfix active">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- end 样品图像-->
+        </div>
+    </div>
+</div>
+<div class="myui-foot clearfix dynamic_hide">
+    <div class="container min">
+        <div class="row">
+            <div class="col-pd text-center">
+                <p>本站所有内容都由本人私藏，仅供宽带测试之用，请勿将本网站免费电影用于商业用途，因此造成的任何责任与本站无关!</p>
+                <p class="margin-0">
+                    © 2022 JAV.LVZHIQIANG.TOP私人影院 </p>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="cover"><img src="cover/loading.gif" style="width: 80px; height: 80px;"/></div>
+</body>
+</html>
+
+
+