div+css实现简洁清爽ai文生图pc端ui界面html代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现简洁清爽ai文生图pc端ui界面html代码，包括效果图预览、模板风格选择、prompt提示词、大小等参数设置。
代码标签： div css 简洁清爽 ai 文生图 pc 端 ui 界面 html 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>


    
    body,html {
        height: 100%;
        width: 100%
    }
    
  
    
    body {
        font-feature-settings: "tnum","tnum";
        color: rgba(0,0,0,.85);
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715
    }
    
    [tabindex="-1"]:focus {
        outline: none!important
    }
    
    textarea {
        -webkit-appearance: none
    }
    
    a {
        -webkit-text-decoration-skip: objects;
        background-color: transparent;
        color: #1890ff;
        outline: none;
        transition: color .3s
    }
    
    a:hover {
        color: #40a9ff
    }
    
    a:active {
        color: #096dd9
    }
    
    a:active,a:focus,a:hover {
        outline: 0;
        text-decoration: none
    }
    
    img {
        border-style: none;
        vertical-align: middle
    }
    
    a,button,textarea {
        touch-action: manipulation
    }
    
    button,textarea {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        margin: 0
    }
    
    button {
        overflow: visible
    }
    
    button {
        text-transform: none
    }
    
    button,html [type=button] {
        -webkit-appearance: button
    }
    
    [type=button]::-moz-focus-inner,button::-moz-focus-inner {
        border-style: none;
        padding: 0
    }
    
    textarea {
        overflow: auto;
        resize: vertical
    }
    
    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit
    }
    
    ::-moz-selection {
        background: #1890ff;
        color: #fff
    }
    
    ::selection {
        background: #1890ff;
        color: #fff
    }
    
    .anticon {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        align-items: center;
        color: inherit;
        display: inline-flex;
        font-style: normal;
        line-height: 0;
        text-align: center;
        text-rendering: optimizelegibility;
        text-transform: none;
        vertical-align: -.125em
    }
    
    .anticon>* {
        line-height: 1
    }
    
    .anticon svg {
        display: inline-block
    }
    
    .anticon:before {
        display: none
    }
    
    .anticon[tabindex] {
        cursor: pointer
    }
    
    html {
        --antd-wave-shadow-color: #1890ff;
        --scroll-bar: 0
    }
    
    .ant-comment-content-author-name>:hover {
        color: rgba(0,0,0,.45)
    }
    
    _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-month-panel .ant-picker-cell,_:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-cell {
        padding: 21px 0
    }
    
    .ant-input {
        font-feature-settings: "tnum","tnum";
        background-color: #fff;
        background-image: none;
        border: 1px solid #d9d9d9;
        box-sizing: border-box;
        color: rgba(0,0,0,.85);
        display: inline-block;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        margin: 0;
        min-width: 0;
        padding: 4px 11px;
        position: relative;
        transition: all .3s;
        width: 100%
    }
    
    .ant-input::-moz-placeholder {
        color: #bfbfbf;
        -moz-user-select: none;
        user-select: none
    }
    
    .ant-input:-ms-input-placeholder {
        color: #bfbfbf;
        -ms-user-select: none;
        user-select: none
    }
    
    .ant-input:-moz-placeholder-shown {
        text-overflow: ellipsis
    }
    
    .ant-input:-ms-input-placeholder {
        text-overflow: ellipsis
    }
    
    .ant-input:placeholder-shown {
        text-overflow: ellipsis
    }
    
    .ant-input:hover {
        border-color: #40a9ff;
        border-right-width: 1px
    }
    
    .ant-input:focus {
        border-color: #40a9ff;
        border-right-width: 1px;
        box-shadow: 0 0 0 2px rgba(24,144,255,.2);
        outline: 0
    }
    
    textarea.ant-input {
        height: auto;
        line-height: 1.5715;
        max-width: 100%;
        min-height: 32px;
        transition: all .3s,height 0s;
        vertical-align: bottom
    }
    
    @media (-ms-high-contrast:none),screen and (-ms-high-contrast:active) {
        .ant-input {
            height: 32px
        }
    }
    
    .ant-menu.ant-menu-root:focus-visible {
        box-shadow: 0 0 0 2px #bae7ff
    }
    
    .ant-menu-item:not(.ant-menu-item-disabled):focus-visible,.ant-menu-submenu-title:not(.ant-menu-item-disabled):focus-visible {
        box-shadow: 0 0 0 2px #bae7ff
    }
    
    .ant-menu.ant-menu-root:focus-visible {
        box-shadow: 0 0 0 2px #096dd9
    }
    
    .ant-menu-dark .ant-menu-item:focus-visible,.ant-menu-dark .ant-menu-submenu-title:focus-visible {
        box-shadow: 0 0 0 2px #096dd9
    }
    
    .ant-page-header-back-button:focus-visible {
        color: #40a9ff
    }
    
    .ant-pagination-item:focus-visible {
        border-color: #1890ff;
        transition: all .3s
    }
    
    .ant-pagination-item:focus-visible a {
        color: #1890ff
    }
    
    .ant-pagination-item-active:focus-visible {
        border-color: #40a9ff
    }
    
    .ant-pagination-item-active:focus-visible a {
        color: #40a9ff
    }
    
    .ant-pagination-jump-next:focus-visible .ant-pagination-item-link-icon,.ant-pagination-jump-prev:focus-visible .ant-pagination-item-link-icon {
        opacity: 1
    }
    
    .ant-pagination-jump-next:focus-visible .ant-pagination-item-ellipsis,.ant-pagination-jump-prev:focus-visible .ant-pagination-item-ellipsis {
        opacity: 0
    }
    
    .ant-pagination-next:focus-visible .ant-pagination-item-link,.ant-pagination-prev:focus-visible .ant-pagination-item-link {
        border-color: #1890ff;
        color: #1890ff
    }
    
    .ant-pagination-disabled:focus-visible {
        cursor: not-allowed
    }
    
    .ant-pagination-disabled:focus-visible .ant-pagination-item-link {
        border-color: #d9d9d9;
        color: rgba(0,0,0,.25);
        cursor: not-allowed
    }
    
    .ant-rate-star>div:focus-visible {
        outline: 1px dashed #fadb14;
        transform: scale(1.1)
    }
    
    .ant-skeleton {
        display: table;
        width: 100%
    }
    
    .ant-skeleton-active .ant-skeleton-image {
        background: transparent;
        overflow: hidden;
        position: relative;
        z-index: 0
    }
    
    .ant-skeleton-active .ant-skeleton-image:after {
        animation: ant-skeleton-loading 1.4s ease infinite;
        background: linear-gradient(90deg,hsla(0,0%,75%,.2) 25%,hsla(0,0%,51%,.24) 37%,hsla(0,0%,75%,.2) 63%);
        bottom: 0;
        content: "";
        left: -150%;
        position: absolute;
        right: -150%;
        top: 0
    }
    
    .ant-skeleton-element {
        display: inline-block;
        width: auto
    }
    
    .ant-skeleton-element .ant-skeleton-image {
        align-items: center;
        background: hsla(0,0%,75%,.2);
        display: flex;
        height: 96px;
        justify-content: center;
        line-height: 96px;
        vertical-align: top;
        width: 96px
    }
    
    @keyframes ant-skeleton-loading {
        0% {
            transform: translateX(-37.5%)
        }
    
        to {
            transform: translateX(37.5%)
        }
    }
    
    .ant-switch {
        font-feature-settings: "tnum","tnum";
        background-color: rgba(0,0,0,.25);
        border: 0;
        border-radius: 100px;
        box-sizing: border-box;
        color: rgba(0,0,0,.85);
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-variant: tabular-nums;
        height: 22px;
        line-height: 1.5715;
        line-height: 22px;
        list-style: none;
        margin: 0;
        min-width: 44px;
        padding: 0;
        position: relative;
        transition: all .2s;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        vertical-align: middle
    }
    
    .ant-switch:focus {
        box-shadow: 0 0 0 2px rgba(0,0,0,.1);
        outline: 0
    }
    
    .ant-switch-checked:focus {
        box-shadow: 0 0 0 2px #e6f7ff
    }
    
    .ant-switch:focus:hover {
        box-shadow: none
    }
    
    .ant-switch-checked {
        background-color: #1890ff
    }
    
    .ant-switch-inner {
        color: #fff;
        display: block;
        font-size: 12px;
        margin: 0 7px 0 25px;
        transition: margin .2s
    }
    
    .ant-switch-checked .ant-switch-inner {
        margin: 0 25px 0 7px
    }
    
    .ant-switch-handle {
        height: 18px;
        left: 2px;
        top: 2px;
        width: 18px
    }
    
    .ant-switch-handle,.ant-switch-handle:before {
        position: absolute;
        transition: all .2s ease-in-out
    }
    
    .ant-switch-handle:before {
        background-color: #fff;
        border-radius: 9px;
        bottom: 0;
        box-shadow: 0 2px 4px 0 rgba(0,35,11,.2);
        content: "";
        left: 0;
        right: 0;
        top: 0
    }
    
    .ant-switch-checked .ant-switch-handle {
        left: calc(100% - 20px)
    }
    
    .ant-switch:not(.ant-switch-disabled):active .ant-switch-handle:before {
        left: 0;
        right: -30%
    }
    
    .ant-switch:not(.ant-switch-disabled):active.ant-switch-checked .ant-switch-handle:before {
        left: -30%;
        right: 0
    }
    
    .ant-switch-small {
        height: 16px;
        line-height: 16px;
        min-width: 28px
    }
    
    .ant-switch-small .ant-switch-inner {
        font-size: 12px;
        margin: 0 5px 0 18px
    }
    
    .ant-switch-small .ant-switch-handle {
        height: 12px;
        width: 12px
    }
    
    .ant-switch-small.ant-switch-checked .ant-switch-inner {
        margin: 0 18px 0 5px
    }
    
    .ant-switch-small.ant-switch-checked .ant-switch-handle {
        left: calc(100% - 14px)
    }
    
    .ant-table-thead th.ant-table-column-has-sorters:focus-visible {
        color: #1890ff
    }
    
    .ant-table-row-expand-icon:focus-visible {
        color: #40a9ff
    }
    
    .ant-tree-focused:not(:hover):not(.ant-tree-active-focused) {
        background: #e6f7ff
    }
    
    .ant-select-tree-focused:not(:hover):not(.ant-select-tree-active-focused) {
        background: #e6f7ff
    }
    
    .ant-typography a:focus-visible,a.ant-typography:focus-visible {
        color: #40a9ff
    }
    
    .ant-typography-copy:focus-visible,.ant-typography-edit:focus-visible,.ant-typography-expand:focus-visible {
        color: #40a9ff
    }
    
    :root {
        --primary: #3178f6;
        --bg-primary: #fff
    }
    
    #container-body {
        display: flex;
        flex-direction: row;
        height: 100%
    }
    
    #header-wrapper {
        background-color: var(--wanx-bk1);
        height: 100%;
        overflow-y: auto;
        padding: 20px 0
    }
    
    #ice-container {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        position: relative
    }
    
    #ice-container .pageLoaderBody {
        height: 100%;
        margin: 0 auto;
        max-width: 1920px;
        overflow-x: auto;
        overflow-y: auto;
        width: 100%
    }
    
    button {
        box-shadow: none;
        outline: none
    }
    
    body {
        background-color: #fff;
        display: flow-root;
        margin: 0
    }
    
    body * {
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        font-family: Microsoft YaHei,å¾®è½¯é›…é»‘,sans-serif,Inter-Regular,PingFang SC,Helvetica Neue,Helvetica,-apple-system,Arial,Microsoft JhengHei,Microsoft Yahei,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
        font-weight: 400
    }
    
    ::-webkit-scrollbar {
        display: none
    }
    
    .ant-input {
        background: var(--wanx-bk1)!important;
        border: 1px solid transparent!important;
        border-radius: 2px;
        box-shadow: none!important;
        caret-color: #5955da;
        color: #f2f6ff;
        transition-duration: 0!important
    }
    
    .ant-input::-webkit-input-placeholder {
        color: rgba(242,246,255,.24)
    }
    
    .ant-input::-moz-placeholder {
        color: rgba(242,246,255,.24)
    }
    
    .ant-input:hover {
        border-color: hsla(0,0%,100%,.08)!important
    }
    
    .ant-input:focus {
        border-color: #5955da!important;
        box-shadow: 0 0 0 2px rgba(195,197,217,.2)!important
    }
    
    a:hover,a:visited {
        color: #f2f6ff
    }
    
    @media only screen and (max-width: 768px) {
        a {
            color:rgba(242,246,255,.7);
            cursor: pointer;
            text-decoration: none
        }
    
        a:hover,a:visited {
            color: #545384
        }
    }
    
    .submitBtnLine {
        background-color: #fff;
        bottom: 84px;
        box-shadow: 0 4px 10px 0 rgba(155,139,228,.16);
        height: 2px;
        left: -16px;
        position: absolute;
        width: 322px
    }
    
    .submitBtn {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background: hsla(0,0%,100%,.7);
        padding: 24px 10px 8px
    }
    
    .submitBtn .btnInner {
        align-items: center;
        background: #615ced;
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        height: 52px;
        justify-content: center;
        transition: all .3s
    }
    
    .submitBtn .btnInner .text {
        color: #fff;
        font-size: 17px;
        font-weight: var(--wanx-font-symobild);
        font-weight: var(--wanx-font-weight-bold)
    }
    
    .submitBtn .btnInner .innerIcon {
        color: #fff;
        font-size: 16px;
        margin-left: 16px
    }
    
    .submitBtn .btnInner .count {
        color: #fff;
        font-size: 17px;
        font-weight: var(--wanx-font-symobild);
        font-weight: var(--wanx-font-weight-bold);
        margin-left: 2px
    }
    
    .submitBtn .btnInner:active {
        background-color: #534ad1
    }
    
    .inputArea .rTextArea .rTextAreaInner .ant-input:focus-visible {
        border: none!important;
        box-shadow: none!important
    }
    
    .btnLine {
        align-items: center;
        display: flex
    }
    
    .btnLine .btnItem {
        align-items: center;
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        padding: 6px 12px;
        transition: all .3s
    }
    
    .btnLine .btnItem .itemIcon {
        color: #615ced;
        font-size: 18px
    }
    
    .btnLine .btnItem .itemText {
        color: #615ced;
        font-size: 13px;
        margin-left: 6px
    }
    
    .btnLine .btnItem:hover {
        background: #f3f2ff
    }
    
    .btnLine .btnItem.radius {
        padding: 7px!important
    }
    
    .text {
        cursor: pointer;
        display: inline-block;
        padding: 2px 4px
    }
    
    .text:hover {
        background-color: #fafafc;
        border-radius: 8px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone
    }
    
    .customTextArea .ant-input:focus-visible {
        border: none!important;
        box-shadow: none!important
    }
    
    .bgIcon {
        align-items: center;
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        transition: all .3s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }
    
    .bgIcon:hover span {
        color: var(--bg-icon-hover-color)!important
    }
    
    .imgLoader {
        height: auto;
        overflow: hidden;
        position: relative;
        width: 100%
    }
    
    .imgLoader .ant-skeleton {
        display: block;
        height: 100%
    }
    
    .imgLoader .ant-skeleton .ant-skeleton-image {
        height: 100%;
        width: 100%
    }
    
    .imgLoader .ant-skeleton .ant-skeleton-image span[role=img] {
        display: none
    }
    
    .imgLoader .ant-skeleton .ant-skeleton-image:after {
        background: linear-gradient(90deg,rgba(175,177,196,.15) 20%,rgba(175,177,196,.32) 45%,rgba(175,177,196,.15) 60%)
    }
    
    .imgLoader .loaderImg {
        display: block;
        width: 100%
    }
    
    .imgLoader .imgCou {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: all .3s;
        width: 100%;
        z-index: 1
    }
    
    .imgLoader .imgCou.slideIn {
        opacity: 1;
        z-index: 2
    }
    
    .imgLoader .imgCou.slideOut {
        opacity: 0;
        z-index: 1
    }
    
    .taskItemPopover {
        align-items: center;
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        background: linear-gradient(180deg,hsla(0,0%,100%,.22),hsla(0,0%,100%,.65));
        border-radius: 16px;
        bottom: 0;
        box-shadow: inset 0 0 6px 0 hsla(0,0%,100%,.3);
        display: flex;
        justify-content: space-between;
        left: 0;
        opacity: 0;
        overflow: hidden;
        padding: 16px;
        position: absolute;
        transition: all .3s;
        width: 100%;
        z-index: 3
    }
    
    .taskItemPopover .editCou:hover div {
        background: #615ced!important
    }
    
    .taskItemPopover .editCou:hover div span {
        color: #fff!important
    }
    
    .popoverBody:hover .taskItemPopoverInner {
        opacity: 1
    }
    
    .createImage {
        border-radius: 16px;
        cursor: pointer;
        min-width: 180px;
        overflow: hidden;
        position: relative
    }
    
    
    .video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible) {
        background: none
    }
    
    @supports (display: grid) {
    }
    
    .video-js :focus:not(:focus-visible) {
        outline: none
    }
    
    .createLine {
        padding-bottom: 28px
    }
    
    .createLine .head {
        align-items: center;
        display: flex
    }
    
    .createLine .head .createType {
        background: #f3f2ff;
        border-radius: 100px;
        color: #615ced;
        font-size: 13px;
        font-weight: var(--wanx-font-symobild);
        font-weight: var(--wanx-font-weight-bold);
        padding: 4px 12px;
        text-align: center
    }
    
    .createLine .head .helpTools {
        flex: 1;
        margin-left: 8px
    }
    
    .createLine .desc {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #585a73;
        display: -webkit-box;
        font-size: 13px;
        margin-bottom: 8px;
        margin-top: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
    
    .createLine .content {
        display: flex
    }
    
    .createLine .content .items {
        align-items: center;
        display: flex;
        flex: 1;
        
        gap: 16px;
        overflow: hidden
    }
    
    .createLine.isLast {
        padding-bottom: 16px
    }
    
    .avatar {
        background: #f3f2ff;
        cursor: pointer;
        overflow: hidden;
        position: relative
    }
    
    .avatar .iconCou {
        align-items: center;
        background: #f3f2ff;
        border-radius: 8px 0 0 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        position: absolute;
        right: 0;
        z-index: 3
    }
    
    .avatar .icon {
        color: #615ced
    }
    
    .popoverLine {
        al.........完整代码请登录后点击上方下载按钮下载查看