<template>
    <ul>
        <li class="list3" v-for="(subject,index) in list3" :key="index">
            <router-link to="" class="middle_before">
                <img class="middle w30" v-lazy="subject.photopath" alt="">
                <div class="cont middle w65 pdT10 pdB10">
                    <h4 class="row2">{{subject.subname}}</h4>
                    <p class="row2">
                        {{subject.synopsis.length > 65 ? subject.synopsis.substring(0,65) +'...' : subject.synopsis}}
                    </p>
                </div>
            </router-link>
        </li>
    </ul>
</template>
<script>
    export default {
        data() {
            return {
                list3: [
                    {
                        "id": "27",
                        "sjno": "VOL▪19",
                        "subname": "人人都玩，不玩才怪！",
                        "synopsis": "左游小哥最近夜观天象，发现下面这些游戏可好玩了！\r\n（此条五毛！括号内删除）\r\n\r\n除了吃鸡，有空嘛\r\n可以和科比一起打打篮球；\r\n可以和比尔·雷泽一起打通水下八关；\r\n实在想吃鸡了~CF也是很不错了；\r\n毕竟三亿手机的枪战梦想！\r\n\r\n所以说这些游戏，人人都玩，不玩才怪。",
                        "photopath": "http://theme.cdn.betophall.com//data/subject/index/201712041800142424.jpg",
                        "datetime": "2017-12-04"
                    },
                    {
                        "id": "24",
                        "sjno": "VOL▪17",
                        "subname": "次元·姬战",
                        "synopsis": "肥宅们！出击！\r\n是时候为你们的老婆而战了！\r\n\r\n“我最喜欢亚斯娜、雷姆、御坂美琴、土间埋、芽衣、德丽莎、洛可可、左游猫娘了！”\r\n——最近痴迷于二次元手游的污鸭大哥如是说。",
                        "photopath": "http://theme.cdn.betophall.com//data/subject/index/201709181026049495.jpg",
                        "datetime": "2017-10-25"
                    },
                    {
                        "id": "23",
                        "sjno": "VOL▪16",
                        "subname": "原生适配手柄游戏推荐",
                        "synopsis": "以下游戏原生适配手柄，无需激活，即连即玩。\r\n具体连接手柄方法请点击游戏，查看游戏介绍。",
                        "photopath": "http://theme.cdn.betophall.com//data/subject/index/201709291641373857.png",
                        "datetime": "2017-10-25"
                    },
                    {
                        "id": "18",
                        "sjno": "VOL▪13",
                        "subname": "鸡年游戏大合集",
                        "synopsis": "还有一周时间就要过年了，是不是觉得特别开心？在这里，小编给大家推荐各类劲爆单机游戏，让大家开心度过春节！",
                        "photopath": "http://theme.cdn.betophall.com//data/game/subject/20170502154639698.png",
                        "datetime": "2017-10-25"
                    },
                    {
                        "id": "14",
                        "sjno": "VOL▪9",
                        "subname": "自由飞，随便射！！",
                        "synopsis": "不拿起枪射击你永远都不知道你操作能多灵活，不做上飞机战斗你永远不知道自己有多勇敢，不穿起铠甲你永远不知道自己有多帅！！",
                        "photopath": "http://theme.cdn.betophall.com//data/game/subject/201705021544485489.png",
                        "datetime": "2017-10-25"
                    },
                    {
                        "id": "13",
                        "sjno": "VOL▪8",
                        "subname": "益智闯关游戏，刺激你的大脑！",
                        "synopsis": "在日渐乏味的都市生活，是否让你的大脑越来越迟钝了？没关系，各类益智闯关游戏等着你来挑战，刺激你的大脑。来吧，激发你的潜能一起解谜吧！",
                        "photopath": "http://theme.cdn.betophall.com//data/game/subject/201705021544362374.png",
                        "datetime": "2017-10-25"
                    },
                    {
                        "id": "16",
                        "sjno": "VOL▪11",
                        "subname": "与时间赛跑！！",
                        "synopsis": "白驹过隙，新的一年又到来了，在旧的一年，你是否觉得时间都不够用？是否觉得珍惜时间是件美好的事？那么，在新的一年，你就应该知道时间的可贵。来吧，新的一年，左游陪你与时间赛跑！",
                        "photopath": "http://theme.cdn.betophall.com//data/game/subject/201705021542574860.png",
                        "datetime": "2017-10-25"
                    }
                ]
            }
        },
        components: {},
        computed: {},
        mounted() {
        }
    }
</script>

<style lang="less" scoped>
    @import url("../../../assets/config.less");

    .list3 {
        //@h: 110px;
        @time: .5s;
        //height: @h;
        margin-bottom: 20px;
        background: #eee;
        font-size: 0;
        border-radius: 10px;
        border: 1px solid #ddd;
        box-sizing: border-box;
        text-align: left;
        transition: all @time;
        overflow: hidden;
        &:hover {
            box-shadow: 0 0px 15px rgba(0, 0, 0, .3);
            background: #fff;
        }
        img {
            height: 100%;
            //          height: 134px;
            //      margin-left: 12px;
            //      margin-right: 29px;
        }
        .middle_before {
            display: block;
            //height: @h;
        }
        .cont {
            /*width: 70%;*/
            //          height: 135px;
            padding-right: 20px;
            padding-left: 20px;
            //          border-right: 1px solid #ddd;
            text-align: left;
            text-indent: 0;
            overflow: hidden;
        }

        h4 {
            //      margin-top: 28px;
            margin-bottom: 10px;
            color: #000;
            font-size: 18px;
        }
        p {
            font-size: 14px;
            color: #666;
            line-height: 20px;
        }
    }

</style>
