<template>
|
<div class="login_container">
|
<div class="login_box">
|
<div class="_left" :class="{ani: isMounted}">
|
<div class="container_3d" ref="container3d"></div>
|
<div class="txtwav" ref="txt">集中测控系统</div>
|
</div>
|
<div class="_right">
|
<div class="title">用户登录 / USER LOGIN</div>
|
<!-- 登录表单区 -->
|
<el-form label-width="0px" class="login_from" :model="loginForm" ref="loginFormRef">
|
<!-- 用户名 -->
|
<el-form-item>
|
<el-input class="input" v-model="loginForm.username" placeholder="请输入用户名"
|
prefix-icon="el-icon-user" @focus="focus" @keyup.enter.native.stop="onSubmit"></el-input>
|
</el-form-item>
|
<!-- 密码 -->
|
<el-form-item>
|
<el-input class="input" v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"
|
placeholder="请输入密码" @focus="focus" @keyup.enter.native.stop="onSubmit"></el-input>
|
</el-form-item>
|
<el-form-item class="btns">
|
<el-button :loading="loading" type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
|
</el-form-item>
|
<el-form-item class="text" v-if="status">
|
<p style="color:red">{{ danger }}</p>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<!-- copyright -->
|
<div class="copyright">Copyright ©迈道施科技 (武汉) 有限公司</div>
|
</div>
|
</template>
|
|
<script>
|
import * as THREE from 'three';
|
import "three/examples/js/controls/OrbitControls"
|
import axios from "@/assets/js/axios";
|
let scene = null;
|
let camera = null;
|
let renderer = null;
|
let group = null;
|
|
export default {
|
components: {},
|
data() {
|
return {
|
loading: false,
|
status: false,
|
danger: "账号或密码不正确",
|
loginForm: {
|
username: "",
|
password: "",
|
|
},
|
isMounted: false
|
};
|
},
|
methods: {
|
onSubmit() {
|
let self = this;
|
self.loading = true;
|
if (self.loginForm.username == "" || self.loginForm.password == "") {
|
self.danger = "账号或密码不能为空!";
|
self.status = true;
|
self.loading = false;
|
return false
|
}
|
let params = {
|
userName: this.loginForm.username,
|
password: this.loginForm.password
|
};
|
// console.log(params, 'params');
|
axios({
|
method: "POST",
|
url: "/login/login",
|
params: params
|
}).then((res) => {
|
this.loading = false;
|
res = res.data;
|
console.log(res, 'login res');
|
if (res.code) {
|
// sessionStorage.setItem('userName', this.loginForm.username);
|
sessionStorage.setItem('pageMenu', JSON.stringify(res.data.menus));
|
this.$store.dispatch('setLogin', {
|
name: res.data.user.name,
|
uid: res.data.user.id
|
});
|
this.$router.push({
|
path: '/index'
|
});
|
} else {
|
this.status = true;
|
this.danger = res.msg;
|
// this.$message({
|
// type: 'success',
|
// message: res.msg
|
// });
|
}
|
}).catch((err) => {
|
this.loading = false;
|
this.$message({
|
type: 'error',
|
message: err
|
});
|
});
|
// if (self.loginForm.username == "admin" || self.loginForm.username == "test") {
|
// sessionStorage.setItem("userName", self.loginForm.username);
|
// self.$router.push({
|
// path: '/index',
|
// }).catch(err => {
|
// console.log(err);
|
// });
|
// } else {
|
// self.danger = "账号或密码不正确!";
|
// self.status = true;
|
// self.loading = false;
|
// }
|
}
|
// 输入框获得焦点时 关闭错误提示
|
,
|
focus() {
|
this.status = false;
|
},
|
init3d() {
|
let contain = this.$refs.container3d;
|
let width = contain.clientWidth;
|
let height = contain.clientHeight;
|
// console.log(contain, width, height);
|
|
scene = new THREE.Scene();
|
|
camera = new THREE.PerspectiveCamera(
|
50, width / height, 0.01, 1000
|
);
|
|
camera.position.set(80, 180, 300);
|
|
scene.add(camera);
|
|
// 灯光
|
const lights = [];
|
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
|
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
|
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
|
|
lights[0].position.set(0, 200, 0);
|
lights[1].position.set(100, 200, 100);
|
lights[2].position.set(-100, -200, -100);
|
|
scene.add(lights[0]);
|
scene.add(lights[1]);
|
scene.add(lights[2]);
|
|
// 几何图形组
|
group = new THREE.Group();
|
|
const geometry = new THREE.BufferGeometry();
|
geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
|
|
const lineMaterial = new THREE.LineBasicMaterial({
|
color: 0xffffff,
|
transparent: true,
|
opacity: 0.5
|
});
|
// const meshMaterial = new THREE.MeshPhongMaterial({ color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true });
|
|
group.add(new THREE.LineSegments(geometry, lineMaterial));
|
|
let data = {
|
radius: 120,
|
detail: 0
|
};
|
|
group.children[0].geometry.dispose();
|
group.children[0].geometry = new THREE.WireframeGeometry(new THREE.OctahedronGeometry(
|
data.radius, data.detail
|
));
|
|
// 获取顶点坐标
|
let pos_arr = group.children[0].geometry.attributes.position;
|
// console.log(pos_arr);
|
|
let points = [];
|
for (let i = 0, j = pos_arr.array.length; i < j; i += 3) {
|
// points.push(new THREE.Vector3(pos_arr.array[i], pos_arr.array[i + 1], pos_arr.array[i + 2]))
|
points.push([pos_arr.array[i], pos_arr.array[i + 1], pos_arr.array[i + 2]])
|
}
|
// 在顶点位置画小球
|
points.forEach((v) => {
|
// 小球半径 经纬度切片数
|
var radius = 8,
|
segemnt = 16,
|
rings = 16;
|
|
// 小球材质
|
var sphereMaterial = new THREE.MeshLambertMaterial({
|
color: 0xffffff
|
});
|
|
var sphere = new THREE.Mesh(
|
new THREE.SphereGeometry(radius, segemnt, rings),
|
sphereMaterial
|
);
|
|
// 设置小球位置
|
sphere.position.set(...v);
|
group.add(sphere);
|
});
|
// console.log(points, 'points======');
|
scene.add(group);
|
|
// renderer = new THREE.WebGLRenderer();
|
renderer = new THREE.WebGLRenderer({
|
antialias: true,
|
alpha: true
|
});
|
renderer.setSize(contain.clientWidth, contain.clientHeight);
|
// 好像无效
|
// renderer.setClearColor( 0x000000, 0 ); // the default
|
|
const orbit = new THREE.OrbitControls(camera, renderer.domElement);
|
orbit.enableZoom = false;
|
|
contain.appendChild(renderer.domElement);
|
|
renderer.render(scene, camera);
|
|
this.render();
|
},
|
render() {
|
if (!this.isMounted) {
|
console.log('停止更新');
|
return;
|
}
|
setTimeout(this.render, 1000 / 60);
|
// requestAnimationFrame();
|
|
group.rotation.x += 0.005;
|
group.rotation.y += 0.005;
|
|
renderer.render(scene, camera);
|
},
|
resize() {
|
let element = this.$refs.container3d;
|
let width = element.clientWidth;
|
let height = element.clientHeight;
|
camera.aspect = width / height;
|
camera.updateProjectionMatrix();
|
renderer.setSize(width, height);
|
},
|
initTextAni() {
|
let $txt = this.$refs.txt;
|
let text = $txt.textContent.trim();
|
$txt.innerHTML = null;
|
for (let t in text) {
|
let span = document.createElement('span');
|
span.innerHTML = text[t] === ' ' ? " " : text[t];
|
$txt.appendChild(span);
|
}
|
}
|
},
|
computed: {},
|
mounted() {
|
this.isMounted = true;
|
this.initTextAni();
|
this.init3d();
|
window.addEventListener('resize', this.resize);
|
},
|
beforeDestroy() {
|
this.isMounted = false;
|
window.removeEventListener('resize', this.resize);
|
}
|
};
|
</script>
|
|
<style scoped>
|
.login_from .el-input__inner {
|
height: 48px;
|
line-height: 48px;
|
}
|
|
.el-science-blue .login_from .el-input.is-disabled .el-input__inner,
|
.el-science-blue .login_from /deep/ .el-input__inner {
|
background-color: transparent;
|
border-color: #e4e4e4;
|
color: #868686;
|
}
|
|
.el-science-blue .login_from .el-input__prefix,
|
.el-input__suffix,
|
.el-science-blue .login_from .el-select .el-input .el-select__caret {
|
color: #007fe1;
|
}
|
|
/* 登录大盒子背景 */
|
.login_container {
|
width: 100%;
|
height: 100%;
|
background: url(../assets/images/login-bg.jpg) 0 0 no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
|
.tools-container {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
background-color: #FFFFFF;
|
}
|
|
.tools-container .tools-item {
|
padding: 8px;
|
cursor: pointer;
|
}
|
|
.tools-container .tools-item:hover {
|
|
background-color: #e4e4e4;
|
}
|
|
.tools-container .iconfont {
|
font-size: 22px;
|
color: #0080ff;
|
}
|
|
.tools-container .state-default .iconfont {
|
color: #808080;
|
}
|
|
.tools-container .state-error .iconfont {
|
color: #ff0000;
|
}
|
|
|
/* 登录框 */
|
.login_box {
|
/*width: 840px;*/
|
height: 450px;
|
/*background-color: #fff;*/
|
/*border-radius: 3px;*/
|
/*padding: 40px 60px;*/
|
box-sizing: border-box;
|
position: relative;
|
/*margin-top: -20%;*/
|
-webkit-transform: translateY(-30%);
|
transform: translateY(-30%);
|
z-index: 2;
|
display: inline-block;
|
/*display: -webkit-flex;
|
display: flex;*/
|
|
}
|
|
.login_box>div {
|
/*flex: 1;*/
|
width: 420px;
|
height: 100%;
|
float: left;
|
}
|
|
._right {
|
background: #fff;
|
padding: 70px 60px;
|
-webkit-box-shadow: 0 0 16px -4px #000;
|
box-shadow: 0 0 16px -4px #000;
|
}
|
|
._left {
|
background: #2e00b2;
|
/*-webkit-transform: translate(100%, 0);
|
transform: translate(100%, 0);*/
|
/*-webkit-transition: -webkit-transform 1.3s;
|
transition: transform 1.3s;*/
|
position: relative;
|
z-index: -1;
|
font-size: 26px;
|
color: #fff;
|
text-align: center;
|
}
|
|
._left .container_3d {
|
width: 100%;
|
height: 58%;
|
}
|
|
._left.ani {
|
-webkit-animation: trans-left ease-in-out 1.3s both;
|
animation: trans-left ease-in-out 1.3s both;
|
}
|
|
@-webkit-keyframes trans-left {
|
from {
|
-webkit-transform: translate(100%, 0);
|
transform: translate(100%, 0);
|
}
|
|
to {
|
-webkit-transform: translate(0, 0);
|
transform: translate(0, 0);
|
}
|
}
|
|
@keyframes trans-left {
|
from {
|
-webkit-transform: translate(100%, 0);
|
transform: translate(100%, 0);
|
}
|
|
to {
|
-webkit-transform: translate(0, 0);
|
transform: translate(0, 0);
|
}
|
}
|
|
.login_box .title {
|
font-size: 18px;
|
/*color: #007fe1;*/
|
color: #999;
|
font-weight: bold;
|
margin-bottom: 30px;
|
}
|
|
.login_container /deep/ .el-form-item__content {
|
line-height: 50px;
|
}
|
|
.login_container /deep/ .el-input__inner {
|
height: 50px;
|
line-height: 50px;
|
}
|
|
/* v图片的盒子 */
|
|
.login_box .avatar {
|
height: 130px;
|
width: 130px;
|
border: 1px solid #eee;
|
border-radius: 50%;
|
/* 边框圆角 */
|
padding: 10px;
|
box-shadow: 0 0 10px #ddd;
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
/* v图片 */
|
|
|
}
|
|
.login_box .avatar img {
|
width: 130px;
|
height: 130px;
|
border-radius: 50%;
|
background-color: #eeeeee;
|
}
|
|
/*.login_box::after {
|
content: "";
|
display: block;
|
width: 446px;
|
height: 416px;
|
position: absolute;
|
top: -8px;
|
left: -8px;
|
background: rgba(255, 255, 255, 0.4);
|
z-index: -1;
|
}*/
|
|
/* 登录按钮 */
|
.btns {
|
text-align: center;
|
}
|
|
.loginBtn {
|
width: 100%;
|
display: block;
|
text-align: center;
|
height: 50px;
|
margin-top: 10px;
|
background: #2e00b2;
|
}
|
|
.regBtn {
|
color: #007fe1;
|
margin-right: 10px;
|
}
|
|
.copyright {
|
position: fixed;
|
bottom: 10%;
|
left: 50%;
|
-webkit-transform: translateX(-50%);
|
transform: translateX(-50%);
|
text-align: center;
|
font-size: 14px;
|
color: #ccc;
|
}
|
|
.login_container /deep/ :focus-visible {
|
outline: none;
|
}
|
|
@keyframes flip-wave-0 {
|
4% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
8% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+0) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-0;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-1 {
|
8% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
12% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+1) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-1;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-2 {
|
12% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
16% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+2) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-2;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-3 {
|
16% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
20% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+3) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-3;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-4 {
|
20% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
24% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+4) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-4;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-5 {
|
24% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
28% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+5) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-5;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-6 {
|
28% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
32% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+6) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-6;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-7 {
|
32% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
36% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+7) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-7;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-8 {
|
36% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
40% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+8) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-8;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-9 {
|
40% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
44% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+9) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-9;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-10 {
|
44% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
48% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+10) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-10;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-11 {
|
48% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
52% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+11) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-11;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-12 {
|
52% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
56% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+12) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-12;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-13 {
|
56% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
60% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+13) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-13;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-14 {
|
60% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
64% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+14) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-14;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-15 {
|
64% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
68% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+15) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-15;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-16 {
|
68% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
72% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+16) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-16;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-17 {
|
72% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
76% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+17) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-17;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-18 {
|
76% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
80% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+18) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-18;
|
animation-iteration-count: infinite;
|
}
|
|
@keyframes flip-wave-19 {
|
80% {
|
transform: translate3d(0, -16px, 0) rotate(720deg);
|
}
|
|
85% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
|
.txtwav :nth-child(20n+19) {
|
display: inline-block;
|
animation-duration: 4s;
|
animation-name: flip-wave-19;
|
animation-iteration-count: infinite;
|
}
|
|
/*@media screen and (max-width: 1680px) {
|
.sliderCon .logo {
|
font-size: 40px;
|
}
|
|
.sliderCon .picImg {
|
width: 480px;
|
}
|
|
.login_box {
|
width: 400px;
|
height: 360px;
|
}
|
|
.login_box::after {
|
width: 416px;
|
height: 376px;
|
}
|
}*/
|
</style>
|
