我的任务模块
parent
1ad1e983fd
commit
0662331260
@ -0,0 +1,748 @@
|
||||
<template>
|
||||
<div class="task-detail">
|
||||
<div class="nav-btn">
|
||||
<a-button type="primary">完成任务</a-button>
|
||||
<a-button type="primary">保存</a-button>
|
||||
<a-button type="primary">发送SI</a-button>
|
||||
<a-button type="primary">提单确认</a-button>
|
||||
<a-button type="primary">取消完成任务</a-button>
|
||||
<a-button type="primary">关闭</a-button>
|
||||
</div>
|
||||
<x-card>
|
||||
<div slot="content" style="padding-top:0;" class="mail-info">
|
||||
<div class="task-basic-box">
|
||||
<div class="label">
|
||||
<div class="title">提单号</div>
|
||||
<div class="msg">123456</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<div class="title">开船日期</div>
|
||||
<div class="msg">123456</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<div class="title">船名/航次</div>
|
||||
<div class="msg">123456</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-card>
|
||||
<div class="mailing-info">
|
||||
<x-card>
|
||||
<div slot="content" style="margin-top: -5px;" class="mail-info">
|
||||
<a-form-model :selfUpdate="true" ref="mailingFrom" :model="taskDetail">
|
||||
<a-row :gutter="10">
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="12">
|
||||
<a-form-model-item has-feedback prop="shipper" class="sender-label">
|
||||
<div class="sender">
|
||||
<div class="top"><div class="name"><span class="iconfont icon-bianji"></span>发货人</div></div>
|
||||
<div class="bottom">
|
||||
<a-textarea
|
||||
id="shipper-scroll"
|
||||
:defaultValue="taskDetail.shipper"
|
||||
v-model="showShipper"
|
||||
:auto-size="{ minRows: 2, maxRows: 5 }"
|
||||
style="height: 120px"
|
||||
@blur="textareaChange($event, 'shipper')"
|
||||
/>
|
||||
<div
|
||||
class="line-count"
|
||||
id="shipper-scroll-right"
|
||||
v-if="Object.keys(taskDetail).length > 1 && taskDetail.shipper.length > 1"
|
||||
>
|
||||
<div v-for="(num, index) in taskDetail.shipper.split('\n')" :key="index">{{ num.length }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item has-feedback prop="consignee" class="sender-label">
|
||||
<div class="consignee">
|
||||
<div class="top"><div class="name"><span class="iconfont icon-bianji"></span>收货人</div></div>
|
||||
<div class="bottom">
|
||||
<a-textarea
|
||||
id="consignee-scroll"
|
||||
:defaultValue="taskDetail.consignee"
|
||||
v-model="showConsignee"
|
||||
:auto-size="{ minRows: 2, maxRows: 5 }"
|
||||
style="height: 120px"
|
||||
@blur="textareaChange($event, 'consignee')"
|
||||
/>
|
||||
<div
|
||||
class="line-count"
|
||||
id="consignee-scroll-right"
|
||||
v-if="Object.keys(taskDetail).length > 1 && taskDetail.consignee.length > 1"
|
||||
>
|
||||
<div v-for="(num, index) in taskDetail.consignee.split('\n')" :key="index">{{ num.length }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item has-feedback prop="notifyparty" class="sender-label">
|
||||
<div class="notifier">
|
||||
<div class="top"><div class="name"><span class="iconfont icon-bianji"></span>通知人</div></div>
|
||||
<div class="bottom">
|
||||
<a-textarea
|
||||
id="notifyparty-scroll"
|
||||
:defaultValue="taskDetail.notifyparty"
|
||||
:auto-size="{ minRows: 2, maxRows: 5 }"
|
||||
style="height: 120px"
|
||||
v-model="showNotifier"
|
||||
@blur="textareaChange($event, 'notifyparty')"
|
||||
/>
|
||||
<div
|
||||
class="line-count"
|
||||
id="notifyparty-scroll-right"
|
||||
v-if="Object.keys(taskDetail).length > 1 && taskDetail.notifyparty.length > 1"
|
||||
>
|
||||
<div v-for="(num, index) in taskDetail.notifyparty.split('\n')" :key="index">{{ num.length }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col class="right-content" :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="装货港代码"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="portloadid"
|
||||
>
|
||||
<auto-complete
|
||||
:allowClear="true"
|
||||
v-model="taskDetail.portloadid"
|
||||
class="customer-input"
|
||||
:data-source="portloadDataArr"
|
||||
:dropdown-match-select-width="false"
|
||||
:dropdown-style="{ width: '300px' }"
|
||||
@select="portloadSelect"
|
||||
@change="portloadChange"
|
||||
@focus="portloadChange"
|
||||
></auto-complete>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="装货港"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="portload"
|
||||
>
|
||||
<a-input :allowClear="true" v-model="taskDetail.portload" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="中转港代码"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="transportid"
|
||||
>
|
||||
<auto-complete
|
||||
:allowClear="true"
|
||||
v-model="taskDetail.transportid"
|
||||
class="customer-input"
|
||||
:data-source="transportDataArr"
|
||||
:dropdown-match-select-width="false"
|
||||
:dropdown-style="{ width: '300px' }"
|
||||
@select="transportSelect"
|
||||
@change="transportChange"
|
||||
@focus="transportChange"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="中转港"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="transport"
|
||||
>
|
||||
<a-input :allowClear="true" v-model="taskDetail.transport" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="卸货港代码"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="portdischargeid"
|
||||
>
|
||||
<auto-complete
|
||||
:allowClear="true"
|
||||
v-model="taskDetail.portdischargeid"
|
||||
class="customer-input"
|
||||
:data-source="portdischargeDataArr"
|
||||
:dropdown-match-select-width="false"
|
||||
:dropdown-style="{ width: '300px' }"
|
||||
@select="portdischargeSelect"
|
||||
@change="portdischargeChange"
|
||||
@focus="portdischargeChange"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="卸货港"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="portdischarge"
|
||||
>
|
||||
<a-input :allowClear="true" v-model="taskDetail.portdischarge" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="目的代码"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="destinationid"
|
||||
>
|
||||
<auto-complete
|
||||
:allowClear="true"
|
||||
v-model="taskDetail.destinationid"
|
||||
class="customer-input"
|
||||
:data-source="destinationDataArr"
|
||||
:dropdown-match-select-width="false"
|
||||
:dropdown-style="{ width: '300px' }"
|
||||
@select="destinationSelect"
|
||||
@change="destinationChange"
|
||||
@focus="destinationChange"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="目的地"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="destination"
|
||||
>
|
||||
<a-input :allowClear="true" v-model="taskDetail.destination" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="件数"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="pkgs"
|
||||
>
|
||||
<a-input :allowClear="true" v-model="taskDetail.pkgs" type="number"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="包装"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="kindpkgs"
|
||||
>
|
||||
<auto-complete
|
||||
:allowClear="true"
|
||||
v-model="taskDetail.kindpkgs"
|
||||
class="customer-input"
|
||||
:data-source="kindpkgsDataArr"
|
||||
:dropdown-match-select-width="false"
|
||||
:dropdown-style="{ width: '200px' }"
|
||||
@select="kindpkgsSelect"
|
||||
@change="kindpkgsChange"
|
||||
@focus="kindpkgsChange"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="毛重"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="kgs"
|
||||
>
|
||||
<div class="line-box">
|
||||
<a-input :allowClear="true" v-model="taskDetail.kgs" /><span class="unit">KGS</span>
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="from-label"
|
||||
label="尺寸"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
prop="cbm"
|
||||
>
|
||||
<div class="line-box">
|
||||
<a-input :allowClear="true" v-model="taskDetail.cbm" /><span class="unit">CBM</span>
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</x-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { XCard } from '@/components'
|
||||
import { AutoComplete } from 'ant-design-vue'
|
||||
import {
|
||||
GetBookingOrderInfo
|
||||
} from '@/api/modular/main/TaskmanageList'
|
||||
import {
|
||||
GetPortloadlist,
|
||||
GetPortlist,
|
||||
GetPackage
|
||||
} from '@/api/modular/main/BookingLedger'
|
||||
|
||||
export default {
|
||||
name: 'TaskmanageDetail',
|
||||
components: {
|
||||
XCard,
|
||||
AutoComplete
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
taskPKId: this.$route.query.pkId,
|
||||
taskDetail: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 },
|
||||
md: { span: 10 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 15 },
|
||||
md: { span: 13 }
|
||||
},
|
||||
YardlabelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 1 },
|
||||
md: { span: 4 }
|
||||
},
|
||||
YardwrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 1 },
|
||||
md: { span: 20 }
|
||||
},
|
||||
portloadData: [], // 装货港
|
||||
transportData: [], // 中转港
|
||||
portdischargeData: [], // 卸货港
|
||||
destinationData: [], // 目的地
|
||||
kindpkgsData: [],
|
||||
showShipper: '',
|
||||
showConsignee: '',
|
||||
showNotifier: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
portloadDataArr() {
|
||||
if (this.portloadData) {
|
||||
const arr = []
|
||||
this.portloadData.map((item, index) => {
|
||||
if (!arr.includes(item.enName)) {
|
||||
arr.push(`(${item.ediCode})${item.enName}`)
|
||||
// arr.push(item.enName)
|
||||
}
|
||||
})
|
||||
return arr
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
transportDataArr() {
|
||||
if (this.transportData) {
|
||||
const arr = []
|
||||
this.transportData.map((item, index) => {
|
||||
if (!arr.includes(item.enName)) {
|
||||
arr.push(`(${item.ediCode})${item.enName}`)
|
||||
// arr.push(item.enName)
|
||||
}
|
||||
})
|
||||
return arr
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
portdischargeDataArr() {
|
||||
if (this.portdischargeData) {
|
||||
const arr = []
|
||||
this.portdischargeData.map((item, index) => {
|
||||
if (!arr.includes(item.enName)) {
|
||||
arr.push(`(${item.ediCode})${item.enName}`)
|
||||
// arr.push(item.enName)
|
||||
}
|
||||
})
|
||||
return arr
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
destinationDataArr() {
|
||||
if (this.destinationData) {
|
||||
const arr = []
|
||||
this.destinationData.map((item, index) => {
|
||||
if (!arr.includes(item.enName)) {
|
||||
arr.push(`(${item.ediCode})${item.enName}`)
|
||||
// arr.push(item.enName)
|
||||
}
|
||||
})
|
||||
return arr
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
kindpkgsDataArr() {
|
||||
if (this.kindpkgsData) {
|
||||
const arr = []
|
||||
this.kindpkgsData.map((item, index) => {
|
||||
if (!arr.includes(item.name)) {
|
||||
arr.push(item.name)
|
||||
}
|
||||
})
|
||||
return arr
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
const shipperScroll = document.getElementById('shipper-scroll')
|
||||
if (shipperScroll) {
|
||||
shipperScroll.addEventListener('scroll', () => {
|
||||
document.getElementById('shipper-scroll-right').scrollTop = shipperScroll.scrollTop
|
||||
})
|
||||
}
|
||||
const consigneeScroll = document.getElementById('consignee-scroll')
|
||||
consigneeScroll.addEventListener('scroll', () => {
|
||||
document.getElementById('consignee-scroll-right').scrollTop = consigneeScroll.scrollTop
|
||||
})
|
||||
const notifypartyScroll = document.getElementById('notifyparty-scroll')
|
||||
notifypartyScroll.addEventListener('scroll', () => {
|
||||
document.getElementById('notifyparty-scroll-right').scrollTop = notifypartyScroll.scrollTop
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getBookingOrderInfo () {
|
||||
GetBookingOrderInfo({
|
||||
taskPKId: this.taskPKId
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
|
||||
// 起始港 ( 装货港 / 收货地) - start
|
||||
getPortloadlist(name = '', type) {
|
||||
GetPortloadlist({
|
||||
KeyWord: name
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this[`${type}Data`] = res.data
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
portloadSelect(value) {
|
||||
const index = this.portloadDataArr.indexOf(value)
|
||||
this.taskDetail.portloadid = this.portloadData[index].ediCode
|
||||
this.taskDetail.portload = this.portloadData[index].enName
|
||||
this.taskDetail.issueplace = this.portloadData[index].enName
|
||||
if (!this.taskDetail.prepardat) {
|
||||
this.taskDetail.prepardat = this.portloadData[index].enName
|
||||
}
|
||||
},
|
||||
portloadChange(value) {
|
||||
if (!value) {
|
||||
this.taskDetail.portloadid = this.taskDetail.portloadid ? this.taskDetail.portloadid : ''
|
||||
}
|
||||
this.getPortloadlist(value, 'portload')
|
||||
},
|
||||
// 起始港 ( 装货港 / 收货地) - end
|
||||
|
||||
// 目的港 ( 卸货港 / 中转港 / 目的地 / 交货地) - start
|
||||
getPortlist(name = '', type) {
|
||||
GetPortlist({
|
||||
KeyWord: name
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this[`${type}Data`] = res.data.splice(0, 50)
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
// 卸货港
|
||||
portdischargeSelect(value) {
|
||||
const index = this.portdischargeDataArr.indexOf(value)
|
||||
this.taskDetail.portdischargeid = this.portdischargeData[index].ediCode
|
||||
this.taskDetail.portdischarge = this.portdischargeData[index].enName
|
||||
if (!this.taskDetail.payableat) {
|
||||
this.taskDetail.payableat = this.portdischargeData[index].enName
|
||||
}
|
||||
},
|
||||
portdischargeChange(value) {
|
||||
if (!value) {
|
||||
this.taskDetail.portdischargeid = this.taskDetail.portdischargeid ? this.taskDetail.portdischargeid : ''
|
||||
}
|
||||
this.getPortlist(value, 'portdischarge')
|
||||
},
|
||||
// 目的地
|
||||
destinationSelect(value) {
|
||||
const index = this.destinationDataArr.indexOf(value)
|
||||
this.taskDetail.destinationid = this.destinationData[index].ediCode
|
||||
this.taskDetail.destination = this.destinationData[index].enName
|
||||
},
|
||||
destinationChange(value) {
|
||||
if (!value) {
|
||||
this.taskDetail.destinationid = this.taskDetail.destinationid ? this.taskDetail.destinationid : ''
|
||||
}
|
||||
this.getPortlist(value, 'destination')
|
||||
},
|
||||
// 中转港
|
||||
transportSelect(value) {
|
||||
const index = this.transportDataArr.indexOf(value)
|
||||
this.taskDetail.transportid = this.transportData[index].ediCode
|
||||
this.taskDetail.transport = this.transportData[index].enName
|
||||
},
|
||||
transportChange(value) {
|
||||
if (!value) {
|
||||
this.taskDetail.transportid = this.taskDetail.transportid ? this.taskDetail.transportid : ''
|
||||
}
|
||||
this.getPortlist(value, 'transport')
|
||||
},
|
||||
// 目的港 ( 卸货港 / 中转港 / 目的地 / 交货地) - end
|
||||
|
||||
// 包装 - start
|
||||
getPackage(name = '') {
|
||||
GetPackage({
|
||||
KeyWord: name
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.kindpkgsData = res.data
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
kindpkgsSelect(value) {
|
||||
this.taskDetail.kindpkgs = value
|
||||
},
|
||||
kindpkgsChange(value) {
|
||||
if (!value) {
|
||||
this.taskDetail.kindpkgs = this.taskDetail.kindpkgs ? this.taskDetail.kindpkgs : ''
|
||||
}
|
||||
this.getPackage(value)
|
||||
},
|
||||
// 包装 - end
|
||||
textareaChange(e, type) {
|
||||
this.taskDetail[type] = e.target.value
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.task-basic-box{
|
||||
display: flex;
|
||||
width: 500px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
margin-bottom: 10px;
|
||||
.label{
|
||||
flex: 1;
|
||||
.title{
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #eee;
|
||||
color:#333;
|
||||
}
|
||||
.msg{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight:500;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line-box {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
span.unit {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.sender,
|
||||
.consignee,
|
||||
.notifier {
|
||||
margin-bottom: 20px;
|
||||
.top {
|
||||
margin-bottom: 15px;
|
||||
min-height: 32px;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.name {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
color: #666;
|
||||
.iconfont {
|
||||
margin-right: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.save-btn {
|
||||
height: 32px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
span{
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.customer-input{
|
||||
flex: 1;
|
||||
}
|
||||
.btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
// background: #c1e0ff;
|
||||
color: @primary-color;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
margin-top: 0;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: @primary-color;
|
||||
opacity: 0.2;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.btn-circle {
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
// background: #c1e0ff;
|
||||
color: @primary-color;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
margin-top: 0;
|
||||
border-radius: 50%;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: @primary-color;
|
||||
opacity: 0.2;
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
.input-box {
|
||||
margin-top: 10px;
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
textarea{
|
||||
line-height: 22px;
|
||||
}
|
||||
.line-count {
|
||||
width: 24px;
|
||||
padding-top: 3px;
|
||||
height: 130px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
// max-height: 192px;
|
||||
// overflow-y: auto;
|
||||
div {
|
||||
text-align: right;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue