flat: 暂存
This commit is contained in:
史典卓
@@ -1,128 +1,151 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">精选企业</view>
|
||||
|
||||
<!-- 格子布局 -->
|
||||
<view class="grid-container">
|
||||
<view
|
||||
class="grid-item"
|
||||
:style="{ backgroundColor: item.backgroudColor }"
|
||||
v-for="item in list"
|
||||
:key="item.companyCardId"
|
||||
>
|
||||
<text class="title">{{ item.name }}</text>
|
||||
<view class="status" v-if="item.isCollection" @click="delCollectionCard(item)">已关注 ✓</view>
|
||||
<view class="status" v-else @click="CollectionCard(item)">特别关注</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="grid-item green">
|
||||
<text class="title">银行招聘</text>
|
||||
<view class="status">特别关注</view>
|
||||
</view>
|
||||
|
||||
<view class="grid-item orange">
|
||||
<text class="title">世界500强</text>
|
||||
<view class="status">特别关注</view>
|
||||
</view>
|
||||
|
||||
<view class="grid-item red">
|
||||
<text class="title">中国500强</text>
|
||||
<view class="status">特别关注</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<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智联青岛，岗位触手可“职”！</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 dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { inject, ref, reactive } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
const { $api, navBack, navTo } = inject('globalFunction');
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
const { getUserResume } = useUserStore();
|
||||
const { userInfo } = storeToRefs(useUserStore());
|
||||
const list = ref([]);
|
||||
|
||||
onLoad(() => {
|
||||
getPremiumList();
|
||||
getPremiumList();
|
||||
});
|
||||
|
||||
function CollectionCard(item) {
|
||||
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'PUT').then((resData) => {
|
||||
getPremiumList();
|
||||
$api.msg('关注成功');
|
||||
});
|
||||
$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('取消关注');
|
||||
});
|
||||
$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;
|
||||
});
|
||||
$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>
|
||||
/* 页面整体样式 */
|
||||
.container
|
||||
background-color #edf4ff
|
||||
height 100%
|
||||
display flex
|
||||
flex-direction column
|
||||
padding 20rpx
|
||||
.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;
|
||||
}
|
||||
.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) ;
|
||||
}
|
||||
|
||||
/* 搜索栏样式 */
|
||||
.search-bar
|
||||
font-size 32rpx
|
||||
font-weight bold
|
||||
color #333
|
||||
margin-bottom 20rpx
|
||||
.cards::after{
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: calc(50% + 1rpx);
|
||||
content: '';
|
||||
width: 4rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 2rpx
|
||||
background: #6C7282;
|
||||
transform: rotate(45deg)
|
||||
}
|
||||
|
||||
/* 格子布局样式 */
|
||||
.grid-container
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
justify-content space-between
|
||||
gap 20rpx
|
||||
|
||||
.grid-item
|
||||
width 48%
|
||||
height 200rpx
|
||||
border-radius 20rpx
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
color #fff
|
||||
font-size 28rpx
|
||||
font-weight bold
|
||||
position relative
|
||||
|
||||
.status
|
||||
position absolute
|
||||
bottom 20rpx
|
||||
font-size 24rpx
|
||||
background-color rgba(255, 255, 255, 0.9)
|
||||
color #333
|
||||
padding 5rpx 15rpx
|
||||
border-radius 15rpx
|
||||
|
||||
/* 每种格子对应的颜色 */
|
||||
.blue
|
||||
background-color #3b82f6
|
||||
|
||||
.green
|
||||
background-color #22c55e
|
||||
|
||||
.orange
|
||||
background-color #f59e0b
|
||||
|
||||
.red
|
||||
background-color #ef4444
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user