uni-app中v-for点击跳转指定页面

<template>
    <view>
        <!-- banner start -->
        <view class="banner" @click="goLogin">
            <view class="banner-item1">
                <image src="../../static/images/1级/di-banner.png"></image>
            </view>
            <view class="banner-item2">狄晓伦</view>
            <view class="banner-item0">
                <view class="banner-item3">技术部</view>
            </view>
            <view class="banner-item4">DIXIAOLUN</view>
        </view>
        <!-- banner end -->
        <!-- container start -->
        <view class="container">
            <view class="container-item">

                <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key" @click="goDetail(key)">
                    <image src="../../static/images/1级/bj-01.png" class="container-img"></image>
                    <view class="uni-media-list uni-pull-right">
                        <view class="uni-media-list-logo">
                            <image v-if="showImg" :src="value.img" ></image>
                        </view>
                        <view class="uni-media-list-body">
                            <view class="uni-media-list-text-top">{{value.title}}</view>
                            <view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
                        </view>
                    </view>
                </view>
            </view>

        </view>
        <!-- container end -->
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'media-list',
                showImg: false,
                list: [{
                        title: "巡检任务",
                        content: "5",
                        img: "/static/images/1级/icon-01.png"
                    },
                    {
                        title: "设备保修",
                        content: "29",
                        img: "/static/images/1级/icon-02.png"
                    },
                    {
                        title: "效期提醒",
                        content: "356",
                        img: "/static/images/1级/icon-03.png"
                    }
                ]
            }
        },
        onLoad() {
            setTimeout(() => {
                this.showImg = true;
            }, 400)
        },
        methods: {
            goLogin(e){
               uni.navigateTo({
                   url: "../login/login?data=",
                   success: res => {},
                   fail: () => {},
                   complete: () => {}
               });
            },
            goDetail(e){
                var that = this;
                console.log(e);
                if(e==0){
                    that.xj();
                }
                if(e==1){
                    that.bx();
                }
                if(e==2){
                    that.tx();
                }
                
            },
            xj(){
                uni.navigateTo({
                    url: "../task/task",
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            },
            bx(){
                uni.navigateTo({
                    url: "../device/device",
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            },
            tx(){
                uni.navigateTo({
                    url: "../remind/remind",
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            }
            
            
            
        }
    }
</script>

<style>
    /* banner start */
    .banner {
        position: relative;
        margin-top: 30upx;
    }

    .banner-item1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .banner-item1 image {
        width: 690upx;
        height: 286upx;
        background-image: linear-gradient(-90deg,
            #f50000 0%,
            #c30000 100%),
            linear-gradient(#7babff,
            #7babff);
        background-blend-mode: normal,
            normal;
        box-shadow: 0upx 23upx 177upx 0upx rgba(195, 0, 0, 0.3);
        border-radius: 44upx;
    }

    .banner-item2 {
        width: 145upx;
        height: 45upx;
        font-family: PingFang-SC-Bold;
        font-size: 48upx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        position: absolute;
        left: 80upx;
        top: 50upx;
    }

    .banner-item0 {
        width: 144upx;
        height: 58upx;
        background-image: linear-gradient(#fdfdfd,
            #fdfdfd),
            linear-gradient(#b0b0b0,
            #b0b0b0);
        background-blend-mode: normal,
            normal;
        box-shadow: 0px 35upx 73upx 0px rgba(0, 0, 0, 0.16);
        border-radius: 29upx;
        position: absolute;
        left: 80upx;
        bottom: 80upx;
        text-align: center;
        line-height: 58upx;
    }

    .banner-item3 {
        width: 95upx;
        height: 31upx;
        font-family: PingFang-SC-Regular;
        font-size: 33upx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #c30000;
        white-space: nowrap;
        padding-left: 22upx;

    }

    .banner-item4 {
        width: 465upx;
        height: 67upx;
        font-family: PingFang-SC-Bold;
        font-size: 89upx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        opacity: 0.2;
        position: absolute;
        left: 80upx;
        top: 10upx;
    }

    /* banner end */

    /* container start */
    .container {
        margin-top: 100upx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .container-img {
        width: 691upx;
        height: 226upx;
        background-color: #ffffff;
        /*   box-shadow: 0px 23upx 27upx 2upx rgba(0, 0, 0, 0.11); */
        border-radius: 20upx;
    }

    .container-item2 {
        margin: 50upx 0;
    }

    .uni-media-list-logo image {
        width: 157upx;
        height: 157upx;
        background-color: #ffffff;
        box-shadow: 0px 0px 27upx 2upx rgba(59, 147, 253, 0.11);
        border-radius: 50%;
    }

    .uni-list-cell {
        position: relative;
    }

    .uni-media-list {
        display: flex;
        position: absolute;
        left: 50upx;
        top: 13upx;
    }

    .uni-media-list-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 50upx;
        text-align: center;
    }

    .uni-media-list-text-top {
        width: 148upx;
        height: 34upx;
        font-family: PingFang-SC-Regular;
        font-size: 36upx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 90upx;
        letter-spacing: 0upx;
        color: #333333;
        padding-bottom: 30upx;
    }

    .uni-media-list-text-bottom {
        width: 83upx;
        height: 36upx;
        font-family: PingFang-SC-Bold;
        font-size: 48upx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 90upx;
        letter-spacing: 0upx;
        color: #333333;
        padding-bottom: 60upx;
    }

    /* container end */
</style>