效果图
<script setup lang="ts">
import { colorStore } from "../../store/color";
import { useRouter } from "vue-router";
import { ref } from "vue";
const color = colorStore();
const router = useRouter();
const login = () => {
sessionStorage.setItem("organizationCode", "0001");
sessionStorage.setItem("token", "token");
router.push("/");
};
const username = ref("009999");
const password = ref("0");
</script>
<template>
<div class="con" :style="{ '--color': color.color }">
<div class="login-container">
<div class="left-container">
<div class="title">
<span>
<img src="../../assets/hip.png" style="height: 15px" />{{
$t("base.title")
}}</span
>
</div>
<div class="input-container">
<input
type="text"
name="username"
placeholder="用户名"
v-model="username"
/>
<input
type="password"
name="password"
placeholder="密码"
v-model="password"
/>
</div>
<div class="message-container">
<span>Copyright © 2022 | {{ $t("login.GoodWill") }}</span>
</div>
</div>
<div class="right-container">
<div class="regist-container">
<span class="regist">{{ $t("login.WelcomeLogin") }}</span>
</div>
<div class="action-container" @click="login">
<span>{{ $t("login.submit") }}</span>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.con {
height: calc(100vh - 230px);
padding-top: 10%;
background-image: linear-gradient(
to bottom right,
rgb(114, 135, 254),
var(--color)
);
}
.login-container {
width: 600px;
height: 315px;
margin: 0 auto;
border-radius: 15px;
box-shadow: 0 10px 50px 0px rbg(59, 45, 159);
background-color: rgb(95, 76, 194);
}
.left-container {
display: inline-block;
width: 330px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
padding: 60px;
background-image: linear-gradient(
to bottom right,
rgb(118, 76, 163),
rgb(92, 103, 211)
);
}
.title {
color: #fff;
font-size: 18px;
font-weight: 200;
}
.title span {
border-bottom: 3px solid rgb(237, 221, 22);
}
.input-container {
padding: 20px 0;
}
input {
border: 0;
background: none;
outline: none;
color: #fff;
margin: 20px 0;
display: block;
width: 100%;
padding: 5px 0;
transition: 0.2s;
border-bottom: 1px solid rgb(199, 191, 219);
}
input:hover {
border-bottom-color: #fff;
}
::-webkit-input-placeholder {
color: rgb(199, 191, 219);
}
.message-container {
font-size: 14px;
transition: 0.2s;
color: rgb(199, 191, 219);
cursor: pointer;
}
.message-container:hover {
color: #fff;
}
.right-container {
width: 145px;
display: inline-block;
height: calc(100% - 120px);
vertical-align: top;
padding: 60px 0;
}
.regist-container {
text-align: center;
color: #fff;
font-size: 18px;
font-weight: 200;
}
.regist-container span {
border-bottom: 3px solid rgb(237, 221, 22);
}
.action-container {
font-size: 10px;
color: #fff;
text-align: center;
position: relative;
top: 200px;
}
.action-container span {
border: 1px solid rgb(237, 221, 22);
padding: 10px;
display: inline;
line-height: 20px;
border-radius: 20px;
position: absolute;
bottom: 10px;
left: calc(72px - 20px);
transition: 0.2s;
cursor: pointer;
}
.action-container span:hover {
background-color: rgb(237, 221, 22);
color: rgb(95, 76, 194);
}
</style>