【React工作记录六十六】ant design Row col样式修改

简介: 【React工作记录六十六】ant design Row col样式修改

导语

ant design Row col样式修改


编辑

<Card>
          <Row gutter={24}>
            <Col span={3}>
              <DefaultImg
                src={activeUpdateData.imgLogo}
                type="headImg"
                style={{ width: 150, height: 150, borderRadius: '50%', marginRight: 10 }}
              />
            </Col>
            <Col span={21} style={{ color: '#333333', fontSize: 16 }}>
              <Row>
                <span
                  style={{
                    fontSize: 26,
                  }}
                >
                  供应商名称: {activeUpdateData.name}
                </span>
                <span>
                  <a onclick={() => this.copyTitle(activeUpdateData.name)}>复制</a>
                </span>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Col span={6}>
                  <span>申请人:{activeUpdateData.createByName}</span>
                </Col>
                <Col span={10}>
                  <span>
                    加入时间:{moment(activeUpdateData.gmtCreate).format('YY-MM-DD HH:mm:ss')}
                  </span>
                </Col>
                <Col span={6}>
                  {activeUpdateData.vendorBelong && (
                    <span>
                      客服:
                      <a>
                        <span>{activeUpdateData.vendorBelong.belongEmployeeName}</span>
                      </a>
                    </span>
                  )}
                </Col>
                <Col span={2}>
                  <span style={{ color: '#ccc', float: 'right' }}>状态</span>
                </Col>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Col span={6}>
                  <span>供应商类型: {activeUpdateData.vendorTypeName}</span>
                </Col>
                <Col span={10}>
                  <span>
                    {/* 合作公司: {activeUpdateData.companyName} */}
                    合作公司: 苏州共商网络技术有限公司
                  </span>
                </Col>
                <Col span={8}>
                  <span
                    style={{
                      float: 'right',
                      fontSize: 18,
                    }}
                  >
                    {activeUpdateData.statusName}
                  </span>
                </Col>
              </Row>
            </Col>
          </Row>

运行结果

image.png

相关文章
|
3月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
设计模式 缓存 前端开发
React中样式解决方案有哪些?
本文首发于微信公众号“前端徐徐”,探讨了React开发中的样式管理方法,包括内联样式、常规CSS、CSS-Module、CSS-in-JS及使用CSS框架等五种常见方案,分析了各自的优缺点,帮助开发者根据项目需求选择合适的样式解决方案。
59 0
|
4月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
59 0
|
4月前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
214 0
|
6月前
|
JSON 弹性计算 前端开发
函数计算产品使用问题之遇到在自定义运行时部署React项目时遇到样式无法正常加载。一般是什么导致的
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
7月前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
80 0
|
7月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
207 0
|
7月前
|
前端开发
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
7月前
|
前端开发 容器
第十八章 React中的样式模块化处理
第十八章 React中的样式模块化处理
|
7月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
381 0