[fix]页面展示样式

main
huyuanxiang 2 years ago
parent 84a8bdd2e1
commit 523cba431a

@ -1,10 +1,10 @@
<template> <template>
<view> <view>
<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''"> <scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
<cu-custom bgColor="bg-gradual-pink" :isBack="false"> <!-- <cu-custom bgColor="bg-gradual-pink" :isBack="false"> -->
<!-- <block slot="backText">返回</block> --> <!-- <block slot="backText">返回</block> -->
<block slot="content">退出页</block> <!-- <block slot="content">退出页</block> -->
</cu-custom> <!-- </cu-custom> -->
<view class="solids-bottom padding-xs flex align-center"> <view class="solids-bottom padding-xs flex align-center">
<view class="flex-sub text-center"> <view class="flex-sub text-center">
<view class="solid-bottom text-xsl padding"> <view class="solid-bottom text-xsl padding">

@ -5,7 +5,7 @@
<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" <swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
:autoplay="true" interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]"> :autoplay="true" interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
<swiper-item v-for="(item,index) in swiperList" :key="index"> <swiper-item v-for="(item,index) in swiperList" :key="index">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image> <image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</swiper-item> </swiper-item>
</swiper> </swiper>

@ -1,71 +1,73 @@
<template> <template>
<view class="zai-box"> <view class="bg-box">
<scroll-view scroll-y class="page"> <!-- <image src="/static//home/login_2.png" mode="widthFix"></image> -->
<view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]"> <view class="box padding-lr-xl login-paddingtop flex flex-column" >
<!--<image src="@/static/nh-longin.png" mode='aspectFit' class="zai-logo "></image>--> <block v-if="loginWay==1">
<!--<view class="zai-title text-shadow ">能辉云app</view>--> <view class="cu-form-group margin-top shadow-warp input" :class="[shape=='round'?'round':'']">
</view> <view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]"> <input placeholder="请输入账号" name="input" v-model="userName"></input>
<block v-if="loginWay==1"> </view>
<view class="cu-form-group margin-top shadow-warp input" :class="[shape=='round'?'round':'']"> <view class="cu-form-group margin-top shadow-warp input" :class="[shape=='round'?'round':'']">
<view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view> <view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
<input placeholder="请输入账号" name="input" v-model="userName"></input> <input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" />
</view> <view class="action text-lg">
<view class="cu-form-group margin-top shadow-warp input" :class="[shape=='round'?'round':'']"> <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword"></text>
<view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view> </view>
<input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" /> </view>
<view class="action text-lg"> <view class="padding text-center margin-top">
<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword"></text> <button style="width: 100%;" class="cu-btn bg-gr1 lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
</view> @tap="onLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
</view> </button>
<view class="padding text-center margin-top"> <!-- <button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']" @tap="loginWay=3-loginWay">短信登录
@tap="onLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text> </button> -->
</button> </view>
<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']" </block>
@tap="loginWay=3-loginWay">短信登录 <!-- <block v-else>
</button> <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
</view> <view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
</block> <input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
<block v-else> </view>
<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']"> <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view> <view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input> <input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
</view> <view class="action">
<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']"> <button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view> </view>
<input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/> </view>
<view class="action"> <view class="padding text-center margin-top">
<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button> <button class="cu-btn bg-gr1 lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
</view> @tap="onSMSLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
</view> </button>
<view class="padding text-center margin-top"> <button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']" @tap="loginWay=1">账户登录
@tap="onSMSLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text> </button>
</button> </view>
<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']" </block> -->
@tap="loginWay=1">账户登录 <view class="compony">Copyright ©上海能辉科技股份有限公司</view>
</button> </view>
</view> <view class="zai-box">
</block>
<!-- #ifdef APP-PLUS --> <!-- #ifdef APP-PLUS -->
<view class="padding flex flex-direction text-center"> <view class="padding flex flex-direction text-center">
当前版本:{{version}} 当前版本:{{version}}
</view> </view>
<!-- #endif --> <!-- #endif -->
</view>
</scroll-view>
<!-- 登录加载弹窗 --> <!-- 登录加载弹窗 -->
<view class="cu-load load-modal" v-if="loading"> <view class="cu-load load-modal" v-if="loading">
<!-- <view class="cuIcon-emojifill text-orange"></view> --> <!-- <view class="cuIcon-emojifill text-orange"></view> -->
<image src="@/static/nh-loggo.jpg" mode="aspectFit" class="round"></image> <image src="@/static/nh-loggo.jpg" mode="aspectFit" class="round"></image>
<view class="gray-text">登录中...</view> <view class="gray-text">登录中...</view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script> <script>
@ -255,23 +257,42 @@
</script> </script>
<style> <style>
.compony {
font-size: 24upx;
transform: scale(0.9);
align-self: center;
justify-self: center;
color: #666;
}
.bg-box {
position: relative;
width: 100%;
height: 100vh;
background-color: #fff;
}
.input { .input {
border-radius: 9px; border-radius: 9px;
} }
.login-paddingtop { .login-paddingtop {
padding-top: 620upx; position: absolute;
padding-left: 39upx; left: 50%;
border-radius: 25px; transform: translateX(-50%);
top: 45%;
width: 85%;
} }
.bg-gr1 {
background-color: #2bb88d;
color: #fff;
}
.zai-box { .zai-box {
padding: 0 20upx; padding: 0 20upx;
padding-top: 10upx; padding-top: 10upx;
padding-left: 40upx; padding-left: 40upx;
position: relative; position: relative;
width: 100%; width: 100%;
height: 1331rpx; height: 700upx;
background-image: url(@/static/long_2.png); background-image: url(@/static/home/login_2.png);
background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }

@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<uni-nav-bar left-icon="left" fixed="true" title="" @clickLeft="handleClickLeft"></uni-nav-bar> <uni-nav-bar left-icon="left" fixed="true" title="电站列表" @clickLeft="handleClickLeft"></uni-nav-bar>
<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''"> <scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
<view class="station-box"> <view class="station-box">
<!-- <view> <!-- <view>
@ -42,7 +42,10 @@
</view> </view>
</uni-card> --> </uni-card> -->
<view class="station-box-list"> <view class="station-box-list">
<uni-card title="" v-for="item in stationData" :key="item.id"> <uni-card title=""
class="arrow animation-slide-right"
:style="[{animationDelay: '0.'+ index +'s'}]"
v-for="(item, index) in stationData" :key="item.id">
<template v-slot:title> <template v-slot:title>
<uni-list> <uni-list>
<uni-list-item showArrow clickable :title="item.stationName" @click="goNext(item.id)" /> <uni-list-item showArrow clickable :title="item.stationName" @click="goNext(item.id)" />
@ -258,6 +261,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
max-height: 85vh; max-height: 85vh;
overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
.card-box { .card-box {

@ -3,7 +3,7 @@
<scroll-view scroll-y class="page"> <scroll-view scroll-y class="page">
<!-- 头部logo--> <!-- 头部logo-->
<view class="UCenter-bg"> <view class="UCenter-bg">
<image :src="personalList.avatar" class="png round animation-slide-right margin-bottom-sm" mode="scaleToFill" :style="[{animationDelay: '0.1s'}]"></image> <!-- <image :src="personalList.avatar" class="png round animation-slide-right margin-bottom-sm" mode="scaleToFill" :style="[{animationDelay: '0.1s'}]"></image> -->
<image src="https://static.jeecg.com/upload/test/wave_1595818053612.gif" mode="scaleToFill" class="gif-wave"></image> <image src="https://static.jeecg.com/upload/test/wave_1595818053612.gif" mode="scaleToFill" class="gif-wave"></image>
</view> </view>
<view class="padding flex text-center text-grey bg-white shadow-warp"> <view class="padding flex text-center text-grey bg-white shadow-warp">
@ -49,13 +49,13 @@
<text class="text-grey">设置</text> <text class="text-grey">设置</text>
</view> </view>
</navigator> </navigator>
<navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]" url="/pages/user/userexit" hover-class="none"> <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]" @click="handlerExit" hover-class="none">
<view class="content" > <view class="content" >
<text class="cuIcon-exit text-cyan"></text> <text class="cuIcon-exit text-cyan"></text>
<text class="text-grey">退出</text> <text class="text-grey">退出</text>
</view> </view>
</navigator> </view>
</view> </view>
<view class="cu-tabbar-height"></view> <view class="cu-tabbar-height"></view>
</scroll-view> </scroll-view>
@ -93,6 +93,11 @@
}, },
}, },
methods: { methods: {
handlerExit() {
uni.navigateTo({
url:'/pages/common/exit'
})
},
scan(){ scan(){
console.log("进来了") console.log("进来了")
// #ifndef H5 // #ifndef H5

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Loading…
Cancel
Save