324 lines
8.6 KiB
Vue
324 lines
8.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="body">
|
|||
|
|
<view class="body-top">
|
|||
|
|
<view style="z-index: 2;position: relative;">
|
|||
|
|
<VNavigationBar titleColor="#fff" backgroundColor="rgba(0,0,0,0)">
|
|||
|
|
<template v-slot:back>
|
|||
|
|
<image style="width: 56rpx;height: 56rpx;" src="../../static/icons/backIcon.png"
|
|||
|
|
mode="aspectFit"></image>
|
|||
|
|
</template>
|
|||
|
|
</VNavigationBar>
|
|||
|
|
</view>
|
|||
|
|
<image class="shopImg" src="" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="shopBody">
|
|||
|
|
<view class="shopDetail">
|
|||
|
|
<view class="shopTitle">顺捷汽车维修搭电救援补胎中心</view>
|
|||
|
|
<view class="rate">
|
|||
|
|
<view class="rateNumBox">
|
|||
|
|
<text>4.5</text>
|
|||
|
|
<image style="width: 28rpx;height: 28rpx;" src="../../static/icons/rateIcon.png"
|
|||
|
|
mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
<text>强烈推荐</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="shopDetailText">
|
|||
|
|
<mote-lines-divide :line="3" expandText="全部" foldHint="收起">
|
|||
|
|
<text class="shopDetailTextLabel">厂家介绍：</text>
|
|||
|
|
<text class="shopDetailTextValue">
|
|||
|
|
正安汽车维修服务有限公司成立于1993年10月25日，属东莞市成立最早、规模最大的民营汽修企业之一。现在莞城区及桥头镇开设有二家连锁经营分厂及直属汽车销售部，主要从事汽车销售、售后，
|
|||
|
|
</text>
|
|||
|
|
</mote-lines-divide>
|
|||
|
|
</view>
|
|||
|
|
<view class="shopDetailFooter">
|
|||
|
|
<view class="shopAddress">
|
|||
|
|
<image style="width: 32rpx;height: 32rpx;" src="../../static/icons/order-icon1.png"
|
|||
|
|
mode="aspectFit"></image>
|
|||
|
|
<text>济南市历下区福瑞达历下护理院东南门旁</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="shopPhone">
|
|||
|
|
<image style="width: 32rpx;height: 32rpx;" src="../../static/icons/order-icon2.png"
|
|||
|
|
mode="aspectFit"></image>
|
|||
|
|
<text>电话</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="busiDetail">
|
|||
|
|
<view class="busiDetailTitle">顺捷汽车维修搭电救援补胎中心</view>
|
|||
|
|
<view class="busiList">
|
|||
|
|
<view v-for="(item, index) in busiList" :key="index" class="busiItem">
|
|||
|
|
<image class="busiTypeImg" :src="item.image" mode="aspectFill"></image>
|
|||
|
|
<view class="busiItemInfo">
|
|||
|
|
<view class="busiItemTitle">{{ item.title }}</view>
|
|||
|
|
<view class="busiItemDesc">{{ item.desc }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="busiItemBtn">查看</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="footer">
|
|||
|
|
<view class="btn" @click="gotoReservation">开始预约</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
VNavigationBar
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
busiList: [{
|
|||
|
|
title: '钣金喷漆维修',
|
|||
|
|
desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
|
|||
|
|
image: ''
|
|||
|
|
}, {
|
|||
|
|
title: '钣金喷漆维修',
|
|||
|
|
desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
|
|||
|
|
image: ''
|
|||
|
|
}, {
|
|||
|
|
title: '钣金喷漆维修',
|
|||
|
|
desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
|
|||
|
|
image: ''
|
|||
|
|
}, {
|
|||
|
|
title: '钣金喷漆维修',
|
|||
|
|
desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
|
|||
|
|
image: ''
|
|||
|
|
}, ]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 去预约
|
|||
|
|
gotoReservation() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/myReservation/addReservation'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.container {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding-top: env(safe-area-inset-top);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
|
|||
|
|
.body {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 0;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-top {
|
|||
|
|
position: relative;
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 468rpx;
|
|||
|
|
|
|||
|
|
.shopImg {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopBody {
|
|||
|
|
position: relative;
|
|||
|
|
top: -50rpx;
|
|||
|
|
overflow: auto;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopDetail {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
padding: 30rpx 32rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
|
|||
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|||
|
|
|
|||
|
|
.shopTitle {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rate {
|
|||
|
|
margin: 30rpx 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 282rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
background: #FFF1DB;
|
|||
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|||
|
|
padding-right: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #E8A321;
|
|||
|
|
|
|||
|
|
.rateNumBox {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
background: linear-gradient(180deg, #FFD187 0%, #FEB33A 100%);
|
|||
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|||
|
|
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
column-gap: 4rpx;
|
|||
|
|
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopDetailText {
|
|||
|
|
padding-bottom: 30rpx;
|
|||
|
|
border-bottom: 1rpx solid #EEEEEE;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
.shopDetailTextLabel {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopDetailTextValue {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopDetailFooter {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.shopAddress {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
column-gap: 8rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
border-right: 1rpx solid #EEEEEE;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopPhone {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
row-gap: 4rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.busiDetail {
|
|||
|
|
padding: 30rpx 32rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
|
|||
|
|
.busiDetailTitle {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.busiList {
|
|||
|
|
.busiItem {
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-bottom: 1rpx solid #DDDDDD;
|
|||
|
|
column-gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.busiTypeImg {
|
|||
|
|
width: 112rpx;
|
|||
|
|
height: 112rpx;
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.busiItemInfo {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.busiItemTitle {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.busiItemDesc {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #858BA0;
|
|||
|
|
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.busiItemBtn {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
background: #0174F6;
|
|||
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|||
|
|
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
padding: 12rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
|
|||
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 510rpx;
|
|||
|
|
height: 76rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background: #0174F6;
|
|||
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
|||
|
|
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|