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 {
al.........完整代码请登录后点击上方下载按钮下载查看
网友评论0