fix 细节调整

hookehuyr
Commit 533612510b15de8f1f69b475873cf006a767fd34 53361251 1 parent 2cb04c8e
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
--- a/.env
View file @5336125
+++ b/.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
--- a/src/components/danmaku.vue
View file @5336125
+++ b/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" />&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;
--- a/src/views/fxPark/index.vue
View file @5336125
+++ b/src/views/fxPark/index.vue
View file @5336125
 <!--
  * @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 时，扫码返回的结果
-      // 跳转到相应植被介绍页
+      // 跳转到相应植被介绍页 'http://oa.allforlove.org.cn/f/carbon/#/intro?revision=1'
-      // let result = '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;
+      font-size: 0.8rem;
-      padding: 0.5rem;
+      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 {
--- a/src/views/fxPark/intro.vue
View file @5336125
+++ b/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>&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-intro p, .tree-mission-note p').css({
-      $('.tree-mission-note').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
+        '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: {
--- a/src/views/fxPark/poster.vue
View file @5336125
+++ b/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;