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"
	},
	{
		"from": "StackOverflow",
		"address": "non@semmolestie.com",
		"time": "2016-06-29 15:39:06",
		"message": "You're almost done! Finish registering your account, and you'll be able to demand answers from random people that are smarter than you. Cum sociis natoque penatibus et magnis dis parturient",
		"subject": "Verify your StackOverflow account",
		"tag": "inbox",
		"read": "true"
	},
	{
		"from": "Pastebin.com",
		"address": "Phasellus.dapibus.quam@vitaenibh.org",
		"time": "2016-03-14 09:43:27",
		"message": "Buy a cheap lifetime subscrition today! Or we'll remind you every two weeks until you die. Quis massa. Mauris vestibulum, neque sed dictum eleifend, nunc risus varius orci, in consequat enim diam vel arcu. Curabitur ut odio vel est tempor bibendum. Donec felis orci, adipiscing non, luctus sit amet, faucibus ut, nulla.",
		"subject": "Pastebin PRO",
		"tag": "deleted",
		"read": "true"
	},
	{
		"from": "TurboTax Online",
		"address": "quam.a.felis@montesnasceturridiculus.co.uk",
		"time": "2016-08-01 19:51:23",
		"message": "Your tax refund for 2015 entitles you to $12.03. Fantastic! Integer vulputate, risus a ultricies adipiscing, enim mi tempor lorem, eget mollis lectus pede",
		"subject": "Your refund is waiting",
		"tag": "deleted",
		"read": "true"
	},
	{
		"from": "Codepen Info",
		"address": "pharetra.Nam@lacus.com",
		"time": "2016-07-05 18:20:04",
		"message": "Great job! Having a terrible sleep schedule is paying off! Cursus in, hendrerit consectetuer, cursus et, magna. Praesent interdum ligula eu enim. Etiam imperdiet dictum magna. Ut tincidunt orci quis lectus. Nullam suscipit, est ac",
		"subject": "Your pen reached 1,000 views!",
		"tag": "inbox",
		"read": "true"
	},
	{
		"from": "Lithium Hosting",
		"address": "magna@nequepellentesquemassa.edu",
		"time": "2016-03-16 13:49:17",
		"message": "Oh noes! Your website (deammer.com) is about to be disconnected. metus. Aliquam erat volutpat. Nulla facilisis. Suspendisse commodo tincidunt nibh. Phasellus nulla. Integer",
		"subject": "LH - Renewal",
		"tag": "inbox",
		"read": "true"
	},
	{
		"from": "American Airlines",
		"address": "magna.Ut@nibhPhasellus.co.uk",
		"time": "2016-02-17 21:00:15",
		"message": "Thank you for booking two overpriced tickets for Seattle. Etiam ligula tortor, dictum eu, placerat eget, venenatis a, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet, libero et tristique pellentesque, tellus sem mollis dui, in sodales elit erat vitae risus. Duis a mi fringilla mi lacinia mattis. Integer eu lacus.",
		"subject": "Trip to Seattle",
		"tag": "inbox",
		"read": "true"
	},
	{
		"from": "Carol Bender",
		"address": "tristique.neque.venenatis@at.edu",
		"time": "2015-03-17 08:13:14",
		"message": "Hi Max, please fill out the attached form to complete your enrollment and avoid living under a bridge when you retire. Ut aliquam iaculis, lacus pede sagittis augue, eu tempor erat neque non quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fringilla cursus purus. Nullam scelerisque neque sed sem",
		"subject": "401k Paperwork",
		"tag": "inbox",
		"read": "true"
	},
	{
		"from": "Steam Support",
		"address": "sapien.gravida.non@pharetraut.com",
		"time": "2016-02-23 19:02:54",
		"message": "Firewatch is on sale to celebrate the launch! Vel, venenatis vel, faucibus id, libero. Donec consectetuer mauris id sapien. Cras dolor dolor, tempus non, lacinia at, iaculis quis, pede. Praesent eu dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur",
		"subject": "An item from your wishlist is on sale",
		"tag": "inbox",
		"read": "true"
	},
	{
		"from": "DekDev",
		"address": "non.ante.bibendum@Morbimetus.com",
		"time": "2016-04-10 15:06:31",
		"message": "PttS is on Early Access! Nam interdum enim non nisi. Aenean eget metus. In nec orci. Donec nibh. Quisque nonummy ipsum non arcu. Vivamus",
		"subject": "Path to the Sky",
		"tag": "inbox",
		"read": "true"
	},
	{
		"from": "Fitbit",
		"address": "sit.amet@vitaerisus.org",
		"time": &quo.........完整代码请登录后点击上方下载按钮下载查看