spxq.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频详情</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <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/spxq.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_bamhpf0xfl8.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;
        }

        .f_size{
            font-weight: normal;
            font-size: 0.18rem;
        }
        .icon-xiugai{
            margin-left: 0.15rem;
            font-size: 0.3rem;
            color: #999999;
            display: flex;
            font-weight: bold;
            align-items: center;
        }
        .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;
        }
        .color_black{
            color: black;
        }
        .margin_t{
            margin-top: 0.1rem;
        }

        /*底部菜单*/
        .font_s{
            font-size: 0.4rem;
            color: #A61010;
        }
        .icon-bilibilidonghua{
            font-size: 0.8rem;
        }
        .share_color{
            color: #999999;
            position: relative;
        }
        .icon-weibo-copy{
            display: flex;
        }
        .size_icon{
            font-size: 0.34rem;
        }
        .icon-shangsanjiao{
            position: absolute;
            color: #fff;
            /*border:1px solid #f5f5f5;*/
            right: 0;
            top: -0.2rem;
            /*box-shadow: 0 0 0.1rem 0.01rem rgba(0, 0, 0, 0.08);*/
        }
        .bottom_icon{
            font-size: 0.16rem;
        }
        .icon-weixin{
            font-size: 0.4rem;
        }
        .icon-NGlianshu{
            font-size: 0.38rem;
        }
        .red_color{
            color: #A61010;
        }
    </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">
        <img src="images/banner_5.png">
    </div>

    <div class="items">
        <div class="item">
            <div class="item_pic">
                <img src="images/banner_1.png">
            </div>
            <div class="item_text">
                少数派的音乐不少数派的音乐不少数派的音乐不
            </div>
        </div>
        <div class="item">
            <div class="item_pic">
                <img src="images/banner_1.png">
            </div>
            <div class="item_text">
                少数派的音乐不少数派的音乐不少数派的音乐不
            </div>
        </div>
        <div class="item">
            <div class="item_pic">
                <img src="images/banner_1.png">
            </div>
            <div class="item_text">
                少数派的音乐不少数派的音乐不少数派的音乐不
            </div>
        </div>
        <div class="item">
            <div class="item_pic">
                <img src="images/banner_1.png">
            </div>
            <div class="item_text">
                少数派的音乐不少数派的音乐不少数派的音乐不
            </div>
        </div>
        <div class="item">
            <div class="item_pic">
                <img src="images/banner_1.png">
            </div>
            <div class="item_text">
                少数派的音乐不少数派的音乐不少数派的音乐不
            </div>
        </div>
    </div>

    <div class="mid">
        <!--标题-->
        <div class="mid_title">
            少一点抱怨，多一点积极
        </div>
        <!--信息栏-->
        <div class="mid_infor">
            <div class="mid_infor_left">
                <div class="mid_infor_left_pic">
                    <img src="images/banner_1.png">
                </div>
                <div class="mid_infor_left_text">
                    哪里来的猴子
                </div>
            </div>
            <div class="mid_infor_right">
                2018年12月31日
            </div>
        </div>
        <!--文章内容-->
        <div class="mid_text">

                有的人生活光彩夺目，有的人生活布满荆棘。
            <br>
            <br>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢?
            <br>
            <br>很多时候，我们更多的是站在自己的一个渺小的角落，思考着我们所处的问题，而忽略了大的环境所能赐予我们的能量。
            <br>
            <br>生活中，我  们可能基础环境过于薄弱，导致我们的生活经历了辛酸，往往就会羡慕和想要我们所不能及的生活，而忽略了我们所拥有的美好;某些人，会在困苦中涅重生，改变自己被动的困境;而有些人，则更多的是抱怨、是颓废，得到的仅仅只能是越来越困苦的生活，越来越被动的人生，自己也变得失落，迷茫。
            <br>
            <br>其实我们有没有想过，我们今天的生活，自己再多的抱怨又有什么用呢?抱怨了，生活变好了嘛?是否通过抱怨实现了自己想要的生活呢?答案肯定是没有的，生活还是一成不变的，并不会有所改变，改变的只是个人的心态，永远是生活在悲观之中，所以，为什么还要继续去抱怨呢?
            <br>
            <br>工作中，我们难免会遇到一些棘手的事情，而不管是大公司还是小公司，不管是什么岗位总会有那么些人，喜欢将烦死了、急死了、麻烦死了等一些词汇挂在嘴边。
            <br>
            <br>这个对于刚刚参加工作的小白来说很正常，但是要及时

        </div>
        <!--图片-->
        <div class="mid_pic">
            <img src="images/text.png">
        </div>
        <!--文章内容-->
        <div class="mid_text">

            有的人生活光彩夺目，有的人生活布满荆棘。
            <br>
            <br>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢?
            <br>
            <br>很多时候，我们更多的是站在自己的一个渺小的角落，思考着我们所处的问题，而忽略了大的环境所能赐予我们的能量。
            <br>


        </div>
        <!--引用人物-->
        <div class="mid_people">
            <div class="mid_people_title">
                引用人物
            </div>
            <div class="mid_people_name">
                陈其钢   叶小钢
            </div>
        </div>
        <!--引用作品-->
        <div class="mid_people">
            <div class="mid_people_title">
                引用人物
            </div>
            <div class="mid_people_name">
                《中国音乐史》   《History of Arts》    蝶恋花
            </div>
        </div>
    </div>

    <div class="share">
        <div class="share_items">
            <div class="share_item">艺术家姓名</div>
            <div class="share_item">长笛</div>
            <div class="share_item">音乐风格</div>
            <div class="iconfont icon-xinaixin share_color">
                <span class="share_size">1235</span>
            </div>
            <div class="iconfont icon-fenxiang share_color">
                <div class="share_box" style="display: none;">

                    <!--分享内容-->
                    <div class="share_function">
                        <div class="share_function_item MicrBlog">


                            <div class="iconfont icon-weibo-copy size_icon"></div>
                            <p>微博</p>
                        </div>
                        <div class="share_function_item WeChat">
                            <div class="iconfont icon-weixin size_icon"></div>
                            <p>微信</p>
                        </div>
                        <div class="share_function_item Twitter">
                            <div class="iconfont icon-tuite size_icon"></div>
                            <p>推特</p>
                        </div>
                        <div class="share_function_item FaceBook">
                            <div class="iconfont icon-NGlianshu size_icon"></div>
                            <p>脸书</p>


                        </div>

                    </div>
                    <!--上三角-->
                    <div class="iconfont icon-shangsanjiao"></div>


                </div>
            </div>
        </div>
    </div>

    <!--信息栏目-->
    <div class="message_text">
        <textarea type="text"></textarea>
    </div>

    <div class="sub_box">
        <div ></div>
        <div class="message_sub">
            发送
        </div>
    </div>

    <!--评论-->
    <div class="comment">
        <div class="comment_title">
            评论(1256)
        </div>
        <div class="comment_item">
            <div class="comment_item_left">
                <img src="images/1.png">
            </div>
            <div class="comment_item_right">
                <div class="comment_item_right_name">
                    魔力怪
                </div>
                <div class="comment_item_right_text">

                    <p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。
                    <p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p>

                </div>
                <!--时间日期-->
                <div class="comment_item_bottom">
                    <div class="comment_item_bottom_left">
                        2018年12月31日
                    </div>
                    <div class="comment_item_bottom_right">
                        <div class="comment_item_bottom_right_item">举报</div>
                        <div class="comment_item_bottom_right_item delect">删除</div>
                        <div class="iconfont icon-dianzan bottom_icon ">
                            <span class="num_1">222</span>
                        </div>
                        <div class="iconfont icon-xiaoxi bottom_icon"></div>
                    </div>

                </div>

                <div class="reply_box">
                    <!--回复内容-->
                    <div class="comment_reply">

                        <div class="comment_item_left pic_small">
                            <img src="images/1.png">
                        </div>
                        <div class="comment_item_right">
                            <div class="comment_item_right_name">
                                魔力怪
                            </div>
                            <div class="comment_item_right_text">

                                <p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。
                                <p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p>

                            </div>

                </div>
            </div>
                    <!--时间日期-->
                    <div class="comment_item_bottom margin_to">
                        <div class="comment_item_bottom_left">
                            2018年12月31日
                        </div>
                        <div class="comment_item_bottom_right">
                            <div class="comment_item_bottom_right_item">举报</div>
                            <div class="comment_item_bottom_right_item delect">删除</div>
                            <div class="iconfont icon-dianzan bottom_icon">
                                <span class="num_1">222</span>
                            </div>
                            <div class="iconfont icon-xiaoxi bottom_icon"></div>
                        </div>

                    </div>
                </div>
    </div>
        </div>
    </div>

    <!--删除评论提示-->
    <div class="delect_comment" style="display: none;">
        <div class="delect_comment_box">
            <div class="delect_top">您确定要删除吗?</div>
            <div class="delect_bottom">
                <div class="delect_bottom_left">确定</div>
                <div class="delect_bottom_right">取消</div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $('.icon-fenxiang').click(function () {
        $('.share_box').slideToggle();
    })
    //分享微博
    $('.MicrBlog').click(function () {
        window.location.href = ''
    })
    //分享微信
    $('.WeChat').click(function () {
        window.location.href = ''
    })
    //分享推特
    $('.Twitter').click(function () {
        window.location.href = ''
    })
    //分享脸书
    $('.FaceBook').click(function () {
        window.location.href = ''
    })

    // 点击关注
    var num=$(".share_size").html();
    num=Number(num);
    $('.icon-xinaixin').click(function () {
        if ($(this).hasClass("red_color")){
            $(this).removeClass("red_color");
            num=num-1
        } else
        {
            $(this).addClass("red_color")
            num=num+1
        }

        $(".share_size").html(num)

    })

    //评论区点赞
    $('.icon-dianzan').click(function () {

        var num_1 = $(this).children(".num_1").html();
        console.log(num_1)
        num_1 = Number(num_1);
        if ($(this).hasClass("red_color")){
            $(this).removeClass("red_color");
            num_1 = num_1-1
        }else{
            $(this).addClass("red_color")
            num_1 = num_1 + 1
        }
        $(this).children(".num_1").html(num_1)
    })

    //评论区删除

    $('.delect').click(function () {

        $('.delect_comment').css('display','flex')
    })

    //取消删除
    $('.delect_bottom_right').click(function () {
        $('.delect_comment').css('display','none')
    })

</script>
</html>