|
|
@ -3,6 +3,7 @@ |
|
|
<uni-forms :modelValue="formData" ref="form" validate-trigger='blur'> |
|
|
<uni-forms :modelValue="formData" ref="form" validate-trigger='blur'> |
|
|
<!-- 提示词 --> |
|
|
<!-- 提示词 --> |
|
|
<view class="head"> |
|
|
<view class="head"> |
|
|
|
|
|
<view class="title">绘画提示词</view> |
|
|
<view> |
|
|
<view> |
|
|
<uni-easyinput type="textarea" autoHeight v-model="formData.promptText" placeholder="请输入想生成画的提示词" class="promptInput" @blur="checkPrompt(formData.promptText)"></uni-easyinput> |
|
|
<uni-easyinput type="textarea" autoHeight v-model="formData.promptText" placeholder="请输入想生成画的提示词" class="promptInput" @blur="checkPrompt(formData.promptText)"></uni-easyinput> |
|
|
</view> |
|
|
</view> |
|
|
@ -14,15 +15,12 @@ |
|
|
<view class="keywords"> |
|
|
<view class="keywords"> |
|
|
<view class="head"> |
|
|
<view class="head"> |
|
|
<view class="left"> |
|
|
<view class="left"> |
|
|
<view class="icon"> |
|
|
|
|
|
<uni-icons type="fire-filled" size="20"></uni-icons> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="title">提示词示例</view> |
|
|
<view class="title">提示词示例</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="right" @click="getRandPrompt"> |
|
|
<view class="right" @click="getRandPrompt"> |
|
|
<view class="title">换一批</view> |
|
|
<view class="title">换一批</view> |
|
|
<view class="icon"> |
|
|
<view class="icon"> |
|
|
<uni-icons type="refreshempty" size="20"></uni-icons> |
|
|
<uni-icons type="refreshempty" size="14" :color="primaryColor"></uni-icons> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -36,9 +34,6 @@ |
|
|
<view class="style"> |
|
|
<view class="style"> |
|
|
<view class="head"> |
|
|
<view class="head"> |
|
|
<view class="left"> |
|
|
<view class="left"> |
|
|
<view class="icon"> |
|
|
|
|
|
<uni-icons type="star-filled" size="20"></uni-icons> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="title">选择创作风格</view> |
|
|
<view class="title">选择创作风格</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -60,9 +55,6 @@ |
|
|
<view class="size"> |
|
|
<view class="size"> |
|
|
<view class="head"> |
|
|
<view class="head"> |
|
|
<view class="left"> |
|
|
<view class="left"> |
|
|
<view class="icon"> |
|
|
|
|
|
<uni-icons type="map-filled" size="20"></uni-icons> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="title">选择画布大小</view> |
|
|
<view class="title">选择画布大小</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -90,6 +82,7 @@ |
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
primaryColor: "#1a94bc", |
|
|
formData:{ |
|
|
formData:{ |
|
|
height: undefined, |
|
|
height: undefined, |
|
|
width: undefined, |
|
|
width: undefined, |
|
|
@ -396,31 +389,39 @@ |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
<style lang="scss" scoped> |
|
|
|
|
|
.container { |
|
|
|
|
|
padding: 0 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
line-height: 48rpx; |
|
|
|
|
|
} |
|
|
.size { |
|
|
.size { |
|
|
width: 92%; |
|
|
width: 100%; |
|
|
margin: 15rpx auto; |
|
|
|
|
|
|
|
|
|
|
|
.lists { |
|
|
.lists { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
justify-content: space-between; |
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
|
.item { |
|
|
.item { |
|
|
background-color: #fff; |
|
|
background-color: $uni-white; |
|
|
padding: 10rpx 20rpx; |
|
|
padding: 10rpx 20rpx; |
|
|
border-radius: 10rpx; |
|
|
border-radius: 10rpx; |
|
|
color: #666; |
|
|
color: $uni-base-color; |
|
|
border: 1rpx solid #666; |
|
|
border: 1rpx solid $uni-border-4; |
|
|
margin-bottom: 10rpx; |
|
|
margin-bottom: 10rpx; |
|
|
font-size: 24rpx; |
|
|
font-size: 24rpx; |
|
|
|
|
|
margin-right: 20rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.active { |
|
|
.active { |
|
|
color: #060101; |
|
|
color: $uni-white; |
|
|
border: 1rpx solid #F22E38; |
|
|
border: 1rpx solid $uni-primary; |
|
|
background-color: #FFDEE0; //# FFDEE0 |
|
|
background-color: $uni-primary-60; //# FFDEE0 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -428,16 +429,14 @@ |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 30rpx; |
|
|
margin-bottom: 15rpx; |
|
|
|
|
|
|
|
|
.left { |
|
|
.left { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.right { |
|
|
.right { |
|
|
@ -501,8 +500,7 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.style { |
|
|
.style { |
|
|
width: 92%; |
|
|
width: 100%; |
|
|
margin: 15rpx auto; |
|
|
|
|
|
|
|
|
|
|
|
.lists { |
|
|
.lists { |
|
|
display: flex; |
|
|
display: flex; |
|
|
@ -525,8 +523,6 @@ |
|
|
|
|
|
|
|
|
.active { |
|
|
.active { |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
|
|
|
color: #F22E38; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -534,7 +530,7 @@ |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 30rpx; |
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
|
|
|
.left { |
|
|
.left { |
|
|
display: flex; |
|
|
display: flex; |
|
|
@ -559,7 +555,7 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.keywords { |
|
|
.keywords { |
|
|
width: 92%; |
|
|
width: 100%; |
|
|
margin: 15rpx auto; |
|
|
margin: 15rpx auto; |
|
|
|
|
|
|
|
|
.lists { |
|
|
.lists { |
|
|
@ -569,11 +565,11 @@ |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
.item { |
|
|
.item { |
|
|
background-color: #fff; |
|
|
background-color: $uni-white; |
|
|
padding: 10rpx 15rpx; |
|
|
padding: 10rpx 15rpx; |
|
|
border-radius: 10rpx; |
|
|
border-radius: 10rpx; |
|
|
color: #666; |
|
|
color: $uni-base-color; |
|
|
border: 1rpx solid #666; |
|
|
border: 1rpx solid $uni-border-4; |
|
|
max-width: 128rpx; |
|
|
max-width: 128rpx; |
|
|
margin-bottom: 10rpx; |
|
|
margin-bottom: 10rpx; |
|
|
font-size: 24rpx; |
|
|
font-size: 24rpx; |
|
|
@ -583,9 +579,9 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.active { |
|
|
.active { |
|
|
color: #060101; |
|
|
color: $uni-white; |
|
|
border: 1rpx solid #F22E38; |
|
|
border: 1rpx solid $uni-primary; |
|
|
background-color: #FFDEE0; |
|
|
background-color: $uni-primary-50; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
@ -613,14 +609,15 @@ |
|
|
|
|
|
|
|
|
.title { |
|
|
.title { |
|
|
margin-right: 15rpx; |
|
|
margin-right: 15rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
line-height: 48rpx; |
|
|
|
|
|
color: $uni-primary; |
|
|
} |
|
|
} |
|
|
|
|
|
.icon { |
|
|
|
|
|
line-height: 48rpx; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
page { |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
padding-bottom: 120rpx; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-action { |
|
|
.btn-action { |
|
|
@ -678,7 +675,7 @@ |
|
|
.styleBox{ |
|
|
.styleBox{ |
|
|
white-space: nowrap; // 滚动必须加的属性 |
|
|
white-space: nowrap; // 滚动必须加的属性 |
|
|
width: 700rpx; |
|
|
width: 700rpx; |
|
|
margin-left: 30rpx; |
|
|
margin-right: 30rpx; |
|
|
//padding-right: 20rpx; |
|
|
//padding-right: 20rpx; |
|
|
|
|
|
|
|
|
.styleItem{ |
|
|
.styleItem{ |
|
|
@ -695,11 +692,15 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.styleActive { |
|
|
.styleActive { |
|
|
color: #060101; |
|
|
color: $uni-primary; |
|
|
border: 1rpx solid #F22E38; |
|
|
border: 2rpx solid $uni-primary; |
|
|
background-color: #FFDEE0; |
|
|
|
|
|
opacity: 0.9; |
|
|
.styleName { |
|
|
font-weight: 900; |
|
|
background-color: $uni-primary-60; |
|
|
|
|
|
opacity: 0.9 !important; |
|
|
|
|
|
color: $uni-white; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.styleCover{ |
|
|
.styleCover{ |
|
|
@ -708,7 +709,7 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.styleName{ |
|
|
.styleName{ |
|
|
font-size: 36rpx; |
|
|
font-size: 28rpx; |
|
|
color: #000000; |
|
|
color: #000000; |
|
|
line-height: 42rpx; |
|
|
line-height: 42rpx; |
|
|
padding: 0; |
|
|
padding: 0; |
|
|
@ -720,31 +721,40 @@ |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
background-color: #FFF; |
|
|
background-color: #FFF; |
|
|
opacity: 0.5; |
|
|
opacity: 0.5; |
|
|
top: 125rpx; |
|
|
bottom: 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.bottom { |
|
|
|
|
|
width: calc(100% - 40rpx); |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
bottom: 20rpx; |
|
|
|
|
|
} |
|
|
.startPaint{ |
|
|
.startPaint{ |
|
|
background-color: #1A96DB; |
|
|
width: 300rpx; |
|
|
border: 1px solid #F22E38; |
|
|
background-color: $uni-primary; |
|
|
border-radius: 10rpx; |
|
|
border: 1px solid $uni-primary; |
|
|
|
|
|
border-radius: 40rpx; |
|
|
|
|
|
color: $uni-white; |
|
|
|
|
|
} |
|
|
|
|
|
.startPaint::after { |
|
|
|
|
|
border: 0!important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.checkPromptText{ |
|
|
.checkPromptText{ |
|
|
font-size: 30rpx; |
|
|
font-size: 24rpx; |
|
|
color: #F22E38; |
|
|
color: $uni-primary; |
|
|
margin-left: 36rpx; |
|
|
margin-left: 36rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.checkStyleBox{ |
|
|
.checkStyleBox{ |
|
|
font-size: 30rpx; |
|
|
font-size: 24rpx; |
|
|
color: #F22E38; |
|
|
color: $uni-primary; |
|
|
margin-left: 36rpx; |
|
|
//margin-left: 36rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.checkSize{ |
|
|
.checkSize{ |
|
|
font-size: 30rpx; |
|
|
font-size: 24rpx; |
|
|
color: #F22E38; |
|
|
color: $uni-primary; |
|
|
margin-left: 36rpx; |
|
|
//margin-left: 36rpx; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|