recommend dev

Author: 3lang3

src/components/Category/Category.css

@@ -4,14 +4,15 @@
 }
 
 .tvWidth.tv {
-    width: calc(100vw - 470px);
+    width: 960px;
 
     & .flexWrapper{
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: flex-start;
+        padding-right: 20px;
     }
 }
 
@@ -23,9 +24,8 @@
     padding: 20px;
     flex-direction: column;
     position: absolute;
-    
     top:0;
-    left: -99999px;
+    left: -1000px;
     z-index: 2;
     transition: none;
 
@@ -55,6 +55,7 @@
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
+        transition: none;
     }
 
     & .tvItemBox > div:last-child div{

src/components/Recommend/Recommend.css

@@ -32,12 +32,24 @@
         flex-direction: column;
 
         & .item {
-            height: 113px;
+            cursor: pointer;
+            margin-bottom: 5px;
+            overflow: hidden;
+            padding-left: 5px;
+            opacity: .5;
 
             & img {
-                width: 200px;
+                width: 100%;
                 height: 113px;
             }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.active, &:hover {
+                opacity: 1;
+            }
         }
     }
 

src/components/Recommend/Recommend.jsx

@@ -86,14 +86,14 @@ class Recommend extends React.Component {
                     {bannerItems.length > 0 
                         ? <div className={styles.banner}>
                         <section className={styles.player}>
-                            <ScreenItem item={bannerItems[0]} screenCount={1} />
+                            <ScreenItem isBanner={true} item={bannerItems[0]} screenCount={1} />
                         </section>
                         <section className={styles.list}>
-                            <section className={styles.item}><img src={bannerItems[0].cover} alt=""/></section>
-                            <section className={styles.item}><img src={bannerItems[1].cover} alt=""/></section>
-                            <section className={styles.item}><img src={bannerItems[2].cover} alt=""/></section>
-                            <section className={styles.item}><img src={bannerItems[3].cover} alt=""/></section>
-                            <section className={styles.item}><img src={bannerItems[4].cover} alt=""/></section>
+                            <section className={styles.item}><img src={bannerItems[0].cover} alt={bannerItems[0].title}/></section>
+                            <section className={styles.item}><img src={bannerItems[1].cover} alt={bannerItems[1].title}/></section>
+                            <section className={styles.item}><img src={bannerItems[2].cover} alt={bannerItems[2].title}/></section>
+                            <section className={styles.item}><img src={bannerItems[3].cover} alt={bannerItems[3].title}/></section>
+                            <section className={styles.item}><img src={bannerItems[4].cover} alt={bannerItems[4].title}/></section>
                         </section>
                     </div>
                     : ''

src/components/ScreenItem/ScreenItem.jsx

@@ -59,6 +59,7 @@ class screenItem extends React.Component {
 
     render() {
         const item = this.props.item;
+        const isBanner = this.props.isBanner ? true : false;
         const id = preFixIds(this.props.item);
         const paddBottom = (item.platform == 'douyu' || item.platform == 'huya' || item.platform == 'douyuvideo') ? 16/9 : 16/9 
         const secHeight = this.props.screenCount > 1 ? 49 : 98;
@@ -76,21 +77,33 @@ class screenItem extends React.Component {
                      dangerouslySetInnerHTML={{__html: `<embed allowscriptaccess="always" src="${_url}${id}" allowfullscreen="true"></embed>`}}>
                 </section>
                 <section className={styles.itemInfo}>
-                    {/*<p onClick={() => item.removeItem(item)}>{item.title}</p>*/}
+                    {
+                        !isBanner
+                            ? <ul>
+                                <li>
+                                    <span><IconClear onClick={() => this.props.removeItem(item) } /></span>
+                                </li>
+                            </ul>
+                            : ''
+                    }
+                    {
+                        /*<p onClick={() => item.removeItem(item)}>{item.title}</p>
                     <ul>
                         <li>
                             <span><IconClear onClick={() => this.props.removeItem(item) } /></span>
                         </li>
-                        {/*<li>
+                        <li>
                             <span><IconGame /> {item.type}</span>
                         </li>
                         <li>
                             <span><IconUser /> {item.anchor}</span>
                         </li>
                         <li>
                             <span><ActionEye /> {item.view}</span>
-                        </li>*/}
-                    </ul>
+                        </li>
+                        </ul>
+                        */}
+                    
                 </section>
             </section>
         )