445 lines
12 KiB
Vue
445 lines
12 KiB
Vue
<template>
|
||
<view class="detail-box">
|
||
<navs :top='top' :color='color'></navs>
|
||
<view class="detailBg">
|
||
<image
|
||
src="https://img.zcool.cn/community/01bfbb5c9ebc0ba8012141685959e0.jpg?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80/format,webp"
|
||
mode=""></image>
|
||
<view class="detail-title">
|
||
<image src="@/static/image/default-avatar.svg" mode=""></image>
|
||
<view>
|
||
<view class="detail-name">xxxx小程序</view>
|
||
<view class="detail-company">xxxxxxx公司</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail-cont">
|
||
<text
|
||
style="line-height: 44rpx;">这是为xxxx开发的一套系统，这是为xxxx开发的一套系统，这是为xxxx开发的一套系统，这是为xxxx开发的一套系统，这是为xxxx开发的一套系明明就静静。</text>
|
||
<image
|
||
src="https://img.zcool.cn/community/01bfbb5c9ebc0ba8012141685959e0.jpg?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80/format,webp"
|
||
mode=""></image>
|
||
<view class="service">
|
||
<view class="service-title">服务介绍</view>
|
||
<view class="service-cont">
|
||
<view>服务内容全部包含:
|
||
上海莫畏信息科技位于上海张江园区技术为主导的科技创新型企业。公司主要从事移动化信息网络与电子商务、IT方案咨询与服务、计算机软件开发与实施、智慧城市，智慧生活相关的物联网领域的开发，公司经营范围：APP开发，小程序开发，网站建设，系统定制，企业管理软件等，公司坚持科技创新，以人为本的理念，我们为不同行业客户提供全面专业的定制化服务。
|
||
</view>
|
||
<view>服务优势: 1.【报价合理】我司案例众多、经验丰富，最大化降低开发成本，匹配您的预算。</view>
|
||
<view>2.【公司专业】经营十七年，人员配置齐全，多年开发经验，久经历练，实操落地。</view>
|
||
<view>3.【流程规范】严格按照开发规范执行，及时反馈项目进度，做到双方信息对称。</view>
|
||
<view>4.【多人售后】多人多维度提供售后服务，力争项目提升客户体验，让您和您的客户都放心。</view>
|
||
<view>5.【资质齐全】具有高*双*认证，质量管理体系，项目经理PMP证书，十多项软著等资质 服务前需客户提供的信息: </view>
|
||
<view>【梳理需求】产品经理会跟您详细沟通需求，梳理业务逻辑，给您匹配合适的产品，如需定制，则会详细沟通。</view>
|
||
<view>【报价反馈】评估好需求之后给出合理的报价和周期，根据您的预算和周期继而调整需求方案 </view>
|
||
<view>【需求匹配】报价和周期匹配在接受范围内后，产品经理会给出需求功能文档 </view>
|
||
<view>【提供合同】根据项目类型编辑合同文档给您过目</view>
|
||
<view>【阐明服务】在合作之前我们会把服务流程和收费标准都说清楚，以免后期有误会。</view>
|
||
</view>
|
||
<view class="service-tag">
|
||
<view v-for="(item,index) in tag" :key="index">{{item}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="service-substance">
|
||
<view class="substance-title">服务内容</view>
|
||
<view class="table">
|
||
<uni-table border stripe emptyText="暂无更多数据">
|
||
<!-- 表头行 -->
|
||
<uni-tr>
|
||
<uni-th align="left" class="th1">版本</uni-th>
|
||
<uni-th align="center" class="th2">
|
||
<view>基础版</view>
|
||
<view>￥ 2699.00</view>
|
||
</uni-th>
|
||
<uni-th align="center" class="th3">
|
||
<view>标准版</view>
|
||
<view>￥ 2699.00</view>
|
||
</uni-th>
|
||
<uni-th align="center" class="th4">
|
||
<view>高级版</view>
|
||
<view>￥ 2699.00</view>
|
||
</uni-th>
|
||
</uni-tr>
|
||
<!-- 表格数据行 -->
|
||
<uni-tr>
|
||
<uni-td>服务卖点</uni-td>
|
||
<uni-td>基础版，报价工期详情咨询客服</uni-td>
|
||
<uni-td>基础版，报价工期详情咨询客服</uni-td>
|
||
<uni-td>基础版，报价工期详情咨询客服</uni-td>
|
||
</uni-tr>
|
||
<uni-tr>
|
||
<uni-td>项目开工</uni-td>
|
||
</uni-tr>
|
||
<uni-tr>
|
||
<uni-td>专属服务对接群</uni-td>
|
||
<uni-td>
|
||
<image src="@/static/image/Frame.svg" mode=""></image>
|
||
</uni-td>
|
||
<uni-td>
|
||
<image src="@/static/image/Frame.svg" mode=""></image>
|
||
</uni-td>
|
||
<uni-td>
|
||
<image src="@/static/image/Frame.svg" mode=""></image>
|
||
</uni-td>
|
||
</uni-tr>
|
||
<uni-tr>
|
||
<uni-td>全程一对一服务</uni-td>
|
||
<uni-td>
|
||
<image src="@/static/image/Frame.svg" mode=""></image>
|
||
</uni-td>
|
||
<uni-td>
|
||
<image src="@/static/image/Frame.svg" mode=""></image>
|
||
</uni-td>
|
||
<uni-td>
|
||
<image src="@/static/image/Frame.svg" mode=""></image>
|
||
</uni-td>
|
||
</uni-tr>
|
||
<uni-tr>
|
||
<uni-td>项目经理</uni-td>
|
||
<uni-td>-</uni-td>
|
||
<uni-td>-</uni-td>
|
||
<uni-td>1名</uni-td>
|
||
</uni-tr>
|
||
<uni-tr>
|
||
<uni-td>产品经理</uni-td>
|
||
<uni-td>-</uni-td>
|
||
<uni-td>-</uni-td>
|
||
<uni-td>1名</uni-td>
|
||
</uni-tr>
|
||
<uni-tr>
|
||
<uni-td>产品经理</uni-td>
|
||
<uni-td>-</uni-td>
|
||
<uni-td>-</uni-td>
|
||
<uni-td>1名</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottoms" :style="'padding-bottom:'+safeAreaBottom+'px'">
|
||
<view class="share" @click="shareTo()">
|
||
<view class="iconfont icon-Group17"></view>
|
||
<view style="margin-top: 6rpx;">分享</view>
|
||
</view>
|
||
<view class="similar">我要类似</view>
|
||
</view>
|
||
<uni-popup ref="popup" type="bottom" safeArea>
|
||
<view class="shareCard">
|
||
<view class="card-top">请选择分享方式</view>
|
||
<view class="Fra1me" @click="closePop()">
|
||
<image src="@/static/image/Fra1me.svg" mode=""></image>
|
||
</view>
|
||
<view class="share-method">
|
||
<view>
|
||
<view class="method" style="background-color: #2F9BFF;">
|
||
<image src="@/static/image/share1.svg" mode=""></image>
|
||
</view>
|
||
<view class="method-text">小程序码</view>
|
||
</view>
|
||
<view>
|
||
<view class="method" style="background-color: #9C8FEC;">
|
||
<image src="@/static/image/share2.svg" mode=""></image>
|
||
</view>
|
||
<view class="method-text">复制链接</view>
|
||
</view>
|
||
<view>
|
||
<view class="method" style="background-color: #09BB07;">
|
||
<image src="@/static/image/share3.svg" mode=""></image>
|
||
</view>
|
||
<view class="method-text">转发给朋友</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
color: 0,
|
||
top: 0,
|
||
tag: ['php', 'Java', 'B/S', '定制开发', '源码交付'],
|
||
safeAreaBottom: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.top = uni.getMenuButtonBoundingClientRect().top;
|
||
this.safeDistance()
|
||
},
|
||
methods: {
|
||
safeDistance() {
|
||
let safeArea = uni.getSystemInfoSync().safeArea;
|
||
let screenHeight = uni.getSystemInfoSync().screenHeight;
|
||
this.safeAreaBottom = screenHeight - safeArea.bottom;
|
||
},
|
||
shareTo() {
|
||
this.$refs.popup.open()
|
||
},
|
||
closePop() {
|
||
this.$refs.popup.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.detail-box {
|
||
position: relative;
|
||
padding-bottom: 234rpx;
|
||
}
|
||
|
||
.detailBg {
|
||
width: 100%;
|
||
height: 580rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: -10;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 580rpx;
|
||
}
|
||
|
||
.detail-title {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 108rpx;
|
||
background-color: rgba(0, 0, 0, .5);
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
margin-left: 32rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.detail-name {
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
line-height: 36rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.detail-company {
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
color: #ffffffb3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-cont {
|
||
margin-top: 440rpx;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333;
|
||
|
||
>image {
|
||
margin-top: 18rpx;
|
||
width: 100%;
|
||
height: 1028rpx;
|
||
}
|
||
}
|
||
|
||
.service {
|
||
margin-top: 96rpx;
|
||
|
||
.service-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #2A3A72;
|
||
}
|
||
|
||
.service-cont {
|
||
margin-top: 22rpx;
|
||
line-height: 48rpx;
|
||
padding-bottom: 26rpx;
|
||
border-bottom: 1rpx solid #F0F0F0;
|
||
}
|
||
|
||
.service-tag {
|
||
display: flex;
|
||
margin-top: 21rpx;
|
||
color: #3887FD;
|
||
|
||
>view {
|
||
height: 44rpx;
|
||
padding: 0 18rpx;
|
||
background: #3887fd1a;
|
||
border-radius: 22rpx;
|
||
line-height: 44rpx;
|
||
margin-left: 12rpx;
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.service-substance {
|
||
margin-top: 96rpx;
|
||
|
||
.substance-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #2A3A72;
|
||
}
|
||
|
||
.table {
|
||
// height: 30rpx;
|
||
margin-top: 38rpx;
|
||
|
||
image {
|
||
width: 22rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottoms {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
border-top: 1rpx solid #EBEBEB;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.share {
|
||
margin-left: 54rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.similar {
|
||
margin-right: 30rpx;
|
||
width: 302rpx;
|
||
height: 76rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #3887FD;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
line-height: 76rpx;
|
||
}
|
||
}
|
||
|
||
.shareCard {
|
||
height: 349rpx;
|
||
border-radius: 60rpx 60rpx 0 0;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.card-top {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
margin-top: 45rpx;
|
||
}
|
||
|
||
.Fra1me {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
position: absolute;
|
||
right: 42rpx;
|
||
top: 35rpx;
|
||
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
|
||
.share-method {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
margin-top: 50rpx;
|
||
|
||
.method {
|
||
margin: 0 auto;
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.method-text {
|
||
color: #A3A3A3;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
line-height: 46rpx;
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.uni-table-th {
|
||
background-color: #F0F0F0;
|
||
height: 100rpx;
|
||
font-size: 28rpx;
|
||
color: #333 !important;
|
||
width: 150rpx !important;
|
||
|
||
&:nth-child(2) {
|
||
background: linear-gradient(88.6deg, #6ba6fe 0%, #3887fd 100%);
|
||
color: #fff !important;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
background: linear-gradient(88.6deg, #f5be4f 0%, #f3ab41 100%);
|
||
color: #fff !important;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
background: linear-gradient(88.6deg, #4d4968 0%, #333049 100%);
|
||
color: #fff !important;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.uni-table-tr{
|
||
&:nth-child(3){
|
||
position: relative;
|
||
&::after{
|
||
content: '';
|
||
width: 0;
|
||
height: 64rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
border-right: 1rpx solid #EFF4FF;
|
||
}
|
||
.uni-table-td{
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
border-right: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|