Skip to content

F
founder_vue
Commit f1c227b7 by 张超军
Options

合并

parents 8526f62e 3fe80b73
Showing with 394 additions and 375 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/AllPersonnelBase/modules/xzaj.vue
...@@ -223,6 +223,9 @@ ...@@ -223,6 +223,9 @@
placeholder="请选择提取时间" placeholder="请选择提取时间"
v-model="ruleForm.tqsj" v-model="ruleForm.tqsj"
style="width: 100%;" style="width: 100%;"
:picker-options="{
disabledDate: disabledDate,
}"
></el-date-picker> ></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -358,6 +361,13 @@ export default { ...@@ -358,6 +361,13 @@ export default {
} }
}, },
methods: { methods: {
disabledDate(a) {
if (a.getTime() > new Date().getTime()) {
return true;
} else {
return false;
}
},
submitForm (formName) { submitForm (formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
......
src/views/Editor/modules/imageEdAJ.vue
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/SystemManage/PermissionManage.vue
...@@ -83,32 +83,28 @@ ...@@ -83,32 +83,28 @@
:width="userWidths.width1" :width="userWidths.width1"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="name" label="姓名" :width="userWidths.width1">
prop="truename"
label="姓名"
:width="userWidths.width1"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="policemanid" prop="policeNumber"
label="警号" label="警号"
:width="userWidths.width2" :width="userWidths.width2"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="group" prop="userGroupNames"
label="用户组" label="用户组"
:width="userWidths.width3" :width="userWidths.width3"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="unitname" prop="unitName"
label="所属单位" label="所属单位"
:width="userWidths.width5" :width="userWidths.width5"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="roleName" prop="roleNames"
label="角色" label="角色"
:width="userWidths.width4" :width="userWidths.width4"
show-overflow-tooltip show-overflow-tooltip
...@@ -116,23 +112,23 @@ ...@@ -116,23 +112,23 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div <div
class="tags" class="tags"
v-for="item in scope.row.roleName && v-for="item in scope.row.roleNames &&
scope.row.roleName.split(',')" scope.row.roleNames.split(',')"
> >
{{ item }} {{ item }}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="groupid_list" prop="permissionNames"
label="权限" label="权限"
:width="userWidths.width5" :width="userWidths.width5"
show-overflow-tooltip show-overflow-tooltip
> >
<template slot-scope="scope"> <template slot-scope="scope">
<div <div
v-for="(item, index) in scope.row.permissionname && v-for="(item, index) in scope.row.permissionNames &&
scope.row.permissionname.split(',')" scope.row.permissionNames.split(',')"
> >
{{ index > 0 ? "/" : "" }} {{ index > 0 ? "/" : "" }}
{{ item }} {{ item }}
...@@ -145,12 +141,12 @@ ...@@ -145,12 +141,12 @@
:width="userWidths.width1" :width="userWidths.width1"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.status === '0'" class="circle-red"></div> <div v-if="scope.row.status === 0" class="circle-red"></div>
<div v-if="scope.row.status === '1'" class="circle-blue"></div> <div v-if="scope.row.status === 1" class="circle-blue"></div>
{{ {{
scope.row.status === "0" scope.row.status === 0
? "停用" ? "停用"
: scope.row.status === "1" : scope.row.status === 1
? "启用" ? "启用"
: "无状态" : "无状态"
}} }}
...@@ -251,13 +247,13 @@ ...@@ -251,13 +247,13 @@
class="table" class="table"
> >
<el-table-column <el-table-column
prop="groupname" prop="name"
label="用户组" label="用户组"
:width="groupWidths.width1" :width="groupWidths.width1"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="rolename" prop="roleNames"
label="组角色" label="组角色"
:width="groupWidths.width2" :width="groupWidths.width2"
show-overflow-tooltip show-overflow-tooltip
...@@ -265,15 +261,15 @@ ...@@ -265,15 +261,15 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div <div
class="tags" class="tags"
v-for="item in scope.row.rolename && v-for="item in scope.row.roleNames &&
scope.row.rolename.split(',')" scope.row.roleNames.split(',')"
> >
{{ item }} {{ item }}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="username" prop="userCount"
label="组成员" label="组成员"
:width="groupWidths.width3" :width="groupWidths.width3"
> >
...@@ -283,7 +279,7 @@ ...@@ -283,7 +279,7 @@
style="width: 1rem;height: .8125rem;margin-bottom: -0.0625rem;" style="width: 1rem;height: .8125rem;margin-bottom: -0.0625rem;"
icon-class="group-item" icon-class="group-item"
/> />
{{ scope.row.username.split(",").length }} {{ scope.row.userCount }}
</div> </div>
<!-- <div class="set-btn">--> <!-- <div class="set-btn">-->
<!-- 用户设置--> <!-- 用户设置-->
...@@ -303,12 +299,12 @@ ...@@ -303,12 +299,12 @@
:width="groupWidths.width3" :width="groupWidths.width3"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.status === '0'" class="circle-red"></div> <div v-if="scope.row.status === 0" class="circle-red"></div>
<div v-if="scope.row.status === '1'" class="circle-blue"></div> <div v-if="scope.row.status === 1" class="circle-blue"></div>
{{ {{
scope.row.status === "0" scope.row.status === 0
? "停用" ? "停用"
: scope.row.status === "1" : scope.row.status === 1
? "启用" ? "启用"
: "无状态" : "无状态"
}} }}
...@@ -499,26 +495,22 @@ export default { ...@@ -499,26 +495,22 @@ export default {
}, },
// 获取用户信息 // 获取用户信息
searchUser() { searchUser() {
var user = new URLSearchParams(); console.info("搜索用户列表");
user.append("username", this.userSearchParams.username); this.$axios.get("/system/users").then(res => {
user.append("truename", this.userSearchParams.truename); console.info(res);
user.append("roleName", this.userSearchParams.roleName); this.userTableData = res.data;
user.append("unitcode", this.userSearchParams.unitcode); });
user.append("permissionname", this.userSearchParams.permissionname); // // todo 多条件筛选
user.append("groupname", this.userSearchParams.groupname); // this.$axios
user.append("page", this.userSearchParams.page.page); // .post("/login/user/queryUserList", user)
user.append("total", this.userSearchParams.page.total); // .then(res => {
// todo 多条件筛选 // this.userTableData = res.data.data;
this.$axios // this.userSearchParams.page.total = res.data.total;
.post("/login/user/queryUserList", user) // this.userSearchParams.page.page = res.data.page;
.then(res => { // this.userSearchParams.page.count = res.data.count;
this.userTableData = res.data.data; // this.$message.success(res.message);
this.userSearchParams.page.total = res.data.total; // })
this.userSearchParams.page.page = res.data.page; // .catch(failResponse => {});
this.userSearchParams.page.count = res.data.count;
this.$message.success(res.message);
})
.catch(failResponse => {});
}, },
// 编辑用户权限 // 编辑用户权限
userEdit(id, rolename) { userEdit(id, rolename) {
...@@ -544,27 +536,22 @@ export default { ...@@ -544,27 +536,22 @@ export default {
// 获取用户组信息 // 获取用户组信息
searchGroup() { searchGroup() {
console.info("用户组筛选条件=====>", this.groupSearchParams); this.$axios.get("/system/user-groups").then(res => {
var usergroup = new URLSearchParams(); console.info(res);
usergroup.append("page", this.groupSearchParams.page.page); //必填 this.groupTableData = res.data;
usergroup.append("total", this.groupSearchParams.page.total); //必填 });
usergroup.append("groupname", this.groupSearchParams.groupname); // // todo 多条件筛选
usergroup.append("username", this.groupSearchParams.username); // this.$axios
usergroup.append("truename", this.groupSearchParams.truename); // .post("/login/usergroup/queryUserGroupList", usergroup)
usergroup.append("unitcode", this.groupSearchParams.unitcode); // .then(res => {
usergroup.append("rolename", this.groupSearchParams.rolename); // console.log(res.data);
// todo 多条件筛选 // this.groupTableData = res.data.data;
this.$axios // this.groupSearchParams.page.total = res.data.total;
.post("/login/usergroup/queryUserGroupList", usergroup) // this.groupSearchParams.page.page = res.data.page;
.then(res => { // this.groupSearchParams.page.count = res.data.count;
console.log(res.data); // this.$message.success(res.message);
this.groupTableData = res.data.data; // })
this.groupSearchParams.page.total = res.data.total; // .catch(failResponse => {});
this.groupSearchParams.page.page = res.data.page;
this.groupSearchParams.page.count = res.data.count;
this.$message.success(res.message);
})
.catch(failResponse => {});
}, },
groupEdit(id) { groupEdit(id) {
console.info("用户id=====>", id); console.info("用户id=====>", id);
......
src/views/SystemManage/RoleManage.vue
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
<div <div
class="default-role-item" class="default-role-item"
v-for="(item, index) in defaultRoleBtns" v-for="(item, index) in defaultRoleBtns"
:key="index" :key="item.id"
:class="{ active: item.flag }" :class="{ active: item.id === defaultRoleItemIndex }"
@click="chooseDefaultRoleItem(index)" @click="chooseDefaultRoleItem(item)"
> >
{{ item.name }} {{ item.name }}
</div> </div>
...@@ -38,12 +38,19 @@ ...@@ -38,12 +38,19 @@
<div <div
class="diy-role-item" class="diy-role-item"
v-for="(item, index) in diyRoleList" v-for="(item, index) in diyRoleList"
:key="index" :key="item.id"
:class="{ active: item.flag === true }" :class="{ active: item.id === diyRoleItemIndex }"
@click="chooseDiyRoleItem(index)" @click="chooseDiyRoleItem(item.id)"
> >
{{ item.name }} <div v-show="item.id !== diyRoleItemIndex" class="diy-edit-title">
<!-- <div class="diy-edit-title">{{ item.name }}</div>--> {{ item.name }}
</div>
<el-input
v-show="item.id === diyRoleItemIndex"
size="mini"
class="diy-edit-title"
v-model="item.name"
></el-input>
<div class="diy-edit-btn"> <div class="diy-edit-btn">
<img class="img" :src="editurl" @click="editDiyRoleItem(index)" /> <img class="img" :src="editurl" @click="editDiyRoleItem(index)" />
</div> </div>
...@@ -213,16 +220,10 @@ export default { ...@@ -213,16 +220,10 @@ export default {
editurl: require("@/assets/img/edit.png"), editurl: require("@/assets/img/edit.png"),
funFlag: false, funFlag: false,
dataFlag: false, dataFlag: false,
roles: [],
addRoleParams: [],
// 角色按钮 // 角色按钮
defaultRoleBtns: [ defaultRoleBtns: [],
{ name: "指纹入库员", value: 1, flag: false },
{ name: "综合认定员", value: 2, flag: false },
{ name: "高级认定员", value: 3, flag: false },
{ name: "质量检查员", value: 4, flag: false },
{ name: "高级质量检查", value: 5, flag: false },
{ name: "一般管理员", value: 6, flag: false },
{ name: "超级管理员", value: 7, flag: false }
],
// 角色权限菜单 // 角色权限菜单
roleMenus: [ roleMenus: [
{ name: "指掌纹采集", code: 0, flag: false }, { name: "指掌纹采集", code: 0, flag: false },
...@@ -330,14 +331,15 @@ export default { ...@@ -330,14 +331,15 @@ export default {
roleMenusSelection: [], roleMenusSelection: [],
// 自定义的角色组 // 自定义的角色组
diyRoleList: [], diyRoleList: [],
diyRoleItemIndex: -1 diyRoleItemIndex: -1,
defaultRoleItemIndex: -1
}; };
}, },
methods: { methods: {
addrole() { addrole() {
var role = { var role = {
name: "do aute officia irure voluptate", name: "测试角色",
permissionIds: [] permissionIds: [11, 12]
}; };
this.$axios.post("/system/roles", role).then(res => { this.$axios.post("/system/roles", role).then(res => {
console.info(res); console.info(res);
...@@ -354,14 +356,21 @@ export default { ...@@ -354,14 +356,21 @@ export default {
}, },
// 列表 // 列表
search() { search() {
var role = new URLSearchParams();
// role.append('userId', "可选");//根据用户id查询角色信息
// role.append('roleId', "可选");//根据角色id查询角色信息
// role.append('roleName', "可选");//根据角色名查询角色信息
// role.append('permissionName', "可选");//查询角色对应的权限
this.$axios this.$axios
.post("/login/role/queryRolelist", role) .get("/system/roles")
.then(res => {}) .then(res => {
console.info(res);
this.roles = res.data;
res.data.forEach((item, index) => {
// item.flag = false;
console.info(item);
if (index < 7) {
this.defaultRoleBtns.push(item);
} else {
this.diyRoleList.push(item);
}
});
})
.catch(failResponse => {}); .catch(failResponse => {});
}, },
// 删除 // 删除
...@@ -369,61 +378,27 @@ export default { ...@@ -369,61 +378,27 @@ export default {
console.info("删除数据", id); console.info("删除数据", id);
this.diyRoleList.splice(id, 1); this.diyRoleList.splice(id, 1);
this.diyRoleItemIndex = -1; this.diyRoleItemIndex = -1;
// var sysRole = new URLSearchParams();
// sysRole.append("roleId", "16");
// this.$axios
// .post("/login/role/deleteRoleById", sysRole)
// .then(res => {})
// .catch(failResponse => {});
}, },
// 新增 // 新增
add() { add() {
var roleitem = { var roleitem = {
name: "自定义" + (this.diyRoleList.length + 1), name: "自定义" + (this.diyRoleList.length + 1),
flag: false, flag: false,
code: this.diyRoleList.length code: this.diyRoleList.length,
edit: false
}; };
this.diyRoleList.push(roleitem); this.diyRoleList.push(roleitem);
console.info("新增数据"); console.info("新增数据");
// var role = new URLSearchParams();
// role.append("roleName", "角色名");
// role.append("description", "角色描述");
// sffb; //(是否发布:0:未发布,1:已发布),
// pid; // (父级角色的id),
// isparent; //(是否是父级：0：父级，1：子级),
// type角色类型;
// this.$axios
// .post("/login/role/add", role)
// .then(res => {
// console.log(res);
// this.$message.success(res.message);
// })
// .catch(failResponse => {});
}, },
// 编辑 // 编辑
edit() { edit() {
console.info("编辑数据"); console.info("编辑数据");
var role = new URLSearchParams();
// 1、进入角色修改界面
role.append("roleId", "15");
this.$axios
.post("/login/role/queryrolesInfo", role)
.then(res => {})
.catch(failResponse => {});
var role1 = new URLSearchParams();
role1.append("roleId", "15");
role1.append("roleName", "修改角色名");
role1.append("description", "修改角色描述");
this.$axios
.post("/login/role/update", role1)
.then(res => {})
.catch(failResponse => {});
}, },
// 选中默认权限 // 选中默认权限
chooseDefaultRoleItem(index) { chooseDefaultRoleItem(item) {
this.defaultRoleItemIndex = item.id;
this.defaultRoleBtns.forEach((roleitem, idx) => { this.defaultRoleBtns.forEach((roleitem, idx) => {
if (idx === index) { if (idx === item.id) {
roleitem.flag = true; roleitem.flag = true;
} else { } else {
roleitem.flag = false; roleitem.flag = false;
...@@ -444,6 +419,7 @@ export default { ...@@ -444,6 +419,7 @@ export default {
}, },
// 编辑 // 编辑
editDiyRoleItem(id) { editDiyRoleItem(id) {
this.diyRoleList[id].edit = true;
console.info("编辑方法"); console.info("编辑方法");
}, },
funAuth() { funAuth() {
...@@ -457,6 +433,9 @@ export default { ...@@ -457,6 +433,9 @@ export default {
console.info("数据权限"); console.info("数据权限");
} }
}, },
created() {
this.search();
},
mounted() { mounted() {
this.defaultRoleBtns[0].flag = true; this.defaultRoleBtns[0].flag = true;
this.funFlag = true; this.funFlag = true;
......
src/views/SystemManage/scss/role.scss
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
color: #055FE7; color: #055FE7;
} }
.diy-edit-title{ .diy-edit-title{
//border: saddlebrown 1px solid; width: 146px;
height: 19px; height: 19px;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
box-shadow: 0px 0px 4px 0px rgba(5, 95, 231, 0.3); box-shadow: 0px 0px 4px 0px rgba(5, 95, 231, 0.3);
border-bottom-left-radius:250px; border-bottom-left-radius:250px;
position: relative; position: relative;
right: -55px; right: 0;
top: -3px; top: -3px;
.img{ .img{
width: 13px; width: 13px;
......
src/views/cxyrd/QueryConfirm.vue
<template> <template>
<div class="confirm_base" id="confirm_base"> <el-container class="confirm-page" direction="vertical">
<div class="confirm_header_search"> <div class="confirm_header_search">
<div class="display_style"> <div class="display_style">
<span><b>查询条件</b></span> <span><b>查询条件</b></span>
...@@ -79,12 +79,29 @@ ...@@ -79,12 +79,29 @@
<div class="display_style"> <div class="display_style">
<label>查询类型：</label> <label>查询类型：</label>
<div v-for="(btn, index) in queryTypeBtns" :key="index"> <div v-for="(btn, index) in queryTypeBtns" :key="index">
<!-- <div-->
<!-- class="btn"-->
<!-- @click="getQueryType(btn, 'querytypes')"-->
<!-- :class="[-->
<!-- reqParam.contrastCustomSearchReq.querytypes.includes(-->
<!-- btn.value-->
<!-- ) && btn.value === '2'-->
<!-- ? 'btn-active-zc'-->
<!-- : ''-->
<!-- ]"-->
<!-- >-->
<div <div
class="btn" class="btn"
@click="getQueryType(btn, 'querytypes')" @click="getQueryType(btn, 'querytypes')"
:class="[ :class="[
reqParam.contrastCustomSearchReq.querytypes.includes(btn.value) btn.value === '2'
? 'btn-active' ? 'btn-active-zc'
: btn.value === '3'
? 'btn-active-ca'
: btn.value === '1'
? 'btn-active-dc'
: btn.value === '0'
? 'btn-active-cc'
: '' : ''
]" ]"
> >
...@@ -232,7 +249,6 @@ ...@@ -232,7 +249,6 @@
<el-table <el-table
style="width: 100%; max-height: 31.25rem" style="width: 100%; max-height: 31.25rem"
:height="height" :height="height"
class="mineral-table"
border border
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
ref="confirmTable" ref="confirmTable"
...@@ -402,25 +418,23 @@ ...@@ -402,25 +418,23 @@
Tpage Tpage
}}页</span }}页</span
> >
<div class="page"> <el-pagination
<el-pagination class="paging"
class="paging" background
background @size-change="handleSizeChange"
@size-change="handleSizeChange" @current-change="handleCurrPageChange"
@current-change="handleCurrPageChange" :current-page="reqParam.page.currPage"
:current-page="reqParam.page.currPage" :page-sizes="[10, 20, 50, 100]"
:page-sizes="[10, 20, 50, 100]" :page-size="reqParam.page.pageSize"
:page-size="reqParam.page.pageSize" layout="prev, pager, next"
layout="prev, pager, next" :total="reqParam.page.total"
:total="reqParam.page.total" >
> </el-pagination>
</el-pagination>
</div>
</div> </div>
<el-dialog :visible.sync="historyDialogVisible" style="z-index: 1500"> <el-dialog :visible.sync="historyDialogVisible" style="z-index: 1500">
</el-dialog> </el-dialog>
</div> </el-container>
</template> </template>
<script> <script>
...@@ -1366,6 +1380,50 @@ const setQueryClass = [ ...@@ -1366,6 +1380,50 @@ const setQueryClass = [
background-color: #dadde0; background-color: #dadde0;
border-radius: 3px; border-radius: 3px;
} }
/deep/.el-table th {
background-color: #f6f8fa;
border: none;
}
/deep/.el-table td,
.el-table th.is-leaf {
background-color: #ffffff;
border: none;
border-bottom: 1px #f6f8fa solid;
border-top: 1px #f6f8fa solid;
}
// 表格最外边框
.el-table--border,
.el-table--group {
border: none;
}
/deep/.el-popover {
padding: 15px 20px !important;
}
/deep/.el-popconfirm__action {
display: flex;
justify-content: center;
}
/deep/.el-popover.el-popper {
background: #006aff;
}
/deep/.el-form-item__label {
color: #333333;
}
/deep/.el-table th > .cell {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: normal;
color: #282f3c;
}
/deep/.el-table td > .cell {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
div { div {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -1461,11 +1519,31 @@ b { ...@@ -1461,11 +1519,31 @@ b {
background: #ddebff; background: #ddebff;
border-radius: 4px; border-radius: 4px;
} }
.confirm_base {
height: 100%; .confirm-page {
background-color: #ffffff; width: 100%;
padding: 24px; padding: 24px;
font-family: MicrosoftYaHei;
div {
display: inline-block;
}
.footer {
width: 1544px;
//width: calc(100vw - 367px);
position: absolute;
bottom: 27px;
left: 24px;
.count {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
}
.paging {
float: right;
}
}
} }
.display_style { .display_style {
display: inline-block; display: inline-block;
margin: 5px 24px 5px 0; margin: 5px 24px 5px 0;
...@@ -1545,6 +1623,18 @@ b { ...@@ -1545,6 +1623,18 @@ b {
color: #055fe7; color: #055fe7;
} }
.btn-active-zc {
color: #00b47a;
}
.btn-active-dc {
color: #e60012;
}
.btn-active-cc {
color: #fa9500;
}
.btn-active-ca {
color: #055fe7;
}
.clear_btn { .clear_btn {
width: fit-content; width: fit-content;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
...@@ -1636,16 +1726,6 @@ b { ...@@ -1636,16 +1726,6 @@ b {
// height: 450px; // height: 450px;
} }
} }
.footer {
width: 1544px;
//width: calc(100vw - 367px);
position: absolute;
bottom: 27px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style> </style>
<!--table树--> <!--table树-->
<style scoped lang="scss"> <style scoped lang="scss">
......
src/views/cxyrd/TT.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="rd-btn" @click="Rdwc">认定完成</div> <div class="rd-btn" @click="Rdwc">认定完成</div>
</div> </div>
</div> </div>
<Swiper />
<div class="main"> <div class="main">
<div class="data"> <div class="data">
<!-- 卡片源数据--> <!-- 卡片源数据-->
...@@ -632,6 +632,7 @@ import TTPlam from "./modules/TTPlam.vue"; ...@@ -632,6 +632,7 @@ import TTPlam from "./modules/TTPlam.vue";
import TTFace from "./modules/TTFace.vue"; import TTFace from "./modules/TTFace.vue";
import Utils from "@/utils/util.js"; import Utils from "@/utils/util.js";
import "@/icons/error.svg"; import "@/icons/error.svg";
import Swiper from '@/components/swiper.vue'
export default { export default {
name: "TT", name: "TT",
...@@ -640,6 +641,7 @@ export default { ...@@ -640,6 +641,7 @@ export default {
TTFace, TTFace,
swiper, swiper,
swiperSlide, swiperSlide,
Swiper
}, },
data() { data() {
return { return {
......
src/views/login/Login1.vue
<template> <template>
<div id="homepage_hero_module" class="homepage_hero_module"> <div id="homepage_hero_module" class="homepage_hero_module">
<!-- <div class="video_container">--> <!-- <div class="video_container">-->
<!-- &lt;!&ndash; <div :style="fixStyle" class="filter"></div>&ndash;&gt;--> <!-- <div :style="fixStyle" class="filter"></div>-->
<!-- &lt;!&ndash; autoplay 自动播放 loop 循环播放 muted 静音播放&ndash;&gt;--> <!-- autoplay 自动播放 loop 循环播放 muted 静音播放-->
<!-- &lt;!&ndash; <video autoplay loop muted class="fillWidth" v-on:canplay="canplay">&ndash;&gt;--> <!-- <video autoplay loop muted class="fillWidth" v-on:canplay="canplay">-->
<!-- &lt;!&ndash; <source :src="barcgroundUrl" type="video/mp4" />&ndash;&gt;--> <!-- <source :src="barcgroundUrl" type="video/mp4" />-->
<!-- &lt;!&ndash; 浏览器不支持 video 标签，建议升级浏览器。&ndash;&gt;--> <!-- 浏览器不支持 video 标签，建议升级浏览器。-->
<!-- &lt;!&ndash; </video>&ndash;&gt;--> <!-- </video>-->
<!-- &lt;!&ndash; &lt;!&ndash; todo 视频加载切换为图片加载 &ndash;&gt;&ndash;&gt;--> <!-- &lt;!&ndash; todo 视频加载切换为图片加载 &ndash;&gt;-->
<!-- &lt;!&ndash; &lt;!&ndash; 考虑视频加载失败 图片背景效果 &ndash;&gt;&ndash;&gt;--> <!-- &lt;!&ndash; 考虑视频加载失败 图片背景效果 &ndash;&gt;-->
<!-- &lt;!&ndash; <div class="poster hidden" v-if="!vedioCanPlay">&ndash;&gt;--> <!-- <div class="poster hidden" v-if="!vedioCanPlay">-->
<!-- &lt;!&ndash; <img :style="fixStyle" :src="barcgroundImgUrl" alt="" />&ndash;&gt;--> <!-- <img :style="fixStyle" :src="barcgroundImgUrl" alt="" />-->
<!-- &lt;!&ndash; </div>&ndash;&gt;--> <!-- </div>-->
<!-- -->
<!-- </div>--> <!-- </div>-->
<img class="video_container" src="@/assets/img/login/login.gif" /> <!-- <img class="bg" src="@/assets/img/login/login.gif" />-->
<div :style="drawerStyle" class="login_main_layer" ref="loginWindow">
<div> <transition name="slide_fade">
<div class=" login_top_layer middle"> <div :style="drawerStyle" class="login_main_layer" v-if="isShow">
<el-image class="login_emblem middle" :src="emblemUrl"></el-image> <!-- <transition name="login_fade">-->
<br />
<el-image class="login_system middle" :src="systemUrl"></el-image>
</div>
<div class=" middle margin_top25_bottom10">
<el-button
class="magin_left_right30"
:class="{ active: loginType.accountStatus }"
:autofocus="true"
type="text"
@click="changeLoginType(1)"
>帐号密码登录
</el-button>
<span class="font_color">|</span>
<el-button
class="magin_left_right30"
type="text"
:class="{ active: loginType.keyStatus }"
@click="changeLoginType(2)"
>KEY登录
</el-button>
</div>
<div> <div>
<accountsLogin :login-type="loginType.accountStatus"></accountsLogin> <div class=" login_top_layer middle">
<el-image class="login_emblem middle" :src="emblemUrl"></el-image>
<br />
<el-image class="login_system middle" :src="systemUrl"></el-image>
</div>
<div class=" middle margin_top25_bottom10">
<el-button
class="magin_left_right30"
:class="{ active: loginType.accountStatus }"
:autofocus="true"
type="text"
@click="changeLoginType(1)"
>帐号密码登录
</el-button>
<span class="font_color">|</span>
<el-button
class="magin_left_right30"
type="text"
:class="{ active: loginType.keyStatus }"
@click="changeLoginType(2)"
>KEY登录
</el-button>
</div>
<div>
<accountsLogin
:login-type="loginType.accountStatus"
></accountsLogin>
</div>
<div>
<keyLogin :login-type="loginType.keyStatus"></keyLogin>
</div>
</div> </div>
<div> <!-- </transition>-->
<keyLogin :login-type="loginType.keyStatus"></keyLogin> <div class="login_bottom_layer ">
<span class=" font_color"
>Copyright&nbsp;©&nbsp;2021&nbsp;Founder</span
>
</div> </div>
</div> </div>
<div class="login_bottom_layer middle "> </transition>
<span class=" font_color">Copyright&nbsp;©&nbsp;2021&nbsp;Founder</span>
</div>
</div>
</div> </div>
</template> </template>
...@@ -67,7 +75,8 @@ export default { ...@@ -67,7 +75,8 @@ export default {
data() { data() {
return { return {
isShow: true, isShow: false,
loginShow: false,
// drawerHeight: null, // drawerHeight: null,
barcgroundUrl: require("../../assets/video/login.mp4"), barcgroundUrl: require("../../assets/video/login.mp4"),
barcgroundImgUrl: require("../../assets/img/login/background.png"), barcgroundImgUrl: require("../../assets/img/login/background.png"),
...@@ -102,18 +111,15 @@ export default { ...@@ -102,18 +111,15 @@ export default {
}, },
created() { created() {
var me = this; var me = this;
console.log(this.$refs.loginWindow);
// 动画加载时间 // 动画加载时间
setTimeout(() => {
me.isShow = true;
}, 1000);
// setTimeout(() => { // setTimeout(() => {
// me.isShow = true; // me.loginShow = true;
// }, 1000); // }, 3000);
}, },
mounted() { mounted() {
this.$nextTick(() => {
console.log(this.$refs.loginWindow);
this.$refs.loginWindow.right = "0px";
});
this.loginType.accountStatus = true; this.loginType.accountStatus = true;
if (localStorage.getItem("token") !== null) { if (localStorage.getItem("token") !== null) {
this.$router.push("/Home/Home"); this.$router.push("/Home/Home");
...@@ -172,17 +178,18 @@ export default { ...@@ -172,17 +178,18 @@ export default {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: rgba(36, 54, 76, 0.5); background-image: url("../../assets/img/login/login.gif");
position: relative; background-repeat: no-repeat;
} background-size: 100% 100%;
.homepage_hero_module img {
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
} }
/*.homepage_hero_module img {*/
/* width: 100%;*/
/* height: 100%;*/
/*}*/
/*video {*/
/* width: 100%;*/
/* height: 100%;*/
/*}*/
.el-button--text { .el-button--text {
width: 108px; width: 108px;
...@@ -221,7 +228,6 @@ video { ...@@ -221,7 +228,6 @@ video {
} */ } */
.video_container { .video_container {
height: 100%; height: 100%;
width: 100%;
} }
.video_container .poster img, .video_container .poster img,
.video_container video { .video_container video {
...@@ -236,30 +242,30 @@ video { ...@@ -236,30 +242,30 @@ video {
/*opacity: 0.5;*/ /*opacity: 0.5;*/
} }
/*!*滑动进入*!*/ /*滑动进入*/
/*!* 可以设置不同的进入和离开动画 *!*/ /* 可以设置不同的进入和离开动画 */
/*!* 设置动画持续时间和动画函数 *!*/ /* 设置动画持续时间和动画函数 */
/*.slide_fade-enter-active {*/ .slide_fade-enter-active {
/* transition: all 2s ease;*/ transition: all 2s ease;
/*}*/ }
/*.slide_fade-leave-active {*/ .slide_fade-leave-active {
/* transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);*/ transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
/*}*/ }
/*.slide_fade-enter, .slide_fade-leave-to*/ .slide_fade-enter, .slide_fade-leave-to
/* !* .slide-fade-leave-active for below version 2.1.8 *!*/ /* .slide-fade-leave-active for below version 2.1.8 */
/* {*/ {
/* !*transform: translateX(100%);*!*/ transform: translateX(1000px);
/* !*opacity: 0;*!*/ opacity: 0;
/*}*/ }
/*!*淡入淡出*!*/ /*淡入淡出*/
/*.login_fade-enter-active,*/ .login_fade-enter-active,
/*.login_-leave-active {*/ .login_-leave-active {
/* !* opacity 透明度 *!*/ /* opacity 透明度 */
/* transition: opacity 2s;*/ transition: opacity 2s;
/*}*/ }
/* .fade-leave-active, 2.1.8 版本以下 */ /* .fade-leave-active, 2.1.8 版本以下 */
.login_fade-enter, .login_fade-enter,
...@@ -267,33 +273,33 @@ video { ...@@ -267,33 +273,33 @@ video {
opacity: 0; opacity: 0;
} }
/*@keyframes fade-in {*/ @keyframes fade-in {
/* 0% {*/ 0% {
/* opacity: 0;*/ opacity: 0;
/* }*/ }
/* !*初始状态 透明度为0*!*/ /*初始状态 透明度为0*/
/* 40% {*/ 40% {
/* opacity: 0;*/ opacity: 0;
/* }*/ }
/* !*过渡状态 透明度为0*!*/ /*过渡状态 透明度为0*/
/* 100% {*/ 100% {
/* opacity: 1;*/ opacity: 1;
/* }*/ }
/* !*结束状态 透明度为1*!*/ /*结束状态 透明度为1*/
/*}*/ }
/*@-webkit-keyframes fade-in {*/ @-webkit-keyframes fade-in {
/* !*针对webkit内核*!*/ /*针对webkit内核*/
/* 0% {*/ 0% {
/* opacity: 0;*/ opacity: 0;
/* }*/ }
/* 40% {*/ 40% {
/* opacity: 0;*/ opacity: 0;
/* }*/ }
/* 100% {*/ 100% {
/* opacity: 1;*/ opacity: 1;
/* }*/ }
/*}*/ }
/*#wrapper {*/ /*#wrapper {*/
/* animation: fade-in;!*动画名称*!*/ /* animation: fade-in;!*动画名称*!*/
...@@ -305,12 +311,11 @@ video { ...@@ -305,12 +311,11 @@ video {
height: 100%; height: 100%;
width: 600px; width: 600px;
position: absolute; position: absolute;
right: -600px; right: 0;
top: 0; top: 0;
z-index: 4; z-index: 4;
/*opacity: 0.5;*/ /*opacity: 0.5;*/
background: rgba(36, 54, 76, 0.5); background: rgba(36, 54, 76, 0.5);
transition: all 2s;
/*background-color: #24364c;*/ /*background-color: #24364c;*/
} }
...@@ -333,7 +338,6 @@ video { ...@@ -333,7 +338,6 @@ video {
z-index: 10; z-index: 10;
margin-bottom: 10px; margin-bottom: 10px;
opacity: 1; opacity: 1;
background: rgba(36, 54, 76, 0);
} }
.login_system { .login_system {
...@@ -341,19 +345,19 @@ video { ...@@ -341,19 +345,19 @@ video {
height: 55px; height: 55px;
opacity: 1; opacity: 1;
z-index: 10; z-index: 10;
background: rgba(36, 54, 76, 0);
} }
.login_top_layer { .login_top_layer {
margin-top: 20%; margin-top: 20%;
margin-bottom: 50px; margin-bottom: 50px;
background: rgba(36, 54, 76, 0);
} }
.login_bottom_layer { .login_bottom_layer {
position: fixed; position: relative;
bottom: 40px; bottom: -200px;
right: 10%; right: 0;
/*margin-bottom: 40px;*/ /*margin-bottom: 40px;*/
margin: 0 auto;
text-align: center;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment