optimize index page UI

This commit is contained in:
RockYang
2024-04-22 10:43:33 +08:00
parent d18f79fe74
commit 9059bebd07
10 changed files with 70 additions and 23 deletions

View File

@@ -33,7 +33,7 @@
<el-form-item label="图片画质">
<template #default>
<div class="form-item-inner flex-row items-center">
<el-select v-model="params.quality" placeholder="请选择" style="width:150px">
<el-select v-model="params.quality" placeholder="请选择" style="width:175px">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"

View File

@@ -5,9 +5,9 @@
<h2>AI 绘画作品墙</h2>
<div class="settings">
<el-radio-group v-model="imgType" @change="changeImgType">
<el-radio value="mj" size="large">MidJourney</el-radio>
<el-radio value="sd" size="large">Stable Diffusion</el-radio>
<el-radio value="dall" size="large">DALL-E</el-radio>
<el-radio label="mj" size="large">MidJourney</el-radio>
<el-radio label="sd" size="large">Stable Diffusion</el-radio>
<el-radio label="dall" size="large">DALL-E</el-radio>
</el-radio-group>
</div>
</div>
@@ -338,6 +338,7 @@ const getNext = () => {
loading.value = true
page.value = page.value + 1
let url = ""
console.log(imgType.value)
switch (imgType.value) {
case "mj":
url = "/api/mj/imgWall"

View File

@@ -2,9 +2,24 @@
<div class="index-page" :style="{height: winHeight+'px'}">
<div class="content">
<h1>欢迎使用 {{ title }}</h1>
<p>{{slogan}}</p>
<button class="btn" @click="router.push('/chat')">立即使用</button>
<p>{{ slogan }}</p>
<el-button @click="router.push('/chat')" color="#ffffff" style="color:#007bff" :dark="false">
<i class="iconfont icon-chat"></i>
<span>AI聊天</span>
</el-button>
<el-button @click="router.push('/mj')" color="#C4CCFD" style="color:#424282" :dark="false">
<i class="iconfont icon-mj"></i>
<span>AI-MJ绘画</span>
</el-button>
<el-button @click="router.push('/sd')" color="#4AE6DF" style="color:#424282" :dark="false">
<i class="iconfont icon-sd"></i>
<span>AI-SD绘画</span>
</el-button>
<el-button @click="router.push('/xmind')" color="#FFFD55" style="color:#424282" :dark="false">
<i class="iconfont icon-xmind"></i>
<span>思维导图</span>
</el-button>
<div id="animation-container"></div>
</div>
@@ -84,7 +99,7 @@ const init = () => {
requestAnimationFrame(animate);
// 使地球自转和公转
earth.rotation.y += 0.001;
earth.rotation.y += 0.0006;
renderer.render(scene, camera);
};
@@ -117,27 +132,25 @@ const init = () => {
.content {
text-align: center;
position relative
h1 {
font-size: 5rem;
margin-bottom: 1rem;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.btn {
padding: 10px 20px;
background-color: #fff;
color: #007bff;
border: none;
border-radius: 5px;
.el-button {
padding: 25px 20px;
font-size: 1.3rem;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: #e6e6e6;
.iconfont {
font-size 1.6rem
margin-right 10px
}
}

View File

@@ -23,7 +23,7 @@
请选择生成思维导图的AI模型
</div>
<div class="param-line">
<el-select v-model="modelID" placeholder="请选择模型" @change="changeModel">
<el-select v-model="modelID" placeholder="请选择模型" @change="changeModel" style="width:100%">
<el-option
v-for="item in models"
:key="item.id"