博客前端模板

最新推荐文章于 2024-02-16 12:00:00 发布

计算机技术之指尖密码

最新推荐文章于 2024-02-16 12:00:00 发布

阅读量1.2k

点赞数

分类专栏：目录

本文链接：https://blog.csdn.net/w1374401940/article/details/105954629

版权

目录专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <title>简书模板</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="./static/style.css" />
    <link>
</head>
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="title-logo">
                <span>简书</span>
            </div>
            <div class="home-title">
                <span>首页</span>
            </div>
            <div class="download-app">
                <span>下载APP</span>
            </div>
            <div class="download-app">
                <div style="height:30px">
                    <el-input placeholder="搜索" v-model="input">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
            <div>
                <el-button type="danger" round class="write">写文章</el-button>
                <el-button round class="login-register">注册</el-button>
            </div>
        </div>
        <div class="content">
            <div style="float: left;width: 730px;">
                <div class="content-item">
                    <h3>两瓶饮料</h3>
                    <p class="p-color">父亲常年在外地打工，有一次，父亲回家，特意给儿子带了礼物，是两瓶饮料。儿子迫不及待地拧开瓶盖，咕咚就一大口。 父亲赶紧问，好喝吗？儿子嘴里还含着...</p>
                    <div>
                        <span class="el-icon-view item-tool"></span>
                        <span class="el-icon-chat-round item-tool"></span>
                        <span class="item-tool">四点工作室</span>
                        <span class="el-icon-thumb item-tool"></span>
                    </div>
                </div>
                <div class="content-item">
                    <h3>多读点书真好</h3>
                    <p class="p-color">我文化不高，凌晨三点到早上十点得帮现在的家批菜，总想着白天再找份兼职，自己想赚点钱帮帮女儿。 找实体店或工厂打工都顾不了早上卖菜。就想找个在家自...</p>
                    <div>
                        <span class="el-icon-view item-tool"></span>
                        <span class="el-icon-chat-round item-tool"></span>
                        <span class="item-tool">四点工作室</span>
                        <span class="el-icon-thumb item-tool"></span>
                    </div>
                </div>
                <div class="content-item">
                    <h3>有个女儿真好</h3>
                    <p class="p-color">怀孕时，特别希望自己能生个女孩，当初想，如果生男孩，我怎么也得再生个女孩，如果生个女孩，那就再不生了。 也许老天看我执着，让我如愿生了个女儿，都...</p>
                    <div>
                        <span class="el-icon-view item-tool"></span>
                        <span class="el-icon-chat-round item-tool"></span>
                        <span class="item-tool">四点工作室</span>
                        <span class="el-icon-thumb item-tool"></span>
                    </div>
                </div>
            </div>
            <div class="right-menbar">
                <img src="./static/img/1.png" height="50px" width="200px"></img>
            </div>
            <div class="right-bar">
                <img src="./static/img/2.png" height="50px" width="200px"></img>
            </div>
            <div class="right-bar">
                <img src="./static/img/3.png" height="50px" width="200px"></img>
            </div>
            <div class="right-bar">
                <img src="./static/img/4.png" height="50px" width="200px"></img>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            input: ""
        }
    })
</script>

</html>

html,body{
    margin: 0;
    padding: 0;
}

.header{
    width: 100%;
    height: 60px;
    position: fixed;
    border-bottom: 2px solid #F0F0F0;
}

.content{
    margin-top: 100px;
    width: 1000px;
    position: absolute;
    margin-left: 200px;
    float: left;
}


.title-logo{
    float: left;
    margin-left: 200px;
    color: #EB6F5A;
    font-size: 20px;
    line-height: 60px;
    font-weight: bold;
}


.home-title{
    float: left;
    margin-left: 200px;
    color: #EB6F5A;
    line-height:60px ; 
}

.download-app{
    float: left;
    margin-left: 50px;
    color: #EB6F5A;
    line-height:60px ;
}

.login-register{
    float: right;
    margin-right: 20px;
    margin-top: 10px;
}

.write{
    float: right;
    margin-right: 100px;
    margin-top: 10px;
}


.content-item{
    width: 700px;
    padding: 5px 20px 20px 5px;
    border-bottom: 2px solid #F0F0F0;
    font-size: 20px;
    float: left;
}


.p-color{
    color: #b4b4b4;
    font-size: 12px;
}

.item-tool{
    color:#EB6F5A ;
    margin-left: 10px;
    font-size: 5px;
}

.right-menbar{
    float: left;
    margin-top: 50px;
    margin-left: 30px;
}

.right-bar{
    float: left;
    margin-top: 10px;
    margin-left: 30px;
}

CREATE TABLE `zj_users` (

 `user_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '用户ID',

 `user_ip` varchar(20) NOT NULL COMMENT '用户IP',

 `user_name` varchar(20) NOT NULL COMMENT '用户名',

 `user_password` varchar(15) NOT NULL COMMENT '用户密码',

 `user_email` varchar(30) NOT NULL COMMENT '用户邮箱',

 `user_profile_photo` varchar(255) NOT NULL COMMENT '用户头像',

 `user_registration_time` datetime DEFAULT NULL COMMENT '注册时间',

 `user_birthday` date DEFAULT NULL COMMENT '用户生日',

 `user_age` tinyint(4) DEFAULT NULL COMMENT '用户年龄',

 `user_telephone_number` int(11) NOT NULL COMMENT '用户手机号',

 `user_nickname` varchar(20) NOT NULL COMMENT '用户昵称',

 PRIMARY KEY (`user_id`),

 KEY `user_name` (`user_name`),

 KEY `user_nickname` (`user_nickname`),

 KEY `user_email` (`user_email`),

 KEY `user_telephone_number` (`user_telephone_number`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

CREATE TABLE `zj_articles` (

 `article_id` bigint(255) NOT NULL AUTO_INCREMENT COMMENT '博文ID',

 `user_id` bigint(20) NOT NULL COMMENT '发表用户ID',

 `article_title` text NOT NULL COMMENT '博文标题',

 `article_content` longtext NOT NULL COMMENT '博文内容',

 `article_views` bigint(20) NOT NULL COMMENT '浏览量',

 `article_comment_count` bigint(20) NOT NULL COMMENT '评论总数',

 `article_date` datetime DEFAULT NULL COMMENT '发表时间',

 `article_like_count` bigint(20) NOT NULL,

 PRIMARY KEY (`article_id`),

 KEY `user_id` (`user_id`),

 CONSTRAINT `zj_articles_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `zj_users` (`user_id`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

CREATE TABLE `zj_comments` (

 `comment_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '评论ID',

 `user_id` bigint(20) NOT NULL COMMENT '发表用户ID',

 `article_id` bigint(20) NOT NULL COMMENT '评论博文ID',

 `comment_like_count` bigint(20) NOT NULL COMMENT '点赞数',

 `comment_date` datetime DEFAULT NULL COMMENT '评论日期',

 `comment_content` text NOT NULL COMMENT '评论内容',

 `parent_comment_id` bigint(20) NOT NULL COMMENT '父评论ID',

 PRIMARY KEY (`comment_id`),

 KEY `article_id` (`article_id`),

 KEY `comment_date` (`comment_date`),

 KEY `parent_comment_id` (`parent_comment_id`)

) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

CREATE TABLE `zj_labels` (

 `label_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '标签ID',

 `label_name` varchar(20) NOT NULL COMMENT '标签名称',

 `label_alias` varchar(15) NOT NULL COMMENT '标签别名',

 `label_description` text NOT NULL COMMENT '标签描述',

 PRIMARY KEY (`label_id`),

 KEY `label_name` (`label_name`),

 KEY `label_alias` (`label_alias`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

CREATE TABLE `zj_set_artitle_label` (

 `article_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '文章ID',

 `label_id` bigint(20) NOT NULL,

 PRIMARY KEY (`article_id`),

 KEY `label_id` (`label_id`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

CREATE TABLE `zj_set_artitle_sort` (

 `article_id` bigint(20) NOT NULL COMMENT '文章ID',

 `sort_id` bigint(20) NOT NULL COMMENT '分类ID',

 PRIMARY KEY (`article_id`,`sort_id`),

 KEY `sort_id` (`sort_id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `zj_sorts` (

 `sort_id` bigint(20) NOT NULL COMMENT '分类ID',

 `sort_name` varchar(50) NOT NULL COMMENT '分类名称',

 `sort_alias` varchar(15) NOT NULL COMMENT '分类别名',

 `sort_description` text NOT NULL COMMENT '分类描述',

 `parent_sort_id` bigint(20) NOT NULL COMMENT '父分类ID',

 PRIMARY KEY (`sort_id`),

 KEY `sort_name` (`sort_name`),

 KEY `sort_alias` (`sort_alias`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `zj_user_friends` (

 `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '标识ID',

 `user_id` bigint(20) NOT NULL COMMENT '用户ID',

 `user_friends_id` bigint(20) NOT NULL COMMENT '好友ID',

 `user_note` varchar(20) NOT NULL COMMENT '好友备注',

 `user_status` varchar(20) NOT NULL COMMENT '好友状态',

 PRIMARY KEY (`id`),

 KEY `user_id` (`user_id`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;