Skip to content

G
gxpt_wechat
Commit 3420da62 by zhangzhen
Options

细节优化

parent d1353277
Showing with 273 additions and 66 deletions
components/module/f-tabbar/f-tabbar.vue
......@@ -151,11 +151,12 @@
left: 0;
right: 0;
z-index: 90;
.icon {
display: block;
width: 28px;
height: 28px;
width: 30px;
height: 30px;
margin-top: 24rpx;
}
}
......
components/toolBox/toolBox.vue
......@@ -154,17 +154,19 @@
width: 12vw;
height: 12vw;
border-radius: 50%;
background: #E40583;
background: rgba(255, 255, 255, 0.72);
// border-top: 1px solid #E40583;
// border-left: 1px solid #E40583;
// border-bottom: 1px solid #E40583;
margin: 30upx 0;
margin: 20rpx 0;
transition-property: all;
transition-timing-function:ease;
box-shadow: -4rpx 4rpx 13rpx 0rpx rgba(74, 11, 47, 0.4);
text{
white-space: nowrap;
font-style: italic;
font-size: 28rpx;
color: #3D3D3D;
}
}
.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 @@
<scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll">
<view class="content-box">
<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>
</view>
<view class="store-nav">
......@@ -26,12 +26,10 @@
<text>{{storeInfo.name}}</text>
</view>
<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>
</view>
<view v-else class="flex-1 flex-row">
</view>
</view>
<view class="flex-row part-right">
......@@ -47,47 +45,55 @@
<image :src="assetsPath +'/banner2.png'" mode="widthFix"></image>
</view>
<view class="flex-col list-box">
<view class="title">
<view class="title titleStyle">
<text class="text-title">房间预览</text>
</view>
<!-- list-item-box -->
<view v-for="(item,index) in storeInfo.roomVoList" :key="index" class="list-item-box"
@tap="onNavToOrder(item)">
<view class="relative part-top">
<image class="room-img" :src="item.images[0]" mode="scaleToFill"></image>
<view class="absolute part-top-content">
<view class="flex-between">
<view></view>
<image :src="assetsPath +'/nav_to_icon.png'" mode="widthFix"
@tap.stop="onNavToInfo(item)">
</image>
</view>
<view class="itemRow listStyle">
<view class="relative part-top">
<image class="room-img" :src="item.images[0]" mode="scaleToFill"></image>
<!-- <view class="absolute part-top-content">
<view class="flex-between">
<view></view>
<image :src="assetsPath +'/nav_to_icon.png'" mode="widthFix"
@tap.stop="onNavToInfo(item)">
</image>
</view>
</view> -->
</view>
</view>
<view class="flex-col part-bottom">
<view class="flex-1 flex-between room-title">
<view class="room-name">
<text>{{item.name}}</text>
<view class="flex-col part-bottom">
<view class="flex-between room-title">
<view class="room-name">
<text>{{item.name}}</text>
</view>
<view class="price">
<text>查看包厢</text>
</view>
</view>
<view class="flex-row price">
<text>￥</text><text class="text-pink">{{item.price}}</text><text>/小时</text>
<view class="facilitie-box">
<view v-for="(val,i) in item.facilities" :key="i" class='cu-tag radius bg-brown'>
<text>{{facilitieList[val]}}</text>
</view>
</view>
</view>
<view class="facilitie-box">
<view v-for="(val,i) in item.facilities" :key="i" class='cu-tag radius light bg-pink'>
<text>{{facilitieList[val]}}</text>
<view class="flex-priceBox">
<text style="color: #e70486;margin-left: -6rpx;">￥</text><text class="text-pink">{{ item.price }}</text><text>/小时</text>
</view>
</view>
<view class="flex-1 flex-between">
<view class="flex-row room-type">
<text>优惠套餐：</text>
<view v-for="(val,i) in item.packList" :key="i" class="item">
<text>{{val.name}}</text>
</view>
</view>
<view class="confirm">
<text class="cuIcon-add text-white text-lg"></text>
</view>
<view class="item-line"></view>
<view class="item-Go">
<view class="flex-row room-type">
<text>优惠套餐：</text>
<view v-for="(val,i) in item.packList" :key="i" class="item">
<text>{{val.name}}</text>
</view>
</view>
<view class="confirm">
<text class="cuIcon-add text-white text-lg">预定</text>
</view>
</view>
</view>
</view>
......@@ -456,6 +462,7 @@
align-items: center;
width: 100%;
margin-bottom: 50px;
background: #f5f5f5;
}
}
......@@ -467,7 +474,7 @@
image {
display: block;
width: 84%;
width: 68%;
height: auto;
margin-top: -16upx;
}
......@@ -481,7 +488,7 @@
background: #FFFFFF;
box-shadow: 0rpx 7rpx 18rpx 0rpx rgba(0, 0, 0, 0.302);
border-radius: 29rpx 29rpx 29rpx 29rpx;
margin-top: -80upx;
margin-top: -130upx;
z-index: 10;
.icon-box {
......@@ -508,13 +515,14 @@
height: 98upx;
text {
font-size: 40upx;
font-weight: 600;
font-size: 40rpx;
font-weight: 500;
color: #3D3D3D;
line-height: 58upx;
margin-right: 30upx;
line-height: 58rpx;
margin-left: 158rpx;
flex: 1;
}
button {
// width: 160upx;
// line-height: 46upx;
......@@ -526,7 +534,13 @@
// text-align: center;
// color: #3D3D3D;
// 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 @@
.tips-content {
position: relative;
width: 100%;
background: rgba(248, 250, 251, 0.5);
.bg-img {
width: 100%;
height: 100%;
......@@ -579,7 +593,8 @@
image {
display: block;
width: 140upx;
width: 120upx;
margin-right: -10rpx;
}
}
}
......@@ -602,7 +617,7 @@
.banner2 {
width: 674upx;
margin: -12upx auto 0;
margin: auto;
image {
display: block;
......@@ -622,8 +637,8 @@
padding-bottom: 24upx;
.title {
width: 600upx;
margin: 12upx 0;
width: 620upx;
margin: 16upx 0;
text {
font-size: 35rpx;
......@@ -633,19 +648,19 @@
}
.list-item-box {
position: relative;
display: flex;
flex-direction: column;
width: 600upx;
min-height: 352upx;
// position: relative;
// display: flex;
// flex-direction: column;
width: 620upx;
// min-height: 314upx;
background-color: #FFFFFF;
border-radius: 36upx 36upx 36upx 36upx;
border-radius: 18upx;
overflow: hidden;
margin: 20upx 0;
margin: 0 0 20upx 0;
padding: 32rpx !important;
.part-top {
position: relative;
width: 600upx;
width: 620upx;
height: 300upx;
z-index: 10;
background-color: #FFFFFF;
......@@ -700,7 +715,7 @@
}
.part-bottom {
width: 600upx;
width: 620upx;
border: 6upx solid #E40583;
border-radius: 0 0 36upx 36upx;
margin-top: -28upx;
......@@ -731,6 +746,7 @@
color: #CC1B1B;
font-size: 33upx;
font-weight: bolder;
padding-right: 4rpx;
}
}
......@@ -780,7 +796,7 @@
.facilitie-box {
display: flex;
flex-wrap: wrap;
padding: 12upx 20upx;
padding: 12rpx 0 12rpx 20rpx;
}
.location-box{
display: flex;
......@@ -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>
\ No newline at end of file
utils/tools.js
......@@ -97,7 +97,7 @@ export const getTabbarHeight = function() {
var systemInfo = uni.getSystemInfoSync()
var data = {
...systemInfo,
tabbarH: 50, //tabbar高度--单位px
tabbarH: 72, //tabbar高度--单位px
tabbarPaddingB: 0, //tabbar底部安全距离高度--单位px
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