flat: 暂存
This commit is contained in:
史典卓
@@ -5,41 +5,60 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, onMounted, inject } from 'vue';
|
||||
import { parseMarkdown, codeDataList } from '@/utils/markdownParser';
|
||||
|
||||
const { navTo } = inject('globalFunction');
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
typing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const renderedHtml = computed(() => parseMarkdown(props.content));
|
||||
|
||||
const handleItemClick = (e) => {
|
||||
let { attrs } = e.detail.node;
|
||||
let { 'data-copy-index': codeDataIndex, class: className, href } = attrs;
|
||||
if (href) {
|
||||
window.open(href);
|
||||
return;
|
||||
}
|
||||
if (className == 'copy-btn') {
|
||||
uni.setClipboardData({
|
||||
data: codeDataList[codeDataIndex],
|
||||
showToast: false,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
});
|
||||
let { 'data-copy-index': codeDataIndex, 'data-job-id': jobId, class: className } = attrs;
|
||||
switch (className) {
|
||||
case 'custom-card':
|
||||
navTo('/packageA/pages/post/post?jobId=' + jobId);
|
||||
return;
|
||||
case 'copy-btn':
|
||||
uni.setClipboardData({
|
||||
data: codeDataList[codeDataIndex],
|
||||
showToast: false,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cursor-blink {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 1.2em;
|
||||
background-color: black;
|
||||
animation: blink 1s step-start infinite;
|
||||
margin-left: 2px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.markdown-body {
|
||||
h2,
|
||||
h3,
|
||||
@@ -107,18 +126,32 @@ tr:hover {
|
||||
pre,
|
||||
code {
|
||||
user-select: text;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
pre code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
pre code {
|
||||
white-space: pre-wrap; /* 保证换行处理 */
|
||||
}
|
||||
|
||||
pre code:empty,
|
||||
pre code:not(:has(*)):not(:has(text)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
position: relative;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
// background: #0d1117;
|
||||
padding: 8rpx;
|
||||
color: #c9d1d9;
|
||||
font-size: 28rpx;
|
||||
height: fit-content;
|
||||
margin-top: -140rpx;
|
||||
margin-bottom: -140rpx;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
@@ -151,7 +184,7 @@ pre.hljs {
|
||||
padding: 0 24rpx;
|
||||
margin: 0;
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
background-color: #f8f8f8;
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx;
|
||||
overflow-x: auto;
|
||||
font-size: 24rpx;
|
||||
@@ -179,4 +212,81 @@ ol {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#markdown-content ::v-deep div > pre:first-of-type {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
#markdown-content ::v-deep > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.markdownRich > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="stylus">
|
||||
.custom-card
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
.card-title
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title-text
|
||||
max-width: calc(100% - 160rpx);
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
.card-tag
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
width: fit-content;
|
||||
background: #F4F4F4;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
margin-left: 16rpx;
|
||||
.card-company
|
||||
margin-top: 12rpx;
|
||||
.card-info
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 40rpx;
|
||||
.position-nav
|
||||
position: absolute;
|
||||
right: 34rpx;
|
||||
top: 50%;
|
||||
.position-nav::before
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: '';
|
||||
width: 4rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 2rpx
|
||||
background: #8A8A8A;
|
||||
transform: translate(0, -50%) rotate(-45deg) ;
|
||||
.position-nav::after
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: '';
|
||||
width: 4rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 2rpx
|
||||
background: #8A8A8A;
|
||||
transform: rotate(45deg)
|
||||
</style>
|
||||
|
||||
133
components/tabbar/midell-box.vue
Normal file
133
components/tabbar/midell-box.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<view class="tabbar_container">
|
||||
<view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
|
||||
<view class="item-top" :class="[item.centerItem ? 'center-item-img' : '']">
|
||||
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
|
||||
</view>
|
||||
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
|
||||
<text>{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentItem: 0,
|
||||
tabbarList: [
|
||||
{
|
||||
id: 0,
|
||||
text: '首页',
|
||||
path: '/pages/index/index',
|
||||
iconPath: '../../static/tabbar/calendar.png',
|
||||
selectedIconPath: '../../static/tabbar/calendared.png',
|
||||
centerItem: false,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
text: '招聘会',
|
||||
path: '/pages/careerfair/careerfair',
|
||||
iconPath: '../../static/tabbar/post.png',
|
||||
selectedIconPath: '../../static/tabbar/posted.png',
|
||||
centerItem: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: '',
|
||||
path: '/pages/chat/chat',
|
||||
iconPath: '../../static/tabbar/logo2copy.png',
|
||||
selectedIconPath: '../../static/tabbar/logo2copy.png',
|
||||
centerItem: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: '消息',
|
||||
path: '/pages/msglog/msglog',
|
||||
iconPath: '../../static/tabbar/chat4.png',
|
||||
selectedIconPath: '../../static/tabbar/chat4ed.png',
|
||||
centerItem: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: '我的',
|
||||
path: '/pages/mine/mine',
|
||||
iconPath: '../../static/tabbar/mine.png',
|
||||
selectedIconPath: '../../static/tabbar/mined.png',
|
||||
centerItem: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
currentpage: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.currentItem = this.currentpage;
|
||||
uni.hideTabBar();
|
||||
},
|
||||
methods: {
|
||||
changeItem(item) {
|
||||
uni.switchTab({
|
||||
url: item.path,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabbar_container {
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
width: 100%;
|
||||
height: 126rpx;
|
||||
// box-shadow: 0 0 5px #999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5rpx 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
z-index: 998;
|
||||
.tabbar_item {
|
||||
width: 33.33%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #5e5f60;
|
||||
.item-top {
|
||||
width: 44.44rpx;
|
||||
height: 44.44rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-bottom {
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.center-item-img {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 96rpx !important;
|
||||
height: 96rpx !important;
|
||||
}
|
||||
.item-active {
|
||||
color: #256bfa;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user