角色页面查询，修改对话框数据完善
This commit is contained in:
parent
8d6c73e8ce
commit
401138ffbb
@ -1,4 +1,4 @@
|
||||
<!--
|
||||
|
||||
<template>
|
||||
<div style="display: flex; background-color: #74abe3; height: 70px; width: auto; position: relative; justify-content: flex-end; padding: 0 20px;">
|
||||
<a-button ghost style="border: none; font-size: 25px; font-weight: bold; display: flex; position: absolute; top: 20%; left: 20px;" @click="">LOGO</a-button>
|
||||
@ -10,82 +10,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
</script>-->
|
||||
|
||||
|
||||
<template>
|
||||
<a-layout class="layout">
|
||||
<a-layout-header>
|
||||
<div class="header-content">
|
||||
<div class="logo">LOGO</div>
|
||||
<a-menu default-selected-keys="['1']" mode="horizontal" theme="dark">
|
||||
<a-menu-item key="1">首页</a-menu-item>
|
||||
<a-menu-item key="2">项目</a-menu-item>
|
||||
<a-sub-menu title="关于">
|
||||
<a-menu-item key="about:1">公司历史</a-menu-item>
|
||||
<a-menu-item key="about:2">团队成员</a-menu-item>
|
||||
<!-- 更多下拉菜单项 -->
|
||||
</a-sub-menu>
|
||||
<a-menu-item key="3">团队</a-menu-item>
|
||||
<a-menu-item key="4">新闻</a-menu-item>
|
||||
</a-menu>
|
||||
<div class="auth-buttons">
|
||||
<a-button type="link">登录</a-button>
|
||||
<a-button type="primary">注册</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Button, Layout, Menu} from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
name: 'NavigationBar',
|
||||
components: {
|
||||
'a-layout': Layout,
|
||||
'a-layout-header': Layout.Header,
|
||||
'a-menu': Menu,
|
||||
'a-menu-item': Menu.Item,
|
||||
'a-sub-menu': Menu.SubMenu,
|
||||
'a-button': Button
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
height: 64px; /* 根据需要调整高度 */
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 31px;
|
||||
margin: 16px 24px 16px 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
a-layout-header {
|
||||
background-color: white; /* Ant Design 默认导航栏颜色 */
|
||||
}
|
||||
|
||||
.auth-buttons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 修正下拉菜单的样式 */
|
||||
a-sub-menu {
|
||||
color: white !important; /* 确保使用白色文本 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,16 +2,7 @@
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<div class="input">
|
||||
<a-input class="first-input" v-model:value="value1" addonBefore="角色名称" placeholder="请输入角色名称" />
|
||||
<a-select
|
||||
placeholder="请选择状态"
|
||||
ref="select"
|
||||
style="width: 120px"
|
||||
|
||||
>
|
||||
<a-select-option value="启用">启用</a-select-option>
|
||||
<a-select-option value="禁用">禁用</a-select-option>
|
||||
</a-select>
|
||||
<a-input v-model:value="searchData.id" addonBefore="角色id" class="first-input" placeholder="请输入角色id" />
|
||||
</div>
|
||||
<div class="edit">
|
||||
<a-button class="query-button" @click="searchRole"><SearchOutlined />查询</a-button>
|
||||
@ -44,9 +35,9 @@
|
||||
>
|
||||
<div style="">
|
||||
<div style="margin-bottom: 10px;">
|
||||
<div style="margin-left: 15px; margin-bottom: 15px">角色id(原始id)： <a-input v-model:value="updateData.id" style="width: 250px" type="number" /></div>
|
||||
<div style="margin-left: 15px; margin-bottom: 15px">角色名称：<a-input v-model:value="updateData.name" style="width: 250px" /></div>
|
||||
<div style="margin-left: 15px; margin-bottom: 15px">角色备注：<a-input v-model:value="updateData.displayName" style="width: 250px;" /></div>
|
||||
<div style="margin-left: 15px; margin-bottom: 15px">角色id(原始id)： <a-input v-model:value="updateData.id" style="width:10vw" type="number" /></div>
|
||||
<div style="margin-left: 15px; margin-bottom: 15px">角色名称：<a-input v-model:value="updateData.name" style="width: 10vw; margin-left: 2vw" /></div>
|
||||
<div style="margin-left: 15px; margin-bottom: 15px">角色备注：<a-input v-model:value="updateData.displayName" style="width: 10vw; margin-left: 2vw" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
@ -73,7 +64,7 @@
|
||||
</template>
|
||||
<template v-else-if="column.key === 'role_action'">
|
||||
<span style="margin-left: 10px">
|
||||
<a-button class="button2" size="small" type="text" @click="showEditDiaLog"><EditOutlined />修改</a-button>
|
||||
<a-button class="button2" size="small" type="text" @click="() => showEditDiaLog(record)"><EditOutlined />修改</a-button>
|
||||
<a-button class="button1" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
|
||||
</span>
|
||||
</template>
|
||||
@ -98,7 +89,6 @@ import {usePagination} from 'vue-request';
|
||||
import requests from '../../public/request.js';
|
||||
import axios from 'axios';
|
||||
|
||||
const value1 = ref('');
|
||||
const roleid = ref('');
|
||||
const AddDiaLog = ref(false);
|
||||
const DeleteDiaLog = ref(false);
|
||||
@ -108,7 +98,7 @@ const states = reactive({
|
||||
data:[]
|
||||
});
|
||||
const updateData = reactive({
|
||||
id: 0,
|
||||
id: '',
|
||||
name: '',
|
||||
displayName: '',
|
||||
|
||||
@ -168,6 +158,7 @@ function addOk () {
|
||||
console.log(res.data)
|
||||
if (res.data.code===200) {
|
||||
message.success('新增成功')
|
||||
AddDiaLog.value = false;
|
||||
getAll()
|
||||
}
|
||||
else {
|
||||
@ -217,13 +208,22 @@ const showDeleteConfirm = (record) => {
|
||||
|
||||
|
||||
/*修改角色*/
|
||||
function showEditDiaLog(record){
|
||||
/*function showEditDiaLog(record){
|
||||
editDiaLog.value = true
|
||||
updateData.id = record.id
|
||||
updateData.name = record.role_name
|
||||
updateData.displayName = record.displayName
|
||||
|
||||
}
|
||||
}*/
|
||||
|
||||
const showEditDiaLog = (record) => {
|
||||
console.log("record:",record)
|
||||
editDiaLog.value = true
|
||||
updateData.id = record.id
|
||||
updateData.name = record.roleName
|
||||
updateData.displayName = record.displayName
|
||||
};
|
||||
|
||||
|
||||
function editOk(){
|
||||
loadingTable.value = true
|
||||
@ -246,27 +246,27 @@ function editOk(){
|
||||
|
||||
function editCancel(){
|
||||
editDiaLog.value = false;
|
||||
message.info('取消修改')
|
||||
}
|
||||
|
||||
|
||||
/*查询用户*/
|
||||
const searchData = reactive({
|
||||
username: '',
|
||||
phone: ''
|
||||
id:'',
|
||||
})
|
||||
|
||||
function searchRole(){
|
||||
loadingTable.value = true
|
||||
if (searchData.username === '' && searchData.phone === '') {
|
||||
if (searchData.id === '') {
|
||||
getAll()
|
||||
}
|
||||
else {
|
||||
requests.userCurrent(searchData,token).then((res)=>{
|
||||
requests.roleGet(searchData,token).then((res)=>{
|
||||
loadingTable.value = false
|
||||
console.log("searchResult:",res)
|
||||
if (res.data.code === 200) {
|
||||
states.data = []
|
||||
states.data[0] = res.data.data.user
|
||||
states.data = res.data.data
|
||||
message.success('查询成功')
|
||||
console.log(loadingTable.value)
|
||||
}
|
||||
@ -372,19 +372,13 @@ const handleTableChange = (pag, filters, sorter) => {
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 20vw;
|
||||
width: 10vw;
|
||||
margin-top: 2vh;
|
||||
margin-bottom: 1vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.first-input {
|
||||
margin-right: 1vw;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
|
||||
.edit {
|
||||
margin-top: 2vh;
|
||||
width: 20vw;
|
||||
@ -392,7 +386,7 @@ const handleTableChange = (pag, filters, sorter) => {
|
||||
}
|
||||
|
||||
.query-button {
|
||||
margin-left: 4vw;
|
||||
margin-left: 1vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
|
||||
@ -2,16 +2,7 @@
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<div class="input">
|
||||
<a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" />
|
||||
<a-input class="second-input" v-model:value="value2" addonBefore="手机号码" placeholder="请输入手机号码"/>
|
||||
<a-select
|
||||
placeholder="请选择状态"
|
||||
ref="select"
|
||||
style="width: 120px"
|
||||
>
|
||||
<a-select-option value="启用">启用</a-select-option>
|
||||
<a-select-option value="禁用">禁用</a-select-option>
|
||||
</a-select>
|
||||
<a-input v-model:value="searchData.id" addonBefore="关键字" class="first-input" placeholder="请输入用户id" />
|
||||
</div>
|
||||
<div class="edit">
|
||||
<a-button class="query-button" @click="searchUser"><SearchOutlined />查询</a-button>
|
||||
@ -61,7 +52,6 @@
|
||||
年龄：
|
||||
<a-input v-model:value="addData.age" style="width: 250px" type="number" />
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
@ -69,91 +59,48 @@
|
||||
<a-modal
|
||||
v-model:open="EditDiaLog"
|
||||
title="修改用户"
|
||||
@on-ok="editOk"
|
||||
@cancel="editCancel"
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
style="width: 850px"
|
||||
@on-cancel="editCancel"
|
||||
@ok="editOk"
|
||||
>
|
||||
<a-form>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<a-form-item style="margin-left: 20px;">
|
||||
用户id：
|
||||
<a-input v-model:value="updateData.id" style="width: 250px; margin-left: 40px" type="number"/>
|
||||
<div style="display: flex; margin-top: 1vw">
|
||||
<a-form-item label="用户名" style="margin-left: 1vw">
|
||||
<a-input v-model:value="updateData.username" style="width: 12vw; margin-left: 1.2vw"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 50px">
|
||||
用户名：
|
||||
<a-input v-model:value="updateData.username" style="width: 250px; margin-left: 40px"/>
|
||||
<a-form-item label="手机号码" style="margin-left: 3vw">
|
||||
<a-input v-model:value="updateData.phone" style="width: 12vw; margin-left: 2vw"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<a-form-item style="margin-left: 20px">
|
||||
地址：
|
||||
<a-input v-model:value="updateData.address" style="width: 250px; margin-left: 54px"/>
|
||||
<a-form-item label="地址" style="margin-left: 1vw">
|
||||
<a-input v-model:value="updateData.address" style="width: 12vw; margin-left: 2vw"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 50px">
|
||||
手机号码：
|
||||
<a-input v-model="updateData.phone" style="width: 250px; margin-left: 28px"/>
|
||||
<a-form-item label="邮箱" style="margin-left: 3vw">
|
||||
<a-input v-model:value="updateData.email" style="width: 12vw; margin-left: 3.6vw"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<a-form-item style="margin-left: 20px">
|
||||
邮箱：
|
||||
<a-input v-model="updateData.email" style="width: 250px; margin-left: 54px"/>
|
||||
<a-form-item label="年龄" style="margin-left: 1vw">
|
||||
<a-input v-model:value="updateData.age" style="width: 12vw; margin-left:2vw" type="number"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 50px">
|
||||
年龄：
|
||||
<a-input v-model:value="updateData.age" style="width: 250px; margin-left: 57px" type="number"/>
|
||||
<a-form-item label="性别" style="margin-left: 3vw">
|
||||
<a-input v-model:value="updateData.sex" style="width: 12vw; margin-left: 3.6vw" type="number"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<a-form-item style="margin-left: 20px">
|
||||
签名：
|
||||
<a-input v-model:value="updateData.signature" style="width: 250px; margin-left: 54px"/>
|
||||
<a-form-item label="头像地址" style="margin-left: 1vw">
|
||||
<a-input v-model:value="updateData.avatar" style="width: 12vw; margin-left: 0.5vw"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 50px">
|
||||
性别：
|
||||
<a-input v-model:value="updateData.sex" style="width: 250px; margin-left: 57px" type="number"/>
|
||||
<a-form-item label="用户是否可用" style="margin-left: 3vw">
|
||||
<a-input v-model:value="updateData.enabled" style="width: 12vw; margin-left: 0.5vw" type="boolean"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<a-form-item style="margin-left: 20px">
|
||||
头像：
|
||||
<a-input v-model:value="updateData.avatar" style="width: 250px; margin-left: 56px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 50px">
|
||||
昵称：
|
||||
<a-input v-model:value="updateData.nickname" style="width: 250px; margin-left: 57px"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<a-form-item style="margin-left: 20px">
|
||||
个人描述：
|
||||
<a-input v-model:value="updateData.description" style="width: 250px; margin-left: 29px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 50px">
|
||||
用户是否启用：
|
||||
<a-input v-model:value="updateData.enabled" style="width: 250px" type="boolean"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<a-form-item style="margin-left: 20px">
|
||||
用户是否过期：
|
||||
<a-input v-model:value="updateData.isExpired" style="width: 250px; margin-left: 2px" type="boolean"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 50px">
|
||||
密码是否过期：
|
||||
<a-input v-model:value="updateData.passwordExpired" style="width: 250px" type="boolean"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<a-form-item style="margin-left: 20px">
|
||||
是否展示：
|
||||
<a-input v-model:value="updateData.recommend" style="width: 250px; margin-left: 30px" type="boolean"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 50px">
|
||||
用户是否被锁：
|
||||
<a-input v-model:value="updateData.isLocked" style="width: 250px" type="boolean"/>
|
||||
<a-form-item label="用户是否被推荐" style="margin-left: 1vw">
|
||||
<a-input v-model:value="updateData.recommend" style="width: 9.6vw; margin-left: 0.5vw" type="boolean"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
@ -204,8 +151,6 @@ import {
|
||||
import {message, Modal} from "ant-design-vue";
|
||||
import requests from "@/public/request.js";
|
||||
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const AddDiaLog = ref(false);
|
||||
const EditDiaLog = ref(false);
|
||||
let dataSource = ref([]);
|
||||
@ -230,25 +175,25 @@ const sex = ref('男')
|
||||
|
||||
|
||||
const updateData = reactive({
|
||||
id: '',
|
||||
//id: '',
|
||||
username: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
age: '',
|
||||
signature: '',
|
||||
//signature: '',
|
||||
sex: '',
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
//nickname: '',
|
||||
description: '',
|
||||
enabled: true,
|
||||
isExpired: false,
|
||||
passwordExpired: false,
|
||||
//isExpired: false,
|
||||
//passwordExpired: false,
|
||||
recommend: false,
|
||||
isLocked: false,
|
||||
createdAt:'',
|
||||
updateAt:'',
|
||||
isDelete:false,
|
||||
//isLocked: false,
|
||||
// createdAt:'',
|
||||
//updateAt:'',
|
||||
//isDelete:false,
|
||||
})
|
||||
|
||||
|
||||
@ -286,7 +231,7 @@ onMounted(() => {
|
||||
|
||||
|
||||
function getAll() {
|
||||
requests.userAllCurrent(AllUser,token).then((res)=>{
|
||||
requests.userAllCurrent(null,token).then((res)=>{
|
||||
console.log(res)
|
||||
// states.data = res.data.data
|
||||
// console.log(res.data.data)
|
||||
@ -300,6 +245,25 @@ function getAll() {
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
function getAll() {
|
||||
requests.userAllCurrent(AllUser, token).then((res) => {
|
||||
console.log(res);
|
||||
loadingTable.value = false;
|
||||
|
||||
// 直接更新整个数组来确保响应性
|
||||
states.data = res.data.data.map(item => item.user);
|
||||
states.role = res.data.data.map(item => item.role.rid);
|
||||
|
||||
console.log("getAll:", states.data.length);
|
||||
});
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*新增用户*/
|
||||
const addData = reactive({
|
||||
@ -333,8 +297,8 @@ function addOk () {
|
||||
console.log(res.data)
|
||||
if (res.data.code===200) {
|
||||
message.success('新增成功')
|
||||
getAll();
|
||||
AddDiaLog.value = false;
|
||||
getAll();
|
||||
}
|
||||
else {
|
||||
message.error('新增失败')
|
||||
@ -389,20 +353,22 @@ const showDeleteConfirm = (record) => {
|
||||
|
||||
|
||||
/*编辑用户*/
|
||||
function showEditDiaLog(record, index){
|
||||
function showEditDiaLog(record){
|
||||
EditDiaLog.value = true
|
||||
updateData.id = record.id
|
||||
//updateData.id = record.id
|
||||
updateData.username = record.username
|
||||
updateData.address = record.address
|
||||
updateData.phone = record.phone
|
||||
updateData.email = record.email
|
||||
updateData.age = record.age
|
||||
updateData.signature = record.signature
|
||||
//updateData.signature = record.signature
|
||||
updateData.sex = record.sex
|
||||
updateData.avatar = record.avatar
|
||||
updateData.nickname = record.nickname
|
||||
updateData.description = record.description
|
||||
updateData.isDelete = record.isDelete
|
||||
//updateData.nickname = record.nickname
|
||||
//updateData.description = record.description
|
||||
//updateData.isDelete = record.isDelete
|
||||
updateData.recommend = record.recommend
|
||||
updateData.enabled = record.enabled
|
||||
roleSingle.value = states.role[index]
|
||||
if (record.sex === 1) {
|
||||
sex.value = '男'
|
||||
@ -412,12 +378,12 @@ function showEditDiaLog(record, index){
|
||||
}
|
||||
function editOk(){
|
||||
loadingTable.value = true
|
||||
EditDiaLog.value = false
|
||||
requests.userEdit(updateData,token).then((res)=>{
|
||||
console.log("editResult:",res)
|
||||
console.log("updateData:",updateData)
|
||||
if (res.data.code === 200) {
|
||||
getAll()
|
||||
EditDiaLog.value = false
|
||||
message.success('修改成功')
|
||||
}
|
||||
else {
|
||||
@ -436,22 +402,23 @@ function editCancel(){
|
||||
|
||||
/*查询用户*/
|
||||
const searchData = reactive({
|
||||
username: '',
|
||||
phone: ''
|
||||
id:'',
|
||||
})
|
||||
|
||||
function searchUser(){
|
||||
loadingTable.value = true
|
||||
if (searchData.username === '' && searchData.phone === '') {
|
||||
if (searchData.id === '') {
|
||||
getAll()
|
||||
}
|
||||
else {
|
||||
requests.userCurrent(searchData,token).then((res)=>{
|
||||
requests.userAllCurrent(searchData, token).then((res)=>{
|
||||
loadingTable.value = false
|
||||
console.log("searchResult:",res)
|
||||
if (res.data.code === 200) {
|
||||
states.data = []
|
||||
states.data[0] = res.data.data.user
|
||||
states.data = res.data.data.user
|
||||
states.role = []
|
||||
states.role = res.data.data.role
|
||||
message.success('查询成功')
|
||||
console.log(loadingTable.value)
|
||||
}
|
||||
@ -468,6 +435,11 @@ const columns = [
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title:'角色id',
|
||||
dataIndex: 'rid',
|
||||
key:'rid',
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
@ -516,7 +488,8 @@ const rowSelection = {
|
||||
};
|
||||
|
||||
|
||||
/*async function fetchData() {
|
||||
/*
|
||||
async function fetchData() {
|
||||
try {
|
||||
const queryData = await requests.userAllCurrent(
|
||||
{
|
||||
@ -554,7 +527,8 @@ console.log(dataSource)
|
||||
// 组件挂载时调用 fetchData
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});*/
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
async function fetchData() {
|
||||
@ -575,6 +549,7 @@ async function fetchData() {
|
||||
// 修正循环条件，确保我们不越界
|
||||
for (let i = 0; i < dataSource.value.count; i++) {
|
||||
const user = dataSource.value.users[i].user;
|
||||
const role = dataSource.value.users[i].role;
|
||||
if (user.updatedAt === null) {
|
||||
user.updatedAt = "null";
|
||||
}
|
||||
@ -589,6 +564,13 @@ async function fetchData() {
|
||||
updatedAt: user.updatedAt,
|
||||
id: user.id,
|
||||
isDelete:user.isDelete,
|
||||
rid:role.rid,
|
||||
address:user.address,
|
||||
sex:user.sex,
|
||||
age:user.age,
|
||||
email:user.email,
|
||||
avatar:user.avatar,
|
||||
recommend:user.recommend
|
||||
});
|
||||
}
|
||||
console.log(data.value);
|
||||
@ -622,21 +604,13 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 35vw;
|
||||
width: 10vw;
|
||||
margin-top: 2vh;
|
||||
margin-bottom: 1vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.first-input {
|
||||
margin-right: 1vw;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
.second-input {
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.edit {
|
||||
margin-top: 2vh;
|
||||
@ -645,7 +619,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.query-button {
|
||||
margin-left: 4vw;
|
||||
margin-left: 1vw;
|
||||
margin-right: 1vw;
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user