From d972ec93c21ee8cc62fd514bfd910192eeaf48d8 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 21 八月 2024 15:19:57 +0800
Subject: [PATCH] 提交
---
pages/index/index.vue | 47 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 37 insertions(+), 10 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b2c3f32..492ff3b 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,10 +1,14 @@
<template>
<view class="box">
- <image :src="loginTop" class="topImg" mode="widthFix"></image>
+ <view class="topContainer">
+ <image :src="loginTop" class="topImg" mode="widthFix"></image>
+ <image :src="loginPic" class="topPic" mode="widthFix"></image>
+ </view>
+
<view class="main">
<view class="header">
<view class="titleFirst">
- 你好~<br/>欢迎来到安全教育平台</view>
+ 你好~<br/>欢迎来到危化品全生命周期管理平台</view>
</view>
<view>
<u-form :model="form" ref="uForm" class="form" >
@@ -37,11 +41,13 @@
import store from '@/store/index.js'
import VUE_APP_BASE_URL from '../../common/constant.js'
const jpushModule = uni.requireNativePlugin('JG-JPush')
- import loginTop from '../../static/loginTop1.png'
+ import loginTop from '../../static/loginBg.png'
+ import loginPic from '../../static/loginPic.png'
export default {
data() {
return {
loginTop: loginTop,
+ loginPic: loginPic,
userFocused: false,
codeFocused: false,
form: {
@@ -210,10 +216,31 @@
flex-direction: column;
}
+.topContainer {
+ position: relative; /* 新增容器，并设置相对定位 */
+ width: 100%;
+}
+
.topImg{
width: 100%;
- height: 100%;
- filter: drop-shadow(0 3px 5px rgba(21,148,232,.1))
+ filter: drop-shadow(0 3px 8px rgba(21,148,232,.4));
+}
+.topPic{
+ width: 80%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translate(-50%, -50%)
+ }
+ 50% {
+ transform: translate(-50%, calc(-50% + 12rpx))
+ }
}
.main{
@@ -233,7 +260,7 @@
.titleFirst{
width: 80%;
- font-size: 44rpx;
+ font-size: 34rpx;
line-height: 1.5;
font-weight: bold;
letter-spacing: 2px;
@@ -259,7 +286,7 @@
border-radius: 99px;
background: #f5f5f5;
padding: 15px 20px !important;
- box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1) !important;
+ box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1)!important;
transition: box-shadow .1s ease !important;
&:active{
@@ -269,8 +296,8 @@
.isFocused{
background: #fff;
- border-width: 1.5px !important;
- border-color: #e6e6e6 !important;
+ border-width: 2px !important;
+ border-color: #fff !important;
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
}
@@ -281,7 +308,7 @@
}
.loginBtn{
- border: 1px solid rgba(255,255,255,.4);
+ border: 2px solid rgba(255,255,255,.8);
letter-spacing: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
background-image: linear-gradient(#41a2ff,#0f7ff9);
--
Gitblit v1.9.2