<!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;