样式布局修改
This commit is contained in:
熊丽君
@ -1,13 +1,12 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="app-container">
|
||||
<!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
|
||||
首页
|
||||
<!-- <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
</el-row> -->
|
||||
|
||||
<el-row :gutter="32">
|
||||
<!-- <el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
@ -23,64 +22,61 @@
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import RaddarChart from './dashboard/RaddarChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
import PanelGroup from "./dashboard/PanelGroup";
|
||||
import LineChart from "./dashboard/LineChart";
|
||||
import RaddarChart from "./dashboard/RaddarChart";
|
||||
import PieChart from "./dashboard/PieChart";
|
||||
import BarChart from "./dashboard/BarChart";
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145],
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130],
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130],
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130],
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
name: "Index",
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart
|
||||
BarChart,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
lineChartData: lineChartData.newVisitis,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
this.lineChartData = lineChartData[type];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
background-color: rgb(255, 255, 255);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
@ -90,7 +86,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
@ -1,81 +1,98 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
>
|
||||
<h3 class="title">后台管理系统</h3>
|
||||
<el-form-item prop="account">
|
||||
<el-input
|
||||
v-model="loginForm.account"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="账号"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="user"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
placeholder="密码"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaOnOff">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="validCode"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox
|
||||
<el-row>
|
||||
<el-col :span="13" class="_left">
|
||||
<img src="@/assets/images/login-left.png" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="11" class="_right">
|
||||
<h3 class="title">后台登录</h3>
|
||||
<el-form-item label="账户名称" prop="account">
|
||||
<el-input
|
||||
v-model="loginForm.account"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="请输入账户名称"
|
||||
>
|
||||
<!-- <svg-icon
|
||||
slot="prefix"
|
||||
icon-class="user"
|
||||
class="el-input__icon input-icon"
|
||||
/> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
placeholder="请输入密码"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<!-- <svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon"
|
||||
/> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaOnOff">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="validCode"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- <el-checkbox
|
||||
v-model="loginForm.rememberMe"
|
||||
style="margin: 0px 0px 25px 0px"
|
||||
>记住密码</el-checkbox
|
||||
>
|
||||
<el-form-item style="width: 100%">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width: 100%"
|
||||
@click.native.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'"
|
||||
>立即注册</router-link
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
> -->
|
||||
<el-form-item style="width: 100%; margin-top: 69px">
|
||||
<el-button
|
||||
:round="false"
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #0054ff;
|
||||
border-radius: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
"
|
||||
@click.native.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'"
|
||||
>立即注册</router-link
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<!-- <div class="el-login-footer">
|
||||
@ -197,20 +214,36 @@ export default {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
// background-image: url("../assets/images/login-background.jpg");
|
||||
background-color: #000;
|
||||
background-color: #b1ccff;
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
height: 34px;
|
||||
font-size: 36px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin: 0px auto 73px auto;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
width: 1200px;
|
||||
._left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 660px;
|
||||
background: linear-gradient(0deg, #0054ff, #516af5);
|
||||
img {
|
||||
width: 495px;
|
||||
height: 441px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
._right {
|
||||
height: 100%;
|
||||
padding: 120px 104px 5px 104px;
|
||||
}
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
@ -253,3 +286,28 @@ export default {
|
||||
height: 38px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-form-item__label {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
padding-bottom: 0;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input {
|
||||
input {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #dfdfdd;
|
||||
padding: 0;
|
||||
&:focus {
|
||||
border-bottom: 1px solid #547bd5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user