react实现的一个简洁邮箱ui界面效果代码-html代码-BFW代码库

代码语言：html
代码描述：react实现的一个简洁邮箱ui界面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> React - Inbox</title>


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
        *, *:before, *:after {
            box-sizing: border-box;
        }

        body {
            background: #eee;
            font-family: "Open Sans", Arial, sans-serif;
            font-size: 14px;
            line-height: 150%;
        }

        .truncate {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }

        .disclaimer {
            margin: 0 auto 50px;
            text-align: center;
            width: 400px;
        }

        .btn {
            border: none;
            cursor: pointer;
            display: block;
            font-family: "Open Sans", Arial, sans-serif;
            font-size: 16px;
            outline: none;
            padding: 15px;
            transition: all .1s linear;
        }

        .wrapper {
            box-shadow: 0 4px 20px rgba(51, 51, 51, 0.2);
            margin: 50px auto;
            overflow: auto;
            width: 1024px;
        }
        .wrapper .inbox-container {
            float: left;
            height: 500px;
            width: calc(100% - 200px);
        }

        #sidebar {
            background: #34393d;
            float: left;
            height: 500px;
            width: 200px;
        }
        #sidebar .sidebar__inboxes {
            margin-top: 50px;
        }
        #sidebar .sidebar__inboxes .item-count {
            background: #34393d;
            border-radius: 5px;
            float: right;
            padding: 2px 8px;
            margin: -2px -8px;
        }
        #sidebar .sidebar__inboxes li a {
            color: #fff;
            cursor: pointer;
            display: block;
            margin-bottom: 10px;
            padding: 15px;
            text-decoration: none;
            transition: background .1s linear;
            width: 100%;
        }
        #sidebar .sidebar__inboxes li a:hover {
            background: #404549;
        }
        #sidebar .sidebar__inboxes .fa {
            margin-right: 10px;
        }
        #sidebar .btn.compose {
            color: #fff;
            padding: 30px 15px;
            text-align: center;
            text-decoration: none;
            transition: all .1s linear;
            width: 100%;
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOWZjNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBjN2VhZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
            background-size: 100%;
            background-image: -webkit-gradient(linear, 100% 100%, 0% 0%, color-stop(0%, #009fc4), color-stop(100%, #0c7ead));
            background-image: -moz-linear-gradient(bottom right, #009fc4, #0c7ead);
            background-image: -webkit-linear-gradient(bottom right, #009fc4, #0c7ead);
            background-image: linear-gradient(totopleft, #009fc4, #0c7ead);
        }
        #sidebar .btn.compose:hover {
            background-size: 150%;
        }
        #sidebar .btn.compose:hover .fa {
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        #sidebar .btn.compose .fa {
            margin-left: 10px;
            transition: all .1s linear;
        }

        .email-list {
            background: #f5f5f5;
            float: left;
            height: 500px;
            max-height: 100%;
            overflow-y: auto;
            width: 35%;
        }
        .email-list.empty {
            color: #aaa;
            padding-top: 200px;
            text-align: center;
        }
        .email-list .email-item {
            background: #fff;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            padding: 10px 15px;
            position: relative;
        }
        .email-list .email-item.selected {
            color: #009fc4;
        }
        .email-list .email-item__subject {
            margin-bottom: 8px;
        }
        .email-list .email-item__details {
            font-size: 12px;
            opacity: .5;
            text-transform: uppercase;
        }
        .email-list .email-item__unread-dot {
            height: 100%;
            right: 10px;
            position: absolute;
            top: 10px;
        }
        .email-list .email-item__unread-dot[data-read="false"]:before {
            background: #009fc4;
            border-radius: 50%;
            content: '';
            display: block;
            height: 6px;
            width: 6px;
        }
        .email-list .email-item__time {
            float: right;
            text-align: right;
            width: 40%;
        }
        .email-list .email-item__from.truncate {
            width: 60%;
        }
        .email-list .email-item:hover:not(.selected) {
            background: #fafafa;
        }

        .email-content {
            background: #fff;
            border-left: 1px solid #ddd;
            float: left;
            height: 500px;
            position: relative;
            width: 65%;
        }
        .email-content__header {
            background: #f5f5f5;
            border-bottom: 1px solid #eee;
            padding: 10px 15px;
        }
        .email-content__subject {
            font-size: 18px;
            margin: 10px 0;
        }
        .email-content__details {
            font-size: 12px;
            opacity: .5;
            text-transform: uppercase;
        }
        .email-content__time {
            color: #878787;
            float: right;
        }
        .email-content__from {
            color: #878787;
        }
        .email-content__message {
            padding: 20px 15px 15px;
        }
        .email-content .delete-btn {
            cursor: pointer;
            margin: -5px;
            padding: 5px;
            position: absolute;
            right: 20px;
            top: 24px;
            transition: color .1s linear;
        }
        .email-content .delete-btn:hover {
            color: #E23E57;
        }

        .footer {
            background: #f5f5f5;
            border-top: 1px solid #ddd;
            color: #999;
            clear: both;
            font-size: 14px;
            padding: 10px;
            text-align: center;
            width: 100%;
        }
    </style>

</head>
<body>

    <div class="wrapper">
        <div id="inbox"></div>
        <div class="footer">
            内置React实例
        </div>
    </div>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.0.14.3.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
    <script type="text/javascript">
        //ajax拦截并返回模拟数据
        Mock.mock('data/dummy-emails.json',
          [
	{
		"from": "Maxime Preaux",
		"address": "maxime@codepen.io",
		"time": "2016-10-07 15:35:14",
		"message": "这是我第一次尝试使用React。Phasellus精英脚，诅咒或崇敬，水龙头吧，孩子。这就是我所知道的密码 ",
		"subject": "Messing with React.js",
		"tag": "inbox",
		"read": "false"
	},
	{
		"from": "Dribbble",
		"address": "digest@dribbble.com",
		"time": "2016-05-09 14:23:54",
		"message": "以下是你关注的最新运球投篮！Nec毛里斯·布兰迪特·马蒂斯。这句话的意思是“你的意思是什么”。整型id magna et ipsum cursus前庭。莫里斯·麦格纳。时间之尊。前庭是一个非常好的地方。不属于麦格纳。Nam ligula elit、pretium et、rutrum non、hendrerit id、ante。",
		"subject": "Dribbble Digest",
		"tag": "inbox",
		"read": "false"
	},
	{
		"from": "Christopher Medina",
		"address": "dolor@luctusutpellentesque.net",
		"time": "2015-07-03 21:48:27",
		"message": "Woops, that last pull request messed up the csproj. Mauris. Morbi non sapien molestie orci tincidunt adipiscing. Mauris molestie pharetra",
		"subject": "Broken PR?",
		"tag": "inbox",
		"read": "false"
	},
	{
		"from": "Wylie Roberson",
		"address": "mi@utnisi.edu",
		"time": "2016-01-08 18:39:34",
		"message": "Every wish you could read all this Lorem Ipsum stuff? Subornareornare lectus justo eu arcu. Morbi sit amet massa. Quisque porttitor eros nec tellus. Nunc lectus pede, ultrices",
		"subject": "Learn latin in 10 days!",
		"tag": "deleted",
		"read": "true"
	},
	{
		"from": "Slack HQ",
		"address": "fishbowl@slack.com",
		"time": "2015-07-21 09:47:57",
		"message": "Click here to consectetuer rhoncus. Nullam velit dui, semper et, lacinia vitae, sodales at, velit. Pellentesque ultricies dignissim lacus. Aliquam rutrum lorem ac risus. Morbi",
		"subject": "Join the Fishbowl Team",
		"tag": "inbox",
		"read": "true"
	},
	{
		"from": "Ray Lamb",
		"address": "ut.erat.Sed@volutpatNulla.co.uk",
		"time": "2016-01-08 10:14:40",
		"message": "Trepalium is going on tour! Duis cursus, diam at pretium aliquet, metus urna convallis erat, eget tincidunt dui augue eu tellus. Phasellus elit pede, malesuada vel, venenatis vel, faucibus id, libero. Donec consectetuer mauris",
		"subject": "Concert tickets on sale",
		"tag": "inbox",
		"read": "false"
	},
	{
	.........完整代码请登录后点击上方下载按钮下载查看