布局修改 部分bug修复
This commit is contained in:
X1627315083
@@ -1,50 +1,26 @@
|
||||
<template>
|
||||
<div class="newProject">
|
||||
<div class="contentBox">
|
||||
<div class="content">
|
||||
<div class="title" v-show="chatOrSetting == 'chat'">{{$t('newProjectg.helpYou')}}</div>
|
||||
<div class="selectFlow">
|
||||
<div class="select">
|
||||
<div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
|
||||
<div class="select" v-show="!isCreateBox">
|
||||
<div class="title">AiDA</div>
|
||||
<div class="info">{{ $t('newProjectg.info') }}</div>
|
||||
<div class="selectList">
|
||||
<div :class="{active:selectFlow?.value == seiesDesign.value}" @click="selectSeiesOrSingle(seiesDesign)">
|
||||
<img src="@/assets/images/homePage/icon/homeCreateSeriesDesign.svg" alt="">
|
||||
<span>{{ seiesDesign.title }}</span>
|
||||
</div>
|
||||
<!-- <div class="describe">
|
||||
<p v-for="item in selectFlow.describe">{{ item }}</p>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="chatOrSetting">
|
||||
<div class="select">
|
||||
<div class="item" @click="setChatOrSetting('chat')" :class="{active:chatOrSetting == 'chat'}">{{$t('newProjectg.Chat')}}</div>
|
||||
<div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">{{$t('newProjectg.Setting')}}</div>
|
||||
<div :class="{active:selectFlow?.value == singleDesign.value}" @click="selectSeiesOrSingle(singleDesign)">
|
||||
<img src="@/assets/images/homePage/icon/homeCreateSingleDesign.svg" alt="">
|
||||
<span>{{ singleDesign.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatBox" v-show="chatOrSetting == 'chat'">
|
||||
<textarea ref="textarea" @input="inputText($event)" @keydown.enter.prevent="sendChat" placeholder="Write your message"></textarea>
|
||||
<div class="btn">
|
||||
<div class="uploadBox">
|
||||
<div class="filList">
|
||||
<div class="item" v-for="item,index in filList">
|
||||
<div>{{item.name}}</div>
|
||||
<span class="icon iconfont icon-shanchu" @click="deleteFile(item,index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fi fi-rs-paperclip-vertical">
|
||||
<input type="file" @change="handleFileUpload($event)">
|
||||
</i>
|
||||
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">{{$t('newProjectg.DeepThinking')}}</div>
|
||||
</div>
|
||||
<div class="sendBox">
|
||||
<div class="maxNum">{{ chatContent.length }}/10000</div>
|
||||
<div class="send" @click="sendChat">
|
||||
<i class="fi fi-ss-paper-plane-top"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="chatOrSetting != 'chat'" class="workspaceBox">
|
||||
<workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
|
||||
</div>
|
||||
<div class="hint" v-show="chatOrSetting == 'chat'">
|
||||
<div class="item" v-for="item in hintList[selectFlow.value]" :title="item.value" @click="addChatContent(item)">{{ item }}</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="goCreate">{{ $t('newProjectg.CreateProject') }}</div>
|
||||
</div>
|
||||
<div class="content" v-show="isCreateBox">
|
||||
<i class="fi fi-rr-arrow-small-left" @click="()=>isCreateBox = false"></i>
|
||||
|
||||
<div class="workspaceBox">
|
||||
<workspace @setProject="setProject" :httpWorkflowType="selectFlow?.value"></workspace>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,176 +50,44 @@ export default defineComponent({
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
flowList:[
|
||||
{
|
||||
title:computed(()=>t('newProjectg.SeriesDesign')),
|
||||
value:'SERIES_DESIGN',
|
||||
describe:[
|
||||
computed(()=>t('newProjectg.SeriesDesignInfo')),
|
||||
]
|
||||
},
|
||||
{
|
||||
title:computed(()=>t('newProjectg.SingleDesign')),
|
||||
value:'SINGLE_DESIGN',
|
||||
describe:[
|
||||
computed(()=>t('newProjectg.SingleDesignInfo')),
|
||||
]
|
||||
},
|
||||
],
|
||||
selectFlow:{
|
||||
title:computed(()=>t('newProjectg.SeriesDesign')),
|
||||
seiesDesign:{
|
||||
title:computed(()=>t('newProjectg.series')),
|
||||
value:'SERIES_DESIGN',
|
||||
describe:[
|
||||
computed(()=>t('newProjectg.SeriesDesignInfo')),
|
||||
]
|
||||
},
|
||||
chatContent:'',
|
||||
hintList:{
|
||||
SERIES_DESIGN:[
|
||||
computed(()=>t('newProjectg.hintListSERIES1')),
|
||||
computed(()=>t('newProjectg.hintListSERIES2')),
|
||||
computed(()=>t('newProjectg.hintListSERIES3')),
|
||||
],
|
||||
SINGLE_DESIGN:[
|
||||
computed(()=>t('newProjectg.hintListSIGNLE1')),
|
||||
computed(()=>t('newProjectg.hintListSIGNLE2')),
|
||||
computed(()=>t('newProjectg.hintListSIGNLE3')),
|
||||
],
|
||||
singleDesign:{
|
||||
title:computed(()=>t('newProjectg.single')),
|
||||
value:'SINGLE_DESIGN',
|
||||
},
|
||||
selectFlow:{
|
||||
|
||||
},
|
||||
enableThinking:false,//深度思考
|
||||
uploadFile:null as any,
|
||||
isCreateBox:false,
|
||||
loadingShow:false,
|
||||
text:'',
|
||||
filList:[] as any,
|
||||
textarea:null as any,
|
||||
chatOrSetting:'chat',
|
||||
})
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const setFlow = (item:any)=>{
|
||||
data.selectFlow = item
|
||||
}
|
||||
|
||||
const inputText = (e:any)=>{
|
||||
if(e.target.value.length <= 1000){
|
||||
data.chatContent = e.target.value
|
||||
}else{
|
||||
e.target.value = data.chatContent
|
||||
}
|
||||
e.target.style.height = `${e.target.scrollHeight}px`;
|
||||
}
|
||||
const addChatContent = (item:any)=>{
|
||||
let str = item.value
|
||||
if((data.textarea.value?.length + str.length) > 10000)return
|
||||
// data.chatContent += item
|
||||
// data.textarea.value += item
|
||||
data.chatContent = str
|
||||
data.textarea.value = str
|
||||
}
|
||||
const sendChat = ()=>{
|
||||
if(!data.chatContent)return
|
||||
data.loadingShow = true
|
||||
let fileList = JSON.parse(JSON.stringify(data.filList))
|
||||
let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
|
||||
let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
|
||||
Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
|
||||
if(rv){
|
||||
data.loadingShow = false
|
||||
let value = {
|
||||
id:rv,
|
||||
fileList:fileList,
|
||||
chatContent:data.chatContent,
|
||||
enableThinking:data.enableThinking,
|
||||
newMode:'chat',
|
||||
}
|
||||
emit('newProject',value)
|
||||
}
|
||||
}).catch(()=>{
|
||||
data.loadingShow = false
|
||||
})
|
||||
// let projectId = ''
|
||||
// const eventSource = new EventSource(`${import.meta.env.VITE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
|
||||
// eventSource.onmessage = function(event) {
|
||||
// let eventData = JSON.parse(event.data)
|
||||
// if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
|
||||
// projectId = JSON.parse(eventData.tools_data).projectId
|
||||
// }
|
||||
// };
|
||||
// eventSource.onerror = function(error) {
|
||||
// if (eventSource.readyState === EventSource.CLOSED) {
|
||||
// // data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
|
||||
// } else {
|
||||
// if(projectId){
|
||||
// emit('newProject',projectId)
|
||||
// }
|
||||
// eventSource.close()
|
||||
// }
|
||||
// data.loadingShow = false
|
||||
// };
|
||||
}
|
||||
const handleFileUpload = (event:any)=>{
|
||||
if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
|
||||
message.info(t('newProjectg.jsContent1'));
|
||||
return
|
||||
}
|
||||
let type = event.target.files[0].type.startsWith('image/')
|
||||
if(type){
|
||||
if(data.filList.filter((item:any)=>item.type == 'image').length >= 5){
|
||||
message.info(t('newProjectg.jsContent2'));
|
||||
return
|
||||
}
|
||||
}else{
|
||||
if(data.filList.filter((item:any)=>item.type == 'file').length >= 1){
|
||||
message.info(t('newProjectg.jsContent3'));
|
||||
return
|
||||
}
|
||||
}
|
||||
data.loadingShow = true
|
||||
const formData = new FormData();
|
||||
formData.append('file', event.target.files[0]);
|
||||
let config:any = {
|
||||
headers:{'Content-Type':'multipart/form-data','Accept':'*/*' },
|
||||
params:formData,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.llmUploadFile,formData,config)
|
||||
.then((rv: any) => {
|
||||
let obj = {
|
||||
name:event.target.files[0].name,
|
||||
type:type?'image':'file',
|
||||
minioPath:rv[0],
|
||||
url:rv[1],
|
||||
}
|
||||
data.filList.push(obj)
|
||||
data.loadingShow = false
|
||||
}
|
||||
).catch(rv=>{
|
||||
data.loadingShow = false
|
||||
})
|
||||
}
|
||||
const deleteFile = (item:any,index:number)=>{
|
||||
data.filList.splice(index,1)
|
||||
}
|
||||
const setChatOrSetting = (str:any)=>{
|
||||
data.chatOrSetting = str
|
||||
}
|
||||
const setProject = (item:any)=>{
|
||||
emit('newProject',item)
|
||||
// router.push(`home?history=${item.id}`)
|
||||
}
|
||||
const selectSeiesOrSingle = (type:any)=>{
|
||||
data.selectFlow = type
|
||||
}
|
||||
const goCreate = ()=>{
|
||||
if(!data.selectFlow?.value){
|
||||
return message.info(t('newProjectg.selectDesignType'))
|
||||
}
|
||||
data.isCreateBox = true
|
||||
}
|
||||
onMounted(()=>{
|
||||
store.commit('createProbject')
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setFlow,
|
||||
inputText,
|
||||
addChatContent,
|
||||
sendChat,
|
||||
handleFileUpload,
|
||||
deleteFile,
|
||||
setChatOrSetting,
|
||||
setProject,
|
||||
selectSeiesOrSingle,
|
||||
goCreate,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@@ -264,211 +108,97 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .content{
|
||||
// background: red;
|
||||
width: 88rem;
|
||||
height: 100%;
|
||||
> .select{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> .title{
|
||||
font-size: 4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .info{
|
||||
margin-top: 1.2rem;
|
||||
font-weight: 600;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
> .selectList{
|
||||
margin-top: 4.8rem;
|
||||
display: flex;
|
||||
> div{
|
||||
margin-right: 6rem;
|
||||
border-radius: 3.2rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid #D9D9D9;
|
||||
background-color: #fff;
|
||||
height: 6.5rem;
|
||||
padding: 0 2.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.active{
|
||||
background-color: #efeff1;
|
||||
}
|
||||
> img{
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> span{
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
color: #3B3B3B;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.gallery_btn{
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
> .content{
|
||||
// background: red;
|
||||
// width: 88rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> i{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
transform: translateX(-100%);
|
||||
left: -2.6rem;
|
||||
top: 1.8rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
font-size: 4rem;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
> .title{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
> .workspaceBox{
|
||||
flex: 1;
|
||||
border-radius: 2.4rem;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid #0000001a;
|
||||
// height: 89rem;
|
||||
height: 100%;
|
||||
// flex: 1;
|
||||
border-radius: 1.6rem;
|
||||
padding: 3.2rem 0rem;
|
||||
border: 2px solid #D0D0D0;
|
||||
:deep(.workspace){
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
> .selectFlow{
|
||||
margin-top: 4.8rem;
|
||||
width: 100%;
|
||||
border-radius: 2.4rem;
|
||||
// border: 1px solid #0000001a;
|
||||
// padding: 1.2rem;
|
||||
> .select{
|
||||
border: 1px solid #0000001a;
|
||||
border-radius: 2.4rem;
|
||||
display: flex;
|
||||
padding: .2rem;
|
||||
border-radius: 2rem;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
justify-content: space-between;
|
||||
border-radius: 2.2rem;
|
||||
font-size: 1.6rem;
|
||||
padding: .6rem .8rem;
|
||||
min-width: 25%;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #efeff1;
|
||||
color: #3f3f46;
|
||||
height: 100%;
|
||||
> .workspaceBox{
|
||||
> div{
|
||||
padding: 0rem 2.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .describe{
|
||||
margin-top: 1.6rem;
|
||||
margin-left: .8rem;
|
||||
> p{
|
||||
margin: 0;
|
||||
color: #71717a;
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .chatOrSetting{
|
||||
margin-top: 2.4rem;
|
||||
width: min-content;
|
||||
margin-left: auto;
|
||||
> .select{
|
||||
border: 1px solid #0000001a;
|
||||
border-radius: 2.4rem;
|
||||
display: flex;
|
||||
padding: .2rem;
|
||||
border-radius: 2rem;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
justify-content: space-between;
|
||||
border-radius: 2.2rem;
|
||||
font-size: 1.6rem;
|
||||
padding: .6rem .8rem;
|
||||
min-width: 10rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #efeff1;
|
||||
color: #3f3f46;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .chatBox{
|
||||
margin-top: .4rem;
|
||||
border-radius: 2.4rem;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
> textarea{
|
||||
padding: 1.6rem 2rem 0;
|
||||
background: #f5f5f5;
|
||||
width: 100%;
|
||||
min-height: 7.2rem;
|
||||
border-radius: 2.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2rem;
|
||||
font-size: 1.4rem;
|
||||
resize: none;
|
||||
border: none;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
> .btn{
|
||||
padding: 0 1.2rem 1.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .uploadBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .filList{
|
||||
display: flex;
|
||||
> .item{
|
||||
height: 3rem;
|
||||
padding: .5rem 1rem;
|
||||
background: #efeff1;
|
||||
border-radius: .5rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
display: flex;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 10rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
> span{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .enableThinking{
|
||||
width: 10rem;
|
||||
padding: .2rem .4rem;
|
||||
margin-left: 1rem;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
border: 1px solid #000;
|
||||
border-radius: .4rem;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #000;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
i{
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
> input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
&::-webkit-file-upload-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .sendBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .maxNum{
|
||||
font-size: 1.2rem;
|
||||
margin-right: .8rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .hint{
|
||||
display: flex;
|
||||
margin-top: 2.4rem;
|
||||
> div{
|
||||
background: #efeff1;
|
||||
width: 25rem;
|
||||
// height: 4.8rem;
|
||||
margin-right: 1.2rem;
|
||||
border-radius: 1.6rem;
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
padding: 1.2rem;
|
||||
white-space: nowrap; /* 文本不换行 */
|
||||
overflow: hidden; /* 溢出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
&:hover{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
:first-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
477
src/component/home/newProject/indexCopy.vue
Normal file
477
src/component/home/newProject/indexCopy.vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<template>
|
||||
<div class="newProject">
|
||||
<div class="contentBox">
|
||||
<div class="content">
|
||||
<div class="title" v-show="chatOrSetting == 'chat'">{{$t('newProjectg.helpYou')}}</div>
|
||||
<div class="selectFlow">
|
||||
<div class="select">
|
||||
<div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
|
||||
</div>
|
||||
<!-- <div class="describe">
|
||||
<p v-for="item in selectFlow.describe">{{ item }}</p>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="chatOrSetting">
|
||||
<div class="select">
|
||||
<div class="item" @click="setChatOrSetting('chat')" :class="{active:chatOrSetting == 'chat'}">{{$t('newProjectg.Chat')}}</div>
|
||||
<div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">{{$t('newProjectg.Setting')}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="chatBox" v-show="chatOrSetting == 'chat'">
|
||||
<textarea ref="textarea" @input="inputText($event)" @keydown.enter.prevent="sendChat" placeholder="Write your message"></textarea>
|
||||
<div class="btn">
|
||||
<div class="uploadBox">
|
||||
<div class="filList">
|
||||
<div class="item" v-for="item,index in filList">
|
||||
<div>{{item.name}}</div>
|
||||
<span class="icon iconfont icon-shanchu" @click="deleteFile(item,index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fi fi-rs-paperclip-vertical">
|
||||
<input type="file" @change="handleFileUpload($event)">
|
||||
</i>
|
||||
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">{{$t('newProjectg.DeepThinking')}}</div>
|
||||
</div>
|
||||
<div class="sendBox">
|
||||
<div class="maxNum">{{ chatContent.length }}/10000</div>
|
||||
<div class="send" @click="sendChat">
|
||||
<i class="fi fi-ss-paper-plane-top"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="chatOrSetting != 'chat'" class="workspaceBox">123
|
||||
<workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
|
||||
</div>
|
||||
<div class="hint" v-show="chatOrSetting == 'chat'">
|
||||
<div class="item" v-for="item in hintList[selectFlow.value]" :title="item.value" @click="addChatContent(item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {getCookie,clonAllCookie} from '@/tool/cookie'
|
||||
import router from '@/router';
|
||||
import workspace from './workspace.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:['newProject'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
flowList:[
|
||||
{
|
||||
title:computed(()=>t('newProjectg.SeriesDesign')),
|
||||
value:'SERIES_DESIGN',
|
||||
describe:[
|
||||
computed(()=>t('newProjectg.SeriesDesignInfo')),
|
||||
]
|
||||
},
|
||||
{
|
||||
title:computed(()=>t('newProjectg.SingleDesign')),
|
||||
value:'SINGLE_DESIGN',
|
||||
describe:[
|
||||
computed(()=>t('newProjectg.SingleDesignInfo')),
|
||||
]
|
||||
},
|
||||
],
|
||||
selectFlow:{
|
||||
title:computed(()=>t('newProjectg.SeriesDesign')),
|
||||
value:'SERIES_DESIGN',
|
||||
describe:[
|
||||
computed(()=>t('newProjectg.SeriesDesignInfo')),
|
||||
]
|
||||
},
|
||||
chatContent:'',
|
||||
hintList:{
|
||||
SERIES_DESIGN:[
|
||||
computed(()=>t('newProjectg.hintListSERIES1')),
|
||||
computed(()=>t('newProjectg.hintListSERIES2')),
|
||||
computed(()=>t('newProjectg.hintListSERIES3')),
|
||||
],
|
||||
SINGLE_DESIGN:[
|
||||
computed(()=>t('newProjectg.hintListSIGNLE1')),
|
||||
computed(()=>t('newProjectg.hintListSIGNLE2')),
|
||||
computed(()=>t('newProjectg.hintListSIGNLE3')),
|
||||
],
|
||||
},
|
||||
enableThinking:false,//深度思考
|
||||
uploadFile:null as any,
|
||||
loadingShow:false,
|
||||
text:'',
|
||||
filList:[] as any,
|
||||
textarea:null as any,
|
||||
// chatOrSetting:'chat',
|
||||
chatOrSetting:'setting',
|
||||
})
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const setFlow = (item:any)=>{
|
||||
data.selectFlow = item
|
||||
}
|
||||
|
||||
const inputText = (e:any)=>{
|
||||
if(e.target.value.length <= 1000){
|
||||
data.chatContent = e.target.value
|
||||
}else{
|
||||
e.target.value = data.chatContent
|
||||
}
|
||||
e.target.style.height = `${e.target.scrollHeight}px`;
|
||||
}
|
||||
const addChatContent = (item:any)=>{
|
||||
let str = item.value
|
||||
if((data.textarea.value?.length + str.length) > 10000)return
|
||||
// data.chatContent += item
|
||||
// data.textarea.value += item
|
||||
data.chatContent = str
|
||||
data.textarea.value = str
|
||||
}
|
||||
const sendChat = ()=>{
|
||||
if(!data.chatContent)return
|
||||
data.loadingShow = true
|
||||
let fileList = JSON.parse(JSON.stringify(data.filList))
|
||||
let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
|
||||
let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
|
||||
Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
|
||||
if(rv){
|
||||
data.loadingShow = false
|
||||
let value = {
|
||||
id:rv,
|
||||
fileList:fileList,
|
||||
chatContent:data.chatContent,
|
||||
enableThinking:data.enableThinking,
|
||||
newMode:'chat',
|
||||
}
|
||||
emit('newProject',value)
|
||||
}
|
||||
}).catch(()=>{
|
||||
data.loadingShow = false
|
||||
})
|
||||
// let projectId = ''
|
||||
// const eventSource = new EventSource(`${import.meta.env.VITE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
|
||||
// eventSource.onmessage = function(event) {
|
||||
// let eventData = JSON.parse(event.data)
|
||||
// if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
|
||||
// projectId = JSON.parse(eventData.tools_data).projectId
|
||||
// }
|
||||
// };
|
||||
// eventSource.onerror = function(error) {
|
||||
// if (eventSource.readyState === EventSource.CLOSED) {
|
||||
// // data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
|
||||
// } else {
|
||||
// if(projectId){
|
||||
// emit('newProject',projectId)
|
||||
// }
|
||||
// eventSource.close()
|
||||
// }
|
||||
// data.loadingShow = false
|
||||
// };
|
||||
}
|
||||
const handleFileUpload = (event:any)=>{
|
||||
if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
|
||||
message.info(t('newProjectg.jsContent1'));
|
||||
return
|
||||
}
|
||||
let type = event.target.files[0].type.startsWith('image/')
|
||||
if(type){
|
||||
if(data.filList.filter((item:any)=>item.type == 'image').length >= 5){
|
||||
message.info(t('newProjectg.jsContent2'));
|
||||
return
|
||||
}
|
||||
}else{
|
||||
if(data.filList.filter((item:any)=>item.type == 'file').length >= 1){
|
||||
message.info(t('newProjectg.jsContent3'));
|
||||
return
|
||||
}
|
||||
}
|
||||
data.loadingShow = true
|
||||
const formData = new FormData();
|
||||
formData.append('file', event.target.files[0]);
|
||||
let config:any = {
|
||||
headers:{'Content-Type':'multipart/form-data','Accept':'*/*' },
|
||||
params:formData,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.llmUploadFile,formData,config)
|
||||
.then((rv: any) => {
|
||||
let obj = {
|
||||
name:event.target.files[0].name,
|
||||
type:type?'image':'file',
|
||||
minioPath:rv[0],
|
||||
url:rv[1],
|
||||
}
|
||||
data.filList.push(obj)
|
||||
data.loadingShow = false
|
||||
}
|
||||
).catch(rv=>{
|
||||
data.loadingShow = false
|
||||
})
|
||||
}
|
||||
const deleteFile = (item:any,index:number)=>{
|
||||
data.filList.splice(index,1)
|
||||
}
|
||||
const setChatOrSetting = (str:any)=>{
|
||||
data.chatOrSetting = str
|
||||
}
|
||||
const setProject = (item:any)=>{
|
||||
emit('newProject',item)
|
||||
// router.push(`home?history=${item.id}`)
|
||||
}
|
||||
onMounted(()=>{
|
||||
store.commit('createProbject')
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setFlow,
|
||||
inputText,
|
||||
addChatContent,
|
||||
sendChat,
|
||||
handleFileUpload,
|
||||
deleteFile,
|
||||
setChatOrSetting,
|
||||
setProject,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.newProject{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .contentBox{
|
||||
width: 100%;
|
||||
// height: calc(100% - 3.9rem);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> .content{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> .title{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
> .workspaceBox{
|
||||
flex: 1;
|
||||
border-radius: 2.4rem;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid #0000001a;
|
||||
:deep(.workspace){
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
> .selectFlow{
|
||||
margin-top: 4.8rem;
|
||||
width: 100%;
|
||||
border-radius: 2.4rem;
|
||||
// border: 1px solid #0000001a;
|
||||
// padding: 1.2rem;
|
||||
> .select{
|
||||
border: 1px solid #0000001a;
|
||||
border-radius: 2.4rem;
|
||||
display: flex;
|
||||
padding: .2rem;
|
||||
border-radius: 2rem;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
justify-content: space-between;
|
||||
border-radius: 2.2rem;
|
||||
font-size: 1.6rem;
|
||||
padding: .6rem .8rem;
|
||||
min-width: 25%;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #efeff1;
|
||||
color: #3f3f46;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .describe{
|
||||
margin-top: 1.6rem;
|
||||
margin-left: .8rem;
|
||||
> p{
|
||||
margin: 0;
|
||||
color: #71717a;
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .chatOrSetting{
|
||||
margin-top: 2.4rem;
|
||||
width: min-content;
|
||||
margin-left: auto;
|
||||
> .select{
|
||||
border: 1px solid #0000001a;
|
||||
border-radius: 2.4rem;
|
||||
display: flex;
|
||||
padding: .2rem;
|
||||
border-radius: 2rem;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
justify-content: space-between;
|
||||
border-radius: 2.2rem;
|
||||
font-size: 1.6rem;
|
||||
padding: .6rem .8rem;
|
||||
min-width: 10rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #efeff1;
|
||||
color: #3f3f46;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .chatBox{
|
||||
margin-top: .4rem;
|
||||
border-radius: 2.4rem;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
> textarea{
|
||||
padding: 1.6rem 2rem 0;
|
||||
background: #f5f5f5;
|
||||
width: 100%;
|
||||
min-height: 7.2rem;
|
||||
border-radius: 2.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2rem;
|
||||
font-size: 1.4rem;
|
||||
resize: none;
|
||||
border: none;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
> .btn{
|
||||
padding: 0 1.2rem 1.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .uploadBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .filList{
|
||||
display: flex;
|
||||
> .item{
|
||||
height: 3rem;
|
||||
padding: .5rem 1rem;
|
||||
background: #efeff1;
|
||||
border-radius: .5rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
display: flex;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 10rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
> span{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .enableThinking{
|
||||
width: 10rem;
|
||||
padding: .2rem .4rem;
|
||||
margin-left: 1rem;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
border: 1px solid #000;
|
||||
border-radius: .4rem;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #000;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
i{
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
> input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
&::-webkit-file-upload-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .sendBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .maxNum{
|
||||
font-size: 1.2rem;
|
||||
margin-right: .8rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .hint{
|
||||
display: flex;
|
||||
margin-top: 2.4rem;
|
||||
> div{
|
||||
background: #efeff1;
|
||||
width: 25rem;
|
||||
// height: 4.8rem;
|
||||
margin-right: 1.2rem;
|
||||
border-radius: 1.6rem;
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
padding: 1.2rem;
|
||||
white-space: nowrap; /* 文本不换行 */
|
||||
overflow: hidden; /* 溢出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
&:hover{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
:first-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,7 @@
|
||||
v-model:visible="habitSetStyle"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
height="auto"
|
||||
:get-container="() => $refs.projectSettingModal"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -16,7 +17,7 @@
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cleardata()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
@@ -25,7 +26,7 @@
|
||||
</div>
|
||||
<div class="designOpenrtion_content">
|
||||
<div class="modal_title_text">
|
||||
<div>Setting</div>
|
||||
<div>{{ $t('newProjectg.projectSetting') }}</div>
|
||||
</div>
|
||||
<div class="workspaceBox">
|
||||
<workspace ref="workspace" :status="'edit'" @setProject="setProject" :httpWorkflowType="projectData.process"></workspace>
|
||||
@@ -43,7 +44,6 @@ import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import workspace from './workspace.vue'
|
||||
import { init } from 'echarts/core';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,
|
||||
@@ -65,7 +65,6 @@ export default defineComponent({
|
||||
data.isShowMark = boolean
|
||||
}
|
||||
const init = (value:any)=>{
|
||||
console.log(value)
|
||||
data.projectData = value
|
||||
data.habitSetStyle = true
|
||||
getHistory(value.id)
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="workspace">
|
||||
<div class="workspaceBox">
|
||||
<div class="title marginBottom">
|
||||
<div class="titleText">{{$t('Habit.generationSetting')}}</div>
|
||||
</div>
|
||||
<div class="projectName marginBottom" v-if="show.title">
|
||||
<div class="text">{{$t('Habit.ProjectName')}}: <span style="color: red;">*</span></div>
|
||||
<div class="input">
|
||||
@@ -35,18 +38,19 @@
|
||||
</div>
|
||||
<div class="style marginBottom" v-if="show.style">
|
||||
<div class="text">{{$t('Habit.Style')}}：</div>
|
||||
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
|
||||
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||||
<div class="center">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
|
||||
<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||||
</div>
|
||||
<div class="style marginBottom brand">
|
||||
<div class="style brand marginBottom">
|
||||
<div class="text">{{$t('Habit.Brand')}}:</div>
|
||||
<div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg"></div>
|
||||
<!-- <div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg">{{ selectObject.userBrandDnaName }}</div> -->
|
||||
<div class="gallery_btn" style="line-height: 5rem;" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
|
||||
<div class="gallery_btn" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
|
||||
</div>
|
||||
<div class="brandImg" v-if="selectObject.userBrandDna"><img :src="selectObject.userBrandDnaImg"></div>
|
||||
<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
|
||||
<div class="text">
|
||||
{{$t('Habit.BrandStrength')}}:
|
||||
<div class="text" style="font-size: 1.6rem;">
|
||||
{{$t('Habit.BrandStrength')}}: ({{ `${selectObject.brandPercentage || 0}%` }})
|
||||
|
||||
</div>
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="selectObject.brandPercentage"
|
||||
@@ -54,14 +58,23 @@
|
||||
>
|
||||
</a-slider>
|
||||
</div>
|
||||
<div class="position marginBottom" v-show="show.position" v-if="httpWorkflowType == 'SINGLE_DESIGN'">
|
||||
<div class="text">
|
||||
{{$t('Habit.Category')}}:
|
||||
</div>
|
||||
<generalMenu style="width:100%;" :ulStyle="{background: '#fff'}" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
|
||||
</div>
|
||||
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
||||
<div class="text" style="margin-bottom: 1rem;">
|
||||
{{$t('Habit.GenerationParameters')}}:
|
||||
</div>
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="selectObject.systemDesignerPercentage"
|
||||
:tip-formatter="formatter"
|
||||
:tooltipVisible="false"
|
||||
>
|
||||
</a-slider>
|
||||
<div class="text">
|
||||
<div class="text" style="margin-top: 1rem; font-size: 1.6rem;">
|
||||
<div class="left">
|
||||
{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
|
||||
</div>
|
||||
@@ -71,14 +84,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position marginBottom" style="display: flex; align-items: center;justify-content: space-between;" v-show="show.position" v-if="httpWorkflowType == 'SINGLE_DESIGN'">
|
||||
<div class="text">
|
||||
{{$t('Habit.Category')}}:
|
||||
</div>
|
||||
<generalMenu style="width:80%" :ulStyle="{background: '#fff'}" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
|
||||
</div>
|
||||
<div class="complete">
|
||||
<div class="gallery_btn" @click="complete">{{$t('HomeView.Start')}}</div>
|
||||
<div class="gallery_btn" style="padding: 0rem 2.2rem; line-height: 4.5rem;font-weight: 500;" @click="complete">{{$t('HomeView.Start')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
|
||||
@@ -263,7 +270,9 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
onMounted(()=>{
|
||||
store.commit('createProbject')
|
||||
if(props.status != 'edit'){
|
||||
store.commit('createProbject')
|
||||
}
|
||||
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
|
||||
data.selectObject.style = store.state.UserHabit?.mannequinStyle?.[0]?.value
|
||||
data.selectObject.styleName = store.state.UserHabit?.mannequinStyle?.[0]?.name
|
||||
@@ -315,17 +324,37 @@ export default defineComponent({
|
||||
font-size: 1.8rem;
|
||||
padding: 1.2rem;
|
||||
> .workspaceBox{
|
||||
width: 55rem;
|
||||
width: 52rem;
|
||||
height: 100%;
|
||||
padding: 0 5rem;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
// align-content: flex-start;
|
||||
> div{
|
||||
// padding: 0 5rem;
|
||||
}
|
||||
> .title{
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
align-items: flex-end;
|
||||
// height: 2.4rem;
|
||||
> div{
|
||||
font-size: 2.4rem;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
> span{
|
||||
font-size: 1.4rem;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
> .marginBottom{
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
// width: 44%;
|
||||
}
|
||||
> .brand{
|
||||
@@ -337,6 +366,16 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
> .brandImg{
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin: 1rem 0;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .title{
|
||||
font-size: 2.7rem;
|
||||
> span{
|
||||
@@ -346,17 +385,17 @@ export default defineComponent({
|
||||
}
|
||||
> .projectName{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> .text{
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .input{
|
||||
// flex: 1;
|
||||
width: 80%;
|
||||
padding: 1rem 2rem;
|
||||
width: 100%;
|
||||
padding: calc(1.7rem - 2px * 2) 2.7rem;
|
||||
// padding: 2rem 2.7rem;
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.8rem;
|
||||
border-radius: 1.6rem;
|
||||
border: 2px solid #D0D0D0;
|
||||
display: flex;
|
||||
@@ -372,20 +411,29 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.text{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
> .gender{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .text{
|
||||
width: 8rem;
|
||||
// width: 8rem;
|
||||
}
|
||||
> .radio{
|
||||
display: flex;
|
||||
margin-left: 4.5rem;
|
||||
margin-left: 4.2rem;
|
||||
> label{
|
||||
display: flex;
|
||||
margin-right: 4rem;
|
||||
>input{
|
||||
margin-right: 1.5rem;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
> span{
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -395,6 +443,22 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.gallery_btn{
|
||||
line-height: 3.6rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
border-radius: .8rem;
|
||||
}
|
||||
> .center{
|
||||
margin-right: auto;
|
||||
margin-left: 3rem;
|
||||
min-width: 10rem;
|
||||
font-size: 1.4rem;
|
||||
border-radius: .8rem;
|
||||
line-height: 3.6rem;
|
||||
background-color: #ebebeb;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
> .systemDesigner{
|
||||
> .text{
|
||||
@@ -416,12 +480,16 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
> .position{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .text{
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
:deep(.generalMenu_printModel){
|
||||
position: relative;
|
||||
margin: 0;
|
||||
height: 6rem;
|
||||
font-weight: 500;
|
||||
> div,> ul{
|
||||
width: 100%;
|
||||
border-radius: 1.6rem;
|
||||
@@ -431,6 +499,7 @@ export default defineComponent({
|
||||
}
|
||||
> .complete{
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
text-align: right;
|
||||
> div{
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user