114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<Navbar title="升级公告" />
|
|||
|
|
<div class="content">
|
|||
|
|
<u-list>
|
|||
|
|
<div class="title-wrapper">
|
|||
|
|
<div>更新时间</div>
|
|||
|
|
<div>更新内容</div>
|
|||
|
|
</div>
|
|||
|
|
<u-list-item v-for="(item, index) in dataList" :key="index">
|
|||
|
|
<div class="item-wrapper">
|
|||
|
|
<div>{{ item.label }}</div>
|
|||
|
|
<div>
|
|||
|
|
<u-button type="primary" text="查看" size="mini" plain hairline @click="handleCheck(item)" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</u-list-item>
|
|||
|
|
</u-list>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<u-modal :show="show" :title="title" :negativeTop="-200">
|
|||
|
|
<view class="slot-content">
|
|||
|
|
<div>尊敬的用户:</div>
|
|||
|
|
<div class="item">本次系统升级，更新{{ content }}</div>
|
|||
|
|
</view>
|
|||
|
|
<u-icon
|
|||
|
|
slot="confirmButton"
|
|||
|
|
class="modal-btn"
|
|||
|
|
name="/static/images/imgs/close.png"
|
|||
|
|
size="30"
|
|||
|
|
@click="show = false"
|
|||
|
|
/>
|
|||
|
|
</u-modal>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dataList: [
|
|||
|
|
{
|
|||
|
|
label: '2024-01-01 12:00',
|
|||
|
|
value: 1000
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '2024-01-01 12:00',
|
|||
|
|
value: 100
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '2024-01-01 12:00',
|
|||
|
|
value: 999
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '2024-01-01 12:00',
|
|||
|
|
value: 888
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
show: false,
|
|||
|
|
title: '升级通知',
|
|||
|
|
content: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleCheck(item) {
|
|||
|
|
console.log('查看', item)
|
|||
|
|
this.show = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.content {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
.title-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px 30px;
|
|||
|
|
background: #f8f9fc;
|
|||
|
|
border-radius: 4px 4px 4px 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slot-content {
|
|||
|
|
text-align: start;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #0f274b;
|
|||
|
|
.item {
|
|||
|
|
text-indent: 2em;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.modal-btn {
|
|||
|
|
margin: 10px auto 0;
|
|||
|
|
}
|
|||
|
|
/deep/ .u-modal__button-group--confirm-button {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
|||
|
|
}
|
|||
|
|
/deep/ .u-modal__content {
|
|||
|
|
justify-content: start !important;
|
|||
|
|
}
|
|||
|
|
</style>
|