<template>
|
<view>
|
<form @submit="add">
|
<view
|
style="display: flex;justify-content: center;position: relative;overflow: hidden;border-radius: 30rpx;"
|
v-for="(item,index) in templateList" v-if="item.template_id==template_id" :key="index">
|
<view v-for="(item,index) in item.style.icon" :key="index"
|
:style="'position:absolute;display: flex;left:'+item.left+'px;top:'+item.top+'px;width:'+item.width+'px;height:'+item.height+'px;'">
|
<image :src="item.src" :style="'width:'+item.width+'px;height:'+item.height+'px;'"></image>
|
</view>
|
<view v-for="(item,index) in item.style.address" :key="index"
|
:style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
|
地址：{{(business.address[index]||selectCity!='选择省 市 区')?(selectCity!='选择省 市 区'?selectCity:'')+business.address[index]:'未填写地址'}}
|
</view>
|
<view v-for="(item,index) in item.style.unit" :key="index"
|
:style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
|
{{business.unit[index]?business.unit[index]:'未填写公司'}}
|
</view>
|
<!-- <view v-for="(item,index) in item.style.position" :key="index"
|
:style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
|
{{business.position[index]?business.position[index]:'未填职位'}}
|
</view> -->
|
<view
|
:style="'position:absolute;left:'+item.style.duties[0].left+'px;top:'+item.style.duties[0].top+'px;color:'+item.style.duties[0].color+';font-size:'+item.style.duties[0].fontSize+'px;'">
|
{{business.duties[0]?business.duties[0]:'未填写职位'}}
|
</view>
|
<view v-if="business.mailbox"
|
:style="'position:absolute;left:'+item.style.mailbox.left+'px;top:'+item.style.mailbox.top+'px;color:'+item.style.mailbox.color+';font-size:'+item.style.mailbox.fontSize+'px;'">
|
邮箱：{{business.mailbox?business.mailbox:'未填写邮箱'}}
|
</view>
|
<view
|
:style="'position:absolute;left:'+item.style.mobile.left+'px;top:'+item.style.mobile.top+'px;color:'+item.style.mobile.color+';font-size:'+item.style.mobile.fontSize+'px;'">
|
手机：{{business.mobile?business.mobile:'未填写手机'}}{{business.mobile_phone?' / '+business.mobile_phone:''}}
|
</view>
|
<view
|
:style="'position:absolute;left:'+item.style.wechat.left+'px;top:'+item.style.wechat.top+'px;color:'+item.style.wechat.color+';font-size:'+item.style.wechat.fontSize+'px;'">
|
微信：{{business.wechat?business.wechat:'未填写微信'}}
|
</view>
|
<view
|
:style="'position:absolute;left:'+item.style.name.left+'px;top:'+item.style.name.top+'px;color:'+item.style.name.color+';font-size:'+item.style.name.fontSize+'px;'">
|
{{business.name?business.name:'未填写姓名'}}
|
</view>
|
<view v-if="business.phone"
|
:style="'position:absolute;left:'+item.style.phone.left+'px;top:'+item.style.phone.top+'px;color:'+item.style.phone.color+';font-size:'+item.style.phone.fontSize+'px;'">
|
电话：{{business.phone?business.phone:'未填写电话'}}
|
</view>
|
<image class="tup"
|
:style="'width:'+item.style.backdrop.width+'px;height:'+item.style.backdrop.height+'px;'"
|
:src="item.style.backdrop.src"></image>
|
<view v-if="item.style.avatar.display==1"
|
:style="'position:absolute;left:'+item.style.avatar.left+'px;top:'+item.style.avatar.top+'px;width:'+item.style.avatar.width+'px;height:'+item.style.avatar.width+'px;'+(item.style.avatar.style=='circle'?'border-radius:'+item.style.avatar.width+'px;overflow: hidden;':'overflow: hidden;')">
|
<image :src="file_path?file_path:item.style.avatar.src"
|
:style="'width:'+item.style.avatar.width+'px;height:'+item.style.avatar.width+'px;'">
|
</image>
|
</view>
|
<view v-if="item.style.logo.display==1" class="logo_h" ref="logo_h"
|
:style="'position:absolute;left:'+item.style.logo.left+'px;top:'+item.style.logo.top+'px;width:'+item.style.logo.width+'px;height:'+item.style.logo.height+'px;'+(item.style.logo.style=='circle'?'border-radius:'+item.style.logo.width+'px;overflow: hidden;':'overflow: hidden;')">
|
<image :src="logo_path?logo_path:item.style.logo.src" class="logo_h" ref="logo_h"></image>
|
</view>
|
</view>
|
<view class="fds">
|
<view>
|
<scroll-view scroll-x="true">
|
<view style="width: 100%;white-space: nowrap;">
|
<view class="mpxz" v-for="(item,index) in templateList" :key="index"
|
@tap="radioChange(index)">
|
<view class="zjc" v-if="item.template_id==template_id">
|
</view>
|
<image class="mpxz-image" :src="item.image" mode="aspectFit"></image>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti">名片类型：</view>
|
<view class="lxfxnrr">
|
<picker @change="changeIlk" :range="ilkList" :range-key="'name'" class="lxfxneirong"
|
mode="selector">
|
<view class="picker-content">
|
{{selectedIlk.name || '请选择名片类型'}}
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
<input style="display: none;" name='ilk' v-model="business.ilk" type="text">
|
</picker>
|
</view>
|
</view>
|
<view class="grxx" @click="is_avatar=true" v-show="avatar_display==1" style="overflow: hidden;">
|
<view class="biaoti">
|
头像
|
</view>
|
<view class="tx" style="margin-left: 30rpx;">
|
<image class="logo" :src="file_path" mode="heightFix"></image>
|
<Upload v-if="is_avatar" @getImgs="handleAvatarUpload" :imageList="[file_path]"></Upload>
|
</view>
|
</view>
|
<view @click="is_logo=true" v-show="logo_display==1">
|
<view class="biaoti">
|
logo
|
</view>
|
<view class="logo" style="overflow: hidden;">
|
<image class="logo" :src="logo_path" mode="heightFix"></image>
|
<Upload v-if="is_logo" @getImgs="handleLogoUpload" :imageList="[logo_path]"></Upload>
|
</view>
|
</view>
|
<view>
|
<view class="biaoti">
|
联系方式
|
</view>
|
<view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>姓名：</view>
|
<view class="lxfxnrr">
|
<input placeholder="请输入姓名" name='name' v-model="business.name" class="lxfxneirong"
|
type="text">
|
</view>
|
</view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>手机：</view>
|
<view class="lxfxnrr">
|
<input @input="sjh" placeholder="输入手机号，多个手机号用/隔开" v-model="mobile" class="lxfxneirong"
|
type="text">
|
<input style="display: none;" name="mobile" v-model="business.mobile"
|
class="lxfxneirong" type="text">
|
<input style="display: none;" name="mobile_phone" v-model="business.mobile_phone"
|
class="lxfxneirong" type="text">
|
</view>
|
</view>
|
|
<view class="lxfx">
|
<view class="lxfxbiaoti">座机：</view>
|
<view class="lxfxnrr"><input placeholder="请输入电话" v-model="business.phone" name="phone"
|
class="lxfxneirong" type="text">
|
</view>
|
</view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti">微信：</view>
|
<view class="lxfxnrr"><input class="lxfxneirong" name="wechat" v-model="business.wechat"
|
placeholder="请输入微信" type="text">
|
</view>
|
</view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti">邮箱：</view>
|
<view class="lxfxnrr"><input class="lxfxneirong" name="mailbox" v-model="business.mailbox"
|
placeholder="请输入邮箱" type="text">
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="padding-bottom: 120rpx;">
|
<view class="biaoti">
|
详细信息
|
</view>
|
<view>
|
<view v-for="(item,index) in unit" :key="index">
|
<view class="lxfx">
|
<view class="lxfxbiaoti">单位名称：</view>
|
<view class="lxfxnrr">
|
<input placeholder="请输入单位名称" :name="'unit['+index+']'"
|
v-model="business.unit[index]" class="lxfxneirong" type="text">
|
</view>
|
</view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti">职位：</view>
|
<view class="lxfxnrr">
|
<input placeholder="请输入职位" :name="'duties['+index+']'"
|
v-model="business.duties[index]" class="lxfxneirong" type="text">
|
</view>
|
</view>
|
</view>
|
<view class="lxfx" @tap="industryClose">
|
<view class="lxfxbiaoti">行业：</view>
|
<view class="lxfxnrr">
|
<input class="lxfxneirong" :value="industryNmae" disabled readonly>
|
<input style="display: none;" type="hidden" name="industry_id"
|
v-model="business.industry_id">
|
</view>
|
</view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti">所在地区：</view>
|
<view class="lxfxnrr">
|
<input class="lxfxneirong" :value="selectCity" disabled="true"
|
@click="showMulLinkageThreePicker" placeholder="请选择省市区">
|
<input style="display: none;" type="hidden" name="province_id"
|
v-model="business.province_id">
|
<input style="display: none;" type="hidden" name="city_id" v-model="business.city_id">
|
<input style="display: none;" type="hidden" name="region_id"
|
v-model="business.region_id">
|
</view>
|
</view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>地址：</view>
|
<view class="lxfxnrr">
|
<input placeholder="请输入详细地址" name="address[0]" v-model="business.address[0]"
|
class="lxfxneirong" type="text">
|
</view>
|
</view>
|
<view class="lxfx">
|
<view class="lxfxbiaoti">简介：</view>
|
<view class="lxfxnrr">
|
<textarea placeholder="请输入个人或公司简介" name="Introduction" v-model="business.Introduction"
|
class="lxfxneirong" :auto-height="true"></textarea>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="anu">
|
<button form-type="submit" class="tijiao">保存名片</button>
|
<input type="text" style="display: none;" name="file_id" :value="file_id">
|
<input type="text" style="display: none;" name="logo" :value="logo_id">
|
<input type="text" style="display: none;" name="logo_height" :value="logo_height">
|
<input type="text" style="display: none;" name="logo_width" :value="logo_width">
|
</view>
|
<Popup :show="industryShow" :width="screenWidth" type="bottom" :closeable="true" @close="industryClose">
|
<view class="industry-popup">
|
<view class="industry-title">选择行业</view>
|
<scroll-view scroll-y="true" style="height: 600rpx;">
|
<!-- 递归展示行业树形结构 -->
|
<view v-for="item in industryList" :key="item.industry_id">
|
<view class="industry-item" @tap="selectIndustry" :data-id="item.industry_id"
|
:class="{ 'selected': business.industry_id == item.industry_id }">
|
{{ item.name }}
|
</view>
|
<!-- 显示子行业 -->
|
<view v-if="item.child && item.child.length > 0" class="industry-child">
|
<view class="industry-item industry-child-item" v-for="child in item.child"
|
:key="child.industry_id" @tap="selectIndustry" :data-id="child.industry_id"
|
:class="{ 'selected': business.industry_id == child.industry_id }">
|
{{ child.name }}
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</Popup>
|
<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
|
:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
|
</view>
|
</form>
|
</view>
|
</template>
|
|
<script>
|
import Popup from '@/components/uni-popup.vue';
|
import Upload from '@/components/upload/uploadOne.vue';
|
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
export default {
|
components: {
|
Upload,
|
Popup,
|
mpvueCityPicker
|
},
|
data() {
|
return {
|
// 模板相关
|
templateList: [], // 模板列表
|
templateShow: false, // 模板弹窗显示状态
|
template_id: 0, // 当前选中的模板ID
|
templateIndex: 0, // 当前选中的模板索引
|
// 业务数据
|
business: {
|
name: '', // 姓名
|
mobile: '', // 手机号
|
mobile_phone: '', // 备用手机号
|
duties: [], // 职位
|
phone: '', // 电话
|
mailbox: '', // 邮箱
|
wechat: '', // 微信
|
unit: [], // 单位名称
|
position: [], // 职位信息
|
address: [], // 地址
|
industry_id: 0, // 行业ID
|
province_id: 0, // 省份ID
|
city_id: 0, // 城市ID
|
region_id: 0, // 区域ID
|
Introduction: '', // 简介
|
ilk: '' // 名片类型
|
},
|
// 名片类型
|
ilkList: [], // 类型列表
|
selectedIlk: {}, // 选中的类型
|
// 辅助输入
|
mobile: '', // 用于输入的手机号（支持多手机号）
|
// 业务状态
|
business_card_id: 0, // 名片ID（用于编辑）
|
// 图片相关
|
file_id: 0, // 头像文件ID
|
file_path: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132", // 头像路径
|
logo_id: 0, // Logo文件ID
|
logo_path: "http://lblmh.com/image/diy/logo_top.png", // Logo路径
|
// 布局相关
|
unit: [], // 单位信息数组
|
logo_height: 0, // Logo高度
|
logo_width: 0, // Logo宽度
|
avatar_width: 0, // 头像宽度
|
// 显示控制
|
avatar_display: 1, // 头像显示状态
|
logo_display: 1, // Logo显示状态
|
position: [], // 位置信息
|
is_business: 0, // 业务类型
|
duties: '', // 职位字符串
|
positionNum: 0, // 位置数量
|
is_avatar: false, // 头像上传弹窗状态
|
is_logo: false, // Logo上传弹窗状态
|
// 行业相关
|
industryList: [], // 行业列表
|
industryShow: false, // 行业选择弹窗状态
|
industryNmae: '请选择行业', // 选中的行业名称
|
screenWidth: 0, // 屏幕宽度
|
// 区域选择相关
|
cityPickerValueDefault: [0, 0, 0], // 地区选择器默认值
|
selectCity: '选择省 市 区', // 选中的地区显示
|
region: {}, // 地区信息
|
is_load: false, // 数据加载状态
|
province: [], // 省份数据
|
city: [], // 城市数据
|
area: [] // 区域数据
|
}
|
},
|
onLoad(e) {
|
if (e.business_card_id) {
|
uni.setNavigationBarTitle({
|
title: '编辑名片'
|
})
|
this.business_card_id = e.business_card_id
|
this.getBusiness(e.business_card_id)
|
}
|
this.getTemplate();
|
this.getIndustryList();
|
this.getIlkList();
|
// 初始化区域选择器数据
|
this.initRegionData();
|
},
|
methods: {
|
templateClose() {
|
this.templateShow = !this.templateShow
|
},
|
industryClose() {
|
this.industryShow = !this.industryShow
|
},
|
getIndustryList() {
|
let _this = this;
|
this._post('plus.business.industry/getIndustryTree', {}, res => {
|
if (res.data) {
|
_this.industryList = res.data.tree;
|
}
|
})
|
},
|
selectIndustry(e) {
|
const industryId = e.target.dataset.id;
|
console.log(industryId);
|
this.business.industry_id = industryId;
|
// 查找选中的行业名称
|
this.findIndustryName(this.industryList, industryId);
|
this.industryShow = false;
|
},
|
findIndustryName(industryList, industryId) {
|
for (let item of industryList) {
|
if (item.industry_id == industryId) {
|
this.industryNmae = item.name;
|
return;
|
}
|
if (item.child && item.child.length > 0) {
|
for (let child of item.child) {
|
if (child.industry_id == industryId) {
|
this.industryNmae = child.name;
|
return;
|
}
|
}
|
}
|
}
|
},
|
// 初始化区域数据
|
initRegionData() {
|
let self = this;
|
self._get('settings/getRegion', {}, function(res) {
|
if (res.data) {
|
self.province = res.data.regionData[0];
|
self.city = res.data.regionData[1];
|
self.area = res.data.regionData[2];
|
self.is_load = true;
|
}
|
});
|
},
|
// 显示区域选择器
|
showMulLinkageThreePicker() {
|
this.$refs.mpvueCityPicker.show();
|
},
|
// 选择区域后的回调
|
onConfirm(e) {
|
this.region = e.label.split(' ');
|
this.selectCity = e.label;
|
this.business.province_id = e.cityCode[0];
|
this.business.city_id = e.cityCode[1];
|
this.business.region_id = e.cityCode[2];
|
},
|
sjh(e) {
|
let _this = this;
|
let mobile = e.detail.value.split('/');
|
if (mobile.length > 2) {
|
this.showError('最多只能添加两个', function() {
|
_this.mobile = mobile[0] + '/' + mobile[1]
|
});
|
return false
|
}
|
console.log(mobile)
|
this.business.mobile = mobile[0]
|
this.business.mobile_phone = mobile[1]
|
},
|
jw(e) {
|
let duties = e.detail.value.split('/');
|
if (duties.length > 3) {
|
this.showError('最多只能添加三个');
|
return false
|
}
|
this.business.duties = duties
|
},
|
handleAvatarUpload(imgs) {
|
if (imgs && imgs.length > 0) {
|
this.file_path = imgs[0].file_path
|
this.file_id = imgs[0].file_id
|
this.is_avatar = false
|
}
|
},
|
handleLogoUpload(imgs) {
|
if (imgs && imgs.length > 0) {
|
this.logo_path = imgs[0].file_path
|
this.logo_id = imgs[0].file_id
|
}
|
},
|
// 获取名片类型列表
|
getIlkList() {
|
let _this = this;
|
this._post('plus.business.business/getIlk', {}, res => {
|
if (res.data) {
|
// 转换为数组格式便于picker使用
|
_this.ilkList = Object.keys(res.data).map(key => ({
|
id: key,
|
name: res.data[key]
|
}));
|
}
|
})
|
},
|
// 切换名片类型
|
changeIlk(e) {
|
const index = e.detail.value;
|
this.selectedIlk = this.ilkList[index];
|
this.business.ilk = this.selectedIlk.id;
|
},
|
getTemplate() {
|
let _this = this;
|
const systemInfo = uni.getSystemInfoSync()
|
this.screenWidth = systemInfo.screenWidth * 2 - 70;
|
this._post('plus.business.template/getList', {
|
screenWidth: systemInfo.screenWidth
|
}, res => {
|
this.templateList = res.data;
|
this.template_id ? '' : this.template_id = this.templateList[0].template_id
|
_this.avatar_display = this.templateList[0].style.avatar.display;
|
_this.is_business = this.templateList[0].style.is_business;
|
_this.logo_display = this.templateList[0].style.logo.display;
|
_this.templateList.forEach(function(res, index) {
|
if (res.template_id == _this.template_id) {
|
_this.radioChange(index)
|
}
|
})
|
|
/* uni.getImageInfo({
|
src: _this.logo_path,
|
success: function(image) {
|
console.log(image);
|
_this.logo_width=image.width
|
_this.logo_height=image.height
|
_this.templateList.forEach(function(res, index) {
|
let typel = _this.templateList[index].style.logo,
|
px = _this.templateList[index].px;
|
_this.templateList[index].style.logo.width = (image.width * px)
|
_this.templateList[index].style.logo.height = (image.height * px)
|
})
|
}
|
|
}); */
|
console.log(_this.templateList);
|
})
|
},
|
getBusiness(business_card_id) {
|
let _this = this;
|
this._post('plus.business.business/detail', {
|
business_card_id: business_card_id
|
}, res => {
|
if (res.data) {
|
this.business = res.data;
|
this.template_id = res.data.template_id;
|
this.unit = res.data.unit;
|
this.position = res.data.position;
|
this.mobile = this.business.mobile + (this.business.mobile_phone ? '/' + this.business
|
.mobile_phone : '');
|
this.business.duties.forEach(function(item, index) {
|
_this.duties = _this.duties + (item ? (index != 0 ? '/' + item : item) : '');
|
})
|
this.file_id = res.data.file_id;
|
this.logo_id = res.data.logo
|
res.data.file_path ? this.file_path = res.data.file_path : "";
|
res.data.logo ? this.logo_path = res.data.logo_image.file_path : "";
|
res.data.logo_width ? this.logo_width = res.data.logo_width : 0;
|
res.data.logo_height ? this.logo_height = res.data.logo_height : 0;
|
|
// 设置名片类型
|
if (this.business.ilk !== undefined && this.business.ilk !== '') {
|
// 等待类型列表加载完成后设置选中项
|
if (this.ilkList && this.ilkList.length > 0) {
|
// 尝试根据id查找，id可能是字符串或数字
|
const ilkId = String(this.business.ilk);
|
this.selectedIlk = this.ilkList.find(item => item.id === ilkId) || {};
|
} else {
|
// 如果类型列表还没加载完成，先获取列表再设置
|
this._post('plus.business.business/getIlk', {}, res => {
|
if (res.data) {
|
_this.ilkList = Object.keys(res.data).map(key => ({
|
id: key,
|
name: res.data[key]
|
}));
|
// 尝试根据id查找，id可能是字符串或数字
|
const ilkId = String(_this.business.ilk);
|
_this.selectedIlk = _this.ilkList.find(item => item.id ===
|
ilkId) || {};
|
}
|
})
|
}
|
}
|
// 设置行业名称
|
if (this.business.industry_id) {
|
// 先等待行业列表加载完成再查找名称
|
if (this.industryList && this.industryList.length > 0) {
|
this.findIndustryName(this.industryList, this.business.industry_id);
|
} else {
|
// 如果行业列表还没加载完成，先获取列表再查找
|
this._post('plus.business.industry/getIndustryTree', {}, res => {
|
if (res.data) {
|
_this.industryList = res.data.tree;
|
_this.findIndustryName(_this.industryList, _this.business
|
.industry_id);
|
}
|
})
|
}
|
}
|
|
// 设置地区显示值
|
if (this.business.region && this.business.region.province) {
|
let region = this.business.region;
|
this.selectCity = `${region.province} ${region.city} ${region.region}`;
|
}
|
|
this.getTemplate();
|
|
}
|
})
|
},
|
add(e) {
|
let formDate = e.detail.value;
|
formDate.template_id = this.template_id;
|
/* formDate.unit=this.business.unit;
|
formDate.duties=this.business.duties;
|
formDate.address=this.business.address; */
|
console.log(formDate);
|
let url = 'plus.business.business/add'
|
if (this.business_card_id) {
|
url = 'plus.business.business/edit'
|
Object.assign(formDate, {
|
business_card_id: this.business_card_id,
|
})
|
}
|
this._post(url, formDate, res => {
|
this.showSuccess(res.msg, res => {
|
uni.navigateBack()
|
})
|
})
|
},
|
radioChange(e) {
|
let templateList = this.templateList[e];
|
//style = JSON.parse(templateList.style);
|
this.template_id = templateList.template_id;
|
this.template_id = templateList.template_id;
|
this.templateIndex = e;
|
this.unit = templateList.style.unit;
|
this.positionNum = templateList.style.positionNum;
|
this.position = templateList.style.position;
|
this.avatar_display = templateList.style.avatar.display;
|
this.logo_display = templateList.style.logo.display;
|
this.is_business = templateList.style.is_business;
|
},
|
|
}
|
}
|
</script>
|
|
<style>
|
.lxfx {
|
height: 100rpx;
|
align-items: center;
|
display: flex;
|
border-bottom: #dce3ec 1rpx solid;
|
padding: 10rpx 0;
|
}
|
|
.mpxz {
|
width: 25%;
|
margin-right: 2%;
|
position: relative;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
height: 120rpx;
|
}
|
|
.zjc {
|
z-index: 2;
|
background-color: #0000008f;
|
height: 120rpx;
|
position: absolute;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 10rpx;
|
}
|
|
.mpxz-image {
|
height: 100rpx;
|
width: 93%;
|
border-radius: 10rpx;
|
}
|
|
.fds {
|
padding: 0rpx 20rpx;
|
background-color: #fff;
|
}
|
|
.toxian {
|
margin-top: 10rpx;
|
width: 170rpx;
|
height: 170rpx;
|
float: left;
|
}
|
|
.xinxx {
|
height: 50rpx;
|
margin-top: 17rpx;
|
}
|
|
.shurubiaoti {
|
width: 20%;
|
text-align: right;
|
display: inline-block;
|
line-height: 50rpx;
|
}
|
|
.shurunrr {
|
display: inline-block;
|
height: 50rpx;
|
width: calc(80% - 180rpx);
|
}
|
|
.shuruneirong {
|
display: flex;
|
line-height: 50rpx;
|
}
|
|
.biaoti {
|
color: #37bde6;
|
font-size: 40rpx;
|
padding: 20rpx 0rpx;
|
}
|
|
.logo {
|
height: 100rpx;
|
margin-left: 30rpx;
|
}
|
|
.lxfxbiaoti {
|
display: inline-block;
|
}
|
|
.lxfxnrr {
|
width: 80%;
|
display: inline-flex;
|
height: 100%;
|
}
|
|
.lxfxneirong {
|
height: 100%;
|
width: 100%;
|
}
|
|
.xzmc {
|
line-height: 50rpx;
|
}
|
|
.xz {
|
border: 1rpx solid #cbd4de;
|
width: 50%;
|
line-height: 50rpx;
|
text-align: center;
|
display: inline-block;
|
color: #777b80;
|
}
|
|
.scroll-mpmb {
|
height: 1000rpx;
|
margin-top: 20rpx;
|
}
|
|
.tup {
|
height: 450rpx;
|
width: 90%;
|
border-radius: 30rpx;
|
}
|
|
.picker-content {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 100rpx;
|
color: #333;
|
}
|
|
.anu {
|
position: fixed;
|
bottom: 0rpx;
|
width: 100%;
|
padding: 10rpx 0rpx;
|
background-color: #fff;
|
z-index: 99;
|
}
|
|
.tijiao {
|
width: 30%;
|
background-color: #37bde6;
|
margin-left: 35%;
|
color: #fff;
|
}
|
|
.industry-popup {
|
padding: 20rpx;
|
}
|
|
.industry-title {
|
text-align: center;
|
font-size: 36rpx;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
color: #37bde6;
|
}
|
|
.industry-item {
|
padding: 20rpx;
|
border-bottom: 1rpx solid #e5e5e5;
|
font-size: 32rpx;
|
}
|
|
.industry-item.selected {
|
color: #37bde6;
|
}
|
|
.industry-item:active {
|
background-color: #f5f5f5;
|
}
|
|
/* 子行业样式 */
|
.industry-child {
|
background-color: #f8f8f8;
|
}
|
|
.industry-child-item {
|
padding-left: 60rpx;
|
font-size: 30rpx;
|
color: #666;
|
}
|
</style>
|
