hookehuyr

fix 细节调整

......@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
VITE_OUTDIR = carbon
# 是否开启调试
VITE_CONSOLE = 1
VITE_CONSOLE = 0
# appID相关
VITE_APPID=微信appID
......
<!--
* @Date: 2024-04-10 14:16:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-12 12:27:41
* @LastEditTime: 2024-04-12 23:15:09
* @FilePath: /fxPark/src/components/danmaku.vue
* @Description: 文件描述
* @Description: 弹幕组件
-->
<template>
<div class="danmaku-page">
<vue-danmaku ref="danmakuRef" v-model:danmus="danmus" useSlot loop :channels="2" :speeds="50" :top="0" style="height:15rem; width:100vw; position: absolute; top:0; z-index: 10; padding-top: 1rem;">
<vue-danmaku ref="danmakuRef" class="danmu-boxer" v-model:danmus="danmus" useSlot loop :channels="4" :speeds="30" :top="0">
<template v-slot:dm="{ index, danmu }">
<div class="dm-item">
<van-icon v-if="danmu.status === '2'" name="fire-o" color="red" />&nbsp;
......@@ -21,7 +21,6 @@
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import vueDanmaku from 'vue3-danmaku'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
......@@ -49,6 +48,7 @@ watch(() => props.text, (v) => {
danmakuRef.value.add(v)
}
});
watch(() => props.show, (v) => {
nextTick(() => {
if (v) {
......@@ -67,7 +67,6 @@ const danmus = ref([]);
onMounted(async () => {
const { code, data } = await getDanmuAPI();
if (code) {
console.warn(data);
danmus.value = data;
}
})
......@@ -76,6 +75,14 @@ onMounted(async () => {
<style lang="less" scoped>
.danmaku-page {
.danmu-boxer {
height:15rem;
width:100vw;
position: absolute;
top:0;
z-index: 10;
padding-top: 1rem;
}
.dm-item {
background-color: rgba(48, 48, 48, 0.50);
padding: 0.25rem 1rem;
......
<!--
* @Date: 2024-04-07 10:15:55
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-12 22:28:29
* @LastEditTime: 2024-04-13 08:46:06
* @FilePath: /fxPark/src/views/fxPark/index.vue
* @Description: 首页
-->
......@@ -19,7 +19,7 @@
<van-icon name="chat-o" />&nbsp;&nbsp;<span>展览介绍</span>
</div>
<div class="quick-entrance-item">
<van-icon name="chat-o" />&nbsp;&nbsp;<span>文明校园报名</span>
<van-icon name="chat-o" />&nbsp;&nbsp;<span>校园报名</span>
</div>
</div>
<div class="container" v-for="(item, index) in data_list" :key="index" @click="onChipClick()">
......@@ -57,7 +57,6 @@
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
import { parseQueryString } from '@/utils/tools.js'
......@@ -123,8 +122,11 @@ onMounted(async () => {
});
} else { // 全点亮
all_actived.value = true;
data.forEach(item => {
item.chip_src = TREE_CHIP[item.revision]['active']; // 根据点亮状态,显示碎片地址
// 过滤树类型碎片
data
.filter(item => item.is_tree === 1)
.forEach(item => {
item.chip_src = TREE_CHIP[item.revision]['active'];
});
}
//
......@@ -146,8 +148,7 @@ const onChipClick = () => { // 点击碎片回调
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
let result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
// 跳转到相应植被介绍页
// let result = 'http://oa.allforlove.org.cn/f/carbon/#/intro?revision=1';
// 跳转到相应植被介绍页 'http://oa.allforlove.org.cn/f/carbon/#/intro?revision=1'
let revision = parseQueryString(result).revision;
go('/intro', { revision });
},
......@@ -232,8 +233,8 @@ const onCloseDanmu = () => { // 弹幕开关
background-color: green;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
font-size: 0.85rem;
padding: 0.5rem;
font-size: 0.8rem;
padding: 0.4rem 0.5rem;
margin-bottom: 0.5rem;
letter-spacing: 1px;
}
......@@ -258,7 +259,9 @@ const onCloseDanmu = () => { // 弹幕开关
}
.danmu-input-wrapper {
padding: 1rem 0; display: flex; padding: 0.5rem;
padding: 1rem 0;
display: flex;
padding: 0.5rem;
}
.danmu-boxer {
......
<!--
* @Date: 2024-04-10 16:08:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-12 15:56:50
* @LastEditTime: 2024-04-12 22:57:03
* @FilePath: /fxPark/src/views/fxPark/intro.vue
* @Description: 文件描述
* @Description: 植被介绍页
-->
<template>
<div class="intro-page">
......@@ -15,7 +15,7 @@
</div>
<div style="border: 1px solid #000; padding: 1rem; border-radius: 8px;">
<div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被类型:</span>&nbsp;{{ tree_data?.type }}</div>
<div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被学名:</span>&nbsp;{{ tree_data?.study_name }}</div>
<div v-if="tree_data.study_name" style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被学名:</span>&nbsp;{{ tree_data?.study_name }}</div>
<div style="margin-bottom: 1.5rem;white-space: pre-wrap;line-height: 1.8;">
{{ tree_data?.note }}
</div>
......@@ -42,7 +42,6 @@
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
......@@ -60,11 +59,13 @@ onMounted(async () => {
const { code, data } = await getTreeAPI();
if (code) {
let index = data.findIndex(item => item.revision == revision); // 植被信息index
tree_data.value = data[index];
tree_data.value = data[index]; // 当前植被信息
// 植被介绍样式
nextTick(() => {
$('.tree-intro').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
$('.tree-mission-note').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
$('.tree-intro p, .tree-mission-note p').css({
'lineHeight': '1.8',
'marginBottom': '0.5rem'
});
})
}
// 进入页面激活
......@@ -73,14 +74,15 @@ onMounted(async () => {
const saveEvent = await saveEventAPI({ event_code: 'open_page', event_value: 'tree' });
});
const formattedIntro = computed(() => {
const formattedIntro = computed(() => { // 植被介绍样式 格式化-处理空格
return tree_data?.value?.intro?.split("\n").map((line) => `<p>${line}</p>`).join("");
});
const formattedNote = computed(() => {
const formattedNote = computed(() => { // 植被任务卡note 格式化-处理空格
return tree_data?.value?.mission_note?.split("\n").map((line) => `<p>${line}</p>`).join("");
});
const goToPoster = () => {
const goToPoster = () => { // 去海报页
$router.push({
path: '/poster',
query: {
......
......@@ -45,6 +45,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
......@@ -65,7 +66,7 @@ const posterIndex = ref(0);
onMounted(async () => {
const { code, data } = await getTreeAPI();
if (code) {
raw_data.value = data.filter(item => item.is_light === '1'); // 获取所有已点亮的植被
raw_data.value = data.filter(item => item.is_light === '1' || item.is_tree === 0); // 获取已点亮的植被/全点亮的图片
let index = raw_data.value.findIndex(item => item.revision == revision); // 植被信息index
tree_data.value = raw_data.value[index]; // 获取当前植被信息
imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic;
......