|
|
@@ -38,31 +38,26 @@
|
|
38
|
38
|
</div>
|
|
39
|
39
|
</template>
|
|
40
|
40
|
<script setup lang="ts">
|
|
41
|
|
-import Header from '../home/components/header.vue';
|
|
42
|
|
-import Map from '../home/components/map.vue'
|
|
|
41
|
+import Header from '@/views/DataVisualization/home/components/header.vue';
|
|
|
42
|
+import Map from '@/views/DataVisualization/home/components/map.vue'
|
|
43
|
43
|
</script>
|
|
44
|
44
|
<style scoped>
|
|
45
|
45
|
.container {
|
|
46
|
46
|
width: 100%;
|
|
47
|
47
|
height: 100%;
|
|
48
|
|
- background: url('../../../assets/DataVisualization/bg.png') no-repeat;
|
|
|
48
|
+ background: url('@/assets/DataVisualization/bg.png') no-repeat;
|
|
49
|
49
|
background-size: 100% 100%;
|
|
50
|
|
- /* border: 1px solid rgb(167, 45, 114); */
|
|
51
|
50
|
display: flex;
|
|
52
|
51
|
flex-direction: column;
|
|
53
|
52
|
}
|
|
54
|
|
-
|
|
55
|
53
|
.container .top {
|
|
56
|
54
|
width: 100%;
|
|
57
|
55
|
height: 80px;
|
|
58
|
|
- /* line-height: 80px;*/
|
|
59
|
56
|
text-align: center;
|
|
60
|
|
- /* background: gray; */
|
|
61
|
57
|
font-size: 24px;
|
|
62
|
58
|
font-weight: 700;
|
|
63
|
59
|
font-family: '黑体';
|
|
64
|
60
|
}
|
|
65
|
|
-
|
|
66
|
61
|
.container .content {
|
|
67
|
62
|
flex: 1;
|
|
68
|
63
|
width: 100%;
|
|
|
@@ -80,43 +75,36 @@ import Map from '../home/components/map.vue'
|
|
80
|
75
|
overflow: hidden;
|
|
81
|
76
|
margin-top: 20px;
|
|
82
|
77
|
}
|
|
83
|
|
-
|
|
84
|
78
|
.container .content .center .title .title-item {
|
|
85
|
79
|
width: 160px;
|
|
86
|
80
|
height: 160px;
|
|
87
|
81
|
text-align: center;
|
|
88
|
|
- background: url('../../../assets/DataVisualization/bg-dz.png') no-repeat;
|
|
|
82
|
+ background: url('@/assets/DataVisualization/bg-dz.png') no-repeat;
|
|
89
|
83
|
background-size: 100% 100%;
|
|
90
|
84
|
text-align: center;
|
|
91
|
|
-
|
|
92
|
85
|
}
|
|
93
|
|
-
|
|
94
|
86
|
.container .content .center .title .num {
|
|
95
|
87
|
font-size: 36px;
|
|
96
|
88
|
color: white;
|
|
97
|
89
|
text-align: center;
|
|
98
|
90
|
font-weight: 700;
|
|
99
|
91
|
margin-top:60px;
|
|
100
|
|
- /* line-height: 80px; */
|
|
101
|
92
|
font-family: '黑体';
|
|
102
|
93
|
background: linear-gradient(to bottom,#ffffff,rgb(29,233,234));
|
|
103
|
94
|
-webkit-background-clip:text ;
|
|
104
|
95
|
-webkit-text-fill-color: transparent;
|
|
105
|
96
|
}
|
|
106
|
|
-
|
|
107
|
97
|
.container .content .center .title .titlename {
|
|
108
|
98
|
font-size: 12px;
|
|
109
|
99
|
color: white;
|
|
110
|
100
|
text-align: center;
|
|
111
|
101
|
font-weight: 700;
|
|
112
|
|
- /* margin-top: 40px; */
|
|
113
|
102
|
font-family: '黑体';
|
|
114
|
103
|
opacity: 0.6;
|
|
115
|
104
|
}
|
|
116
|
105
|
.container .content .center .map{
|
|
117
|
106
|
width: 100%;
|
|
118
|
107
|
height: 80%;
|
|
119
|
|
- /* background: red; */
|
|
120
|
108
|
}
|
|
121
|
109
|
.container .content .left {
|
|
122
|
110
|
/* background: skyblue; */
|
|
|
@@ -131,7 +119,7 @@ import Map from '../home/components/map.vue'
|
|
131
|
119
|
width: 100%;
|
|
132
|
120
|
height: 33%;
|
|
133
|
121
|
/* background: pink; */
|
|
134
|
|
- background: url('../../../assets/DataVisualization/外框.png') no-repeat;
|
|
|
122
|
+ background: url('@/assets/DataVisualization/外框.png') no-repeat;
|
|
135
|
123
|
background-size: 100% 100%;
|
|
136
|
124
|
}
|
|
137
|
125
|
|
|
|
@@ -143,41 +131,17 @@ import Map from '../home/components/map.vue'
|
|
143
|
131
|
flex-direction: column;
|
|
144
|
132
|
justify-content: space-around;
|
|
145
|
133
|
}
|
|
146
|
|
-
|
|
147
|
134
|
.container .content .right .right-card {
|
|
148
|
135
|
width: 100%;
|
|
149
|
136
|
height: 33%;
|
|
150
|
|
- /* background: pink; */
|
|
151
|
|
- background: url('../../../assets/DataVisualization/外框.png') no-repeat;
|
|
|
137
|
+ background: url('@/assets/DataVisualization/外框.png') no-repeat;
|
|
152
|
138
|
background-size: 100% 100%;
|
|
153
|
139
|
}
|
|
154
|
140
|
|
|
155
|
141
|
.container .content .center {
|
|
156
|
|
- /* background: skyblue; */
|
|
157
|
142
|
width: 40%;
|
|
158
|
143
|
height: 100%;
|
|
159
|
|
- /* min-width: 960px; */
|
|
160
|
144
|
}
|
|
161
|
145
|
|
|
162
|
146
|
</style>
|
|
163
|
147
|
|
|
164
|
|
-<!--
|
|
165
|
|
-<!DOCTYPE html>
|
|
166
|
|
-<html lang="en">
|
|
167
|
|
-<head>
|
|
168
|
|
-<meta charset="UTF-8">
|
|
169
|
|
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
170
|
|
-<title>Vertical Gradient Text</title>
|
|
171
|
|
-<style>
|
|
172
|
|
-.gradient-text {
|
|
173
|
|
- font-size: 48px;
|
|
174
|
|
- background: linear-gradient(to bottom, #ff0000, #00ff00); /* 设置纵向渐变背景 */
|
|
175
|
|
- -webkit-background-clip: text; /* 设置背景裁剪为文字 */
|
|
176
|
|
- color: transparent; /* 隐藏文字颜色 */
|
|
177
|
|
-}
|
|
178
|
|
-</style>
|
|
179
|
|
-</head>
|
|
180
|
|
-<body>
|
|
181
|
|
- <h1 class="gradient-text">Vertical Gradient Text</htext>
|
|
182
|
|
-</body>
|
|
183
|
|
-</html> -->
|
KouJin