312312dd

已于 2022-07-14 16:35:07 修改
阅读量934 收藏
点赞数
分类专栏： React日常组件 文章标签： 前端 javascript 开发语言
于 2022-07-14 10:04:01 首次发布
臧小川
本文链接：https://blog.csdn.net/chuan0106/article/details/125778335
版权

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 = 5
    const [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 } = data
            setMouse(false)
            setTableActive(id)
            setIsShow(true)
            setBgc(bgc)
            setBgUrl(bgUrl)
        }
    }
    const bbb = (flag, index) =>
    {
        return () =>
        {
            setImgActive(flag)
            const { current } = videoRef
            for (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 = null
        dom = (
            <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 } = videoRef

        current.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;
      }
    }
  }
}
臧小川
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
侧边导航栏（抽屉式设计）界面 (html + css)
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
HTML侧边导航栏
热门推荐
jakelihua
10-19 1万+
本文用最简洁的语言，来教会读者，如果用html+css来制作，侧边导航栏，本案例以手机商城中的部分为例子来制作。
实现侧边导航栏（二）
woloveself的博客
07-30 416
【代码】实现侧边导航栏（二）
（十）VUE侧边菜单栏导航--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-23 6268
VUE侧边菜单栏导航设计（1）理解并逐步掌握VUE组件的含义；（2）深入理解VUE单页面应用；（3）初步掌握VUE路由的概念和使用方法。
侧边导航栏的实现
code袁的博客
08-20 3664
侧边导航栏的实现 1.看效果 2.代码实现wxml <!-- 遮罩层 --> <view class="shade" bindtap="isShow" style="right:{{clickmulu ? '0' : '100%'}}"> <!--侧边栏--> <view class="leftNavigation" style="right:{{clickmulu ? '0' : '-60%'}}"> //写入侧
dd for windows
04-07
**dd for Windows** 在Windows操作系统中，`dd`是一个强大的数据复制和转换工具，它源自于Unix-like系统，被广泛用于备份、恢复和磁盘克隆等任务。`dd`命令的基本语法是`dd if=源 of=目标 [选项]`，其中`if`代表...
dd.rar_dd
09-21
在IT行业中，`dd`是一个非常基础且重要的命令行工具，尤其在Linux和Unix系统中广泛使用。这个工具主要用于数据的复制、转换和输出，它能够处理块设备（如硬盘）以及普通文件。在给定的标题“dd.rar_dd”中，我们可以...
dd for win
04-11
"dd for win" 是一个在Windows环境下实现的类似于Linux中`dd`命令的工具。`dd`命令在Linux系统中广泛用于数据复制、转换和备份，它的强大在于它可以精确地控制数据的读取和写入，包括指定读取和写入的起始位置、大小...
横河DD3马达调试软件
08-14
横河DD3马达调试软件是一款专为横河品牌的DD马达设计的调试工具，主要用于对马达进行精细的设置和优化。DD马达，全称为Direct Drive Motor，直驱电机，是一种高精度、高速度的电机，广泛应用于工业自动化、精密仪器...
【前端WEB】2、使用HTML+CSS+JS实现网页侧边导航栏效果（原创含源码）
weixin_52938153的博客
12-23 5808
侧边导航栏是现代网页设计中常用的一种元素，它通过优化页面结构，使用户能够轻松访问网站的不同部分。我们将通过具体的例子来展示如何创建一个具有良好用户界面和交互体验的侧边导航栏。以上就是今天要讲的内容，本文仅仅简单介绍了HTML前端页面的侧边栏的使用，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转。如需其他示例或有问题欢迎评论！！本人看到都会回复。
侧导航栏 JS书写（ 简单实用 ）
12-10
一款用Javascript书写的 侧导航栏，美观且简单实用。研读以下代码，让你轻松写出属于自己的导航~~~
bbb-video-stream-html-client:有关如何使用独立 Flash 播放器在 html 中显示 BigBlueButton 视频流的示例
06-30
bbb-video-stream-html-client 一个简单的 HTML 页面，用于在独立的 Flash 播放器中显示 BigBlueButton 视频流。 只需打开index.html并尝试一下！ 如何 当您打开index.html ，您将看到 3 个需要填写的输入： 您的 BigBlueButton 服务器的名称：仅使用域或 IP，不包含http部分，例如： myserver.somewhere.com或192.168.0.1 。 Red5 使用的内部会议 ID。 类似于183f0bf3a0982a127bdb8161e0c44eb696b3e75c-1328884719999东西。 Red5 使用的内部视频流 ID。 类似于320x2401-1328884730777东西。 困难的部分是找到内部 ID。 在 Mconf 中，我们将其包含在 API 中，请参阅 。 在
bbb-video-download:一个BigBlueButton录制后记以提供视频下载
05-02
bbb-video-download BigBlueButton录制脚本，可提供视频下载功能。 汇编的视频包括： 共享音频和网络摄像头视频 展示幻灯片 白板操作（文本和绘图） 光标移动 缩放 屏幕共享 字幕 安装 依赖性从1.2版开始，脚本已被docker化，即它需要在主机上安装docker和docker-compose。 sudo apt update sudo apt install docker docker-compose 安装 # (as root or with sudo) cd /opt # # fetch source from github git clone https://github.com/tilmanmoser/bbb-video-download.git cd bbb-video-download # # build app with docker
bbb-downloader:一些用于下载BBB视频的脚本
05-03
bbb下载器 一些用于将BigBlueButton（BBB）录音下载为视频的脚本。 BBB允许录制会话，并允许在其Web回放页面中回放录音。 对于为BBB的绿灯会议录制的视频，播放页面的URL通常看起来像https://bbb.example.com/playback/presentation/2.0/playback.html?meetingId=375240faa7265529b58e0efe9f5fe793-b8b2b763a50993de7dfd0 此处提供的工具将与传入参数的URL一起使用。 有关幻灯片和视频播放的注意事项 BBB的一个不错的功能是，展示幻灯片组时，您无需共享屏幕（作为视频流），而只需上传文件，然后将其自动转换为图像即可。发送给参与者，与您的下一个/上一个幻灯片浏览同步。 这对于低带宽的与会者来说非常有用，它可以毫无问题地接收幻灯片（作为“静态”图像），而
C# MVC +Layui侧边导航栏的收缩及展开
最新发布
weiwei_y的博客
12-27 1893
C# MVC侧边导航栏 Layui
简单记录—vue 用js方法实现侧边导航栏联动选择
qq_44782585的博客
03-29 1420
因为滚动要跟着一起变，所以要在 watch 里面实时监听scroll的变化，发生变化时，判断当前距离顶部最近的是第几章，得到index把侧边目录栏选中样式改为对应的即可实现。页面初始化的时候，给内容滚动的元素加一个侦听事件，定义一个变量 scroll 用来保存当前滚动的数值。页面结构部分，根据数据循环写一个ul > li，生成侧边目录。解决第一个需求，点击任意一条目录页面滚动到对应内容。1、选择任意一条页面滚动到指定目录位置。解决第二个需求，页面滚动，目录跟着滚动。2、页面内容滚动侧边栏跟随一起滚动。
html中关于侧边导航栏和导航栏的编写
xxxmou的博客
02-04 7603
关于侧边导航栏和下拉菜单纯css编写
侧边导航栏
wojiaowuyali的博客
10-18 947
import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import { Link, IndexLink } from 'dva/router' import { Icon, intl, Truncate } from '@ali/...
视频流
qq_32439381的博客
08-03 3597
问题：最近在做视频直播，延迟问题很严重，pc端还好，延迟5s左右，在微信h5有时候延迟30s以上，所以来研究一下视频播放          PC用的是flv.js播放的，微信使用h5 video播放 一、HTML5录制视频     可以使用强大的webRTC，目前腾讯的实时音视频就是用的webRTC，但是兼容性不是很好 二、播放直播视频 目前有两种视频协议流，一种是HLS，另外一种是...
横河DD马达GIII驱动器调试教程
"Yokogawa DD马达 GIII驱动器的使用和调试方法" 本文主要介绍了Yokogawa DD马达 GIII驱动器的上手指南，包括使用调试软件DrvGIIIsupport工具进行驱动器调试的过程。该手册旨在帮助用户理解如何有效地操作和配置这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

臧小川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值