Skip to content

F
founder_vue
Commit 2d67ad2a by chenyr
Options

登录/查询页面。

parent 9fa5ed74
Showing with 1675 additions and 469 deletions
.eslintrc.js
......@@ -8,7 +8,11 @@ module.exports = {
parser: "babel-eslint"
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
// "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
// "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
"no-unused-vars":"off",
"no-debugger":"off",
"no-console":"off",
"no-redeclare": 1,
},
};
src/api/base.js
......@@ -7,7 +7,7 @@ let base = {
mapurl: "",
// bigwfwurl: "",
// bigservicesurl: "",
// alyIP: "",
//alyIP: "",
naotuPath: "",
XingZhen: "",
ZhiTu_url: "",
......
src/api/xsInput/xsInput.js 0 → 100644
import { get ,post,postform } from "@/utils/http.js";
import base from "@/api/base";
export const queryCodeByType = params =>
get(`${base.test}/queryCodeByType`, params);
export const addShsexscj = params =>
postform(`${base.test}/shsexscj/addShsexscj`, params);
//线索信息查询
export const clueMessageQuery = params =>
post(`${base.test}/dbxs/qryDbxsList?qryType=bdw`, params);
export const getXscjByXsbh = params =>
post(`${base.test}/shsexsbc/getXscjByXsbh`, params);
export const updateXscj = params =>
postform(`${base.test}/shsexsbc/updateXscj`, params);
export const getCfxsList = params =>
post(`${base.test}/dbxs/getCfxsList`, params);
src/api/xsInput/xsQuery.js 0 → 100644
import { get ,post,postform } from "@/utils/http.js";
import base from "@/api/base";
//子线索列表
export const getXsListByPid = params =>
post(`${base.test}/dbxs/getXsListByPid`, params);
//线索合并
export const hbXsz = params =>
postform(`${base.test}/dbxs/hbXsz`, params);
//线索删除
export const delXszxx = params =>
post(`${base.test}/dbxs/delXszxx`, params);
src/assets/img/Login/animate.gif 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/styles/main.scss
......@@ -17,7 +17,7 @@ $ns-font-size-tab-title: 24px;
$ns-font-size-title: 30px;
body {
line-height: 1.8;
font-family: 'Helvetica Neue', Helvetica, 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
background-color: #f7f7f7;
font-size: $ns-font-size-base;
......@@ -85,7 +85,6 @@ a {
img {
border-style: none;
max-width: 100%;
vertical-align: middle;
}
......
src/components/demoPrototype/formPages/form_component.vue 0 → 100644
<template>
<div class="form">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</div>
</template>
<script>
export default {
name: "form_component",
data() {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
};
}
}
</script>
<style scoped>
</style>
src/components/demoPrototype/queryPages/callQuery.vue deleted 100644 → 0
<template>
<div id="QueryField">
<!--查询页面-->
<EsAjzbQuery
:PageTitle="PageTitle"
:LeftMenu="LeftMenu"
:QueryField="QueryField"
:AllformThead="AllformThead"
:defaultCheckedThead="defaultCheckedThead"
:defaultFormThead="defaultFormThead"
></EsAjzbQuery>
</div>
</template>
<script>
import EsAjzbQuery from "./queryCommonPage.vue";
export default {
name: "QueryField",
components: {
EsAjzbQuery: EsAjzbQuery
},
data() {
return {
PageTitle: "案件侦办",
LeftMenu: [
{
id: "ajzbcx",
label: "案件侦办查询",
index: "1",
className: "fa fa-search"
}
],
QueryField: [
{
name: "案件编号",
id: "ajbh",
type: "text",
value: "",
placeholder: "",
col: "3"
},
{
name: "现勘编号",
id: "xkbh",
type: "text",
value: "",
placeholder: "",
col: "3"
},
{
name: "案件类别",
id: "ajlb",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_AJLB",
col: "3"
},
{
name: "案情关键词",
id: "aqgjc",
type: "textarea",
value: "",
placeholder: "多个关键词输入请用逗号，隔开",
col: "1"
},
{
name: "主案类别",
id: "zalb",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_AJZLB",
col: "3",
hidden: true
},
{
name: "次案类别",
id: "calb",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_AJXZLB",
col: "3",
hidden: true
},
{
name: "次类案类别",
id: "clalb",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_XALBDMBCMS",
col: "3",
hidden: true
},
{
name: "受理单位",
id: "sldw",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_UNIT",
col: "3",
hidden: true
},
{
name: "受理时间",
id: "slsj",
type: "date",
value: "",
placeholder: "",
col: "2",
hidden: true
},
{
name: "立案单位",
id: "ladw",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_UNIT",
col: "3",
hidden: true
},
{
name: "立案时间",
id: "lasj",
type: "date",
value: "",
placeholder: "",
col: "2",
hidden: true
},
{
name: "侦查终结单位",
id: "zczjdw",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_UNIT",
col: "3",
hidden: true
},
{
name: "终结时间",
id: "zjsj",
type: "date",
value: "",
placeholder: "",
col: "2",
hidden: true
},
{
name: "案发地区",
id: "afdq",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_XZQH",
col: "3",
hidden: true
},
{
name: "涉案金额",
id: "saje",
type: "zdyText",
value: "",
placeholder: "",
value2: "",
placeholder2: "",
col: "2",
hidden: true
},
{
name: "侦查状态",
id: "zczt",
type: "radio",
value: "全部",
placeholder: "",
col: "1",
radioData: [
"全部",
"接受案事实",
"立案审查",
"不予立案",
"受案",
"立案",
"撤销立案",
"侦查终结"
]
},
{
name: "侦办过程",
id: "zbgc",
type: "radio",
value: "全部",
placeholder: "",
col: "1",
radioData: ["全部", "已认领", "未认领"]
},
{
name: "案件区分",
id: "ajqf",
type: "radio",
value: "我辖区的",
placeholder: "",
col: "1",
radioData: ["我辖区的", "我侦办的", "全省", "全国"]
},
{
name: "级联",
id: "jl",
type: "radio",
value: "是",
placeholder: "",
col: "1",
radioData: ["是", "否"],
children: [
{
name: "立案单位",
id: "ladw",
type: "text",
value: "",
placeholder: "",
col: "3",
flag: "是"
},
{
name: "立案时间",
id: "lasj",
type: "text",
value: "",
placeholder: "",
col: "2",
flag: "是"
}
]
}
],
defaultCheckedThead: ["案事件编号", "案件类别", "案件名称", "简要警情"],
defaultFormThead: [
{
/*table默认得表头*/
label: "案事件编号",
prop: "asjbh"
},
{
label: "案件类别",
prop: "ajlb"
},
{
label: "案件名称",
prop: "ajmc"
},
{
label: "简要警情",
prop: "jyaq"
}
],
AllformThead: [
{
/*所有的字段*/
label: "案事件编号",
prop: "asjbh"
},
{
label: "案件类别",
prop: "ajlb"
},
{
label: "案件名称",
prop: "ajmc"
},
{
label: "案件时间",
prop: "ajsj"
},
{
label: "立案单位",
prop: "ladw"
},
{
label: "简要警情",
prop: "jyaq"
}
]
};
}
};
</script>
src/components/demoPrototype/queryPages/query_component.vue 0 → 100644
<template>
<div id="newCases" class="main">
<!--头部背景-->
<div class="header">
<div
class="header_icon"
@click="get"
style="width:60px;text-align:center;cursor: pointer;"
:title="isCollapse == true ? '展开' : '收缩'"
>
<i
:class="[
rotate ? 'iconfont icondaohangshouqi' : 'iconfont icondaohangmoren'
]"
></i>
</div>
<span
style="font-family: Source Han Sans CN; font-size: 22px;font-weight: bold;"
>{{ PageTitle }}</span
>
</div>
<div class="content">
<!--左侧导航-->
<div class="leftMenu" ref="">
<!--无子集-->
<el-menu
default-active="1"
class="el-menu-vertical-demo"
:collapse="isCollapse"
active-text-color="#409EFF"
background-color="#fff"
text-color="#545c64"
v-if="!propLeftMenu[0].children"
>
<el-menu-item
v-for="(item, menuIndex) in propLeftMenu"
:key="menuIndex"
:index="item.index"
v-show="item.isShow"
@click="getField(item.id, item.index)"
>
<i :class="item.className" style="margin-right:9px"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
</el-menu>
<!--有子集-->
<el-menu
default-active="1-1"
:default-openeds="openeds"
class="el-menu-vertical-demo"
:collapse="isCollapse"
active-text-color="#409EFF"
background-color="#fff"
text-color="#545c64"
v-else
>
<el-submenu
v-for="(item, menuIndex) in propLeftMenu"
:key="menuIndex"
:index="item.index"
v-show="item.isShow"
>
<template slot="title">
<i :class="item.className" style="margin-right:9px"></i>
<span slot="title">{{ item.label }}</span>
</template>
<el-menu-item
index="2-1"
v-for="(item2, menuIndex2) in item.children"
:key="menuIndex2"
@click="getField(item2.id, item.index)"
>{{ item2.label }}</el-menu-item
>
</el-submenu>
</el-menu>
<!-- <img-->
<!-- src="./img/leftMenuCover.png"-->
<!-- v-show="isCollapse == false"-->
<!-- style="width:220px;height:316px; margin-left:60px"-->
<!-- />-->
</div>
<QueryRightCommon
:selectedPropQueryField="selectedPropQueryField"
:selectedPropdefaultFormThead="selectedPropdefaultFormThead"
:selectedPropAllformThead="selectedPropAllformThead"
:selectedPropdefaultCheckedThead="selectedPropdefaultCheckedThead"
:CommonConfig="CommonConfig"
:selectQueryPath="selectQueryPath"
:navIndex="navIndex"
:queryLb="queryLb"
>
</QueryRightCommon>
</div>
</div>
</template>
<script>
import "./styles/font-awesome.min.css";
import { queryCodeByType} from "@/api/xsInput/xsInput.js";
//import utilTool from "@/utils/util.js";
import QueryRightCommon from "./queryrightcommon.vue";
export default {
name: "query_component",
components: {
QueryRightCommon
},
props: {
queryLb: String,
PageTitle: String,
//常规配置
CommonConfig: {
type: Object,
default: () => {
return {
Primarykey: "shsexsbh", //主键对应的字段名
EditRouterPath: "/formShow", //编辑路由路径
AddRouterPath:"/formShow",
DetailRouterPath: "/xsDetail", //详情路由路径
queryRouterPath: [
"dbxs/qryDbxsList?qryType=bdw",
"dbxs/qryDbxsList?qryType=sjxf",
"dbxs/qryDbxsList?qryType=tbzj"
] //配置的线索查询的不同接口
};
}
},
//左侧菜单
LeftMenu: {
type: Array,
default: () => []
},
initField: String,
//查询的字段 从父亲那里接受过来的
QueryField: Object,
//所有表头
AllformThead: Object,
//默认选中的标题
defaultCheckedThead: Object,
//默认表格所展示的标题
defaultFormThead: Object
},
data() {
return {
openeds: ['1'],
propLeftMenu: this.LeftMenu,
propQueryField: this.QueryField, //将配置的可查询的列表都传过来
propAllformThead: this.AllformThead, //表格标题列所有的数据
propdefaultCheckedThead: this.defaultCheckedThead, //默认表头设置的数据
propdefaultFormThead: this.defaultFormThead, //默认表格标题数据
navIndex: "1",
isCollapse: false,
rotate: false,
xalbSelected: "",
xalbOptions: [],
centerDialogVisible: false,
key: 1,
checkBoxData: [] /*勾选的案件*/,
startnum: 0, //开始
endnum: 9, //结束
currentPage1: 1,
page_size: 15,
page_sizes: [10, 15, 20, 30, 40],
pageShow: true,
selectedPropQueryField: [], //点击每个切换的左侧按钮，右侧数据改变。
selectedPropdefaultFormThead: [], //默认的表格标题列
selectedPropAllformThead: [], //表格标题列所有的数据
selectedPropdefaultCheckedThead: [], //表头设置里的默认选中项
selectQueryPath: "" //请求接口配置
};
},
methods: {
getField(id, key) {
//点击导航
this.navIndex = key;
this.selectedPropQueryField = this.propQueryField[id];
//查询数据
this.selectedPropdefaultFormThead = this.propdefaultFormThead[id];
this.$set(this.selectedPropdefaultFormThead[0], "zdy", 1);
//默认表格数据
this.selectedPropAllformThead = this.propAllformThead[id];
this.$set(this.selectedPropAllformThead[0], "zdy", 1);
//所有表格数据
this.selectedPropdefaultCheckedThead = this.propdefaultCheckedThead[id];
this.$set(this.selectedPropAllformThead[0], "zdy", 1);
//默认表头数据
this.selectQueryPath = this.CommonConfig["queryRouterPath"][key - 1]; //接口参数配置
this.$forceUpdate();
},
//跳转至编辑页面
turnToEdit(primarykey) {
var parameObject = new Object();
parameObject[this.CommonConfig.Primarykey] = primarykey;
this.$router.push({
path: this.CommonConfig.EditRouterPath,
query: parameObject
});
},
get() {
var self = this;
(self.isCollapse = !self.isCollapse), (self.rotate = !self.rotate);
},
getRows(val) {
this.checkBoxData = val;
},
//未知方法
getCodeQuery(type) {
queryCodeByType({
type: type
})
.then(res => {
if (type == "CODE_XSLYDM") {
this.xsOptions = res.rows;
} else if (type == "CODE_XZQH") {
this.areaOptions = res.rows;
} else if (type == "CODE_SJHYLYDM") {
this.tradeOptions = res.rows;
}
})
.catch(err => {
console.log(err);
});
},
//点击左侧按钮切换右侧数据
handleSelect(key) {
debugger;
this.navIndex = key;
this.selectedPropQueryField = this.propQueryField[key - 1];
//查询数据
this.selectedPropdefaultFormThead = this.propdefaultFormThead[key - 1];
this.$set(this.selectedPropdefaultFormThead[0], "zdy", 1);
//默认表格数据
this.selectedPropAllformThead = this.propAllformThead[key - 1];
this.$set(this.selectedPropAllformThead[0], "zdy", 1);
//所有表格数据
this.selectedPropdefaultCheckedThead = this.propdefaultCheckedThead[
key - 1
];
this.$set(this.selectedPropAllformThead[0], "zdy", 1);
//默认表头数据
this.selectQueryPath = this.CommonConfig["queryRouterPath"][key - 1]; //接口参数配置
this.$forceUpdate();
}
},
//初始化给个本单位数据
created() {
var self = this;
self.selectedPropQueryField = self.propQueryField[self.initField]; //在页面初始化时给一个查询列表默认值
self.selectedPropAllformThead = self.propAllformThead[self.initField]; //在页面初始化时表头设置里的所有值
self.selectQueryPath = self.CommonConfig["queryRouterPath"][0]; //在页面初始化的时候调一下查询接口
self.selectedPropdefaultCheckedThead =
self.propdefaultCheckedThead[self.initField]; //默认选中的值
self.selectedPropdefaultFormThead =
self.propdefaultFormThead[self.initField]; //所有的表格设置。
}
};
</script>
<style lang="scss">
@import "./styles/xcStyle";
</style>
src/components/demoPrototype/queryPages/styles/dist/publicScss.css 0 → 100644
@charset "UTF-8";
/*字体蓝*/
body {
margin: 0;
font-family: "微软雅黑", Arial, Helvetica, SimSun, sans-serif;
font-size: 14px;
overflow-x: hidden;
/*ui插件库默认12px得，需要覆盖与整体字体大小一致*/
/*字体蓝颜色*/
/*居中对齐*/
/*右对齐*/
/*左右间距10px*/
/*fa字体库20px 右间距2px*/
/*button*/
/*自定义dialog*/
/*左侧菜单*/
/*右侧区域*/
}
body .el-table--mini, body .el-table--small, body .el-table__expand-icon, body .el-button--mini, body .el-button--small {
font-size: 14px;
}
body h1, body h2, body h3, body h4, body h5, body p, body ul, body li {
margin: 0;
padding: 0;
}
body .color1 {
color: #1A81E1;
}
body .ac {
text-align: center;
}
body .ar {
text-align: right;
}
body .mg10 {
margin: 0 10px;
}
body .fa-zdy20 {
font-size: 20px;
margin-right: 2px;
}
body .el-button--primary {
background: #1A81E1;
}
body .zdyTheadDialog .el-dialog__header {
padding: 10px;
text-align: left;
font-size: 12px;
border-bottom: 1px solid #ccc;
}
body .zdyTheadDialog .el-dialog__header .el-dialog__title {
font-size: 14px;
}
body .zdyTheadDialog .el-dialog__header .el-dialog__headerbtn {
top: 15px;
}
body .zdyTheadDialog .el-dialog__body {
padding: 10px;
}
body .zdyTheadDialog .el-dialog__body .el-checkbox {
width: 120px;
line-height: 30px;
}
body .zdyTheadDialog .el-dialog__footer {
padding: 10px;
}
body .main {
width: 100%;
height: 100%;
overflow: hidden;
}
body .main .header {
width: 100%;
height: 60px;
line-height: 60px;
background: #1A81E1;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
font-size: 22px;
color: #fff;
font-weight: bold;
}
body .main .header .header_icon {
width: 60px;
height: 60px;
background-color: #096CC9;
text-align: center;
display: inline-block;
margin-right: 40px;
}
body .main .content {
width: 100%;
height: calc(100vh - 80px);
overflow: hidden;
display: flex;
}
body .main .flTtitle {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 24px;
border-radius: 0px 0px 22px 4px;
background: #73A4D1;
color: #fff;
}
body .el-badge__content {
opacity: 1 !important;
transform: none !important;
}
body .leftMenu {
height: 100%;
background: #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
opacity: 1;
overflow-y: auto;
font-size: 14px;
}
body .leftMenu .el-menu {
margin-top: 10px;
height: calc(100% - 270px);
}
body .leftMenu .el-menu .el-menu-item.is-active {
background: rgba(64, 158, 255, 0.08) !important;
font-weight: bold;
border-right: 6px solid #409EFF;
}
body .rightContainer {
width: calc(100% - 200px);
flex: 1;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
body .rightContainer .paneDiv {
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
opacity: 1;
border-radius: 4px;
margin: 15px;
padding: 0 10px;
}
\ No newline at end of file
src/components/demoPrototype/queryPages/styles/dist/xcStyle.css 0 → 100644
@charset "UTF-8";
/*字体蓝*/
body {
margin: 0;
font-family: "微软雅黑", Arial, Helvetica, SimSun, sans-serif;
font-size: 14px;
overflow-x: hidden;
/*ui插件库默认12px得，需要覆盖与整体字体大小一致*/
/*字体蓝颜色*/
/*居中对齐*/
/*右对齐*/
/*左右间距10px*/
/*fa字体库20px 右间距2px*/
/*button*/
/*自定义dialog*/
/*左侧菜单*/
/*右侧区域*/
}
body .el-table--mini,
body .el-table--small,
body .el-table__expand-icon,
body .el-button--mini,
body .el-button--small {
font-size: 14px;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body p,
body ul,
body li {
margin: 0;
padding: 0;
}
body .color1 {
color: #1A81E1;
}
body .ac {
text-align: center;
}
body .ar {
text-align: right;
}
body .mg10 {
margin: 0 10px;
cursor: pointer;
}
body .fa-zdy20 {
font-size: 20px;
margin-right: 2px;
}
body .el-button--primary {
background: #1A81E1;
}
body .zdyTheadDialog .el-dialog__header {
padding: 10px;
text-align: left;
font-size: 12px;
border-bottom: 1px solid #ccc;
}
body .zdyTheadDialog .el-dialog__header .el-dialog__title {
font-size: 14px;
}
body .zdyTheadDialog .el-dialog__header .el-dialog__headerbtn {
top: 15px;
}
body .zdyTheadDialog .el-dialog__body {
padding: 10px;
}
body .zdyTheadDialog .el-dialog__body .el-checkbox {
width: 120px;
line-height: 30px;
}
body .zdyTheadDialog .el-dialog__footer {
padding: 10px;
}
body .main {
width: 100%;
height: 100%;
overflow: hidden;
}
body .main .header {
width: 100%;
height: 60px;
line-height: 60px;
background: #1A81E1;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
font-size: 22px;
color: #fff;
font-weight: bold;
}
body .main .header .header_icon {
width: 60px;
height: 60px;
background-color: #096CC9;
text-align: center;
display: inline-block;
margin-right: 40px;
}
body .main .content {
width: 100%;
height: calc(100vh - 80px);
overflow: hidden;
display: flex;
}
body .main .flTtitle {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 24px;
border-radius: 0px 0px 22px 4px;
background: #73A4D1;
color: #fff;
}
body .el-badge__content {
opacity: 1 !important;
transform: none !important;
}
body .leftMenu {
height: 100%;
background: #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
opacity: 1;
font-size: 14px;
}
body .leftMenu .el-menu {
margin-top: 10px;
height: calc(100% - 456px);
}
body .leftMenu .el-menu .el-menu-item.is-active {
background: rgba(64, 158, 255, 0.08) !important;
font-weight: bold;
border-right: 6px solid #409EFF;
}
body .rightContainer {
width: 100%;
flex: 1;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
body .rightContainer .paneDiv {
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
opacity: 1;
border-radius: 4px;
margin: 15px;
padding: 0 10px;
}
#newCases .leftMenu {
/*案件侦办的左侧菜单没有展开收起的按钮，查询界面左侧菜单有展开收起按钮，高度不一致*/
}
#newCases .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 300px;
min-height: 200px;
text-indent: 60px;
}
#newCases .paneDiv {
padding: 0 10px 8px 10px;
}
#newCases .paneDiv .zdyLine {
line-height: 36px;
display: table;
width: 100%;
margin: 4px 0;
border-bottom: 1px dashed #eaeaea;
padding-bottom: 2px;
}
#newCases .paneDiv .zdyLine .zdycol3 {
display: inline-block;
width: 33%;
}
#newCases .paneDiv .zdyLine .zdycol6 {
display: inline-block;
width: 66%;
}
#newCases .paneDiv .zdyLine .zdycol6 .el-date-editor--daterange {
width: calc(50% - 126px) !important;
}
#newCases .paneDiv .zdyLine .zdycol6 .el-date-editor .el-range__close-icon {
width: 12px;
}
#newCases .paneDiv .zdyLine .el-range-separator {
padding-top: 3px;
}
#newCases .paneDiv .zdyLine .zdycol2 {
display: inline-block;
width: 33%;
margin-right: 33%;
}
#newCases .paneDiv .zdyLine .zdycol1 {
display: inline-block;
width: 100%;
}
#newCases .paneDiv .zdyLine .zdName {
display: inline-block;
width: 126px;
text-align: right;
color: #333;
font-size: 14px;
}
#newCases .paneDiv .zdyLine .el-input,
#newCases .paneDiv .zdyLine .el-select,
#newCases .paneDiv .zdyLine .el-cascader,
#newCases .paneDiv .zdyLine .el-range-editor.el-input__inner,
#newCases .paneDiv .zdyLine .zdyInputW,
#newCases .paneDiv .zdyLine .el-textarea {
display: inline-block;
width: calc(100% - 126px);
text-align: left;
line-height: 36px;
vertical-align: middle;
}
#newCases .paneDiv .zdyLine .el-input .el-input--suffix,
#newCases .paneDiv .zdyLine .el-input .el-popover__reference,
#newCases .paneDiv .zdyLine .el-select .el-input--suffix,
#newCases .paneDiv .zdyLine .el-select .el-popover__reference,
#newCases .paneDiv .zdyLine .el-cascader .el-input--suffix,
#newCases .paneDiv .zdyLine .el-cascader .el-popover__reference,
#newCases .paneDiv .zdyLine .el-range-editor.el-input__inner .el-input--suffix,
#newCases .paneDiv .zdyLine .el-range-editor.el-input__inner .el-popover__reference,
#newCases .paneDiv .zdyLine .zdyInputW .el-input--suffix,
#newCases .paneDiv .zdyLine .zdyInputW .el-popover__reference,
#newCases .paneDiv .zdyLine .el-textarea .el-input--suffix,
#newCases .paneDiv .zdyLine .el-textarea .el-popover__reference {
width: 100%;
}
#newCases .paneDiv .zdyLine .zdyInputCol2 .el-input {
width: calc((100% - 24px)/2);
}
#newCases .paneDiv .zdyLine .el-radio-group {
display: flex;
}
#newCases .paneDiv .zdyLine .el-radio {
margin-right: 22px;
}
#newCases .paneDiv .zdyLine .el-cascader .el-input--suffix {
width: 100%;
vertical-align: middle;
}
#newCases .paneDiv .zdyLine .el-textarea__inner {
width: calc(66% - 45px);
font-family: inherit;
}
#newCases .paneDiv .zdyLine [class*=zdycol] {
margin: 4px 0;
}
#newCases .paneDiv .zdyLine .el-cascader.el-input__inner {
vertical-align: top;
}
#newCases .paneDiv .zdyLine .el-date-editor.el-input__inner {
vertical-align: bottom;
}
#newCases .paneDiv .zdyLine .el-range-editor.el-input__inner {
vertical-align: bottom;
}
#newCases .paneDiv .zdyLine .zdyInputW>span {
width: 100%;
display: inline-block;
}
#newCases .paneDiv .el-table th {
background-color: #E6E6E6;
}
#newCases .paneDiv .el-pagination__sizes .el-input {
width: 104px;
height: 28px;
margin-top: 4px;
}
#newCases .paneDiv .el-pagination__sizes .el-input__inner {
height: 28px;
line-height: 28px;
background-color: #fff;
}
#newCases .paneDiv .el-input__inner {
height: 36px;
line-height: 36px;
background-color: #f4f6f7;
font-family: inherit;
}
#newCases .paneDiv .el-range-editor .el-range-input {
font-family: inherit;
}
#newCases .paneDiv .el-date-editor .el-range__icon {
line-height: 19px;
}
#newCases .paneDiv .el-range-editor .el-range-input {
vertical-align: top;
width: 38%;
}
#newCases .paneDiv .el-date-editor .el-range-separator {
vertical-align: top;
line-height: 20px;
}
#newCases .paneDiv .el-tag .el-tag__close {
color: #fff;
}
#newCases .paneDiv .el-table th>.cell,
#newCases .paneDiv .el-table #newCases .el-table .cell {
text-align: center;
}
#newCases .paneDiv .el-table th {
color: #333333;
font-size: 14;
}
#newCases .paneDiv .none {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#newCases .paneDiv .ajxq_s,
#newCases .paneDiv .ajxq_n {
line-height: 36px;
/*overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;*/
}
#newCases .paneDiv .el-pagination {
margin: 5px 0;
text-align: center;
}
#newCases .paneDiv .el-pagination .el-pager li {
line-height: 32px;
height: 32px;
min-width: 32px;
}
#newCases .paneDiv .el-pagination button {
min-width: 32px;
height: 32px;
line-height: 32px;
}
#newCases .paneDiv .el-input__icon {
line-height: 30px;
}
#newCases .paneDiv .el-table .has-gutter tr {
background: #2cbeab !important;
}
#newCases .al {
text-align: left;
}
#newCases .al .XzBt {
text-align: right;
width: 76px;
display: inline-block;
font-weight: 600;
}
#newCases .al .XzWrap {
width: calc(100% - 100px);
display: inline-block;
}
#newCases .setting {
color: #1A81E1;
margin: 0 15px;
cursor: pointer;
}
#newCases .pzhIcon {
margin-right: 2px;
font-size: 16px;
position: relative;
top: 2px;
}
\ No newline at end of file
src/components/demoPrototype/queryPages/styles/publicScss.scss
......@@ -13,7 +13,7 @@ $-margin:10px;//间距
$-Height-title:36px;//标题高度
$-left:left;//左对齐
$-textIndent:15px;//缩进
$-header-height:80px;//页面头部高度
$-header-height:60px;//页面头部高度
$-header-background:#003663;//页面头部背景
$-left-active-background:rgba(64, 158, 255 ,0.08);//左侧选中及hover背景色
$-left-active-background-border:6px solid #409EFF;//左侧选中及hover背景右侧边框
......@@ -54,23 +54,41 @@ body {
}
.main{
width:100%;height:100%;overflow: hidden;
.header{width:100%;height:$-header-height;line-height: $-header-height;background:$-header-background;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);font-size:28px;text-indent: 36px;color:#fff;font-weight:bold;}
.header {
width: 100%;
height: $-header-height;
line-height: $-header-height;
background: $-header-background;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
font-size: 22px;
color: #fff;
font-weight: bold;
.header_icon {
width: 60px;
height: 60px;
background-color: #73A4D1;
text-align: center;
display: inline-block;
margin-right: 40px;
}
}
.content{width:100%;height:calc(100vh - 80px);overflow: hidden;display: flex;}
.flTtitle{display:inline-block;height:40px;line-height: 40px;padding:0 24px;border-radius: 0px 0px 22px 4px;background: #73A4D1;color:#fff;}
}
.el-badge__content{opacity: 1 !important;transform: none !important;}
/*左侧菜单*/
.leftMenu{
width: 200px;
//width: 200px;
height: 100%;
background: #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
opacity: 1;
overflow-y:auto;
//overflow-y:auto;
font-size: $-fontSize14;
.el-menu{
margin-top:10px;
height:calc(100% - 10px);
height:calc(100% - 456px);
.el-menu-item.is-active{
background:$-left-active-background !important;
font-weight:bold;
......@@ -81,7 +99,7 @@ body {
}
/*右侧区域*/
.rightContainer {
width: calc(100% - 200px);
//width: calc(100% - 200px);
flex: 1;
height: 100%;
overflow-y: auto;
......
src/components/demoPrototype/queryPages/styles/xcStyle.scss
@import 'publicScss';
#newCases{
.leftMenu{
#newCases {
.leftMenu {
/*案件侦办的左侧菜单没有展开收起的按钮，查询界面左侧菜单有展开收起按钮，高度不一致*/
.el-menu{height:69px !important;max-height:calc(100% - 32px);margin-top:0px;}
// .el-menu{height:69px !important;max-height:calc(100% - 32px);margin-top:0px;}
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 200px;
}
.paneDiv{
.paneDiv {
padding: 0 10px 8px 10px;
.zdyLine{
line-height: 30px;display: table;width:100%;margin:4px 0; border-bottom: 1px dashed #eaeaea; padding-bottom: 2px;
.zdycol3{display: inline-block;width:33%;}
.zdycol2{display: inline-block;width:33%;margin-right: 33%}
.zdycol1{display: inline-block;width:100%;}
.zdName{display: inline-block;width:120px;text-align: right;color:#333;}
.el-input,.el-range-editor.el-input__inner,.zdyInputW,.el-textarea{display: inline-block;width:calc(100% - 130px);text-align: left;height:30px;vertical-align: middle;}
.zdyInputCol2{
.el-input{width:calc((100% - 24px)/2);}
}
.el-textarea__inner{width:calc(66% - 45px);font-family: inherit;}
[class*="zdycol"]{margin:4px 0;}
.el-range-editor.el-input__inner{vertical-align: bottom;}
.zdyInputW>span{width:100%;display: inline-block;}
.el-input.el-input--suffix.el-popover__reference,.el-input.el-input--suffix{width:100%;}
}
/*fugai*/
.el-input__inner{height:26px;line-height: 26px;font-family: inherit;}
.el-range-editor .el-range-input{font-family: inherit;}
.el-date-editor .el-range__icon{line-height: 19px;}
.el-range-editor .el-range-input{vertical-align: top;}
.el-date-editor .el-range-separator{
.zdyLine {
line-height: 36px;
display: table;
width: 100%;
margin: 4px 0;
border-bottom: 1px dashed #eaeaea;
padding-bottom: 2px;
.zdycol3 {
display: inline-block;
width: 33%;
}
.zdycol6 {
display: inline-block;
width: 66%;
.el-date-editor--daterange {
width: calc(50% - 126px) !important;
}
.el-date-editor .el-range__close-icon {
width: 12px;
}
}
.el-range-separator {
padding-top: 3px
}
.zdycol2 {
display: inline-block;
width: 33%;
margin-right: 33%
}
.zdycol1 {
display: inline-block;
width: 100%;
}
.zdName {
display: inline-block;
width: 126px;
text-align: right;
color: #333;
font-size: 14px;
}
.el-input,
.el-select,
.el-cascader,
.el-range-editor.el-input__inner,
.zdyInputW,
.el-textarea {
display: inline-block;
width: calc(100% - 126px);
text-align: left;
line-height: 36px;
vertical-align: middle;
.el-input--suffix,
.el-popover__reference {
width: 100%;
}
;
}
.zdyInputCol2 {
.el-input {
width: calc((100% - 24px)/2);
}
}
.el-radio-group {
display: flex;
}
.el-radio {
margin-right: 22px;
}
.el-cascader {
.el-input--suffix {
width: 100%;
vertical-align: middle;
}
}
.el-textarea__inner {
width: calc(66% - 45px);
font-family: inherit;
}
[class*="zdycol"] {
margin: 4px 0;
}
.el-cascader.el-input__inner {
vertical-align: top;
}
.el-date-editor.el-input__inner {
vertical-align: bottom;
}
.el-range-editor.el-input__inner {
vertical-align: bottom;
}
.zdyInputW>span {
width: 100%;
display: inline-block;
}
}
.el-table th {
background-color: #E6E6E6; //表格标题首行背景色
}
.el-pagination__sizes {
.el-input {
width: 104px;
height: 28px;
margin-top: 4px;
}
.el-input__inner {
height: 28px;
line-height: 28px;
background-color: #fff;
}
}
// /*fugai*/
.el-input__inner {
height: 36px;
line-height: 36px;
background-color: #f4f6f7;
font-family: inherit;
}
.el-range-editor .el-range-input {
font-family: inherit;
}
.el-date-editor .el-range__icon {
line-height: 19px;
}
.el-range-editor .el-range-input {
vertical-align: top;
width: 38%;
}
.el-date-editor .el-range-separator {
vertical-align: top;
line-height: 20px;
}
.el-tag {background-color: #5faeff;color:#fff;height:28px;line-height: 26px; margin: 4px 6px;}
.el-tag .el-tag__close{color:#fff;}
.el-table th>.cell,#newCases .el-table .cell{text-align: center;}
// .el-tag {background-color: #5faeff;color:#fff;height:38px;line-height: 36px; margin: 4px 6px;}
.el-tag .el-tag__close {
color: #fff;
}
.el-table {
th>.cell,
#newCases .el-table .cell {
text-align: center;
}
th {
color: #333333;
font-size: 14;
}
}
.none {
overflow: hidden;
text-overflow: ellipsis;
......@@ -42,25 +202,70 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ajxq_s,.ajxq_n{
line-height:26px;
.ajxq_s,
.ajxq_n {
line-height: 36px;
/*overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;*/
}
.el-pagination{margin:5px 0;text-align: center;}
.el-pagination button,#newCases .el-pager li{min-width:24px;height:24px;line-height: 24px;}
.el-input__icon{line-height: 30px;}
.el-pagination {
margin: 5px 0;
text-align: center;
.el-pager li {
line-height: 32px;
height: 32px;
min-width: 32px;
}
button {
min-width: 32px;
height: 32px;
line-height: 32px;
}
}
.el-input__icon {
line-height: 30px;
}
.el-table .has-gutter tr {
background: rgb(44, 190, 171) !important;
}
}
.al{
.al {
text-align: left;
.XzBt{text-align: right;width:76px;display: inline-block;font-weight:600;}
.XzWrap{width:calc(100% - 100px);display: inline-block;}
.XzBt {
text-align: right;
width: 76px;
display: inline-block;
font-weight: 600;
}
.setting{color:#1A81E1;margin:0 15px;cursor: pointer;}
.pzhIcon{margin-right:2px;font-size:16px;position: relative;top: 2px;}
}
.XzWrap {
width: calc(100% - 100px);
display: inline-block;
}
}
.setting {
color: #1A81E1;
margin: 0 15px;
cursor: pointer;
}
.pzhIcon {
margin-right: 2px;
font-size: 16px;
position: relative;
top: 2px;
}
}
src/main.js
......@@ -7,6 +7,7 @@ import "./plugins/element.js";
import Util from "./utils/util";
import VueWechatTitle from "vue-wechat-title";
import Nsloading from "./components/Loading.vue";
Vue.prototype.$store = store;
......@@ -16,6 +17,7 @@ Vue.prototype.$util = Util;
window.util = Util;
Vue.use(VueWechatTitle);
Vue.directive("nsLoading", {
bind(el, binding) {
const instance = new LoadingCons({
......
src/router/modules/clue.js 0 → 100644
import caseLayout from "@/layout/caseLayout.vue";
const caseRouters = [
{
path: "/caseBasicInform",
name: "caseBasicInform",
meta: {
title: '案件基本信息',
auth: "5",
isUpdata: false
},
component: () => import("@/views/caseInforCollet/caseBasicInform.vue")
},
];
export default {
path: "/cases",
component: caseLayout,
children: [...caseRouters]
};
src/router/modules/index.js
......@@ -4,6 +4,14 @@ export default[
redirect: "/login"
},
{
path: "/login",
name: "Login",
meta: {
auth: "5"
},
component: () => import("@/views/login/login.vue")
},
{
path: "/home",
name: "Home",
meta: {
......@@ -13,12 +21,13 @@ export default[
component: () => import("@/views/Home.vue")
},
{
path: "/callQuery",
name: "callQuery",
path: "/clueQuery",
name: "clueQuery",
meta: {
title: '查询界面',
title: '线索查询',
auth: "5"
},
component: () => import("@/components/demoPrototype/queryPages/callQuery.vue")
component: () => import("@/views/clueQueryPage/clueQuery.vue")
}
]
src/router/modules/other.js
import common from "@/layout/comm.vue";
const indexRouters = [
{
path: "/",
redirect: "/login"
},
{
path: "/login",
name: "Login",
meta: {
auth: "5"
},
component: () => import("@/views/login.vue")
},
{
path: "/test",
name: "test",
meta: {
......@@ -29,7 +17,8 @@ const indexRouters = [
auth: 1
},
component: () => import("@/views/asdw.vue")
}
},
];
export default {
......
src/views/Home.vue
<template>
<div class="home"
v-loading="loading">
<img :src="captcha.img ? 'captcha.img' : defaultGoodsImage" />
<div class="demo"
@click="toBar">跳转</div>
<ns-code :options=options
:multiple=isMultiple
@change1="search"></ns-code>
<div class="demo"
@click="toLogin">跳转</div>
<el-tabs v-model="activeName"
@tab-click="handleClick">
<el-tab-pane label="用户管理"
name="first"
v-if="userAuth < 2">用户管理</el-tab-pane>
<el-tab-pane label="配置管理"
name="second"
v-if="userAuth < 1">配置管理</el-tab-pane>
<el-tab-pane label="角色管理"
name="third"
v-if="userAuth < 5">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿"
name="fourth"
v-if="userAuth < 6">定时任务补偿</el-tab-pane>
</el-tabs>
<span>{{ time }}</span>
<div class="home-container">
<img class="hbimg" src="../assets/img/Home/home.png" >
<div class="navigation-bar">
<img class="bar" src="../assets/img/Home/bar.png">
<div class="title-container">
<img class="pic" src="../assets/img/Home/badge.png"/>
<h3 class="title">东莞市公安局VGIS侦察平台</h3>
</div>
</div>
<div class="home-content">
<ul class="item">
<li v-for="(item,index) in menu" :key="index" @click="$router.push('/clueQuery')">
<img class="shield animat" src="../assets/img/Home/shield.png">
<img class="route" src="../assets/img/Home/route.png">
<span>{{item}}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
import { Home, test, test1, js_test } from "@/api/home.js";
import { mapGetters } from "vuex";
import NsCode from "@c/code.vue"
export default {
name: "Home",
components: {
NsCode
},
data () {
return {
loading: true,
tokeb: "",
captcha: {
id: "",
img: ""
},
value: "",
activeName: "",
options: [{
label: '一级 1',
id: '1',
children: [{
label: '二级 1-1',
id: '11',
children: [{
label: '1',
id: '111'
}]
}]
}],
isMultiple: true,
time: ''
menu:['线索管理','线索管理','线索管理','线索管理'],
judge: true,
acton:''
};
},
created () {
this.getHome();
this.getH();
this.getT();
this.time = this.$util.timeStampTurnTime('1603697627061');
this.ttt()
},
computed: {
...mapGetters(["defaultGoodsImage", "userAuth"])
},
methods: {
ttt () {
js_test("test.json").then(res => {
console.log(111);
console.log(res);
}).catch(err => {
console.log(err);
})
},
getHome () {
Home({
object: "粤sty989"
}).then(res => {
console.log(res);
this.loading = false
}).catch(err => {
this.loading = false
console.log(err);
});
},
getH () {
test({
object: "粤sty989"
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
},
getT () {
test1({
zjhm: 412721197608203413
}).then(res => {
console.log(res);
});
},
toBar () {
this.$router.push("/asdw");
},
toLogin () {
this.$router.push("/test");
},
search (test) {
console.log(test);
this.$router.push("/test1");
},
handleClick (tab, event) {
console.log(tab, event);
......@@ -124,10 +51,79 @@ export default {
}
};
</script>
<style lang="scss">
.demo {
width: 100px;
height: 100px;
background: $base-color;
<style lang="scss" >
.home-container{
/*//height: 1200px;*/
/*//background-color: #031883; !* 不支持线性的时候显示 *!*/
.hbimg{
//width: 100%;
background-image: linear-gradient(to right, #59a5e8, #5ea6ff);
min-width: 100%;
position: absolute;
}
.home-content{
height: auto;
margin-top: 100px;
text-align: center;
.item{
width: 100%;
margin-left: 12%;
position: relative;
}
.item li{
display: inline;
float: left;
margin-left: -50px;
.route{
top: 20px;
left: -230px;
position: relative;
}
span{
position: relative;
display: block;
top: -20px;
left: -32px;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
}
}
}
}
.navigation-bar{
width:101%;
position: relative;
overflow: hidden;
left: -8px;
top: -5px;
.bar{
min-width: 100%;
}
.title-container{
position: relative;
top: -50px;
left: 800px;
.title{
margin-top: -25px;
margin-left: 57px;
font-size: 30px;
color: #FFFEF9;
font-weight: bold;
}
.pic{
margin-top: -5px;
position: absolute;
}
}
}
.animat{
-webkit-transition: transform 0.8s;
}
.animat:hover{
transform:scale(1.1);
}
</style>
src/views/login/login.vue 0 → 100644
<template>
<div class="login-container">
<video width="100%" height="100%" id="myVideo" class="video-js video" style="object-: fill;">
<source src="../../assets/img/Login/animate.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<el-form ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
autocomplete="on"
label-position="right">
<div class="title-container">
<img class="pic" src="../../assets/img/Login/jinghui.png"/>
<h3 class="title">东莞市公安局VGIS侦察平台</h3>
</div>
<img class="border" src="../../assets/img/Login/border.png">
<div class="inputInfo">
<el-form-item prop="username">
<el-input ref="username"
v-model="loginForm.username"
placeholder="请输入用户名"
prefix-icon="el-icon-user-solid"
name="username"
type="text"
tabindex="1"
autocomplete="on"/>
</el-form-item>
<el-form-item prop="password">
<el-input :key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="请输入密码"
prefix-icon="el-icon-lock"
name="password"
tabindex="2"
autocomplete="on"/>
</el-form-item>
<!-- 按钮事件
读取状态属性 绑定
类型: 样式内容 -->
<el-button :loading="loading"
type="primary"
style="width:100%;margin-bottom:30px;background-image: linear-gradient(to right, #3666EB , #0FE6E3)"
@click.native.prevent="handleLogin">登录
</el-button>
</div>
<!-- 使用此方法前检查prop一定必须x`要写在<el-form-item>上面 -->
</el-form>
<div class="footer" style="z-index:1000;">
<span style="margin-right:30px">内蒙古自治区扫黑除恶管理应用系统</span>
<span style="margin-left:30px">技术支持：方正国际软件（北京）有限公司</span>
</div>
</div>
</template>
<script>
// 导入验证规则
import {doLogin} from "@/api/home.js";
import Cookies from "js-cookie";
import Videojs from 'video.js';
export default {
name: "Login",
data() {
return {
loginForm: {
username: "",
password: "",
},
loginRules: {
username: [
{required: true, trigger: "blur"},
],
password: [{required: true, trigger: "blur"}],
},
passwordType: "password",
capsTooltip: false,
loading: false,
// 默认为不显示dialog
showDialog: false,
redirect: undefined,
otherQuery: {},
userInfo: {},
timer: null
};
},
created() {
// window.addEventListener('storage', this.afterQRScan)
},
mounted() {
if (this.loginForm.username === "") {
this.$refs.username.focus();
} else if (this.loginForm.password === "") {
this.$refs.password.focus();
}
;
this.initVideo()
},
destroyed() {
// window.removeEventListener('storage', this.afterQRScan)
},
methods: {
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
this.$nextTick(() => {
this.$refs.password.focus();
});
},
handleLogin() {
this.loading = true;
this.timer = setTimeout(() => {
//done();
// 动画关闭需要一定的时间
setTimeout(() => {
this.loading = false;
}, 400);
}, 2000);
doLogin({
username: this.loginForm.username,
password: this.loginForm.password,
}).then((res) => {
Cookies.set("JSESSIONID", res.JSESSIONID);
window.localStorage.setItem("user", JSON.stringify(res.USER));
this.userInfo =
JSON.parse(window.localStorage.getItem("user")) || "";
this.$router.push({path: "/shouye"});
this.$store.commit("user/SET_UserInfo", this.userInfo)
});
},
//初始化视频方法
initVideo() {
this.$nextTick(() => {
let myPlayer = Videojs("myVideo", {
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: false,
loop: true,
autoplay: false,
//自动播放属性,muted:静音播放
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto",
//设置视频播放器的显示宽度（以像素为单位）
});
});
},
},
};
</script>
<style lang="scss">
// @import 'video.js/dist/video-js.css';
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
color: $cursor;
}
}
/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 44px;
input {
background: #062459;
border: 1px solid #01CFFF;
-webkit-appearance: none;
opacity: 1;
border-radius: 4px;
color: #ADADAD;
height: 44px;
caret-color: $cursor;
&:-webkit-autofill {
//box-shadow: 0 0 0px 1000px transparent inset !important;
-webkit-text-fill-color: #ADADAD !important;
background-color: transparent;
}
}
input:-webkit-autofill {
-webkit-text-fill-color: #ededed !important;
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
background-color: transparent;
background-image: none;
transition: background-color 50000s ease-in-out 0s;
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
</style>
<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
#myVideo:focus {
outline: 0px;
}
.login-container {
min-height: 100%;
width: 100%;
background-color: #031883; /* 不支持线性的时候显示 */
background-image: linear-gradient(to right, #031883, #0163E8);
.video {
width: 100%;
position: absolute;
z-index: 0 !important;
}
.login-form {
position: relative;
width: 516px;
max-width: 100%;
padding: 160px 35px 0;
margin: 0 auto;
margin-right: 300px;
overflow: hidden;
text-align: center;
.border {
//position: relative;
}
.inputInfo {
position: absolute;
width: 320px;
left: 135px;
top: 300px;
.el-input{
border: 1px solid #01CFFF;
opacity: 1;
border-radius: 4px;
}
}
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.title-container {
position: relative;
.title {
font-size: 36px;
color: $light_gray;
margin: 0px auto 40px 60px;
text-align: center;
font-weight: bold;
}
.pic {
position: absolute;
left: 0px;
bottom: -7px;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.footer {
position: fixed;
bottom: 60px;
width: 100%;
text-align: center;
color: #FFFFFF;
font-family: Microsoft YaHei;
font-size: 12px;
}
}
</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