<template>
    <div class="ddkz">
        <div class="tool">
            <img :src="tool1" alt="">
            <img :src="tool2" alt="">
            <img :src="tool3" alt="">
            <img :src="tool4" alt="">
            <img :src="tool5" alt="">
        </div>
        <transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft"
            leave-active-class="animate__bounceOutLeft" mode="out-in">
            <div class="ddkz-list" v-if="isList" key="1">
                <div class="everyDayNews" v-for="item in newsList">
                    <div class="everyDayTitle" @click="showCards(false)">
                        <div class="circle-light"></div>&emsp;
                        <span v-text="item.date"></span>&emsp;
                        <span v-text="item.week"></span>
                    </div>
                    <div class="everyDayNew">
                        <div class="everyTemplate">
                            <div class="everyDayNewCard" v-for="item1 in item.news">
                                <div class="everyDayNewCardTitle" v-text="item1.title"></div>
                                <div class="everyDayNewCardInfo">
                                    <span v-text="item1.newsDate"></span>&emsp;
                                    <span v-text="item1.location"></span>&emsp;
                                    来源：<span class="newsSource" v-text="item1.source"></span>
                                </div>
                                <div class="everyDayNewCardContent" v-text="item1.content"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ddkz-pass" v-else="isList" key="2">
                <img class="goBack" :src="goBack" alt="" @click="showCards(true)">
                <div class="ddkz-topic">
                    <div class="topic-date" v-text="topic.date"></div>
                    <div class="topic-subject" v-text="topic.subject"></div>
                    <div class="topic-stage" v-text="topic.stage"></div>
                    <div class="topic-bg"></div>
                </div>
                <div class="ddkz-left">
                    <div :id="'newsInfoLeft' + index" class="newsInfo" v-for="(item, index) in leftInfo">
                        <div class="ddkz-date" v-text="item.date"></div>
                        <div class="ddkz-title" v-text="item.title"></div>
                        <div class="ddkz-text" v-text="item.text"></div>
                    </div>

                </div>
                <div class="ddkz-right">
                    <div :id="'newsInfoRight' + index" class="newsInfo" v-for="(item, index) in rightInfo">
                        <div class="ddkz-date" v-text="item.date"></div>
                        <div class="ddkz-title" v-text="item.title"></div>
                        <div class="ddkz-text" v-text="item.text"></div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import tool1 from '../../assets/img/ddkz/tool1.png';
import tool2 from '../../assets/img/ddkz/tool2.png';
import tool3 from '../../assets/img/ddkz/tool3.png';
import tool4 from '../../assets/img/ddkz/tool4.png';
import tool5 from '../../assets/img/ddkz/tool5.png';
import goBack from '../../assets/img/xjs/4.png';
// import VanillaTilt from "vanilla-tilt";
import "animate.css";
export default {
    data() {
        return {
            tool1: tool1,
            tool2: tool2,
            tool3: tool3,
            tool4: tool4,
            tool5: tool5,
            goBack: goBack,
            topic: {
                date: '2023年07月23日     星期日',
                subject: 'xxxxxxx话题',
                stage: '阶段一'
            },
            leftInfo: [
                {
                    date: '2023-07-21 18:13:56',
                    title: '日本驻华使馆被扔砖头?外交部回应1',
                    text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                },
                {
                    date: '2023-07-21 18:13:56',
                    title: '日本驻华使馆被扔砖头?外交部回应2',
                    text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                },
                {
                    date: '2023-07-21 18:13:56',
                    title: '日本驻华使馆被扔砖头?外交部回应3',
                    text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                },
                {
                    date: '2023-07-21 18:13:56',
                    title: '日本驻华使馆被扔砖头?外交部回应4',
                    text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                }
            ],
            rightInfo: [
                {
                    date: '2023-07-21 18:13:56',
                    title: '日本驻华使馆被扔砖头?外交部回应',
                    text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                },
                {
                    date: '2023-07-21 18:13:56',
                    title: '日本驻华使馆被扔砖头?外交部回应',
                    text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                },
                {
                    date: '2023-07-21 18:13:56',
                    title: '日本驻华使馆被扔砖头?外交部回应',
                    text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                }
            ],
            newsList: [
                {
                    date: '2023年07月13日',
                    week: '星期四',
                    news: [
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        }
                    ]
                },
                {
                    date: '2023年07月13日',
                    week: '星期四',
                    news: [
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        }
                    ]
                }, {
                    date: '2023年07月13日',
                    week: '星期四',
                    news: [
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        },
                        {
                            title: '日本驻华使馆被扔砖头?外交部回应1',
                            newsDate: '2023年07月13日',
                            location: '山东',
                            source: '澎湃新闻·澎湃号·媒体',
                            content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
                        }
                    ]
                },
            ],
            isList: true
        }
    },
    methods: {
        showCards(value) {
            this.isList = value;
        }
    },
    mounted() {
        // let index = 0;
        // setInterval(() => {
        //     index++;
        //     this.leftInfo.shift();
        //     // debugger
        //     // document.getElementById('newsInfo2').classList = ['newsInfo',index];
        //     // if()
        //     document.getElementById('newsInfo2').style.cssText = 'position:absolute;top: 80px;right: 220px;z-index: 9999;transition-duration:15s;scale:0.8;';
        //     document.getElementById('newsInfo2').id = 'newsInfo1';
        //     document.getElementById('newsInfo1').style.cssText = 'position:absolute;top: 0px;right: 80px;z-index: 9998;transition-duration:15s;scale:0.6;';
        //     document.getElementById('newsInfo1').id = 'newsInfo0';
        //     document.getElementById('newsInfo0').style.cssText = 'position:absolute;top: 160px;right: 456px;z-index: 10000;transition-duration:15s;scale:1;';
        //     document.getElementById('newsInfo0').id = 'newsInfo2';
        //     this.leftInfo.push({
        //         date: '2023-07-21 18:13:56',
        //         title: '日本驻华使馆被扔砖头?外交部回应' + (index + 3),
        //         text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
        //     });
        // }, 2000)
    }
}
</script>



<style lang="scss">
$left-x-start: 0%;
$left-y-start: 0%;
$left-x-end: 50%;
$left-y-end: 50%;

$right-x-start: 0%;
$right-y-start: 0%;
$right-x-end: 50%;
$right-y-end: 50%;

$zIndex-start: 10;
$zIndex-end: 8;

$scale-start: 1;
$scale-end: 0.8;

.ddkz {
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/ddkz/bg1.png);
    background-size: 100% 100%;

    .tool {
        width: 100%;
        height: 60px;
        text-align: right;

        img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }
    }

    .ddkz-pass {
        width: 100%;
        height: calc(93% - 60px);
        position: relative;
        background-image: url(../../assets/img/ddkz/bg2.png);
        background-size: 100% 100%;

        .goBack {
            width: 50px;
            height: 50px;
            position: absolute;
            right: 10px;
        }

        .ddkz-topic {
            width: 500px;
            height: 200px;
            position: absolute;
            top: calc(50% - 47px);
            left: calc(50% - 244px);
            background-image: url(../../assets/img/ddkz/2.png);
            background-size: 100% 100%;
            text-align: center;

            .topic-bg {
                width: 700px;
                height: 200px;
                position: relative;
                top: -27%;
                left: -19%;
                background-image: url(../../assets/img/ddkz/3.png);
                background-size: 100% 100%;
            }

            .topic-date {
                margin-top: 10px;
                font-size: 12px;
                color: #d3d7d8;
                font-weight: 600;
            }

            .topic-subject {
                height: 50px;
                line-height: 60px;
                font-size: 25px;
                font-weight: 600;
            }

            .topic-stage {
                margin-top: 7px;
                font-size: 14px;
                font-weight: 600;
            }
        }

        .ddkz-left {
            width: 50%;
            height: 50%;
            position: absolute;
            bottom: 0px;

            .newsInfo {
                width: 400px;
                height: 200px;
                padding: 30px 20px 20px 20px;
                position: absolute;
                background-image: url(../../assets/img/ddkz/5.png);
                background-size: 100% 100%;

                .ddkz-date {
                    margin-top: 10px;
                    font-weight: 800;
                    font-size: 14px;
                    color: #979797;
                }

                .ddkz-title {
                    margin-top: 10px;
                    font-size: 16px;
                    font-weight: 600;
                    color: white;
                }

                .ddkz-text {
                    margin-top: 10px;
                    font-size: 14px;
                    color: #ddd;
                }
            }



            #newsInfoLeft0 {
                position: absolute;
                bottom: $left-y-start;
                left: $left-x-start;
                scale: $scale-start;
                z-index: $zIndex-start;
                background-image: url(../../assets/img/ddkz/6.png);
                background-size: 100% 100%;
                animation: roate 20s infinite linear;
            }

            @keyframes roate {
                0% {
                    position: absolute;
                    bottom: $left-y-start;
                    left: $left-x-start;
                    z-index: $zIndex-start;
                    scale: $scale-start;
                }

                100% {
                    position: absolute;
                    bottom: $left-y-end;
                    left: $left-x-end;
                    scale: $scale-end;
                    z-index: $zIndex-end;
                }
            }

            #newsInfoLeft1 {
                position: absolute;
                bottom: $left-y-start;
                left: $left-x-start;
                scale: $scale-start;
                z-index: $zIndex-start;
                animation: roate1 20s 5s infinite linear;
            }

            @keyframes roate1 {
                0% {
                    position: absolute;
                    bottom: $left-y-start;
                    left: $left-x-start;
                    z-index: $zIndex-start;
                    scale: $scale-start;
                }


                100% {
                    position: absolute;
                    bottom: $left-y-end;
                    left: $left-x-end;
                    scale: $scale-end;
                    z-index: $zIndex-end;
                }
            }

            #newsInfoLeft2 {
                position: absolute;
                bottom: $left-y-start;
                left: $left-x-start;
                scale: $scale-start;
                z-index: $zIndex-start;
                background-image: url(../../assets/img/ddkz/6.png);
                background-size: 100% 100%;
                animation: roate2 20s 10s infinite linear;
            }

            @keyframes roate2 {
                0% {
                    position: absolute;
                    bottom: $left-y-start;
                    left: $left-x-start;
                    z-index: $zIndex-start;
                    scale: $scale-start;
                }

                100% {
                    position: absolute;
                    bottom: $left-y-end;
                    left: $left-x-end;
                    scale: $scale-end;
                    z-index: $zIndex-end;
                }

            }

            #newsInfoLeft3 {
                position: absolute;
                bottom: $left-y-start;
                left: $left-x-start;
                scale: $scale-start;
                z-index: $zIndex-start;
                background-image: url(../../assets/img/ddkz/6.png);
                background-size: 100% 100%;
                animation: roate3 20s 15s infinite linear;
            }

            @keyframes roate3 {
                0% {
                    position: absolute;
                    bottom: $left-y-start;
                    left: $left-x-start;
                    z-index: $zIndex-start;
                    scale: $scale-start;
                }

                100% {
                    position: absolute;
                    bottom: $left-y-end;
                    left: $left-x-end;
                    scale: $scale-end;
                    z-index: $zIndex-end;
                }

            }

        }

        .ddkz-right {
            width: 50%;
            height: 50%;
            position: absolute;
            bottom: 0px;
            right: 0px;

            .newsInfo {
                width: 400px;
                height: 200px;
                padding: 30px 20px 20px 20px;
                position: absolute;
                background-image: url(../../assets/img/ddkz/4.png);
                background-size: 100% 100%;

                .ddkz-date {
                    margin-top: 10px;
                    font-weight: 800;
                    font-size: 14px;
                    color: #979797;
                }

                .ddkz-title {
                    margin-top: 10px;
                    font-size: 16px;
                    font-weight: 600;
                    color: white;
                }

                .ddkz-text {
                    margin-top: 10px;
                    font-size: 14px;
                    color: #ddd;
                }
            }



            #newsInfoRight0 {
                position: absolute;
                bottom: $right-y-start;
                right: $right-x-start;
                scale: $scale-start;
                z-index: $zIndex-start;
                background-image: url(../../assets/img/ddkz/4.png);
                background-size: 100% 100%;
                animation: roate4 20s infinite linear;
            }

            @keyframes roate4 {
                0% {
                    position: absolute;
                    bottom: $right-y-start;
                    right: $right-x-start;
                    z-index: $zIndex-start;
                    scale: $scale-start;
                }

                100% {
                    position: absolute;
                    bottom: $right-y-end;
                    right: $right-x-end;
                    scale: $scale-end;
                    z-index: $zIndex-end;
                }
            }

            #newsInfoRight1 {
                position: absolute;
                bottom: $right-y-start;
                right: $right-x-start;
                scale: $scale-start;
                z-index: $zIndex-start;
                background-image: url(../../assets/img/ddkz/4.png);
                background-size: 100% 100%;
                animation: roate5 20s 5s infinite linear;

            }

            @keyframes roate5 {
                0% {
                    position: absolute;
                    bottom: $right-y-start;
                    right: $right-x-start;
                    z-index: $zIndex-start;
                    scale: $scale-start;
                }

                100% {
                    position: absolute;
                    bottom: $right-y-end;
                    right: $right-x-end;
                    scale: $scale-end;
                    z-index: $zIndex-end;
                }
            }

            #newsInfoRight2 {
                position: absolute;
                bottom: $right-y-start;
                right: $right-x-start;
                scale: $scale-start;
                z-index: $zIndex-start;
                background-image: url(../../assets/img/ddkz/4.png);
                background-size: 100% 100%;
                animation: roate6 20s 10s infinite linear;
            }

            @keyframes roate6 {
                0% {
                    position: absolute;
                    bottom: $right-y-start;
                    right: $right-x-start;
                    z-index: $zIndex-start;
                    scale: $scale-start;
                }

                100% {
                    position: absolute;
                    bottom: $right-y-end;
                    right: $right-x-end;
                    scale: $scale-end;
                    z-index: $zIndex-end;
                }
            }

            #newsInfoRight3 {
                position: absolute;
                bottom: $right-y-start;
                right: $right-x-start;
                scale: $scale-start;
                z-index: $zIndex-start;
                background-image: url(../../assets/img/ddkz/4.png);
                background-size: 100% 100%;
                animation: roate7 20s 15s infinite linear;
            }

            @keyframes roate7 {
                0% {
                    position: absolute;
                    bottom: $right-y-start;
                    right: $right-x-start;
                    z-index: $zIndex-start;
                    scale: $scale-start;
                }

                100% {
                    position: absolute;
                    bottom: $right-y-end;
                    right: $right-x-end;
                    scale: $scale-end;
                    z-index: $zIndex-end;
                }
            }
        }
    }



    .ddkz-list {
        width: 100%;
        height: calc(93% - 60px);
        padding: 50px 40px;
        box-sizing: border-box;
        background-image: url(../../assets/img/ddkz/bg3.png);
        background-size: cover;
        overflow-y: auto;

        .everyDayNews {
            width: 100%;
            height: 230px;
            margin-bottom: 20px;
            padding: 6px 0px;
            box-sizing: border-box;
            background-image: url(../../assets/img/ddkz/bg5.png);
            background-size: 100% 100%;


            .everyDayTitle {
                width: 100%;
                height: 30px;
                color: white;
                font-size: 20px;
                font-weight: 600;
                cursor: pointer;

                .circle-light {
                    width: 15px;
                    height: 15px;
                    float: left;
                    margin-top: 7.5px;
                    border-radius: 50%;
                    background: white;
                    box-shadow: 0px 0px 20px 6px white;
                }
            }

            .everyDayNew {
                width: 100%;
                height: 160px;
                padding: 0px 10px;
                box-sizing: border-box;
                overflow-x: auto;
                overflow-y: hidden;

                .everyTemplate {
                    width: 100%;
                    height: 100%;
                    padding-bottom: 10px;
                    box-sizing: border-box;
                    overflow-x: scroll;
                    overflow-y: hidden;
                    display: -webkit-box;
                }

                .everyDayNewCard {
                    width: calc(33% - 28px);
                    height: calc(100% - 20px);
                    float: left;
                    margin-top: 20px;
                    margin-left: 25px;
                    padding: 15px 15px;
                    box-sizing: border-box;
                    background-image: url(../../assets/img/ddkz/bg4.png);
                    background-size: 100% 100%;

                    .everyDayNewCardTitle {
                        width: 100%;
                        height: 24px;
                        font-size: 18px;
                        font-weight: 600;
                    }

                    .everyDayNewCardInfo {
                        width: 100%;
                        height: 20px;
                        margin-top: 5px;
                        font-size: 12px;
                        font-weight: 600;
                        color: #7b7b7bdd;

                        .newsSource {
                            color: red;
                        }
                    }

                    .everyDayNewCardContent {
                        width: 100%;
                        height: calc(100% - 58px);
                        margin-top: 5px;
                        font-size: 12px;
                        font-weight: 600;
                        color: #a19d9d;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        /* 控制显示的行数 */
                        overflow: hidden;
                    }
                }
            }
        }
    }
}
</style>