pull/12/head
吕一航
2 years ago
parent
a0825500c9
commit
cdb6452dc5
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
<!-- 雪花效果 -->
|
||||
<scroll-view scroll-y="true">
|
||||
<!-- 页面内容 -->
|
||||
<!-- 主页面 -->
|
||||
<view class="container">
|
||||
<text style="height: 40rpx;"></text>
|
||||
<view class="login-icon">
|
||||
<image class="login-img" src="/static/image/CAUC.png"></image>
|
||||
</view>
|
||||
<view class="login-from">
|
||||
|
||||
<!--账号-->
|
||||
<view class="inputView">
|
||||
<image class="nameImage" src="/static/image/CAUC.png"></image>
|
||||
<label class="loginLab">账号</label>
|
||||
<input class="inputText" placeholder="请输入管理员账号" bindinput="usernameInput" />
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
|
||||
<!--密码-->
|
||||
<view class="inputView">
|
||||
<image class="keyImage" src="/static/image/CAUC.png"></image>
|
||||
<label class="loginLab">密码</label>
|
||||
<input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" />
|
||||
</view>
|
||||
<view style="height: 20rpx;"></view>
|
||||
<!-- <view class="s_view">
|
||||
<button class="saveBtn" bindtap="to1" >注册</button>
|
||||
<button class="submitBtn" bindtap="to2" >忘记密码</button>
|
||||
</view> -->
|
||||
|
||||
<!--按钮-->
|
||||
<view class="loginBtnView">
|
||||
<button class="loginBtn" type="primary" bindtap="bindViewTap">登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view>
|
||||
<image wx:for="{{snows}}" wx:key="index" src="/static/image/CAUC.png" style="left:{{snows[index]}}rpx" animation="{{animation[index]}}" class='snow' data-index='{{index}}' />
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,138 @@
|
||||
page{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 1、表格的整体样式 */
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
/* background-color: rgb(156, 23, 78) */
|
||||
}
|
||||
|
||||
/*2、登录的图片样式*/
|
||||
.login-icon{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 3、用来设置登录图片的宽度 */
|
||||
.login-img{
|
||||
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
/*4、表单内容*/
|
||||
.login-from {
|
||||
/* 设置表格上方的高度 */
|
||||
margin-top: 20px;
|
||||
flex: auto;
|
||||
height:100%;
|
||||
}
|
||||
/* 5、设置输入的框 */
|
||||
.inputView {
|
||||
/* background-color: #fff; */
|
||||
line-height: 50px;
|
||||
border-radius:40px;
|
||||
border:1px solid #161515;
|
||||
}
|
||||
|
||||
/*6、设置输入框旁边的图片*/
|
||||
.nameImage, .keyImage {
|
||||
margin-left: 22px;
|
||||
width: 18px;
|
||||
height: 16px
|
||||
}
|
||||
/* 7、设置账号、密码字体的颜色 */
|
||||
.loginLab {
|
||||
margin: 15px 15px 15px 10px;
|
||||
color:blue;
|
||||
font-size: 14px
|
||||
}
|
||||
/* 8、进行提示输入的框是灰色的 */
|
||||
.inputText {
|
||||
flex: block;
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-right: 22px;
|
||||
margin-top: 11px;
|
||||
color: gray;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
/* 9、 内部框图进行相应的分割*/
|
||||
.line {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* .line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #cccccc;
|
||||
margin-top: 1px;
|
||||
} */
|
||||
|
||||
/*10、设置按钮*/
|
||||
.loginBtnView {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* background-color:#DCDCDC; */
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
width: 90%;
|
||||
margin-top: 40px;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
/* 设置字体颜色 */
|
||||
.bxj{
|
||||
color: red;
|
||||
}
|
||||
/* 用来设置注册和忘记密码 */
|
||||
.saveBtn {
|
||||
width: 50% !important;
|
||||
float:left;
|
||||
font-weight: 100;
|
||||
font-size: 10px;
|
||||
}
|
||||
.submitBtn {
|
||||
width: 50% !important;
|
||||
float:right;
|
||||
font-size: 10px
|
||||
|
||||
}
|
||||
.s_view{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 雪花效果特效 */
|
||||
page {
|
||||
background: linear-gradient(180deg, #6699CC 0%, #B8DBF0 100%);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.snow {
|
||||
width: fit-content;
|
||||
position: absolute;
|
||||
top: -100rpx;
|
||||
width: 30rpx;
|
||||
height: 27rpx;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.snow:nth-child(2n+2) {
|
||||
width: 35rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
// pages/index/index.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
message:"你好nihao",
|
||||
datalist:['黑夜','白天','中午'],
|
||||
userinfo:{
|
||||
name:"白雪健",
|
||||
age:20
|
||||
},
|
||||
Image1:["/static/image/apic2098.jpg","/static/image/apic2098.jpg"]
|
||||
},
|
||||
|
||||
uploadimage:function(){
|
||||
var that = this;
|
||||
wx.chooseMedia({
|
||||
mediaType: ['image','video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 30,
|
||||
camera: 'back',
|
||||
success(res) {
|
||||
|
||||
console.log(res),
|
||||
console.log(res.tempFiles[0].tempFilePath),
|
||||
that.setData({
|
||||
Image1:that.data.Image1.concat(res.tempFiles[0].tempFilePath)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// clearimage:function(){
|
||||
// this.setData({
|
||||
// Image1:''
|
||||
// })
|
||||
// },
|
||||
|
||||
// 输入用户名所采取的行动
|
||||
|
||||
fakeCallback:function(e){
|
||||
console.log(1)
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
},
|
||||
clickme:function(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/administrator_log/administrator_log',
|
||||
})
|
||||
},
|
||||
clickme1:function(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/user_log/user_log',
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
<!--pages/index/index.wxml-->
|
||||
<!-- span标签 -->
|
||||
<view class="banner">
|
||||
<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
|
||||
indicator-active-color="#fff" circular autoplay interval="4000">
|
||||
<swiper-item><image src="/static/image/1.jpg"></image></swiper-item>
|
||||
<swiper-item><image src="/static/image/2.jpg"></image></swiper-item>
|
||||
<swiper-item><image src="/static/image/3.jpg"></image></swiper-item>
|
||||
</swiper>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="header">
|
||||
<!-- 代码 -->
|
||||
<image class="bg_ware" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image>
|
||||
|
||||
|
||||
<view class="content">
|
||||
<view class="menu">
|
||||
<view class="item">
|
||||
<image src="/static/image/CAUC.png" bindtap="clickme1" class="image1"></image>
|
||||
<text style="color: bisque;">用户</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image src="/static/image/CAUC.png" bindtap="clickme" class="image1"></image>
|
||||
<text style="color: bisque;">管理员</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- </view>
|
||||
<view wx:for="{{datalist}}">{{index}}-{{item}}</view>
|
||||
<view wx:for="{{userinfo}}">{{index}}-{{item}}</view> -->
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<!-- <view>请上传图片</view>
|
||||
<view >
|
||||
<image wx:for="{{Image1}}" src="{{item}}"></image>
|
||||
</view>
|
||||
|
||||
<view bindtap="uploadimage"> <button>请上传图片</button></view> -->
|
||||
|
||||
<!-- 输入用户名 -->
|
||||
<!-- <view>您输入了{{message}}</view>
|
||||
<view>
|
||||
<input model:value="{{message}}" bindinput="fakeCallback"/>
|
||||
</view> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
/* pages/index/index.wxss */
|
||||
.c1{
|
||||
color: red;
|
||||
}
|
||||
.image1{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
/* 如果要设置圆角的话 */
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
/* 规定主轴的方向 */
|
||||
flex-direction: row;
|
||||
/* 元素在主轴方向的排列方式 我用的是平均排列*/
|
||||
justify-content: space-around;
|
||||
/* 元素在负轴方向如何展示 */
|
||||
/* align-items: center; */
|
||||
|
||||
}
|
||||
/* 缺个空格差点g。 */
|
||||
.menu .item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 元素在负轴方向如何展示 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 设置背景图片 */
|
||||
|
||||
.banner{
|
||||
|
||||
width: 100%;
|
||||
height: 550rpx;
|
||||
}
|
||||
.banner swiper{
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.banner image{
|
||||
|
||||
width: 100%;
|
||||
height: 550rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
height:300rpx;
|
||||
background: linear-gradient(to bottom, #56ccf2, #2f80ed);
|
||||
}
|
||||
|
||||
.bg_ware {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2rpx;
|
||||
width: 100%;
|
||||
mix-blend-mode: screen;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,139 @@
|
||||
// pages/info/info.js
|
||||
var app = getApp();
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
list:[],
|
||||
image:[]
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 返回通过的信息
|
||||
backR:function(){
|
||||
// console.log(abc)
|
||||
// console.log(abc.currentTarget.dataset.abc)
|
||||
wx.request({
|
||||
url: 'http://127.0.0.1:2020/access',
|
||||
data: {
|
||||
data:this.data.list[2],
|
||||
condition:'通过'
|
||||
},
|
||||
dataType: JSON,
|
||||
enableCache: true,
|
||||
enableHttp2: true,
|
||||
enableQuic: true,
|
||||
method: 'POST',
|
||||
timeout: 0,
|
||||
success: (result) => {
|
||||
console.log(this.data.list[2])
|
||||
wx.redirectTo({
|
||||
url: '/pages/v9_manual/v9_manual',
|
||||
})
|
||||
// console.log(result.data)
|
||||
},
|
||||
})
|
||||
},
|
||||
//返回不通过的信息
|
||||
backE:function(){
|
||||
// console.log(abc)
|
||||
wx.request({
|
||||
url: 'http://127.0.0.1:2020/access',
|
||||
dataType: JSON,
|
||||
enableCache: true,
|
||||
enableHttp2: true,
|
||||
enableQuic: true,
|
||||
method: 'POST',
|
||||
timeout: 0,
|
||||
|
||||
data:{
|
||||
data:this.data.list[2],
|
||||
condition:'不通过'
|
||||
},
|
||||
success: (result) => {
|
||||
wx.redirectTo({
|
||||
url: '/pages/v9_manual/v9_manual',
|
||||
})
|
||||
// console.log(2)
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
console.log(app.globalData.no)
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: 'http://127.0.0.1:2020/info',
|
||||
dataType: JSON,
|
||||
method: 'GET',
|
||||
timeout: 0,
|
||||
success: (res) => {
|
||||
// console.log(res.data)
|
||||
var p = JSON.parse(res.data)
|
||||
// console.log(app.globalData.no)
|
||||
// console.log(p.test1[app.globalData.no])
|
||||
// console.log(p.image)
|
||||
// console.log(p)
|
||||
// console.log(p.test1[app.globalData.no])
|
||||
that.setData({
|
||||
list:p.test1[app.globalData.no],
|
||||
image:p.image[app.globalData.no]
|
||||
})
|
||||
// console.log(this.data.list[2])
|
||||
// console.log(that.data.image)
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
<!--pages/info/info.wxml-->
|
||||
<!-- 循环遍历人员详细信息的列表 -->
|
||||
<view wx:for="{{list}}">
|
||||
<view>{{item}}</view>
|
||||
</view>
|
||||
<!-- <view>{{index}}</view> -->
|
||||
<!-- 对base64编码进行解码成图片 -->
|
||||
<view>
|
||||
<view wx:for="{{image}}">
|
||||
<!-- 设置图片的样式，两张图片并排 -->
|
||||
<view class="school-list">
|
||||
<view class="school-list-info" >
|
||||
<image class="school-list-photo" src="data:image/png;base64,{{item}}"></image>
|
||||
<!-- <text class="school-list-desc">{{item.content}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 设置是否给通过 -->
|
||||
</view>
|
||||
<button bindtap="backR" >通过</button>
|
||||
<view style="height: 50rpx;"></view>
|
||||
<button bindtap="backE" >不通过</button>
|
||||
<!-- 设置一些间距 -->
|
||||
<view style="height: 100rpx;"></view>
|
||||
</view>
|
||||
<!-- <view>{{image}}</view> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
/* pages/info/info.wxss */
|
||||
.schoollist{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.school-list-info{
|
||||
float: left;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
.school-list-photo{
|
||||
width: 350rpx;
|
||||
height: 700rpx;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
<!-- 雪花效果 -->
|
||||
<scroll-view scroll-y="true">
|
||||
<!-- 页面内容 -->
|
||||
<!-- 主页面 -->
|
||||
<view class="container">
|
||||
<text style="height: 40rpx;"></text>
|
||||
<view class="login-icon">
|
||||
<image class="login-img" src="/static/image/CAUC.png"></image>
|
||||
</view>
|
||||
<view class="login-from">
|
||||
|
||||
<!--账号-->
|
||||
<view class="inputView">
|
||||
<image class="nameImage" src="/static/image/CAUC.png"></image>
|
||||
<label class="loginLab">账号</label>
|
||||
<input class="inputText" placeholder="请输入用户账号" bindinput="usernameInput" />
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
|
||||
<!--密码-->
|
||||
<view class="inputView">
|
||||
<image class="keyImage" src="/static/image/CAUC.png"></image>
|
||||
<label class="loginLab">密码</label>
|
||||
<input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" />
|
||||
</view>
|
||||
<view style="height: 20rpx;"></view>
|
||||
<!-- <view class="s_view">
|
||||
<button class="saveBtn" bindtap="to1" >注册</button>
|
||||
<button class="submitBtn" bindtap="to2" >忘记密码</button>
|
||||
</view> -->
|
||||
|
||||
<!--按钮-->
|
||||
<view class="loginBtnView">
|
||||
<button class="loginBtn" type="primary" bindtap="bindViewTap">登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view>
|
||||
<image wx:for="{{snows}}" wx:key="index" src="/static/image/CAUC.png" style="left:{{snows[index]}}rpx" animation="{{animation[index]}}" class='snow' data-index='{{index}}' />
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,138 @@
|
||||
page{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 1、表格的整体样式 */
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
/* background-color: rgb(156, 23, 78) */
|
||||
}
|
||||
|
||||
/*2、登录的图片样式*/
|
||||
.login-icon{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 3、用来设置登录图片的宽度 */
|
||||
.login-img{
|
||||
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
/*4、表单内容*/
|
||||
.login-from {
|
||||
/* 设置表格上方的高度 */
|
||||
margin-top: 20px;
|
||||
flex: auto;
|
||||
height:100%;
|
||||
}
|
||||
/* 5、设置输入的框 */
|
||||
.inputView {
|
||||
/* background-color: #fff; */
|
||||
line-height: 50px;
|
||||
border-radius:40px;
|
||||
border:1px solid #161515;
|
||||
}
|
||||
|
||||
/*6、设置输入框旁边的图片*/
|
||||
.nameImage, .keyImage {
|
||||
margin-left: 22px;
|
||||
width: 18px;
|
||||
height: 16px
|
||||
}
|
||||
/* 7、设置账号、密码字体的颜色 */
|
||||
.loginLab {
|
||||
margin: 15px 15px 15px 10px;
|
||||
color:blue;
|
||||
font-size: 14px
|
||||
}
|
||||
/* 8、进行提示输入的框是灰色的 */
|
||||
.inputText {
|
||||
flex: block;
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-right: 22px;
|
||||
margin-top: 11px;
|
||||
color: gray;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
/* 9、 内部框图进行相应的分割*/
|
||||
.line {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* .line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #cccccc;
|
||||
margin-top: 1px;
|
||||
} */
|
||||
|
||||
/*10、设置按钮*/
|
||||
.loginBtnView {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* background-color:#DCDCDC; */
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
width: 90%;
|
||||
margin-top: 40px;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
/* 设置字体颜色 */
|
||||
.bxj{
|
||||
color: red;
|
||||
}
|
||||
/* 用来设置注册和忘记密码 */
|
||||
.saveBtn {
|
||||
width: 50% !important;
|
||||
float:left;
|
||||
font-weight: 100;
|
||||
font-size: 10px;
|
||||
}
|
||||
.submitBtn {
|
||||
width: 50% !important;
|
||||
float:right;
|
||||
font-size: 10px
|
||||
|
||||
}
|
||||
.s_view{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 雪花效果特效 */
|
||||
page {
|
||||
background: linear-gradient(180deg, #6699CC 0%, #B8DBF0 100%);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.snow {
|
||||
width: fit-content;
|
||||
position: absolute;
|
||||
top: -100rpx;
|
||||
width: 30rpx;
|
||||
height: 27rpx;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.snow:nth-child(2n+2) {
|
||||
width: 35rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
@ -0,0 +1,156 @@
|
||||
// pages/v6_administrator/v6_administrator.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
swiperList: [
|
||||
{
|
||||
type: 'video',
|
||||
url: 'https://static.51dh.com.cn/dbp/12/98/4494bd8a6e0fcd4a992f25a42bea28f8d1fb.mp4'
|
||||
}, {
|
||||
type: 'image',
|
||||
url: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg'
|
||||
}, {
|
||||
|
||||
type: 'image',
|
||||
url: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg',
|
||||
}, {
|
||||
|
||||
type: 'image',
|
||||
url: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg'
|
||||
}, {
|
||||
|
||||
type: 'image',
|
||||
url: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg'
|
||||
}, {
|
||||
|
||||
type: 'image',
|
||||
url: 'https://i.postimg.cc/76br1jzJ/susu1.jpg'
|
||||
}, {
|
||||
|
||||
type: 'image',
|
||||
url: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg'
|
||||
},
|
||||
{
|
||||
|
||||
type: 'image',
|
||||
url: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg'
|
||||
},
|
||||
],
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
this.tauchSwiper('swiperList');
|
||||
},
|
||||
|
||||
// 初始化tauchSwiper
|
||||
tauchSwiper(name) {
|
||||
let list = this.data[name];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
// Math.abs(x) 函数返回指定数字 “x“ 的绝对值
|
||||
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
|
||||
list[i].mLeft = i - parseInt(list.length / 2)
|
||||
}
|
||||
this.setData({
|
||||
swiperList: list
|
||||
})
|
||||
},
|
||||
// tauchSwiper触摸开始
|
||||
tauchStart(e) {
|
||||
this.setData({
|
||||
tauchStart: e.touches[0].pageX
|
||||
})
|
||||
},
|
||||
// tauchSwiper计算方向
|
||||
tauchMove(e) {
|
||||
this.setData({
|
||||
direction: e.touches[0].pageX - this.data.tauchStart > 0 ? 'right' : 'left'
|
||||
})
|
||||
},
|
||||
// tauchSwiper计算滚动
|
||||
tauchEnd(e) {
|
||||
let direction = this.data.direction;
|
||||
let list = this.data.swiperList;
|
||||
if (direction == 'right') {
|
||||
let mLeft = list[0].mLeft;
|
||||
let zIndex = list[0].zIndex;
|
||||
for (let i = 1; i < list.length; i++) {
|
||||
list[i - 1].mLeft = list[i].mLeft
|
||||
list[i - 1].zIndex = list[i].zIndex
|
||||
}
|
||||
list[list.length - 1].mLeft = mLeft;
|
||||
list[list.length - 1].zIndex = zIndex;
|
||||
this.setData({
|
||||
swiperList: list
|
||||
})
|
||||
} else {
|
||||
let mLeft = list[list.length - 1].mLeft;
|
||||
let zIndex = list[list.length - 1].zIndex;
|
||||
for (let i = list.length - 1; i > 0; i--) {
|
||||
list[i].mLeft = list[i - 1].mLeft
|
||||
list[i].zIndex = list[i - 1].zIndex
|
||||
}
|
||||
list[0].mLeft = mLeft;
|
||||
list[0].zIndex = zIndex;
|
||||
this.setData({
|
||||
swiperList: list
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
<!--pages/v6_administrator/v6_administrator.wxml-->
|
||||
<view class="header">
|
||||
<!-- 代码 -->
|
||||
<image class="bg_ware" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image>
|
||||
<!-- 进入到主页面 -->
|
||||
|
||||
<view class="menu">
|
||||
<view class="item">
|
||||
<navigator url="/pages/v13_look_info/v13_look_info"><image class="image1" src="/static/image/CAUC.png" ></image></navigator>
|
||||
<text style="color: bisque;">查看疫情信息</text>
|
||||
</view>
|
||||
|
||||
<view class="item">
|
||||
<navigator url="/pages/v9_manual/v9_manual"><image class="image1" src="/static/image/CAUC.png" ></image></navigator>
|
||||
<text style="color: bisque;">审批</text>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper-box" bindtouchmove="tauchMove" bindtouchstart="tauchStart" bindtouchend="tauchEnd">
|
||||
<view class="item-box {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key="index" style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
|
||||
<view class="swiper-item">
|
||||
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
|
||||
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,104 @@
|
||||
/* pages/index/index.wxss */
|
||||
.c1{
|
||||
color: red;
|
||||
}
|
||||
.image1{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
/* 如果要设置圆角的话 */
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
/* 规定主轴的方向 */
|
||||
flex-direction: row;
|
||||
/* 元素在主轴方向的排列方式 我用的是平均排列*/
|
||||
justify-content: space-around;
|
||||
/* 元素在负轴方向如何展示 */
|
||||
/* align-items: center; */
|
||||
|
||||
}
|
||||
/* 缺个空格差点g。 */
|
||||
.menu .item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 元素在负轴方向如何展示 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 波浪的渲染 */
|
||||
.header {
|
||||
position: relative;
|
||||
height:450rpx;
|
||||
background: linear-gradient(to bottom, #56ccf2, #2f80ed);
|
||||
}
|
||||
|
||||
.bg_ware {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2rpx;
|
||||
width: 100%;
|
||||
mix-blend-mode: screen;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
/* 轮播图 */
|
||||
.swiper-item image,
|
||||
.swiper-item video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
image {
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 420rpx;
|
||||
position: relative;
|
||||
max-width: 750rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
margin-top: 90rpx;
|
||||
}
|
||||
|
||||
.swiper-box .item-box {
|
||||
position: absolute;
|
||||
width: 300rpx;
|
||||
height: 380rpx;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin: auto;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
opacity: 1;
|
||||
box-shadow: 0px 13rpx 12rpx rgba(0, 0, 0, .5);
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-box .item-box.none {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.swiper-box .item-box .swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.swiper-box .item-box {
|
||||
transform: scale(calc(0.5 + var(--index) / 10));
|
||||
margin-left: calc(var(--left) * 100rpx - 150rpx);
|
||||
z-index: var(--index);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in new issue