diff --git a/src/app/play/play.component.html b/src/app/play/play.component.html
index 246278774f256edc045c89e428396be42ac4257b..4445d043ccc293bd0d151f79927f4ef7fee16dca 100644
--- a/src/app/play/play.component.html
+++ b/src/app/play/play.component.html
@@ -1,45 +1,48 @@
-<div class="player-reading" #readingContainer>
-  <div class="imgDetailBox"
-       (click)="closeDetailView($event)"
-       [style.display]="partDetailVisible? 'block' : 'none'">
-    <div class="detail-preview-box" [ngStyle]="partViewDetailCss" >
-      <img [src]="data.contentObj.pic_id | resource"  [ngStyle]="partViewImgDetailCss">
+<div class="body-bg"></div>
+<div class="player-border">
+  <div class="player-reading" #readingContainer>
+    <div class="imgDetailBox"
+         (click)="closeDetailView($event)"
+         [style.display]="partDetailVisible? 'block' : 'none'">
+      <div class="detail-preview-box" [ngStyle]="partViewDetailCss" >
+        <img [src]="data.contentObj.pic_id | resource"  [ngStyle]="partViewImgDetailCss">
+      </div>
     </div>
-  </div>
-  <div class="fill">
-    <div class="row fill" style="margin: 0 6vh;padding-top:3vh;padding-bottom: 3vh;">
-      <div class="col-6">
-        <div class="bar">
-          <div class="parts-wrap">
-            <div class="parts" #previewParts>
-
-              <div class="row" *ngFor="let part of parts;let i = index">
-                <div class="col-6 word-wrap" [style.color]="part.color">
-                  <span class="word " [style.color]="part.color">
-                    {{part.word}}
-                  </span>
-                </div>
-                <div class="col-6">
-                  <div class="part-pic-box-border" (click)="highlightSelect(i)"  [style.borderColor]="part.color">
-                    <div  class="part-pic-box" [ngStyle]="part.previewCss">
-                      <img [src]="data.contentObj.pic_id | resource" [ngStyle]="part.imgCss">
+    <div class="fill">
+      <div class="row fill" style="margin: 0 6vh;padding-top:3vh;padding-bottom: 3vh;">
+        <div class="col-6">
+          <div class="bar">
+            <div class="parts-wrap">
+              <div class="parts" #previewParts>
+  
+                <div class="row" *ngFor="let part of parts;let i = index">
+                  <div class="col-6 word-wrap" [style.color]="part.color">
+                    <span class="word " [style.color]="part.color">
+                      {{part.word}}
+                    </span>
+                  </div>
+                  <div class="col-6">
+                    <div class="part-pic-box-border" (click)="highlightSelect(i)"  [style.borderColor]="part.color">
+                      <div  class="part-pic-box" [ngStyle]="part.previewCss">
+                        <img [src]="data.contentObj.pic_id | resource" [ngStyle]="part.imgCss">
+                      </div>
                     </div>
                   </div>
                 </div>
+  
               </div>
-
             </div>
           </div>
         </div>
-      </div>
-      <div class="col-6" style="display: flex;justify-content: center;align-items: center;">
-        <div class="pic-preview" [ngStyle]="previewContainerCss" #previewContainer>
-          <img  [src]="data.contentObj.pic_id | resource" alt="">
-          <div class="highlight" #highlightBox>
-            <div class="t-b"></div>
-            <div class="r-b"></div>
-            <div class="b-b"></div>
-            <div class="l-b"></div>
+        <div class="col-6" style="display: flex;justify-content: center;align-items: center;">
+          <div class="pic-preview" [ngStyle]="previewContainerCss" #previewContainer>
+            <img  [src]="data.contentObj.pic_id | resource" alt="">
+            <div class="highlight" #highlightBox>
+              <div class="t-b"></div>
+              <div class="r-b"></div>
+              <div class="b-b"></div>
+              <div class="l-b"></div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/app/play/play.component.scss b/src/app/play/play.component.scss
index 5e7a1fb17c9af97d608f1d90562e2119c6bbb8a5..4af7a0274c5fe53fb8efa0511088376991e8d17c 100644
--- a/src/app/play/play.component.scss
+++ b/src/app/play/play.component.scss
@@ -1,3 +1,29 @@
+.body-bg {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-image: url('../../assets/player-bg.png') !important;
+  background-size: 100%;
+}
+
+.player-border{
+  position: absolute;
+  left: calc((100% - 100vh * 1.36)/ 2);
+  top: 5vh;
+  right: calc((100% - 100vh * 1.36)/ 2);
+  bottom: 5vh;
+  text-align: center;
+  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
+  border-radius: 11px;
+  border: 20px solid #23b1c2;
+  background-color: #fff;
+  overflow: hidden;
+  color: #303133;
+  transition: .3s;
+}
+
 .player-reading{
   background: url("../../assets/reading/bg_reading.png") 50% 50% no-repeat;
   width: 100%;
diff --git a/src/assets/player-bg.png b/src/assets/player-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..cfadf0004ed018108e5047ff64a9de3a331c54be
Binary files /dev/null and b/src/assets/player-bg.png differ