master

分支 (1)

管理

管理

master

my-love
/
info.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
    <link rel="stylesheet" href="./style/style.css">
    <style>
        .top_bar{
            width: 100%;
            height: 80rem;
            background-color: #DD3635;
            padding-left: 20rem;
            padding-right: 20rem;
            display: flex;
            align-items: center;
        }

        .arrow_left{
            display: inline-flex;
            color: #FFFFFF;
            font-size: 32rem;
            align-items: center;
        }

        .arrow_left>.arrow{
            width: 30rem;
            height: 30rem;
            border-left: 6rem solid #fff;
            border-bottom: 6rem solid #fff;
            transform: rotate(45deg);
            margin-right: 10rem;
        }

        .info{
            padding-left: 20rem;
            padding-right: 20rem;
            padding-top: 20rem;
        }

        .info>.title{
            color: #222222;
            font-size: 48rem;
            font-weight: bold;
        }

        .source{
            display: flex;
            align-items: flex-end;
            height: 50rem;
        }

        .source>div:first-child{
            color: #222222;
            font-size: 32rem;
            margin-right: 20rem;
        }

        .source>div:last-child{
            color: #A5A5A5;
            font-size: 28rem;
        }

        .info{
            padding-bottom: 30rem;
        }

        .info>.context{
            margin-top: 50rem;
            color: #222222;
            font-size: 32rem;
            line-height: 50rem;
        }
        .info>.context img{
            max-width: 100%;
        }

        .bottom_bar{
            padding-left: 20rem;
            padding-right: 20rem;
            height: 80rem;
            border-top: 1px solid #A5A5A5;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .collect{
            color: #DD3635;
            font-size: 24rem;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

    </style>
</head>
<body>
    <div class="top_bar">
        <div class="arrow_left">
            <span class="arrow"></span>
            <span>返回</span>
        </div>
    </div>

    <div class="info">
        <div class="title">
            美国“最高制裁”来了，伊朗央行：黔驴技穷黔驴技穷？
        </div>

        <div class="source">
            <div>来源：凤凰网</div>
            <div>09-21 09:00</div>
        </div>


        <div class="context">
            上周，沙特阿拉伯的石油设施遭到袭击，美国官员将此归咎于伊朗。
            当地时间20日晚，美国宣布对伊朗兰实施新一轮制裁，
            <img src="https://img.js.design/assets/img/6349441f41b902bd990e0d6c.png">
            制裁对象包括伊朗央行和伊朗两大主要的国家财政机构。美国总统特朗普宣称，
            <img src="./images/test.bmp" />
            这是美国对另一个国家实施的有史以来最严厉的制裁。但他表示不打算进行军事打击，
            <img src="./images/search.png" />
            称克制是实力的表现。伊朗中央银行负责人对此回应道，美国对于伊朗的制裁已经“黔驴技穷”，
            并称伊朗的金融贸易正在通过美国无法制裁的方式来实现。</div>
    </div>
    <div class="bottom_bar">
        <div class="collect">
            ❤
            <span>取消收藏</span>
        </div>
    </div>
</body>
</html>