add:增加照片列表v1

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

@@ -0,0 +1,41 @@
+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 top.lvzhiqiang.dto.VideoInfoQuery;
+import top.lvzhiqiang.entity.FileImage;
+import top.lvzhiqiang.service.PictureInfoService;
+
+import javax.annotation.Resource;
+import java.util.HashMap;
+
+/**
+ * 照片信息 Controller
+ *
+ * @author lvzhiqiang
+ * 2024/8/26 11:02
+ */
+@RestController
+@RequestMapping("/pictureInfo")
+public class PictureInfoController {
+
+    @Resource
+    private PictureInfoService pictureInfoService;
+
+    /**
+     * 照片列表分页
+     *
+     * @param videoInfoQuery
+     * @return com.github.pagehelper.PageInfo<top.lvzhiqiang.entity.FileImage>
+     * @author lvzhiqiang
+     * 2024/8/26 11:02
+     */
+    @PostMapping("/getPictureInfoPage")
+    public PageInfo<FileImage> getPictureInfoPage(@RequestBody VideoInfoQuery videoInfoQuery) {
+        return pictureInfoService.getPictureInfoPage(JSON.parseObject(JSON.toJSONString(videoInfoQuery), HashMap.class));
+    }
+}

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

@@ -6,15 +6,13 @@ import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.bind.annotation.RestController;
 import top.lvzhiqiang.entity.VideoCast;
 import top.lvzhiqiang.entity.VideoGenres;
-import top.lvzhiqiang.mapper.CrawlerLoveFootMapper;
-import top.lvzhiqiang.mapper.VideoInfoInfantryMapper;
-import top.lvzhiqiang.mapper.VideoInfoPoolMapper;
-import top.lvzhiqiang.mapper.VideoInfoUncensoredMapper;
+import top.lvzhiqiang.mapper.*;
 import top.lvzhiqiang.service.VideoCastService;
 import top.lvzhiqiang.service.VideoGenresService;
 import top.lvzhiqiang.util.StringUtils;
 
 import javax.annotation.Resource;
+import java.util.ArrayList;
 import java.util.List;
 
 /**
@@ -45,6 +43,9 @@ public class QueryHeaderController {
     @Resource
     private CrawlerLoveFootMapper crawlerLoveFootMapper;
 
+    @Resource
+    private PictureInfoMapper pictureInfoMapper;
+
     @RequestMapping("/getQueryHeaderInfo")
     @ResponseBody
     public JSONObject getQueryHeaderInfo(String bigType, String infantryType) {
@@ -89,4 +90,20 @@ public class QueryHeaderController {
 
         return result;
     }
+
+
+    @RequestMapping("/getQueryPictureHeaderInfo")
+    @ResponseBody
+    public JSONObject getQueryPictureHeaderInfo(String bigType, String infantryType) {
+        JSONObject result = new JSONObject();
+
+        if ("上传".equals(bigType)) {
+            List<VideoCast> videoCastList = new ArrayList<>();
+            List<VideoGenres> videoGenresList = pictureInfoMapper.findUploadGenres();
+            result.put("videoCastList", videoCastList);
+            result.put("videoGenresList", videoGenresList);
+        }
+
+        return result;
+    }
 }

src/main/java/top/lvzhiqiang/mapper/PictureInfoMapper.java

@@ -0,0 +1,40 @@
+package top.lvzhiqiang.mapper;
+
+import org.apache.ibatis.annotations.Select;
+import top.lvzhiqiang.entity.FileImage;
+import top.lvzhiqiang.entity.VideoCast;
+import top.lvzhiqiang.entity.VideoGenres;
+
+import java.util.List;
+import java.util.Map;
+
+/**
+ * 照片信息Mapper
+ *
+ * @author lvzhiqiang
+ * 2024/8/26 11:02
+ */
+public interface PictureInfoMapper {
+
+
+    @Select("select main_who AS name, count(id) AS count from video_info_infantry where type = #{infantryType} group by main_who order by count(id) desc")
+    List<VideoCast> findCast(String infantryType);
+
+    @Select("select fic.category_name AS name, count(fi.category_id) AS count " +
+            "from file_image fi " +
+            "         left join file_image_category fic on fi.category_id = fic.id " +
+            "group by fi.category_id " +
+            "order by count(fi.category_id) desc ")
+    List<VideoGenres> findUploadGenres();
+
+    @Select({"<script>" +
+            "select fi.*,fic.category_name from file_image fi left join file_image_category fic on fi.category_id = fic.id WHERE 1 = 1" +
+            "<if test=\"keyword != null and keyword != ''\">" +
+            "   and fi.remark like concat('%',#{keyword},'%')" +
+            "</if>" +
+            "<if test=\"genres != null and genres != ''\">" +
+            "   and fic.category_name = #{genres}" +
+            "</if>" +
+            "</script>"})
+    List<FileImage> getUploadImageInfoList(Map<String, Object> params);
+}

src/main/java/top/lvzhiqiang/service/PictureInfoService.java

@@ -0,0 +1,21 @@
+package top.lvzhiqiang.service;
+
+import com.github.pagehelper.PageInfo;
+import top.lvzhiqiang.entity.FileImage;
+
+import java.util.Map;
+
+/**
+ * 照片信息Service
+ *
+ * @author lvzhiqiang
+ * 2024/8/26 11:02
+ */
+public interface PictureInfoService {
+    /**
+     * 条件查询
+     *
+     * @return
+     */
+    PageInfo<FileImage> getPictureInfoPage(Map<String, Object> params);
+}

src/main/java/top/lvzhiqiang/service/impl/PictureInfoServiceImpl.java

@@ -0,0 +1,55 @@
+package top.lvzhiqiang.service.impl;
+
+import com.github.pagehelper.PageInfo;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+import top.lvzhiqiang.config.InitRunner;
+import top.lvzhiqiang.entity.FileImage;
+import top.lvzhiqiang.mapper.PictureInfoMapper;
+import top.lvzhiqiang.service.PictureInfoService;
+
+import javax.annotation.Resource;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * 照片信息ServiceImpl
+ *
+ * @author lvzhiqiang
+ * 2024/8/26 11:02
+ */
+@Service
+public class PictureInfoServiceImpl extends BaseServiceImpl<Object> implements PictureInfoService {
+
+    @Resource
+    private PictureInfoMapper pictureInfoMapper;
+    @Value("${spring.profiles.active}")
+    private String env;
+
+    @Override
+    public PageInfo<FileImage> getPictureInfoPage(Map<String, Object> params) {
+        Object bigType = params.get("bigType");
+        List<FileImage> pictureInfoList = new ArrayList<>();
+
+        // 转换成like
+        paramsToLike(params, "keyword");
+        // 分页
+        paramsToPagination(params);
+        // 排序
+        paramsToSort(params);
+
+        if ("上传".equals(bigType)) {
+            pictureInfoList = pictureInfoMapper.getUploadImageInfoList(params);
+
+            String bpicsUrl = InitRunner.dicCodeMap.get("bpics_url").getCodeValue();
+            pictureInfoList.stream().forEach(e -> {
+                e.setPath(bpicsUrl + e.getPath());
+            });
+        }
+
+        PageInfo<FileImage> pictureInfoPageInfo = new PageInfo<>(pictureInfoList);
+        return pictureInfoPageInfo;
+    }
+
+}

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

@@ -0,0 +1,137 @@
+body {
+    line-height: 100%;
+}
+
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1920px;
+    }
+
+    .container {
+        padding-left: 120px;
+        padding-right: 120px;
+    }
+}
+
+.myui-panel-bg2, .myui-vodlist__bg, .myui-screen__item, .myui-vodlist__text.striped .striped-head, .myui-vodlist__text.to-color li:nth-of-type(odd), .myui-extra li a {
+    background-color: #ffffff;
+}
+
+.myui-panel {
+    margin-top: 2px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+}
+
+.myui-panel-box {
+    padding: 1px;
+}
+
+.myui-screen__list {
+    padding: 10px 10px 0;
+}
+
+.myui-screen__list li {
+    margin-bottom: 10px;
+    margin-right: 10px;
+}
+
+.text-muted {
+    color: #99a2aa;
+}
+
+.btn {
+    border-radius: 5px;
+}
+
+.myui-vodlist__thumb {
+    border-radius: 5px;
+    padding-top: 60%;
+    background: url(../cover/load.png) no-repeat;
+}
+
+[class*=col-], .myui-content__list li, .myui-vodlist__media.col li {
+    padding: 10px;
+}
+
+@media (max-width: 1500px) {
+    .myui-header__search {
+        width: 200px;
+        margin-left: 20px;
+        float: right;
+        margin-right: 32px;
+        margin-top: 0px;
+    }
+}
+
+.myui-header__search {
+    width: 200px;
+    margin-left: 20px;
+    float: right;
+    margin-right: 32px;
+    margin-top: 0px;
+}
+
+#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;
+}
+
+.loading {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.loading-shaixuan {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -25%);
+}
+
+#playvideo {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #FFFFFF;
+}
+
+#bigpreview {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #FFFFFF;
+}
+

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

@@ -0,0 +1,360 @@
+$(function () {
+    initOther();
+    search(1, true, false);
+});
+
+/**
+ * 初始化其他操作
+ */
+function initOther() {
+    $(".slideDown-btn").click(function () {
+        var display = $('.slideDown-box');
+        if (display.css('display') == 'block') {
+            display.slideUp("slow");
+            $(this).html('展开  <i class="fa fa-angle-down"></i>');
+        } else {
+            display.slideDown("slow");
+            $(this).html('收起   <i class="fa fa-angle-up"></i>');
+        }
+    });
+
+    $("#searchbutton").click(function () {
+        search(1, false, false);
+    });
+    $("#shaixuan").click(function () {
+        $("#wd").val("");
+
+        search(1, false, false);
+    });
+    $("#wd").keydown(function (e) {
+        if (e.keyCode == 13) {
+            search(1, false, false);
+        }
+    });
+    $(".dropdown-box").find("li").click(function () {
+        $("#bigType").text($(this).text());
+        $("#bigType").attr("prepath", $(this).attr("prepath"));
+        $(".dropdown-box").attr("style", "display: none;");
+
+        if ($(this).text() == '足舐') {
+            $(".lovefoot").attr("style", "display: block;");
+        } else {
+            $(".lovefoot").attr("style", "display: none;");
+        }
+
+        getQueryHeaderInfo($("#bigType").text(), false, true);
+        search(1, false, true);
+    });
+    $(".dropdown-hover").mouseover(function () {
+        $(".dropdown-box").attr("style", "display: block;");
+    });
+    $(".dropdown-hover").mouseout(function () {
+        $(".dropdown-box").attr("style", "display: none;");
+    });
+    $(".clearAll").click(function () {
+        $("#playvideo").find("video").attr("src", "");
+        $("#bigpreview").find("img").attr("src", "");
+        $("#playvideo").css("display", "none");
+        $("#bigpreview").css("display", "none");
+    });
+}
+
+/**
+ * 多条件搜索
+ * @param pageNo
+ */
+function search(pageNo, startFlag, searchSelectFlag) {
+    var genres = "";
+    var cast = "";
+    var keyword = "";
+    if (searchSelectFlag) {
+        $("#wd").val("");
+    }
+    if (!startFlag) {
+        genres = $(".leixingul").find(".btn-warm").text().replace("全部", "");
+        cast = $(".yanyuanul").find(".btn-warm").text().replace("全部", "");
+        keyword = $("#wd").val();
+    }
+
+    var orderField = $(".paixuul").find(".btn-warm").attr("orderField");
+    var order = $(".paixuul").find(".btn-warm").attr("order");
+    var bigType = $("#bigType").text();
+    var prepath = $("#bigType").attr("prepath");
+
+    if (searchSelectFlag) {
+        genres = "";
+        cast = "";
+        if (bigType == '足舐') {
+            genres = "待审查";
+            orderField = "vi.update_date";
+        } else if (bigType == '码池') {
+            orderField = "vi.modify_time";
+        } else {
+            orderField = "vi.issue_date";
+        }
+
+        order = "desc";
+    }
+
+    $.ajax({
+        url: "pictureInfo/getPictureInfoPage", //请求的url地址
+        dataType: "json", //返回格式为json
+        data: JSON.stringify({
+            "pageNo": pageNo,
+            "pageSize": 10,
+            "genres": genres,
+            "cast": cast,
+            "orderField": orderField,
+            "order": order,
+            "keyword": keyword,
+            "bigType": bigType
+        }), //参数值
+        type: "post", //请求方式
+        contentType: "application/json;charset=utf-8",
+        async: true, //请求是否异步，默认为异步，这也是ajax重要特性
+        success: function (data) {
+            //请求成功时处理
+            if (data != null && $.trim(data) != "" && data.success) {
+                if (startFlag) {
+                    getQueryHeaderInfo($("#bigType").text(), startFlag, false);
+                }
+
+                data = data.data;
+                var picInfoList = data.list;
+                var str = "";
+                for (var i = 0; i < picInfoList.length; i++) {
+                    var picInfo = picInfoList[i];
+
+                    var date = picInfo.createTime;
+                    if (orderField == 'fi.modify_time') {
+                        date = picInfo.modifyTime;
+                    }
+
+                    var scoreStr = '';
+                    var orginUrl= '';
+                    if (bigType == '上传') {
+                        scoreStr += picInfo.categoryName + '|';
+                        scoreStr += picInfo.size + '|';
+                        scoreStr += picInfo.modifyTime;
+                    } else {
+                        scoreStr = picInfo.size;
+                    }
+
+                    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;" + picInfo.path + "&quot;);\">" +
+                        "           <span class=\"bigpreview playvideo play hidden-xs\" imgUrl='" + picInfo.path + "'></span>" +
+                        "           <span class=\"pic-tag pic-tag-top\">" +
+                        "               <span class=\"tag identificationDate\" title=\"" + orginUrl + "\" style=\"background-color: #00C0FF;\">" + picInfo.newName + "</span>" +
+                        "           </span>" +
+                        "           <span class=\"pic-text text-right\" title=\"\" \">" + scoreStr + "</span>" +
+                        "       </a>" +
+                        "       <div class=\"myui-vodlist__detail\">" +
+                        "           <h4 class=\"videodetail title text-overflow\" orginUrl='" + picInfo.path + "'><a title=\" " + picInfo.remark + " \">" + picInfo.remark + "</a></h4>" +
+                        "       </div>" +
+                        "   </div>" +
+                        "</li>";
+                }
+                $(".myui-vodlist").html(str);
+
+                if (str == "") {
+                    $(".vodlistnone").attr("style", "padding: 50px;display: block;");
+                    $(".myui-page").html("");
+                } else {
+                    $(".vodlistnone").attr("style", "padding: 50px;display: none;");
+                    $(".myui-page").pagination({
+                        pageSize: "10",
+                        pageNo: pageNo,
+                        total: data.total,
+                        callback: function (pageNo) {
+                            //$("#wd").val("");
+
+                            search(pageNo, false, false);
+                        }
+                    });
+                }
+
+                initContentEvent();
+            } else {
+                alert(data.message);
+            }
+        },
+        beforeSend: function () {
+            //请求前的处理
+            if (startFlag) {
+                $("#cover").css("display", "block");
+            } else {
+                $(".loading").css("display", "block");
+            }
+        },
+        complete: function () {
+            //请求完成的处理
+            if (startFlag) {
+                $("#cover").css("display", "none");
+            } else {
+                $(".loading").css("display", "none");
+            }
+        },
+        error: function (data) {
+            //请求出错处理
+            alert('error：' + data);
+        }
+    });
+}
+
+/**
+ *  查询头信息
+ * @param bigType
+ * @param startFlag
+ */
+function getQueryHeaderInfo(bigType, startFlag, searchSelectFlag) {
+    var infantryType = "";
+    if (bigType == '步兵' && !searchSelectFlag) {
+        infantryType = $(".leixingul").find(".btn-warm").text().replace("全部", "");
+    }
+    $.ajax({
+        url: "queryHeader/getQueryPictureHeaderInfo", //请求的url地址
+        dataType: "json", //返回格式为json
+        data: {"bigType": bigType, "infantryType": infantryType}, //参数值
+        type: "post", //请求方式
+        async: !startFlag, //请求是否异步，默认为异步，这也是ajax重要特性
+        success: function (data) {
+            if (bigType == '步兵') {
+                $(".leixingli").css("display", "none");
+            } else {
+                $(".leixingli").css("display", "block");
+            }
+            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");
+
+                if (bigType == '足舐') {
+                    $("ul.paixuul").find("a:eq(3)").addClass("btn-warm");
+                } else if (bigType == '码池') {
+                    $("ul.paixuul").find("a:eq(2)").addClass("btn-warm");
+                } else {
+                    $("ul.paixuul").find("a:eq(1)").addClass("btn-warm");
+                }
+            }
+
+            //请求成功时处理
+            if (data != null && $.trim(data.data) != "" && data.success) {
+                data = data.data;
+                if ($.isEmptyObject(data)) {
+                    if ($(".displayli").length > 0) {
+                        $(".displayli").remove();
+                    }
+                    $(".vodlistnone").attr("style", "padding: 50px;display: block;");
+                    $(".myui-vodlist").html("");
+                    $(".myui-page").html("");
+                    return;
+                }
+
+                if ($(".displayli").length > 0) {
+                    $(".displayli").remove();
+                }
+                if (data.videoCastList.length > 0) {
+                    var videoCastList = data.videoCastList;
+                    var str = "";
+                    for (var i = 0; i < videoCastList.length; i++) {
+                        var videoCast = videoCastList[i];
+                        str += "<li class='displayli'><a class=\"btn searchbtn\" title='" + videoCast.count + "'>" + videoCast.name + "</a></li>";
+                    }
+                    $(".yanyuanul").append(str);
+                }
+                if (data.videoGenresList.length > 0) {
+                    var videoGenresList = data.videoGenresList;
+                    var str = "";
+                    for (var i = 0; i < videoGenresList.length; i++) {
+                        var videoGenres = videoGenresList[i];
+
+                        if (bigType == '步兵' && i == 0) {
+                            str += "<li class='displayli'><a class=\"btn btn-warm searchbtn\" title='" + videoGenres.count + "'>" + videoGenres.name + "</a></li>";
+                        } else {
+                            str += "<li class='displayli'><a class=\"btn searchbtn\" title='" + videoGenres.count + "'>" + videoGenres.name + "</a></li>";
+                        }
+                    }
+                    $(".leixingul").append(str);
+                }
+
+                if (searchSelectFlag && bigType != '步兵') {
+                    $("ul.leixingul").find("a.btn-warm").removeClass("btn-warm");
+                    if (bigType == '足舐') {
+                        $("ul.leixingul").find("a:eq(3)").addClass("btn-warm");
+                    } else if (bigType == '码池') {
+                        $("ul.leixingul").find("a:eq(1)").addClass("btn-warm");
+                    } else {
+                        $("ul.leixingul").find("a:eq(1)").addClass("btn-warm");
+                    }
+                }
+
+                $(".searchbtn").unbind("click");
+                $(".searchbtn").click(function () {
+                    $(this).closest('ul').find(".searchbtn").removeClass("btn-warm");
+                    $(this).addClass("btn-warm");
+
+                    if ($(this).attr('order') != undefined) {
+                        var order = $(this).attr('order');
+                        if ("desc" == order) {
+                            $(this).attr("order", "asc");
+                        } else if ("asc" == order) {
+                            $(this).attr("order", "desc");
+                        }
+                    }
+
+                    $("#wd").val("");
+
+                    search(1, false, false);
+                });
+            } else {
+                alert(data.message);
+            }
+        },
+        beforeSend: function () {
+            //请求前的处理
+            if (!startFlag) {
+                $(".loading-shaixuan").css("display", "block");
+            }
+        },
+        complete: function () {
+            //请求完成的处理
+            if (!startFlag) {
+                $(".loading-shaixuan").css("display", "none");
+            }
+        },
+        error: function (data) {
+            //请求出错处理
+            alert('error：' + data);
+        }
+    });
+}
+
+/**
+ * 初始化主内容事件
+ */
+function initContentEvent() {
+    $(".videodetail").click(function () {
+        var orginUrl = $(this).attr("orginUrl");
+        window.open(orginUrl, "_blank");
+    });
+
+    $(".bigpreview,.close").click(function () {
+        if ($("#modal").css("display") === 'none') {
+            $("#modal").css("display", "block");
+            $("#modal").find("img").attr("src", $(this).attr("imgUrl"));
+        } else if ($("#modal").css("display") === 'block') {
+            $("#modal").css("display", "none");
+            $("#modal").find("img").attr("src", "");
+        }
+    });
+    $("#modal").dblclick(function () {
+        $(this).hide();
+    });
+    $(window).on('click', function(event) {
+        var $modal = $('#modal');
+        if ($(event.target).is($modal)) {
+            $modal.hide();
+        }
+    });
+}

src/main/resources/static/picture.html

@@ -7,8 +7,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="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">
@@ -16,10 +16,10 @@
     <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-video.css" type="text/css">
+    <link rel="stylesheet" href="css/my-picture.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>
+    <script type="text/javascript" src="js/my-picture.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>
@@ -142,6 +142,42 @@
         .dynamic_hide {
             display: none;
         }
+
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+
+        .modal-content {
+            display: block;
+            margin: auto;
+            max-width: 90%;
+            max-height: 90%;
+            border-radius: 10px;
+        }
+
+        .close {
+            position: absolute;
+            top: 20px;
+            right: 35px;
+            color: #fff;
+            font-size: 40px;
+            font-weight: bold;
+            transition: color 0.3s;
+            cursor: pointer;
+        }
+
+        .close:hover,
+        .close:focus {
+            color: #bbb;
+        }
     </style>
     <script type="text/javascript">
         function show() {
@@ -168,19 +204,16 @@
                     <div class="myui-panel__head active bottom-line clearfix">
                         <a class="slideDown-btn more pull-right" href="javascript:">收起 <i
                                 class="fa fa-angle-up"></i></a>
-                        <h3 class="clearAll title">电影 </h3>
+                        <h3 class="clearAll title">照片 </h3>
                         <a class="more text-muted" id="shaixuan">筛选</a>
                         <div class="myui-header__search search-box">
                             <a class="search-select dropdown-hover" href="javascript:">
-                                <span class="text" id="bigType" prepath="qibing">骑兵</span>
+                                <span class="text" id="bigType" prepath="upload">上传</span>
                                 <i class="fa fa-caret-down"></i>
                                 <div class="dropdown-box bottom fadeInDown">
                                     <ul class="item" style="line-height: 140%;">
-                                        <li class="" prepath="qibing">骑兵</li>
-                                        <li class="" prepath="bubing">步兵</li>
-                                        <li class="" prepath="liuchu">流出</li>
-                                        <li class="" prepath="machi">码池</li>
-                                        <li class="" prepath="machi">足舐</li>
+                                        <li class="" prepath="upload">上传</li>
+                                        <li class="" prepath="crawler">爬虫</li>
                                     </ul>
                                 </div>
                             </a>
@@ -198,17 +231,14 @@
                             <li><a class="text-muted btn">类型</a></li>
                             <li class="leixingli"><a class="btn btn-warm searchbtn leixing">全部</a></li>
                         </ul>
-                        <ul class="myui-screen__list nav-slide clearfix yanyuanul" data-align="left">
+                        <ul class="myui-screen__list nav-slide clearfix yanyuanul" data-align="left" style="display: none;">
                             <li><a class="btn text-muted">演员</a></li>
                             <li><a class="btn btn-warm searchbtn yanyuan">全部</a></li>
                         </ul>
                     </div>
                     <ul class="myui-screen__list nav-slide clearfix paixuul" data-align="left">
                         <li><a class="btn text-muted">排序</a></li>
-                        <li><a class="btn btn-warm searchbtn" orderField="vi.issue_date" order="desc">发布时间</a></li>
-                        <li><a class="btn searchbtn" orderField="vi.modify_time" order="desc">更新时间</a></li>
-                        <li><a class="btn searchbtn lovefoot" orderField="vi.update_date" order="desc" style="display: none;">原始更新时间</a></li>
-                        <li><a class="btn searchbtn" orderField="vio.score" order="asc">评分</a></li>
+                        <li><a class="btn btn-warm searchbtn" orderField="fi.create_time" order="desc">创建时间</a></li>
                     </ul>
                 </div>
             </div>
@@ -249,7 +279,11 @@
 <div id="playvideo">
     <video src="" width="800" height="500" controls></video>
 </div>
-<div id="bigpreview"><img src=""/></div>
+
+<div id="modal" class="modal">
+    <span class="close">&times;</span>
+    <img class="modal-content" id="modal-image">
+</div>
 </body>
 </html>