week5 0.2

Posted 2021-01-01 poeticaljustice

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了week5 0.2相关的知识，希望对你有一定的参考价值。

技术分享图片

我们修改了下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: 100%;
}

.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: 0;
    min-width: 100%;
    max-height: 250px;
    object-fit: cover;
}