JS

import { useState, useRef, useEffect, Fragment } from 'react'; import styles from './style.less' import { StarOutlined, ZoomOutOutlined, FireOutlined } from '@ant-design/icons';const arr = [{ name: '羽神', title: '白絲蘿莉 卡哇伊', img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=62cfbff322a0c670476cdeaf', bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 1 },{ name: '羽神', img: "https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a5596fd73380b818dc300", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-2ac8a98197483807f423081da2f28f97.v.smtcdns.com/vipzj.video.tc.qq.com/AKBO9casBVOLUZpiLsTxiIdAfuZZ9zZBSoCN1aR6XYNc/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b533yaaeaaa7mamktthfvrmbxwdaljaabsa.f2.mp4?vkey=80DFCC912BF4788C572C8E9CDAD141A694B714969678386D65182039A6000A2D194D8068838E92EE54BD961686EF809CECAAD2967453C32848DC17A0B6826E92622F0BF234409FAFD2507F90B4A89BC81B81EB5395070D82EE9B1C47826DBFBF38240B40B8B1EBD5F8D19EEE5EF6C6A27D49B8EE278C9C512DBFFED9892353A8165F1CD132E3F435&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 2, },{ name: '羽神', img: "https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a559d2ee1bd5a04779569", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-c06c68a696303c57897f7328794e7c62.v.smtcdns.com/variety.tc.qq.com/AfAX8GnOSE2-v4mOBhrWVpoim-knK7EdrF5vCf0nfaCU/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53lmaa2aaacuafkev7xfrmaw6dbvlaacka.f2.mp4?vkey=1D03F5C0975444C1AE5DEF1B664A905C7EAC3EF98068841CBFCAF1FCCE8870F0722C1DB176013F4071762D721F40DE01896987F35F6AD95E9EA1FA56F962B81A39835271BA52369CA54DDB0DCAC7FF009A7FA79BB98B2439E91E12B84AF495A70F51316183F608613A6FCB46B715CD9E3FB730ED3715074F066B7A33B03B5EF28CA87A50DB0B0DC5&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 3 },{ name: '羽神', img: "https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a011001e6b8ea0cce3", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-0af45f258071928c8a52766f12273848.v.smtcdns.com/vlive.qqvideo.tc.qq.com/Ak5NBDyRzCJtchhsSanhAtiHiO6a8K7PbSZUbdssbYhk/uwMROfz2r57BIaQXGdGnC2deDmaPNDCrH1wQiqsNj6BN2Mmx/gzc_1000102_0b53guaaaaaavmaiiswjyzrmanodaa4qabca.f2.mp4?vkey=992610D821864343A1C6845CCB0C406E39B6F854456D3FF3E9EAEBFCC75499D24079E99A0758F2E6EF24C23868D99F20853F4E9BC9EEDD09F760348BAD92074EC33007042D4B9DDE2906367EF2D0DD0EFBFF6F46269D3A466B13FFAA8001C888A8DC3DDE75B941EB72B8F13B0F34BFC84B6C1F910447998E8D849645B5D466AF2DBB2C87A9A9FD3C&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 4 },{ name: '羽神', img: "https://img0.baidu.com/it/u=3126105403,2740774551&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-77e0fdb3829ca9399b63f7d6870f6c0a.v.smtcdns.com/vipzj.video.tc.qq.com/A3K7SB8b4iWFvbGWkQ8xxCoisCvDthyIFQTUZJhQH0Es/uwMROfz2r5zAoaQXGdGnC2dfDma7NyshNhpHvcEisM-VRrjn/t0029cmzigs.mp4?vkey=E983B7545B6249B8FFEEDE7C827BE689F8F11C89084294BCF5146C8713987F86464E01600CB6AD929E2F9150DA69D7CEBF0CB7CC807A30AB31A56EF7FA7A495004DE4AB09EE54C36FF0186D7292FFC056735F326C1B137C0FAABDA44CBD2C0418E8B4FEAFF092BE6E9263862E0374905F2167D7634FDE129F60FAE30433A87060D059E9D0528D5CD&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 5 },{ name: '羽神', img: "https://img2.baidu.com/it/u=2129543135,4080493871&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=799", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 6 },{ name: '羽神', img: "https://img1.baidu.com/it/u=3019098070,3602928811&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=698", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 7 },{ name: '羽神', img: "https://img2.baidu.com/it/u=3826157526,2232000744&fm=253&fmt=auto&app=138&f=PNG?w=343&h=500", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 8 },{ name: '羽神', img: "https://img0.baidu.com/it/u=45975473,4171501175&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=699", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0 ', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 9 },{ name: '羽神', img: "https://img1.baidu.com/it/u=2194142053,541505914&fm=253&fmt=auto&app=138&f=JPEG?w=314&h=500", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0 ', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 10 },{ name: '羽神', img: "https://img1.baidu.com/it/u=1244445157,2469283429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', title: '名偵探柯南 普通話版', id: 11 },{ name: '羽神', img: "https://img1.baidu.com/it/u=1638558421,3202912814&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 12 },{ name: '羽神', img: "https://img1.baidu.com/it/u=3669912651,1969863957&fm=253&fmt=auto&app=138&f=JPEG?w=478&h=750", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 13 },{ name: '羽神', img: "https://img0.baidu.com/it/u=3410338181,1160273315&fm=253&fmt=auto&app=138&f=JPEG?w=329&h=499", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 14 },{ name: '羽神', img: "https://img1.baidu.com/it/u=3203046865,179991330&fm=253&fmt=auto&app=138&f=JPEG?w=253&h=500", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0 ', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 15 },{ name: '羽神', img: "https://img1.baidu.com/it/u=4132401708,4031302605&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 16 },{ name: '羽神', img: "https://img1.baidu.com/it/u=3105284027,1376461362&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=445", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 17 },{ name: '羽神', img: "https://img2.baidu.com/it/u=3253881986,1330158742&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 18 },{ name: '羽神', img: "https://img0.baidu.com/it/u=2226571013,1276794123&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=780", bgc: 'rgb(148, 120, 108)', bgUrl: '//puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', videoSrc: 'https://apd-03f788c6c162355358a9a6f5ea728f82.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJ3sHBYe82ANKNDNIA_qIWRApkmZqkHcJPk6Frdu7ZuM/uwMROfz2r57AoaQXGdGnC2deDmaDJEiCnYuq4Agi3-uIIDUa/gzc_1000102_0b53l4aaqaaaqaahp45hxvrmax6dbbjqadca.f2.mp4?vkey=AF0DBD5242AFD216A46A61577D8CBC5A8F5A3AA09C2ECCF1776D0A998066AB28874E087471364972DDC58AA7F05E03D288F1BF464D8F5F402889A737AC21EBCB2624AD8C0AAD450FC3C769DEA6E8C5FA17BE41DE5CB4281EE37E8057DA6E5AF59EDEC4D0B0127C774D52255DBD5D4151A71B5BD6B62AE39459BE432C45C763114EC4EAB106F0E2B6&sdtfrom=v1006&guid=b2dc66d0c34ed7dae4dd48d17a45a55c&start=60&end=70', id: 19 },] const labData = [{ name: '羽神天下第一', detail: '天下第一？', bgc: '148, 120, 108', bgUrl: 'https://puui.qpic.cn/media_img/lena/PICrdkd25_580_1680/0', id: 1 },{ name: '星漢燦爛', detail: '吳磊趙露思逗智逗勇', bgc: '39, 100, 69', bgUrl: ' https://puui.qpic.cn/media_img/lena/PICdu84ie_580_1680/0', id: 2 },{ name: '少主', detail: '片尾看哭！兩集聯播封神之戰', bgc: '13, 24, 30', bgUrl: 'https://vc.qpic.cn/tpic/mtviwcAT9Lhwu/hyss76698brvj296/1680', id: 3 },{ name: '怎么辦！脫口秀專場', detail: '編劇部運動會來襲', bgc: '112, 172, 183', bgUrl: 'https://puui.qpic.cn/media_img/lena/PICxdngwy_580_1680/0', id: 4 },{ name: '遇見璀璨的你', detail: '陳喬恩金瀚極限曖昧較量', bgc: '6, 9, 18', bgUrl: ' https://puui.qpic.cn/media_img/lena/PICdpb5bi_580_1680/0', id: 5 },{ name: '幻夢山海謠', detail: '國風美學遇上奇幻山海', bgc: '236, 178, 155', bgUrl: 'https://puui.qpic.cn/media_img/lena/PIC14r7c5_580_1680/0', id: 6 },{ name: '紫川', detail: '片尾看哭！兩集聯播封神之戰', bgc: '39, 33, 35', bgUrl: 'https://puui.qpic.cn/media_img/lena/PICb9pxzu_580_1680/0', id: 7 },{name: '一起同過窗', detail: '大學青春生活爆笑來襲', bgc: '30, 36, 36', bgUrl: 'https://puui.qpic.cn/media_img/lena/PICdvugbm_580_1680/0', id: 8},{ name: '暗區突圍·上線', detail: '全新硬核射擊游戲', bgc: '190, 0, 10', bgUrl: 'https://vc.qpic.cn/tpic/mtviwchP5f8FE/9i1z7603qfpx7692/1680', id: 9 } ] const index = () => {const pageNum = 5const [mouse, setMouse] = useState(true),[page, setPage] = useState(1),[imgActive, setImgActive] = useState(1),[isShow, setIsShow] = useState(false),[navTitle, setNavTile] = useState(false),[tableActive, setTableActive] = useState(null),[bgc, setBgc] = useState(null), // 背景顏色[bgUrl, setBgUrl] = useState(null) // 背景圖const myRef = useRef(null)const videoRef = useRef([])useEffect(() =>{ // 發送數據請求 設置訂閱/啟動定時器 手動更改 DOM 等 ~// let timer = setInterval(() =>// {// }, 1000)console.log(myRef.current.scrollWidth);// myRef.current.offsetLeft = '100px'return () =>{ // 組件卸載之前 做一些收尾工作 比如清楚定時器/取消訂閱 等 ~// clearInterval(timer)}}, []) // 檢測數組內變量 如果為空 則監控全局const handleMouse = (flag) =>{return () =>{setMouse(flag)setImgActive(1)setTableActive(null)setIsShow(false)}}const nextClick = () =>{const length = Math.ceil(arr.length / pageNum)page >= length ? setPage(length) : setPage(page + 1)}const prevClick = () =>{page <= 1 ? setPage(1) : setPage(page - 1)}const tableHandleMouse = (id, data) =>{return () =>{const { bgc, bgUrl } = datasetMouse(false)setTableActive(id)setIsShow(true)setBgc(bgc)setBgUrl(bgUrl)}}const bbb = (flag, index) =>{return () =>{setImgActive(flag)const { current } = videoReffor (let index = 0; index < current.length; index++){const element = current[index];element?.pause()}current[index].play()}}// 最后一張圖片const endImgDom = () =>{// ! boolean 當前的頁數小于 data數組除以每頁的數量 const boolean = (page) < Math.ceil(arr.length / pageNum)let dom = nulldom = (<a href="" className={`${styles.slider_figure} ${styles.slider_figure_disabled}`}><img src={page <= Math.ceil(arr.length / pageNum) && arr[page * pageNum]?.img} className={styles.figure_pic} alt="" />{/* 這里還有個DIV */}<div></div><div className={styles.slider_figure_catpion}><div _stat='焦點圖:大家在追:視頻標題' title='嘿嘿嘿' className={`${styles.slider_figure_title} ${styles.slider_figure_name}`}>321</div><div className={`${styles.slider_figure_title} ${styles.slider_figure_desc}`}>劉亦菲陳曉共闖大宋繁華劉亦菲陳曉共闖大宋繁華</div><div className={`${styles.slider_figure_title} ${styles.slider_figure_desc2}`}>劉亦菲陳曉共闖大宋繁華劉亦菲陳曉共闖大宋繁華</div><div _stat="焦點圖:大家在追:播放按鈕" className={`${styles.slider_figure_btn} ${styles.slider_figure_btn_hzgtnf6tbvfekfv}`}>立即觀看</div></div></a>)return boolean && dom}const getVideoRef = (ref) =>{const { current } = videoRefcurrent.push(ref)}const aaa = () =>{let dom = (<div className={`${styles.slider_figure_wrap} ${styles._quicklink}`}><div ref={myRef} className={styles.slider_figure_inner}>{arr.map((data, index) => (// <a onMouseEnter={bbb(false)} key={index} href="" className={`${styles.slider_figure} ${index >= (page * pageNum) && styles.none} ${index < (page * pageNum) - pageNum && styles.none} ${mouse && data.id === imgActive && styles.slider_figure_active} ${(index + 1) % 6 == 0 && styles.slider_figure_disabled}`}><a onMouseEnter={bbb(false, index)} key={index} href="" className={`${styles.slider_figure} ${index >= (page * pageNum) && styles.none} ${index < (page * pageNum) - pageNum && styles.none} ${mouse && data.id === imgActive && styles.slider_figure_active} `}><img src={data.img} className={styles.figure_pic} alt="" />{/* 這里還有個DIV 這個是視頻 暫時還沒做完觸碰播放視頻 */}<div className={styles.slider_figure_video}><div className={styles.figure_video}><video muted ref={getVideoRef} poster="https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a011001e6b8ea0cce3" loop="loop" src={data.videoSrc}><img src="https://puui.qpic.cn/vupload/0/common_blank.png/0" className={styles.figure_video_poster} alt="" /></video></div></div><div className={styles.slider_figure_catpion}><div _stat='焦點圖:大家在追:視頻標題' title='嘿嘿嘿' className={`${styles.slider_figure_title} ${styles.slider_figure_name}`}>{data.title}</div><div className={`${styles.slider_figure_title} ${styles.slider_figure_desc}`}>劉亦菲陳曉共闖大宋繁華劉亦菲陳曉共闖大宋繁華</div><div className={`${styles.slider_figure_title} ${styles.slider_figure_desc2}`}>劉亦菲陳曉共闖大宋繁華劉亦菲陳曉共闖大宋繁華</div><div _stat="焦點圖:大家在追:播放按鈕" className={`${styles.slider_figure_btn} ${styles.slider_figure_btn_hzgtnf6tbvfekfv}`}>立即觀看</div></div></a>))}{endImgDom()}<button onClick={prevClick} className={`${styles.btn_figure_prev}`}>按鈕</button><button onClick={nextClick} className={styles.btn_figure_next}>下頁</button></div></div >)return dom}return (<Fragment>{/* 頭部 */}<div className={`${styles.site_head} ${styles.site_head_absolute}`} ><div className={styles.head_inner}><h1 className={styles.site_logo}><a href="" _stat="頂部導航區:主導航_LOGO" className={styles.link_logo}>后陳視頻</a></h1></div><div className={styles.mod_search}><form id="searchForm" action="//v.qq.com/x/search/" method="get" className={`${styles.search_form} ${styles.cf}`} οnsubmit="return false;"><div for="keywords" className={styles.search_label}>搜索關鍵詞</div><div className={styles.search_keywords}><input type="text" id="keywords" placeholder="小豬佩奇全集" autocomplete="off" value={'小豬佩奇全集'} className={styles.search_input} /></div><button type='submit' className={styles.search_btn}><span className={styles.icon_search}><ZoomOutOutlined /> </span><span className={styles.btn_inner}>搜索</span></button><a href="" className={styles.btn_search_hot} title="熱搜榜"><span className={styles.svg_icon_fire}><FireOutlined /></span>熱搜榜</a></form></div></div>{/* 核心部分 */}<div className={`${styles.site_slider} ${styles.site_slider_intrude}`}>{/* 左側圖片 以下代碼基本完成 !*/}<div className={styles.slider_inner}><a style={{ backgroundColor: `rgba(${bgc})`, backgroundImage: `url(${bgUrl})` }} className={`${styles.slider_item} ${styles.out}`} href=""></a>{/* <a className={`${styles.slider_item} ${styles.in}`} href=""></a> */}<div className={`${styles.slider_item_mine} ${isShow && styles.none} `}><div className={styles.bg}></div>{aaa()}</div></div>{/* 右側導航欄 有時間在慢慢整理 */}<div className={`${styles.slider_nav} ${styles._quicklink} ${styles.slider_nav_watched}`}><a onMouseEnter={handleMouse(true)}className={`${styles.nav_link} ${styles.nav_link_mine} ${mouse && styles.current}`} href=""><StarOutlined className={`${styles.slider_icon} ${mouse && styles.current} `} /><span className={styles.text}>猜你喜歡</span></a><span className={`${styles.nav_label} ${!mouse && styles.nav_label_active}`}><StarOutlined className={`${styles.slider_icon} ${!mouse && styles.current} `} /><span className={styles.text}>重磅推薦</span></span>{labData.map((data, index) => (<a onMouseEnter={tableHandleMouse(data.id, data)} key={index} className={`${styles.nav_link} ${tableActive === data.id && styles.current} `} href=""><span className={`${styles.text} ${styles.text2}`} title={`${data.name}: ${data.detail}`}><span className={styles.title_text}>{data.name}</span>{data.detail}</span></a>))}</div></div></Fragment >); }; export default index

CSS

.slider_figure_wrap {-webkit-mask: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .1) 370px, rgba(0, 0, 0, .8) 440px, #000) right top;z-index: 3;position: absolute;top: 0;left: 0;width: 100%;height: 100%;white-space: nowrap;.slider_figure_disabled {pointer-events: none;}.slider_figure_inner {position: relative;width: 1710px;margin: 0 auto;padding: 0 50px;a {color: #111;}.slider_figure {*zoom: 1;-webkit-transform: scale(1);-ms-transform: scale(1);-webkit-backface-visibility: visible;-webkit-transform-origin: center;-ms-transform-origin: center;display: inline-block;*display: inline;position: relative;width: 260px;height: 364px;margin: 88px 10px 30px 0;overflow: hidden;transform: scale(1);transform-origin: center;border-radius: 4px;backface-visibility: visible;transition: -webkit-transform .15s ease;transition: transform .15s ease;transition: transform .15s ease, -webkit-transform .15s ease;}// ! 鼠標劃過右側導航欄 第一個圖片高亮.slider_figure:hover,.slider_figure_active {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);z-index: 3;transform: scale(1.1);box-shadow: 0 28px 50px rgba(25, 24, 40, .68);}// .slider_figure:hover,// +.slider_figure_active {// -webkit-transform: scale(1.1);// -ms-transform: scale(1.1);// z-index: 3;// transform: scale(1.1);// box-shadow: 0 28px 50px rgba(25, 24, 40, .68);// }.slider_figure:hover .slider_figure_btn {display: block;background: url(https://vm.gtimg.cn/tencentvideo/vstyle/web/v6/style/img/common/svg/btn_view_sprite.svg);}.slider_figure:hover .slider_figure_desc {display: none;}.slider_figure:hover .slider_figure_name {right: 96px;}.slider_figure:hover .slider_figure_desc2 {display: block;}.slider_figure:hover .slider_figure_video {display: block;}.slider_figure {margin-top: 102px;img {-ms-interpolation-mode: bicubic;display: inline-block;vertical-align: bottom;}.figure_pic {display: block;width: 260px;height: 100%;border-radius: 4px;background-color: #fff;background-color: rgba(255, 255, 255, .9);}}.slider_figure_catpion {z-index: 2;position: absolute;right: -1px;bottom: -1px;left: -1px;height: 180px;border-radius: 0 0 4px 4px;background: linear-gradient(-180deg, #000 11%, #161519 88%);background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 11%, rgba(22, 21, 25, .89) 88%);font-size: 16px;letter-spacing: normal;.slider_figure_name {color: #fff;font-size: 18px;}.slider_figure_desc,.slider_figure_desc2 {bottom: 14px;color: #eee;font-size: 13px;}.slider_figure_desc2 {display: none;margin-right: 82px;}.slider_figure_btn {display: none;position: absolute;right: 15px;bottom: 18px;width: 80px;height: 32px;background: url(/tencentvideo/vstyle/web/v6/style/img/common/svg/btn_view_sprite.svg) 0 0 no-repeat;color: #fff;font-size: 12px;line-height: 30px;text-align: center;cursor: pointer;}}} }.slider_figure_title {position: absolute;right: 15px;bottom: 39px;left: 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.btn_figure_prev, .btn_figure_next {z-index: 5;position: absolute;top: 50%;width: 46px;height: 46px;margin-top: 0;border-radius: 100%;color: #fff;color: rgba(255, 255, 255, .8);text-align: center;cursor: pointer;transition: background-color .5s;margin-top: 10px;&:hover {background-color: rgba(0, 0, 0, .5);color: #ff5c38;}}.btn_figure_prev {left: -5px; }.btn_figure_next {// right: 378px;// right: 230px;right: 260px; }.site_slider {z-index: 1;position: relative;height: 500px;margin-top: -80px;margin-bottom: 30px;overflow: hidden;// 左側圖片.slider_inner {position: absolute;width: 100%;height: 100%;transition: -webkit-transform 1.8s ease;transition: transform 1.8s ease;transition: transform 1.8s ease, -webkit-transform 1.8s ease;.none {display: none !important;}.slider_item {position: absolute;width: 100%;height: 100%;background-position: center 0;background-repeat: no-repeat;// background-color: rgb(13, 24, 30);// background-image: url(//vc.qpic.cn/tpic/mtviwcAT9Lhwu/hyss76698brvj296/1680);}.in {z-index: 1;opacity: 1;}.slider_item_mine {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;z-index: 2;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #2e373b;// font-size: 0;letter-spacing: -3px;white-space: nowrap;transition: -webkit-transform .2s ease;transition: transform .2s ease;transition: transform .2s ease, -webkit-transform .2s ease;user-select: none;.bg {z-index: 2;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #202129;background: rgba(32, 33, 41, .7);}}}// ! 圖片視頻.slider_figure_video {display: none;z-index: 1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;.figure_video {position: relative;width: 100%;height: 100%;video {display: block;width: 100%;height: 100%;object-fit: cover;border-radius: 4px;.figure_video_poster {display: inline-block;vertical-align: bottom;}}}}.slider_nav {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;z-index: 3;position: absolute;top: 40px;right: 0;bottom: 0;width: 348px;padding-top: 34px;overflow: hidden;background: #0f0f1e;background: rgba(15, 15, 30, .5);user-select: none;}// 右側導航欄.slider_nav {top: 68px;.nav_link,.nav_label,.nav_link {display: block;position: relative;height: 35px;margin-left: 45px;color: #fff;color: rgba(255, 255, 255, .7);font-size: 15px;line-height: 35px;cursor: pointer;}.text {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: inherit;}&::before {-webkit-backdrop-filter: blur(3px);position: absolute;top: -20px;right: -20px;bottom: -20px;left: -20px;backdrop-filter: blur(3px);background: #000;background: rgba(0, 0, 0, .2);content: "";}// 標題.nav_link {// 選中高亮&:hover .slider_icon {color: #ff5c38;opacity: 1;}.current,.nav_link:hover {color: #ff5c38;font-size: 22px;font-weight: 700;}}// icon.slider_icon {position: absolute;top: 8px;margin-left: -23px;color: #fff;opacity: .7;transition: color 0.3s;}.current,&:hover {color: #ff5c38;font-size: 22px;font-weight: 700;opacity: 1;}// 內容.nav_label {cursor: default;}.text2 {font-size: 0;}.current .text2,.nav_link:hover .text2 {font-size: 13px;}.title_text {padding-right: 5px;font-size: 15px;transition: font-size .08s ease;}.current .title_text,.nav_link:hover .title_text {font-size: 22px;}}.slider_nav_watched {padding-top: 20px;.nav_link_mine {position: relative;margin-top: 10px;margin-bottom: 20px;font-size: 22px;font-weight: 700;&::after {position: absolute;right: 10px;bottom: -10px;left: -30px;height: 1px;background-color: #fff;background-color: rgba(255, 255, 255, .13);content: "";}}.nav_label {position: relative;font-size: 22px;font-weight: 700;}.nav_label_active {color: #fff;}}}.site_slider_intrude {margin-top: 0;.slider_nav_watched {padding-top: 0;} }.site_slider {margin-top: 0; }// 頭部 .site_head {z-index: 10;position: relative;top: 0;left: 0;width: 100%;min-width: 1000px;height: 68px;background: #fff;color: #666;font-size: 12px;// 主體.head_inner {width: 1710px;height: 68px;margin: 0 auto;// logo.site_logo {position: relative;width: 135px;margin-top: 16px;float: left;overflow: hidden;.link_logo {display: block;width: 135px;height: 36px;background: url(https://vm.gtimg.cn/tencentvideo/vstyle/web/v6/style/img/common/sprite_head_logo.svg) 0 0 no-repeat;text-indent: -300px;// background-color: red;}}}.mod_search {position: absolute;top: 14px;right: 375px;width: 428px;height: 38px;border: 1px solid #ff5c38;border-radius: 20px;.search_form {position: relative;width: 100%;height: 100%;&::before {display: table;content: "";}}.search_label {clip: rect(1px, 1px, 1px, 1px);position: absolute;}.search_keywords {position: relative;height: 100%;margin: 0 164px 0 20px;}.search_input {position: absolute;width: 100%;height: 100%;padding: 0;border: 0;outline: 0;background: 0 0;color: #999;font-size: 15px;line-height: 40px;}.cf {zoom: 1;}}a {text-decoration: none;} }.site_head_absolute {position: absolute; }.site_head_absolute {-webkit-backdrop-filter: blur(1px);backdrop-filter: blur(1px);background: #fff;background: rgba(255, 255, 255, .14);.mod_search {left: 50%;margin-left: -215px;border-color: transparent;background-color: #fff;background-color: rgba(255, 255, 255, .2);box-shadow: 0 4px 18px rgb(17 18 38 / 7%);transition: max-width .2s ease;.search_input {color: #fff;text-shadow: 0 0 2px rgb(17 18 38 / 20%);}.search_btn {position: absolute;top: -1px;right: -1px;bottom: -1px;width: 90px;// height: 40px;padding-right: 6px;border: none;border-radius: 0 20px 20px 0;outline: 0;background: #ff5c38;color: #fff;font-size: 15px;line-height: 40px;cursor: pointer;.icon_search {width: 18px;height: 18px;margin-right: 5px;// vertical-align: -4px;}.btn_inner {padding-right: 2px;}}.btn_search_hot {position: absolute;top: 10px;right: 106px;padding-left: 16px;color: #ff5c38;font-size: 13px;.svg_icon_fire {position: absolute;// top: 1px;left: 0;width: 12px;height: 15px;}}} }

總結

以上是生活随笔為你收集整理的312312dd的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。