From 4190ca2457ef0bac9055bcca65d057a6ff8a6bfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com>
Date: Thu, 6 Feb 2020 14:06:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E4=B8=BB=E9=A1=B5=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=AF=B9=E5=BA=94=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user/usersInfo/video/InfosVideo.css       | 42 +++++++++++++++----
 .../user/usersInfo/video/VideoInReviewItem.js | 25 +++++++----
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/public/react/src/modules/user/usersInfo/video/InfosVideo.css b/public/react/src/modules/user/usersInfo/video/InfosVideo.css
index 39e0ff123..1ed0b3555 100644
--- a/public/react/src/modules/user/usersInfo/video/InfosVideo.css
+++ b/public/react/src/modules/user/usersInfo/video/InfosVideo.css
@@ -20,7 +20,7 @@
 }
 .videoItem img.cover {
     width: 100%;
-    border-radius: 6px 6px 0px 0px;
+    border-radius: 12px 12px 0px 0px;
     height: 158px;
 }
 .nItem.videoItem:hover .mask {
@@ -34,12 +34,12 @@
     display: inline-block;
 }
 .nItem .mask {
-    border-radius: 6px 6px 0px 0px;
+    border-radius: 12px 12px 0px 0px;
     display: none;
     text-align: center;
     position: absolute;
-    background: #000;
-    opacity: 0.5;
+    background:rgba(0,0,0,0.39);
+    /*opacity: 0.5;*/
 }
 .videoItem .playWrap {
     display: none;
@@ -49,6 +49,7 @@
     position: absolute;
     top: 0px;
     left: 0px;
+    cursor: pointer;
 }
 .videoItem img.play {
     margin-top: 20%;
@@ -57,9 +58,9 @@
 }
 .videoItem .square-main {
     padding: 9px 8px;
-    
+
     background: #fff;
-    border-radius: 0px 0px 6px 6px;
+    border-radius: 0px 0px 12px 12px;
 }
 .videoItem .square-main .title{
     max-width: 256px;
@@ -71,7 +72,11 @@
     background: #EAEAEA;
 }
 .videoItem .time {
-    color: #A0A0A0;
+    color: #C0C4CC;
+}
+.videoItem .square-main .buttonRow .dianjilianicon{
+   color: #606266 !important;
+   font-size: 14px !important;
 }
 
 .videoItem .square-main .buttonRow {
@@ -80,8 +85,8 @@
 }
 
 .nItem.videoItem:hover .square-main {
-    color: #fff;
-    background: #333;
+    /*color: #fff;*/
+    background: #fff;
 }
 
 /* 预览弹框 */
@@ -117,4 +122,23 @@
 .infoVideo .toUploadBtn {
     height: 48px;
     margin-right: 20px;
+}
+
+.play_duration{
+    width: 100%;
+    height:30px;
+    background:rgba(0,0,0,0.39);
+    /*opacity:0.39;*/
+    color:#fff;
+    font-size:12px;
+    line-height:30px;
+    text-align: right;
+    padding-right: 10px;
+}
+.mp23{
+    margin-bottom: 23px;
+}
+
+.videoItem:hover{
+    box-shadow:0px 4px 10px 0px rgba(3,7,45,0.1);
 }
\ No newline at end of file
diff --git a/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js b/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js
index 23fdaf450..53e39defc 100644
--- a/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js
+++ b/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js
@@ -20,13 +20,13 @@ const clipboardMap = {}
 function VideoInReviewItem (props) {
     const theme = useContext(ThemeContext);
     const { history, file_url, cover_url, title, created_at, published_at, isReview, id
-        , onEditVideo, onMaskClick, getCopyText, showNotification } = props;
+        , onEditVideo, onMaskClick, getCopyText, showNotification,vv,play_duration} = props;
     useEffect(()=> {
         if (!isReview) {
             _clipboard = new ClipboardJS(`.copybtn_item_${id}`);
             _clipboard.on('success', (e) => {
                 showNotification('复制成功')
-            });    
+            });
             clipboardMap[id] = _clipboard
         }
         return () => {
@@ -45,28 +45,37 @@ function VideoInReviewItem (props) {
     }
     return (
         <div className={`${isReview ? 'videoInReviewItem' : 'nItem'} videoItem`}>
-            
+
             <img className="cover" src={cover_url || "http://video.educoder.net/e7d18970482a46d2a6f0e951b504256c/snapshots/491e113950d74f1dab276097dae287dd-00005.jpg"}
             ></img>
             {!isReview && <div className="mask" onClick={() => onMaskClick(props)}>
-                
+
             </div>}
-            {!isReview && 
+            {!isReview &&
             <div className="playWrap" onClick={() => onMaskClick(props)}>
-                <img className="play" src={playIcon}></img>
+                <img className="play mp23" src={playIcon}></img>
+                {play_duration===0?"":<div className={"play_duration"}>累计学习时长：{play_duration} h</div>}
             </div>
             }
             <div className="square-main">
                 <div className="title overflowHidden1"
                     title={title && title.length > 20 ? title : ''}
                 >{title}</div>
+                <div className="df buttonRow mb10">
+
+                    <span className="time">{moment(published_at || created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
+                </div>
                 <div className="df buttonRow">
                     {/* 2019-09-01 10:00:22 */}
-                    <span className="time">{moment(published_at || created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
+                    {vv===0?"":<span className={"dianjilianicon"}>
+                         <Tooltip title="播放次数" placement="bottom">
+                             <i className={`icon-dianjiliang iconfont dianjilianicon`}></i>
+                         </Tooltip>  {vv}
+                    </span>}
                     { isReview != true && <div>
                         <Tooltip title="编辑" placement="bottom">
                             <i className="icon-bianji1 iconfont" onClick={() => onEditVideo(props)}
-                                style={{    marginTop: '1px', display: 'inline-block'}}
+                               style={{    marginTop: '1px', display: 'inline-block'}}
                             ></i>
                         </Tooltip>
                         <Tooltip title="复制视频地址" placement="bottom">