<template>
    <div class="ask-page">
        <div class="left">
            <div class="left-title">
                <img src="./assets/icon01.png" alt="">
                <div class="tit">新闻资讯</div>
                <div class="more" @click="handleToMoreNews">更多 +</div>
            </div>
            <div class="left-main">
                <div v-for="item in leftList" :key="item.id" class="main-item">
                    <img :src="item.image" alt="">
                    <div class="item-content">
                        <div class="title">{{item.title}}</div>
                        <div class="content">{{item.content}}</div>
                        <div class="time">{{item.time}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="right-title">
                <img src="./assets/icon02.png" alt="">
                <div class="tit">社交媒体</div>
            </div>
            <div class="right-main">
                <div class="trump">
                    <img src="./assets/title01.png" alt="">
                    <div class="trump-main">
                        <div class="cl1">{{ rightList[0].name }}</div>
                        <div class="cl2">{{ rightList[0].content }}</div>
                        <div class="cl3">{{ rightList[0].time }}</div>
                    </div>
                </div>
                <div class="mask">
                    <img src="./assets/title02.png" alt="">
                    <div class="mask-main">
                        <div class="cl1">{{ rightList[1].name }}</div>
                        <div class="cl2">{{ rightList[1].content }}</div>
                        <div class="cl3">{{ rightList[1].time }}</div>
                    </div>
                </div>
                <div class="malaby">
                    <img src="./assets/title03.png" alt="">
                    <div class="malaby-main">
                        <div class="cl1">{{ rightList[2].name }}</div>
                        <div class="cl2">{{ rightList[2].content }}</div>
                        <div class="cl3">{{ rightList[2].time }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import router from "@/router"
import image01 from './assets/image01.png'
import image02 from './assets/image02.png'
import image03 from './assets/image03.png'
import image04 from './assets/image04.png'
import image05 from './assets/image05.png'

import title01 from './assets/title01.png'
import title02 from './assets/title02.png'
import title03 from './assets/title03.png'


const leftList = ref([
    {   
        id:1,
        title:'美国智库激辩人工智能监管路径',
        content:'各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析...',
        time:'11-4 · 华盛顿邮报',
        image:image01
    },
    {   
        id:2,
        title:'布鲁金斯学会称美国低估中国在“印太”战略',
        content:'分析认为，当美国注意力被其他地区分散时，中国通过外交、发展和防务多管齐下，系统性...',
        time:'11-4 · 纽约时报',
        image:image02
    },
    {   
        id:3,
        title:'五角大楼指令引发智库与国防部“脱钩”震荡',
        content:'美国国防部长下令全面暂停部内人员参与所有智库活动，标志着传统的“旋转门”关系发生...',
        time:'11-3 · 洛杉矶时报',
        image:image03
    },
    {   
        id:4,
        title:'卡内基基金会警告冲突中AI宣传战的风险',
        content:'分析指出，在伊朗与以色列的冲突中，人工智能生成的虚假信息泛滥，深度破坏了信息生态...',
        time:'11-3 · 今日美国',
        image:image04
    },
    {   
        id:5,
        title:'CSIS建议美国建立跨机构AI基准测试体系',
        content:'指出美国《人工智能行动计划》忽视了基准测试这一关键环节，建议由国家标准与技术研究...',
        time:'11-2 ·  ​福克斯新闻网',
        image:image05
    }
])

const rightList = ref([
    {
        id:1,
        name:'唐纳德·特朗普',
        content:'埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
        time:'15:23 · 发布于真实社交',
        title:title01
    },
    {
        id:2,
        name:'埃隆·马斯克',
        content:'如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
        time:'14:49 · 发布于X',
        title:title02
    },
    {
        id:3,
        name:'塞巴斯蒂安·马拉比',
        content:'提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
        time:'11:05 · 发布于X',
        title:title03
    }
])

// 查看更多新闻资讯
const handleToMoreNews = () => {
	const route = router.resolve("/newsBrief");
	window.open(route.href, "_blank");
};

</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.ask-page {
    width: 1600px;
    height: 450px;
    display: flex;
	justify-content: space-between;
    .left {
        width: 792px;
        height: 450px;
        margin-right: 16px;
        border-radius: 10px;
        border: 1px solid rgb(234, 236, 238);
        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        background-color: #fff;
        .left-title {
            width: 792px;
            height: 48px;
            border-bottom: 1px solid rgb(234, 236, 238);
            position: relative;
            img {
                width: 19px;
                height: 19px;
                position: absolute;
                top: 16px;
                left: 21px;
            }
            .tit {
                margin-left: 60px;
                width: 80px;
                height: 48px;
                padding: 11px 0;
                font-size: 20px;
                font-weight: 700;
                font-family: 'Microsoft YaHei';
                line-height: 26px;
                color: rgb(5, 95, 194);
            }
            .more {
                width: 49px;
                height: 24px;
                font-size: 16px;
                font-weight: 400;
                font-family: 'Microsoft YaHei';
                line-height: 24px;
                color: rgb(5, 95, 194);
                position: absolute;
                top: 12px;
                right: 27px;
                cursor: pointer;
            }
        }
        .left-main {
            width: 792px;
            height: 402px;
            padding: 20px 22px 21px 21px;
            .main-item {
                width: 749px;
                height: 64px;
                display: flex;
                border-bottom: 1px solid rgba(240, 242, 244, 1);
                margin-bottom: 14px;
                img {
                    width: 72px;
                    height: 48px;
                    margin-right: 20px;
                    cursor: pointer;
                }
                .item-content {
                    width: 657px;
                    height: 50px;
                    position: relative;
                    .title {
                        font-size: 16px;
                        font-weight: 700;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                        cursor: pointer;
                    }
                    .content {
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                        cursor: pointer;
                    }
                    .time {
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        font-size: 14px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 22px;
                        color: rgb(95, 101, 108);
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .right {
        width: 792px;
        height: 450px;
        border-radius: 10px;
        border: 1px solid rgb(234, 236, 238);
        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        background-color: #fff;
        .right-title {
            width: 792px;
            height: 48px;
            border-bottom: 1px solid rgb(234, 236, 238);
            position: relative;
            img {
                width: 19px;
                height: 19px;
                position: absolute;
                top: 16px;
                left: 21px;
            }
            .tit {
                margin-left: 60px;
                width: 80px;
                height: 48px;
                padding: 11px 0;
                font-size: 20px;
                font-weight: 700;
                font-family: 'Microsoft YaHei';
                line-height: 26px;
                color: rgb(5, 95, 194);
            }
            .more {
                width: 49px;
                height: 24px;
                font-size: 16px;
                font-weight: 400;
                font-family: 'Microsoft YaHei';
                line-height: 24px;
                color: rgb(5, 95, 194);
                position: absolute;
                top: 12px;
                right: 27px;
                cursor: pointer;
            }
        }
        .right-main {
            width: 792px;
            height: 402px;
            padding: 23px 30px 25px 21px;
            .trump {
                width: 740px;
                height: 148px;
                margin-bottom: 16px;
                display: flex;
                img {
                    width: 36px;
                    height: 36px;
                    margin-right: 8.5px;
                }
                .trump-main {
                    width: 695.6px;
                    height: 148px;
                    background-image: url('./assets/title01bg.png');
                    padding: 11px 14px 12px 22.5px;
                    background-size: cover;
                    position: relative;
                    .cl1 {
                        font-size: 16px;
                        font-weight: 700;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                        margin-bottom: 5px;
                    }
                    .cl2 {
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                    }
                    .cl3 {
                        position: absolute;
                        top: 11px;
                        right: 14px;
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 30px;
                        color: rgb(95, 101, 108);
                    }
                }
            }
            .mask {
                width: 740px;
                height: 76px;
                margin-bottom: 16px;
                display: flex;
                img {
                    width: 36px;
                    height: 36px;
                    margin-right: 8.5px;
                }
                .mask-main {
                    width: 695.6px;
                    height: 76px;
                    background-image: url('./assets/title02bg.png');
                    padding: 11px 14px 12px 22.5px;
                    background-size: cover;
                    position: relative;
                    .cl1 {
                        font-size: 16px;
                        font-weight: 700;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                        margin-bottom: 5px;
                    }
                    .cl2 {
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                    }
                    .cl3 {
                        position: absolute;
                        top: 11px;
                        right: 14px;
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 30px;
                        color: rgb(95, 101, 108);
                    }
                }
            }
            .malaby {
                width: 740px;
                height: 98px;
                margin-bottom: 16px;
                display: flex;
                img {
                    width: 36px;
                    height: 36px;
                    margin-right: 8.5px;
                }
                .malaby-main {
                    width: 695.6px;
                    height: 98px;
                    background-image: url('./assets/title03bg.png');
                    padding: 11px 14px 12px 22.5px;
                    background-size: cover;
                    position: relative;
                    .cl1 {
                        font-size: 16px;
                        font-weight: 700;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                        margin-bottom: 5px;
                    }
                    .cl2 {
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                    }
                    .cl3 {
                        position: absolute;
                        top: 11px;
                        right: 14px;
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 30px;
                        color: rgb(95, 101, 108);
                    }
                }
            }
        }
    }
}
</style>