forestry-wx/src/pages/plant/processing/index.vue

<template>
    <z-paging ref="paging" bgColor="#F7F7F7">
        <template #top>
            <ut-navbar title="产地加工及包装赋码任务" :fixed="false" :breadcrumb="false">
                <template #left><view class=""></view></template>
            </ut-navbar>
        </template>
        <view class="h-40"></view>
        <view class="base-content pd-20 b-radius">
            <!-- 产地加工卡片 -->
            <view class="process-card" @click="$u.route({ url: '/plant/processing/processing-index/index' })">
                <view class="w-200 h-200 d-flex a-c j-c" style="flex-shrink: 0">
                    <image class="w-100% h-100%" src="/static/images/plant/processing/initial_processing.png" mode="aspectFit" />
                </view>
                <view class="card-content">
                    <view class="f-s-46 c-#333 f-w-6 mb-12">产地加工</view>
                    <view class="card-desc">可对种子、鲜货进行初加工、趁鲜切制加工</view>
                </view>
            </view>
            <!-- 包装赋码卡片 -->
            <view class="process-card" @click="$u.route({ url: '/plant/packaging/list/index' })">
                <view class="w-200 h-200 d-flex a-c j-c" style="flex-shrink: 0">
                    <image class="w-100% h-100%" src="/static/images/plant/processing/packaging_coding.png" mode="aspectFit" />
                </view>
                <view class="card-content">
                    <view class="f-s-46 c-#333 f-w-6 mb-12">包装赋码</view>
                    <view class="card-desc">可对种源、鲜货、药材进行包装</view>
                </view>
            </view>
        </view>
        <template #bottom>
            <ut-tabar activeTab="processing"></ut-tabar>
        </template>
    </z-paging>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.base-content {
    padding-top: 10px;
    background: linear-gradient(to bottom, #dcf8d9, #f7f7f7 70rpx);
    border: 1rpx solid #fff;
}

.process-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 30rpx 24rpx;
    border: 2rpx solid #b8e6d5;
    // box-shadow: inset 0 2rpx 8rpx rgba(184, 230, 213, 0.3);
    box-shadow:
        inset 0 5px 10px 9px #edf8f2,
        inset 0 -5px 10px -5px #edf8f2;
    filter: drop-shadow(-1px 2px 3px #9ad4b6);

    overflow: hidden;
}

.card-image-wrapper {
    flex-shrink: 0;
}

.card-content {
    flex: 1;
    padding-left: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-desc {
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
}
</style>