div+css实现简洁清爽ai文生图pc端ui界面html代码
代码语言：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 {
align-items: center;
display: flex
}
.list {
background-color: #fff;
border-radius: 24px;
margin: 16px 0;
padding: 18px 16px 0;
width: 0;
width: 100%
}
.listCou {
flex: 1;
height: calc(100% + 32px);
margin-left: 16px;
margin-top: -16px;
min-width: 400px;
overflow-y: auto
}
.creationResult {
height: 100%;
overflow-y: auto;
width: 100%
}
html {
background: var(--wanx-bk)
}
:root {
--wanx-brand-high-light: #8a73ff;
--wanx-P1: #624aff;
--wanx-P1-07: #624affb3;
--wanx-P1-05: #624aff80;
--wanx-P1-04: rgba(98,74,255,.4);
--wanx-P1-03: #624aff4d;
--wanx-P07: #4738b9;
--wanx-P05: #342b8a;
--wanx-P03: #221e5a;
--wanx-P01: #151537;
--wanx-P2: #7c68ff;
--wanx-P3: #9181ff;
--wanx-button-hover: #452ddd;
--wanx-bk1: #f1f6ff;
--wanx-bk: #f1f6ff;
--wanx-ge: #878aab;
--wanx-ge-04: #3a3e50;
--wanx-ge-03: #2d3240;
--wanx-ge-02: #202532;
--wanx-ge-01: #141822;
--wanx-wh: #fff;
--wanx-wh-07: #b5b6b8;
--wanx-wh-05: #838589;
--wanx-wh-03: #52565b;
--wanx-bu: #1f92ff;
--wanx-gr: #00a873;
--wanx-rd: #fe5967;
--wanx-or: #ff753c;
--wanx-ye: #ffb73d;
--wanx-text-high-ligh: #8a73ff;
--wanx-text-normal: #fff;
--wanx-text-weak: #878aab;
--wanx-text-very-weak: #878aaba6;
--wanx-header-height: 48px;
--wanx-app-header-height: 116px;
--wanx-font-weight-bold: bold;
--wanx-font-weight-normal: normal;
--wanx-font-regular: 400;
--wanx-font-symobild: 500;
--wanx-font-meidum: 600
}
.slideModal {
background: #f7f8fc;
border-radius: 24px;
display: flex;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all .3s;
width: var(--slide-modal-width,380px);
z-index: 5
}
.slideModal.slideIn {
transform: translateX(calc(332px - var(--slide-modal-width, 380px)))
}
.slideL {
height: 100%;
width: var(--slide-modal-left-width,58px)
}
.slideR {
display: flex;
flex: 1;
flex-direction: column;
max-width: calc(var(--slide-modal-width, 380px) - var(--slide-modal-left-width, 58px));
padding: 20px 16px
}
.head {
align-items: center;
display: flex
}
.head .title {
color: #2c2c36;
flex: 1;
font-size: 15px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold)
}
.head .close {
color: #2c2c36;
cursor: pointer;
font-size: 16px
}
.body {
flex: 1;
margin-top: 16px;
overflow-y: auto
}
.generationBody .promptCou .ant-input:focus-visible {
border: none!important;
box-shadow: none!important
}
.customCheckBox {
align-items: center;
display: flex;
height: 22px;
justify-content: center;
width: 22px
}
.customCheckBox .itemIcon {
color: #615ced;
cursor: pointer;
font-size: 22px
}
.customCheckBox .iconEmpty {
background-color: #fff;
border: 1px solid #e0e2eb;
border-radius: 100px;
cursor: pointer;
height: 17px;
width: 17px
}
.prompt .promptCou .ant-input:focus-visible {
border: none!important;
box-shadow: none!important
}
a {
cursor: pointer;
text-decoration: none
}
a,a:hover,a:visited {
color: rgba(242,246,255,.7)
}
.baseModelBody .item {
background: #fff;
border-radius: 16px;
cursor: pointer;
height: 96px;
margin-bottom: 8px;
padding: 16px
}
.baseModelBody .item .head {
align-items: center;
display: flex
}
.baseModelBody .item .head .name {
color: #32314c;
flex: 1;
font-size: 15px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold)
}
.baseModelBody .item .desc {
color: #afb1c4;
font-size: 11px;
margin-top: 6px
}
.baseModelBody .item.active .head .name {
color: #615ced
}
.createModel .title {
color: #2c2c36;
font-size: 13px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold)
}
.createModel .body {
align-items: center;
background-color: #f7f8fc;
border-radius: 12px;
cursor: pointer;
display: flex;
margin-top: 4px;
padding: 4px 0 4px 4px
}
.createModel .body .icon {
align-items: center;
background: #edeff5;
border-radius: 8px;
display: flex;
height: 52px;
justify-content: center;
width: 52px
}
.createModel .body .icon .iconAdd {
color: #686b86;
font-size: 20px
}
.createModel .body .bodyText {
color: #8f91a8;
flex: 1;
font-size: 13px;
margin-left: 12px
}
.createModel .body .iconArrow {
color: #686b86;
cursor: pointer;
font-size: 16px;
margin-right: 8px
}
.createModel .body:hover {
background: #f7f6fc
}
.tabs {
align-items: center;
display: flex;
gap: 24px;
height: 32px
}
.tabs .item {
color: #8f91a8;
cursor: pointer;
flex-shrink: 0;
font-size: 15px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold);
transition: all .3s
}
.tabs .item.active {
color: #2c2c36
}
.scrollArrow {
background-color: #f7f8fc;
cursor: pointer
}
.scrollArrow .arrowInner {
align-items: center;
-webkit-backdrop-filter: blur(4.52px);
backdrop-filter: blur(4.52px);
background: hsla(0,0%,100%,.9);
border-radius: 100px;
box-shadow: 0 1.81px 4.52px 0 rgba(140,136,202,.239),inset 0 0 4.52px 0 hsla(0,0%,100%,.5);
display: flex;
height: 28px;
justify-content: center;
width: 28px
}
.scrollArrow .arrowInner .icon {
color: #615ced;
font-size: 16px
}
.arrowR {
margin-left: -12px;
position: -webkit-sticky;
position: sticky;
right: 0;
z-index: 1
}
.cursesBody {
display: flex;
flex-direction: column;
height: 100%;
position: relative
}
.cursesBody .head {
overflow-x: auto;
scroll-behavior: smooth;
width: 100%
}
.cursesBody .content {
flex: 1;
margin-top: 12px;
overflow-y: auto
}
.cursesBody .content .inner {
display: flex;
flex-wrap: wrap;
gap: 8px
}
.cursesBody .content .inner .item {
background: #fff;
border-radius: 100px;
color: #585a73;
cursor: pointer;
font-size: 13px;
padding: 10px 0;
text-align: center;
transition: all .3s;
width: calc(33.33333% - 5.33333px)
}
.cursesBody .content .inner .item:hover {
background: #f3f2ff
}
.generation {
align-items: center;
display: flex
}
.generation .name {
align-items: center;
display: flex;
flex: 1
}
.generation .name .text {
color: #8f91a8;
font-size: 13px
}
.generation .name .icon {
cursor: pointer;
font-size: 16px;
margin-left: 4px
}
.generation .ant-switch-checked {
background-color: #615ced
}
.generation .ant-switch-checked:focus {
box-shadow: none
}
.modelsBody {
display: flex;
flex-direction: column;
height: 100%
}
.modelsBody .head {
overflow-x: auto;
width: 100%
}
.modelsBody .content {
background: #f7f8fc;
flex: 1;
margin-top: 6px;
overflow-y: auto
}
.modelsBody .inner {
grid-gap: 8px;
display: grid;
gap: 8px;
grid-template-columns: repeat(3,1fr)
}
.modelsBody .inner .item {
border-radius: 16px;
cursor: pointer;
padding: 8px;
transition: all .3s;
width: 100%
}
.modelsBody .inner .item .avatar {
border-radius: 12px;
overflow: hidden;
width: 100%
}
.modelsBody .inner .item .title {
align-items: center;
display: flex;
height: 24px;
margin-top: 8px
}
.modelsBody .inner .item .title .text {
color: #32314c;
flex: 1;
font-size: 15px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold)
}
.modelsBody .inner .item .tips {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: #afb1c4;
display: -webkit-box;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis
}
.modelsBody .inner .item:hover {
background: #fff
}
.prompt {
background-color: #fff
}
.prompt .title {
color: #2c2c36;
font-size: 17px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold)
}
.prompt .modelTypes {
align-items: center;
display: flex;
margin-top: 16px
}
.prompt .modelTypes .typeItem {
align-items: center;
background: #f7f8fc;
border-radius: 100px;
cursor: pointer;
display: flex;
padding: 3px 6px 3px 12px
}
.prompt .modelTypes .typeItem .itemName {
color: #585a73;
font-size: 13px
}
.prompt .modelTypes .typeItem .itemIcon {
color: #585a73;
font-size: 16px;
margin-left: 8px
}
.prompt .modelTypes .typeItem:hover {
background: #fafaff
}
.prompt .promptCou {
background: #f7f8fc;
border: 1px solid #f7f8fc;
border-radius: 16px;
margin-top: 8px;
overflow: hidden;
padding: 14px 14px 8px;
transition: all .3s
}
.prompt .promptCou .ant-input {
background: #f7f8fc!important;
border: none!important;
caret-color: #585a73;
color: #585a73;
font-size: 13px;
padding: 0
}
.prompt .promptCou .ant-input:focus,.prompt .promptCou .ant-input:focus-visible {
border: none!important;
box-shadow: none!important
}
.prompt .promptCou .ant-input::-webkit-input-placeholder {
color: #c8cad9
}
.prompt .promptCou .ant-input::-moz-placeholder {
color: #c8cad9
}
.prompt .promptCou .couLine {
align-items: center;
display: flex;
margin-top: 8px
}
.prompt .promptCou .couLine .lineCursesBtn {
align-items: center;
background: #fff;
border-radius: 100px;
cursor: pointer;
display: flex;
padding: 2px 8px
}
.prompt .promptCou .couLine .lineCursesBtn .btnIcon {
color: #585a73;
font-size: 16px
}
.prompt .promptCou .couLine .lineCursesBtn .cursesText {
color: #585a73;
font-size: 13px;
margin-left: 4px
}
.prompt .promptCou .couLine .lineCursesBtn:hover {
background: #f3f2ff
}
.prompt .promptCou .couLine .linePlace {
flex: 1
}
.prompt .promptCou .couLine .lineCount {
color: #c8cad9;
font-size: 12px
}
.prompt .promptCou .couLine .lineCount .light {
color: #585a73
}
.prompt .recommend {
align-items: center;
display: flex;
height: 20px;
margin-top: 8px
}
.prompt .recommend .recommendText {
color: #8f91a8;
cursor: pointer;
flex: 1;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.prompt .recommend .recommendBtn {
color: #8f91a8;
cursor: pointer;
font-size: 14px;
transform: rotate(0deg)
}
.ration .title {
font-size: 13px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold)
}
.ration .list {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px
}
.ration .list .item {
align-items: center;
background: #fafafc;
border-radius: 100px;
cursor: pointer;
display: flex;
padding: 11px 0;
width: calc(33.33333% - 5.33333px)
}
.ration .list .item .itemIcon {
color: #585a73;
font-size: 20px;
margin-left: 18px;
margin-right: 3px
}
.ration .list .item .itemValue {
color: #585a73;
font-size: 13px;
letter-spacing: 2px;
margin-left: 3px
}
.ration .list .item.active {
background: #eeedff
}
.ration .list .item.active .itemIcon {
color: #615ced
}
.ration .list .item.active .itemValue {
color: #615ced;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold)
}
.referenceImage .title {
color: #2c2c36;
font-size: 13px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold)
}
.referenceImage .body {
align-items: center;
background: #f7f8fc;
border-radius: 12px;
cursor: pointer;
display: flex;
margin-top: 4px;
padding: 4px 0 4px 4px
}
.referenceImage .body .empty {
color: #8f91a8;
flex: 1;
font-size: 13px;
height: 52px;
line-height: 52px;
text-align: center
}
.referenceImage .body.disabled {
background: #fafafc
}
.referenceImage .body.disabled .empty {
color: #c8cad9
}
.creation {
display: flex;
height: 100%;
padding: 16px 16px 16px 0;
width: 100%
}
.creation .formCou {
height: 100%;
position: relative
}
.creation .form {
background-color: #fff;
border-radius: 24px;
box-shadow: 0 4px 10px 0 rgba(163,146,238,.302);
height: 100%;
overflow-y: auto;
padding: 20px 16px;
position: relative;
width: 322px;
z-index: 6
}
.creation .form .formPlace {
height: calc(100% - 84px);
overflow-y: auto;
padding-bottom: 51px
}
.creation .form .formLine {
height: 16px;
width: 100%
}
.creation .form .formLineBorder {
background-color: #e8eaf2;
height: 1px;
margin: 16px 0;
width: 100%
}
.creation .form .fomrSubmit {
bottom: 0;
position: -webkit-sticky;
position: sticky
}
.menuItem {
align-items: center;
border-radius: 100px;
cursor: pointer;
display: flex;
height: 52px;
position: relative;
transition: all .3s;
width: 100%
}
.menuItem .itemIcon {
font-size: 24px!important
}
.menuItem .itemIcon svg {
color: #686b86!important
}
.menuItem .iconCou {
align-items: center;
display: flex;
height: 32px;
justify-content: center;
position: relative;
width: 32px
}
.menuItem .iconNumber {
align-items: center;
background: #e2e1fd;
border-radius: 100px;
color: #615ced;
display: flex;
font-size: 14px;
font-weight: var(--wanx-font-symobild);
font-weight: var(--wanx-font-weight-bold);
height: 32px;
justify-content: center;
width: 32px
}
.menuItem:hover {
background-color: #fff
}
.menuItemClosed {
height: 52px!important;
justify-content: center;
margin: 0!important;
padding: 0!important;
width: 52px!important
}
.menuItemActive {
background-color: #fff
}
.menuItemActive .itemIcon svg {
color: #615ced!important
}
.inputCou .ant-input:focus-visible {
border: none!important;
box-shadow: none!important
}
.bodyBottom {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%
}
.bodyBottom .bottomMenu {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%
}
.bodyBottom .bottomMenu .menuItem {
margin-top: 16px;
width: 100%
}
.headersBody {
align-items: center;
background-color: var(--wanx-bk1);
border-radius: 20px;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: 0 16px
}
.headersBody .avatar {
cursor: pointer
}
.headersBody .logoImgCollsed {
width: 52px
}
.bodyTop {
flex: 1;
width: 100%
}
.bodyTop .topMenu {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%
}
.bodyTop .topMenu .menuItem {
margin-top: 16px;
width: 100%
}
.homeSwiper .swiperInput .inputBody .bodyDom:focus-visible {
border: none
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="wanx-container" style="width:100vw;height:100vh;">
<div id="container-body">
<div id="header-wrapper">
<div class="headersBody" id="header-body">
<div class="avatar"><img class="logoImgCollsed" src="//repo.bfw.wiki/bfwrepo/icon/617245a85118d.png" alt=""></div>
<div class="bodyTop">
<div class="topMenu">
<div class="menuItem">
<div>
<div class="menuItem menuItemClosed">
<div class="iconCou"><span role="img" class="anticon itemIcon">
<i style="color:grey;" class="fa fa-telegram"></i>
</span></div>
</div>
</div>
</div>
<div class="menuItem">
<div>
<div class="menuItem menuItemClosed menuItemActive">
<div class="iconCou"><span role="img" class="anticon itemIcon"> <i style="color:grey;" class="fa fa-medium"></i></span></div>
</div>
</div>
</div>
<div class="menuItem">
<div>
<div class="menuItem menuItemClosed">
<div class="iconCou"><span role="img" class="anticon itemIcon"> <i style="color:grey;" class="fa fa-google-wallet"></i></span></div>
</div>
</div>
</div>
<div class="menuItem">
<div>
<div class="menuItem menuItemClosed">
<div class="iconCou"><span role="img" class="anticon itemIcon"> <i style="color:grey;" class="fa fa-resistance"></i></span></div>
</div>
</div>
</div>
<div class="menuItem">
<div>
<div class="menuItem menuItemClosed">
<div class="iconCou"><span role="img" class="anticon itemIcon"> <i style="color:grey;" class="fa fa-stack-overflow"></i></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="ice-container" style="display: block;">
<div class="pageLoaderBody" id="page-loader-body">
<div class="creation">
<div class="formCou">
<div class="form">
<div class="formPlace">
<div class="prompt">
<div class="title">文字作画</div>
<div class="modelTypes">
<div class="typeItem"><span id="modelsel" class="itemName">SD2.0 极速</span><span role="img" class="anticon itemIcon"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use xlink:href="#icon-qianwangjiantou"></use></svg></span></div>
</div>
<div class="promptCou"><textarea placeholder="试试输入你心中的画面，尽量描述具体，可以尝试用一些风格修饰词辅助你的表达" class="ant-input" style="overflow-y: hidden; height: 100px; resize: none; min-height: 100px; max-height: 100px;"></textarea>
<div class="couLine">
<div class="lineCursesBtn"><span role="img" class="anticon btnIcon"><i class="fa fa-leanpub"></i></span>
<div class="cursesText">咒语书</div>
</div>
<div class="linePlace"></div>
<div class="lineCount"><span class="light">0</span>/<span>500</span></div>
</div>
</div>
<div class="recommend">
<div id="promptstyle" class="recommendText">宋代壁画，版画，中式阁楼，圆月，留白</div><span role="img" tabindex="-1" class="anticon recommendBtn"><i class="fa fa-chevron-circle-right"></i></span></div>
</div>
<div class="formLine"></div>
<div class="createModel">
<div class="title">创意模版</div>
<div class="body">
<div class="icon"><span role="img" class="anticon iconAdd"><i class="fa fa-grav"></i></span></div>
<div id="tempstyle" class="bodyText">选择创意模版</div><span role="img" class="anticon iconArrow"><i class="fa fa-chevron-circle-right"></i></span></div>
</div>
<div class="formLine"></div>
<div class="referenceImage">
<div class="title">参考图</div>
<div class="body disabled">
<div class="empty"><i class="fa fa-plus-circle"></i>点击上传参考图</div>
</div>
</div>
<div class="formLine"></div>
<div class="ration" >
<div class="title">比例</div>
<div class="list" >
<div class="item active"><span role="img" class="anticon itemIcon"><i class="fa fa-square-o"></i></span>
<div class="itemValue">1:1</div>
</div>
<div class="item"><span role="img" class="anticon itemIcon"><i class="fa fa-square-o"></i></span>
<div class="itemValue">16:9</div>
</div>
<div class="item"><span role="img" class="anticon itemIcon"><i class="fa fa-square-o"></i></span>
<div class="itemValue">9:16</div>
</div>
<div class="item"><span role="img" class="anticon itemIcon"><i class="fa fa-square-o"></i></span>
<div class="itemValue">4:3</div>
</div>
<div class="item"><span role="img" class="anticon itemIcon"><i class="fa fa-square-o"></i></span>
<div class="itemValue">3:4</div>
</div>
</div>
</div>
<div class="formLineBorder"></div>
<div class="generation">
<div class="name">
<div class="text">灵感扩写</div><span role="img" class="anticon icon"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use xlink:href="#icon-tongzhi2"></use></svg></span></div>
<button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-small ant-switch-checked">
<div class="ant-switch-handle"></div><span class="ant-switch-inner"></span></button>
</div>
</div>
<div class="fomrSubmit">
<div class="submitBtnLine"></div>
<div class="submitBtn">
<div class="btnInner">
<div class="text">生成画作</div><span role="img" class="anticon innerIcon"><i class="fa fa-rmb"></i></span>
<div class="count">1</div>
</div>
</div>
</div>
</div>
<div class="slideModal slideIn" id="modelsel-panel">
<div class="slideL"></div>
<div class="slideR">
<div class="head">
<div class="title">创作模型</div><span role="img" tabindex="-1" class="anticon close"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use xlink:href="#icon-guanbi"></use></svg></span></div>
<div class="body">
<div class="baseModelBody">
<div class="item active">
<div class="head">
<div class="name">SD2.0 极速</div>
<div class="customCheckBox"><span role="img" tabindex="-1" class="anticon itemIcon"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use xlink:href="#icon-chenggong_fill"></use></svg></span></div>
</div>
<div class="desc">增强人像与风格美感，更快的生成速度，擅长理解自然语言描述</div>
</div>
<div class="item">
<div class="head">
<div class="name">SD2.0 专业</div>
<div class="customCheckBox">
<div class="iconEmpty"></div>
</div>
</div>
<div class="desc">更富有质感的内容细节，更复杂的画面结构，更丰富的风格表现力</div>
</div>
<div class="item">
<div class="head">
<div class="name">SD1.0 通用</div>
<div class="customCheckBox">
<div class="iconEmpty"></div>
</div>
</div>
<div class="desc">丰富的图像风格支持，稳定的生成品质</div>
</div>
</div>
</div>
</div>
</div>
<div class="slideModal slideIn" id="promptstyle-panel">
<div class="slideL"></div>
<div class="slideR">
<div class="head">
<div class="title">咒语书</div><span id="closepromptbtn" role="img" tabindex="-1" class="anticon close"><i class="fa fa-close"></i></span></div>
<div class="body">
<div class="cursesBody">
<div class="head" id="body-head">
<div class="tabs">
<div class="item active">风格</div>
<div class="item">光线</div>
<div class="item">材质</div>
<div class="item">渲染</div>
<div class="item">色彩</div>
<div class="item">构图</div>
<div class="item">视角</div>
<div class="item">常用咒语</div>
<div class="scrollArrow arrowR">
<div class="arrowInner"><span role="img" class="anticon icon"><i class="fa fa-book"></i></span></div>
</div>
</div>
</div>
<div class="content">
<div class="inner">
<div class="item">印象派</div>
<div class="item">点彩画</div>
<div class="item">厚涂</div>
<div class="item">像素画</div>
<div class="item">波普艺术</div>
<div class="item">彩铅</div>
<div class="item">赛博朋克</div>
<div class="item">浮世绘</div>
<div class="item">皮克斯风格</div>
<div class="item">低聚</div>
<div class="item">工笔画</div>
<div class="item">水墨画</div>
<div class="item">梵高风格</div>
<div class="item">莫奈风格</div>
<div class="item">蒸汽朋克</div>
<div class="item">柴油朋克</div>
<div class="item">故障艺术</div>
<div class="item">全息投影</div>
<div class="item">机械美学</div>
<div class="item">古风</div>
<div class="item">吉卜力</div>
<div class="item">非洲未来主义</div>
<div class="item">剪影</div>
<div class="item">涂鸦</div>
<div class="item">碎裂效果</div>
<div class="item">波西米亚风格</div>
<div class="item">美式漫画</div>
<div class="item">ASCII art</div>
<div class="item">蒙德里安</div>
<div class="item">毕加索</div>
<div class="item">穆夏</div>
<div class="item">包豪斯</div>
<div class="item">Q版</div>
<div class="item">水彩</div>
<div class="item">油画</div>
<div class="item">中国画</div>
<div class="item">扁平插画</div>
<div class="item">二次元</div>
<div class="item">素描&l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0