diff --git a/src/main/resources/static/front/collectInfoDetail.html b/src/main/resources/static/front/collectInfoDetail.html
new file mode 100644
index 0000000..f1af4ee
--- /dev/null
+++ b/src/main/resources/static/front/collectInfoDetail.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta http-equiv="pragma" content="no-cache"/>
+    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
+    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
+    <title>收藏详情</title>
+
+    <link href="css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="css/my.css" rel="stylesheet"/>
+    <link href="css/nav.css" rel="stylesheet">
+    <link href="/end/css/quill.snow.css" rel="stylesheet">
+
+    <style>
+        [v-cloak] {
+            display: none;
+        }
+        .ql-editor img {
+            width: 600px;
+        }
+    </style>
+
+</head>
+<body>
+<div id="wrapper" v-cloak>
+    <div class="container">
+        <!-- 头部开始 -->
+        <div class="nx-header">
+            <div style="display: flex;width: 100%; height: 30px; line-height: 30px; background-color: #eee;">
+
+                <div style="flex: 5; text-align: right">
+                    <span v-if="user.name">
+                    欢迎您，{{user.name}}
+                    <a style="margin-right: 50px; color: blue" href="javascript:void(0)" @click="logout">退出</a>
+                    </span>
+                    <a v-if="!(user.name)" href="/end/page/login.html" target="_blank" style="margin-right: 10px; color: #666666">登录</a>
+                    <a href="/end/page/register.html" target="_blank" style="margin-right: 30px; color: #666666">注册</a>
+                </div>
+            </div>
+
+
+            <div>
+                <ul style="display: flex; background-color: orange; height: 30px">
+                    <li class="nav-item"><a href="index.html">首页</a></li>
+                    <li class="nav-item"><a href="advertiserInfo.html">系统公告</a></li>
+					<li class="nav-item"><a href="foodsMenuInfo.html">菜谱</a></li>
+<!--					<li class="nav-item"><a href="foodsMaterialInfo.html">食材</a></li>-->
+					<li class="nav-item"><a class="active" href="collectInfo.html">收藏</a></li>
+					<li class="nav-item"><a href="notesInfo.html">笔记</a></li>
+					<li class="nav-item"><a href="newsInfo.html">饮食资讯</a></li>
+					<li class="nav-item"><a href="messageInfo.html">趣味答题</a></li>
+
+                    <li v-if="isShow" class="nav-item"><a href="/end/page/index.html" target="_blank">进入后台系统</a></li>
+                </ul>
+            </div>
+
+        </div>
+        <!-- 头部结束 -->
+    </div>
+    <div class="container" style="margin-top: 10px">
+        <div class="info">
+            <div class="row">
+                <div class="col-md-8 col-md-offset-2">
+                    <div class="panel panel-default">
+                        <div class="panel-body bg-gray">
+							<div class="row p-10" style="margin-bottom: 10px">
+								<div class="col-md-2">名称：</div>
+								<div class="col-md-10">{{ obj.name }}</div>
+							</div>
+							<div class="row p-10" style="margin-bottom: 10px">
+								<div class="col-md-2">时间：</div>
+								<div class="col-md-10">{{ obj.time }}</div>
+							</div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--richtext
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <div class="panel panel-default">
+                    <div class="ql-editor panel-body" id="view-notice-body">
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        richText-->
+        <!-- /. 表单数据 -->
+
+        <div class="comment" v-if="isComment">
+            <div class="row">
+                <div class="col-md-8 col-md-offset-2">
+                    <h2>评论</h2>
+                </div>
+            </div>
+
+
+            <div class="comment-item">
+                <!--                <div class="row mt-10">-->
+                <!--                    <div class="col-md-8 col-md-offset-2" style="font-size: 20px; font-weight: bold">admin</div>-->
+                <!--                </div>-->
+                <div class="row mt-10">
+                    <div class="col-md-8 col-md-offset-2" style="text-align: justify">
+                        <textarea style="resize:none; width: 100%" rows="3" v-model="comment.content"></textarea>
+                    </div>
+                </div>
+                <div class="row mt-10">
+                    <div class="col-md-8 col-md-offset-2" style="text-align: right;">
+                        <button class="btn btn-primary f-r" @click="add()">发送</button>
+                        <hr>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="comment-item" v-for="item in comments">
+                <div class="row mt-10">
+                    <div class="col-md-8 col-md-offset-2" style="font-size: 20px; font-weight: bold">{{ item.name }}
+                    </div>
+                </div>
+                <div class="row mt-10">
+                    <div class="col-md-8 col-md-offset-2" style="text-align: justify">
+                        {{ item.content }}
+                    </div>
+                </div>
+                <div class="row mt-10">
+                    <div class="col-md-8 col-md-offset-2" style="text-align: right;">
+                        <span style="color: #888888">{{ item.time }}</span>
+                        <hr>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+<script src="js/jquery-1.10.2.js"></script>
+<script src="js/vue2.6.11/vue.min.js"></script>
+<script src="js/vue2.6.11/axios.js"></script>
+<script src="/end/js/quill.js"></script>
+
+<script>
+
+    new Vue({
+        el: '#wrapper',
+        data: {
+            imgWidth: '0px',
+            comments: [],
+            content: '',
+            obj: {},
+            isComment: false,
+            comment: {
+                content: '',
+                foreignId: 0
+            },
+            fileSrc: '',
+            user: {},
+            isShow: false
+        },
+        created() {
+            axios.get('/auth').then(res => {
+                if (res.data.code === '0') {
+                    this.user = res.data.data;
+                    if (this.user.level !== 3) {
+                        this.isShow = true;
+                    }
+                }
+            });
+
+            let id = this.getQueryVariable('id');
+            this.comment.foreignId = id;
+            if (id !== 0) {
+                axios.get('/collectInfo/' + id).then(res => {
+                    if (res.data.code === '0') {
+                        let obj = res.data.data;
+                        this.obj = obj;
+                        if (obj.fileName) {
+                            if (/\.(png|jpg|gif|jpeg|webp)$/.test(obj.fileName)) {
+                                this.obj.fileType = 'image';
+                            } else if (/\.mp4$/.test(obj.fileName)) {
+                                this.obj.fileType = 'video';
+                            } else {
+                                this.obj.fileType = 'other';
+                            }
+                            this.fileSrc = '/files/download/' + obj.fileId;
+
+                            let img = new Image();
+                            img.src = this.fileSrc;
+                            let _this = this;
+                            img.onload = function(){
+                                if (img.width > 590) {
+                                    _this.imgWidth = "100%";
+                                } else {
+                                    _this.imgWidth = img.width + "px";
+                                }
+                            };
+                        }
+                        /*richText
+                        $('#view-notice-body').html(obj.content);
+                        richText*/
+                    } else {
+                        alert(res.data.msg)
+                    }
+                });
+                this.loadComments(id);
+            }
+        },
+        methods: {
+            add() {
+                if (this.comment.content === '') {
+                    return;
+                }
+                axios.post('/collectInfoComment', this.comment).then(res => {
+                    if (res.data.code === '0') {
+                        this.comment.content = '';
+                        this.loadComments(this.comment.foreignId);
+                    } else {
+                        alert(res.data.msg);
+                    }
+                })
+            },
+            loadComments(id) {
+                axios.get('/collectInfoComment/findByForeignId/' + id).then(res => {
+                    if (res.data.code === '0') {
+                        this.comments = res.data.data;
+                    } else {
+                        alert(res.data.msg)
+                    }
+                })
+            },
+            getQueryVariable(key) {
+                let query = window.location.search.substring(1);
+                let vars = query.split("&");
+                for (let i = 0; i < vars.length; i++) {
+                    let pair = vars[i].split("=");
+                    if (pair[0] === key) {
+                        return pair[1];
+                    }
+                }
+                return '';
+            },
+            logout() {
+                axios.get("/logout").then(res => {
+                    if(res.data.code === '0') {
+                        location.href = '/front/index.html';
+                    } else {
+                        msg('error', res.data.msg);
+                    }
+                })
+            }
+        }
+    })
+</script>
+</body>
+</html>
