Yizhan-app/pages/device/synopsis.vue

172 lines
3.6 KiB
Vue

<template>
<view class="first_main">
<nav-bar :title='title'></nav-bar>
<!-- <view class="back_nav">
<view class="content">
<view class="content_nav">
<view class="item_row">
<view class="item_row_top">
<view class="text_tle">厂商简介</view>
</view>
<view class="item_row_bom">
<view class="text_nav">{{detail.providerDescription}}</view>
</view>
</view>
<view class="item_row">
<view class="item_row_top">
<view class="text_tle">联系方式</view>
</view>
<view class="item_row_bom" style="display: flex;justify-content: center;">
<view class="text_nav">{{detail.contactPhone}}</view>
</view>
</view>
<view class="item_row">
<view class="item_row_top">
<view class="text_tle">微信二维码</view>
</view>
<view class="item_row_bom" style="display: flex;justify-content: center;">
<image class="qrcode" :src="detail.wechatQrcodeUrl"></image>
</view>
</view>
</view>
</view>
</view> -->
<view style="position: fixed;
top: 50%;left: 50%;transform: translate(-50%,-50%);">
<van-empty
class="custom-image"
image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
description="敬请期待"
/>
</view>
</view>
</template>
<script>
import {callbackRequest} from '@/common/util.js';
import {propertyDetail,carSerDetail} from '@/common/api.js';
import navBar from "@/components/navBar/index.vue";
export default {
components: {
navBar
},
data() {
return {
title: '',
id: '',
type: '',
detail: {}
}
},
onLoad(options) {
this.title = options.tle
this.id = options.id
this.type = options.type
this.getData()
},
methods: {
getData() {
let params = {
method: this.type == '1'? propertyDetail:carSerDetail,
id: this.id
}
callbackRequest(params).then((res) => {
if (res.returnCode == 1) {
this.detail = res.returnData
}else{
uni.showToast({title: res.returnMsg,icon: 'none'});
}
})
}
}
}
</script>
<style scoped lang="scss">
.first_main {
min-height: 100vh;
width: 100vw;
background-color: #DEE5F8;
padding-top: 100rpx;
}
.back_nav {
height: 100%;
background-image: url('@/static/firstaid/jianjie.png');
background-size: 100% 500rpx;
background-repeat: no-repeat;
border-top: 1rpx solid #FFFFFF;
padding: 24rpx;
box-sizing: border-box;
}
.content {
margin-top: 254rpx;
min-height: 870rpx;
width: 702rpx;
background: #98C1FF;
border-radius: 28rpx 28rpx 28rpx 28rpx;
padding: 20rpx 12rpx;
box-sizing: border-box;
}
.content_nav {
width: 678rpx;
min-height: 836rpx;
background: linear-gradient( 139deg, #FFFFFF 0%, #D2E3FF 100%);
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 16rpx 28rpx;
box-sizing: border-box;
}
.item_row {
margin-bottom: 50rpx;
}
.item_row_top {
width: 100%;
display: flex;
justify-content: center;
}
.text_tle {
width: 180rpx;
text-align: center;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 36rpx;
color: #0E1A24;
font-style: normal;
text-transform: none;
position: relative;
z-index: 99999;
}
.text_tle:before {
content: '';
position: absolute;
width: 172rpx;
height: 16rpx;
background: linear-gradient( 270deg, #C3CAFE 0%, #8F9FFD 100%);
left: 0;
bottom: -4rpx;
z-index: -1;
}
.item_row_bom {
margin-top: 30rpx;
}
.text_nav {
text-align: center;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #4B5B68;
line-height: 40rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
.qrcode {
width: 230rpx;
height: 228rpx;
display: block;
}
</style>