Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front
This commit is contained in:
X1627315083@163.com
153
src/views/canvas/components/card.vue
Normal file
153
src/views/canvas/components/card.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<svg-icon :name="currentComponent.type" color="#fff" />
|
||||
<span>{{ currentComponent.title }}</span>
|
||||
<div class="add" @click="emit('add')"><svg-icon name="add" size="14" /></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<component :is="currentComponent.component" ref="componentRef" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button @click="onGenerateClick">
|
||||
<svg-icon name="xingxing" size="16" />
|
||||
<span>Generate</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, markRaw, onMounted } from 'vue'
|
||||
import ToRealStyle from './cards/to-real-style.vue'
|
||||
import SceneComposition from './cards/scene-composition.vue'
|
||||
const components = [
|
||||
{
|
||||
type: 'to-real-style',
|
||||
title: 'To Real Style',
|
||||
component: ToRealStyle
|
||||
},
|
||||
{
|
||||
type: 'scene-composition',
|
||||
title: 'Scene Composition',
|
||||
component: SceneComposition
|
||||
},
|
||||
{
|
||||
type: 'color-palette',
|
||||
title: 'Color Palette',
|
||||
component: SceneComposition
|
||||
},
|
||||
{
|
||||
type: 'to-video',
|
||||
title: 'To Video',
|
||||
component: SceneComposition
|
||||
},
|
||||
{
|
||||
type: 'to-3d-model',
|
||||
title: 'To 3D Model',
|
||||
component: SceneComposition
|
||||
},
|
||||
{
|
||||
type: 'add-print',
|
||||
title: 'Add Print',
|
||||
component: SceneComposition
|
||||
},
|
||||
{
|
||||
type: 'edit-material',
|
||||
title: 'Edit Material',
|
||||
component: SceneComposition
|
||||
}
|
||||
]
|
||||
const emit = defineEmits(['add', 'generate'])
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'to-real-style'
|
||||
}
|
||||
})
|
||||
const currentComponent = computed(() => {
|
||||
return components.find((item) => item.type === props.type)
|
||||
})
|
||||
const componentRef = ref(null)
|
||||
const onGenerateClick = () => {
|
||||
const data = { ...componentRef.value.data }
|
||||
console.log(data)
|
||||
emit('generate')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
width: 25rem;
|
||||
height: auto;
|
||||
--border-radius: 1.6rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #fff;
|
||||
> .header {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
height: 5rem;
|
||||
background: #ff7a51;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 1.6rem;
|
||||
position: relative;
|
||||
> .c-svg {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
> span {
|
||||
font-family: Semibold;
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
> .add {
|
||||
position: absolute;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
border: 0.2rem solid #fff;
|
||||
bottom: -1.6rem;
|
||||
right: -1.6rem;
|
||||
background-color: #ed8936;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 2.5rem;
|
||||
box-shadow: 0 0.8rem 2rem 0 #71809633;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .body {
|
||||
padding: 1.6rem 1.3rem;
|
||||
}
|
||||
> .footer {
|
||||
margin-bottom: 1.6rem;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: 0 1.3rem;
|
||||
> button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 11rem;
|
||||
height: 2.8rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #fffcf4;
|
||||
border: 1px solid #ffcf90;
|
||||
font-size: 1.2rem;
|
||||
font-family: SemiBold;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
> .c-svg {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/views/canvas/components/cards/scene-composition.vue
Normal file
22
src/views/canvas/components/cards/scene-composition.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<!-- 场景构图 -->
|
||||
<div class="scene-composition"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, markRaw, onMounted } from 'vue'
|
||||
import { useGlobalStore } from '@/stores'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const globalStore = useGlobalStore()
|
||||
onMounted(() => {
|
||||
globalStore.setHomeLeftNavCollapse(true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.scene-composition {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
39
src/views/canvas/components/cards/to-real-style.vue
Normal file
39
src/views/canvas/components/cards/to-real-style.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<!-- 转换为真实图 -->
|
||||
<div class="to-real-style">
|
||||
<my-textarea v-model="data.prompt" />
|
||||
<pixel-ratio-selection v-model="data.pixelRatio" />
|
||||
<upload-file v-model="data.file" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, reactive, onMounted, defineExpose } from 'vue'
|
||||
import myTextarea from '../my-textarea.vue'
|
||||
import pixelRatioSelection from '../pixel-ratio-selection.vue'
|
||||
import uploadFile from '../upload-file.vue'
|
||||
import { useGlobalStore } from '@/stores'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const globalStore = useGlobalStore()
|
||||
onMounted(() => {
|
||||
globalStore.setHomeLeftNavCollapse(true)
|
||||
})
|
||||
const data = reactive({
|
||||
prompt: '123123',
|
||||
pixelRatio: '1:1',
|
||||
file: null
|
||||
})
|
||||
|
||||
defineExpose({ data })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.to-real-style {
|
||||
width: 100%;
|
||||
> * {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
src/views/canvas/components/my-textarea.vue
Normal file
84
src/views/canvas/components/my-textarea.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="my-textarea">
|
||||
<textarea
|
||||
:placeholder="placeholder"
|
||||
:value="modelValue"
|
||||
@input="onInput"
|
||||
@change="onChange"
|
||||
></textarea>
|
||||
<div class="bths">
|
||||
<button><svg-icon name="mobang" size="10" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, markRaw, onMounted } from 'vue'
|
||||
const emit = defineEmits(['update:modelValue', 'input', 'change'])
|
||||
const props = defineProps({
|
||||
modelValue: { type: String },
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Enter the scene you want to describe...'
|
||||
}
|
||||
})
|
||||
const onInput = (e) => {
|
||||
const value = e.target.value
|
||||
emit('update:modelValue', value)
|
||||
emit('input', value)
|
||||
}
|
||||
const onChange = (e) => {
|
||||
emit('change', e.target.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.my-textarea {
|
||||
width: 100%;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #e4e4e7;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> textarea {
|
||||
padding: 0 0.5rem;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: Medium;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
&::placeholder {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.4rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0.4rem;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
> .bths {
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
> button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border-radius: 0.4rem;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #e4e4e7;
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
src/views/canvas/components/pixel-ratio-selection.vue
Normal file
67
src/views/canvas/components/pixel-ratio-selection.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="pixel-ratio-selection">
|
||||
<div
|
||||
v-for="v in list"
|
||||
:key="v"
|
||||
:class="{ active: v === modelValue }"
|
||||
@click="onChange(v)"
|
||||
:style="{ '--w': v.split(':')[0], '--h': v.split(':')[1] }"
|
||||
>
|
||||
{{ v }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, defineExpose } from 'vue'
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
const props = defineProps({
|
||||
modelValue: { type: String },
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => ['1:1', '4:3', '3:4', '16:9']
|
||||
}
|
||||
})
|
||||
const data = reactive({})
|
||||
const onChange = (v) => {
|
||||
emit('update:modelValue', v)
|
||||
emit('change', v)
|
||||
}
|
||||
defineExpose({ data })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pixel-ratio-selection {
|
||||
width: 100%;
|
||||
height: 3.4rem;
|
||||
border-radius: 0.6rem;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.7rem;
|
||||
> div {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
color: #7c7c7c;
|
||||
height: 2.1rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.active {
|
||||
border-radius: 0.4rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
border-radius: 0.1rem;
|
||||
border: 0.1rem solid #7c7c7c;
|
||||
width: calc(var(--w) / max(var(--w), var(--h)) * 1rem);
|
||||
height: calc(var(--h) / max(var(--w), var(--h)) * 1rem);
|
||||
margin-right: 0.4rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/views/canvas/components/upload-file.vue
Normal file
59
src/views/canvas/components/upload-file.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="upload-file">
|
||||
<div class="icon"><svg-icon name="upload" size="17" /></div>
|
||||
<span class="txt">Upload your files</span>
|
||||
<button class="btn">Select File</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, defineExpose } from 'vue'
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
const props = defineProps({
|
||||
modelValue: { type: String },
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => ['1:1', '4:3', '3:4', '16:9']
|
||||
}
|
||||
})
|
||||
const data = reactive({})
|
||||
const onChange = (v) => {
|
||||
emit('update:modelValue', v)
|
||||
emit('change', v)
|
||||
}
|
||||
defineExpose({ data })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.upload-file {
|
||||
width: 100%;
|
||||
height: 9.9rem;
|
||||
border-radius: 1rem;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// padding: 0 1.7rem;
|
||||
> .txt {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
color: #7c7c7c;
|
||||
}
|
||||
> button {
|
||||
box-shadow: 0px 0.75px 0px 0px #00000005;
|
||||
min-width: 3.9rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 0.23rem;
|
||||
background-color: #fff;
|
||||
font-size: 0.6rem;
|
||||
color: #000;
|
||||
border: 0.05rem solid #d9d9d9;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
35
src/views/canvas/index.vue
Normal file
35
src/views/canvas/index.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="canvas">
|
||||
<card type="to-real-style" />
|
||||
<card type="scene-composition" />
|
||||
<card type="color-palette" />
|
||||
<card type="to-video" />
|
||||
<card type="to-3d-model" />
|
||||
<card type="add-print" />
|
||||
<card type="edit-material" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import card from './components/card.vue'
|
||||
import { computed, ref, markRaw, onMounted } from 'vue'
|
||||
import { useGlobalStore } from '@/stores'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const globalStore = useGlobalStore()
|
||||
onMounted(() => {
|
||||
globalStore.setHomeLeftNavCollapse(true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.canvas {
|
||||
background-color: #fcf8f1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
padding: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,103 +1,200 @@
|
||||
<template>
|
||||
<div class="assist-input-wrapper flex flex-col">
|
||||
<textarea
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="inputValue"
|
||||
:placeholder="$t('Input.placeholder')"
|
||||
/>
|
||||
<div class="operate flex align-center">
|
||||
<div class="attach flex flex-center">
|
||||
<img src="@/assets/icons/attach.svg" alt="" />
|
||||
<div class="scroll-content flex-col">
|
||||
<!-- 图片预览区域 -->
|
||||
<div v-if="uploadedImages.length > 0" class="image-preview-list flex wrap">
|
||||
<div v-for="(image, index) in uploadedImages" :key="index" class="image-preview-item">
|
||||
<img :src="image.url" :alt="image.name" class="preview-image" />
|
||||
<div class="image-remove-btn" @click="removeImage(index)">
|
||||
<SvgIcon name="delete" size="16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-select v-model="typeValue" :placeholder="$t('Input.typePlaceholder')">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
class="input-option"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="areaValue" :placeholder="$t('Input.areaPlaceholder')">
|
||||
<el-option
|
||||
v-for="item in areaOptions"
|
||||
class="input-option"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="fida-style-select-wrapper">
|
||||
<el-select
|
||||
v-model="styleValue"
|
||||
:placeholder="$t('Input.stylePlaceholder')"
|
||||
@focus="openStylePopup"
|
||||
<!-- 编辑区域 -->
|
||||
<div
|
||||
ref="editorRef"
|
||||
class="editor"
|
||||
contenteditable="true"
|
||||
:placeholder="$t('Input.placeholder')"
|
||||
@input="handleEditorInput"
|
||||
@keydown="handleEditorKeydown"
|
||||
@paste="handleEditorPaste"
|
||||
>
|
||||
<!-- <Tag v-if="showReportTag" /> -->
|
||||
<div class="editor-tag report-btn flex-center" v-if="showReportTag" contenteditable="false">
|
||||
<SvgIcon class="light-icon" name="light" size="16" />
|
||||
<span>{{ $t('Input.trendingReport') }}</span>
|
||||
<SvgIcon
|
||||
class="close-icon"
|
||||
name="closeTransparent"
|
||||
size="24"
|
||||
color="#e6e6e6"
|
||||
@click="showReportTag = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operate flex space-between">
|
||||
<div class="left flex align-center">
|
||||
<div class="attach flex flex-center" @click="triggerFileUpload">
|
||||
<img src="@/assets/icons/attach.svg" alt="" />
|
||||
</div>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
<el-select v-model="typeValue" :placeholder="$t('Input.typePlaceholder')">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
class="input-option"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="areaValue" :placeholder="$t('Input.areaPlaceholder')">
|
||||
<el-option
|
||||
v-for="item in areaOptions"
|
||||
class="input-option"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="fida-style-select-wrapper">
|
||||
<el-select
|
||||
v-model="styleValue"
|
||||
:placeholder="$t('Input.stylePlaceholder')"
|
||||
@focus="openStylePopup"
|
||||
/>
|
||||
|
||||
<el-popover
|
||||
v-model:visible="stylePopupVisible"
|
||||
placement="top"
|
||||
:width="342"
|
||||
:show-arrow="false"
|
||||
trigger="click"
|
||||
popper-class="fida-style-select-popover"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="fida-style-select-trigger"></div>
|
||||
</template>
|
||||
<div class="fida-style-popover-content flex flex-col">
|
||||
<div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
|
||||
<div class="fida-style-popover-grid">
|
||||
<div
|
||||
v-for="item in styleOptions"
|
||||
:key="item.value"
|
||||
class="fida-style-popover-item"
|
||||
:class="{ 'is-selected': tempSelectedValue === item.value }"
|
||||
@click="selectStyle(item.value)"
|
||||
>
|
||||
<span class="fida-option-label">{{ $t(item.label) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fida-style-popover-footer flex flex-center">
|
||||
<button class="fida-confirm-btn" @click="confirmStyle">
|
||||
{{ $t('Input.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-popover
|
||||
v-model:visible="stylePopupVisible"
|
||||
v-model:visible="settingPopupVisible"
|
||||
placement="top"
|
||||
:width="342"
|
||||
:show-arrow="false"
|
||||
trigger="click"
|
||||
popper-class="fida-style-select-popover"
|
||||
popper-class="fida-setting-popover"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="fida-style-select-trigger"></div>
|
||||
<img src="@/assets/images/setting.png" class="setting-icon" />
|
||||
</template>
|
||||
<div class="fida-style-popover-content flex flex-col">
|
||||
<div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
|
||||
<div class="fida-style-popover-grid">
|
||||
<div class="fida-setting-popover-content flex flex-col">
|
||||
<div class="fida-setting-popover-header">{{ $t('Input.styleTitle') }}</div>
|
||||
<div class="fida-setting-slider-list">
|
||||
<div
|
||||
v-for="item in styleOptions"
|
||||
:key="item.value"
|
||||
class="fida-style-popover-item"
|
||||
:class="{ 'is-selected': tempSelectedValue === item.value }"
|
||||
@click="selectStyle(item.value)"
|
||||
v-for="item in settingOptions"
|
||||
:key="item.label"
|
||||
class="fida-setting-slider-item"
|
||||
>
|
||||
<span class="fida-option-label">{{ $t(item.label) }}</span>
|
||||
<div class="fida-slider-label">{{ $t(item.label) }}</div>
|
||||
<div class="fida-slider-row flex align-center">
|
||||
<el-slider
|
||||
class="setting-popover-slider"
|
||||
v-model="item.value"
|
||||
:show-tooltip="false"
|
||||
/>
|
||||
<span class="fida-slider-value">{{ item.value }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fida-style-popover-footer flex flex-center">
|
||||
<button class="fida-confirm-btn" @click="confirmStyle">
|
||||
{{ $t('Input.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-popover
|
||||
v-model:visible="settingPopupVisible"
|
||||
placement="top"
|
||||
:width="342"
|
||||
:show-arrow="false"
|
||||
trigger="click"
|
||||
popper-class="fida-setting-popover"
|
||||
>
|
||||
<template #reference>
|
||||
<img src="@/assets/images/setting.png" class="setting-icon" />
|
||||
</template>
|
||||
<div class="fida-setting-popover-content flex flex-col">
|
||||
<div class="fida-setting-popover-header">{{ $t('Input.setting') }}</div>
|
||||
<div class="fida-setting-slider-list">
|
||||
<div v-for="item in settingOptions" :key="item.label" class="fida-setting-slider-item">
|
||||
<div class="fida-slider-label">{{ $t(item.label) }}</div>
|
||||
<div class="fida-slider-row flex align-center">
|
||||
<el-slider v-model="item.value" :show-tooltip="false" />
|
||||
<span class="fida-slider-value">{{ item.value }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="create-btn flex flex-center">
|
||||
<img src="@/assets/images/shining.png" class="shining-icon" alt="" />
|
||||
<span class="create-btn-text">{{ $t('Input.createProject') }}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-btn flex flex-center" @click="toogltReportTag">
|
||||
<SvgIcon class="light-icon" name="light" size="16" />
|
||||
<span>{{ $t('Input.trendingReport') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, ref, watch, nextTick, onMounted } from 'vue'
|
||||
import { areaList } from '@/utils/area'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
// import Tag from './Tag.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 图片上传相关
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null)
|
||||
const uploadedImages = ref<Array<{ url: string; name: string }>>([])
|
||||
|
||||
// 触发文件上传
|
||||
const triggerFileUpload = () => {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
// TODO 标签被删除后无法重新出现
|
||||
|
||||
// 处理文件选择
|
||||
const handleFileChange = (event: Event) => {
|
||||
const input = event.target as HTMLInputElement
|
||||
if (input.files) {
|
||||
Array.from(input.files).forEach((file) => {
|
||||
// 只处理图片文件
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
uploadedImages.value.push({
|
||||
url: e.target?.result as string,
|
||||
name: file.name
|
||||
})
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 清空input的value，允许重复选择同一文件
|
||||
input.value = ''
|
||||
}
|
||||
|
||||
// 移除图片
|
||||
const removeImage = (index: number) => {
|
||||
uploadedImages.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const styleKeys: string[] = [
|
||||
'Coastal',
|
||||
@@ -111,8 +208,97 @@ const styleKeys: string[] = [
|
||||
'NordicNoir'
|
||||
]
|
||||
|
||||
// 标签相关（固定标签，v-show 控制显示）
|
||||
const showReportTag = ref(false)
|
||||
const editorRef = ref<HTMLDivElement | null>(null)
|
||||
const inputValue = ref<string>('')
|
||||
|
||||
const toogltReportTag = () => {
|
||||
console.log(showReportTag.value)
|
||||
|
||||
showReportTag.value = !showReportTag.value
|
||||
}
|
||||
|
||||
const handleEditorInput = () => {
|
||||
if (!editorRef.value) return
|
||||
|
||||
// 提取纯文本（排除标签）
|
||||
let text = ''
|
||||
const walker = document.createTreeWalker(editorRef.value, NodeFilter.SHOW_TEXT, null)
|
||||
|
||||
let node: Node | null
|
||||
while ((node = walker.nextNode())) {
|
||||
text += node.textContent
|
||||
}
|
||||
|
||||
// 移除末尾的空格（如果有的话）
|
||||
text = text.replace(/\s+$/, '')
|
||||
inputValue.value = text
|
||||
|
||||
// 自动调整高度
|
||||
autoResizeEditor()
|
||||
}
|
||||
|
||||
const handleEditorKeydown = (e: KeyboardEvent) => {
|
||||
// if (e.key === 'Backspace') {
|
||||
// const selection = window.getSelection()
|
||||
// if (selection && selection.rangeCount > 0) {
|
||||
// const range = selection.getRangeAt(0)
|
||||
// if (range.collapsed) {
|
||||
// const node = range.startContainer
|
||||
// const offset = range.startOffset
|
||||
// // 如果光标在文本节点开头，且前一个兄弟是标签
|
||||
// if (
|
||||
// offset === 0 &&
|
||||
// node.nodeType === Node.TEXT_NODE &&
|
||||
// node.previousSibling &&
|
||||
// (node.previousSibling as HTMLElement).classList.contains('editor-tag')
|
||||
// ) {
|
||||
// e.preventDefault()
|
||||
// nextTick(() => (showReportTag.value = false))
|
||||
// }
|
||||
// // 如果光标在编辑器开头，且第一个子节点是标签
|
||||
// else if (
|
||||
// offset === 0 &&
|
||||
// node === editorRef.value &&
|
||||
// editorRef.value.firstChild &&
|
||||
// (editorRef.value.firstChild as HTMLElement).classList.contains('editor-tag')
|
||||
// ) {
|
||||
// e.preventDefault()
|
||||
// nextTick(() => (showReportTag.value = false))
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
const handleEditorPaste = (e: ClipboardEvent) => {
|
||||
e.preventDefault()
|
||||
const text = e.clipboardData?.getData('text/plain') || ''
|
||||
document.execCommand('insertText', false, text)
|
||||
}
|
||||
|
||||
const autoResizeEditor = () => {
|
||||
const editor = editorRef.value
|
||||
if (editor) {
|
||||
editor.style.height = 'auto'
|
||||
const maxHeight = 20 * parseFloat(getComputedStyle(document.documentElement).fontSize || '16')
|
||||
editor.style.height = Math.min(editor.scrollHeight, maxHeight) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
// 监听 inputValue 外部变化
|
||||
watch(inputValue, () => {
|
||||
nextTick(() => {
|
||||
autoResizeEditor()
|
||||
})
|
||||
})
|
||||
|
||||
// 初始化编辑器高度
|
||||
onMounted(() => {
|
||||
autoResizeEditor()
|
||||
})
|
||||
|
||||
const typeValue = ref<string>('')
|
||||
const areaValue = ref<string>('')
|
||||
const styleValue = ref<string>('')
|
||||
@@ -170,32 +356,158 @@ const styleOptions = ref<any[]>(
|
||||
|
||||
<style lang="less" scoped>
|
||||
.assist-input-wrapper {
|
||||
height: 23.5rem;
|
||||
min-height: 23.5rem;
|
||||
max-height: 43.5rem;
|
||||
width: 106.3rem;
|
||||
border-radius: 2.8rem;
|
||||
background-color: #fff;
|
||||
border: 0.1rem solid #00000005;
|
||||
box-shadow: 0px 5px 14px 0px #0000001a;
|
||||
margin: 0 auto;
|
||||
padding: 3.4rem 1.7rem 1.7rem 2rem;
|
||||
.input {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
.report-btn {
|
||||
position: absolute;
|
||||
bottom: -7.4rem;
|
||||
height: 4.4rem;
|
||||
border-radius: 2.2rem;
|
||||
width: 20rem;
|
||||
background-color: #fff;
|
||||
border: 0.11rem solid #f6f4ef1a;
|
||||
column-gap: 1.2rem;
|
||||
cursor: pointer;
|
||||
.c-svg {
|
||||
width: 1.5rem;
|
||||
height: 1.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
overflow-y: visible;
|
||||
padding: 3.4rem 1.7rem 1.7rem;
|
||||
}
|
||||
|
||||
.editor {
|
||||
width: 100%;
|
||||
min-height: 5rem;
|
||||
max-height: 20rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0 1.4rem;
|
||||
padding: 0 1.4rem 1.4rem;
|
||||
font-size: 2rem;
|
||||
font-family: 'InterRegular';
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
resize: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
|
||||
// 占位符
|
||||
&:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 标签样式
|
||||
.editor-tag {
|
||||
width: 21.8rem;
|
||||
height: 4.4rem;
|
||||
display: inline-flex;
|
||||
position: initial;
|
||||
bottom: initial;
|
||||
border: 0.11rem solid #0000001a;
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.8rem;
|
||||
column-gap: 0;
|
||||
span {
|
||||
margin: 0 0.7rem 0 1.2rem;
|
||||
}
|
||||
.c-svg.close-icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标签容器（已废弃，保留兼容性）
|
||||
.tags-container {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0 1.4rem 0.5rem;
|
||||
|
||||
.tag-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片预览区域样式
|
||||
.image-preview-list {
|
||||
padding: 0 1.4rem 1rem;
|
||||
column-gap: 1rem;
|
||||
max-height: 15rem;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
|
||||
.image-preview-item {
|
||||
position: relative;
|
||||
width: 8.6rem;
|
||||
height: 8.6rem;
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
border: 0.1rem solid #cdcdcd;
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
.image-remove-btn {
|
||||
position: absolute;
|
||||
top: 0.2rem;
|
||||
right: 0.2rem;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover .image-remove-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.operate {
|
||||
column-gap: 2rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
padding: 0 1.7rem 1.7rem;
|
||||
|
||||
.left {
|
||||
column-gap: 2rem;
|
||||
}
|
||||
.attach {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-select {
|
||||
width: 13.9rem;
|
||||
@@ -235,6 +547,21 @@ const styleOptions = ref<any[]>(
|
||||
height: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.create-btn {
|
||||
background-color: #ff7a51;
|
||||
height: 4rem;
|
||||
width: 13rem;
|
||||
color: #fff;
|
||||
border-radius: 4.2rem;
|
||||
font-family: 'Mazzard';
|
||||
font-weight: 600;
|
||||
font-size: 1.28rem;
|
||||
cursor: pointer;
|
||||
.shining-icon {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-option {
|
||||
@@ -336,12 +663,15 @@ const styleOptions = ref<any[]>(
|
||||
}
|
||||
|
||||
.fida-setting-popover {
|
||||
width: 34.2rem !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 0.6rem !important;
|
||||
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
|
||||
background-color: #fff !important;
|
||||
border: none !important;
|
||||
width: 25.6rem;
|
||||
height: 23.9rem;
|
||||
|
||||
box-shadow: 0px 11px 20px 0px #0000001a;
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
|
||||
// .fida-setting-popover-content {
|
||||
@@ -349,43 +679,70 @@ const styleOptions = ref<any[]>(
|
||||
// }
|
||||
|
||||
.fida-setting-popover-header {
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
.fida-setting-popover-content {
|
||||
padding: 1.6rem 1.4rem 2.2rem !important;
|
||||
}
|
||||
|
||||
.fida-setting-slider-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.fida-setting-slider-item {
|
||||
.fida-slider-label {
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.fida-slider-row {
|
||||
gap: 1rem;
|
||||
column-gap: 2.6rem;
|
||||
.el-slider {
|
||||
flex: 1;
|
||||
}
|
||||
.fida-slider-value {
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
min-width: 3.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
// :deep(.el-slider) {
|
||||
|
||||
// }
|
||||
}
|
||||
.setting-popover-slider {
|
||||
--el-slider-height: 0.4rem;
|
||||
height: fit-content;
|
||||
.el-slider__runway {
|
||||
height: var(--el-slider-height);
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
.el-slider__bar {
|
||||
height: var(--el-slider-height);
|
||||
background-color: #000;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
.el-slider__button-wrapper {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-slider__button {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
}
|
||||
.el-slider__stop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -30,9 +30,11 @@
|
||||
flex-direction: column;
|
||||
> .bottom-view {
|
||||
flex: 1;
|
||||
// background-color: #fff;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,10 @@
|
||||
<span class="icon"><svg-icon name="home" size="24" /></span>
|
||||
<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
|
||||
</div> -->
|
||||
<div class="menu-item" @click="onCanvas">
|
||||
<!-- <span class="icon"><svg-icon name="home" size="24" /></span> -->
|
||||
<span class="title">画布</span>
|
||||
</div>
|
||||
<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
|
||||
<span class="icon"><svg-icon name="history" size="24" /></span>
|
||||
<span class="title" v-show="!isCollapse">{{ $t('Home.history') }}</span>
|
||||
@@ -25,15 +29,24 @@
|
||||
<div class="history-list" v-show="!isCollapse && showHistory">
|
||||
<div v-for="item in historyList" :key="item.name" class="history-item">
|
||||
<div v-if="item.title" class="title">{{ item.name }}</div>
|
||||
<div v-else class="box" @click="onClickHistoryItem(item)">
|
||||
<div
|
||||
v-else
|
||||
class="box"
|
||||
@click="onClickHistoryItem(item)"
|
||||
:class="{ active: item.id == id }"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-popover placement="right" trigger="click">
|
||||
<el-popover
|
||||
placement="right"
|
||||
trigger="click"
|
||||
popper-style="padding: 1rem 0.5rem;"
|
||||
>
|
||||
<template #reference>
|
||||
<span class="icon"><svg-icon name="more" size="16" /></span>
|
||||
<span @click.stop class="icon"><svg-icon name="more" size="16" /></span>
|
||||
</template>
|
||||
<div class="button-box">
|
||||
<div class="rename-btn">Rename</div>
|
||||
<div class="delete-btn">Delete</div>
|
||||
<div class="history-item-menu">
|
||||
<div class="rename" @click="onRenameHistoryItem(item)">Rename</div>
|
||||
<div class="delete" @click="onDeleteHistoryItem(item)">Delete</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
@@ -50,6 +63,7 @@
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
import { useGlobalStore } from '@/stores'
|
||||
const id = computed(() => route.params.id)
|
||||
const globalStore = useGlobalStore()
|
||||
const isCollapse = computed(() => globalStore.state.homeLeftNavCollapse)
|
||||
const onCollapse = () => {
|
||||
@@ -93,13 +107,27 @@
|
||||
const onHome = () => {
|
||||
console.log('onHome')
|
||||
}
|
||||
const onCanvas = () => {
|
||||
router.push({ name: 'canvas' })
|
||||
}
|
||||
const onHistory = () => {
|
||||
showHistory.value = !showHistory.value
|
||||
}
|
||||
const onClickHistoryItem = (item: any) => {
|
||||
console.log(item)
|
||||
router.push({ name: 'test', params: { id: item.id } })
|
||||
}
|
||||
const onRenameHistoryItem = (item: any) => {
|
||||
// const index = historyList.value.findIndex((i: any) => i.id == item.id)
|
||||
// if (index != -1) {
|
||||
// }
|
||||
}
|
||||
const onDeleteHistoryItem = (item: any) => {
|
||||
console.log(item)
|
||||
const index = historyList.value.findIndex((i: any) => i.id == item.id)
|
||||
if (index != -1) {
|
||||
historyList.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -131,7 +159,7 @@
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .logo-text {
|
||||
font-family: Mazzard;
|
||||
font-family: SemiBold;
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
margin-right: auto;
|
||||
@@ -204,14 +232,19 @@
|
||||
> .title {
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
font-family: SemiBold;
|
||||
}
|
||||
> .box {
|
||||
font-family: Regular;
|
||||
border-radius: 0.8rem;
|
||||
cursor: pointer;
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
&.active {
|
||||
font-family: SemiBold;
|
||||
}
|
||||
> .label {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
@@ -220,8 +253,28 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.history-item-menu {
|
||||
user-select: none;
|
||||
> div {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
> .rename {
|
||||
color: #409eff;
|
||||
}
|
||||
> .delete {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="test">
|
||||
<p>老八秘制小汉堡 - {{ id }}</p>
|
||||
<p>Conversation Item - {{ id }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,10 +13,9 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
.test {
|
||||
flex: 1;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
// background-color: rgb(242, 130, 90);
|
||||
margin: 2rem;
|
||||
border-radius: 2rem;
|
||||
background-color: rgb(242, 130, 90);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
height: 4.3rem;
|
||||
margin-right: 1rem;
|
||||
background-color: rgba(255, 252, 244, 1);
|
||||
border: 1px solid rgba(233, 121, 60, 1);
|
||||
border: 1px solid #FFCF90;
|
||||
border-radius: 0.8rem;
|
||||
> .credits {
|
||||
flex: 1;
|
||||
@@ -78,7 +78,7 @@
|
||||
> .link {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-right: 1px solid rgba(233, 121, 60, 1);
|
||||
border-right: 1px solid #FFCF90;
|
||||
}
|
||||
> .icon {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 2.5rem;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -19,18 +18,14 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.register > .left > .logo,
|
||||
.login > .left > .logo {
|
||||
position: absolute;
|
||||
top: 2.4rem;
|
||||
left: 4.2rem;
|
||||
}
|
||||
.register > .left > .logo > img,
|
||||
.login > .left > .logo > img {
|
||||
width: 6rem;
|
||||
height: auto;
|
||||
top: 3.2rem;
|
||||
left: 3.8rem;
|
||||
width: auto;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.register > .left > .logo > span,
|
||||
.login > .left > .logo > span {
|
||||
@@ -40,22 +35,26 @@
|
||||
}
|
||||
.register > .right,
|
||||
.login > .right {
|
||||
width: 90rem;
|
||||
width: 99rem;
|
||||
min-width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url('@/assets/images/login/right-bg.png');
|
||||
background-size: auto 100%;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.register > .right > .top,
|
||||
.login > .right > .top {
|
||||
display: flex;
|
||||
padding: 0 3rem;
|
||||
padding: 3rem 0 0 3rem;
|
||||
}
|
||||
.register > .right > .top > .back,
|
||||
.login > .right > .top > .back {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 1.2rem;
|
||||
border: 0.25rem solid #dfdfdf;
|
||||
border: 0.25rem solid #252727;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -71,8 +70,8 @@
|
||||
}
|
||||
.register > .right > .box > img,
|
||||
.login > .right > .box > img {
|
||||
width: 11rem;
|
||||
height: auto;
|
||||
width: auto;
|
||||
height: 12rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.register > .right > .box > .visible-code,
|
||||
@@ -83,32 +82,35 @@
|
||||
.register > .right > .box > .title,
|
||||
.login > .right > .box > .title {
|
||||
font-weight: 600;
|
||||
font-size: 7rem;
|
||||
font-size: 6.1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #252727;
|
||||
margin-top: 1.7rem;
|
||||
}
|
||||
.register > .right > .box > .title > img,
|
||||
.login > .right > .box > .title > img {
|
||||
width: auto;
|
||||
height: 9.8rem;
|
||||
.register > .right > .box > .title::v-deep > *,
|
||||
.login > .right > .box > .title::v-deep > * {
|
||||
margin-left: 1rem;
|
||||
font-family: LBold;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
.register > .right > .box > .tip,
|
||||
.login > .right > .box > .tip {
|
||||
font-weight: 400;
|
||||
font-family: General Sans Variable;
|
||||
font-style: Regular;
|
||||
font-family: Regular;
|
||||
font-size: 1.8rem;
|
||||
color: #666;
|
||||
margin-top: 0.4rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.register > .right > .box > .el-form,
|
||||
.login > .right > .box > .el-form {
|
||||
margin-top: 5rem;
|
||||
width: 100%;
|
||||
}
|
||||
.register > .right > .box > .el-form::v-deep,
|
||||
.login > .right > .box > .el-form::v-deep {
|
||||
font-family: Regular;
|
||||
}
|
||||
.register > .right > .box > .el-form::v-deep .el-form-item,
|
||||
.login > .right > .box > .el-form::v-deep .el-form-item {
|
||||
margin-bottom: 2rem;
|
||||
@@ -118,6 +120,7 @@
|
||||
color: #252727;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.8rem;
|
||||
font-family: Medium;
|
||||
}
|
||||
.register > .right > .box > .el-form::v-deep .el-input,
|
||||
.login > .right > .box > .el-form::v-deep .el-input {
|
||||
@@ -167,12 +170,14 @@
|
||||
border-radius: 0.8rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-family: SemiBold;
|
||||
}
|
||||
.register > .right > .box > .tip-2,
|
||||
.login > .right > .box > .tip-2 {
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
color: #666;
|
||||
font-family: Regular;
|
||||
}
|
||||
.register > .right > .box > .tip-2::v-deep > span,
|
||||
.login > .right > .box > .tip-2::v-deep > span {
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
<template>
|
||||
<div class="index background-pink">
|
||||
<div class="index">
|
||||
<div class="header">
|
||||
<span class="tip">{{ $t('AlphaVersion') }}</span>
|
||||
<img src="@/assets/images/logo-1.png" class="logo" />
|
||||
<p class="split"></p>
|
||||
<button class="login" @click="onLogin">{{ $t('Login.Login') }}</button>
|
||||
<button class="register" @click="onRegister">{{ $t('Login.SignUp') }}</button>
|
||||
<button class="login" @click="onLogin">{{ $t('Login.login') }}</button>
|
||||
<button class="register" @click="onRegister">{{ $t('Login.signUp') }}</button>
|
||||
</div>
|
||||
<img src="@/assets/images/login/index-title.png" class="title" draggable="false" />
|
||||
<img src="@/assets/images/login/index-zhuangshi.png" class="zhuangshi" draggable="false" />
|
||||
<div class="tip">{{ $t('Login.indexTip') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -26,6 +31,9 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-image: url('@/assets/images/login/index-bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
> .header {
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
@@ -33,7 +41,22 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// align-items: center;
|
||||
> .tip {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
font-family: Regular;
|
||||
color: #fff;
|
||||
}
|
||||
> .logo {
|
||||
width: auto;
|
||||
height: 2.5rem;
|
||||
margin-left: 3.8rem;
|
||||
}
|
||||
> .split {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -47,18 +70,43 @@
|
||||
font-size: 2.2rem;
|
||||
font-weight: 600;
|
||||
font-family: SemiBold;
|
||||
border: 0.2rem solid #fff;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
> .login {
|
||||
background-color: #ff7a51;
|
||||
color: #fff;
|
||||
background-color: #fff;
|
||||
color: #713e1f;
|
||||
}
|
||||
> .register {
|
||||
background-color: #fff;
|
||||
color: #232323;
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
> .zhuangshi,
|
||||
> .title,
|
||||
> .tip {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
> .title {
|
||||
width: 55%;
|
||||
height: auto;
|
||||
top: 20.5rem;
|
||||
}
|
||||
> .zhuangshi {
|
||||
width: 21.5rem;
|
||||
height: auto;
|
||||
bottom: 13.4rem;
|
||||
}
|
||||
> .tip {
|
||||
font-size: 2.8rem;
|
||||
font-family: Regular;
|
||||
color: #fff;
|
||||
bottom: 8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 2.5rem;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
|
||||
@@ -17,18 +16,14 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
>.logo {
|
||||
position: absolute;
|
||||
top: 2.4rem;
|
||||
left: 4.2rem;
|
||||
|
||||
>img {
|
||||
width: 6rem;
|
||||
height: auto;
|
||||
}
|
||||
top: 3.2rem;
|
||||
left: 3.8rem;
|
||||
width: auto;
|
||||
height: 2.5rem;
|
||||
|
||||
>span {
|
||||
font-weight: 600;
|
||||
@@ -39,20 +34,24 @@
|
||||
}
|
||||
|
||||
>.right {
|
||||
width: 90rem;
|
||||
width: 99rem;
|
||||
min-width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url('@/assets/images/login/right-bg.png');
|
||||
background-size: auto 100%;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
>.top {
|
||||
display: flex;
|
||||
padding: 0 3rem;
|
||||
padding: 3rem 0 0 3rem;
|
||||
|
||||
>.back {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 1.2rem;
|
||||
border: 0.25rem solid rgba(223, 223, 223, 1);
|
||||
border: 0.25rem solid #252727;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -68,8 +67,8 @@
|
||||
align-items: center;
|
||||
|
||||
>img {
|
||||
width: 11rem;
|
||||
height: auto;
|
||||
width: auto;
|
||||
height: 12rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@@ -80,26 +79,25 @@
|
||||
|
||||
>.title {
|
||||
font-weight: 600;
|
||||
font-size: 7rem;
|
||||
font-size: 6.1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #252727;
|
||||
margin-top: 1.7rem;
|
||||
|
||||
>img {
|
||||
width: auto;
|
||||
height: 9.8rem;
|
||||
&::v-deep>* {
|
||||
margin-left: 1rem;
|
||||
font-family: LBold;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
>.tip {
|
||||
font-weight: 400;
|
||||
font-family: General Sans Variable;
|
||||
font-style: Regular;
|
||||
font-family: Regular;
|
||||
font-size: 1.8rem;
|
||||
color: #666;
|
||||
margin-top: 0.4rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
>.el-form {
|
||||
@@ -107,6 +105,8 @@
|
||||
width: 100%;
|
||||
|
||||
&::v-deep {
|
||||
font-family: Regular;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -115,6 +115,7 @@
|
||||
color: #252727;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.8rem;
|
||||
font-family: Medium;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
@@ -167,6 +168,7 @@
|
||||
border-radius: 0.8rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-family: SemiBold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -175,6 +177,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
color: #666;
|
||||
font-family: Regular;
|
||||
|
||||
&::v-deep>span {
|
||||
text-decoration: underline;
|
||||
|
||||
@@ -2,10 +2,7 @@
|
||||
<div class="login">
|
||||
<div class="left">
|
||||
<img class="bg" src="@/assets/images/login/left-bg.png" />
|
||||
<div class="logo">
|
||||
<img src="@/assets/images/logo.png" />
|
||||
<span>FiDA</span>
|
||||
</div>
|
||||
<img class="logo" src="@/assets/images/logo-1.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="top">
|
||||
@@ -16,11 +13,8 @@
|
||||
<div class="box">
|
||||
<img src="@/assets/images/login/elephant.png" />
|
||||
<template v-if="!isVisible">
|
||||
<div class="title">
|
||||
<span>{{ $t('Login.LoginTo') }}</span>
|
||||
<img src="@/assets/images/logo-2.png" />
|
||||
</div>
|
||||
<div class="tip">{{ $t('Login.LoginTitle') }}</div>
|
||||
<div class="title" v-html="$t('Login.loginTo')"></div>
|
||||
<div class="tip">{{ $t('Login.loginTitle') }}</div>
|
||||
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
||||
<el-form-item :label="$t('Login.email')" prop="email">
|
||||
<el-input
|
||||
@@ -48,7 +42,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="submit" type="primary" @click="onSubmit">{{
|
||||
$t('Login.Login')
|
||||
$t('Login.login')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -99,7 +93,7 @@
|
||||
}
|
||||
const onVerifyCode = (code: string) => {
|
||||
console.log(code)
|
||||
router.push({ name: 'home' })
|
||||
router.push({ name: 'mainInput' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.6rem;
|
||||
|
||||
font-family: Regular;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
@@ -2,10 +2,7 @@
|
||||
<div class="register">
|
||||
<div class="left">
|
||||
<img class="bg" src="@/assets/images/login/left-bg.png" />
|
||||
<div class="logo">
|
||||
<img src="@/assets/images/logo.png" />
|
||||
<span>FiDA</span>
|
||||
</div>
|
||||
<img class="logo" src="@/assets/images/logo-1.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="top">
|
||||
@@ -16,14 +13,15 @@
|
||||
<div class="box">
|
||||
<img src="@/assets/images/login/elephant.png" />
|
||||
<template v-if="!isVisible">
|
||||
<div class="title">
|
||||
<span>{{ $t('Login.registerFor') }}</span>
|
||||
<img src="@/assets/images/logo-2.png" />
|
||||
</div>
|
||||
<div class="title" v-html="$t('Login.signUpFor')"></div>
|
||||
<div class="tip">{{ $t('Login.registerTip') }}</div>
|
||||
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
||||
<el-form-item :label="$t('Login.name')" prop="name">
|
||||
<el-input name="name" v-model="formData.name" :placeholder="$t('Login.enterName')" />
|
||||
<el-input
|
||||
name="name"
|
||||
v-model="formData.name"
|
||||
:placeholder="$t('Login.enterName')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('Login.password')" prop="password">
|
||||
<el-input
|
||||
@@ -47,7 +45,9 @@
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="submit" type="primary" @click="onSubmit">{{ $t('Login.register') }}</el-button>
|
||||
<el-button class="submit" type="primary" @click="onSubmit">{{
|
||||
$t('Login.register')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tip-2" v-html="$t('Login.havenAccountToLogin')"></div>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
clearTime()
|
||||
})
|
||||
onMounted(() => {
|
||||
setTime(5)
|
||||
setTime()
|
||||
})
|
||||
const onResend = () => {
|
||||
if (time.value > 0) return
|
||||
@@ -66,14 +66,16 @@
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
color: #252727;
|
||||
font-family: SemiBold;
|
||||
}
|
||||
> .tip {
|
||||
margin-top: 2rem;
|
||||
font-size: 1.8rem;
|
||||
color: #666;
|
||||
> span {
|
||||
font-family: Regular;
|
||||
&::v-deep > span {
|
||||
color: #252727;
|
||||
font-weight: 600;
|
||||
font-family: Medium;
|
||||
}
|
||||
}
|
||||
> .input-code {
|
||||
@@ -87,17 +89,20 @@
|
||||
border-radius: 0.8rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-family: SemiBold;
|
||||
}
|
||||
> .time {
|
||||
user-select: none;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #666;
|
||||
font-family: Regular;
|
||||
> span {
|
||||
color: #ff7a50;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: Medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div class="nuic background-pink">
|
||||
<div class="logo">
|
||||
<img src="@/assets/images/logo.png" />
|
||||
<span>FiDA</span>
|
||||
</div>
|
||||
<div class="header">
|
||||
<img class="logo" src="@/assets/images/logo-2.png" />
|
||||
<div class="header" v-show="!loading">
|
||||
<div class="close" @click="onClose">
|
||||
<svg-icon name="close-border" size="33" />
|
||||
</div>
|
||||
@@ -15,10 +12,18 @@
|
||||
:key="i"
|
||||
:state="active === i ? 1 : active > i ? 0 : 2"
|
||||
>
|
||||
<img v-show="i === active" src="@/assets/images/nuic/nav-active.png" draggable="false" />
|
||||
<img
|
||||
v-show="i === active"
|
||||
src="@/assets/images/nuic/nav-active.png"
|
||||
draggable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<component class="view" :is="list[active]" @next="onNext" />
|
||||
<component v-show="!loading" class="view" :is="list[active]" @next="onNext" />
|
||||
<div class="loading" v-show="loading">
|
||||
<img src="@/assets/images/nuic/loading.png" />
|
||||
<p class="tip">{{ $t('Nuic.loadingTip') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -32,15 +37,19 @@
|
||||
const route = useRoute()
|
||||
const active = computed(() => Number(route.query.index || 0))
|
||||
const list = markRaw([nuic1, nuic2, nuic3])
|
||||
const loading = ref(false)
|
||||
const onClose = () => {
|
||||
router.push({ name: 'home' })
|
||||
router.push({ name: 'mainInput' })
|
||||
}
|
||||
const onNext = () => {
|
||||
const index = active.value + 1
|
||||
if (index < list.length) {
|
||||
router.push({ query: { index } })
|
||||
} else {
|
||||
router.push({ name: 'home' })
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
router.push({ name: 'mainInput' })
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -57,18 +66,10 @@
|
||||
// justify-content: center;
|
||||
> .logo {
|
||||
position: absolute;
|
||||
top: 3.8rem;
|
||||
left: 3.8rem;
|
||||
|
||||
> img {
|
||||
width: 6rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-weight: 600;
|
||||
font-size: 3.3rem;
|
||||
}
|
||||
top: 2.7rem;
|
||||
left: 3.6rem;
|
||||
width: auto;
|
||||
height: 2.4rem;
|
||||
}
|
||||
> .header {
|
||||
margin-top: 5rem;
|
||||
@@ -133,6 +134,7 @@
|
||||
cursor: pointer;
|
||||
margin-right: 3.4rem;
|
||||
background-color: #fff;
|
||||
font-family: SemiBold;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -145,5 +147,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> .loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f8f7f5;
|
||||
> .tip {
|
||||
font-family: Regular;
|
||||
font-size: 3rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['next'])
|
||||
const onSkip = () => {
|
||||
router.push({ name: 'home' })
|
||||
router.push({ name: 'mainInput' })
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
margin-bottom: 2rem;
|
||||
&::v-deep > b {
|
||||
font-size: 4.8rem;
|
||||
font-family: MBold;
|
||||
}
|
||||
}
|
||||
> .tip {
|
||||
@@ -46,6 +47,7 @@
|
||||
font-size: 2rem;
|
||||
color: #585858;
|
||||
margin-bottom: 8.7rem;
|
||||
font-family: Regular;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,11 +10,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
|
||||
<button class="more" @click="onLoadMore">
|
||||
<span>{{ $t('Nuic.loadMore') }}</span>
|
||||
<div><svg-icon name="refresh-single" size="24" /></div>
|
||||
</button>
|
||||
<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -45,6 +45,7 @@
|
||||
margin-bottom: 6rem;
|
||||
&::v-deep > b {
|
||||
font-size: 4.8rem;
|
||||
font-family: MBold;
|
||||
}
|
||||
}
|
||||
> .list {
|
||||
@@ -85,6 +86,7 @@
|
||||
color: #fff;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 1px 1px 4.7px #d9692b;
|
||||
font-family: SemiBold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,13 +5,25 @@
|
||||
<div class="select-item">
|
||||
<div class="title">{{ $t('Nuic.basedIn') }}</div>
|
||||
<el-select v-model="data.based">
|
||||
<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value" />
|
||||
<el-option
|
||||
class="el-select__option"
|
||||
v-for="v in data.basedList"
|
||||
:key="v.value"
|
||||
:label="v.label"
|
||||
:value="v.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="select-item">
|
||||
<div class="title">{{ $t('Nuic.role') }}</div>
|
||||
<el-select v-model="data.role">
|
||||
<el-option v-for="v in data.roleList" :key="v.value" :label="v.label" :value="v.value" />
|
||||
<el-option
|
||||
class="el-select__option"
|
||||
v-for="v in data.roleList"
|
||||
:key="v.value"
|
||||
:label="v.label"
|
||||
:value="v.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="btns">
|
||||
@@ -49,8 +61,9 @@
|
||||
font-weight: 500;
|
||||
font-size: 4rem;
|
||||
margin-bottom: 9.8rem;
|
||||
> b {
|
||||
&::v-deep > b {
|
||||
font-size: 4.8rem;
|
||||
font-family: MBold;
|
||||
}
|
||||
}
|
||||
> .select-item {
|
||||
@@ -58,15 +71,17 @@
|
||||
width: 50rem;
|
||||
text-align: left;
|
||||
> .title {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 3.6rem;
|
||||
font-weight: 800;
|
||||
color: #252727;
|
||||
font-family: LBold;
|
||||
}
|
||||
> .el-select {
|
||||
width: 100%;
|
||||
--el-border-radius-base: 0.8rem;
|
||||
&::v-deep {
|
||||
font-family: Regular;
|
||||
.el-select__wrapper {
|
||||
min-height: auto;
|
||||
height: 6rem;
|
||||
@@ -80,4 +95,8 @@
|
||||
margin-top: 15.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select__option {
|
||||
padding: 0 1.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user