会员模块
This commit is contained in:
70
pages/clock/base/base.js
Normal file
70
pages/clock/base/base.js
Normal file
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
baseState : false, // 建议每日饮水量弹出
|
||||
drinkNeed : '', // 建议每日饮水量
|
||||
recordnum1: 160, // 身高
|
||||
recordnum2: 65, // 体重
|
||||
dateValue : '请选择' // 生日选择
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生日选择
|
||||
*/
|
||||
birthdayChange(e) {
|
||||
this.setData({
|
||||
dateValue: e.detail.value
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交信息
|
||||
*/
|
||||
submitBtn() {
|
||||
let birthday = this.data.dateValue,
|
||||
height = this.selectComponent('#ctrlmill1').data.number,
|
||||
weight = this.selectComponent('#ctrlmill2').data.number
|
||||
wx.$api.water.Store({
|
||||
birthday: birthday,
|
||||
height : height,
|
||||
weight : weight
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
this.setData({
|
||||
drinkNeed: res.data.drink.need,
|
||||
baseState: true
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭弹窗-并跳走
|
||||
*/
|
||||
perfect() {
|
||||
wx.switchTab({
|
||||
url: '/pages/record/index'
|
||||
})
|
||||
}
|
||||
})
|
||||
7
pages/clock/base/base.json
Normal file
7
pages/clock/base/base.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"milliliter": "/components/milliliter/milliliter",
|
||||
"milliliter-input": "/components/milliliter-input/milliliter-input"
|
||||
},
|
||||
"navigationBarTitleText": "完善信息"
|
||||
}
|
||||
39
pages/clock/base/base.wxml
Normal file
39
pages/clock/base/base.wxml
Normal file
@@ -0,0 +1,39 @@
|
||||
<view class="base">
|
||||
<view class="baseTitle">
|
||||
<text>个人信息完善</text>
|
||||
以下信息将帮助我们为您定制个人健康饮水计划
|
||||
</view>
|
||||
<view class="baseWrite">
|
||||
<view class="baseWrite-title">生日<text>*</text></view>
|
||||
<picker class="baseWrite-birthday" bindchange="birthdayChange" mode="date" value="{{dateValue}}" end="2023-12-30">
|
||||
<view class="picker">{{ dateValue }}</view>
|
||||
<image class="baseWrite-birthday-icon" src="/static/icons/userLogin_icon.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="baseWrite">
|
||||
<!-- <view class="baseWrite-title"><view class="baseWrite-title-name">身高<text>*</text></view>{{recordnum1}}(cm)</view> -->
|
||||
<milliliter-input id="ctrlmill1" float="{{false}}" unitName="身高" unitVal="身高" max="{{200}}" val="{{recordnum1}}" value="{{recordnum1}}"></milliliter-input>
|
||||
</view>
|
||||
<view class="baseWrite">
|
||||
<!-- <view class="baseWrite-title"><view class="baseWrite-title-name">体重<text>*</text></view>{{recordnum2}}(kg)</view> -->
|
||||
<milliliter-input id="ctrlmill2" float="{{true}}" unitName="体重" unitVal="体重" max="{{200}}" val="{{recordnum2}}" value="{{recordnum2}}"></milliliter-input>
|
||||
</view>
|
||||
|
||||
<view class="baseBtn" bindtap="submitBtn">提交信息</view>
|
||||
</view>
|
||||
|
||||
<!-- 建议每日饮水量弹出 -->
|
||||
<view class="refertoEject {{baseState ? 'active' : ''}}" catchtouchmove='true'></view>
|
||||
<view class="refertoCont {{baseState ? 'active' : ''}}" catchtouchmove='true'>
|
||||
<view class="refertoCont-text">
|
||||
<view class="refertoCont-title">通知</view>
|
||||
<image class="refertoCont-ls" src="https://api.siyuankunlun.com/storage/images/2023/11/20/9d8b55b1e388c8bbb17a07ceaa332b50.png" mode="widthFix"></image>
|
||||
<view class="refertoCont-tips">
|
||||
<!-- 建议每日饮水量:<text>{{drinkNeed}}</text>ml -->
|
||||
已完善资料,进行舌诊检测
|
||||
</view>
|
||||
<view class="publicPop-btn">
|
||||
<view class="publicPop-btn-go" bindtap="perfect">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
159
pages/clock/base/base.wxss
Normal file
159
pages/clock/base/base.wxss
Normal file
@@ -0,0 +1,159 @@
|
||||
page {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.baseTitle {
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.baseTitle text {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.baseWrite {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.baseWrite-title {
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.baseWrite-title-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.baseWrite-title text {
|
||||
color: red;
|
||||
padding-left: 5rpx;
|
||||
}
|
||||
|
||||
.baseWrite-birthday {
|
||||
border: 2rpx solid #e7e7e7;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
line-height: 74rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.baseWrite-birthday-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
|
||||
.baseBtn {
|
||||
text-align: center;
|
||||
background-color: #528cff;
|
||||
color: #ffffff;
|
||||
line-height: 100rpx;
|
||||
margin-top: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
box-shadow: 0 0 10rpx rgba(12, 83, 223, .5);
|
||||
}
|
||||
|
||||
|
||||
/* 饮水量弹出 */
|
||||
.refertoEject {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.refertoEject.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.refertoCont {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 100000;
|
||||
padding: 0 15%;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.refertoCont.active {
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.refertoCont-text {
|
||||
background-color: #f6f9fb;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.refertoCont-ls {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.refertoCont-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
padding: 40rpx 0;
|
||||
font-size: 34rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.refertoCont-tips {
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
padding: 30rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.refertoCont-tips text {
|
||||
color: #528cff;
|
||||
font-weight: 600;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.publicPop-btn {
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
border-top: 2rpx solid #e6e6e6;
|
||||
padding: 30rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.publicPop-btn-go {
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
background-color: #528cff;
|
||||
text-align: center;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 90rpx;
|
||||
}
|
||||
182
pages/clock/index.js
Normal file
182
pages/clock/index.js
Normal file
@@ -0,0 +1,182 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
needBase : '', // 是否需要完善资料
|
||||
baseState : false,// 完善资料弹出
|
||||
Drink : '', // 饮用量数值
|
||||
Element : '', // 摄入成分
|
||||
type : 'normal', // 默认普通饮用水
|
||||
scale : '10', // 默认饮用量
|
||||
number : 100, // 默认饮用量值
|
||||
seeNumber : 100, // 弹出默认饮用量值
|
||||
waterState : false,// 选择饮用量
|
||||
isFixedTop : 0,
|
||||
barHeight : getApp().globalData.statusBarHeight, // 状态栏高度
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取登录状态
|
||||
if(wx.getStorageSync("token")){
|
||||
// 获取初始化
|
||||
this.initInfo();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
initInfo () {
|
||||
wx.$api.water.Init().then(res => {
|
||||
let {drink, element, need_tongue} = res.data
|
||||
if(this.data.type == 'normal') {
|
||||
this.setData({
|
||||
Drink : drink.normal
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
Drink : drink.sykl
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
Element : element,
|
||||
needBase: need_tongue
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 滑动选择器
|
||||
*/
|
||||
slider3change(e) {
|
||||
this.setData({
|
||||
number: e.detail.value,
|
||||
scale: (e.detail.value / 10)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 兑换券数量加减
|
||||
*/
|
||||
scaleNumber(e){
|
||||
let num = this.data.number,
|
||||
val = e.currentTarget.dataset.type
|
||||
if (val == 'plus'){
|
||||
num = num + 10;
|
||||
}else{
|
||||
if (num > 100){
|
||||
num = num - 10;
|
||||
}
|
||||
this.setData({
|
||||
number: num
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
number: num,
|
||||
scale: num / 10
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择饮品
|
||||
*/
|
||||
drinkSelect(e) {
|
||||
this.setData({
|
||||
type : e.currentTarget.dataset.type
|
||||
})
|
||||
// 获取登录状态
|
||||
if(wx.getStorageSync("token")){
|
||||
// 获取初始化
|
||||
this.initInfo();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 喝水打卡
|
||||
*/
|
||||
drinkTap() {
|
||||
// 获取登录状态
|
||||
if(wx.getStorageSync("token")){
|
||||
// 是否需要完善资料
|
||||
if(this.data.needBase) {
|
||||
this.setData({
|
||||
baseState: true
|
||||
})
|
||||
return
|
||||
}
|
||||
this.setData({
|
||||
waterState : true,
|
||||
number : 100,
|
||||
scale : 100 / 10
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 去登录
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index"
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭选择饮品弹窗
|
||||
*/
|
||||
drinkCancel() {
|
||||
this.setData({
|
||||
waterState : false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认饮用量
|
||||
*/
|
||||
drinkSure() {
|
||||
wx.$api.water.Drink({
|
||||
type: this.data.type,
|
||||
ml : this.data.number
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
waterState: false
|
||||
})
|
||||
|
||||
// 获取初始化
|
||||
this.initInfo();
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭完善资料弹出
|
||||
*/
|
||||
establish() {
|
||||
this.setData({
|
||||
baseState: false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 完善资料跳转
|
||||
*/
|
||||
perfect() {
|
||||
this.setData({
|
||||
baseState: false
|
||||
})
|
||||
wx.switchTab({
|
||||
url: '/pages/record/index'
|
||||
})
|
||||
}
|
||||
})
|
||||
5
pages/clock/index.json
Normal file
5
pages/clock/index.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
135
pages/clock/index.wxml
Normal file
135
pages/clock/index.wxml
Normal file
@@ -0,0 +1,135 @@
|
||||
<view class="navigation {{isFixedTop > 50 ? 'active' : ''}}" style="padding-top:{{barHeight}}px;">
|
||||
<image class="navigation-arrow" src="https://api.siyuankunlun.com/storage/images/2023/11/15/54dcd352eff2d8ad1f985a8374df09cd.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="monster" style="padding-top: {{barHeight + 60}}px">
|
||||
<view class="monsterBack">
|
||||
<image class="monsterImg" src="https://api.siyuankunlun.com/storage/images/2023/11/14/b2687f50c2829ea28ba5efa598699382.png" mode="aspectFill"></image>
|
||||
<view class="monsterBar" style="height: {{Drink.rate}}%;"></view>
|
||||
</view>
|
||||
<view class="monsterMark">
|
||||
<view class="monsterMark-total">{{Drink.rate ? Drink.rate : '0'}}%</view>
|
||||
<view class="monsterMark-see"><text>{{Drink.current ? Drink.current : '0'}}</text> / {{Drink.need ? Drink.need : '0'}}ml</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 摄入成分 -->
|
||||
<view class="monsterPart">
|
||||
<view class="monsterPart-name">摄入成分</view>
|
||||
<scroll-view class="monsterPart-list" scroll-x="true" scroll-with-animation>
|
||||
<block wx:if="{{type == 'sykl'}}">
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">{{Element.sr ? Element.sr : '0'}}mg</view>
|
||||
<view class="monsterPart-item-text">锶</view>
|
||||
</view>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">{{Element.mg ? Element.mg : '0'}}mg</view>
|
||||
<view class="monsterPart-item-text">镁</view>
|
||||
</view>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">{{Element.k ? Element.k : '0'}}mg</view>
|
||||
<view class="monsterPart-item-text">钾</view>
|
||||
</view>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">{{Element.ca ? Element.ca : '0'}}mg</view>
|
||||
<view class="monsterPart-item-text">钙</view>
|
||||
</view>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">{{Element.na ? Element.na : '0'}}mg</view>
|
||||
<view class="monsterPart-item-text">钠</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">0mg</view>
|
||||
<view class="monsterPart-item-text">锶</view>
|
||||
</view>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">0mg</view>
|
||||
<view class="monsterPart-item-text">镁</view>
|
||||
</view>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">0mg</view>
|
||||
<view class="monsterPart-item-text">钾</view>
|
||||
</view>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">0mg</view>
|
||||
<view class="monsterPart-item-text">钙</view>
|
||||
</view>
|
||||
<view class="monsterPart-item">
|
||||
<view class="monsterPart-item-name">0mg</view>
|
||||
<view class="monsterPart-item-text">钠</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 选择饮品 -->
|
||||
<view class="drink">
|
||||
<view class="drinkCont">
|
||||
<view class="drinkCont-name">点击选择饮品</view>
|
||||
<view class="drinkCont-list">
|
||||
<view class="drinkCont-item {{type == 'normal' ? 'active' : ''}}" bindtap="drinkSelect" data-type="normal">
|
||||
<image class="drinkCont-item-img" src="https://api.siyuankunlun.com/storage/images/2023/11/14/ada23c13f22a726653c106fb52f31697.png" mode="widthFix"></image>
|
||||
<view class="drinkCont-item-name">普通饮用水</view>
|
||||
</view>
|
||||
<view class="drinkCont-item {{type == 'sykl' ? 'active' : ''}}" bindtap="drinkSelect" data-type="sykl">
|
||||
<image class="drinkCont-item-img" src="https://api.siyuankunlun.com/storage/images/2023/11/14/fe52208e765917ffdf29150cf82dc49f.png" mode="widthFix"></image>
|
||||
<view class="drinkCont-item-name">锶源昆仑天然水</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="drinkBtn">
|
||||
<view class="drinkBtn-go" bindtap="drinkTap">喝水</view>
|
||||
</view>
|
||||
|
||||
<!-- 饮水弹出 -->
|
||||
<view class="waterBack {{waterState ? 'active' : ''}}"></view>
|
||||
<view class="waterPop {{waterState ? 'active' : ''}}">
|
||||
<View class="waterPop-top">
|
||||
<view class="waterPop-top-label waterPop-top-cancel" bindtap="drinkCancel">取消</view>
|
||||
<view class="waterPop-top-label waterPop-name">选择饮用量</view>
|
||||
<view class="waterPop-top-label waterPop-sure" bindtap="drinkSure">确定</view>
|
||||
</View>
|
||||
|
||||
<view class="waterPop-type">
|
||||
<image src="{{type == 'sykl' ? 'https://api.siyuankunlun.com/storage/images/2023/11/14/fe52208e765917ffdf29150cf82dc49f.png' : 'https://api.siyuankunlun.com/storage/images/2023/11/14/ada23c13f22a726653c106fb52f31697.png'}}" class="waterPop-type-cont-img" mode="widthFix"></image>
|
||||
<view class="waterPop-type-cont">
|
||||
<view class="waterPop-type-name">{{type == 'sykl' ? '锶源昆仑天然水' : '普通饮用水'}}</view>
|
||||
<view class="waterPop-type-text">饮用量:{{Drink.current ? Drink.current : '0'}}ml - {{Drink.need ? Drink.need : '0'}}ml</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="waterPop-scale">
|
||||
<view class="waterPop-scale-pot">
|
||||
<image class="waterPop-scale-pot-back" src="https://api.siyuankunlun.com/storage/images/2023/11/14/7cc458841f443badade6e9558a833ad5.png"></image>
|
||||
<view class="waterPop-scale-pot-grey"></view>
|
||||
<view class="waterPop-scale-pot-ruler" style="height: {{scale}}%;">
|
||||
<view class="waterPop-scale-pot-number">{{number}}ml</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="waterPop-scale-grow">
|
||||
<view class="waterPop-scale-grow-btn waterPop-scale-grow-cut" bindtap="scaleNumber" data-type="remove">-</view>
|
||||
<slider class="waterPop-scale-grow-slider" bindchange="slider3change" block-size="20" value="{{number}}" step="10" min="100" max="1000" backgroundColor="#eeeeee" block-color="#3c7dff" selected-color="#3c7dff" />
|
||||
<view class="waterPop-scale-grow-btn waterPop-scale-grow-add" bindtap="scaleNumber" data-type="plus">+</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 是否完善资料弹出 -->
|
||||
<view class="refertoEject {{baseState ? 'active' : ''}}" catchtouchmove='true'></view>
|
||||
<view class="refertoCont {{baseState ? 'active' : ''}}" catchtouchmove='true'>
|
||||
<view class="refertoCont-text">
|
||||
<view class="refertoCont-title">健康档案提示</view>
|
||||
<image class="refertoCont-ls" src="https://api.siyuankunlun.com/storage/images/2023/11/20/9d8b55b1e388c8bbb17a07ceaa332b50.png" mode="widthFix"></image>
|
||||
<view class="refertoCont-tips">
|
||||
您还没有建立健康档案
|
||||
</view>
|
||||
<view class="publicPop-btn">
|
||||
<view class="publicPop-btn-go" bindtap="establish">暂不建立</view>
|
||||
<view class="publicPop-btn-go publicPop-btn-border" bindtap="perfect">去建立</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
455
pages/clock/index.wxss
Normal file
455
pages/clock/index.wxss
Normal file
@@ -0,0 +1,455 @@
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 顶部 */
|
||||
.navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: transparent;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.navigation.active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.navigation-arrow {
|
||||
width: 120rpx;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
/* 小水怪 */
|
||||
.monster {
|
||||
background-color: #ffffff;
|
||||
padding: 40rpx 80rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.monsterBack {
|
||||
background-color: #eeeeee;
|
||||
position: relative;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.monsterImg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.monsterBar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.monsterBar::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
background-color: #c9dbff;
|
||||
border-radius: 0%;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
.monsterMark {
|
||||
position: absolute;
|
||||
margin-top: -120rpx;
|
||||
left: 40rpx;
|
||||
z-index: 3;
|
||||
color: #3c7dff;
|
||||
}
|
||||
|
||||
.monsterMark-total {
|
||||
font-weight: 600;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.monsterMark-see text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.monsterPart {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.monsterPart-name {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.monsterPart-list {
|
||||
white-space: nowrap;
|
||||
background-color: #f6f6f6;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.monsterPart-item {
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
margin-right: 20rpx;
|
||||
padding: 10rpx 30rpx 10rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
flex: 5;
|
||||
font-size: 26rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.monsterPart-item::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 25rpx;
|
||||
top: 20rpx;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #3c7dff;
|
||||
}
|
||||
|
||||
.monsterPart-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.monsterPart-item:nth-child(2)::after {
|
||||
background-color: #d60000;
|
||||
}
|
||||
|
||||
.monsterPart-item:nth-child(3)::after {
|
||||
background-color: #00c700;
|
||||
}
|
||||
|
||||
.monsterPart-item:nth-child(4)::after {
|
||||
background-color: #f5d72e;
|
||||
}
|
||||
|
||||
.monsterPart-item:nth-child(5)::after {
|
||||
background-color: #9721da;
|
||||
}
|
||||
|
||||
.monsterPart-item-text {
|
||||
color: #919191;
|
||||
}
|
||||
|
||||
/* 选择饮品 */
|
||||
.drink {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.drinkCont {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 15rpx;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.drinkCont-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.drinkCont-list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.drinkCont-item {
|
||||
flex: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.drinkCont-item-img {
|
||||
width: 120rpx;
|
||||
border: 2rpx solid #f6f6f6;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.drinkCont-item-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.drinkCont-item.active .drinkCont-item-img {
|
||||
border-color: #3c7dff;
|
||||
}
|
||||
|
||||
.drinkCont-item.active .drinkCont-item-name {
|
||||
color: #3c7dff;
|
||||
}
|
||||
|
||||
/* 喝水按钮 */
|
||||
.drinkBtn {
|
||||
width: 100%;
|
||||
padding: 0 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.drinkBtn-go {
|
||||
width: 100%;
|
||||
background-color: #3c7dff;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: 90rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
/* 饮水弹出 */
|
||||
.waterBack {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.waterBack.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.waterPop {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 9;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding: 0 40rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.waterPop.active {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.waterPop-top {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.waterPop-top-label {
|
||||
font-size: 32rpx;
|
||||
flex: 3;
|
||||
line-height: 110rpx;
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.waterPop-name {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.waterPop-sure {
|
||||
color: #548dff;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.waterPop-type {
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.waterPop-type-cont-img {
|
||||
width: 140rpx;
|
||||
}
|
||||
|
||||
.waterPop-type-cont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 40rpx 0 0 140rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.waterPop-type-text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #919191;
|
||||
}
|
||||
|
||||
.waterPop-scale {
|
||||
padding: 20rpx 25% 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.waterPop-scale-pot {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding-top: 130%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.waterPop-scale-pot-back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.waterPop-scale-pot-ruler {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #548dff;
|
||||
width: 100%;
|
||||
transition: .8s;
|
||||
}
|
||||
|
||||
.waterPop-scale-pot-number {
|
||||
position: absolute;
|
||||
top: -50rpx;
|
||||
font-weight: 600;
|
||||
color: #3c7dff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.waterPop-scale-pot-grey {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #eef4ff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.waterPop-scale-grow {
|
||||
display: flex;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.waterPop-scale-grow-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
background-color: #528cff;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.waterPop-scale-grow-slider {
|
||||
width: calc(100% - 170rpx);
|
||||
margin: 5rpx 30rpx 0 40rpx;
|
||||
}
|
||||
|
||||
/* 完善信息弹出 */
|
||||
.refertoEject {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.refertoEject.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.refertoCont {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 100000;
|
||||
padding: 0 15%;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.refertoCont.active {
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.refertoCont-text {
|
||||
background-color: #f6f9fb;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.refertoCont-ls {
|
||||
width: 260rpx;
|
||||
}
|
||||
|
||||
.refertoCont-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
padding: 40rpx 0;
|
||||
font-size: 34rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.refertoCont-tips {
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
padding: 0 60rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.publicPop-btn {
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
border-top: 2rpx solid #e6e6e6;
|
||||
}
|
||||
|
||||
|
||||
.publicPop-btn-go {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.publicPop-btn-border {
|
||||
color: #528cff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.publicPop-btn-border::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 2rpx;
|
||||
height: 100rpx;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
Reference in New Issue
Block a user