［明日方舟抽卡数据库］开发日志（六）

体验地址：明日方舟抽卡数据库https://ak.mcsite.cn/

新增功能

首页通知

利用轮播图来实现公告的滚动

<div v-if="systemMsg.length > 0" class="bs-sysMsg">
    <i class="el-alert__icon el-icon-warning" />
    <div class="msg__content">
        <el-carousel height="20px" direction="vertical" indicator-position="none" :autoplay="true">
            <el-carousel-item v-for="item in systemMsg" :key="item.id">
                <button class="item">{{ item.notice }}</button>
            </el-carousel-item>
        </el-carousel>
    </div>
</div>

systemMsg的结构

systemMsg: [
    { id: 1, title: '滚动公告1' },
    { id: 2, title: '滚动公告2' },
    { id: 3, title: '滚动公告3' }
]

CSS
 

/*轮翻消息*/
.bs-sysMsg {
    position: relative;
    display: flex;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 2px;
    color: #e6a23c;
    background-color: #fdf6ec;
    overflow: hidden;
    opacity: 1;
    align-items: center;
    transition: opacity .2s;
}
.bs-sysMsg .msg__content {
    display: table-cell;
    padding: 0 8px;
    width: 100%;
}
.bs-sysMsg .msg__content .item {
    color: #e6a23c;
    font-size: 14px;
    opacity: 0.75;
}
.bs-sysMsg .msg__content button.item {
    border: none;
    background: #fdf6ec
}

反馈页面更新

 

以后会更新

全站卡池抽卡概率展示 ​​​