diff --git a/app/Http/Web/Views/account/edit_email.volt b/app/Http/Web/Views/account/edit_email.volt
index affcacf8..e2ef15a3 100644
--- a/app/Http/Web/Views/account/edit_email.volt
+++ b/app/Http/Web/Views/account/edit_email.volt
@@ -8,7 +8,7 @@
         <a><cite>绑定邮箱</cite></a>
     </div>
 
-    <div class="account-container container">
+    <div class="account-wrap wrap">
         <form class="layui-form account-form" method="POST" action="{{ url({'for':'web.account.update_email'}) }}">
             <div class="layui-form-item">
                 <div class="layui-input-block">
diff --git a/app/Http/Web/Views/account/edit_password.volt b/app/Http/Web/Views/account/edit_password.volt
index 9adb2b6c..2b09754c 100644
--- a/app/Http/Web/Views/account/edit_password.volt
+++ b/app/Http/Web/Views/account/edit_password.volt
@@ -8,7 +8,7 @@
         <a><cite>修改密码</cite></a>
     </div>
 
-    <div class="account-container container">
+    <div class="account-wrap wrap">
         <form class="layui-form account-form" method="POST" action="{{ url({'for':'web.account.update_pwd'}) }}">
             <div class="layui-form-item">
                 <div class="layui-input-block">
diff --git a/app/Http/Web/Views/account/edit_phone.volt b/app/Http/Web/Views/account/edit_phone.volt
index 7dc988d0..8c257041 100644
--- a/app/Http/Web/Views/account/edit_phone.volt
+++ b/app/Http/Web/Views/account/edit_phone.volt
@@ -8,7 +8,7 @@
         <a><cite>绑定手机</cite></a>
     </div>
 
-    <div class="account-container container">
+    <div class="account-wrap wrap">
         <form class="layui-form account-form" method="POST" action="{{ url({'for':'web.account.update_phone'}) }}">
             <div class="layui-form-item">
                 <div class="layui-input-block">
diff --git a/app/Http/Web/Views/account/forget_password.volt b/app/Http/Web/Views/account/forget_password.volt
index fe9739e9..a7b0c88d 100644
--- a/app/Http/Web/Views/account/forget_password.volt
+++ b/app/Http/Web/Views/account/forget_password.volt
@@ -7,7 +7,7 @@
         <a><cite>重置密码</cite></a>
     </div>
 
-    <div class="account-container container">
+    <div class="account-wrap wrap">
         <form class="layui-form account-form" method="POST" action="{{ url({'for':'web.account.reset_pwd'}) }}">
             <div class="layui-form-item">
                 <div class="layui-input-block">
diff --git a/app/Http/Web/Views/account/login.volt b/app/Http/Web/Views/account/login.volt
index a9022a1b..8db0fe73 100644
--- a/app/Http/Web/Views/account/login.volt
+++ b/app/Http/Web/Views/account/login.volt
@@ -7,7 +7,7 @@
         <a><cite>登录</cite></a>
     </div>
 
-    <div class="login-container container">
+    <div class="login-wrap wrap">
         <div class="layui-tab layui-tab-brief login-tab">
             <ul class="layui-tab-title login-tab-title">
                 <li class="layui-this">密码登录</li>
diff --git a/app/Http/Web/Views/account/register.volt b/app/Http/Web/Views/account/register.volt
index 579837d2..6dee31f4 100644
--- a/app/Http/Web/Views/account/register.volt
+++ b/app/Http/Web/Views/account/register.volt
@@ -7,7 +7,7 @@
         <a><cite>注册</cite></a>
     </div>
 
-    <div class="account-container container">
+    <div class="account-wrap wrap">
         <form class="layui-form account-form" method="POST" action="{{ url({'for':'web.account.do_register'}) }}">
             <div class="layui-form-item">
                 <div class="layui-input-block">
diff --git a/app/Http/Web/Views/chapter/menu.volt b/app/Http/Web/Views/chapter/menu.volt
index b0371c92..b796696d 100644
--- a/app/Http/Web/Views/chapter/menu.volt
+++ b/app/Http/Web/Views/chapter/menu.volt
@@ -1,23 +1,25 @@
-<div class="layui-card">
-    <div class="layui-card-header">课程目录</div>
-    <div class="layui-card-body">
-        <div class="sidebar-chapter-list">
-            {% for item in chapters %}
-                <div class="chapter-title layui-elip">{{ item.title }}</div>
-                <ul class="sidebar-lesson-list">
-                    {% for lesson in item.children %}
-                        {% set url = url({'for':'web.chapter.show','id':lesson.id}) %}
-                        {% set active = (chapter.id == lesson.id) ? 'active' : 'normal' %}
-                        <li class="lesson-title layui-elip">
-                            {% if lesson.me.owned == 1 %}
-                                <a class="{{ active }}" href="{{ url }}" title="{{ lesson.title|e }}">{{ lesson.title }}</a>
-                            {% else %}
-                                <span class="deny" title="{{ lesson.title|e }}">{{ lesson.title }}</span>
-                            {% endif %}
-                        </li>
-                    {% endfor %}
-                </ul>
-            {% endfor %}
+<div class="sidebar-chapter-wrap wrap">
+    <fieldset class="layui-elem-field layui-field-title">
+        <legend>课程目录</legend>
+        <div class="layui-field-box">
+            <div class="sidebar-chapter-list">
+                {% for item in chapters %}
+                    <div class="chapter-title layui-elip">{{ item.title }}</div>
+                    <ul class="sidebar-lesson-list">
+                        {% for lesson in item.children %}
+                            {% set url = url({'for':'web.chapter.show','id':lesson.id}) %}
+                            {% set active = (chapter.id == lesson.id) ? 'active' : 'normal' %}
+                            <li class="lesson-title layui-elip">
+                                {% if lesson.me.owned == 1 %}
+                                    <a class="{{ active }}" href="{{ url }}" title="{{ lesson.title|e }}">{{ lesson.title }}</a>
+                                {% else %}
+                                    <span class="deny" title="{{ lesson.title|e }}">{{ lesson.title }}</span>
+                                {% endif %}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% endfor %}
+            </div>
         </div>
-    </div>
-</div>
+    </fieldset>
+</div>
\ No newline at end of file
diff --git a/app/Http/Web/Views/chapter/show_live.volt b/app/Http/Web/Views/chapter/show_live.volt
index ce6b8f77..74f8606e 100644
--- a/app/Http/Web/Views/chapter/show_live.volt
+++ b/app/Http/Web/Views/chapter/show_live.volt
@@ -17,12 +17,12 @@
 
     <div class="layout-main">
         <div class="layout-content">
-            <div class="player-container container">
+            <div class="player-wrap wrap">
                 <div id=player"></div>
             </div>
         </div>
         <div class="layout-sidebar">
-            <div class="chat-container">
+            <div class="chat-wrap">
                 <div class="layui-tab layui-tab-brief user-tab">
                     <ul class="layui-tab-title">
                         <li class="layui-this">讨论</li>
diff --git a/app/Http/Web/Views/chapter/show_read.volt b/app/Http/Web/Views/chapter/show_read.volt
index 44f3c39a..ec95c9cb 100644
--- a/app/Http/Web/Views/chapter/show_read.volt
+++ b/app/Http/Web/Views/chapter/show_read.volt
@@ -13,7 +13,7 @@
 
     <div class="layout-main clearfix">
         <div class="layout-content">
-            <div class="read-info container">{{ chapter.content }}</div>
+            <div class="read-info wrap">{{ chapter.content }}</div>
         </div>
         <div class="layout-sidebar">
             {{ partial('chapter/menu') }}
diff --git a/app/Http/Web/Views/chapter/show_vod.volt b/app/Http/Web/Views/chapter/show_vod.volt
index 62de09ae..42c2bfc9 100644
--- a/app/Http/Web/Views/chapter/show_vod.volt
+++ b/app/Http/Web/Views/chapter/show_vod.volt
@@ -14,14 +14,14 @@
 
     <div class="layout-main clearfix">
         <div class="layout-content">
-            <div class="player-container container">
+            <div class="player-wrap wrap">
                 <div id="player"></div>
                 <div id="danmu"></div>
             </div>
-            <div class="danmu-action container">
-                <form class="layui-form" action="{{ url({'for':'web.danmu.create'}) }}">
-                    <div class="layui-input-inline" style="width: 100px;">
-                        <input type="checkbox" name="status" title="弹幕" checked="checked" lay-filter="danmu.status">
+            <div class="danmu-action-wrap wrap">
+                <form class="layui-form" lay-filter="danmu.form" action="{{ url({'for':'web.danmu.create'}) }}">
+                    <div class="layui-input-inline" style="width: 50px;">
+                        <a href="javascript:" class="layui-icon layui-icon-set icon-danmu-set"></a>
                     </div>
                     <div class="layui-input-inline" style="width: 655px;">
                         {% if auth_user.id > 0 %}
@@ -39,6 +39,52 @@
         </div>
     </div>
 
+    <div id="my-danmu-set" style="display:none;">
+        <form class="layui-form" lay-filter="danmu.form.set" style="padding:20px 0;">
+            <div class="layui-form-item">
+                <label class="layui-form-label">显示弹幕</label>
+                <div class="layui-input-block">
+                    <input type="checkbox" name="danmu.status" lay-filter="danmu.status" lay-skin="switch" lay-text="是|否" checked="checked">
+                </div>
+            </div>
+            <div class="layui-form-item">
+                <label class="layui-form-label">透明度</label>
+                <div class="layui-input-block">
+                    <input type="radio" name="danmu.opacity" lay-filter="danmu.opacity" value="1" title="0" checked="checked">
+                    <input type="radio" name="danmu.opacity" lay-filter="danmu.opacity" value="0.75" title="25%">
+                    <input type="radio" name="danmu.opacity" lay-filter="danmu.opacity" value="0.5" title="50%">
+                    <input type="radio" name="danmu.opacity" lay-filter="danmu.opacity" value="0.25" title="75%">
+                    <input type="radio" name="danmu.opacity" lay-filter="danmu.opacity" value="0" title="100%">
+                </div>
+            </div>
+            <div class="layui-form-item">
+                <label class="layui-form-label">颜色</label>
+                <div class="layui-input-block">
+                    <input type="radio" name="danmu.color" value="white" title="白" checked="checked">
+                    <input type="radio" name="danmu.color" value="red" title="红">
+                    <input type="radio" name="danmu.color" value="orange" title="黄">
+                    <input type="radio" name="danmu.color" value="blue" title="蓝">
+                    <input type="radio" name="danmu.color" value="green" title="绿">
+                </div>
+            </div>
+            <div class="layui-form-item">
+                <label class="layui-form-label">位置</label>
+                <div class="layui-input-block">
+                    <input type="radio" name="danmu.position" value="0" title="滚动" checked="checked">
+                    <input type="radio" name="danmu.position" value="1" title="顶部">
+                    <input type="radio" name="danmu.position" value="2" title="底部">
+                </div>
+            </div>
+            <div class="layui-form-item">
+                <label class="layui-form-label">字号</label>
+                <div class="layui-input-block">
+                    <input type="radio" name="danmu.size" value="0" title="小" checked="checked">
+                    <input type="radio" name="danmu.size" value="1" title="大">
+                </div>
+            </div>
+        </form>
+    </div>
+
     <div class="layui-hide">
         <input type="hidden" name="chapter.id" value="{{ chapter.id }}">
         <input type="hidden" name="chapter.position" value="{{ chapter.me.position }}">
diff --git a/app/Http/Web/Views/course/list_filter.volt b/app/Http/Web/Views/course/list_filter.volt
index 39ce8cbc..7461edfd 100644
--- a/app/Http/Web/Views/course/list_filter.volt
+++ b/app/Http/Web/Views/course/list_filter.volt
@@ -2,7 +2,7 @@
     <span class="layui-icon layui-icon-up"></span>
 </div>
 
-<div class="course-filter container">
+<div class="course-filter wrap">
     <div class="filter-group">
         <div class="title">方向</div>
         <div class="content">
@@ -47,7 +47,7 @@
     </div>
 </div>
 
-<div class="course-sort container">
+<div class="course-sort wrap">
     {% set sort_val = request.get('sort','trim','score') %}
     {% for sort in sorts %}
         {% set class = sort_val == sort.id ? 'layui-btn layui-btn-xs' : 'none' %}
diff --git a/app/Http/Web/Views/course/order.volt b/app/Http/Web/Views/course/order.volt
index 461b336d..b47ec705 100644
--- a/app/Http/Web/Views/course/order.volt
+++ b/app/Http/Web/Views/course/order.volt
@@ -1,5 +1,5 @@
 {% if course.me.owned == 0 and course.market_price > 0 %}
-    <div class="sidebar-order container">
+    <div class="sidebar-order wrap">
         <div class="order">
             {% set order_url = url({'for':'web.order.confirm'},{'item_id':course.id,'item_type':'course'}) %}
             <a class="layui-btn layui-btn-fluid layui-bg-red" href="{{ order_url }}">立即购买</a>
diff --git a/app/Http/Web/Views/course/show.volt b/app/Http/Web/Views/course/show.volt
index 69310d2f..8f7a7411 100644
--- a/app/Http/Web/Views/course/show.volt
+++ b/app/Http/Web/Views/course/show.volt
@@ -14,7 +14,7 @@
         </span>
     </div>
 
-    <div class="course-meta container clearfix">
+    <div class="course-meta wrap clearfix">
         {{ partial('course/meta') }}
     </div>
 
@@ -25,7 +25,7 @@
         {% set show_tab_reviews = course.review_count > 0 ? 1 : 0 %}
 
         <div class="layout-content">
-            <div class="container">
+            <div class="wrap">
                 <div class="layui-tab layui-tab-brief course-tab">
                     <ul class="layui-tab-title">
                         <li class="layui-this">详情</li>
diff --git a/app/Http/Web/Views/help/index.volt b/app/Http/Web/Views/help/index.volt
index e6d3ecbd..2577af32 100644
--- a/app/Http/Web/Views/help/index.volt
+++ b/app/Http/Web/Views/help/index.volt
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <div class="page-info container">
+    <div class="page-info wrap">
         <fieldset class="layui-elem-field layui-field-title">
             <legend>帮助中心</legend>
             <div class="layui-field-box">
diff --git a/app/Http/Web/Views/help/show.volt b/app/Http/Web/Views/help/show.volt
index 3f6ef447..7d5b2e58 100644
--- a/app/Http/Web/Views/help/show.volt
+++ b/app/Http/Web/Views/help/show.volt
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <div class="page-info container">
+    <div class="page-info wrap">
         <fieldset class="layui-elem-field layui-field-title">
             <legend>{{ help.title }}</legend>
             <div class="layui-field-box page-content">
diff --git a/app/Http/Web/Views/im/find.volt b/app/Http/Web/Views/im/find.volt
index 1565251f..522eb9d4 100644
--- a/app/Http/Web/Views/im/find.volt
+++ b/app/Http/Web/Views/im/find.volt
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <div class="im-search-container">
+    <div class="im-search-wrap">
         <div class="im-search">
             <form class="layui-form" method="get" action="{{ url({'for':'web.im.search'}) }}">
                 <input class="layui-input" type="text" name="query" placeholder="请输入关键字...">
diff --git a/app/Http/Web/Views/index/index.volt b/app/Http/Web/Views/index/index.volt
index ca7dae70..8d3cebd0 100644
--- a/app/Http/Web/Views/index/index.volt
+++ b/app/Http/Web/Views/index/index.volt
@@ -31,7 +31,7 @@
         </div>
     {%- endmacro %}
 
-    <div class="index-container index-carousel container">
+    <div class="index-wrap index-carousel wrap">
         <div class="layui-carousel" id="carousel">
             <div class="carousel" carousel-item>
                 {% for slide in slides %}
@@ -45,21 +45,21 @@
         </div>
     </div>
 
-    <div class="index-container container">
+    <div class="index-wrap wrap">
         <div class="header">新上课程</div>
         <div class="content">
             {{ category_courses(new_courses) }}
         </div>
     </div>
 
-    <div class="index-container container">
+    <div class="index-wrap wrap">
         <div class="header">免费课程</div>
         <div class="content">
             {{ category_courses(free_courses) }}
         </div>
     </div>
 
-    <div class="index-container container">
+    <div class="index-wrap wrap">
         <div class="header">会员课程</div>
         <div class="content">
             {{ category_courses(vip_courses) }}
diff --git a/app/Http/Web/Views/my/account.volt b/app/Http/Web/Views/my/account.volt
index 4e175694..170d81d0 100644
--- a/app/Http/Web/Views/my/account.volt
+++ b/app/Http/Web/Views/my/account.volt
@@ -9,7 +9,7 @@
     <div class="layout-main">
         <div class="layout-sidebar">{{ partial('my/menu') }}</div>
         <div class="layout-content">
-            <div class="container">
+            <div class="wrap">
                 <div class="my-nav-title">账号安全</div>
                 <div class="security-item-list">
                     <div class="security-item">
diff --git a/app/Http/Web/Views/my/menu.volt b/app/Http/Web/Views/my/menu.volt
index 020c10f3..0571ada0 100644
--- a/app/Http/Web/Views/my/menu.volt
+++ b/app/Http/Web/Views/my/menu.volt
@@ -7,7 +7,7 @@
     {% endif %}
 {%- endmacro %}
 
-<div class="my-profile-card container">
+<div class="my-profile-card wrap">
     <div class="avatar">
         <a href="javascript:"><img src="{{ auth_user.avatar }}" alt="{{ auth_user.name }}"></a>
     </div>
diff --git a/app/Http/Web/Views/my/orders.volt b/app/Http/Web/Views/my/orders.volt
index 1b82112c..1cc582f6 100644
--- a/app/Http/Web/Views/my/orders.volt
+++ b/app/Http/Web/Views/my/orders.volt
@@ -11,7 +11,7 @@
         <a><cite>我的订单</cite></a>
     </div>
 
-    <div class="container">
+    <div class="wrap">
         <div class="order-filter">
             {% set status = request.get('status','trim','all') %}
             {% for key,value in status_types %}
diff --git a/app/Http/Web/Views/my/profile.volt b/app/Http/Web/Views/my/profile.volt
index 0a51a565..5516bbb8 100644
--- a/app/Http/Web/Views/my/profile.volt
+++ b/app/Http/Web/Views/my/profile.volt
@@ -5,7 +5,7 @@
     <div class="layout-main">
         <div class="layout-sidebar">{{ partial('my/menu') }}</div>
         <div class="layout-content">
-            <div class="container">
+            <div class="wrap">
                 <div class="my-nav-title">个人信息</div>
                 <form class="layui-form my-form" method="post" action="{{ url({'for':'web.my.update_profile'}) }}">
                     <div class="layui-form-item">
diff --git a/app/Http/Web/Views/my/refunds.volt b/app/Http/Web/Views/my/refunds.volt
index 41407a8e..912800b9 100644
--- a/app/Http/Web/Views/my/refunds.volt
+++ b/app/Http/Web/Views/my/refunds.volt
@@ -11,7 +11,7 @@
         <a><cite>我的退款</cite></a>
     </div>
 
-    <div class="container">
+    <div class="wrap">
         <div class="order-filter">
             {% set status = request.get('status','trim','all') %}
             {% for key,value in status_types %}
diff --git a/app/Http/Web/Views/order/confirm.volt b/app/Http/Web/Views/order/confirm.volt
index 89c912c4..c8e29e7d 100644
--- a/app/Http/Web/Views/order/confirm.volt
+++ b/app/Http/Web/Views/order/confirm.volt
@@ -63,7 +63,7 @@
         <a><cite>确认订单</cite></a>
     </div>
 
-    <div class="cart-item-list container">
+    <div class="cart-item-list wrap">
         {% if confirm.item_type == 'course' %}
             {% set course = confirm.item_info.course %}
             {{ cart_course_card(course, auth_user) }}
@@ -79,7 +79,7 @@
         {% endif %}
     </div>
 
-    <div class="cart-stats container clearfix">
+    <div class="cart-stats wrap clearfix">
         <div class="info">
             商品总价：<span class="amount">{{ '￥%0.2f'|format(confirm.total_amount) }}</span>
             优惠金额：<span class="amount">{{ '￥%0.2f'|format(confirm.discount_amount) }}</span>
diff --git a/app/Http/Web/Views/order/info.volt b/app/Http/Web/Views/order/info.volt
index a892d21e..cdc4d141 100644
--- a/app/Http/Web/Views/order/info.volt
+++ b/app/Http/Web/Views/order/info.volt
@@ -11,7 +11,7 @@
         <a><cite>{{ order.subject }}</cite></a>
     </div>
 
-    <div class="container">
+    <div class="wrap">
         <table class="layui-table kg-table order-table" lay-size="lg">
             <tr>
                 <td>基本信息</td>
diff --git a/app/Http/Web/Views/order/pay.volt b/app/Http/Web/Views/order/pay.volt
index 98c4309f..a42d0331 100644
--- a/app/Http/Web/Views/order/pay.volt
+++ b/app/Http/Web/Views/order/pay.volt
@@ -7,7 +7,7 @@
         <a><cite>支付订单</cite></a>
     </div>
 
-    <div class="payment container">
+    <div class="payment wrap">
         <div class="header">
             订单名称：<span>{{ order.subject }}</span>
             订单编号：<span>{{ order.sn }}</span>
diff --git a/app/Http/Web/Views/page/show.volt b/app/Http/Web/Views/page/show.volt
index 7bcb99f0..373d4a68 100644
--- a/app/Http/Web/Views/page/show.volt
+++ b/app/Http/Web/Views/page/show.volt
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <div class="page-info container">
+    <div class="page-info wrap">
         <fieldset class="layui-elem-field layui-field-title">
             <legend>{{ page.title }}</legend>
             <div class="layui-field-box page-content">
diff --git a/app/Http/Web/Views/refund/confirm.volt b/app/Http/Web/Views/refund/confirm.volt
index 93f8c1e9..86a5ab2b 100644
--- a/app/Http/Web/Views/refund/confirm.volt
+++ b/app/Http/Web/Views/refund/confirm.volt
@@ -31,7 +31,7 @@
         <a><cite>{{ order.subject }}</cite></a>
     </div>
 
-    <div class="container">
+    <div class="wrap">
         <table class="layui-table kg-table order-table" lay-size="lg">
             <tr>
                 <td>订单编号：{{ order.sn }}</td>
diff --git a/app/Http/Web/Views/refund/info.volt b/app/Http/Web/Views/refund/info.volt
index b3a35c67..4ce387ec 100644
--- a/app/Http/Web/Views/refund/info.volt
+++ b/app/Http/Web/Views/refund/info.volt
@@ -11,7 +11,7 @@
         <a><cite>{{ refund.subject }}</cite></a>
     </div>
 
-    <div class="container">
+    <div class="wrap">
         <table class="layui-table kg-table order-table" lay-size="lg">
             <tr>
                 <td>退款项目</td>
diff --git a/app/Http/Web/Views/search/list.volt b/app/Http/Web/Views/search/list.volt
index e4853223..c9278178 100644
--- a/app/Http/Web/Views/search/list.volt
+++ b/app/Http/Web/Views/search/list.volt
@@ -16,7 +16,7 @@
     <div class="layout-main clearfix">
         <div class="layout-content">
             {% if pager.total_pages > 0 %}
-                <div class="container">
+                <div class="wrap">
                     {% if type == 'course' %}
                         {{ partial('search/content_course') }}
                     {% elseif type == 'other' %}
@@ -25,7 +25,7 @@
                 </div>
                 {{ partial('partials/pager') }}
             {% else %}
-                <div class="search-empty container">
+                <div class="search-empty wrap">
                     <div class="icon"><i class="layui-icon layui-icon-face-surprised"></i></div>
                     <div class="text">没有找到<span class="query">{{ query }}</span>相关内容，换个关键字试试吧！</div>
                 </div>
diff --git a/app/Http/Web/Views/user/show.volt b/app/Http/Web/Views/user/show.volt
index 3342f3b7..7413a5f7 100644
--- a/app/Http/Web/Views/user/show.volt
+++ b/app/Http/Web/Views/user/show.volt
@@ -6,7 +6,7 @@
 
     {% set vip_flag = user.vip ? '<i class="layui-icon layui-icon-diamond vip-icon"></i>' : '' %}
 
-    <div class="user-profile container clearfix">
+    <div class="user-profile wrap clearfix">
         <div class="avatar">
             <img src="{{ user.avatar }}" alt="{{ user.name }}">
         </div>
@@ -24,7 +24,7 @@
     {% set favorites_url = url({'for':'web.user.favorites','id':user.id},{'limit':12}) %}
     {% set friends_url = url({'for':'web.user.friends','id':user.id},{'limit':12}) %}
 
-    <div class="tab-container">
+    <div class="tab-wrap">
         <div class="layui-tab layui-tab-brief user-tab">
             <ul class="layui-tab-title">
                 <li class="layui-this">课程</li>
diff --git a/app/Http/Web/Views/vip/index.volt b/app/Http/Web/Views/vip/index.volt
index ced62b8c..eeecbac8 100644
--- a/app/Http/Web/Views/vip/index.volt
+++ b/app/Http/Web/Views/vip/index.volt
@@ -4,7 +4,7 @@
 
     <div class="vip-header">会员权益</div>
 
-    <div class="vip-reason-list container">
+    <div class="vip-reason-list wrap">
         <span class="layui-badge reason-badge">好课畅学</span>
         <span class="layui-badge reason-badge">会员折扣</span>
         <span class="layui-badge reason-badge">高清视频</span>
@@ -33,7 +33,7 @@
     {% set courses_url = url({'for':'web.vip.courses'},{'limit':12}) %}
     {% set users_url = url({'for':'web.vip.users'},{'limit':12}) %}
 
-    <div class="vip-tab-container">
+    <div class="vip-tab-wrap">
         <div class="layui-tab layui-tab-brief user-tab">
             <ul class="layui-tab-title">
                 <li class="layui-this">课程</li>
diff --git a/app/Models/Danmu.php b/app/Models/Danmu.php
index fc6155db..3a4334f1 100644
--- a/app/Models/Danmu.php
+++ b/app/Models/Danmu.php
@@ -155,7 +155,7 @@ class Danmu extends Model
         ];
     }
 
-    public static function posTypes()
+    public static function positionTypes()
     {
         return [
             self::POSITION_MOVE => '滚动',
@@ -175,7 +175,7 @@ class Danmu extends Model
         ];
     }
 
-    public static function randPos()
+    public static function randPosition()
     {
         $types = self::positionTypes();
 
diff --git a/app/Services/Frontend/Danmu/DanmuCreate.php b/app/Services/Frontend/Danmu/DanmuCreate.php
index e4d431f3..cc6b4544 100644
--- a/app/Services/Frontend/Danmu/DanmuCreate.php
+++ b/app/Services/Frontend/Danmu/DanmuCreate.php
@@ -33,14 +33,15 @@ class DanmuCreate extends FrontendService
         $data = [];
 
         $data['text'] = $validator->checkText($post['text']);
+        $data['position'] = $validator->checkPosition($post['position']);
+        $data['color'] = $validator->checkColor($post['color']);
+        $data['size'] = $validator->checkSize($post['size']);
         $data['time'] = $validator->checkTime($post['time']);
 
         $data['course_id'] = $chapter->course_id;
         $data['chapter_id'] = $chapter->id;
         $data['user_id'] = $user->id;
-        $data['position'] = DanmuModel::POSITION_MOVE;
-        $data['color'] = DanmuModel::COLOR_WHITE;
-        $data['size'] = DanmuModel::SIZE_SMALL;
+
         $data['published'] = 1;
 
         $danmu->create($data);
diff --git a/app/Validators/Danmu.php b/app/Validators/Danmu.php
index 8906bc8f..251a6f79 100644
--- a/app/Validators/Danmu.php
+++ b/app/Validators/Danmu.php
@@ -46,6 +46,17 @@ class Danmu extends Validator
         return $value;
     }
 
+    public function checkColor($color)
+    {
+        $list = DanmuModel::colorTypes();
+
+        if (!isset($list[$color])) {
+            throw new BadRequestException('danmu.invalid_color');
+        }
+
+        return $color;
+    }
+
     public function checkSize($size)
     {
         $list = DanmuModel::sizeTypes();
diff --git a/public/static/web/css/common.css b/public/static/web/css/common.css
index 107a30e2..dbd5b14c 100644
--- a/public/static/web/css/common.css
+++ b/public/static/web/css/common.css
@@ -36,7 +36,7 @@
     margin-bottom: 20px;
 }
 
-.container {
+.wrap {
     padding: 20px;
     margin-bottom: 20px;
     background-color: #fff;
@@ -138,19 +138,19 @@
     margin-bottom: 15px;
 }
 
-.index-container .layui-tab {
+.index-wrap .layui-tab {
     margin-bottom: 0;
 }
 
-.index-container .layui-tab-title {
+.index-wrap .layui-tab-title {
     border: none;
 }
 
-.index-container .layui-tab-content {
+.index-wrap .layui-tab-content {
     padding: 20px 0 0 0;
 }
 
-.index-container .header {
+.index-wrap .header {
     text-align: center;
     font-size: 18px;
     padding-bottom: 15px;
@@ -735,6 +735,10 @@
     margin-right: 10px;
 }
 
+.sidebar-chapter-wrap .layui-field-title legend {
+    text-align: center;
+}
+
 .sidebar-chapter-list::-webkit-scrollbar {
     width: 5px;
 }
@@ -789,13 +793,13 @@
     font-size: 12px;
 }
 
-.player-container {
+.player-wrap {
     position: relative;
     width: 760px;
     height: 428px;
 }
 
-.chat-container {
+.chat-wrap {
     padding: 10px 20px 20px 20px;
     background-color: white;
 }
@@ -1050,7 +1054,7 @@
     text-align: center;
 }
 
-.account-container {
+.account-wrap {
     padding-top: 40px;
     padding-bottom: 30px;
 }
@@ -1091,17 +1095,17 @@
     padding-top: 30px;
 }
 
-.login-container .link {
+.login-wrap .link {
     margin-bottom: 30px;
     font-size: 12px;
     text-align: center;
 }
 
-.login-container .link a {
+.login-wrap .link a {
     color: #999;
 }
 
-.login-container .link .separator {
+.login-wrap .link .separator {
     margin: 0 15px;
     color: #999;
 }
@@ -1346,7 +1350,7 @@
     margin-right: 8px;
 }
 
-.im-search-container {
+.im-search-wrap {
     padding: 20px;
     background-color: #f2f2f2;
 }
diff --git a/public/static/web/js/vod.player.js b/public/static/web/js/vod.player.js
index 6df618fd..440c6b5e 100644
--- a/public/static/web/js/vod.player.js
+++ b/public/static/web/js/vod.player.js
@@ -1,7 +1,8 @@
-layui.use(['jquery', 'form', 'layer', 'helper'], function () {
+layui.use(['jquery', 'form', 'slider', 'layer', 'helper'], function () {
 
     var $ = layui.jquery;
     var form = layui.form;
+    var slider = layui.slider;
     var layer = layui.layer;
     var helper = layui.helper;
 
@@ -16,26 +17,29 @@ layui.use(['jquery', 'form', 'layer', 'helper'], function () {
     var danmuListUrl = $('input[name="chapter.danmu_url"]').val();
     var playUrls = JSON.parse($('input[name="chapter.play_urls"]').val());
     var $danmuText = $('input[name="danmu.text"]');
+    var $danmuColor = $('input[name="danmu.color"]');
+    var $danmuSize = $('input[name="danmu.size"]');
+    var $danmuPosition = $('input[name="danmu.position"]');
 
-    var options = {
+    var playerOptions = {
         autoplay: false,
         width: 760,
         height: 428
     };
 
     if (playUrls.od) {
-        options.m3u8 = playUrls.od.url;
+        playerOptions.m3u8 = playUrls.od.url;
     }
 
     if (playUrls.hd) {
-        options.m3u8_hd = playUrls.hd.url;
+        playerOptions.m3u8_hd = playUrls.hd.url;
     }
 
     if (playUrls.sd) {
-        options.m3u8_sd = playUrls.sd.url;
+        playerOptions.m3u8_sd = playUrls.sd.url;
     }
 
-    options.listener = function (msg) {
+    playerOptions.listener = function (msg) {
         if (msg.type === 'play') {
             play();
         } else if (msg.type === 'pause') {
@@ -45,7 +49,7 @@ layui.use(['jquery', 'form', 'layer', 'helper'], function () {
         }
     };
 
-    var player = new TcPlayer('player', options);
+    var player = new TcPlayer('player', playerOptions);
 
     var position = parseInt(lastPosition);
 
@@ -65,7 +69,11 @@ layui.use(['jquery', 'form', 'layer', 'helper'], function () {
 
     initDanmu();
 
-    form.on('checkbox(danmu.status)', function (data) {
+    $('.icon-danmu-set').on('click', function () {
+        showMyDanmuSet();
+    });
+
+    form.on('switch(danmu.status)', function (data) {
         if (data.elem.checked) {
             $('#danmu').danmu('setOpacity', 1);
         } else {
@@ -73,12 +81,21 @@ layui.use(['jquery', 'form', 'layer', 'helper'], function () {
         }
     });
 
+    form.on('radio(danmu.opacity)', function (data) {
+        $('#danmu').danmu('setOpacity', parseFloat(data.value));
+    });
+
     form.on('submit(danmu.send)', function (data) {
+        var setFormData = form.val('danmu.form.set');
+        var formData = form.val('danmu.form');
         $.ajax({
             type: 'POST',
             url: data.form.action,
             data: {
-                text: $danmuText.val(),
+                text: formData['danmu.text'],
+                color: setFormData['danmu.color'],
+                size: setFormData['danmu.size'],
+                position: setFormData['danmu.position'],
                 time: player.currentTime(),
                 chapter_id: chapterId
             },
@@ -150,6 +167,15 @@ layui.use(['jquery', 'form', 'layer', 'helper'], function () {
         }
     }
 
+    function showMyDanmuSet() {
+        layer.open({
+            type: 1,
+            title: '弹幕设置',
+            area: '600px',
+            content: $('#my-danmu-set')
+        });
+    }
+
     function startDanmu() {
         $('#danmu').danmu('danmuResume');
     }