intro.vue
3.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!--
* @Date: 2024-04-10 16:08:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-10 17:24:25
* @FilePath: /fxPark/src/views/fxPark/intro.vue
* @Description: 文件描述
-->
<template>
<div class="intro-page">
<div></div>
<div style="margin: 1rem;">
<div style="margin-bottom: 1rem;">
<span style="font-size: 1.25rem;">悬铃木</span>
<span style="font-size: 0.85rem;">智者长老</span>
</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> 待补充</div>
<div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被学名:</span> 待补充</div>
<div style="margin-bottom: 1.5rem;">
截至2022年累计固定二氧化碳约7.7吨，可抵消用煤炭发电7.7万度所排放的二氧化碳量，或者可抵消一辆轻型汽车行驶绕地球1周排放的二氧化碳量。
</div>
<div style="margin-bottom: 1rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被介绍:</span></div>
<div>
这棵悬铃木已经有120岁，胸径为123cm，被称为“沪上老二”，拥有悠久的历史和深厚的底蕴。<br/>
悬铃木生长快，成型后树大荫浓，是作为庭荫树和行道树的优良树种，是上海最常见的行道树种之一。
</div>
</div>
</div>
<div class="task-tips">
<div class="title-wrapper">
<span class="title-text">任务卡</span>
</div>
<div class="task-wrapper">
<div class="task-title">自带咖啡杯</div>
<div>去咖啡店时自带咖啡杯，<br/>代替一次性纸杯。</div>
</div>
</div>
<div class="light-up-text">恭喜您植被已被点亮</div>
<div style="margin: 1rem 1rem 2rem 1rem; color: white; text-align: center;">
<div style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">生成海报</div>
</div>
</div>
</template>
<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'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
</script>
<style lang="less" scoped>
.intro-page {
display: flex;
flex-direction: column;
.task-tips {
.title-wrapper {
text-align: center;
.title-text {
font-size: 24px;
font-weight: bold;
color: #BBFEE2; /* 文字颜色 */
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
}
.task-wrapper {
border: 1px solid #000;
margin: 1rem;
padding: 1rem;
border-radius: 10px;
background: linear-gradient(to bottom, #FBFFE9, #BEE9F8);
text-align: center;
.task-title {
background-color: #D6F4BD;
padding: 0.5rem 1.5rem;
border-radius: 1.5rem;
display: inline-block;
font-weight: bold;
margin-bottom: 1rem;
}
}
}
.light-up-text {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #F8E9C1; /* 文字颜色 */
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
margin: 1rem 0;
}
}
</style>