Skip to content

G
gxpt_wechat
Commit 3420da62 by zhangzhen
Options

细节优化

parent d1353277
Showing with 250 additions and 43 deletions
components/module/f-tabbar/f-tabbar.vue
...@@ -154,8 +154,9 @@ ...@@ -154,8 +154,9 @@
.icon { .icon {
display: block; display: block;
width: 28px; width: 30px;
height: 28px; height: 30px;
margin-top: 24rpx;
} }
} }
......
components/toolBox/toolBox.vue
...@@ -154,17 +154,19 @@ ...@@ -154,17 +154,19 @@
width: 12vw; width: 12vw;
height: 12vw; height: 12vw;
border-radius: 50%; border-radius: 50%;
background: #E40583; background: rgba(255, 255, 255, 0.72);
// border-top: 1px solid #E40583; // border-top: 1px solid #E40583;
// border-left: 1px solid #E40583; // border-left: 1px solid #E40583;
// border-bottom: 1px solid #E40583; // border-bottom: 1px solid #E40583;
margin: 30upx 0; margin: 20rpx 0;
transition-property: all; transition-property: all;
transition-timing-function:ease; transition-timing-function:ease;
box-shadow: -4rpx 4rpx 13rpx 0rpx rgba(74, 11, 47, 0.4);
text{ text{
white-space: nowrap; white-space: nowrap;
font-style: italic; font-style: italic;
font-size: 28rpx;
color: #3D3D3D;
} }
} }
.active{ .active{
......
package-lock.json 0 → 100644
{
"name": "简易的二维码生成组件",
"version": "1.0.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "简易的二维码生成组件",
"version": "1.0.3",
"dependencies": {
"html2canvas": "^1.4.1"
}
},
"node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
}
}
}
pages/index/index.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll"> <scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll">
<view class="content-box"> <view class="content-box">
<view class="header-content" <view class="header-content"
:style="{height: statusBarHeight + 210+'px',paddingTop:statusBarHeight+'px' }"> :style="{height: statusBarHeight + 180+'px',paddingTop:statusBarHeight+'px' }">
<image :src="assetsPath + '/banner.png'" mode="widthFix"></image> <image :src="assetsPath + '/banner.png'" mode="widthFix"></image>
</view> </view>
<view class="store-nav"> <view class="store-nav">
...@@ -26,12 +26,10 @@ ...@@ -26,12 +26,10 @@
<text>{{storeInfo.name}}</text> <text>{{storeInfo.name}}</text>
</view> </view>
<view v-if="storeInfo && storeInfo.distance" class="flex-1 flex-row"> <view v-if="storeInfo && storeInfo.distance" class="flex-1 flex-row">
<text class="cuIcon-locationfill text-red"></text> <text class="cuIcon-locationfill text-red text-dw"></text>
<text>距您{{storeInfo.distance}}公里</text> <text>距您{{storeInfo.distance}}公里</text>
</view> </view>
<view v-else class="flex-1 flex-row"> <view v-else class="flex-1 flex-row">
</view> </view>
</view> </view>
<view class="flex-row part-right"> <view class="flex-row part-right">
...@@ -47,37 +45,46 @@ ...@@ -47,37 +45,46 @@
<image :src="assetsPath +'/banner2.png'" mode="widthFix"></image> <image :src="assetsPath +'/banner2.png'" mode="widthFix"></image>
</view> </view>
<view class="flex-col list-box"> <view class="flex-col list-box">
<view class="title"> <view class="title titleStyle">
<text class="text-title">房间预览</text> <text class="text-title">房间预览</text>
</view> </view>
<!-- list-item-box -->
<view v-for="(item,index) in storeInfo.roomVoList" :key="index" class="list-item-box" <view v-for="(item,index) in storeInfo.roomVoList" :key="index" class="list-item-box"
@tap="onNavToOrder(item)"> @tap="onNavToOrder(item)">
<view class="itemRow listStyle">
<view class="relative part-top"> <view class="relative part-top">
<image class="room-img" :src="item.images[0]" mode="scaleToFill"></image> <image class="room-img" :src="item.images[0]" mode="scaleToFill"></image>
<view class="absolute part-top-content"> <!-- <view class="absolute part-top-content">
<view class="flex-between"> <view class="flex-between">
<view></view> <view></view>
<image :src="assetsPath +'/nav_to_icon.png'" mode="widthFix" <image :src="assetsPath +'/nav_to_icon.png'" mode="widthFix"
@tap.stop="onNavToInfo(item)"> @tap.stop="onNavToInfo(item)">
</image> </image>
</view> </view>
</view> </view> -->
</view> </view>
<view class="flex-col part-bottom"> <view class="flex-col part-bottom">
<view class="flex-1 flex-between room-title"> <view class="flex-between room-title">
<view class="room-name"> <view class="room-name">
<text>{{item.name}}</text> <text>{{item.name}}</text>
</view> </view>
<view class="flex-row price"> <view class="price">
<text>￥</text><text class="text-pink">{{item.price}}</text><text>/小时</text> <text>查看包厢</text>
</view> </view>
</view> </view>
<view class="facilitie-box"> <view class="facilitie-box">
<view v-for="(val,i) in item.facilities" :key="i" class='cu-tag radius light bg-pink'> <view v-for="(val,i) in item.facilities" :key="i" class='cu-tag radius bg-brown'>
<text>{{facilitieList[val]}}</text> <text>{{facilitieList[val]}}</text>
</view> </view>
</view> </view>
<view class="flex-1 flex-between">
<view class="flex-priceBox">
<text style="color: #e70486;margin-left: -6rpx;">￥</text><text class="text-pink">{{ item.price }}</text><text>/小时</text>
</view>
</view>
</view>
<view class="item-line"></view>
<view class="item-Go">
<view class="flex-row room-type"> <view class="flex-row room-type">
<text>优惠套餐：</text> <text>优惠套餐：</text>
<view v-for="(val,i) in item.packList" :key="i" class="item"> <view v-for="(val,i) in item.packList" :key="i" class="item">
...@@ -85,8 +92,7 @@ ...@@ -85,8 +92,7 @@
</view> </view>
</view> </view>
<view class="confirm"> <view class="confirm">
<text class="cuIcon-add text-white text-lg"></text> <text class="cuIcon-add text-white text-lg">预定</text>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -456,6 +462,7 @@ ...@@ -456,6 +462,7 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-bottom: 50px; margin-bottom: 50px;
background: #f5f5f5;
} }
} }
...@@ -467,7 +474,7 @@ ...@@ -467,7 +474,7 @@
image { image {
display: block; display: block;
width: 84%; width: 68%;
height: auto; height: auto;
margin-top: -16upx; margin-top: -16upx;
} }
...@@ -481,7 +488,7 @@ ...@@ -481,7 +488,7 @@
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 7rpx 18rpx 0rpx rgba(0, 0, 0, 0.302); box-shadow: 0rpx 7rpx 18rpx 0rpx rgba(0, 0, 0, 0.302);
border-radius: 29rpx 29rpx 29rpx 29rpx; border-radius: 29rpx 29rpx 29rpx 29rpx;
margin-top: -80upx; margin-top: -130upx;
z-index: 10; z-index: 10;
.icon-box { .icon-box {
...@@ -508,11 +515,12 @@ ...@@ -508,11 +515,12 @@
height: 98upx; height: 98upx;
text { text {
font-size: 40upx; font-size: 40rpx;
font-weight: 600; font-weight: 500;
color: #3D3D3D; color: #3D3D3D;
line-height: 58upx; line-height: 58rpx;
margin-right: 30upx; margin-left: 158rpx;
flex: 1;
} }
button { button {
...@@ -526,7 +534,13 @@ ...@@ -526,7 +534,13 @@
// text-align: center; // text-align: center;
// color: #3D3D3D; // color: #3D3D3D;
// padding: 0; // padding: 0;
margin: 0 24upx 0 0; height: 56rpx !important;
font-size: 28rpx !important;
background-color: #ffffff !important;
color: #130F26!important;
border: 1px solid #130F26!important;
margin: 0 22upx 0 0;
padding: 6rpx 20rpx 0 20rpx;
} }
} }
...@@ -535,7 +549,7 @@ ...@@ -535,7 +549,7 @@
.tips-content { .tips-content {
position: relative; position: relative;
width: 100%; width: 100%;
background: rgba(248, 250, 251, 0.5);
.bg-img { .bg-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -579,7 +593,8 @@ ...@@ -579,7 +593,8 @@
image { image {
display: block; display: block;
width: 140upx; width: 120upx;
margin-right: -10rpx;
} }
} }
} }
...@@ -602,7 +617,7 @@ ...@@ -602,7 +617,7 @@
.banner2 { .banner2 {
width: 674upx; width: 674upx;
margin: -12upx auto 0; margin: auto;
image { image {
display: block; display: block;
...@@ -622,8 +637,8 @@ ...@@ -622,8 +637,8 @@
padding-bottom: 24upx; padding-bottom: 24upx;
.title { .title {
width: 600upx; width: 620upx;
margin: 12upx 0; margin: 16upx 0;
text { text {
font-size: 35rpx; font-size: 35rpx;
...@@ -633,19 +648,19 @@ ...@@ -633,19 +648,19 @@
} }
.list-item-box { .list-item-box {
position: relative; // position: relative;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
width: 600upx; width: 620upx;
min-height: 352upx; // min-height: 314upx;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 36upx 36upx 36upx 36upx; border-radius: 18upx;
overflow: hidden; overflow: hidden;
margin: 20upx 0; margin: 0 0 20upx 0;
padding: 32rpx !important;
.part-top { .part-top {
position: relative; position: relative;
width: 600upx; width: 620upx;
height: 300upx; height: 300upx;
z-index: 10; z-index: 10;
background-color: #FFFFFF; background-color: #FFFFFF;
...@@ -700,7 +715,7 @@ ...@@ -700,7 +715,7 @@
} }
.part-bottom { .part-bottom {
width: 600upx; width: 620upx;
border: 6upx solid #E40583; border: 6upx solid #E40583;
border-radius: 0 0 36upx 36upx; border-radius: 0 0 36upx 36upx;
margin-top: -28upx; margin-top: -28upx;
...@@ -731,6 +746,7 @@ ...@@ -731,6 +746,7 @@
color: #CC1B1B; color: #CC1B1B;
font-size: 33upx; font-size: 33upx;
font-weight: bolder; font-weight: bolder;
padding-right: 4rpx;
} }
} }
...@@ -780,7 +796,7 @@ ...@@ -780,7 +796,7 @@
.facilitie-box { .facilitie-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 12upx 20upx; padding: 12rpx 0 12rpx 20rpx;
} }
.location-box{ .location-box{
display: flex; display: flex;
...@@ -817,5 +833,133 @@ ...@@ -817,5 +833,133 @@
} }
} }
} }
// 陈晨增加样式
.titleStyle{
padding: 20rpx 0;
margin: 0 !important;
.text-title{
font-size: 28rpx !important;
font-weight: 500 !important;
}
}
.text-dw{
font-size: 36rpx;
margin-left: -4rpx;
margin-right: 6rpx;
}
// 栏目上
.listStyle{
width: 100%;
display: flex;
border-radius: 16rpx !important;
// 容器
.part-top{
position: initial;
width: 212rpx !important;
height: 164rpx !important;
z-index: 10;
background-color: #FFFFFF;
border-radius: 8rpx !important;
box-shadow: 0 !important;
overflow: hidden;
.room-img{
width: 100%;
border-radius: 0 !important;
}
}
.part-bottom{
width: initial;
border: 0 !important;
border-radius: 0rpx !important;
margin-top: 0rpx !important;
padding-top: 0rpx !important;
padding-left: 20rpx;
flex: right;
.room-title{
padding: 0 !important;
display: flex;
}
.price{
display: initial !important;
align-items: initial !important;
padding-top: 6rpx !important;
text{
color: #9e9e9e;
}
}
// 标签
.facilitie-box{
padding: 20rpx 0 16rpx 0 !important;
.bg-brown{
color: #c98d35;
background-color: #f8eddd;
}
}
// 价格
.flex-priceBox{
padding: 0 6rpx;
text{
font-size: 28rpx;
color: #757575;
}
.text-pink{
font-size: 40rpx;
color: #e70486;
}
}
}
}
.item-line{
width: 100%;
height: 1rpx;
background: #f1f0f0;
margin: 18rpx 0 32rpx 0;
}
// 栏目下
.item-Go{
width: 100%;
display: flex;
.flex-row{
flex: auto;
text {
color: #9e9e9e;
font-size: 28rpx;
}
.item {
display: flex;
justify-content: center;
align-items: center;
height: 44rpx;
padding: 0 8upx;
background: #FFFFFF;
border-radius: 8rpx;
border: 2rpx solid #E40583;
margin: 0 10upx;
text {
font-size: 25upx;
color: #E40583;
}
}
}
.confirm {
justify-content: center;
align-items: center;
align-self: flex-end;
width: 50rpx;
height: 44rpx;
background: #e70486;
color: #ffffff;
border-radius: 8rpx;
flex: 2;
text-align: center;
line-height: 42rpx;
.text-lg {
font-size: 24rpx;
font-weight: bolder;
}
}
}
</style> </style>
\ No newline at end of file
utils/tools.js
...@@ -97,7 +97,7 @@ export const getTabbarHeight = function() { ...@@ -97,7 +97,7 @@ export const getTabbarHeight = function() {
var systemInfo = uni.getSystemInfoSync() var systemInfo = uni.getSystemInfoSync()
var data = { var data = {
...systemInfo, ...systemInfo,
tabbarH: 50, //tabbar高度--单位px tabbarH: 72, //tabbar高度--单位px
tabbarPaddingB: 0, //tabbar底部安全距离高度--单位px tabbarPaddingB: 0, //tabbar底部安全距离高度--单位px
device: systemInfo.system.indexOf('iOS') != -1 ? 'iOS' : 'Android', //苹果或者安卓设备 device: systemInfo.system.indexOf('iOS') != -1 ? 'iOS' : 'Android', //苹果或者安卓设备
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment