chenjinliang
/
disinfection_high_front_end
forked from maochaoying/disinfection_high_front_end
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

user modal

master
maochaoying 2 years ago
parent
632d9708a2
commit
f7264779d7
2 changed files with 172 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 73
      src/components/Setting/components/User.vue
  2. 102
      src/components/dialogs/UserModal.vue

73
src/components/Setting/components/User.vue
View File

@ -8,6 +8,16 @@
<div class="btn">添加</div>
</div>
</div>
<div v-else-if="changePasswordVisible" class="change_password_form">
<p class="title">
正在修改 <span class="username">username1</span> 的密码
</p>
<div class="update_form"></div>
<div class="btns">
<div class="btn" @click="returnToList">返回</div>
<div class="btn">修改</div>
</div>
</div>
<div v-else>
<div class="title_wrap">
<svg
@ -45,7 +55,7 @@
<div class="operator_wrap">
<div class="btn">删除用户</div>
<div class="btn mb">设为管理员</div>
<div class="btn">修改密码</div>
<div class="btn" @click="showUpdatePassword">修改密码</div>
</div>
</div>
<div class="user_line">
@ -53,7 +63,7 @@
<div class="operator_wrap">
<div class="btn">删除用户</div>
<div class="btn mb">设为管理员</div>
<div class="btn">修改密码</div>
<div class="btn" @click="showUpdatePassword">修改密码</div>
</div>
</div>
<div class="user_line">
@ -61,7 +71,7 @@
<div class="operator_wrap">
<div class="btn">删除用户</div>
<div class="btn mb">设为管理员</div>
<div class="btn">修改密码</div>
<div class="btn" @click="showUpdatePassword">修改密码</div>
</div>
</div>
</div>
@ -69,12 +79,23 @@
<div class="add_user" @click="addUserFormShow">新增用户</div>
</div>
</div>
<UserModal />
</div>
</template>
<script setup>
import { ref } from 'vue'
import UserModal from 'cpns/dialogs/UserModal'
const userFormVisible = ref(false)
const changePasswordVisible = ref(false)
const showUpdatePassword = () => {
changePasswordVisible.value = true
}
const returnToList = () => {
changePasswordVisible.value = false
}
const returnList = () => {
userFormVisible.value = false
@ -204,5 +225,51 @@ const addUserFormShow = () => {
}
}
}
.change_password_form {
height: 100%;
box-sizing: border-box;
padding: 98px 175px 154px 175px;
display: flex;
flex-direction: column;
align-items: center;
.title {
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.06em;
/* 正在修改 */
color: #000000;
margin-bottom: 74px;
.username {
color: #06518b;
}
}
.update_form {
width: 330px;
height: 57px;
margin-bottom: 59px;
}
.btns {
width: 187px;
height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
.btn {
width: 87px;
height: 45px;
border-radius: 23px;
background: #06518b;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.1em;
color: #ffffff;
}
}
}
}
</style>

102
src/components/dialogs/UserModal.vue
View File

@ -0,0 +1,102 @@
<template>
<div class="user_modal_container">
<div class="modal_content">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="69"
height="69"
viewBox="0 0 69 69"
>
<g>
<path
d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
fill="#FA1C1C"
fill-opacity="1"
/>
</g>
</svg>
<p class="tips">请添是否将 <span class="red">username1 用户删除</span></p>
<div class="btns">
<div class="ok">确定</div>
<div class="cancel">取消</div>
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.user_modal_container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
.modal_content {
width: 476px;
height: 350px;
border-radius: 16px;
background: #ffffff;
padding: 52px 57px 55px 57px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
.tips {
margin-top: 33px;
margin-bottom: 50px;
font-family: Source Han Sans CN;
font-size: 22px;
font-weight: normal;
letter-spacing: 0.04em;
color: #000000;
.red {
color: #fa1c1c;
}
}
.btns {
display: flex;
align-items: center;
justify-content: space-between;
width: 362px;
.cancel {
width: 173px;
height: 68px;
border-radius: 34px;
background: #06518b;
font-family: Source Han Sans CN;
font-size: 23px;
font-weight: 350;
letter-spacing: 0em;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.ok {
width: 173px;
height: 68px;
border-radius: 34px;
background: #d8d8d8;
font-family: Source Han Sans CN;
font-size: 23px;
font-weight: 350;
letter-spacing: 0em;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save