init
This commit is contained in:
366
src/views/index/components/select/modelSelect.vue
Normal file
366
src/views/index/components/select/modelSelect.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="model-select" :class="showOptions ? 'show-options': ''">
|
||||
<div class="label" @click="toggleOption">
|
||||
<div class="label-content">
|
||||
<div class="label-content__icon"></div>
|
||||
<div class="label-content__text">齐蜂AI大模型</div>
|
||||
</div>
|
||||
<div class="label-arrow"></div>
|
||||
</div>
|
||||
<div v-show="showOptions" class="options">
|
||||
<div class="options__left">
|
||||
<div
|
||||
v-for="item in leftOptions"
|
||||
class="options__left-item"
|
||||
:class="leftValue === item.value ? 'left-choosed' : ''"
|
||||
v-bind:key="item.value"
|
||||
@click="handleLeftOptionClick(item)"
|
||||
>
|
||||
<div class="options__left-item__icon" :class="`options__left-item__icon__${item.value}`"></div>
|
||||
<div class="options__left-item__text">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options__right">
|
||||
<div
|
||||
class="options__right-item"
|
||||
v-for="item in rightOptons"
|
||||
:class="rightValue === item.value ? 'right-choosed' : ''"
|
||||
v-bind:key="item.value"
|
||||
@click="handleRightOptionClick(item)"
|
||||
>
|
||||
<div :style="`background-image: url('${item.icon}')`" class="options__right-item__icon"></div>
|
||||
<div class="options__right-item__line options__right-item__line-1">
|
||||
<div class="options__right-item__title">{{ item.label }}</div>
|
||||
<div v-for="tagItem in item.tags" class="options__right-item__tag" v-bind:key="tagItem">
|
||||
{{ tagItem }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="options__right-item__line options__right-item__line-2">
|
||||
<div class="options__right-item__desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="options__right-item__line options__right-item__line-3">
|
||||
<div class="options__right-item__cost-icon"></div>
|
||||
<div class="options__right-item__cost-text">{{ item.cost }}</div>
|
||||
<div class="options__right-item__split"></div>
|
||||
<div class="options__right-item__time-icon"></div>
|
||||
<div class="options__right-item__time-text">{{ item.time }}s</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'modelSelect',
|
||||
data() {
|
||||
return {
|
||||
showOptions: false,
|
||||
leftValue: 'text',
|
||||
leftOptions: [
|
||||
{
|
||||
value: 'text',
|
||||
label: '文生图',
|
||||
},
|
||||
{
|
||||
value: 'image',
|
||||
label: '图生图',
|
||||
}
|
||||
],
|
||||
rightValue: 'qifeng1',
|
||||
rightOptons: [
|
||||
{
|
||||
value: 'qifeng1',
|
||||
icon: 'https://www.fofba.com/wp-content/uploads/2025/07/1752564018-u41568515953102493196fm253fmtautoapp138fJPEG.webp',
|
||||
label: '齐蜂AI大模型1',
|
||||
tags: ['文生图', '图生图'],
|
||||
desc: '齐蜂团队最新的AI模型25.12融合加速模型',
|
||||
cost: 4,
|
||||
time: 12
|
||||
},
|
||||
{
|
||||
value: 'qifeng2',
|
||||
icon: 'https://www.fofba.com/wp-content/uploads/2025/07/1752564018-u41568515953102493196fm253fmtautoapp138fJPEG.webp',
|
||||
label: '齐蜂AI大模型2',
|
||||
tags: ['文生图', '图生图'],
|
||||
desc: '齐蜂团队最新的AI模型25.12融合加速模型',
|
||||
cost: 4,
|
||||
time: 12
|
||||
},
|
||||
{
|
||||
value: 'qifeng3',
|
||||
icon: 'https://www.fofba.com/wp-content/uploads/2025/07/1752564018-u41568515953102493196fm253fmtautoapp138fJPEG.webp',
|
||||
label: '齐蜂AI大模型3',
|
||||
tags: ['文生图', '图生图'],
|
||||
desc: '齐蜂团队最新的AI模型25.12融合加速模型',
|
||||
cost: 4,
|
||||
time: 12
|
||||
},
|
||||
{
|
||||
value: 'qifeng4',
|
||||
icon: 'https://www.fofba.com/wp-content/uploads/2025/07/1752564018-u41568515953102493196fm253fmtautoapp138fJPEG.webp',
|
||||
label: '齐蜂AI大模型4',
|
||||
tags: ['文生图', '图生图'],
|
||||
desc: '齐蜂团队最新的AI模型25.12融合加速模型',
|
||||
cost: 4,
|
||||
time: 12
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleOption() {
|
||||
this.showOptions = !this.showOptions
|
||||
},
|
||||
handleLeftOptionClick (item) {
|
||||
const { value } = item || {};
|
||||
if (value) {
|
||||
this.leftValue = value;
|
||||
}
|
||||
},
|
||||
handleRightOptionClick (item) {
|
||||
const { value } = item || {};
|
||||
if (value) {
|
||||
this.rightValue = value;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.glass {
|
||||
backdrop-filter: blur(30px);
|
||||
background: rgba(162, 162, 162, 0.2);
|
||||
}
|
||||
.model-select {
|
||||
width: 196px;
|
||||
height: 46px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
.label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px 10px 18px;
|
||||
.glass();
|
||||
width: 196px;
|
||||
height: 46px;
|
||||
border-radius: 23px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
&__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #FFFFFF;
|
||||
margin-right: 8px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&__text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background: #FFFFFF;
|
||||
transform: rotate(0deg);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
&.show-options {
|
||||
.label {
|
||||
background: #FFFFFF;
|
||||
.label-content {
|
||||
&__icon {
|
||||
background: #000000;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&__text {
|
||||
color: #000000;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
.label-arrow {
|
||||
background: #000000;
|
||||
transform: rotate(180deg);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.options {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 56px;
|
||||
width: 1236px;
|
||||
height: 434px;
|
||||
background: #313131;
|
||||
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.5);
|
||||
border-radius: 12px 12px 12px 12px;
|
||||
border: 1px solid #4E4E4E;
|
||||
transition: all 0.3s ease-in-out;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
&__left {
|
||||
width: 106px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
padding: 20px 0;
|
||||
&-item {
|
||||
width: 106px;
|
||||
height: 72px;
|
||||
background: #5A5A5A;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease-in-out;
|
||||
&__icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
.img-bg();
|
||||
margin-bottom: 6px;
|
||||
&__text {
|
||||
background-image: url('../../../../assets/imgs/index/options-image.png');
|
||||
}
|
||||
&__image {
|
||||
background-image: url('../../../../assets/imgs/index/options-image.png');
|
||||
}
|
||||
}
|
||||
&__text {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
&.left-choosed {
|
||||
opacity: 1;
|
||||
background: #8E67A7;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__right {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 434px;
|
||||
overflow-y: scroll;
|
||||
padding: 20px 0;
|
||||
|
||||
&-item {
|
||||
width: 340px;
|
||||
background: #5A5A5A;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
position: relative;
|
||||
padding: 15px 0 10px 44px;
|
||||
margin: 0 10px 10px 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
&__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.img-bg();
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 13px;
|
||||
}
|
||||
&__line {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
&-1 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&-2 {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&__tag {
|
||||
width: 49px;
|
||||
height: 18px;
|
||||
background: #747474;
|
||||
color: #404040;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
margin-right: 6px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&__desc {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #8A8A8A;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&__cost-icon , &__time-icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: white;
|
||||
}
|
||||
&__cost-icon{
|
||||
margin-right: 3px;
|
||||
}
|
||||
&__time-icon{
|
||||
margin-right: 2px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
&__cost-text {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #8A8A8A;
|
||||
margin-right: 8px;
|
||||
}
|
||||
&__split {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #8A8A8A;
|
||||
}
|
||||
&__time-text {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #8A8A8A;
|
||||
}
|
||||
&.right-choosed {
|
||||
background: #8E67A7;
|
||||
transition: all 0.3s ease-in-out;
|
||||
.options__right-item {
|
||||
&__desc {
|
||||
color: #B695CE;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&__tag {
|
||||
background: #FFFFFF;
|
||||
color: #8E67A7;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user