feat: 修改应急救援指挥内弹框样式
parent
90a946d337
commit
34f2299d68
|
@ -17,7 +17,7 @@ export default {
|
|||
font-size: 14px !important;
|
||||
}
|
||||
.vue-treeselect__single-value{
|
||||
color: #606266 !important;
|
||||
color: #cdcdcd !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.vue-treeselect__label{
|
||||
|
|
|
@ -154,7 +154,7 @@ export default {
|
|||
.infomation_table_thead {
|
||||
height: 32px;
|
||||
color: #ffffff;
|
||||
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #0c305b, rgba(255, 0, 0, 0));
|
||||
background: linear-gradient(90deg, rgba(245, 175, 25, 0),rgba(9, 42, 84, 0.68),rgb(12, 48, 91),rgb(12, 48, 91),rgba(9, 42, 84, 0.88),rgba(12, 48, 91, 0.63),rgba(9, 42, 84, 0));
|
||||
|
||||
.infomation_table_thead_tr {
|
||||
text-align: center;
|
||||
|
@ -174,13 +174,12 @@ export default {
|
|||
height: 32px;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(90deg, rgba(44, 62, 80, 0) 20%, rgba(3, 39, 78, 0.75) 50%, rgba(3, 39, 78, 0) 80%);
|
||||
background: linear-gradient(90deg, rgba(3, 36, 75, 0),rgba(3, 36, 75, 0.63),rgba(3, 36, 75, 0.92),rgba(3, 36, 75, 0.92),rgba(3, 36, 75, 0.68),rgba(3, 36, 75, 0));
|
||||
|
||||
.infomation_table_tbody_tr {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 34px;
|
||||
border-bottom: 1px solid rgba(3, 39, 78, 1);
|
||||
|
||||
&>td:nth-child(1) {
|
||||
text-align: start;
|
||||
transform: translateX(21px);
|
||||
|
@ -189,6 +188,16 @@ export default {
|
|||
&>td:nth-child(3) {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgb(3 36 75 / 0%), rgb(14 48 89 / 63%), rgb(0 57 125 / 92%), rgb(0 49 107), rgb(0 40 87), rgba(3, 36, 75, 0));
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -232,6 +241,7 @@ export default {
|
|||
}
|
||||
|
||||
.scroll-box {
|
||||
width: 100%;
|
||||
height: 145px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
@ -245,8 +255,19 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 43px;
|
||||
border-bottom: 1px solid #0c2d53;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgb(3 36 75 / 0%), rgb(14 48 89 / 63%), rgb(0 57 125 / 92%), rgb(0 49 107), rgb(0 40 87), rgba(3, 36, 75, 0));
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -80,9 +80,14 @@ export default {
|
|||
<style lang="scss">
|
||||
.bi_enterprise_dialog {
|
||||
border-radius: 8px !important;
|
||||
background-color: #000d27bd !important;
|
||||
background-color: #000d27f5 !important;
|
||||
border: 2px solid #034383;
|
||||
|
||||
.vue-treeselect__control {
|
||||
background: none !important;
|
||||
border: 1px solid #ffffff60 !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #012b81 !important;
|
||||
}
|
||||
|
@ -147,7 +152,7 @@ export default {
|
|||
}
|
||||
|
||||
.el-input__inner {
|
||||
background: #202e89;
|
||||
background: none;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #ffffff60 !important;
|
||||
}
|
||||
|
@ -216,6 +221,10 @@ export default {
|
|||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.table-ui td {
|
||||
border: 1px solid #043e99 !important;
|
||||
}
|
||||
|
||||
.el-table__body tr.current-row>td.el-table__cell {
|
||||
background: #1c2c96 !important;
|
||||
}
|
||||
|
@ -247,22 +256,10 @@ export default {
|
|||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bbg {
|
||||
background: #202e89 !important;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
.el-table--small {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 26px !important;
|
||||
}
|
||||
|
||||
.el-button--mini {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
@ -271,14 +268,6 @@ export default {
|
|||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.table-ui td {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.el-button--small {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
color: #fff !important;
|
||||
font-size: 24px !important;
|
||||
|
@ -306,11 +295,6 @@ export default {
|
|||
width: 130px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.el-input--small {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
line-height: 36px !important;
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<base-table :info="info" use-type="addressBook" @goInfo="goInfo"/>
|
||||
</div>
|
||||
<!-- 右侧面板 -->
|
||||
<div class="right">
|
||||
<div id="right_height" class="right">
|
||||
<sysChat :chat-data="chatData" @orderMessage="handlerOrderMessage" @reFlush="initInfo()" @endRescue="endRescue()"/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -687,7 +687,7 @@ export default {
|
|||
z-index: 99;
|
||||
width: 380px;
|
||||
height: 100%;
|
||||
background-color: #000d27bd;
|
||||
background-color: #00133b;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #034383;
|
||||
}
|
||||
|
|
|
@ -33,7 +33,9 @@ export default {
|
|||
return {}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.chatData, 'this.chatData')
|
||||
this.$nextTick(() => {
|
||||
this.smoothScrollToBottom()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
sendOrderBtn() {
|
||||
|
@ -64,6 +66,31 @@ export default {
|
|||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
smoothScrollToBottom() {
|
||||
const container = document.querySelector('.sys_chat_container')
|
||||
const scrollHeight = container.scrollHeight
|
||||
const start = container.scrollTop
|
||||
const distance = (scrollHeight + 400) - start
|
||||
const duration = 3000
|
||||
let startTime
|
||||
|
||||
function animation(currentTime) {
|
||||
if (!startTime) startTime = currentTime
|
||||
const timeElapsed = currentTime - startTime
|
||||
const progress = Math.min(timeElapsed / duration, 1)
|
||||
container.scrollTop = start + distance * easeInOutQuad(progress)
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animation)
|
||||
}
|
||||
}
|
||||
|
||||
function easeInOutQuad(t) {
|
||||
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
|
||||
}
|
||||
|
||||
requestAnimationFrame(animation)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
placeholder="请选择机构"
|
||||
no-options-text="暂无数据"
|
||||
no-children-text="暂无数据"
|
||||
style="width: 400px"
|
||||
style="width: 400px; background: none;"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
@ -188,4 +188,5 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue