APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add coffee style

voice
刘嘉炜 4 years ago
parent
1565b873ca
commit
58f95e42cc
4 changed files with 300 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/pages.json
  2. 157
      src/subpackage/device/pages/coffee_manage/coffee_manage.vue
  3. 131
      src/subpackage/device/pages/coffee_test/coffee_test.vue
  4. BIN
      src/subpackage/device/static/images/selected_987.png

12
src/pages.json
View File

@ -189,6 +189,18 @@
"style" : {
"navigationBarTitleText": "售货柜管理"
}
},
{
"path": "pages/coffee_manage/coffee_manage",
"style" : {
"navigationBarTitleText": "咖啡机管理"
}
},
{
"path": "pages/coffee_test/coffee_test",
"style" : {
"navigationBarTitleText": "咖啡机管理"
}
}
]
}

157
src/subpackage/device/pages/coffee_manage/coffee_manage.vue
View File

@ -0,0 +1,157 @@
<template>
<view class="coffee-manage">
<device-name></device-name>
<view class="cm-list">
<view class="cl-item" v-for="i in 10" :key="i">
<image></image>
<view class="ci-content">
<view class="cc-name">咖啡</view>
<view class="cc-num">
<view hover-class="hover-active">-</view>
<input value="32" disabled />
<view hover-class="hover-active" class="active">+</view>
</view>
<view class="cc-price"><text>¥</text>2</view>
</view>
</view>
</view>
<view class="cm-tip">Tips:一包标准粉如若大概能冲40杯左右，建议一包填38杯库存。</view>
<view class="cm-fixed-bar">
<view class="cfb-select-all">
<image class="active" mode="aspectFit" src="/subpackage/device/static/images/selected_987.png"></image>
<text>全部饮品补满</text>
</view>
<view class="cfb-confirm" hover-class="hover-active">确认补粉</view>
</view>
</view>
</template>
<script>
import device_name from '../../components/device_name/device_name';
export default {
components: {
'device-name': device_name
}
}
</script>
<style lang="scss">
@import '~style/public.scss';
.coffee-manage{
padding-bottom: 108upx;
padding-bottom: calc( 108upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 108upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
}
.cm-list{
padding: 24upx;
.cl-item{
margin-bottom: 24upx;
padding: 30upx;
border-radius: 10upx;
background-color: #fff;
display: flex;
>image{
flex-shrink: 0;
margin-right: 20upx;
width: 160upx;
height: 160upx;
background-color: skyblue;
}
.ci-content{
flex-grow: 1;
.cc-name{
margin-bottom: 12upx;
line-height: 50upx;
font-size: 36upx;
color: #333;
@include textHide(1);
}
.cc-num{
margin-bottom: 6upx;
@include centerFlex(flex-end);
>input{
flex-shrink: 0;
margin: 0 10upx;
width: 100upx;
text-align: center;
font-size: 32upx;
line-height: 44upx;
color: #333;
}
>view{
width: 36upx;
height: 36upx;
line-height: 32upx;
text-align: center;
border-radius: 50%;
border: 2upx solid $themeColor;
font-size: 28upx;
font-weight: 500;
color: $themeColor;
&.active{
color: #fff;
background-color: $themeColor;
}
}
}
.cc-price{
line-height: 40upx;
font-size: 40upx;
font-weight: 500;
color: #ff873d;
@include textHide(1);
>text{
font-size: 28upx;
font-weight: 400;
}
}
}
}
}
.cm-tip{
margin-bottom: 20upx;
margin-top: 178upx;
padding: 0 24upx;
font-size: 28upx;
line-height: 40upx;
color: #9a9a9d;
}
.cm-fixed-bar{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 10upx 24upx;
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
padding-top: 10upx;
background-color: #fff;
@include centerFlex(space-between);
.cfb-select-all{
font-size: 28upx;
line-height: 40upx;
color: #494949;
>image{
margin-right: 12upx;
vertical-align: middle;
width: 32upx;
height: 32upx;
border: 2upx solid #d8d8d8;
border-radius: 50%;
&.active{
border-width: 0;
}
}
}
.cfb-confirm{
padding: 0 56upx;
text-align: center;
height: 86upx;
line-height: 86upx;
font-size: 32upx;
border-radius: 46upx;
background-color: $themeColor;
color: #fff;
}
}
</style>

131
src/subpackage/device/pages/coffee_test/coffee_test.vue
View File

@ -0,0 +1,131 @@
<template>
<view class="coffee-test">
<device-name></device-name>
<view class="ct-tit">测试设备</view>
<view class="ct-tip">您可选择饮品出水口，测试饮品出水口是否正常</view>
<view class="ct-tip">热饮请留意避免烫伤！</view>
<view class="ct-list">
<view class="cl-item" v-for="i in 6" :key="i">
<image mode="aspectFit" class="ci-close active" src="/subpackage/device/static/images/selected_987.png" ></image>
<image class="ci-img"></image>
<view>咖啡</view>
</view>
</view>
<view class="ct-btns">
<view class="active">热</view>
<view>常温</view>
</view>
<view class="ct-fixed-btn" hover-class="hover-active">确定</view>
</view>
</template>
<script>
import device_name from '../../components/device_name/device_name';
export default {
components: {
'device-name': device_name
}
}
</script>
<style lang="scss">
@import '~style/public.scss';
.coffee-test{
padding-bottom: 142upx;
}
.ct-tit{
padding: 40upx 40upx 20upx;
font-size: 44upx;
font-weight: 500;
line-height: 60upx;
color: #333;
}
.ct-tip{
padding: 0 40upx;
line-height: 40upx;
font-size: 28upx;
color: #9A9A9D;
&+.ct-tip{
margin-bottom: 20upx;
color: #EA5061;
}
}
.ct-list{
margin-bottom: 50upx;
padding: 0 40upx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.cl-item{
position: relative;
padding-top: 70upx;
margin-bottom: 30upx;
width: 320upx;
height: 320upx;
border-radius: 10upx;
background-color: #fff;
.ci-close{
position: absolute;
right: 20upx;
top: 20upx;
width: 32upx;
height: 32upx;
border-radius: 50%;
border: 2upx solid #ddd;
&.active{
border-width: 0;
border-color: transparent;
}
}
.ci-img{
margin: 0 auto 20upx;
display: block;
width: 160upx;
height: 160upx;
background-color: skyblue;
}
>view{
padding: 0 20upx;
line-height: 50upx;
text-align: center;
font-size: 36upx;
color: #333;
@include textHide(1);
}
}
}
.ct-btns{
@include centerFlex(center);
>view{
margin: 0 24upx;
width: 176upx;
height: 56upx;
line-height: 52upx;
text-align: center;
font-size: 28upx;
line-height: 40upx;
border: 2upx solid #009874;
border-radius: 40upx;
color: #333;
&.active{
background-color: rgba($color: $themeColor, $alpha: .12);
color: $themeColor;
}
}
}
.ct-fixed-btn{
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 10upx;
bottom: calc( 10upx + constant(safe-area-inset-bottom));
bottom: calc( 10upx + env(safe-area-inset-bottom));
width: 702upx;
height: 112upx;
line-height: 112upx;
text-align: center;
border-radius: 10upx;
color: #fff;
background-color: $themeColor;
}
</style>

BIN
src/subpackage/device/static/images/selected_987.png
View File

Side by Side

After

Width: 40  |  Height: 36  |  Size: 381 B

Write Preview
Loading…
Cancel
Save