uniapp-Clothscan/pages/index/index.vue

<template>
    <view>
        <image class="image-bg" src="https://api.lttc.cn/static/images/bg/20220107_115823.jpg"></image>
        <u-notice-bar v-if="noticeText" :text="noticeText" bgColor='#81DAF5' color='white'></u-notice-bar>
		<view class="nav-list margin-top" style="padding-top:30px;">
            <navigator v-for="(item, index) in link" :key="item.name" :url="item.path" version="release" :delta="1" hover-class="none" :class="'nav-li bg-kuxuan' + (index + 1)">
                <view class="nav-link">{{ item.name }}</view>
                <view class="cu-avatar xl round">
                    <u-icon :name="item.icon" size="48"></u-icon>
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
    // import api from '@/api/api'
    export default {
        data() {
            return {
				noticeText:'',
                link: [{
                        name: '车间管理',
                        icon: 'more-circle',
                        path: '/pages/workshop/configuration'
                    },
                    {
                        name: '自动库管理',
                        icon: 'order',
                        path: '/pages/automatedwarehouse/configuration'
                    },{
                        name: '高架库管理',
                        icon: 'more-circle',
                        path: '/pages_ops/report/opsreport'
                    }
                ]
            }
        },
        created() {
            
        },
		mounted() {
		},
        methods: {}
    }
</script>

<style>
    .image-bg {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
</style>

<style scoped>
    .nav-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0px 12upx 0px;
        justify-content: space-between;
    }

    .nav-li {
        padding: 30upx;
        border-radius: 12upx;
        width: 46%;
        margin: 0 2% 40upx;
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1;
    }

    .nav-li::after {
        content: '';
        position: absolute;
        z-index: -1;
        background-color: inherit;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: -5%;
        border-radius: 10upx;
        opacity: 0.1;
        transform: scale(0.92, 1);
    }

    .nav-li.cur {
        color: #fff;
        background: rgb(94, 185, 94);
        box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
    }

    .nav-title {
        font-size: 36upx;
        font-weight: 300;
    }

    .nav-title::first-letter {
        font-size: 42upx;
        margin-right: 4upx;
    }

    .nav-name {
        font-size: 42upx;
        text-transform: Capitalize;
        padding: 10upx 0;
        position: relative;
    }

    .nav-name::before {
        content: '';
        position: absolute;
        display: block;
        width: 50upx;
        height: 6upx;
        background: #fff;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }

    .nav-name::after {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 1px;
        background: #fff;
        bottom: 0;
        left: 0upx;
        opacity: 0.3;
    }

    .nav-name::first-letter {
        font-weight: 600;
        font-size: 46upx;
        margin-right: 1px;
    }

    .nav-li text {
        position: absolute;
        right: 0upx;
        top: 30upx;
        font-size: 100upx;
        width: 108upx;
        height: 108upx;
        text-align: center;
        line-height: 60upx;
        opacity: 0.8;
        color: #fff;
    }

    .text-light {
        font-weight: 300;
    }

    .nav-li {
        padding: 120upx 30upx 40upx 30upx;
        border-radius: 12upx;
        width: 100%;
        margin: 0 18upx 40upx;
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 99;
    }

    .nav-li::after {
        content: '';
        z-index: -1;
        background-image: inherit;
        width: 100%;
        height: 8%;
        left: 0;
        bottom: -5%;
        border-radius: 10upx;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
    }

    .nav-li .cu-avatar {
        position: absolute;
        right: 50upx;
        top: 62upx;
        font-size: 85upx;
        width: 132upx;
        height: 132upx;
        text-align: center;
        line-height: 132upx;
        opacity: 0.8;
    }

    .bg-kuxuan1::after {
        content: '';
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: 10upx;
        opacity: 1;
        transform: scale(1, 1);
    }

    .bg-kuxuan2::after {
        content: '';
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: 10upx;
        opacity: 1;
        transform: scale(1, 1);
    }

    .bg-kuxuan3::after {
        content: '';
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: 10upx;
        opacity: 1;
        transform: scale(1, 1);
    }

    .bg-kuxuan4::after {
        content: '';
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0%;
        border-radius: 10upx;
        opacity: 1;
        transform: scale(1, 1);
    }

    .bg-kuxuan5::after {
        content: '';
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0%;
        border-radius: 10upx;
        opacity: 1;
        transform: scale(1, 1);
    }

    .bg-kuxuan6::after {
        content: '';
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0%;
        border-radius: 10upx;
        opacity: 1;
        transform: scale(1, 1);
    }

    .nav-li.cur {
        color: #fff;
        background: rgb(94, 185, 94);
        box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
    }

    .nav-title {
        font-size: 36upx;
        font-weight: 300;
        color: #fff;
    }

    .nav-title::first-letter {
        font-size: 42upx;
        margin-right: 4upx;
    }

    .nav-link {
        font-size: 42upx;
        text-transform: Capitalize;
        padding: 10upx 0 18upx 0;
        position: relative;
    }

    .nav-link::before {
        content: '';
        position: absolute;
        display: block;
        width: 50upx;
        height: 6upx;
        background: #fff;
        bottom: 0;
        left: 0;
        opacity: 0.2;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        display: block;
        width: 72%;
        height: 1px;
        background: #fff;
        bottom: 0;
        left: 0upx;
        opacity: 0.08;
    }

    .nav-link::first-letter {
        font-weight: 600;
        font-size: 46upx;
        margin-right: 1px;
    }

    .nav-li text {
        position: absolute;
        right: 50upx;
        top: 80upx;
        font-size: 100upx;
        width: 108upx;
        height: 108upx;
        text-align: center;
        line-height: 60upx;
        opacity: 0.1;
    }

    .bg-kuxuan1 {
        background-image: repeating-linear-gradient(45deg, #fe5e9c, #f1aa76);
        color: #fff;
    }

    .bg-kuxuan2 {
        background-image: repeating-linear-gradient(45deg, #00d1ff, #69ff97);
        color: #fff;
    }

    .bg-kuxuan3 {
        background-image: repeating-linear-gradient(45deg, #209cff, #68e0cf);
        color: #fff;
    }

    .bg-kuxuan4 {
        background-image: repeating-linear-gradient(45deg, #ed1c24, #fece12);
        color: #fff;
    }

    .bg-kuxuan5 {
        background-image: repeating-linear-gradient(45deg, #ca26ff, #fff3b0);
        color: #fff;
    }

    .bg-kuxuan6 {
        background-image: repeating-linear-gradient(45deg, #0fd850, #f9f047);
        color: #fff;
    }
</style>