WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

Browse Source
This commit is contained in:
GUjiYN 2024-03-04 10:37:26 +08:00
parent d52ae93d3f
commit a952aa5a03
6 changed files with 102 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>内部系统</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

80
src/views/AuthPage/Login.vue
View File

@ -3,40 +3,36 @@
<div class="container"> <div class="container">
<div class="forms-container"> <div class="forms-container">
<div class="signin-signup"> <div class="signin-signup">
<a-card style="width: 28vw;margin-left: 10vw; display: flex; justify-content: center; background-color: #f9f9f9" class="sign-in-form" > <a-card class="sign-in-form" style="width: 25vw;margin-left: 10vw; display: flex; justify-content: center; align-items: center; background-color: #f9f9f9" >
<h1 style="margin-top: 2vh; display: flex; justify-content: center; font-weight: bold; font-size: large">用户登录</h1>
<h1 style="display: flex; justify-content: center; font-weight: bold">用户登录</h1>
<a-form-item <a-form-item
:rules="[{ required: true, message: '请输入您的用户名！' }]" :rules="[{ required: true, message: '请输入您的用户名！' }]"
label="用户名" label="用户名"
name="username" name="username"
style="margin-top: 20px" style="margin-top: 20px; margin-left: 1vw"
> >
<a-input v-model:value="formState.user" type="text" style="width: 250px;height: 40px;"/> <a-input v-model:value="formState.user" class="h-10 w-64 border-gray-300 rounded-md" type="text"/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:rules="[{ required: true, message: '请输入您的密码！' }]" :rules="[{ required: true, message: '请输入您的密码！' }]"
label="用户密码" label="用户密码"
name="password" name="password"
style="margin: 20px -10px 20px " style="margin-top: 20px; margin-left: 0.2vw"
> >
<a-input-password v-model:value="formState.password" style="width: 250px;height: 40px;" /> <a-input v-model:value="formState.password" class="h-10 w-64 border-gray-300 rounded-md" type="password" />
</a-form-item>
<a-form-item style="margin-left: 3vw; margin-top: 1vh">
<a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
<a-button href="/register" style="margin-left: 1vw" type="link">立即注册</a-button>
<a-button href="" style="margin-left: 1vw" type="link" >忘记密码？</a-button>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-form-item name="remember" no-style> <a-button :disabled="disabled" html-type="submit" size="large" style="margin-left: 5vw; margin-top: 1vh; margin-bottom: 1vh; background-color: dodgerblue; color: white;width: 10vw " @click="loginUser">
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
</a-form-item>
<a class="login-form-forgot" href="" style="margin-left: 6vw">Forgot password</a>
</a-form-item>
<a-form-item>
<a-button @click="loginUser" :disabled="disabled" type="primary" html-type="submit" class="login-form-button" size="large" style="margin:20px 9vw 20px ">
登录 登录
</a-button> </a-button>
<br> <br>
<a href="/register">register now!</a>
</a-form-item> </a-form-item>
</a-card> </a-card>
@ -117,22 +113,6 @@ input {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
} }
.container {
position: relative;
width: 100%;
background-color: #fff;
min-height: 100vh;
overflow: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.signin-signup { .signin-signup {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -145,42 +125,6 @@ input {
z-index: 5; z-index: 5;
} }
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
}
.input-field input::placeholder {
color: #aaa;
font-weight: 500;
}
.btn { .btn {
width: 150px; width: 150px;
background-color: #5995fd; background-color: #5995fd;

71
src/views/AuthPage/Register.vue
View File

@ -4,11 +4,10 @@
<div class="forms-container"> <div class="forms-container">
<div class="signin-signup"> <div class="signin-signup">
<a-card style="width: 25vw; display: flex; margin-left: 10vw; justify-content: center; background-color: #f9f9f9"> <a-card style="width: 25vw; display: flex; margin-left: 10vw; justify-content: center; background-color: #f9f9f9">
<h1 style="display: flex; justify-content: center; font-weight: bold">用户注册</h1> <h1 style="display: flex; justify-content: center; font-weight: bold; font-size: large; margin-top:2vh">用户注册</h1>
<a-form <a-form
:label-col="{ span: 10 }" :label-col="{ span: 6 }"
:model="formState" :model="formState"
:wrapper-col="{ span: 20 }"
autocomplete="off" autocomplete="off"
name="basic" name="basic"
style="margin-top: 3vh" style="margin-top: 3vh"
@ -19,43 +18,44 @@
:rules="[{ required: true, message: '请输入您的用户名！' }]" :rules="[{ required: true, message: '请输入您的用户名！' }]"
label="用户名" label="用户名"
name="username" name="username"
style="margin-top: 20px;"
> >
<a-input v-model:value="formState.username" type="text" /> <a-input v-model:value="formState.username" class="h-10 w-64 border-gray-300 rounded-md" type="text"/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:rules="[{ required: true, message: '请输入您的密码！' }]" :rules="[{ required: true, message: '请输入您的密码！' }]"
label="用户密码" label="用户密码"
name="password" name="password"
> >
<a-input-password v-model:value="formState.password" /> <a-input v-model:value="formState.password" class="h-10 w-64 border-gray-300 rounded-md" type="password" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:rules="[{ required: true, message: '请输入家庭地址！' }]" :rules="[{ required: true, message: '请输入家庭地址！' }]"
label="家庭地址" label="家庭地址"
name="address" name="address"
> >
<a-input v-model:value="formState.address" type="text" /> <a-input v-model:value="formState.address" class="h-10 w-64 border-gray-300 rounded-md" type="text" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:rules="[{ required: true, message: '请输入手机号码！' }]" :rules="[{ required: true, message: '请输入手机号码！' }]"
label="手机号" label="手机号"
name="phone" name="phone"
> >
<a-input v-model:value="formState.phone" type="text" /> <a-input v-model:value="formState.phone" class="h-10 w-64 border-gray-300 rounded-md" type="text" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:rules="[{ required: true, message: '请输入邮箱！' }]" :rules="[{ required: true, message: '请输入邮箱！' }]"
label="邮箱" label="邮箱"
name="email" name="email"
> >
<a-input v-model:value="formState.email" type="email" /> <a-input v-model:value="formState.email" class="h-10 w-64 border-gray-300 rounded-md" type="email" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:rules="[{ required: true, message: '请输入年龄！' }]" :rules="[{ required: true, message: '请输入年龄！' }]"
label="年龄" label="年龄"
name="age" name="age"
> >
<a-input-number v-model:value="formState.age" /> <a-input-number v-model:value="formState.age" class="h-10 w-64 border-gray-300 rounded-md" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:rules="[{ required: true, message: '请输入性别！' }]" :rules="[{ required: true, message: '请输入性别！' }]"
@ -68,8 +68,8 @@
<a-radio :value="2">女</a-radio> <a-radio :value="2">女</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }" style="margin-top: 4vh"> <a-form-item :wrapper-col="{ offset: 6, span: 16 }" style="margin-top: 4vh">
<a-button html-type="submit" type="primary" @click="registerUser">立即注册</a-button> <a-button html-type="submit" style="background-color: dodgerblue; color: white;width: 10vw" type="primary" @click="registerUser">立即注册</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-card> </a-card>
@ -157,21 +157,6 @@ input {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
} }
.container {
position: relative;
width: 100%;
background-color: #fff;
min-height: 100vh;
overflow: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.signin-signup { .signin-signup {
position: absolute; position: absolute;
@ -185,42 +170,8 @@ input {
z-index: 5; z-index: 5;
} }
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
}
.input-field input::placeholder {
color: #aaa;
font-weight: 500;
}
.btn { .btn {
width: 150px; width: 150px;
background-color: #5995fd; background-color: #5995fd;

36
src/views/ManagePage/Carousel.vue
View File

@ -1,32 +1,28 @@
<template> <template>
<div style="display:flex;flex-direction: column"> <div class="flex flex-col w-full h-auto">
<div style="margin: 20px"> <div class="flex">
<a-space direction="vertical" style="display: flex;flex-direction: row"> <div class="w-36 ml-4 mt-4 flex">
<a-input class="first-input" v-model:value="searchData.id" addonBefore="轮播图Id" placeholder="请输入轮播图Id" /> <a-input v-model:value="searchData.id" class="h-8 border-gray-300 rounded-md" placeholder="请输入轮播图Id" />
<a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button> </div>
<a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button> <div class="mt-4 flex">
<a-button type="primary" @click="showDeleteModal" danger><DeleteOutlined />删除</a-button> <a-button :size="size" class="ml-4 flex justify-center items-center" @click="searchUser"><SearchOutlined />查询</a-button>
<a-button class="ml-4 text-blue-50 bg-blue-500 flex justify-center items-center" type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
</a-space> <a-button class="ml-4 flex justify-center items-center" danger type="primary" @click="showDeleteModal"><DeleteOutlined />删除</a-button>
</div>
</div> </div>
<a-table :row-selection="rowSelection" :rowKey="record => record.id" :columns="columns" :data-source="states.data" :pagination="pagination" style="width: 84vw;"> <a-table :columns="columns" :data-source="states.data" :pagination="pagination" :row-selection="rowSelection" :rowKey="record => record.id" style="width: 84vw; margin-top: 1vh">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'isActive'"> <template v-if="column.key === 'isActive'">
<a-tag :bordered="false" color="success" v-if="record.isActive === true">展示</a-tag> <a-tag v-if="record.isActive === true" :bordered="false" color="success">展示</a-tag>
<a-tag :bordered="false" color="error" v-if="record.isActive === false">未展示</a-tag> <a-tag v-if="record.isActive === false" :bordered="false" color="error">未展示</a-tag>
</template> </template>
<template v-else-if="column.key === 'action'"> <template v-else-if="column.key === 'action'">
<span style="margin-left: 10px"> <span style="margin-left: 10px; display: flex;">
<a-button type="text" @click="showModal(record)" size="small" style=" color: dodgerblue;"><EditOutlined />修改</a-button> <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="showModal(record)"><EditOutlined />修改</a-button>
<a-button type="text" @click="showDeleteConfirm(record)" size="small" style=" color: dodgerblue;"><DeleteOutlined />删除</a-button> <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
</span> </span>
</template> </template>
<template v-else-if="column.key === 'photo'"> <template v-else-if="column.key === 'photo'">
<img :src="record.image" alt="" style="width: 50px;height: 50px;text-align: center"> <img :src="record.image" alt="" style="width: 50px;height: 50px;text-align: center">
</template> </template>

61
src/views/ManagePage/Role.vue
View File

@ -1,12 +1,12 @@
<template xmlns=""> <template xmlns="">
<div class="main"> <div style=" display: flex; flex-direction: column; width: 100%; height: auto;">
<div class="header"> <div class="flex">
<div class="input"> <div class="w-36 ml-4 mt-4 flex">
<a-input v-model:value="searchData.id" addonBefore="角色id" class="first-input" placeholder="请输入角色id" /> <a-input v-model:value="searchData.id" class="h-8 border-gray-300 rounded-md" placeholder="请输入角色id" />
</div> </div>
<div class="edit"> <div class="mt-4 flex">
<a-button class="query-button" @click="searchRole"><SearchOutlined />查询</a-button> <a-button class="ml-4 mr-4 flex justify-center items-center" @click="searchRole"><SearchOutlined />查询</a-button>
<a-button class="add-button" type="primary" @click="showAddDiaLog"><PlusOutlined />新增角色</a-button> <a-button class="text-blue-50 bg-blue-500 flex justify-center items-center" type="primary" @click="showAddDiaLog"><PlusOutlined />新增角色</a-button>
</div> </div>
</div> </div>
@ -14,8 +14,8 @@
<!--新增角色对话框--> <!--新增角色对话框-->
<a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增角色" @cancel="addCancel" @ok="addOk"> <a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增角色" @cancel="addCancel" @ok="addOk">
<div> <div>
<div>角色名称：<a-input v-model:value="addData.name" style="width: 250px; margin-bottom: 10px"/></div> <div>角色名称：<a-input v-model:value="addData.name" class="h-8 w-1/2 border-gray-300 rounded-md"/></div>
<div>角色备注：<a-input v-model:value="addData.displayName" style="width: 250px; margin-bottom: 10px;"/></div> <div>角色备注：<a-input v-model:value="addData.displayName" class="h-8 w-1/2 mt-4 border-gray-300 rounded-md"/></div>
</div> </div>
</a-modal> </a-modal>
@ -63,9 +63,9 @@
{{record.updatedAt}} {{record.updatedAt}}
</template> </template>
<template v-else-if="column.key === 'role_action'"> <template v-else-if="column.key === 'role_action'">
<span style="margin-left: 10px"> <span style="margin-left: 10px; display: flex">
<a-button class="button2" size="small" type="text" @click="() => showEditDiaLog(record)"><EditOutlined />修改</a-button> <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="() => showEditDiaLog(record)"><EditOutlined />修改</a-button>
<a-button class="button1" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button> <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
</span> </span>
</template> </template>
</template> </template>
@ -360,47 +360,10 @@ const handleTableChange = (pag, filters, sorter) => {
<style scoped> <style scoped>
.main {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.header {
display: flex;
}
.input {
width: 10vw;
margin-top: 2vh;
margin-bottom: 1vh;
display: flex;
flex-direction: row;
}
.edit {
margin-top: 2vh;
width: 20vw;
display: flex;
}
.query-button {
margin-left: 1vw;
margin-right: 1vw;
}
.table { .table {
width: 100%; width: 100%;
height: auto; height: auto;
margin-top: 2vh; margin-top: 2vh;
} }
.button1 {
color: dodgerblue;
}
.button2 {
color:dodgerblue;
}
</style> </style>

79
src/views/ManagePage/User.vue
View File

@ -1,15 +1,15 @@
<template xmlns=""> <template xmlns="">
<div class="main"> <div class="flex flex-col w-full h-auto">
<div class="header"> <div class="flex">
<div class="input"> <div class="w-36 ml-4 mt-4 flex">
<a-input v-model:value="searchData.id" addonBefore="关键字" class="first-input" placeholder="请输入用户id"/> <a-input v-model:value="searchData.id" class="h-8 border-gray-300 rounded-md" placeholder="请输入用户id"/>
</div> </div>
<div class="edit"> <div class="mt-4 flex">
<a-button class="query-button" @click="searchUser"> <a-button class="ml-4 mr-4 flex justify-center items-center" @click="searchUser">
<SearchOutlined/> <SearchOutlined/>
查询 查询
</a-button> </a-button>
<a-button class="add-button" type="primary" @click="showAddDiaLog"> <a-button class="text-blue-50 bg-blue-500 flex justify-center items-center" type="primary" @click="showAddDiaLog">
<PlusOutlined/> <PlusOutlined/>
新增用户 新增用户
</a-button> </a-button>
@ -21,32 +21,37 @@
<a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增用户" @cancel="addCancel" <a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增用户" @cancel="addCancel"
@ok="addOk"> @ok="addOk">
<a-form> <a-form>
<a-form-item style="margin-left: 15px;"> <a-form-item class="ml-6 mt-4">
<span style="color:red; font-size: 20px">*</span> <span style="color:red; font-size: 20px">*</span>
用户名 用户名
<a-input v-model:value="addData.username" style="width: 250px"/> <a-input v-model:value="addData.username" class="h-8 w-2/3 border-gray-300 rounded-md"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 15px"> <a-form-item class="ml-6">
<span style="color:red; font-size: 20px">*</span> <span style="color:red; font-size: 20px">*</span>
密码： 密码：
<a-input v-model:value="addData.password" style="width: 250px;" type="password"/> <a-input v-model:value="addData.password" class="h-8 w-2/3 border-gray-300 rounded-md" type="password"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 15px"> <a-form-item class="ml-6">
<span style="color:red; font-size: 20px">*</span> <span style="color:red; font-size: 20px">*</span>
地址： 地址：
<a-input v-model:value="addData.address" style="width: 250px"/> <a-input v-model:value="addData.address" class="h-8 w-2/3 border-gray-300 rounded-md"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 15px"> <a-form-item class="ml-6">
<span style="color:red; font-size: 20px">*</span> <span style="color:red; font-size: 20px">*</span>
电话： 电话：
<a-input v-model:value="addData.phone" style="width: 250px"/> <a-input v-model:value="addData.phone" class="h-8 w-2/3 border-gray-300 rounded-md"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 15px"> <a-form-item class="ml-6">
<span style="color:red; font-size: 20px">*</span> <span style="color:red; font-size: 20px">*</span>
邮箱： 邮箱：
<a-input v-model:value="addData.email" style="width: 250px"/> <a-input v-model:value="addData.email" class="h-8 w-2/3 border-gray-300 rounded-md"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 15px"> <a-form-item class="ml-6">
<span style="color:red; font-size: 20px">*</span>
年龄：
<a-input v-model:value="addData.age" class="h-8 w-2/3 border-gray-300 rounded-md" type="number"/>
</a-form-item>
<a-form-item class="ml-6">
<span style="color:red; font-size: 20px">*</span> <span style="color:red; font-size: 20px">*</span>
性别： 性别：
<a-radio-group v-model:value="addData.sex"> <a-radio-group v-model:value="addData.sex">
@ -54,11 +59,6 @@
<a-radio :value="0">女</a-radio> <a-radio :value="0">女</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 15px">
<span style="color:red; font-size: 20px">*</span>
年龄：
<a-input v-model:value="addData.age" style="width: 250px" type="number"/>
</a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
@ -115,7 +115,7 @@
<!--表格内容--> <!--表格内容-->
<div class="table"> <div style=" width:100%; height:auto; margin-top:2vh;">
<a-table :columns="columns" :dataSource="states.data" :loading="loadingTable" :row-selection="rowSelection" :rowKey="record => record.id"> <a-table :columns="columns" :dataSource="states.data" :loading="loadingTable" :row-selection="rowSelection" :rowKey="record => record.id">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key==='id'"> <template v-if="column.key==='id'">
@ -135,9 +135,9 @@
{{ record.isDelete }} {{ record.isDelete }}
</template> </template>
<template v-else-if="column.key==='action'"> <template v-else-if="column.key==='action'">
<span style="margin-left: 10px"> <span style="margin-left: 10px; display: flex">
<a-button size="small" style="color: dodgerblue" type="text" @click="() => showEditDiaLog(record)"><EditOutlined/>修改</a-button> <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="() => showEditDiaLog(record)"><EditOutlined/>修改</a-button>
<a-button size="small" style="color: dodgerblue" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined/>删除</a-button> <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined/>删除</a-button>
</span> </span>
</template> </template>
</template> </template>
@ -610,15 +610,10 @@ onMounted(() => {
<style scoped> <style scoped>
.main { .main {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
} }
.header {
display: flex;
}
.input { .input {
width: 10vw; width: 10vw;
@ -630,26 +625,16 @@ onMounted(() => {
.edit { .edit {
margin-top: 2vh;
width: 20vw;
display: flex;
} }
.query-button { .query-button {
margin-left: 1vw;
margin-right: 1vw;
} }
.delete-button {
background-color: #CD5C5C;
color: white;
margin-left: 1vw;
}
.table { .table {
width: 100%;
height: auto;
margin-top: 2vh;
} }
</style> </style>