800 lines
19 KiB
Vue
800 lines
19 KiB
Vue
<template>
|
||
<view>
|
||
<view class="index-container" style="background-color: white;padding-bottom: 10upx;">
|
||
<view class="banner">
|
||
<swiper v-if="houseInfo.PICTURE&&houseInfo.PICTURE.length>0" class="swiper-banner" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1500">
|
||
<swiper-item v-for="(item, index) in houseInfo.PICTURE" :key="index">
|
||
<view class="swiper-item" >
|
||
<image @click="vbPicture(new Array(formatImgUrl(item)))" :src="formatImgUrl(item)"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view v-else style="height: 500upx;line-height: 500upx;text-align: center;font-size: 60upx;border-bottom: 1px solid #e5e5e5;color: #606060;">
|
||
暂无图片
|
||
</view>
|
||
</view>
|
||
<view style="clear: both;"></view>
|
||
<view class="box">
|
||
<text style="color: red; font-size:42upx;padding: 40upx 0 0 40upx;">租金: {{houseInfo.RENT+"元/月 "}}</text>
|
||
</view>
|
||
<view class="box">
|
||
<text style="font-size:32upx;padding: 40upx 0 0 40upx;">物业费{{houseInfo.PROPERTY}}</text>
|
||
</view>
|
||
<view class="box">
|
||
<text style="font-size:32upx;padding: 40upx 0 0 40upx;">押金{{houseInfo.AMOUNT}}</text>
|
||
</view>
|
||
<view class="box">
|
||
<text style=" font-size:32upx;padding: 20upx 40upx 0 40upx;">{{houseInfo.HOUSE_NAME}}</text>
|
||
</view>
|
||
<view class="box">
|
||
<text style=" font-size:32upx;padding: 20upx 40upx 0 40upx;">地址：{{houseInfo.HOUSE_ADDR}}</text>
|
||
</view>
|
||
<view class="box">
|
||
<text style=" font-size:32upx;padding: 20upx 0 0 40upx;">{{houseInfo.BUILDING_YEAR+"年建 " +formatHouseModel(houseInfo.MODEL)+" "+houseInfo.ACREAGE+"㎡"}}</text>
|
||
</view>
|
||
<view style="margin: 20upx 40upx;border-bottom: 1px solid #e5e5e5;"></view>
|
||
<view class="box box-row-reverse box-wrap" style="padding: 20upx 40upx 0 40upx;">
|
||
<view v-for="(item, index) in DEVICE_NAME" :key="index" style="color:#606060;padding: 14upx 24upx;background-color: #F6F6F6;border-radius: 10upx;font-size: 28upx;margin-right: 20upx;margin-bottom: 20upx;">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
<view class="form-box" style="border-radius: 10upx;border-top: 1px solid #e5e5e5;">
|
||
<view class="form-item">
|
||
<text class="label"><text style="color: red;">*</text>合同期限:</text>
|
||
<view class="ipt-box"><uni-datetime-picker :clear-icon="false" v-model="dateRange" type="daterange" /></view>
|
||
</view>
|
||
<view class="form-item" >
|
||
<text class="label">合同上传:</text>
|
||
<view class="ipt-box">
|
||
<view class="pic">
|
||
<view class="img-box">
|
||
<view class="img-item" v-for="(item, index) in imgs2" :key="index">
|
||
<image class="remove-btn" @click="removeImg2(index)" src="/static/icons/delete-icon.png" mode=""></image>
|
||
<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
|
||
</view>
|
||
<view class="img-item upload-btn" @click="chooseImg(1)" v-if="imgs2.length < 5"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
|
||
</view>
|
||
<view class="form-item" >
|
||
<text class="label">缴费凭证:</text>
|
||
<view class="ipt-box">
|
||
<view class="pic">
|
||
<view class="img-box">
|
||
<view class="img-item" v-for="(item, index) in imgs" :key="index">
|
||
<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
|
||
<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
|
||
</view>
|
||
<view class="img-item upload-btn" @click="chooseImg(0)" v-if="imgs.length < 5"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="occupied" style="height: 200upx;"></view>
|
||
|
||
<view style="position: fixed;bottom:0upx;width: 100%;;border-top: 1px solid #e5e5e5;height: 150upx;">
|
||
<view>
|
||
<view class="footer-btn footer-btn-two batchBtn" >
|
||
<view style="background-color:#FEB952 ;" class="btn btn-col1 btn1" @click="callPhone(houseInfo.RESPONSIBLE_PHONE)">负责人电话</view>
|
||
<view v-if="!submitResult" style="background-color:#4db4ea ;" class="btn btn-col1 btn2" @click="submit(1)">上传合同</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import listCell from '@/components/mix-list-cell';
|
||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||
import clipboard from '@/js_sdk/dc-clipboard/clipboard.js';
|
||
import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
||
import { addSelectedHouse,getHouseType} from '@/common/api.js';
|
||
import { formatImgUrl,vbPicture,callPhone,getStorage,callbackRequest,alertTip,callbackRequestNoLoading,convertImgToBase64,uploadImg} from '@/common/util.js';
|
||
export default {
|
||
components: {
|
||
uniIcons,
|
||
listCell,
|
||
uniPopup
|
||
},
|
||
data() {
|
||
return {
|
||
formatImgUrl:formatImgUrl,
|
||
vbPicture:vbPicture,
|
||
callPhone:callPhone,
|
||
houseInfo:{},
|
||
vbPicData:[],
|
||
DEVICE_NAME:[],
|
||
houseDevice:[],
|
||
houseModel:[],
|
||
applyId:'',
|
||
dateRange:'',
|
||
imgs:[],
|
||
imgsId:[],
|
||
imgs2:[],
|
||
imgsId2:[],
|
||
submitResult:false,
|
||
submitFlag:true,
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.applyId = option.applyId;
|
||
let houseInfo = option.houseInfo||{};
|
||
this.houseInfo = JSON.parse(houseInfo);
|
||
this.getHouseType("houseDevice");
|
||
this.houseModel = JSON.parse(option.houseModel);
|
||
let pictures = this.houseInfo.PICTURE||[];
|
||
for(let i=0;i<pictures.length;i++){
|
||
let newUrl = this.formatImgUrl(pictures[i]);
|
||
this.vbPicData.push(newUrl);
|
||
}
|
||
console.log(this.houseInfo);
|
||
},
|
||
methods: {
|
||
getHouseType(dataType){
|
||
let params = {
|
||
method: getHouseType,
|
||
data: {
|
||
dataType:dataType
|
||
}
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
res = res.data;
|
||
if (res.returnCode == 1) {
|
||
this.houseDevice = res.returnData;
|
||
let device = this.houseInfo.DEVICE;
|
||
var DEVICE_NAME = [];
|
||
if(device!=null&&device!=''){
|
||
let devices = device.split(",");
|
||
for(let i=0;i<devices.length;i++){
|
||
for(let j=0;j<this.houseDevice.length;j++){
|
||
if(devices[i] == this.houseDevice[j].id){
|
||
DEVICE_NAME.push(this.houseDevice[j].name);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
this.DEVICE_NAME = DEVICE_NAME;
|
||
} else {
|
||
|
||
}
|
||
});
|
||
},
|
||
submit(){
|
||
// console.log(this.imgsId.join())
|
||
// console.log(this.imgsId2.length)
|
||
// if (!this.dateRange) {
|
||
// alertTip('请选择合同期限');
|
||
// return false;
|
||
// }
|
||
// if (this.imgsId2.length==0) {
|
||
// alertTip('请上传合同图片');
|
||
// return false;
|
||
// }
|
||
if(!this.submitFlag){
|
||
return false;
|
||
}
|
||
this.submitFlag=false;
|
||
uni.showModal({
|
||
title: '确认',
|
||
content: '请确认是否开始上传合同！',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
let data = {
|
||
method: addSelectedHouse,
|
||
data: {
|
||
// photo:this.imgsId.join(),
|
||
// contractPhoto:this.imgsId2.join(),
|
||
// contractStartTime:this.dateRange[0],
|
||
// contractEndTime:this.dateRange[1],
|
||
userId:getStorage('userInfo').userId,
|
||
applyId:this.applyId,
|
||
HOUSE_ID:this.houseInfo.UUID,
|
||
HOUSE_NAME:this.houseInfo.HOUSE_NAME,
|
||
HOUSE_TYPE:this.houseInfo.HOUSE_TYPE,
|
||
HOUSE_ADDR:this.houseInfo.HOUSE_ADDR,
|
||
ACREAGE:this.houseInfo.ACREAGE,
|
||
MODEL:this.houseInfo.MODEL,
|
||
BUILDING_YEAR:this.houseInfo.BUILDING_YEAR,
|
||
DEVICE:this.houseInfo.DEVICE,
|
||
RESPONSIBLE:this.houseInfo.RESPONSIBLE,
|
||
RESPONSIBLE_PHONE:this.houseInfo.RESPONSIBLE_PHONE,
|
||
PRICE:this.houseInfo.PRICE,
|
||
RENT_TYPE:this.houseInfo.RENT_TYPE
|
||
}
|
||
};
|
||
// console.log(data,"data");
|
||
callbackRequest(data).then(res => {
|
||
res = res.data;
|
||
if (res.returnCode == 1) {
|
||
console.log(res);
|
||
// uni.redirectTo({
|
||
// url: '/pages/house/house?currentTabIndex=1'
|
||
// });
|
||
|
||
this.submitFlag = true;
|
||
alertTip(res.returnMsg);
|
||
this.goPageA()
|
||
} else {
|
||
alertTip(res.returnMsg);
|
||
this.submitFlag = true;
|
||
}
|
||
});
|
||
} else if (res.cancel) {
|
||
this.submitFlag = true;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
goPageA(){
|
||
// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
|
||
let pages = getCurrentPages()
|
||
// 2. 上一页面实例
|
||
// 注意是length长度，所以要想得到上一页面的实例需要 -2
|
||
// 若要返回上上页面的实例就 -3，以此类推
|
||
let prevPage = pages[pages.length -4]
|
||
// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
|
||
prevPage.$vm.dataList()
|
||
// 4. 返回上一页面
|
||
uni.navigateBack({
|
||
delta: 3 // 返回的页面数
|
||
})
|
||
},
|
||
formatHouseModel(houseModel){
|
||
for(let i=0;i<this.houseModel.length;i++){
|
||
let obj = this.houseModel[i];
|
||
if(obj.id == houseModel){
|
||
return obj.name;
|
||
}
|
||
}
|
||
},
|
||
//上传图片
|
||
|
||
async chooseImg(type) {
|
||
let chec = 0;
|
||
let sty = [];
|
||
let _this = this;
|
||
uni.showActionSheet({
|
||
itemList:['拍照','相册'],
|
||
success:function(resp){
|
||
chec = resp.tapIndex;
|
||
if (chec == 0) {
|
||
sty = ['camera']; //从相册相机选择
|
||
} else {
|
||
sty = ['album']; //从相册相机选择
|
||
}
|
||
uni.chooseImage({
|
||
count:5,
|
||
sizeType: ['compressed'],
|
||
sourceType: sty,
|
||
quality: 1,
|
||
success: async function(res){
|
||
let resData = res.tempFilePaths;
|
||
for(let i=0;i<resData.length;i++){
|
||
if(_this.imgs.length>3){
|
||
break;
|
||
}
|
||
uni.getImageInfo({
|
||
src: resData[i],
|
||
success:async (path) => {
|
||
convertImgToBase64(path.path, async function(base64) {
|
||
if(_this.imgs.length<5||_this.imgs2.length<3){
|
||
// _this.imgs.push(base64);
|
||
uni.showLoading({
|
||
title: '图片上传中'
|
||
})
|
||
let blength = base64.length;
|
||
let glength = 7500;
|
||
if(blength<=glength){
|
||
let uploadParam = {
|
||
base64: base64,
|
||
userId: getStorage('userInfo').userId+i,
|
||
groupEnd: '1'
|
||
}
|
||
await uploadImg(uploadParam).then(resu => {
|
||
resu = resu.data ;
|
||
uni.hideLoading();
|
||
if (resu.returnCode != 1) {
|
||
alertTip(resu.returnMsg);
|
||
}else{
|
||
if(type==0){
|
||
_this.imgs.push(base64);
|
||
_this.imgsId.push(resu.returnData+".jpg");
|
||
}
|
||
if(type==1){
|
||
_this.imgs2.push(base64);
|
||
_this.imgsId2.push(resu.returnData+".jpg");
|
||
}
|
||
|
||
}
|
||
});
|
||
}else{
|
||
let fnum = parseInt(blength/glength);
|
||
for(let j=1;j<fnum+1;j++){
|
||
if(j==fnum){
|
||
let groupBase = base64.slice((j-1)*glength);
|
||
console.log(groupBase.length,"groupBaselength");
|
||
let uploadParam = {
|
||
base64: groupBase,
|
||
userId: getStorage('userInfo').userId+i,
|
||
groupEnd: '1'
|
||
}
|
||
await uploadImg(uploadParam).then(resu => {
|
||
resu = resu.data ;
|
||
if (resu.returnCode == 1) {
|
||
if(type==0){
|
||
_this.imgs.push(base64);
|
||
_this.imgsId.push(resu.returnData+".jpg");
|
||
}
|
||
if(type==1){
|
||
_this.imgs2.push(base64);
|
||
_this.imgsId2.push(resu.returnData+".jpg");
|
||
}
|
||
} else {
|
||
uni.hideLoading();
|
||
alertTip(resu.returnMsg);
|
||
return;
|
||
}
|
||
});
|
||
}else{
|
||
let groupBase = base64.slice((j-1)*glength,glength*j);
|
||
let uploadParam = {
|
||
base64: groupBase,
|
||
userId: getStorage('userInfo').userId+i,
|
||
groupEnd: '0'
|
||
}
|
||
await uploadImg(uploadParam).then(resu => {
|
||
resu = resu.data ;
|
||
if (resu.returnCode == 1) {
|
||
} else {
|
||
uni.hideLoading();
|
||
alertTip(resu.returnMsg);
|
||
return;
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
uni.hideLoading();
|
||
}
|
||
|
||
|
||
}
|
||
|
||
});
|
||
},
|
||
});
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
fail:function(resp){
|
||
console.log(resp.errMsg);
|
||
}
|
||
});
|
||
},
|
||
//删除图片
|
||
removeImg(index) {
|
||
this.imgs.splice(index, 1);
|
||
this.imgsId.splice(index, 1);
|
||
console.log(this.imgs);
|
||
console.log(this.imgsId);
|
||
},
|
||
removeImg2(index) {
|
||
this.imgs2.splice(index, 1);
|
||
this.imgsId2.splice(index, 1);
|
||
console.log(this.imgs);
|
||
console.log(this.imgsId);
|
||
},
|
||
alertTip() {
|
||
alertTip('敬请期待');
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
|
||
.img-box {
|
||
overflow: hidden;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 10rpx;
|
||
|
||
.img-item {
|
||
float: left;
|
||
width: 200upx;
|
||
height: 200upx;
|
||
border: 1px solid #ddd;
|
||
margin: 0 22rpx 20upx 0upx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
|
||
.img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.remove-btn {
|
||
position: absolute;
|
||
top: -18upx;
|
||
right: -18upx;
|
||
width: 44upx;
|
||
height: 44upx;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.upload-btn {
|
||
.img {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
margin: unset;
|
||
}
|
||
}
|
||
}
|
||
.form-box {
|
||
background: #fff;
|
||
.form-item {
|
||
overflow: hidden;
|
||
// border-bottom: 1px solid #eee;
|
||
padding: 30upx 20upx;
|
||
.label {
|
||
float: left;
|
||
width: 150upx;
|
||
font-size: 32upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
line-height: 68upx;
|
||
}
|
||
.ipt-box {
|
||
margin-left: 160upx;
|
||
input {
|
||
width: 100%;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
.select {
|
||
.arrow {
|
||
float: right;
|
||
width: 16upx;
|
||
height: 29upx;
|
||
margin-top: 10upx;
|
||
}
|
||
.picker {
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
margin-left: 10upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.batchBtn{
|
||
position: absolute;height: 140upx; background: white;padding-top: 30upx;
|
||
.btn1{
|
||
width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;
|
||
}
|
||
.btn2{
|
||
width:40%;border-radius: 10upx;
|
||
}
|
||
.btn3{
|
||
width: 28%;margin-left: 4%;border-radius: 10upx;
|
||
}
|
||
.btn4{
|
||
width: 28%;margin-left: 4%;border-radius: 10upx;
|
||
}
|
||
.btn5{
|
||
width: 28%;margin-left: 4%;border-radius: 10upx;
|
||
background: #348CF2;
|
||
}
|
||
}
|
||
.tip-num {
|
||
color: #fff;
|
||
position: absolute;
|
||
right: 48upx;
|
||
top: -8upx;
|
||
font-size: 24upx;
|
||
background: red;
|
||
border-radius: 50%;
|
||
width: 36upx;
|
||
height: 36upx;
|
||
text-align: center;
|
||
line-height: 36upx;
|
||
}
|
||
.index-container {
|
||
overflow: hidden;
|
||
|
||
.banner {
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 500upx;
|
||
border-radius: 10rpx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.swiper-banner {
|
||
height: 500upx;
|
||
|
||
.swiper-item {
|
||
line-height: 50upx;
|
||
@include overstepOne;
|
||
|
||
text {
|
||
display: block;
|
||
vertical-align: top;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.backlog {
|
||
background: #f3f4fa;
|
||
padding: 20rpx 30rpx;
|
||
|
||
.icon {
|
||
float: left;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
vertical-align: top;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.fr-text {
|
||
margin-left: 70rpx;
|
||
|
||
.swiper-box {
|
||
height: 50upx;
|
||
|
||
.swiper-item {
|
||
line-height: 50upx;
|
||
@include overstepOne;
|
||
|
||
text {
|
||
display: block;
|
||
vertical-align: top;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.category-view {
|
||
border-bottom: 1px solid #e3e3e5;
|
||
padding-bottom: 8rpx;
|
||
|
||
.category-name {
|
||
padding: 36rpx 0 40rpx 20upx;
|
||
font-size: 30upx;
|
||
/* margin-bottom: 40upx; */
|
||
font-weight: bold;
|
||
line-height: 36rpx;
|
||
|
||
image {
|
||
margin-right: 14upx;
|
||
width: 36upx;
|
||
height: 36upx;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-view:last-child {
|
||
border-bottom: 0px;
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
}
|
||
/*水平排列*/
|
||
.box-row-reverse {
|
||
flex-direction: row;
|
||
}
|
||
/*上下排列*/
|
||
|
||
.box-column {
|
||
flex-direction: column;
|
||
}
|
||
|
||
|
||
.box-left {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/*居右*/
|
||
.box-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/*居左*/
|
||
.box-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
/*居中*/
|
||
.box-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/*两端对齐*/
|
||
.box-align-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.box-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.button-fun {
|
||
margin-bottom: 36upx;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
margin-bottom: 4upx;
|
||
}
|
||
|
||
text {
|
||
font-size: 24upx;
|
||
color: #666;
|
||
}
|
||
|
||
.tip-num {
|
||
color: #fff;
|
||
position: absolute;
|
||
right: 48upx;
|
||
top: -8upx;
|
||
font-size: 24upx;
|
||
background: red;
|
||
border-radius: 50%;
|
||
width: 36upx;
|
||
height: 36upx;
|
||
text-align: center;
|
||
line-height: 36upx;
|
||
}
|
||
}
|
||
|
||
.wth25 {
|
||
width: 24%;
|
||
}
|
||
|
||
%flex-center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
%section {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-content: center;
|
||
background: #fff;
|
||
border-radius: 10upx;
|
||
}
|
||
|
||
.server {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
color: #929292;
|
||
margin-top: 20upx;
|
||
}
|
||
|
||
.server .line {
|
||
border-bottom: 1px solid #333333;
|
||
width: 66.6667upx;
|
||
}
|
||
|
||
.server .s-text {
|
||
font-size: 25upx;
|
||
margin-left: 15upx;
|
||
margin-right: 15upx;
|
||
}
|
||
|
||
.user-section {
|
||
height: 373upx;
|
||
padding: 20upx 20upx 0 20upx;
|
||
}
|
||
|
||
.img-icon {
|
||
width: 70upx;
|
||
height: 70upx;
|
||
margin-bottom: 18upx;
|
||
}
|
||
|
||
.user-info-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.cover-container {
|
||
background: $page-color-base;
|
||
padding: 0 30upx;
|
||
position: relative;
|
||
background: #f5f5f5;
|
||
padding-bottom: 20upx;
|
||
}
|
||
|
||
.order-section {
|
||
@extend %section;
|
||
padding: 28upx 0;
|
||
margin-top: 20upx;
|
||
|
||
.order-item {
|
||
@extend %flex-center;
|
||
width: 120upx;
|
||
height: 120upx;
|
||
border-radius: 10upx;
|
||
font-size: $font-sm;
|
||
color: $font-color-dark;
|
||
}
|
||
|
||
.yticon {
|
||
font-size: 48upx;
|
||
margin-bottom: 18upx;
|
||
color: #fa436a;
|
||
}
|
||
}
|
||
|
||
.history-section {
|
||
padding: 10upx 0 0;
|
||
margin-top: 20upx;
|
||
background: #fff;
|
||
border-radius: 10upx;
|
||
|
||
.sec-header {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: $font-base;
|
||
color: $font-color-dark;
|
||
line-height: 40upx;
|
||
margin-left: 30upx;
|
||
|
||
.yticon {
|
||
font-size: 44upx;
|
||
color: #5eba8f;
|
||
margin-right: 16upx;
|
||
line-height: 40upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.img-b {
|
||
width: 100%;
|
||
height: 330upx;
|
||
}
|
||
.tip-area {
|
||
opacity: 0.8;
|
||
filter: alpha(opacity=20);
|
||
position: absolute;
|
||
background: #ffffff;
|
||
width: 60upx;
|
||
height: 60upx;
|
||
text-align: center;
|
||
line-height: 36upx;
|
||
}
|
||
</style>
|