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>
|