1.合并前段时间写的页面
This commit is contained in:
87
pages/sys/user/serviceCenter/questionDetail.vue
Normal file
87
pages/sys/user/serviceCenter/questionDetail.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="detail-container">
|
||||
<!-- 可滚动内容区 -->
|
||||
<view class="scroll-content">
|
||||
<!-- 问题标题 -->
|
||||
<view class="question-title">
|
||||
包月停车、临时停车的办理流程及收费标准
|
||||
<view class="title-underline"></view>
|
||||
</view>
|
||||
<!-- 内容区 -->
|
||||
<view class="question-content">
|
||||
<view class="question-desc">
|
||||
您好:本项目只有8组团为包月停车，办理流程为:业主携带身份证至物业客户中心前台办理，租户带租赁合同和身份证到前台办理即可;5,6,7,9,10,11组团无包月停车，无需办理包月停车手续;临时停车无需办理。5,6组团为私家车位，无需收费。8组团包月停车的收费标准为:500元/8组团临时停车的收费标准为:小区内9,10,11组团临时停车的收费标准为:二轮车:每小时1元，12小时内5元/次，24小时内10元/次;小型车:每小时3元，12小时内10元/次，24小时内20元/次;大型车:每小时4元，12小时内15元/次，24小时内25元/次
|
||||
</view>
|
||||
<image src="/static/ic_q_d_01.png" class="question-img" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-back {
|
||||
position: absolute;
|
||||
left: 37rpx;
|
||||
width: 15rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
.detail-title {
|
||||
font-size: 36rpx;
|
||||
color: #000;
|
||||
}
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
.question-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
margin: 40rpx 32rpx 0 64rpx;
|
||||
position: relative;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.title-underline {
|
||||
width: 120rpx;
|
||||
height: 6rpx;
|
||||
background: #3B8BFF;
|
||||
border-radius: 3rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.question-content {
|
||||
margin: 34rpx 24rpx 0 24rpx;
|
||||
background: #EDF6FF;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx dashed #bfc8d6;
|
||||
padding: 32rpx 24rpx 24rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.question-desc {
|
||||
font-size: 28rpx;
|
||||
color: #4A4A4A;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.question-img {
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
283
pages/sys/user/serviceCenter/serviceCenter.vue
Normal file
283
pages/sys/user/serviceCenter/serviceCenter.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<view class="service-container">
|
||||
<!-- 固定顶部区域 -->
|
||||
<view class="fixed-header">
|
||||
<!-- 搜索框 -->
|
||||
<view class="service-search">
|
||||
<image src="/static/ic_search_gray.png" class="search-icon" />
|
||||
<input class="search-input" placeholder="请输入关键词 例 停车" />
|
||||
</view>
|
||||
<!-- 公告banner -->
|
||||
<view class="service-banner">
|
||||
<image src="/static/ic_s_c_01.png" class="banner-img" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 可滚动内容区 -->
|
||||
<view class="scroll-content">
|
||||
<!-- 常见问题 -->
|
||||
<view class="faq-title">常见问题</view>
|
||||
<view class="faq-list">
|
||||
<view class="faq-item" v-for="(item, idx) in faqList" :key="idx" @click="goDetail(idx)">
|
||||
<text class="faq-text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="faq-end">- 到底了 -</view>
|
||||
<!-- 底部按钮 -->
|
||||
<button class="service-btn" @click="showDialog = true">电话咨询</button>
|
||||
</view>
|
||||
<!-- 弹窗 -->
|
||||
<view v-if="showDialog" class="dialog-mask" @click="showDialog = false">
|
||||
<view class="dialog-box">
|
||||
<image src="/static/ic_s_c_02.png" class="dialog-bg" mode="widthFix" />
|
||||
<view class="dialog-content">
|
||||
<view class="dialog-phone">023—950888</view>
|
||||
<button class="dialog-call-btn" @click.stop="callPhone">拨打电话</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
faqList: [
|
||||
'如何开取物业费发票，需要携带哪些资料？需要多...',
|
||||
'提交报修后一般多久会处理？',
|
||||
'生活服务优惠券怎么领取',
|
||||
'如何进行认证',
|
||||
'工程服务收费标准',
|
||||
'哪些时段可以进行施工装修',
|
||||
'包月停车、临时停车的办理流程及收费标准',
|
||||
'开锁的联系方式',
|
||||
'物业服务电话/投诉电话是多少',
|
||||
'电费查询及收费标准'
|
||||
],
|
||||
showDialog: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
callPhone() {
|
||||
this.showDialog = false;
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '023950888'
|
||||
});
|
||||
},
|
||||
goDetail(idx) {
|
||||
uni.navigateTo({ url: '/pages/sys/user/serviceCenter/questionDetail' });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.service-container {
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.fixed-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.service-navbar {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
padding-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.service-back {
|
||||
position: absolute;
|
||||
left: 37rpx;
|
||||
width: 15rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: 36rpx;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.service-search {
|
||||
width: 85vw;
|
||||
background: rgba(225, 225, 225, 0.29);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
height: 64rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 28rpx;
|
||||
flex: 1;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.service-banner {
|
||||
margin: 32rpx 32rpx 0 32rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
bottom: 18rpx;
|
||||
background: #fff;
|
||||
color: #0090FF;
|
||||
font-size: 22rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 6rpx 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 144, 255, 0.08);
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin: 40rpx 0 18rpx 32rpx;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
background: #fff;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
padding: 0 32rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
}
|
||||
|
||||
.faq-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.faq-text {
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.faq-end {
|
||||
text-align: center;
|
||||
color: #bbb;
|
||||
font-size: 26rpx;
|
||||
margin: 32rpx 0 0 0;
|
||||
}
|
||||
|
||||
.service-btn {
|
||||
width: 90vw;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, #2e6cf6 0%, #0090FF 100%);
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
margin: 60rpx auto 0 auto;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 144, 255, 0.12);
|
||||
}
|
||||
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
width: 476rpx;
|
||||
height: 552rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dialog-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.dialog-phone {
|
||||
margin-top: 180rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.dialog-call-btn {
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, #FFD600 0%, #FFB800 100%);
|
||||
color: #222;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 20rpx;
|
||||
margin: 40rpx auto 0 auto;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 184, 0, 0.12);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user