|
|
@@ -1,332 +1,334 @@
|
|
|
<template>
|
|
|
- <div class="login-container">
|
|
|
- <div class="form-container">
|
|
|
- <div id="login_form">
|
|
|
- <div class="title-container">
|
|
|
- <div id="logo"></div>
|
|
|
- <div id="title">{{ title }}</div>
|
|
|
- </div>
|
|
|
- <div id="caption">登录</div>
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
-
|
|
|
- <el-form-item prop="username">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="login_home" />
|
|
|
- </span>
|
|
|
- <el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username" type="text" tabindex="1" auto-complete="off" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="password">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="password" />
|
|
|
- </span>
|
|
|
- <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码" name="password" tabindex="2"
|
|
|
- auto-complete="off" @keyup.enter.native="handleLogin" />
|
|
|
- <span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
- </span>
|
|
|
- </el-form-item>
|
|
|
- <el-button :loading="loading" type="primary" class="btn_submit" @click.native.prevent="handleLogin">
|
|
|
- 登录
|
|
|
- </el-button>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="login-container">
|
|
|
+ <div class="form-container">
|
|
|
+ <div id="login_form">
|
|
|
+ <div class="title-container">
|
|
|
+ <div id="logo"></div>
|
|
|
+ <div id="title">{{ title }}</div>
|
|
|
+ </div>
|
|
|
+ <div id="caption">登录</div>
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
+
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <span class="svg-container">
|
|
|
+ <svg-icon icon-class="login_home" />
|
|
|
+ </span>
|
|
|
+ <el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username" type="text" tabindex="1"
|
|
|
+ auto-complete="off" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <span class="svg-container">
|
|
|
+ <svg-icon icon-class="password" />
|
|
|
+ </span>
|
|
|
+ <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码" name="password"
|
|
|
+ tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />
|
|
|
+ <span class="show-pwd" @click="showPwd">
|
|
|
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button :loading="loading" type="primary" class="btn_submit" @click.native.prevent="handleLogin">
|
|
|
+ 登录
|
|
|
+ </el-button>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- login
|
|
|
- } from '@/api/user'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'Login',
|
|
|
- data() {
|
|
|
- const validateUsername = (rule, value, callback) => {
|
|
|
- if (!value) {
|
|
|
- callback(new Error('请输入账号'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validatePassword = (rule, value, callback) => {
|
|
|
- if (value.length < 6) {
|
|
|
- callback(new Error('请输入密码,不小于6位'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
- loginForm: {
|
|
|
- admin_name: '',
|
|
|
- password: ''
|
|
|
- },
|
|
|
- loginRules: {
|
|
|
- username: [{
|
|
|
- required: true,
|
|
|
- trigger: 'blur',
|
|
|
- validator: validateUsername
|
|
|
- }],
|
|
|
- password: [{
|
|
|
- required: true,
|
|
|
- trigger: 'blur',
|
|
|
- validator: validatePassword
|
|
|
- }]
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- passwordType: 'password',
|
|
|
- redirect: undefined,
|
|
|
- title: '智慧酒店管理平台'
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route: {
|
|
|
- handler: function(route) {
|
|
|
- this.redirect = route.query && route.query.redirect
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showPwd() {
|
|
|
- if (this.passwordType === 'password') {
|
|
|
- this.passwordType = ''
|
|
|
- } else {
|
|
|
- this.passwordType = 'password'
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.password.focus()
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 登录
|
|
|
- */
|
|
|
- handleLogin() {
|
|
|
- this.$refs.loginForm.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.loading = true
|
|
|
- this.$store.dispatch('user/login', this.loginForm)
|
|
|
- .then((res) => {
|
|
|
- // console.log(res);
|
|
|
- if (res.code == 200) {
|
|
|
- this.$router.push({
|
|
|
- path: this.redirect || '/'
|
|
|
- });
|
|
|
- this.$message.success(res.message);
|
|
|
- } else {
|
|
|
- this.$message.error(res.message);
|
|
|
- }
|
|
|
- this.loading = false;
|
|
|
- }).catch((err) => {
|
|
|
- // console.log(err);
|
|
|
- this.$message.error(err.message);
|
|
|
- this.loading = false;
|
|
|
- });
|
|
|
- } else {
|
|
|
- // this.$message.error('请输入账号或密码!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ import {
|
|
|
+ login
|
|
|
+ } from '@/api/user'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'Login',
|
|
|
+ data() {
|
|
|
+ const validateUsername = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error('请输入账号'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const validatePassword = (rule, value, callback) => {
|
|
|
+ if (value.length < 6) {
|
|
|
+ callback(new Error('请输入密码,不小于6位'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ loginForm: {
|
|
|
+ admin_name: '',
|
|
|
+ password: ''
|
|
|
+ },
|
|
|
+ loginRules: {
|
|
|
+ username: [{
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ validator: validateUsername
|
|
|
+ }],
|
|
|
+ password: [{
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ validator: validatePassword
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ passwordType: 'password',
|
|
|
+ redirect: undefined,
|
|
|
+ title: '智慧酒店管理平台'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function(route) {
|
|
|
+ this.redirect = route.query && route.query.redirect
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showPwd() {
|
|
|
+ if (this.passwordType === 'password') {
|
|
|
+ this.passwordType = ''
|
|
|
+ } else {
|
|
|
+ this.passwordType = 'password'
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.password.focus()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 登录
|
|
|
+ */
|
|
|
+ handleLogin() {
|
|
|
+ this.$refs.loginForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true
|
|
|
+ this.$store.dispatch('user/login', this.loginForm)
|
|
|
+ .then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ // localStorage.setItem('un', this.loginForm.username)
|
|
|
+ this.$router.push({
|
|
|
+ path: this.redirect || '/'
|
|
|
+ });
|
|
|
+ this.$message.success(res.message);
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ }).catch((err) => {
|
|
|
+ // console.log(err);
|
|
|
+ this.$message.error(err.message);
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // this.$message.error('请输入账号或密码!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- /* 修复input 背景不协调 和光标变色 */
|
|
|
- /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
-
|
|
|
- $bg: #283443;
|
|
|
- $cursor: #fff;
|
|
|
-
|
|
|
- /* reset element-ui css */
|
|
|
- .login-container {
|
|
|
- .el-input {
|
|
|
- display: inline-block;
|
|
|
- height: 74px;
|
|
|
- width: 85%;
|
|
|
-
|
|
|
- input {
|
|
|
- background: transparent;
|
|
|
- border: 0px;
|
|
|
- -webkit-appearance: none;
|
|
|
- border-radius: 0px;
|
|
|
- padding: 12px 5px 12px 15px;
|
|
|
- height: 74px;
|
|
|
- font-size: 28px;
|
|
|
-
|
|
|
- &:-webkit-autofill {
|
|
|
- box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
- -webkit-text-fill-color: $cursor !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-form-item {
|
|
|
- border: 2px solid rgba(238, 238, 238, 1);
|
|
|
- padding: 0 0 0 30px;
|
|
|
- border-radius: 37px;
|
|
|
- }
|
|
|
- }
|
|
|
+ /* 修复input 背景不协调 和光标变色 */
|
|
|
+ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
+
|
|
|
+ $bg: #283443;
|
|
|
+ $cursor: #fff;
|
|
|
+
|
|
|
+ /* reset element-ui css */
|
|
|
+ .login-container {
|
|
|
+ .el-input {
|
|
|
+ display: inline-block;
|
|
|
+ height: 74px;
|
|
|
+ width: 85%;
|
|
|
+
|
|
|
+ input {
|
|
|
+ background: transparent;
|
|
|
+ border: 0px;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ border-radius: 0px;
|
|
|
+ padding: 12px 5px 12px 15px;
|
|
|
+ height: 74px;
|
|
|
+ font-size: 28px;
|
|
|
+
|
|
|
+ &:-webkit-autofill {
|
|
|
+ box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
+ -webkit-text-fill-color: $cursor !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ border: 2px solid rgba(238, 238, 238, 1);
|
|
|
+ padding: 0 0 0 30px;
|
|
|
+ border-radius: 37px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- $bg: #2d3a4b;
|
|
|
- $dark_gray: #889aa4;
|
|
|
- $light_gray: #eee;
|
|
|
-
|
|
|
- html,
|
|
|
- body,
|
|
|
- .login-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- background: url(../../icons/images/login/login_bg.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- margin-bottom: 0;
|
|
|
-
|
|
|
- .form-container {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- margin: 0 auto;
|
|
|
- width: 1220px;
|
|
|
- height: 650px;
|
|
|
- background: url(../../icons/images/login/login_form_bg.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- #login_form {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- width: 640px;
|
|
|
- height: 500px;
|
|
|
-
|
|
|
-
|
|
|
- .title-container {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 420px;
|
|
|
-
|
|
|
- #logo {
|
|
|
- width: 63px;
|
|
|
- height: 63px;
|
|
|
- background: url('../../icons/images/login/logo_login.png') 0 0 no-repeat;
|
|
|
- background-size: 63px 63px;
|
|
|
- }
|
|
|
-
|
|
|
- #title {
|
|
|
- font-size: 42px;
|
|
|
- font-family: Microsoft YaHei-3970(82674968);
|
|
|
- font-weight: bold;
|
|
|
- color: #2B4CFE;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- #caption {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 30px;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- font-weight: bold;
|
|
|
- color: #2B4CFE;
|
|
|
- margin-top: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .login-form {
|
|
|
- width: 500px;
|
|
|
- max-width: 100%;
|
|
|
- padding: 0 35px;
|
|
|
- margin: 0 auto;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .svg-container {
|
|
|
- margin-top: -100px;
|
|
|
- font-size: 22px;
|
|
|
- color: $dark_gray;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .btn_submit {
|
|
|
- width: 100%;
|
|
|
- height: 74px;
|
|
|
- background: #2B4CFE;
|
|
|
- border-radius: 37px;
|
|
|
- font-size: 22px;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .btn_link {
|
|
|
- width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 20px;
|
|
|
- font-family: Microsoft YaHei-3970(82674968);
|
|
|
- font-weight: 400;
|
|
|
- color: #2B4CFE;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // .login-container {
|
|
|
- // min-height: 100%;
|
|
|
- // width: 100%;
|
|
|
- // background-color: $bg;
|
|
|
- // overflow: hidden;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // .tips {
|
|
|
- // font-size: 14px;
|
|
|
- // color: #fff;
|
|
|
- // margin-bottom: 10px;
|
|
|
-
|
|
|
- // span {
|
|
|
- // &:first-of-type {
|
|
|
- // margin-right: 16px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // .title-container {
|
|
|
- // display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- // align-items: center;
|
|
|
- // position: relative;
|
|
|
-
|
|
|
- // .title {
|
|
|
- // font-size: 42px;
|
|
|
- // font-family: Microsoft YaHei-3970(82674968);
|
|
|
- // font-weight: bold;
|
|
|
- // color: #2B4CFE;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // .caption {
|
|
|
- // display: flex;
|
|
|
- // justify-content: center;
|
|
|
- // font-size: 30px;
|
|
|
- // font-family: Adobe Heiti Std;
|
|
|
- // font-weight: bold;
|
|
|
- // color: #2B4CFE;
|
|
|
- // }
|
|
|
-
|
|
|
- // .show-pwd {
|
|
|
- // position: absolute;
|
|
|
- // right: 10px;
|
|
|
- // top: 7px;
|
|
|
- // font-size: 16px;
|
|
|
- // color: $dark_gray;
|
|
|
- // cursor: pointer;
|
|
|
- // user-select: none;
|
|
|
- // }
|
|
|
- // }
|
|
|
-</style>
|
|
|
+ $bg: #2d3a4b;
|
|
|
+ $dark_gray: #889aa4;
|
|
|
+ $light_gray: #eee;
|
|
|
+
|
|
|
+ html,
|
|
|
+ body,
|
|
|
+ .login-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ background: url(../../icons/images/login/login_bg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ .form-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 1220px;
|
|
|
+ height: 650px;
|
|
|
+ background: url(../../icons/images/login/login_form_bg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ #login_form {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ width: 640px;
|
|
|
+ height: 500px;
|
|
|
+
|
|
|
+
|
|
|
+ .title-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 420px;
|
|
|
+
|
|
|
+ #logo {
|
|
|
+ width: 63px;
|
|
|
+ height: 63px;
|
|
|
+ background: url('../../icons/images/login/logo_login.png') 0 0 no-repeat;
|
|
|
+ background-size: 63px 63px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #title {
|
|
|
+ font-size: 42px;
|
|
|
+ font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2B4CFE;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #caption {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2B4CFE;
|
|
|
+ margin-top: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ width: 500px;
|
|
|
+ max-width: 100%;
|
|
|
+ padding: 0 35px;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .svg-container {
|
|
|
+ margin-top: -100px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: $dark_gray;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn_submit {
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ background: #2B4CFE;
|
|
|
+ border-radius: 37px;
|
|
|
+ font-size: 22px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn_link {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ font-weight: 400;
|
|
|
+ color: #2B4CFE;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .login-container {
|
|
|
+ // min-height: 100%;
|
|
|
+ // width: 100%;
|
|
|
+ // background-color: $bg;
|
|
|
+ // overflow: hidden;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // .tips {
|
|
|
+ // font-size: 14px;
|
|
|
+ // color: #fff;
|
|
|
+ // margin-bottom: 10px;
|
|
|
+
|
|
|
+ // span {
|
|
|
+ // &:first-of-type {
|
|
|
+ // margin-right: 16px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // .title-container {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // align-items: center;
|
|
|
+ // position: relative;
|
|
|
+
|
|
|
+ // .title {
|
|
|
+ // font-size: 42px;
|
|
|
+ // font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ // font-weight: bold;
|
|
|
+ // color: #2B4CFE;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .caption {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // font-size: 30px;
|
|
|
+ // font-family: Adobe Heiti Std;
|
|
|
+ // font-weight: bold;
|
|
|
+ // color: #2B4CFE;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .show-pwd {
|
|
|
+ // position: absolute;
|
|
|
+ // right: 10px;
|
|
|
+ // top: 7px;
|
|
|
+ // font-size: 16px;
|
|
|
+ // color: $dark_gray;
|
|
|
+ // cursor: pointer;
|
|
|
+ // user-select: none;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+</style>
|