Commit 780d7077 authored by 王晓旭's avatar 王晓旭

首页样式

parent 359561ad
......@@ -24,7 +24,6 @@
"json-bigint": "^0.3.0",
"jwt-decode": "^3.1.2",
"moment": "^2.29.4",
"muse-ui": "^3.0.2",
"nprogress": "^0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
......@@ -37,7 +36,6 @@
"vue-cropper": "0.5.5",
"vue-router": "3.4.9",
"vue-template-compiler": "^2.6.14",
"vue2-org-tree": "^1.3.5",
"vuex": "3.6.0"
},
"devDependencies": {
......@@ -3724,11 +3722,6 @@
"ms": "2.0.0"
}
},
"node_modules/body-scroll-lock": {
"version": "2.7.1",
"resolved": "https://registry.npmmirror.com/body-scroll-lock/-/body-scroll-lock-2.7.1.tgz",
"integrity": "sha512-hS53SQ8RhM0e4DsQ3PKz6Gr2O7Kpdh59TWU98GHjaQznL7y4dFycEPk7pFQAikqBaUSCArkc5E3pe7CWIt2fZA=="
},
"node_modules/bonjour": {
"version": "3.5.0",
"resolved": "https://registry.nlark.com/bonjour/download/bonjour-3.5.0.tgz",
......@@ -5756,11 +5749,6 @@
"node": ">=0.10"
}
},
"node_modules/dayjs": {
"version": "1.11.3",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz",
"integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
},
"node_modules/de-indent": {
"version": "1.0.2",
"resolved": "https://registry.nlark.com/de-indent/download/de-indent-1.0.2.tgz",
......@@ -9724,11 +9712,6 @@
"resolved": "https://registry.npmmirror.com/jwt-decode/-/jwt-decode-3.1.2.tgz",
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
},
"node_modules/keycode": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.1.tgz",
"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
},
"node_modules/killable": {
"version": "1.0.1",
"resolved": "https://registry.nlark.com/killable/download/killable-1.0.1.tgz",
......@@ -10981,21 +10964,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/muse-ui": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/muse-ui/-/muse-ui-3.0.2.tgz",
"integrity": "sha512-oIH8wEKQqXA6xbb3HzprxC2xoF7P8G01uvF+Jhs6VtbxQjO7VVkKKFu2Mb2NmhX3mMU2EBCgE8wlTU29ffjkPA==",
"dependencies": {
"body-scroll-lock": "^2.6.1",
"dayjs": "^1.8.2",
"keycode": "^2.1.9",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"vue": "^2.5.0"
}
},
"node_modules/mute-stream": {
"version": "0.0.8",
"resolved": "https://registry.nlark.com/mute-stream/download/mute-stream-0.0.8.tgz",
......@@ -16875,15 +16843,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/vue2-org-tree": {
"version": "1.3.5",
"resolved": "https://registry.npm.taobao.org/vue2-org-tree/download/vue2-org-tree-1.3.5.tgz",
"integrity": "sha1-RGpSjCMTo5tTIKEbMIORbbi13GI=",
"license": "MIT",
"peerDependencies": {
"vue": "^2.5.4"
}
},
"node_modules/vuex": {
"version": "3.6.0",
"resolved": "https://registry.nlark.com/vuex/download/vuex-3.6.0.tgz",
......@@ -20301,11 +20260,6 @@
}
}
},
"body-scroll-lock": {
"version": "2.7.1",
"resolved": "https://registry.npmmirror.com/body-scroll-lock/-/body-scroll-lock-2.7.1.tgz",
"integrity": "sha512-hS53SQ8RhM0e4DsQ3PKz6Gr2O7Kpdh59TWU98GHjaQznL7y4dFycEPk7pFQAikqBaUSCArkc5E3pe7CWIt2fZA=="
},
"bonjour": {
"version": "3.5.0",
"resolved": "https://registry.nlark.com/bonjour/download/bonjour-3.5.0.tgz",
......@@ -21858,11 +21812,6 @@
"assert-plus": "^1.0.0"
}
},
"dayjs": {
"version": "1.11.3",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz",
"integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
},
"de-indent": {
"version": "1.0.2",
"resolved": "https://registry.nlark.com/de-indent/download/de-indent-1.0.2.tgz",
......@@ -24734,11 +24683,6 @@
"resolved": "https://registry.npmmirror.com/jwt-decode/-/jwt-decode-3.1.2.tgz",
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
},
"keycode": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.1.tgz",
"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
},
"killable": {
"version": "1.0.1",
"resolved": "https://registry.nlark.com/killable/download/killable-1.0.1.tgz",
......@@ -25659,18 +25603,6 @@
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
"dev": true
},
"muse-ui": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/muse-ui/-/muse-ui-3.0.2.tgz",
"integrity": "sha512-oIH8wEKQqXA6xbb3HzprxC2xoF7P8G01uvF+Jhs6VtbxQjO7VVkKKFu2Mb2NmhX3mMU2EBCgE8wlTU29ffjkPA==",
"requires": {
"body-scroll-lock": "^2.6.1",
"dayjs": "^1.8.2",
"keycode": "^2.1.9",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0"
}
},
"mute-stream": {
"version": "0.0.8",
"resolved": "https://registry.nlark.com/mute-stream/download/mute-stream-0.0.8.tgz",
......@@ -30064,12 +29996,6 @@
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
"dev": true
},
"vue2-org-tree": {
"version": "1.3.5",
"resolved": "https://registry.npm.taobao.org/vue2-org-tree/download/vue2-org-tree-1.3.5.tgz",
"integrity": "sha1-RGpSjCMTo5tTIKEbMIORbbi13GI=",
"requires": {}
},
"vuex": {
"version": "3.6.0",
"resolved": "https://registry.nlark.com/vuex/download/vuex-3.6.0.tgz",
.loginpage {
width: 100%;
height: 100%;
min-width: 1900px;
min-height: 960px;
}
.lci-img {
width: 100%;
height: 100%;
}
.l-right {
background: url('~@/assets/images/u5.jpg') no-repeat border-box;
background-size: cover;
width: 800px;
height: 100%;
min-height: 960px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
opacity: 0.95;
text-align: center;
}
.l-right .lr-title {
margin: 200px auto 100px;
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 34px;
color: #000000;
}
.l-right .lr-form {
box-sizing: border-box;
padding: 0 120px 0 50px;
}
.l-right .el-input__inner {
height: 60px;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: normal;
border-radius: 10px;
margin-bottom: 20px;
}
.l-right .denglubtn {
width: 100%;
height: 60px;
background: inherit;
background-color: #206eff;
border: none;
border-radius: 5px;
font-family: '微软雅黑', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
.loginpage{
width: 100%;
height: 100%;
min-width: 1900px;
min-height: 960px;
}
// 走马灯样式
.lci-img{
width: 100%;
height: 100%;
}
.l-right{
background: url('~@/assets/images/u5.jpg') no-repeat border-box ;
background-size: cover;
width: 800px;
height: 100%;
min-height: 960px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
opacity: 0.95;
text-align: center;
.lr-title{
margin:200px auto 100px;
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 34px;
color: #000000;
}
.lr-form{
box-sizing: border-box;
padding: 0 120px 0 50px;
}
.el-input__inner{
height: 60px;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: normal;
border-radius: 10px;
margin-bottom: 20px;
}
.denglubtn{
width: 100%;
height: 60px;
background: inherit;
background-color: rgba(32, 110, 255, 1);
border: none;
border-radius: 5px;
font-family: '微软雅黑', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
}
......@@ -272,7 +272,7 @@ export default {
li {
a {
display: block;
padding: 0 10px;
padding: 0 20px;
height: 40px;
line-height: 40px;
font-size: 14px;
......
......@@ -56,7 +56,8 @@ const router = new Router({
...restBuilder('news/category', 'news/category'),//新闻频道分类
//以下为基础路由配置
builder('', 'Home'),
builder('/', 'Home'),
builder('/home', 'Home'),
builder('index', 'Home'),
builder('login/updatePwd', 'login/updatePwd'),
builder('403', 'errors/403'),
......
<template>
<div :class="classList" style="min-height: 100vh;">
欢迎你,{{ userData }}
<!-- <div :class="classList" style="min-height: 100vh;"> -->
<div class="homepage">
<!-- 核心数据 -->
<div class="card">
<div class="cardtitle">核心数据</div>
<div class="header">
<div class="hc-itme">
<div class="i-title">企业总量(家)</div>
<div class="i-num">5</div>
</div>
<div class="hc-itme">
<div class="i-title">产品数量(个)</div>
<div class="i-num">35</div>
</div>
<div class="hc-itme">
<div class="i-title">员工数量(人)</div>
<div class="i-num">48</div>
</div>
<div class="hc-itme">
<div class="i-title">新闻数量(篇)</div>
<div class="i-num">89</div>
</div>
<div class="hc-itme">
<div class="i-title">反馈数量(次)</div>
<div class="i-num">65</div>
</div>
<div class="hc-itme">
<div class="i-title">用户数量(次)</div>
<div class="i-num">156</div>
</div>
</div>
</div>
<!-- 饼状图 -->
<div class="hang pies">
<div class="card pie">
<div class="cardtitle">产品分布</div>
<div class="piecard">
<Pie class="echarts" :info="cpfbDayValue" ref="ageChild" style="width:100%;height:100%" />
</div>
</div>
<div class="card pie">
<div class="cardtitle">名片分布</div>
<div class="piecard">
<Pie class="echarts" :info="mpfbDayValue" ref="ageChild" style="width:100%;height:100%" />
</div>
</div>
<div class="card pie">
<div class="cardtitle">新闻分布</div>
<div class="piecard">
<Pie class="echarts" :info="xwfbDayValue" ref="ageChild" style="width:100%;height:100%" />
</div>
</div>
</div>
<!-- 折线图柱状图 -->
<div class="hang">
<div class="card linebar">
<div class="cardtitle">小程序近30日访问次数</div>
<div class="linebarcar">
<CLine class="echarts" :info="lineDayValue" />
</div>
</div>
<div class="card linebar">
<div class="cardtitle">员工累计发送名片次数</div>
<div class="linebarcar">
<CBar class="echarts" :info="barDayValue" />
</div>
</div>
</div>
</div>
</template>
<script>
import Pie from "./home/pie.vue";
import CLine from "./home/line.vue";
import CBar from "./home/bar.vue";
export default {
computed: {
userData() {
return this.$store.state.userData.currUserName;
},
}
},
components: {
Pie,
CLine,
CBar
},
data() {
return {
classList: "page page-home",
// barDayValue: [{ nums: 1, age_area: "31-40岁" }],
lineDayValue: [
{
datetime: "08:00:00-09:00:00",
count: 0
},
{
datetime: "09:00:00-10:00:00",
count: 0
},
{
datetime: "10:00:00-11:00:00",
count: 0
},
{
datetime: "11:00:00-12:00:00",
count: 0
},
{
datetime: "12:00:00-13:00:00",
count: 0
},
{
datetime: "13:00:00-14:00:00",
count: 0
},
{
datetime: "14:00:00-15:00:00",
count: 4
},
{
datetime: "15:00:00-16:00:00",
count: 1
},
{
datetime: "16:00:00-17:00:00",
count: 0
},
{
datetime: "17:00:00-18:00:00",
count: 0
},
{
datetime: "18:00:00-19:00:00",
count: 0
}
],
cpfbDayValue: [
{
value: 5,
name: "四川思迈尔网络科技有限公司"
},
{
value: 10,
name: "四川恒生信达科技有限公司"
},
{
value: 10,
name: "四川信宏翔科技有限公司"
},
{
value: 6,
name: "武汉力龙信息科技股份有限公司"
},
{
value: 32,
name: "四川力龙恒生科技股份有限公司"
}
],
mpfbDayValue: [
{
value: 5,
name: "四川思迈尔网络科技有限公司"
},
{
value: 10,
name: "四川恒生信达科技有限公司"
},
{
value: 10,
name: "四川信宏翔科技有限公司"
},
{
value: 6,
name: "武汉力龙信息科技股份有限公司"
},
{
value: 32,
name: "四川力龙恒生科技股份有限公司"
}
],
xwfbDayValue: [
{
value: 33,
name: "集团频道"
},
{
value: 56,
name: "产品频道"
},
{
value: 89,
name: "机器人频道"
}
]
};
},
created() {},
created() {}
};
</script>
<style scoped lang="less">
@import "./home/home.less";
.page-home {
margin-top: 20px !important;
border-radius: 8px;
......
<template>
<div style="width: 100%; height: 100%"></div>
</template>
<script>
// import { deepClone } from "@/utils/js/common.js";
// import lodash from "lodash";
// import { getStatisticAges } from "@/api/dataAdmin.js";
export default {
props: {
info: {
type: Array,
default: () => [
{
value: 200,
name: "员工1",
},
{
value: 400,
name: "员工2",
},
{
value: 600,
name: "员工3",
},
{
value: 500,
name: "员工4",
},
{
value: 260,
name: "员工5",
},
{
value: 100,
name: "员工6",
},
],
},
option: {
type: Object,
default: () => {},
},
day: {
type: String,
default: () => "0",
},
},
watch: {
day(newval, oldval) {
newval ? this.getData() : "";
},
},
async mounted() {
this.getData();
},
methods: {
async getData() {
// let res = await getStatisticAges({
// selected: this.day == 5 ? null : this.day,
// });
// if (res.code != 1) return;
// let label = res.data.map((item) => item.age_area);
// let value = res.data.map((item) => item.nums);
let label = this.info.map((item) => item.name);
let value = this.info.map((item) => item.value);
this._initEcharts(label, value);
},
_initEcharts(label, value) {
const myChart = this.$echarts.init(this.$el);
const echarts = this.$echarts;
let option = {
legend: {
// data: ["预约次数"],
bottom: "5%",
right: "center",
itemWidth: 13,
textStyle: {
color: "#556677",
},
},
grid: {
left: "2%",
right: "2%",
top: "15%",
bottom: "15%",
containLabel: true,
},
xAxis: {
type: "category",
data: label,
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
series: [
{
data: value,
// name: "预约次数",
barWidth: "50%",
type: "bar",
itemStyle: {
color: "#6194F8",
},
},
],
};
// if (this.option) {
// option = lodash.defaultsDeep(deepClone(this.option), option);
// }
myChart.setOption(option, true);
},
},
};
</script>
.homepage {
margin: 20px 20px 0 20px;
}
.homepage .hang {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.homepage .card {
background-color: #ffffff;
border-radius: 8px;
box-sizing: border-box;
padding: 10px 20px;
}
.homepage .card .cardtitle {
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
position: relative;
padding: 10px 20px;
}
.homepage .card .cardtitle::after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 4px;
height: 20px;
background-color: red;
}
.header {
display: flex;
justify-content: space-between;
}
.header .hc-itme {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding: 30px 80px 40px;
}
.header .hc-itme .i-title {
font-weight: 400;
font-style: normal;
color: #464646;
padding: 10px 0;
}
.header .hc-itme .i-num {
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 24px;
color: #000000;
text-align: center;
}
.pies {
width: 100%;
}
.pies .pie {
width: calc(33% - 4px);
}
.pies .pie .piecard {
height: 240px;
}
.linebar {
width: calc(50% - 9px);
}
.linebar .linebarcar {
height: 240px;
}
.homepage{
margin: 20px 20px 0 20px;
.hang{
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.card{
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
box-sizing: border-box;
padding: 10px 20px;
.cardtitle{
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
position: relative;
padding: 10px 20px;
}
.cardtitle::after{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
width: 4px;
height: 20px;
background-color: red;
}
}
}
// 核心数据S
.header{
display: flex;
justify-content: space-between;
.hc-itme{
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding: 30px 80px 40px;
.i-title{
font-weight: 400;
font-style: normal;
color: #464646;
padding: 10px 0;
}
.i-num{
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 24px;
color: #000000;
text-align: center;
}
}
}
// 核心数据E
// 饼状图S
.pies{
width: 100%;
.pie{
width: calc(33% - 4px);
.piecard{
height: 240px;
}
}
}
// 饼状图E
// 折线图柱状图S
.linebar{
width: calc(50% - 9px);
.linebarcar{
height: 240px;
}
}
// 折线图柱状图E
<template>
<div style="width: 100%; height: 100%"></div>
</template>
<script>
// import { deepClone } from "@/utils/js/common.js";
// import lodash from "lodash";
export default {
props: {
info: {
type: Array,
default: () => [],
},
option: {
type: Object,
default: () => {},
},
},
watch:{
info(){
this._initEcharts();
}
},
mounted() {
this._initEcharts();
},
methods: {
_initEcharts() {
const NAME = [];
const VALUE = [];
const myChart = this.$echarts.init(this.$el);
const echarts = this.$echarts;
console.log(123123,this.info);
this.info.forEach((item) => {
NAME.push(item.datetime);
VALUE.push(item.count);
});
let option = {
legend: {
icon: "circle",
bottom: "5%",
right: "center",
itemWidth: 10,
itemGap: 10,
textStyle: {
color: "#556677",
},
},
grid: {
left: "2%",
right: "2%",
top: "15%",
bottom: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
// color: "rgba(50, 216, 205, 1)",
color: "#A1A7B3",
},
},
},
xAxis: [
{
type: "category",
boundaryGap: 1,
axisLine: {
show: false,
},
axisLabel: {
color: "#A1A7B3",
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
data: NAME,
},
],
yAxis: [
{
type: "value",
name: "",
padding: 5,
// max: 1000,
splitLine: {
show: true,
lineStyle: {
color: "#A1A7B3",
type: "dashed",
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 10,
textStyle: {
color: "#A1A7B3",
},
},
axisTick: {
show: false,
},
},
],
series: [
{
// name: "预约次数",
type: "line",
symbolSize: 5,
// smooth: true,
// showSymbol: false,
itemStyle: {
normal: {
color: "#6093F9",
lineStyle: {
color: "#6093F9",
width: 2,
},
},
},
areaStyle: {
normal: {
color: "#BDD2FD",
},
},
// data: [140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240],
data: VALUE,
},
],
};
// if (this.option) {
// option = lodash.defaultsDeep(deepClone(this.option), option);
// }
myChart.setOption(option, true);
},
},
};
</script>
\ No newline at end of file
<template>
<div></div>
</template>
<script>
// import { deepClone } from "@/utils/js/common.js";
// import lodash from "lodash";
// import { getStatisticSexual } from "@/api/dataAdmin.js";
export default {
props: {
info: {
type: Array,
default: () => [
{
value: 300,
name: "女士",
},
{
value: 700,
name: "男士",
},
],
},
option: {
type: Object,
default: () => {},
},
day: {
type: String,
default: () => "0",
},
},
watch: {
day(newval, oldval) {
newval ? this.getData() : "";
},
},
mounted() {
this.getData();
},
methods: {
async getData() {
// let res = await getStatisticSexual({
// selected: this.day == 5 ? null : this.day,
// });
// if (res.code != 1) return;
// let value = res.data.map(({ idcard_Sex, nums }) => ({
// name: idcard_Sex,
// value: nums,
// }));
// this._initEcharts(value);
console.log(this.info);
this._initEcharts(this.info);
},
_initEcharts(value) {
const myChart = this.$echarts.init(this.$el);
const echarts = this.$echarts;
const colorList = ["#4D88FE", "#50CCCB", "#FFBF3C","#703cff","#7b7881"];
let option = {
grid: {
left: "2%",
right: "2%",
top: "5%",
bottom: "15%",
containLabel: true,
},
legend: {
top: "15%",
right: "right",
itemWidth: 13,
textStyle: {
color: "#556677",
},
},
graphic: {
// 这个属性可以在饼图内部填充图片,文字等
elements: [
{
type: "image",
left: "center", //
top: "center", // 配置图片居中
},
],
},
series: [
{
type: "pie",
radius: "80%",
center: ["30%", "52%"],
label: {
fontWeight: "bold",
rich: {
rich_blue: {
color: "#4D88FE",
},
rich_orange: {
color: "#FFBF3C",
},
rich_green: {
color: "#50CCCB",
},
},
},
label: {
normal: {
formatter: "{c}", //自定义显示格式(b:name, c:value, d:百分比)
},
},
labelLine: {
length: 6,
length2: 6,
},
itemStyle: {
normal: {
borderColor: "#fff",
borderWidth: 2,
color: function (params) {
return colorList[params.dataIndex];
},
},
},
data: value,
},
],
};
// if (this.option) {
// option = lodash.defaultsDeep(deepClone(this.option), option);
// }
myChart.setOption(option, true);
},
},
};
</script>
<!-- 登录页面 -->
<template>
<div class="page page-login flex flex-v">
<div class="form-wrap flex flex-1">
<div class="loginpage">
<!-- 轮播 -->
<el-carousel
ref="carousel"
height="960px"
:autoplay="true"
:loop="true"
arrow="never"
:interval="3000"
indicator-position="none"
@mouseenter.native="delHandleMouseEnter"
>
<el-carousel-item>
<img class="lci-img" src="~@/assets/images/u2.png" />
</el-carousel-item>
<el-carousel-item>
<img class="lci-img" src="~@/assets/images/u3.png" />
</el-carousel-item>
<el-carousel-item>
<img class="lci-img" src="~@/assets/images/u4.png" />
</el-carousel-item>
</el-carousel>
<!-- 右侧 -->
<div class="l-right">
<div class="lr-title">欢迎使用企业官网综合管理后台</div>
<div class="lr-from">
<el-form
@submit.prevent="onSubmit"
ref="form"
:model="form"
label-width="80px"
size="small"
class="lr-form"
>
<h1>{{ sysName }}</h1>
<el-form-item label="用户名">
<el-input v-model="form.loginName"></el-input>
<el-form-item>
<el-input v-model="form.loginName" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type="password"></el-input>
<el-form-item>
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item size="large">
<el-button
......@@ -23,21 +47,30 @@
native-type="submit"
:loading="loading"
@click="onSubmit"
class="denglubtn"
>登录</el-button
>
</el-form-item>
</el-form>
</div>
</div>
<div class="footer"></div>
</div>
</template>
<script>
export default {
name: "login",
created() {},
mounted() {
// 为了第一次鼠标进入就触发,需要在mounted方法中写,而且轮播图是多张,所以需要循环遍历index
this.$refs.carousel.handleMouseEnter = () => {};
},
methods: {
// 鼠标移入卡片banner不停止
delHandleMouseEnter() {
this.$refs.carousel.handleMouseEnter = () => {};
},
login() {
this.loading = true;
this.$post("/login/login", this.form)
......@@ -48,7 +81,7 @@ export default {
this.$store.commit("setUserData", data);
console.log("userData", this.$store.state.userData);
this.$router.replace({
path: this.redirect,
path: this.redirect
});
},
loginFail(error) {
......@@ -69,7 +102,7 @@ export default {
return this.$message.warning("请输入密码");
}
this.login();
},
}
},
data() {
return {
......@@ -78,56 +111,16 @@ export default {
redirect: this.$route.query.redirect || "/",
form: {
loginName: "",
password: "",
password: ""
},
sysName: localStorage.getItem("sysName")
? localStorage.getItem("sysName")
: "企业服务管理平台",
: "企业服务管理平台"
};
},
}
};
</script>
<style lang="less">
.el-divider--horizontal {
margin: 5px 0;
background: 0 0;
border-top: 2px solid #e8eaec;
}
.page-login {
background-image: linear-gradient(45deg, #333, #111);
background-size: 40px 40px;
margin: 0;
height: 100%;
.el-form {
margin: auto;
width: 400px;
padding: 25px 25px 0 0;
background: #fff;
h1 {
text-align: center;
font-size: 20px;
font-weight: 500;
margin-bottom: 20px;
}
button {
margin-top: 10px;
width: 240px;
}
.el-input-group__append {
padding: 0;
font-size: 0;
}
}
.footer {
height: 80px;
font-size: 12px;
color: #999;
text-align: center;
line-height: 80px;
a {
color: #999;
}
}
}
<style lang="less" scopped>
@import "~@/assets/less/login.less";
</style>
......@@ -17,8 +17,9 @@ module.exports = {
hot: true, //自动保存
proxy: {
"/enterprise": {
target: "http://test.office.com:11073",
// target: "http://test.office.com:11073",
// target: 'http://8.136.255.30:11078',
target: 'http://192.168.0.98:11086',
changeOrigin: true,
secure: false,
cookieDomainRewrite: "localhost",
......
This diff is collapsed.
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