Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
fxPark
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2024-04-13 08:51:38 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
533612510b15de8f1f69b475873cf006a767fd34
53361251
1 parent
2cb04c8e
fix 细节调整
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
40 additions
and
27 deletions
.env
src/components/danmaku.vue
src/views/fxPark/index.vue
src/views/fxPark/intro.vue
src/views/fxPark/poster.vue
.env
View file @
5336125
...
...
@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
VITE_OUTDIR = carbon
# 是否开启调试
VITE_CONSOLE =
1
VITE_CONSOLE =
0
# appID相关
VITE_APPID=微信appID
...
...
src/components/danmaku.vue
View file @
5336125
<!--
* @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" />
...
...
@@ -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;
...
...
src/views/fxPark/index.vue
View file @
5336125
<!--
* @Date: 2024-04-07 10:15:55
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-1
2 22:28:29
* @LastEditTime: 2024-04-1
3 08:46:06
* @FilePath: /fxPark/src/views/fxPark/index.vue
* @Description: 首页
-->
...
...
@@ -19,7 +19,7 @@
<van-icon name="chat-o" /> <span>展览介绍</span>
</div>
<div class="quick-entrance-item">
<van-icon name="chat-o" /> <span>
文明
校园报名</span>
<van-icon name="chat-o" /> <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.8
5
rem;
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 {
...
...
src/views/fxPark/intro.vue
View file @
5336125
<!--
* @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> {{ tree_data?.type }}</div>
<div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被学名:</span> {{ 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> {{ 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: {
...
...
src/views/fxPark/poster.vue
View file @
5336125
...
...
@@ -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;
...
...
Please
register
or
login
to post a comment