yihuo/pages/award_detail/update_record.vue

<template>
    <view class="cu-modal bottom-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view :style="{height: wrapperWidth + 'rpx'}">
                <view class="paddingY25 flex-align-center relative">
                    <image :src="resource.award_version_title" class="title" />
                    <image :src="resource.icon_x" class="x" @click="close" />
                </view>
                <scroll-view scroll-y :style="{height: (wrapperWidth - 128) + 'rpx'}">
                    <view class="paddingB20 color-white font2">
                        <view class="cell" v-for="(item, index) in list" :key="item.version">
                            <view class="line" :style="{top: index === 0 ? '50%' : '0', bottom: index === list.length - 1 ? '50%' : '0'}">
                            </view>
                            <view class="translateY" :class="[index === 0 ? 'dot' : 'dot2']"></view>
                            <view class="content">
                                <view class="color-white font4">{{item.description}}</view>
                                <view class="color-white font2 paddingT10 flex-align-between">
                                    <view style="opacity: 0.5">{{item.version}}</view>
                                    <view style="opacity: 0.5">{{item.createTime}}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
export default {
    props: {
        poolId: Number
    },
    data() {
        return {
            resource,
            visible: false,
            list: []
        }
    },
    computed: {
        wrapperWidth() {
            return this.$store.state.systemInfo.screenHeight - 100
        }
    },
    methods: {
        show() {
            this.visible = true
            this.getData()
        },
        close() {
            this.visible = false
        },
        async getData() {
            const res = await this.$service.award.version(this.poolId)
            this.list = res
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    background: #10111A;
    border-radius: 15px 15px 2px 2px;
    .title {
        width: 172rpx;
        height: 28rpx;
    }
    .x {
        position: absolute;
        right: 28rpx;
        top: 50%;
        margin-top: -16rpx;
        width: 32rpx;
        height: 32rpx;
    }
}
.cell {
    margin: 0 54rpx;
    padding: 15rpx 0;
    position: relative;
    .line {
        position: absolute;
        left: 7rpx;
        width: 2rpx;
        background: #343339;
    }
    .dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 8rpx;
        background: #a76ef4;
        position: absolute;
        left: 0;
    }
    .dot2 {
        width: 14rpx;
        height: 14rpx;
        border-radius: 8rpx;
        border: 2rpx solid #a76ef4;
        background: #171b1e;
        position: absolute;
        left: 0;
    }
    .content {
        background: rgba(34,35,53,0.6);
        margin-left: 54rpx;
        padding: 24rpx 40rpx;
        border-radius: 8rpx;
    }
}
</style>