kxmh_uni/pages/opera/IP_more/IP_more.vue

<template>
    <view>
        <!-- <scroll-view scroll-y="{{true}}" style="     height: {{screenHeight*10}}px;"> -->
        <block v-for="(item, index) in ip_list" :key="index">
            <view class="_item" :data-abb_id="item.abb_id" @tap="nav">
                <view class="shadow" />
                <image class="img" :src="item.pic" />
                <view class="_title">{{ item.show_name }}</view>
                <view>
                    <view class="_below">
                        <text>{{ item.follow_total == 0 ? 0 : item.follow_total }}</text>
                        人想看｜
                        <text style="color: #ff1d42">{{ item.show_total }}</text>
                        个剧场在售
                    </view>
                    <view class="_home">
                        前往主页
                        <image src="/static/images/ui/right.png" style="margin-left: 10rpx" />
                    </view>
                </view>
            </view>
        </block>
        <view style="height: 100rpx; width: 100%"></view>
        <!-- </scroll-view> -->
    </view>
</template>

<script>
// pages/opera/IP_more/IP_more.js
import { httpUtil } from '../../../utils/util';
export default {
    data() {
        return {
            screenHeight: '',
            ip_list: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let title = options.title;
        wx.setNavigationBarTitle({
            title
        });
        this.setData({
            screenHeight: getApp().globalData.screenHeight
        });
        let category = options.category;
        httpUtil('/api/v1/ip-more', 'get', {
            category
        }).then((res) => {
            console.log(res);
            this.setData({
                ip_list: res.ip_list
            });
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        nav(e) {
            uni.navigateTo({
                url: '/pages/opera/IP_detail/IP_detail?abb_id=' + e.currentTarget.dataset.abb_id
            });
        }
    }
};
</script>
<style>
page {
    width: 100%;
    overflow-x: hidden;
}
._item {
    height: 260rpx;
    margin: 100rpx 30rpx 0 30rpx;
    position: relative;
    background: #fff9f9;
    box-shadow: 0 12rpx 8rpx 0 rgba(108, 106, 106, 0);
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

._item .shadow {
    width: 690rpx;
    height: 212rpx;
    background: #1c1c1c;
    border-radius: 8rpx;
    opacity: 0.1;
    filter: blur(10px);
    position: absolute;
    top: 70rpx;
    z-index: -1;
}

._item .img {
    width: 204rpx;
    height: 306rpx;
    border-radius: 16rpx;
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
}

._title {
    margin: 20rpx 30rpx;
    font-size: 28rpx;
    font-weight: bold;
    width: 392rpx;
}

._below {
    font-size: 24rpx;
    margin: 0 30rpx;
}

._home {
    font-size: 24rpx;
    font-weight: bold;
    margin: 20rpx 30rpx 40rpx 30rpx;
    display: flex;
    align-items: center;
}
._home image {
    width: 26rpx;
    height: 26rpx;
}
</style>