week5 0.2 client

2022-12-07 13:58:13

我们修改了下logo

自己找的图片放在public文件下

页面如下我们准备做成这样

每一个component对应一个css样式不需要统一的css

这样容易找到自己的css并修改

下面我们修改我们的css

改成

就是把logo居中

为什么是classname？而不是class？

我们看看我们的页面啥用

npm start

重启一下

额

我们干脆先放src目录下吧先

显示倒是显示了但是为啥这么大啊

css完全没起作用啊

干脆把他们都放在app文件夹下吧

CSS里面可以啥都没有但是你一定要要这个CSS文件这样才能通过编译

下面就是NewsPanel的内容

几个函数

其中digest会再数据挖掘那块写先写上

现在我们是写死的以后会从后端拿news 现在只是为了测试我们UI工作不工作

我们完成了黄匡的NewsPannel

那么我们开始做 NewsCard部分

import React from 'react';

import './NewsCard.css';

class NewsCard extends React.Component {

  redirectToUrl(url) {

    window.open(url, '_blank');

  }

  render() {

    return (

      <div className="news-container" onClick={() => this.redirectToUrl(this.props.news.url)}>

        <div className='row'>

          <div className='col s4 fill'>

            <img src={this.props.news.urlToImage} alt='news'/>

          </div>

          <div className="col s8">

            <div className="news-intro-col">

              <div className="news-intro-panel">

                <h4>{this.props.news.title}</h4>

                <div className="news-description">

                  <p>{this.props.news.description}</p>

                  <div>

                    {this.props.news.source != null && <div className='chip light-blue news-chip'>{this.props.news.source}</div>}

                    {this.props.news.reason != null && <div className='chip light-green news-chip'>{this.props.news.reason}</div>}

                    {this.props.news.time != null && <div className='chip amber news-chip'>{this.props.news.time}</div>}

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    );

  }

}

export default NewsCard;

NewsCard.js

.news-intro-col {

  display: inline-flex;

  color: black;

  height: %;

}

.news-intro-panel {

  margin: auto 5px;

  text-align: left;

}

.news-description {

  text-align: left;

}

.news-description p {

  font-size: 18px;

}

.news-chip {

  font-size: 18px;

}

.fill {

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}

.fill img {

    padding-left: 20px;

    padding-right: 20px;

    flex-shrink: ;

    min-width: %;

    max-height: 250px;

    object-fit: cover;

}