博客

因为为了适应自己项目的需要进行了相应的修改

效果图是这样的


代码

import { List } from "antd-mobile"; //导入
<List>
                        <List.Item>
                        <span className="required-mark">*</span>
                                问题名称:
                                <input
                                    placeholder="请输入问题名称"
                                    type="text"
                                />
                        </List.Item>
                        <List.Item>
                        <span className="required-mark">*</span>
                                问题名称:
                                <input
                                    placeholder="请输入问题名称"
                                    type="text"
                                />
                        </List.Item>
                        <List.Item>
                        <span className="required-mark">*</span>
                                问题名称:
                                <input
                                    placeholder="请输入问题名称"
                                    type="text"
                                />
                        </List.Item>
                    </List>

.less样式文件

 .am-list{
            margin-bottom: 0.22rem;
            .am-list-body{
                display: flow-root;
            }
        }
        .am-list-item{
            padding-left: 0rem;
            padding-right: 0.25rem;
            min-height: 1.33rem;
            overflow: visible;
            .am-list-line{
                overflow: visible;
                &:after{
                    margin-left: 0.56rem;
                }
            }
            .am-list-content{
                padding-left: 0.53rem;
                font-size: 0.42rem;
                font-weight: bold;
                & .item-label, & img, &>input{
                    float: right;
                    font-weight: normal;
                    margin-left: 0.42rem;
                }
                &>.item-picker{
                    display: inline;
                    &>div{
                        display: inline;
                    }
                }
                .active{
                    color: #01AC92;
                }
                .dis-active{
                    color: black;
                }
                &>input{
                    text-align: end;
                    border: none;
                    margin-left: 0;
                    line-height: 1.5;
                }
                &>span:last-child{
                    font-size: 0.44rem;
                    font-weight: normal;
                }
                & img{
                    margin-left: 0.56rem;
                    width: .26rem;
                    height: .17rem;
                    margin-top: .23rem;
                }
                .required-mark{
                    color: red;
                    position: absolute;
                    left: 0.25rem;
                    top: 0.47rem;
                }
                .text-area-feedback{
                    border: none;
                }
                .text-area-workplan, .text-area-feedback{
                    &>textarea{
                        width: 100%;
                        border: none;
                        resize: none;
                    }
                }
            }
        }