ks-app-employment-service/packageA/pages/choiceness/choiceness.vue

<template>
    <AppLayout title="精选企业">
        <template #headerleft>
            <view class="btn">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <view class="main">
            <view class="main-header">
                <view class="header-title btn-feel">企业推荐站</view>
                <view class="header-text btn-feel">AI智联{{ config.appInfo.areaName }}，岗位触手可“职”！</view>
                <image class="header-img btn-shaky" src="/static/icon/companyBG.png"></image>
            </view>
            <view class="main-content">
                <view class="cards btn-feel" v-for="item in list" :key="item.companyCardId" @click="seeDetail(item)">
                    <view class="card-title">{{ item.name }}</view>
                    <view class="card-text">{{ item.description }}</view>
                </view>
            </view>
        </view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navBack, navTo, config } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { getUserResume } = useUserStore();
const { userInfo } = storeToRefs(useUserStore());
const list = ref([]);

onLoad(() => {
    getPremiumList();
});

function CollectionCard(item) {
    $api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'PUT').then((resData) => {
        getPremiumList();
        $api.msg('关注成功');
    });
}

function delCollectionCard(item) {
    $api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'DELETE').then((resData) => {
        getPremiumList();
        $api.msg('取消关注');
    });
}

function getPremiumList() {
    $api.createRequest('/app/company/card').then((resData) => {
        const { rows, total } = resData;
        list.value = rows;
    });
}

function seeDetail(item) {
    uni.setStorageSync('jinxuan', item);
    navTo('/packageA/pages/choicenessList/choicenessList');
}
</script>

<style lang="stylus" scoped>
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60rpx;
    height: 60rpx;
    image {
        height: 100%;
        width: 100%;
    }
}
.main{
    .main-content{
        padding: 28rpx
        .cards{
            padding: 32rpx
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            border: 2rpx solid #DCDCDC;
            margin-bottom: 36rpx;
            position: relative;
            .card-title{
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 32rpx;
                color: #333333;
                font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            }
            .card-text{
                margin-top: 16rpx
                width: 502rpx;
                height: 80rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #6C7282;
            }
        }
        .cards::before{
            position: absolute;
            right: 40rpx;
            top: 50%;
            content: '';
            width: 4rpx;
            height: 18rpx;
            border-radius: 2rpx
            background: #6C7282;
            transform: translate(0, -50%) rotate(-45deg) ;
        }

        .cards::after{
            position: absolute;
            right: 40rpx;
            top: calc(50% + 1rpx);
            content: '';
            width: 4rpx;
            height: 18rpx;
            border-radius: 2rpx
            background: #6C7282;
            transform: rotate(45deg)
        }

    }
    .main-header{
        padding: 80rpx 40rpx
        position: relative
        .header-title{
            font-weight: 400;
            font-size: 56rpx;
            color: #333333;
            font-family: DingTalk JinBuTi;
        }
        .header-text{
            font-weight: 400;
            font-size: 32rpx;
            color: rgba(3,3,3,0.5);
            margin-top: 10rpx
        }
        .header-img{
            position: absolute
            right: 0
            bottom: 0
            // transform: translate(0, -50%)
            width: 280rpx;
            height: 272rpx;
        }
    }
}
</style>