yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

集成tailwindcss 替换新的登陆页面和版权信息组件 (#1499)

Browse Source 
* 集成tailwindcss

* fix: 修改登录，init 页面

* Update package.json

* 升级可升级的第三方库到新版本

* 细节调整

---------

Co-authored-by: bypanghu <bypanghu@163.com>
Co-authored-by: task <121913992@qq.com>
This commit is contained in:
奇淼（piexlmax
2023-08-04 17:03:21 +08:00
committed by GitHub
co-authored by bypanghu task
parent ab29267d64
commit 350f4572ed
24 changed files with 640 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/view/init/index.vue
+42 -83
View File
@@ -1,57 +1,58 @@
<template>
<div class="init_page">
<div class="init_page_panel">
<div v-if="hello < 2" id="hello" :class="[hello < 1 ? 'slide-in-fwd-top' : 'slide-out-right']" class="hello">
<div>
<div class="hello_title">GIN-VUE-ADMIN</div>
<p class="in-two a-fadeinT">初始化须知</p>
<p class="init_p">1.您需有用一定的VUE和GOLANG基础</p>
<p class="init_p">2.请您确认是否已经阅读过官方文档</p>
<p class="init_p">3.请您确认是否了解后续的配置流程</p>
<p class="init_p">4.如果您使用mysql数据库，请确认数据库引擎为<span style="color: red">innoDB</span></p>
<p class="init_p">注：开发组不为文档中书写过的内容提供无偿服务</p>
<p class="init_btn">
<el-button type="primary" @click="goDoc">
<div class="rounded-lg flex items-center justify-evenly w-full h-full relative bg-white md:w-screen md:h-screen md:bg-[#194bfb] overflow-hidden">
<div class="rounded-md w-full h-full flex items-center justify-center overflow-hidden">
<div class="oblique h-[130%] w-3/5 bg-white transform -rotate-12 absolute -ml-80" />
<div v-if="!page.showForm" :class="[page.showReadme ?'slide-out-right' :'slide-in-fwd-top' ]">
<div class=" text-lg">
<div class="font-sans text-4xl font-bold text-center mb-4">GIN-VUE-ADMIN</div>
<p class="text-gray-600 mb-2">初始化须知</p>
<p class="text-gray-600 mb-2">1.您需有用一定的VUE和GOLANG基础</p>
<p class="text-gray-600 mb-2">2.请您确认是否已经阅读过<a class="text-blue-600 font-bold" href="https://www.gin-vue-admin.com">官方文档</a></p>
<p class="text-gray-600 mb-2">3.请您确认是否了解后续的配置流程</p>
<p class="text-gray-600 mb-2">4.如果您使用mysql数据库，请确认数据库引擎为<span class="text-red-600 font-bold text-3xl ml-2 ">innoDB</span></p>
<p class="text-gray-600 mb-2">注：开发组不为文档中书写过的内容提供无偿服务</p>
<p class="flex items-center justify-between mt-8">
<el-button type="primary" @click="goDoc" size="large">
阅读文档
</el-button>
<el-button type="primary" @click="showNext">
<el-button type="primary" @click="showNext" size="large">
我已确认
</el-button>
</p>
</div>
</div>
<div
v-if="hello > 0 "
:class="[(hello > 0 && !out)? 'slide-in-left' : '' , out ? 'slide-out-right' : '']"
class="form"
v-if="page.showForm "
:class="[ page.showForm ? 'slide-in-left' : 'slide-out-right' ]"
class="w-96"
>
<el-form ref="formRef" :model="form" label-width="100px">
<el-form ref="formRef" :model="form" label-width="100px" size="large">
<el-form-item label="数据库类型">
<el-select v-model="form.dbType" placeholder="请选择" @change="changeDB">
<el-select v-model="form.dbType" placeholder="请选择" @change="changeDB" class="w-full">
<el-option key="mysql" label="mysql" value="mysql" />
<el-option key="pgsql" label="pgsql" value="pgsql" />
<el-option key="oracle" label="oracle" value="oracle" />
<el-option key="mssql" label="mssql" value="mssql" />
<el-option key="sqlite" label="sqlite" value="sqlite"/>
<el-option key="sqlite" label="sqlite" value="sqlite" />
</el-select>
</el-form-item>
<el-form-item label="host" v-if="form.dbType !== 'sqlite'">
<el-form-item v-if="form.dbType !== 'sqlite'" label="host">
<el-input v-model="form.host" placeholder="请输入数据库链接" />
</el-form-item>
<el-form-item label="port" v-if="form.dbType !== 'sqlite'">
<el-form-item v-if="form.dbType !== 'sqlite'" label="port">
<el-input v-model="form.port" placeholder="请输入数据库端口" />
</el-form-item>
<el-form-item label="userName" v-if="form.dbType !== 'sqlite'">
<el-form-item v-if="form.dbType !== 'sqlite'" label="userName">
<el-input v-model="form.userName" placeholder="请输入数据库用户名" />
</el-form-item>
<el-form-item label="password" v-if="form.dbType !== 'sqlite'">
<el-form-item v-if="form.dbType !== 'sqlite'" label="password">
<el-input v-model="form.password" placeholder="请输入数据库密码（没有则为空）" />
</el-form-item>
<el-form-item label="dbName">
<el-input v-model="form.dbName" placeholder="请输入数据库名称" />
</el-form-item>
<el-form-item label="dbPath" v-if="form.dbType === 'sqlite'">
<el-input v-model="form.dbPath" placeholder="请输入sqlite数据库文件存放路径"></el-input>
<el-form-item v-if="form.dbType === 'sqlite'" label="dbPath">
<el-input v-model="form.dbPath" placeholder="请输入sqlite数据库文件存放路径" />
</el-form-item>
<el-form-item>
<div style="text-align: right">
@@ -61,6 +62,12 @@
</el-form>
</div>
</div>
<div class="hidden md:block w-1/2 h-full float-right bg-[#194bfb]"><img
class="h-full"
src="@/assets/login_right_banner.jpg"
alt="banner"
></div>
</div>
</template>
@@ -79,9 +86,16 @@ import { useRouter } from 'vue-router'
const router = useRouter()
const hello = ref(0)
const page = reactive({
showReadme: false,
showForm: false
})
const showNext = () => {
hello.value = hello.value + 1
page.showReadme = false
setTimeout(() => {
page.showForm = true
}, 20)
}
const goDoc = () => {
@@ -194,61 +208,6 @@ const onSubmit = async() => {
</script>
<style lang="scss" scoped>
.init_page {
margin: 0;
padding: 0;
background-image: url('@/assets/login_background.jpg');
background-size: cover;
width: 100%;
height: 100%;
position: relative;
.init_page_panel {
position: absolute;
top: 3vh;
left: 2vw;
width: 96vw;
height: 94vh;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-evenly;
.hello {
position: absolute;
z-index: 2;
text-align: center;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.hello_title {
font-size: 32px;
line-height: 98px;
}
.in-two {
font-size: 22px;
}
.init_p {
margin-top: 20px;
color: #777777;
}
.init_btn {
margin-top: 20px;
}
}
.form {
position: absolute;
z-index: 3;
margin-top: 60px;
width: 600px;
height: auto;
padding: 20px;
border-radius: 6px;
}
}
}
.slide-in-fwd-top {
-webkit-animation: slide-in-fwd-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)