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

add all style

voice
刘嘉炜 4 years ago
parent
58f95e42cc
commit
5e218c2fd4
4 changed files with 289 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/pages.json
  2. 2
      src/subpackage/device/pages/coffee_test/coffee_test.vue
  3. 209
      src/subpackage/device/pages/locker_manage/locker_manage.vue
  4. 67
      src/subpackage/device/pages/order_manage/order_manage.vue

12
src/pages.json
View File

@ -201,6 +201,18 @@
"style" : { "style" : {
"navigationBarTitleText": "咖啡机管理" "navigationBarTitleText": "咖啡机管理"
} }
},
{
"path": "pages/locker_manage/locker_manage",
"style" : {
"navigationBarTitleText": "租售柜管理"
}
},
{
"path": "pages/order_manage/order_manage",
"style" : {
"navigationBarTitleText": "订单管理"
}
} }
] ]
} }

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

@ -5,7 +5,7 @@
<view class="ct-tip">您可选择饮品出水口，测试饮品出水口是否正常</view> <view class="ct-tip">您可选择饮品出水口，测试饮品出水口是否正常</view>
<view class="ct-tip">热饮请留意避免烫伤！</view> <view class="ct-tip">热饮请留意避免烫伤！</view>
<view class="ct-list"> <view class="ct-list">
<view class="cl-item" v-for="i in 6" :key="i">
<view class="cl-item" v-for="i in 4" :key="i">
<image mode="aspectFit" class="ci-close active" src="/subpackage/device/static/images/selected_987.png" ></image> <image mode="aspectFit" class="ci-close active" src="/subpackage/device/static/images/selected_987.png" ></image>
<image class="ci-img"></image> <image class="ci-img"></image>
<view>咖啡</view> <view>咖啡</view>

209
src/subpackage/device/pages/locker_manage/locker_manage.vue
View File

@ -0,0 +1,209 @@
<template>
<view class="locer-manage">
<device-name></device-name>
<view class="lm-list">
<view class="ll-item" v-for="i in 10" :key="i">
<view class="li-left">
<view class="ll-box">2号</view>
<view class="ll-tag">已租</view>
</view>
<view class="li-content">
<view>
<view class="lc-name">球拍+球</view>
<view class="lc-price">
<view>20<text>元/小时</text></view>
<view>押金：100元</view>
</view>
</view>
<image class="active" mode="aspectFit" src="/subpackage/device/static/images/selected_987.png"></image>
</view>
</view>
</view>
<view class="lm-tip">Tips：如需更换货物、设置价格请前往PC端商家后台设置</view>
<view class="lm-fixed-bar">
</view>
<view class="lm-fixed-bar">
<view class="lfb-select-all">
<image class="active" mode="aspectFit" src="/subpackage/device/static/images/selected_987.png"></image>
<text>全选</text>
</view>
<view class="lfb-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';
.locer-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 */
}
.lm-list{
padding: 24upx;
.ll-item{
margin-bottom: 24upx;
padding: 30upx;
border-radius: 10upx;
background-color: #fff;
@include centerFlex(space-between);
.li-left{
flex-shrink: 0;
position: relative;
margin-right: 22upx;
width: 156upx;
height: 156upx;
border-radius: 10upx;
background-color: #f0f0f1;
@include centerFlex(center);
.ll-box{
position: relative;
padding: 10upx;
width: 120upx;
height: 120upx;
line-height: 100upx;
text-align: center;
border-radius: 10upx;
font-size: 32upx;
color: #9a9a9d;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #e3e3e5;
&::before{
content: '';
position: absolute;
left: 10upx;
top: 50%;
transform: translateY(-50%);
width: 10upx;
height: 20upx;
border-radius: 6upx;
background-color: #f0f0f1;
}
}
.ll-tag{
position: absolute;
top: -14upx;
right: -26upx;
padding: 0 6upx;
border-radius: 6upx;
border: 2upx solid $themeColor;
text-align: center;
line-height: 28upx;
font-size: 20upx;
color: $themeColor;
}
}
.li-content{
flex-grow: 1;
display: flex;
justify-content: space-between;
>image{
flex-shrink: 0;
margin-left: 10upx;
width: 32upx;
height: 32upx;
border-radius: 50%;
border: 2upx solid #dddddd;
align-self: center;
&.active{
border-width: 0;
border-color: transparent;
}
}
>view{
flex-grow: 1;
.lc-name{
margin-bottom: 18upx;
line-height: 50upx;
font-size: 36upx;
color: #333;
@include textHide(1);
}
.lc-price{
display: flex;
justify-content: flex-start;
align-items: flex-end;
>view{
flex-shrink: 0;
flex-grow: 0;
width: 50%;
@include textHide(1);
&:first-child{
line-height: 56upx;
font-size: 40upx;
color: #FF873D;
>text{
font-size: 28upx;
}
}
&:nth-child(2){
line-height: 44upx;
font-size: 28upx;
color: #9a9a9d;
}
}
}
}
}
}
}
.lm-tip{
padding: 0 24upx;
margin-bottom: 24upx;
line-height: 34upx;
font-size: 24upx;
color: #9a9a9d;
}
.lm-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);
.lfb-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;
}
}
}
.lfb-confirm{
padding: 0 56upx;
text-align: center;
height: 86upx;
line-height: 86upx;
font-size: 32upx;
border-radius: 46upx;
background-color: $themeColor;
color: #fff;
}
}
</style>

67
src/subpackage/device/pages/order_manage/order_manage.vue
View File

@ -0,0 +1,67 @@
<template>
<view class="order-manage">
<view class="om-section" v-for="k in 2" :key="k">
<view class="os-tit">订单管理</view>
<view class="os-tabs">
<view class="ot-item" v-for="i in 9" :key="i">
<image></image>
<view>预约订单</view>
</view>
</view>
</view>
</view>
</template>
<script>
import store_name from '../../components/store_name/store_name';
export default {
components: {
'store-name': store_name
}
}
</script>
<style lang="scss">
@import '~style/public.scss';
.om-section{
margin-bottom: 24upx;
padding-bottom: 10upx;
padding-top: 62upx;
background-color: #fff;
.os-tit{
margin-bottom: 54upx;
padding: 0 40upx;
font-size: 32upx;
font-weight: 500;
line-height: 44upx;
color: #333;
}
.os-tabs{
display: flex;
flex-wrap: wrap;
.ot-item{
flex-shrink: 0;
flex-grow: 0;
margin-bottom: 40upx;
width: 25%;
>image{
margin: 0 auto 18upx;
display: block;
width: 60upx;
height: 60upx;
background-color: skyblue;
}
>view{
padding: 0 20upx;
line-height: 32upx;
text-align: center;
font-size: 22upx;
color: #333;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save