add coffee style

src/pages.json

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

src/subpackage/device/pages/coffee_manage/coffee_manage.vue

@@ -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>

src/subpackage/device/pages/coffee_test/coffee_test.vue

@@ -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>