lshcomment 1.0.0

package/src/components/lsh-vehicle/lshCust.vue

@@ -0,0 +1,754 @@
+<template>
+	<div class="LSH-Cust">
+		<div class="row">
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="客户编码" label-cols="4">
+					<el-input disabled v-model.trim="queryParams.scvId"/>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="相关编号" label-cols="4">
+					<el-input disabled v-model.trim="queryParams.bpNum"/>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="客户类型*" label-cols="4">
+					<el-select
+						@change="handleChange"
+						@visible-change="handleVisibleChange"
+						v-model="queryParams.custType">
+						<el-option
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							v-for="item in customTypeList"/>
+					</el-select>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="移动电话*" label-cols="4" style="position: relative;">
+					<el-autocomplete
+						:disabled="isEdit"
+						:fetch-suggestions="querySearch"
+						:maxlength="11"
+						:trigger-on-focus="false"
+						@keyup.native="numberKeyup"
+						@select="handleSelect"
+						class="inline-input"
+						placeholder="请输入手机号"
+						v-model="queryParams.contactPhoneNo">
+					</el-autocomplete>
+				</b-form-fieldset>
+			</div>
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="客户姓名*" label-cols="4">
+					<el-input :disabled="isEdit" v-model.trim="queryParams.customerName"/>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="称谓*" label-cols="4">
+					<el-select placeholder="" v-model="queryParams.customerGender">
+						<el-option
+							:disabled="(companyFlag && !item.refDetailRemark) || (!companyFlag && !!item.refDetailRemark)"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							v-for="item in genderTypeList"/>
+					</el-select>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="国籍/地区*" label-cols="4">
+					<!-- <el-input v-model.trim="queryParams.customerCountry" /> -->
+					<el-select placeholder="" v-model="queryParams.customerCountryCode">
+						<el-option
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							v-for="item in customerCountryList"/>
+					</el-select>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="证件类型" label-cols="4">
+					<el-select v-model="queryParams.customerIdTypeCode">
+						<el-option
+							:disabled="(companyFlag && !item.refDetailRemark) || (!companyFlag && !!item.refDetailRemark)"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							v-for="item in CertificateTypeList"/>
+					</el-select>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="证件号" label-cols="4">
+					<el-input v-model.trim="queryParams.customerIdNo" />
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="生日" label-cols="4">
+					<el-date-picker
+						:picker-options="pickerOptions0"
+						placeholder="选择日期"
+						type="date"
+						v-model="queryParams.customerBirthDate">
+					</el-date-picker>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="邮箱" label-cols="4">
+					<el-input v-model.trim="queryParams.customerMail" />
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="学历" label-cols="4">
+					<el-input v-model.trim="queryParams.customerEducation" />
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="省" label-cols="4">
+					<el-select @change="selectProvince" placeholder="" v-model="queryParams.addressProvinceCode">
+						<el-option
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							v-for="item in provinceList"/>
+					</el-select>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="市" label-cols="4">
+					<el-select @change="selectCity" placeholder="" v-model="queryParams.addressCityCode">
+						<el-option
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							v-for="item in cityList"/>
+					</el-select>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="区" label-cols="4">
+					<el-select placeholder="" v-model="queryParams.addressRegionCode">
+						<el-option
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							v-for="item in direectList"/>
+					</el-select>
+				</b-form-fieldset>
+			</div>
+
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="详细地址" label-cols="4">
+					<el-input v-model.trim="queryParams.addressDetail" />
+				</b-form-fieldset>
+			</div>
+			<!-- 客户档案单独加的字段明细 -->
+			<!-- <slot name="custom-add"></slot> -->
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="其他电话1" label-cols="4">
+					<el-input v-model.trim="queryParams.otherPhoneNoOne"/>
+				</b-form-fieldset>
+			</div>
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="其他电话2" label-cols="4">
+					<el-input v-model.trim="queryParams.otherPhoneNoTwo"/>
+				</b-form-fieldset>
+			</div>
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="其他电话3" label-cols="4">
+					<el-input v-model.trim="queryParams.otherPhoneNoThree"/>
+				</b-form-fieldset>
+			</div>
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="是否本店" label-cols="4">
+					<!-- <el-select
+					  v-model="queryParams.custType">
+					  <el-option
+						v-for="item in customTypeList"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value"/>
+					</el-select> -->
+					<el-input :value="queryParams.storeCode ? '是':'否'" disabled/>
+				</b-form-fieldset>
+			</div>
+			<div class="col-md-4">
+				<b-form-fieldset class="text-right" horizontal label="SAP手机号" label-cols="4">
+					<!-- <el-select
+					  v-model="queryParams.sapPhoneNo">
+					  <el-option
+						v-for="item in customTypeList"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value"/>
+					</el-select> -->
+					<el-input disabled v-model.trim="queryParams.sapPhoneNo"/>
+				</b-form-fieldset>
+			</div>
+		</div>
+
+		<div class="f-tar">
+				<b-button v-if="showChange" @click="checkAuthCustomerInfo('changeMaster')" size="sm" variant="success">车主变更</b-button>
+				<b-button @click="cancel" size="sm" variant="default">取消</b-button>
+				<b-button @click="checkAuthCustomerInfo('preserve')" size="sm" variant="primary">保存</b-button>
+		</div>
+
+    <EleDialog title="客户信息更正" ref="EleDialog" showFooter customFooter :modalAppendToBody="false" :modal="false">
+			<p>该手机号码的个人客户已经完成实名制，信息如下：</p>
+      <p>姓名：{{ custInfo.userName }}</p>
+      <p>证件号：{{ custInfo.certNo }}</p>
+      <p>是否使用正确的客户更新进行保存？</p>
+			<div slot="footer">
+				<el-button type="primary" @click="checkAuthCustomerInfoCancel">取消</el-button>
+				<el-button type="primary" @click="checkAuthCustomerInfoConfirm">确定</el-button>
+			</div>
+		</EleDialog>
+	</div>
+</template>
+
+<script>
+	import {showBtn} from 'common/api-common'
+	import {
+		ORDER_CHANGE_MASTER
+	} from 'common/resource-btn.js'
+	import api from 'common/api'
+	import {
+		LSH_GENDER_TYPE,
+		LSH_CUSTOM_TYPE,
+		LSH_CERTIFICATE_TYPE,
+		NATIONA_LITY_REGION
+	} from 'common/ref-code'
+
+	import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+	export default {
+		props: {
+			custVo: {
+				type: Object,
+				default: () => { return {} },
+			},
+			bindFlag: {
+				type: Boolean,
+				default: false
+			},
+			isEdit: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				queryParams: {
+					contactPhoneNo: '',
+					scvId:'',
+					customerIdTypeCode: 'ID',
+					customerCountryCode: 'CHN'
+				},
+				addressCode: {},
+				purchaseOrderTypeList: [],
+				genderTypeList: [],
+				customTypeList: [],
+				CertificateTypeList: [],
+				// 省
+				provinceList: [],
+				// 市
+				cityList: [],
+				// 区
+				direectList: [],
+				chooseList: [],
+				pickerOptions0: {
+					disabledDate(time) {
+						return time.getTime() > Date.now()
+					}
+				},
+				customerCountryList:[],
+				companyFlag: false,
+				visbileFlag: false,
+        btnType: '',
+        custInfo: {},
+			}
+		},
+
+		watch: {
+			custVo: {
+				async handler(newName, oldName) {
+					console.log(0, newName)
+					if (JSON.stringify(newName) === '{}') return
+					this.queryParams = JSON.parse(JSON.stringify(newName)) || {}
+					// 实时更新用户信息
+					this.querySearch(this.queryParams.contactPhoneNo)
+					!this.queryParams.bpNum && (this.queryParams.bpNum = '')
+
+					this.queryByMobile()
+				},
+				immediate: true
+			},
+			'queryParams.contactPhoneNo': {
+			  handler: function() {
+			    this.querySearch()
+			  },
+			}
+		},
+
+		async created() {
+			this.queryRef({refCode: LSH_GENDER_TYPE}, 'genderTypeList', false)
+			this.queryRef({refCode: LSH_CUSTOM_TYPE}, 'customTypeList', false)
+			this.queryRef({refCode: LSH_CERTIFICATE_TYPE}, 'CertificateTypeList', false)
+			this.queryRef({refCode:'NationalityRegion'}, 'customerCountryList', false)
+			await this.init()
+			// this.getType()
+		},
+
+		computed: {
+			showChange() {
+				// return showBtn(ORDER_CHANGE_MASTER)
+				if(!this.global.userInfo.carBindingBusinessSet || !this.global.userInfo.carBindingBusinessSet.length) return false;
+				if(process.env.NODE_ENV === 'development') {
+					const list = this.global.userInfo.carBindingBusinessSet.map(item => item.slice(1)).map(item => item.slice(item.indexOf('/')))
+					return list.includes(location.pathname)
+				} else {
+					return this.global.userInfo.carBindingBusinessSet.includes(location.pathname)
+				}
+			},
+			...mapState('customerPortrayal', [
+				'customerPhoneNo',
+				'portrayalVisible'
+			])
+		},
+
+		methods: {
+			...mapActions({
+				saveScvId: 'customerPortrayal/getScvIdSave',
+				savePhoneNo: 'customerPortrayal/getCustomerPhoneNo',
+				savePortrayalVisible: 'customerPortrayal/getPortrayalVisible'
+			}),
+
+			init() {
+				this.querychinaarea({levels: 1})
+				// this.queryByMobile()
+			},
+			queryByMobile(){
+				if (this.custVo && this.custVo.contactPhoneNo && this.custVo.contactPhoneNo.length === 11) {
+					api.liApi.custVehcile.getCustByPhoneName({contactPhoneNo: this.custVo.contactPhoneNo, pageStart: 1, pageNums: 1000}, res => {
+						if (res && res.data.code === 'success') {
+							// if (res.data.obj && res.data.obj.length > 0) {
+							// 	const { customerGender,custType,customerCountryCode,customerIdTypeCode } = res.data.obj[0]
+							// 	this.$set(this.queryParams, 'customerGender', customerGender || '')
+							// 	this.$set(this.queryParams, 'custType', custType || '')
+							// 	this.$set(this.queryParams, 'customerCountryCode', customerCountryCode || '')
+							// 	this.$set(this.queryParams, 'customerIdTypeCode', customerIdTypeCode || '')
+							// }
+              this.queryParams = res.data.obj[0] || {};
+						}
+					})
+				}
+			},
+
+			/**
+			 * @desc 手机号下拉查询
+			 */
+			querySearch(val, cb = ()=>{}) {
+				if (val.length === 11) {
+					api.liApi.custVehcile.getCustByPhoneName({contactPhoneNo: val, pageStart: 1, pageNums: 1000}, res => {
+						if (res && res.data.code === 'success') {
+							if (res.data.obj && res.data.obj.length > 0) {
+								let list = res.data.obj.map((item, index) => {
+									return {
+										value: `${item.contactPhoneNo} ${item.customerName}`,
+										label: item.contactPhoneNo,
+										index: index
+									}
+								})
+								this.chooseList = res.data.obj
+                cb(list, res.data.obj);
+								// 回显
+								// this.queryParams = res.data.obj[0]
+							} else {
+								this.queryParams = {
+									contactPhoneNo: val,
+									customerIdTypeCode: 'ID',
+									customerCountryCode: 'CHN'
+								}
+								cb([])
+							}
+						}
+					})
+				} else {
+					cb([])
+				}
+			},
+
+
+
+			/**
+			 * @desc 手机号选择
+			 */
+			handleSelect(item) {
+				// console.log('test:>选择', item)
+				this.queryParams = this.chooseList[item.index]
+				!this.queryParams.bpNum && (this.queryParams.bpNum = '')
+				// this.$emit('selectPhone', this.queryParams)
+			},
+
+
+			/**
+			 * @desc 保存
+			 */
+			save(){
+				console.log('test:>watch', this.$watch)
+				if (!this.queryParams.custType) {
+					this.$message({
+						message: '请选择客户类型',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.contactPhoneNo) {
+					this.$message({
+						message: '请输入移动电话',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerName) {
+					this.$message({
+						message: '请输入客户姓名',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerGender) {
+					this.$message({
+						message: '请选择称谓',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerCountryCode) {
+					this.$message({
+						message: '请选择国家/地区',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (this.bindFlag) {
+
+					this.$emit('save', this.queryParams)
+					return
+				}
+
+				const params = {
+					saveFrom: 0,
+					custVo: this.queryParams,
+				}
+				api.liApi.custVehcile.setCustVehicle(params, res => {
+					if (res && res.data.code === 'success') {
+						this.$emit('preserve', res.data.obj.custVo)
+						this.$message({
+							message: '保存成功',
+							type: 'success'
+						})
+
+						// 解决保存后 loading一直转圈的问题
+						// setTimeout(function(){
+						//   window.location.reload()
+						// }, 1000)
+					}
+				})
+			},
+			preserve() {
+        const params = {
+          saveFrom: 0,
+          custVo: {
+            ...this.queryParams,
+            salesDate: undefined,
+            sapSyncTime: undefined,
+          },
+          relationList: [{
+            vinNo: this.custVo.frameNo,
+            finNo: this.custVo.vehicleNo,
+            plateNumber: this.custVo.plateNumber,
+            custName: this.queryParams.customerName,
+            custPhone: this.queryParams.contactPhoneNo,
+            relationType: 0,
+            scvId: this.queryParams.scvId,
+            state: 0,
+          }],
+        }
+        api.liApi.custVehcile.setCustVehicle(params, res => {
+          if (res && res.data.code === 'success') {
+						const { custVo } = res.data.obj || {}
+						if(this.global.prefix == '/sflivecs'){
+							if(this.chooseList && this.chooseList.length){
+								this.insertOrUpdateCustomInfoSF(custVo)
+							} else {
+								this.querySearch(this.queryParams.contactPhoneNo, () => {
+									this.insertOrUpdateCustomInfoSF(custVo)
+								})
+							}
+						} else {
+							this.$message.success('保存成功')
+							this.$refs.EleDialog.visible = false
+							this.$emit('preserve', custVo)
+						}
+          }
+          if(res && res.data.code === 'carIsBind'){
+						this.$refs.EleDialog.visible = false
+            this.$message({
+              message:'该车已绑定多个车主，请点击车主变更进行车主变更',
+              type: 'warning'
+            })
+          }
+        })
+			},
+			insertOrUpdateCustomInfoSF(custVo){
+				this.chooseList[0].customType=this.chooseList[0].custType
+				api.liApi.custVehcile.insertOrUpdateCustomInfoSF({
+					...this.chooseList[0],
+					dealerCode:this.global.userInfo.userAvailableInfo.storeInfoVo.dealerCode,
+				}, res => {
+						if (res && res.data.code === 'success') {
+							this.$message.success('保存成功')
+							this.$refs.EleDialog.visible = false
+							this.$emit('preserve', custVo)
+						}
+					})
+			},
+			// 变更车主
+			changeMaster(){
+        const params = {
+          saveFrom: 0,
+          custVo: {
+            ...this.queryParams,
+            salesDate: undefined,
+            sapSyncTime: undefined,
+          },
+          relationList: [{
+            vinNo: this.custVo.frameNo,
+            finNo: this.custVo.vehicleNo,
+            plateNumber: this.custVo.plateNumber,
+            custName: this.queryParams.customerName,
+            custPhone: this.queryParams.contactPhoneNo,
+            relationType: 0,
+            scvId: this.queryParams.scvId,
+            state: 0,
+          }],
+        }
+        api.liApi.custVehcile.setCustVehicle(params, res => {
+          if (res && res.data.code === 'success') {
+            this.$message.success('操作成功')
+						this.$refs.EleDialog.visible = false
+            this.$emit('changeMaster', this.queryParams)
+          }
+          if(res && res.data.code === 'carIsBind'){
+            const {custName, custPhone} = res.data.obj;
+            const {customerName, contactPhoneNo} = params.custVo;
+            let msg = `该车现车主为${custName}、手机号${custPhone}，确定要更换为车主${customerName}、手机号${contactPhoneNo}?`;
+            this.$confirm(msg, '', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              params.force = true;
+              api.liApi.custVehcile.setCustVehicle(params, res => {
+                if (res && res.data.code === 'success') {
+                  this.$message.success('操作成功')
+									this.$refs.EleDialog.visible = false
+                  this.$emit('changeMaster', this.queryParams)
+                }
+              })
+            })
+          }
+        })
+			},
+
+
+			/**
+			 * @desc 取消
+			 */
+			cancel() {
+				console.log('点击了cancel')
+				this.$emit('cancel')
+				// this.$parent.cancel()
+			},
+
+
+			/**
+			 * @desc 客户类型修改
+			 */
+			handleChange(item) {
+				if (!this.visbileFlag) return
+				this.companyFlag = item === 'customTypeGroupCus' ? true : false
+				this.$set(this.queryParams, 'customerIdTypeCode', '')
+				this.$set(this.queryParams, 'customerGender', '')
+			},
+
+			handleVisibleChange(val) {
+				this.visbileFlag = val
+			},
+
+			/**
+			 * @desc 选择省 => 市
+			 */
+			selectProvince(val) {
+				if (!val) return
+				const params = { levels: 2, fatherAreaCode: val }
+				this.querychinaarea(params)
+			},
+
+
+			/**
+			 * @desc 选择市 => 区
+			 */
+			selectCity(val) {
+				if (!val) return
+				const params = { levels: 3, fatherAreaCode: val }
+				this.querychinaarea(params)
+			},
+
+
+			/**
+			 * @desc 省市区
+			 */
+			querychinaarea(params) {
+				// console.log('test:>params', params)
+				// console.log('test:>this', this.queryParams)
+
+				api.chinaarea.querychinaarea(params, res => {
+					if (res && res.data.code == 'success') {
+
+						const list = res.data.obj || []
+						const target = list.map(({ areaName: label, areaCode: value }) => ({ label, value }))
+
+						if (params.levels == 1) {
+							this.provinceList = target
+							this.cityList = []
+							this.direectList = []
+						}
+
+						if (params.levels == 2) {
+							this.cityList = target
+							this.direectList = []
+							// this.queryParams.addressCityCode = ''
+							// this.queryParams.addressRegionCode = ''
+							this.queryParams = JSON.parse(JSON.stringify(this.queryParams))
+						}
+
+						if (params.levels == 3) {
+							this.direectList = target
+							// this.queryParams.addressRegionCode = ''
+							this.queryParams = JSON.parse(JSON.stringify(this.queryParams))
+						}
+					}
+				})
+			},
+
+
+			/**
+			 * @desc 查询数字字典
+			 */
+			queryRef(params, key, flag) {
+				api.ref.getDataDictionarys(params, res => {
+					if (res && res.data.code == 'success') {
+						const Vo = res.data.obj || {}
+						const list  = Vo.referenceDetailInfos || []
+						this[key] = list.map(({ refDetailName: label, refDetailCode: value, refDetailRemark }) => ({ label, value, refDetailRemark }))
+						flag && (this[key] = [{label: '全部', value: ''}, ..._list])
+						// console.log(`test:>${key}`, this[key])
+					}
+				})
+			},
+
+			numberKeyup(e) {
+				e.target.value = e.target.value.replace(/[^\d]/g,'')
+			},
+
+			letPortrayalVisible() {
+				if(!this.queryParams.contactPhoneNo && !this.portrayalVisible) {
+					this.$message({
+						type: 'warning',
+						message: '请输入手机号'
+					})
+					return
+				}
+				this.saveScvId(this.queryParams.scvId)
+				this.savePhoneNo(this.queryParams.contactPhoneNo)
+				this.savePortrayalVisible(!this.portrayalVisible)
+			},
+      // 客户实名制校验
+			checkAuthCustomerInfo(type){
+				this.btnType = type
+				if (!this.queryParams.custType) return this.$message.warning('请选择客户类型')
+				if (!this.queryParams.contactPhoneNo) return this.$message.warning('请输入移动电话')
+				if (!this.queryParams.customerName) return this.$message.warning('请输入客户姓名')
+				if (!this.queryParams.customerGender) return this.$message.warning('请选择称谓')
+				if (!this.queryParams.customerCountryCode) return this.$message.warning('请选择国家/地区')
+				// 个人客户点击保存后校验实名制关系
+				if (this.queryParams.custType == 'customTypeIndividualCus'){
+					this.global.post(this.global.isdev + '/v1/ecep/customer/checkAuthCustomerInfo', {
+						certNo: this.queryParams.customerIdNo,
+						mobilePhone: this.queryParams.contactPhoneNo,
+						userName: this.queryParams.customerName,
+					}, (obj, res) => {
+						if(!res.data.obj) {
+							this[this.btnType]()
+						} else {
+							this.custInfo = obj
+							this.$refs.EleDialog.visible = true
+						}
+					})
+				} else {
+					this[type]()
+				}
+			},
+			checkAuthCustomerInfoConfirm(){
+				this.queryParams.customerName = this.custInfo.userName
+				this.queryParams.customerIdNo = this.custInfo.certNo
+				this[this.btnType]()
+			},
+			checkAuthCustomerInfoCancel(){
+				this.$refs.EleDialog.visible = false
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.LSH-Cust {
+		.el-select {
+			width: 100%;
+		}
+		.el-autocomplete {
+			width: 100%;
+		}
+		.portrayal-icon {
+			cursor: pointer;
+			z-index: 1;
+			img {
+				width: 24px;
+				height: 19px;
+			}
+		}
+	}
+
+</style>