366 lines
12 KiB
Vue
366 lines
12 KiB
Vue
<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> |