<!--
* @Description: 附件信息
* @Author: your name
* @Date: 2019-09-20 09:35:11
* @LastEditTime: 2019-12-13 16:15:32
* @LastEditors: Please set LastEditors
-->
<template>
<h-view id="enclosure" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn" @click="$routeGo()">
<img src="@/assets/userBind/arrow.png">
<span>附件信息</span>
</div>
</h-header>
<h-content>
<div v-for="(list, index) in cddItemList" :key="index" class="card2">
<span>{{ list.description }}</span>
<div class="img-content">
<!-- 房产 -->
<div v-if="list.cdd_item==='HOUSE_CARD'">
<div v-if="!houseImg" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
<img src="@/assets/userBind/camera.png" class="upload-btn" >
</div>
<!-- 通过 -->
<div v-if="houseImg&&isApproved" class="card-upload">
<img :src="houseImg" @click="showBigPicture(houseImg)">
</div>
<!-- 未通过 -->
<div v-if="houseImg&&!isApproved" class="card-upload">
<img :src="houseImg" @click="ocrShow(list.cdd_item, '')">
</div>
</div>
<div v-if="list.cdd_item==='HOUSE_CARD'">
<list-item :item-height="44" class="card-Info">
<item>
<div slot="name">房屋所有权人</div>
<input
slot="content"
v-model="hauseInfo.house_owner"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">共有情况</div>
<input
slot="content"
v-model="hauseInfo.public_situation"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">房屋坐落</div>
<input
slot="content"
v-model="hauseInfo.house_located"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">登记时间</div>
<input
slot="content"
v-model="hauseInfo.regist_date"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">房屋性质</div>
<input
slot="content"
v-model="hauseInfo.house_property"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">规划用途</div>
<input
slot="content"
v-model="hauseInfo.plan_purpose"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">总层数</div>
<input
slot="content"
v-model="hauseInfo.house_layers"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">建筑面积</div>
<input
slot="content"
v-model="hauseInfo.built_area"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">套内建筑面积</div>
<input
slot="content"
v-model="hauseInfo.built_in_area"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">其他</div>
<input slot="content" v-model="hauseInfo.others" placeholder="识别房产证自动填充" >
</item>
<item>
<div slot="name">地号</div>
<input
slot="content"
v-model="hauseInfo.land_number"
placeholder="识别房产证自动填充"
>
</item>
<item :proportion="[1,1]">
<div slot="name">土地使用权取得方式</div>
<input
slot="content"
v-model="hauseInfo.land_get_method"
placeholder="识别房产证自动填充"
>
</item>
<item>
<div slot="name">土地使用年限</div>
<input
slot="content"
v-model="hauseInfo.land_use_limit"
placeholder="识别房产证自动填充"
>
</item>
</list-item>
</div>
<!-- 车辆 -->
<div v-if="list.cdd_item==='CAR_CARD'">
<div v-if="!carImg" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
<img src="@/assets/userBind/camera.png" class="upload-btn" >
</div>
<!-- 通过 -->
<div v-if="carImg&&isApproved" class="card-upload">
<img :src="carImg" @click="showBigPicture(carImg)">
</div>
<!-- 未通过 -->
<div v-if="carImg&&!isApproved" class="card-upload">
<img :src="carImg" @click="ocrShow(list.cdd_item, '')">
</div>
</div>
<div v-if="list.cdd_item==='CAR_CARD'">
<list-item :item-height="44" class="card-Info">
<item>
<div slot="name">车辆识别代号</div>
<input
slot="content"
v-model="carInfo.vehicle_identify_num"
readonly
placeholder="识别行驶证自动填充"
>
</item>
<item>
<div slot="name">住址</div>
<input slot="content" v-model="carInfo.address" readonly placeholder="识别行驶证自动填充" >
</item>
<item>
<div slot="name">品牌型号</div>
<input
slot="content"
v-model="carInfo.brand_model_number"
readonly
placeholder="识别行驶证自动填充"
>
</item>
<item>
<div slot="name">发证日期"</div>
<input slot="content" v-model="carInfo.start_date" readonly placeholder="识别行驶证自动填充" >
</item>
<item>
<div slot="name">车辆类型</div>
<input
slot="content"
v-model="carInfo.vehicle_type"
readonly
placeholder="识别行驶证自动填充"
>
</item>
<item>
<div slot="name">所有人</div>
<input slot="content" v-model="carInfo.owner" readonly placeholder="识别行驶证自动填充" >
</item>
<item>
<div slot="name">使用性质</div>
<input slot="content" v-model="carInfo.use_nature" readonly placeholder="识别行驶证自动填充" >
</item>
<item>
<div slot="name">发动机号码</div>
<input
slot="content"
v-model="carInfo.engine_number"
readonly
placeholder="识别行驶证自动填充"
>
</item>
<item>
<div slot="name">号牌号码</div>
<input
slot="content"
v-model="carInfo.plate_number"
readonly
placeholder="识别行驶证自动填充"
>
</item>
<item>
<div slot="name">注册日期</div>
<input
slot="content"
v-model="carInfo.regist_date"
readonly
placeholder="识别行驶证自动填充"
>
</item>
</list-item>
</div>
<!-- 其他 -->
<div v-if="list.cdd_item==='ASSETS_CARD'">
<!--待上传图片列表-->
<div
v-for="(item, index) in upload_list"
v-if="item.check_id==list.check_id"
:key="index"
class="card-upload"
>
<img :src="item.picture" @click="showBigPicture(item.picture)" >
<div class="close" @click="remove_pic(item.attachment_id,index)">
<img src="@/assets/userBind/deleteIcon.png" >
</div>
</div>
<!--从服务器上下载的图片-->
<div v-for="(pic, index) in dowload_list[0]" :key="index">
<div v-if="pic.check_id==list.check_id" :key="index" class="card-upload">
<img :src="pic.url" @click="showBigPicture(pic.url)" >
<div class="close" @click="delete_pic(pic.attachment_id)">
<img src="@/assets/userBind/deleteIcon.png" >
</div>
</div>
</div>
<div class="card-upload plus" @click="imgUploadShow(list.description,list.check_id)">
<img src="@/assets/userBind/camera.png" class="upload-btn" >
</div>
</div>
</div>
</div>
<!-- </div> -->
</h-content>
<bottom-tab class="footer-button">
<tab-button class="save" @click.native="verified">下一步</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
data () {
return {
house_id: '', // 房产证checkid
car_id: '', // 车辆证checkid
carFlag: false, // 行驶证查看标识，为false则用查询出来的，为true则用拍照出来的
houseFlag: false, // 房产证查看标识，为false则用查询出来的，为true则用拍照出来的
carImg: '',
houseImg: '',
from: false,
bp_id: '',
flag: false,
isApproved: false,
isUploadCar: false,
isUploadHouse: false,
carAttachmentId: '', // 车辆证id
houseAttachmentId: '', // 房产证id
cddItemList: [], // 资料清单列表
dowload_list: [], // 下载图片列表
upload_list: [], // 上传图片列表
carInfo: {
bp_id: this.$route.params.bp_id,
vehicle_identify_num: '',
address: '',
brand_model_number: '',
start_date: '',
vehicle_type: '',
owner: '',
use_nature: '',
engine_number: '',
plate_number: '',
regist_date: '',
words_result_num: '',
success: '',
},
hauseInfo: {
bp_id: this.$route.params.bp_id,
house_owner: '',
public_situation: '',
house_located: '',
regist_date: '',
house_property: '',
plan_purpose: '',
house_layers: '',
built_area: '',
built_in_area: '',
others: '',
land_number: '',
land_get_method: '',
land_use_limit: '',
},
}
},
watch: {},
beforeRouteEnter (to, from, next) {
next(vm => {
if (from.name === 'Invoice') {
vm.upload_list = [] // 上传图片列表
vm.dowload_list = []
vm.cddItemList = []
vm.isApproved = window.localStorage.isApproved
vm.bp_id = vm.$route.params.bp_id
vm.loadItemList()
vm.houseQuery()
vm.carQuery()
}
})
},
created () {},
methods: {
// 房产证信息查询
houseQuery () {
let vm = this
let url = process.env.basePath + 'bp_house_info_query'
let param = {
bp_id: vm.bp_id,
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
Object.assign(vm.hauseInfo, res.info)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 行驶证信息查询
carQuery () {
let vm = this
let url = process.env.basePath + 'bp_vehicleLicense_query'
let param = {
bp_id: vm.bp_id,
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
Object.assign(vm.carInfo, res.info)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 行驶证信息保存
saveCarInfo () {
let vm = this
let url = process.env.basePath + 'bp_vehicleLicense_save'
let param = {
master: vm.carInfo,
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.$router.push({
name: 'BankInfo',
params: {
bp_id: vm.bp_id,
},
})
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 房产证信息保存
saveHouseInfo () {
let vm = this
let url = process.env.basePath + 'bp_house_info_save'
let param = {
master: vm.hauseInfo,
}
// hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
// vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.saveCarInfo()
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
verified () {
let vm = this
if (vm.isUploadHouse) {
vm.houseFlag = true
vm.delete_pic_to_ocr(vm.houseAttachmentId) // 房产证修改，重新上传
let list = []
let obj = {
pkvalue: vm.house_id,
source_type: 'PRJ_CDD_ITEM_CHECK',
picture: '',
check_id: vm.house_id,
filePath: vm.houseImg,
attachment_id: '',
user_id: 1,
fileName: '房产证',
}
list.push(obj)
vm.save_picture(list)
vm.isUploadHouse = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
}
if (vm.isUploadCar) {
vm.carFlag = true
vm.delete_pic_to_ocr(vm.carAttachmentId) // 房产证修改，重新上传
let list = []
let obj = {
pkvalue: vm.car_id,
source_type: 'PRJ_CDD_ITEM_CHECK',
picture: '',
check_id: vm.car_id,
filePath: vm.carImg,
attachment_id: '',
user_id: 1,
fileName: '行驶证',
}
list.push(obj)
vm.save_picture(list)
vm.isUploadCar = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
}
vm.saveHouseInfo()
},
// 房产证/车辆证识别
ocrShow (ocrType, type) {
let vm = this
hlsPopup.showActionSheet({
titleText: '请选择照片',
buttonArray: ['拍照', '从相册取'],
callback: index => {
if (index === 0) {
vm.openCamera(ocrType, type)
} else {
vm.takePicture(ocrType, type)
}
},
})
},
openCamera (ocrType, type) {
let vm = this
let cameraoptions = {
quality: 60,
width: 1843,
height: 1382,
}
let success = function (imgdata) {
if (!imgdata) {
hlsPopup.showLongCenter('请拍照')
} else {
if (ocrType === 'HOUSE_CARD') {
vm.isUploadHouse = true
vm.houseImg = imgdata
vm.houseCardIdentify(imgdata)
} else if (ocrType === 'CAR_CARD') {
vm.isUploadCar = true
vm.carImg = imgdata
vm.carCardIdentify(imgdata)
}
}
}
let error = function () {
hlsPopup.showLongCenter('请拍照')
}
hlsUtil.openCamera(cameraoptions, success, error)
},
takePicture (ocrType, type) {
let vm = this
var cameraoptions = {
quality: 70,
width: 1843,
height: 1382,
maxCount: 1,
}
let success = function (imgUrl) {
if (imgUrl.length === 0) {
hlsPopup.showLongCenter('请选择一张图片')
} else {
if (ocrType === 'HOUSE_CARD') {
vm.houseImg = imgUrl[0]
vm.isUploadHouse = true
vm.houseCardIdentify(imgUrl[0])
} else if (ocrType === 'CAR_CARD') {
vm.carImg = imgUrl[0]
vm.isUploadCar = true
vm.carCardIdentify(imgUrl[0])
}
}
}
let error = function () {
hlsPopup.showLongCenter(error)
}
vm.hlsUtil.takePicture(cameraoptions, success, error)
},
// 房产证识别
houseCardIdentify (fileUrl) {
let vm = this
hlsPopup.showLoading('正在识别')
let url = process.env.ocrPath + '/baidu/ocr/house'
hlsUtil.baiduOcr(fileUrl, url, function (res) {
hlsPopup.hideLoading()
let result = res.result.data
vm.hauseInfo.house_owner = result.house_owner.word
vm.hauseInfo.public_situation = result.public_situation.word
vm.hauseInfo.house_located = result.house_located.word
vm.hauseInfo.regist_date = result.regist_date.word
vm.hauseInfo.house_property = result.house_property.word
vm.hauseInfo.plan_purpose = result.plan_purpose.word
vm.hauseInfo.house_layers = result.house_layers.word
vm.hauseInfo.built_area = result.built_area.word
vm.hauseInfo.built_in_area = result.built_in_area.word
vm.hauseInfo.others = result.others.word
vm.hauseInfo.land_number = result.land_number.word
vm.hauseInfo.land_get_method = result.land_get_method.word
vm.hauseInfo.land_use_limit = result.land_use_limit.word
})
},
// 行驶证识别
carCardIdentify (fileUrl) {
let vm = this
hlsPopup.showLoading('正在识别')
let url = process.env.ocrPath + '/baidu/ocr/vehicleLicense'
hlsUtil.baiduOcr(fileUrl, url, function (res) {
hlsPopup.hideLoading()
let result = res.result.words_result
vm.carInfo.vehicle_identify_num = result.车辆识别代号.words
vm.carInfo.address = result.住址.words
vm.carInfo.brand_model_number = result.品牌型号.words
vm.carInfo.start_date = result.发证日期.words
vm.carInfo.vehicle_type = result.车辆类型.words
vm.carInfo.owner = result.所有人.words
vm.carInfo.use_nature = result.使用性质.words
vm.carInfo.engine_number = result.发动机号码.words
vm.carInfo.plate_number = result.号牌号码.words
vm.carInfo.regist_date = result.注册日期.words
vm.carInfo.words_result_num = res.result.words_result_num
vm.carInfo.success = res.success
})
},
loadItemList () {
let vm = this
let url = process.env.basePath + 'prj_cdd_check_list'
let param = {
master: {
'document_id': vm.bp_id,
'document_table': 'HLS_BP_MASTER',
'tab_group': window.localStorage.authFlag ? 'HLS_ORG_NAUTH' : 'HLS_ORG_AUTH',
},
}
vm.hlsHttp.post(url, param).then(function (res) {
if (res.result === 'S') {
vm.cddItemList = []
var listTemp = [...res.lists]
listTemp.forEach(item => {
switch (item.cdd_item) {
case 'HOUSE_CARD': // 房产证
vm.house_id = item.check_id
break
case 'CAR_CARD': // 行驶证
vm.car_id = item.check_id
break
default:
break
}
})
vm.cddItemList = res.lists.filter(item => { return item.cdd_item === 'HOUSE_CARD' || item.cdd_item === 'CAR_CARD' || item.cdd_item === 'ASSETS_CARD' })
// 查询图片
vm.cddItemList.forEach((item, index) => {
vm.load_picture(item.check_id, index, item.cdd_item)
})
}
})
},
load_picture (check_id, index, cdd_item) {
let vm = this
let url = process.env.basePath + 'attachment_list_query' + '&index' + index // 附件查询
let param = {
check_id: check_id,
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
res.lists.forEach(item => {
item['url'] = process.env.filePath + 'attachment_id=' + item.attachment_id + '&access_token=' + window.localStorage.access_token
})
switch (cdd_item) {
case 'HOUSE_CARD': // 房产证
if (!vm.houseFlag) {
vm.houseImg = res.lists[0].url
}
vm.houseAttachmentId = res.lists[0].attachment_id
break
case 'CAR_CARD': // 行驶证
if (!vm.carFlag) {
vm.carImg = res.lists[0].url
}
vm.carAttachmentId = res.lists[0].attachment_id
break
default:
vm.dowload_list.push(res.lists)
}
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 图片上传入口
imgUploadShow (description, check_id) {
let vm = this
hlsPopup.showActionSheet({
titleText: '请选择照片',
buttonArray: ['拍照', '从相册取'],
callback: index => {
if (index === 0) {
vm.imgUploadOpenCamera(description, check_id)
} else {
vm.imgUploadTakePicture(description, check_id)
}
},
})
},
imgUploadOpenCamera (description, check_id) {
let vm = this
let obj = {
'pkvalue': check_id,
'source_type': 'PRJ_CDD_ITEM_CHECK',
'picture': '',
'check_id': check_id,
'filePath': '',
'attachment_id': '',
'user_id': 1,
'fileName': description + '_' + new Date().getTime(),
}
let cameraoptions = {
quality: 100,
}
let success = function (imgdata) {
obj.picture = imgdata
obj.filePath = imgdata
let list = []
list.push(obj)
// 拍完一张立马执行保存图片逻辑
vm.save_picture(list)
}
let error = function () {
hlsPopup.showLongCenter('请拍照')
}
hlsUtil.openCamera(cameraoptions, success, error)
},
imgUploadTakePicture (description, check_id) {
let vm = this
let cameraoptions = {
quality: 100,
}
let success = function (imgUrl) {
var list = []
for (let i = 0; i < imgUrl.length; i++) {
let obj = {
'pkvalue': check_id,
'source_type': 'PRJ_CDD_ITEM_CHECK',
'picture': '',
'check_id': check_id,
'filePath': '',
'attachment_id': '',
'user_id': 1,
'fileName': description + '_' + new Date().getTime(),
}
obj.picture = imgUrl[i]
obj.filePath = imgUrl[i]
list.push(obj)
}
vm.save_picture(list)
}
let error = function () {
}
vm.hlsUtil.takePicture(cameraoptions, success, error)
},
// 查看大图
showBigPicture (pic) {
let vm = this
vm.hlsPopup.showBigPicture({
imgUrl: pic,
width: '100%',
})
},
// 移除图片
remove_pic (attachment_id, index) {
let vm = this
var delete_list = []
let obj = {'attachment_id': attachment_id}
delete_list.push(obj)
let url = process.env.basePath + 'app_delete_attment' // 附件删除
let param = {
'picturelist': delete_list,
}
hlsPopup.showLoading('请稍候')
vm.hlsHttp.post(url, param).then(function (res) {
hlsPopup.hideLoading()
if (res.result === 'S') {
hlsPopup.showLongCenter('删除成功!')
vm.remove_upload_list(attachment_id, index)
} else if (res.result === 'E') {
hlsPopup.showShortCenter(res.message)
}
})
},
remove_upload_list (attachment_id, index) {
let vm = this
vm.upload_list.remove(index)
vm.upload_list.sort()
},
// 删除图片
delete_pic (attachment_id) {
let vm = this
var delete_list = []
let obj = {'attachment_id': attachment_id}
delete_list.push(obj)
let url = process.env.basePath + 'app_delete_attment' // 附件删除
let param = {
'picturelist': delete_list,
}
hlsPopup.showLoading('请稍候')
vm.hlsHttp.post(url, param).then(function (res) {
hlsPopup.hideLoading()
if (res.result === 'S') {
hlsPopup.showLongCenter('删除成功!')
vm.remove_dowload_list(attachment_id)
} else if (res.result === 'E') {
hlsPopup.showShortCenter(res.message)
}
})
},
remove_dowload_list (attachment_id) {
let vm = this
for (let i = 0; i < vm.dowload_list.length; i++) {
let list = vm.dowload_list[i]
for (let j = 0; j < list.length; j++) {
let li = list[j]
if (parseFloat(li.attachment_id) === parseFloat(attachment_id)) {
list.remove(j)
break
}
}
}
vm.dowload_list.sort()
},
// 图片保存
save_picture (list) {
let vm = this
if (list.length) {
// hlsPopup.showLoading('图片上传请稍候')
var alreadyUploadNum = 0
var attLength = 0
var recordUploadInterval = setInterval(function () {
if (alreadyUploadNum === attLength) {
clearInterval(recordUploadInterval)
/* hlsPopup.hideLoading()
hlsPopup.showLongCenter('图片上传成功') */
}
}, 500)
for (var i = 0; i < list.length; i++) {
let uploadSuccess = function (res) {
if (res.result === 'S') {
alreadyUploadNum++
for (var j = 0; j < list.length; j++) {
if (list[j].filePath === res.response.filePath) {
list[j].attachment_id = res.response.attachment_id
vm.upload_list.push(list[j])
break
}
}
} else {
hlsPopup.hideLoading()
}
}
if (!list[i].attachment_id) {
attLength++
hlsUtil.fileUploadSvc(list[i], uploadSuccess)
}
}
} else {
hlsPopup.hideLoading()
}
},
// 删除重新识别之前的图
delete_pic_to_ocr (attachment_id) {
let vm = this
var delete_list = []
let obj = { attachment_id: attachment_id }
delete_list.push(obj)
let url = process.env.basePath + 'app_delete_attment' // 附件删除
let param = {
picturelist: delete_list,
}
vm.hlsHttp.post(url, param).then(function (res) {
hlsPopup.hideLoading()
if (res.result === 'S') {
} else if (res.result === 'E') {
}
})
},
},
}
</script>
<style lang='less'>
#enclosure {
.footer-button {
padding-top: 15px;
padding-bottom: 15px;
}
.save {
width: 100%;
height: 45px;
color: #fff;
border-radius: 4px;
background-color: @headerColor;
}
.card2 {
padding-bottom: 8px;
height: auto;
background-color: #fff;
margin-bottom: 10px;
display: flex;
flex-direction: column;
span {
color: #656464;
font-size: 13px;
line-height: 18px;
padding-top: 8px;
display: block;
margin-left: 16px;
}
.img-content {
/* display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;*/
}
.plus {
display: flex;
justify-content: center;
align-items: center;
}
.card-upload {
position: relative;
width: 80px;
height: 80px;
border: 1px dashed #dcdcdd;
/* display: flex;
justify-content: center;
align-items: center;*/
margin-top: 12px;
margin-left: 16px;
float: left;
.close {
/* position: relative;
color: #F96F68;
margin-top: -100%;
margin-left: -10%;*/
position: absolute;
color: #F96F68;
top: -6px;
right: -6px;
img {
width: 14px;
height: 14px;
}
}
img {
/*width: 88px;
height: 88px;*/
width: 100%;
height: 100%;
}
.upload-btn {
width: 24px;
height: 24px;
}
}
}
.upload-id-card {
height: 122px;
background-color: #fff;
span {
display: block;
color: #656464;
margin-left: 16px;
padding-top: 16px;
font-size: 13px;
}
.upload-box1 {
width: 80px;
height: 80px;
border: 1px dashed #dcdcdd;
text-align: center;
margin-top: 8px;
margin-left: 16px;
.licenseBox {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img {
margin-top: 30px;
width: 25px;
height: 25px;
}
}
}
}
</style>