update
init
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="card-title">
|
||||
<div class="card-left">
|
||||
<div class="title-text">{{ title }}</div>
|
||||
<div><slot></slot></div>
|
||||
</div>
|
||||
<div class="title-icon"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
const props = defineProps({
|
||||
title: propTypes.string,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.card-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.card-left {
|
||||
display: flex;
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #252535;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="job-details">
|
||||
<div class="job-tab-container">
|
||||
<van-skeleton title :row="2" :loading="loading">
|
||||
<div class="detail-tit">
|
||||
<div class="detail-tit-text" v-show="info?.title">{{ info.title }}</div>
|
||||
<van-tag class="tag-unit" plain type="primary" color="#999" text-color="#333333" v-show="info?.subTitle">
|
||||
{{ info.subTitle }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<div class="tag-list">
|
||||
<div class="tag-item" v-show="info?.tag">{{ info.tag }}</div>
|
||||
</div>
|
||||
</van-skeleton>
|
||||
</div>
|
||||
<!--岗位内容-->
|
||||
<div class="job-content">
|
||||
<van-skeleton title :row="8" :loading="loading">
|
||||
<div v-html="htmlText"></div>
|
||||
</van-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { queryById } from '/@/views/post-health/api';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
const htmlText = ref('');
|
||||
const loading = ref(true); //加载骨架屏
|
||||
const route = useRoute();
|
||||
const info = ref({
|
||||
title: '',
|
||||
subTitle: '',
|
||||
tag: '',
|
||||
});
|
||||
onMounted(() => {
|
||||
info.value = {
|
||||
title: route.query?.title || '',
|
||||
subTitle: route.query?.subTitle || '',
|
||||
tag: route.query?.tag || '',
|
||||
};
|
||||
getDetail();
|
||||
});
|
||||
|
||||
function getDetail() {
|
||||
if (!route.query?.id) {
|
||||
loading.value = false;
|
||||
return showToast('请求参数有误');
|
||||
}
|
||||
queryById({ id: route.query.id })
|
||||
.then(({ code, result }) => {
|
||||
loading.value = false;
|
||||
if (code !== 200) return;
|
||||
htmlText.value = result.content;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/assets/less/index.less';
|
||||
|
||||
.job-details {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
background: @page-bgc;
|
||||
|
||||
.job-tab-container {
|
||||
padding: 10px 15px;
|
||||
background: @card-fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.detail-tit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.detail-tit-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tag-unit {
|
||||
margin-left: 6px;
|
||||
height: 16px;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #21bebe;
|
||||
padding: 3px 7px;
|
||||
background: rgba(33, 190, 190, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-content {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
padding: 10px 15px;
|
||||
background: @card-fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="unit-card">
|
||||
<div class="text-wrapper">
|
||||
<div class="tag-item" @click="changeTag">
|
||||
<div class="unit-name">管理岗位</div>
|
||||
<div class="tag-content"> 3个岗位100条知识 累计学习200人次 </div>
|
||||
</div>
|
||||
<div class="tag-item">
|
||||
<div class="unit-name">管理岗位</div>
|
||||
<div class="tag-content"> 3个岗位100条知识 累计学习200人次 </div>
|
||||
</div>
|
||||
<div class="tag-item">
|
||||
<div class="unit-name">管理岗位</div>
|
||||
<div class="tag-content"> 3个岗位100条知识 累计学习200人次 </div>
|
||||
</div>
|
||||
<div class="tag-item">
|
||||
<div class="unit-name">管理岗位</div>
|
||||
<div class="tag-content"> 3个岗位100条知识 累计学习200人次 </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const emits = defineEmits(['change']);
|
||||
function changeTag(item) {
|
||||
emits('change', item);
|
||||
}
|
||||
defineExpose({
|
||||
changeTag,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.text-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.tag-item {
|
||||
width: calc(100% / 3 - 10px);
|
||||
background: #f3f3f3;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.unit-name {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.tag-content {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user