rwxq.html 11.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人物详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/rwxq.css">

    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_tuxoqivait.css">
    <link rel="stylesheet" href="css/swiper.css">
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>

    <style>
        .icon-caidan{
            font-size: 0.5rem;
        }
        .icon-magnifier{
            color: #999999;
        }
        .icon-10{
            position: relative;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;

            border-right: 0.1rem;
        }
        .swiper-slide img{
            width: 100%;
            height: 100%;

        }
        .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
            bottom: 20px;
            left: 0;
            width: 100%;
        }
        .swiper-pagination-bullet-active {
            opacity: 1;
            background: #ffffff;
        }
        .top_dot{
            width: 0.08rem;
            height: 0.08rem;
            background:rgba(166,16,16,1);
            border:1px solid rgba(255, 255, 255, 1);
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 0;
        }

    </style>
</head>
<body>
    <div class="container">
        <!--顶部菜单-->
        <div class="top">
            <!--顶部菜单-->
            <div class="top_t">
                <!--左-->
                <div class="top_t_left">
                    <!--中文字-->
                    <div class="top_t_left_text">

                    </div>
                    <!--菜单图标-->
                    <div class="iconfont icon-caidan"></div>
                </div>
                <!--中-->
                <div class="top_t_middle">
                    <img src="images/peke.png">
                </div>
                <!--右-->
                <div class="top_t_right">
                    <!--铃声-->
                    <div class="iconfont icon-10">
                        <div class="top_dot"></div>
                    </div>
                    <!--头像-->
                    <div class="top_t_right_pic">
                        <img src="images/1.png">
                    </div>
                </div>
            </div>
            <!--底部搜索-->
            <div class="top_d">
                <div class="iconfont icon-magnifier"></div>
                <input class="top_d_input" placeholder="搜索音乐/作品/风格">
            </div>
        </div>
        <!--轮播图-->
        <div class="banner">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/banner_1.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="images/banner_2.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="images/banner_3.png">
                    </div>

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--简介-->
        <div class="intro">
            <!--姓名框-->
            <div class="intro_box">
                <!--姓名-->
                <div class="intro_box_name">
                    <p>王备</p>
                    <p class="intro_box_name_pinyin">WANG BEI</p>
                </div>
                <div class="intro_attention">
                    <p class="intro_attention_title">关注</p>
                    <p class="iconfont icon-dianzan number">11</p>
                </div>
            </div>
            <!--简介标题-->
            <div class="intro_title">
                简介
            </div>
            <!--简介正文-->
            <div class="intro_small">
                王备,中国著名音乐制作人,【华语音乐家协会】理事,低调的音乐和艺术大师,曾为多部热门影视大片创作原声音乐。代表音乐作品有:《大旗英雄传》、《倚天屠龙记》、《香粉传奇》等。
            </div>
        </div>
        <!--相关视频-->
        <div class="correlation">
            <div class="correlation_top">
                <div class="correlation_top_left">
                    相关视频
                </div>
                <div class="correlation_top_right">
                    更多
                </div>
            </div>
            <!--视频-->
            <div class="correlation_box">
                <div class="correlation_bottom">
                    <!--视频-->
                    <div class="correlation_bottom_img">
                        <img src="images/peke.png">
                    </div>
                    <!--文字-->
                    <div class="correlation_bottom_title">
                        第一个视频
                    </div>
                </div>
                <div class="correlation_bottom">
                    <!--视频-->
                    <div class="correlation_bottom_img">
                        <img src="images/peke.png">
                    </div>
                    <!--文字-->
                    <div class="correlation_bottom_title">
                        第一个视频
                    </div>
                </div>
            </div>
        </div>

        <!------------教育经历------------>
        <div class="big">
            教育经历
        </div>
        <!--内容-->
        <div class="small">
            华语音乐家协会理事
        </div>
        <!--职称-->
        <div class="big">
            职称
        </div>
        <!--职称内容-->
        <div class="small">
            华语音乐家协会理事
        </div>
        <!--称号-->
        <div class="big">
            称号
        </div>
        <!--称号内容-->
        <div class="small">
            低调的音乐和艺术大师
        </div>
        <!--主要成就-->
        <div class="big">
            主要成就
        </div>
        <!--成就内容-->
        <div class="small">

            《大旗英雄传》系列 <br>
            《倚天屠龙记》系列 <br>
            《大明帝国之夜来风雨》系列 <br>
            《烟花三月》系列 <br>
            《香粉传奇》系列 <br>
            《天和局》系列 <br>

        </div>
        <!------------ 动态 ------------>
        <div class="dynamic">
            <div class="dynamic_title">
                动态
            </div>
            <!--演出-->
            <div class="dynamic_item">
                <div class="dynamic_item_title">
                    演出
                </div>
                <div class="dynamic_item_time">
                    时间
                    <div class="dynamic_item_date"></div>
                </div>
            </div>
            <!--演出名称-->
            <div class="dynamic_name">
                <div class="dynamic_name_left">
                    演出名称
                </div>
                <div class="dynamic_name_right">
                    7月12日
                </div>
            </div>
            <div class="dynamic_name">
                <div class="dynamic_name_left">
                    演出名称
                </div>
                <div class="dynamic_name_right">
                    7月12日
                </div>
            </div>
            <!--事件-->
            <div class="dynamic_item">
                <div class="dynamic_item_title">
                    时间
                </div>
                <div class="dynamic_item_time">
                    时间
                    <div class="dynamic_item_date"></div>
                </div>
            </div>
            <!--演出名称-->
            <div class="dynamic_name">
                <div class="dynamic_name_left">
                    演出名称
                </div>
                <div class="dynamic_name_right">
                    7月12日
                </div>
            </div>
            <div class="dynamic_name">
                <div class="dynamic_name_left">
                    演出名称
                </div>
                <div class="dynamic_name_right">
                    7月12日
                </div>
            </div>
        </div>
        <!------------ 作品 ------------>
        <div class="production">
            <div class="production_title">
                作品
            </div>
            <!--类别-->
            <div class="production_category">
                <p>曲目</p>
                <p>书籍</p>
                <p>CD</p>
                <p>DVD</p>
            </div>
            <!--视频盒子-->
            <div class="production_box">
                <div class="production_box_big">
                    <!--图片-->
                    <div class="production_box_big_pic">
                        <img src="images/peke.png">
                    </div>
                    <!--文字-->
                    <div class="production_box_big_title">
                        <p class="title_big">第一个视频</p>
                        <p class="title_small">似水柔情歌词施天怡 制词爱无常 人相恋 无可...</p>
                    </div>
                </div>
                <div class="production_box_big">
                    <!--图片-->
                    <div class="production_box_big_pic">
                        <img src="images/peke.png">
                    </div>
                    <!--文字-->
                    <div class="production_box_big_title">
                        <p class="title_big">第一个视频</p>
                        <p class="title_small">似水柔情歌词施天怡 制词爱无常 人相恋 无可...</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
    <script src="js/swiper.js"> </script>
<script>
    var swiper = new Swiper('.swiper-container',{

        loop: true, // 循环模式选项
        // autoplay: {
        //     delay: 1000,
        //     disableOnInteraction: false,
        // },

        pagination: {
            el: '.swiper-pagination',
        },
    });
</script>
</html>