首页 > 其他分享 >【React工作记录六十六】ant design Row col样式修改

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

时间:2023-05-26 18:32:03浏览次数:35  
标签:React 歌谣 ant design activeUpdateData vendorBelong col


 

目录

前言

导语

运行结果


前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

ant design Row col样式修改

【React工作记录六十六】ant design Row col样式修改_网络技术

【React工作记录六十六】ant design Row col样式修改_网络技术_02编辑

<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>

【React工作记录六十六】ant design Row col样式修改_网络技术_03

运行结果

【React工作记录六十六】ant design Row col样式修改_网络技术_04

【React工作记录六十六】ant design Row col样式修改_网络技术_05编辑

标签:React,歌谣,ant,design,activeUpdateData,vendorBelong,col
From: https://blog.51cto.com/u_14476028/6358321

相关文章

  • 【React工作记录六十七】前端实现复制文字操作
     目录前言导语 核心代码前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语前端实现复制文字操......
  • React Components, Elements, and Instances
    see: https://legacy.reactjs.org/blog/2015/12/18/react-components-elements-and-instances.htmlhttps://www.robinwieruch.de/react-element-component/https://stackoverflow.com/questions/30971395/difference-between-react-component-and-react-element这里摘抄一下第......
  • react子组件传值
    1.先在父组件定义函数准备接收来自子组件的数据2.此处为在父组件声明的函数3.子组件通过props.XXX(data)的方式传值 ......
  • vue中使用vant中PullRefresh 下拉刷新踩坑
    问题PullRefresh的内容未填满屏幕时,只有一部分区域可以下拉:<template><divclass="appCon"><van-pull-refreshclass="pageRefresh"v-model="isLoading"success-text="刷新成功"@refresh="onRefre......
  • vue3 reactive响应式赋值页面不渲染问题
    问题描述://声明变量letdata=reactive([]);http().then(res=>{data=res.dataconsole.log(data)})//data数据更新,页面没有渲染,1、因数据结构而导致的未渲染解决方法:依旧是reactive,可以在外面包一层//声明letstate=reactive({data:[]})//赋值state......
  • Permutation Invariant Graph Generation via Score-Based Generative Modeling
    目录概符号说明本文方法代码NiuC.,SongY.,SongJ.,ZhaoS.,GroverA.andErmonS.Permutationinvariantgraphgenerationviascore-basedgenerativemodeling.AISTATS,2020.概本文利用diffusion进行图的生成,很朴素.符号说明\(\mathbf{A}^{\pi}\),邻接......
  • react 手写签名
    importReact,{useRef,useState}from'react';importSignatureCanvasfrom'react-signature-canvas';import'./index.less';functionSignature(){const[signatureDataUrl,setSignatureDataUrl]=useState(null);constsi......
  • AntDB-S流式数据库体验
    本文作者:彭冲老师,上一篇彭老师体验了亚信刚发布的社区版AntDB-T数据库,文章如下:AntDB-T交易型数据库体验本文继续体验AntDB-S流式数据库的,AntDB-S目前还未开放社区版,可以联系AntDB小助手进行体验。01AntDB-S流式数据库简介流式数据库是把流处理引擎的能力合并到数据库内核,与数......
  • 普加甘特图 vs. jQuery Gantt:两种甘特图工具的对比
    简介:甘特图是项目管理中常用的工具之一,它可帮助团队可视化项目进度和任务安排。在众多的甘特图工具中,普加甘特图和jQueryGantt都是备受关注的选项。本文将对这两种甘特图工具进行比较,以帮助你选择适合自己项目管理需求的工具。功能和特点:普加甘特图:普加甘特图提供直观的界面和丰......
  • The MySQL server is running with the --skip-grant-tables option so it cannot exe
     TheMySQLserverisrunningwiththe--skip-grant-tablesoptionsoitcannotexecutethisstatement 默认情况下,启动MySQL数据库实例期间,会读取所有的权限表条目到内存中,后续被缓存到内存中的权限条目作为依据即刻对后续的控制访问生效(传送门)。使用"skip-grant-tab......