智慧园区前端大屏
shuishen
2024-10-30 b2ad3aae15f93ff2d8e09701416e4b858c916ee8
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-13 14:54:26
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-13 15:00:55
 * @FilePath: \forest-fire\src\views\statistics\components\box\dataContent.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import publicContent from './publicContent.vue'
</script>
 
<template>
    <!-- <public-content>
        <template #content> -->
    <div class="box-content-box">
        <div class="box-content">
 
            <div>
                <div class="box-content-img">
                    <img src="../../../../../public/images/YX.png" alt="">
                </div>
            </div>
            <div>
                <div class="box-content-text">
                    吉水县地处江西省中部,赣江中游。地处东经114°38′至115°36′、北纬25°52′至27°33′之间,横跨赣江两岸,东南与永丰县接壤,北与峡江县相连,西南与吉安市、吉安县交界。县城文峰镇,西南距吉安市23公里,北距省会南昌196公里,东至永丰县城57公里,西北至峡江县城75公里,京九铁路、105国道、赣江水道均从县城经过,建设中的赣粤高速公路从县城西部穿越,其挂线跨越赣江,从县城北部进入老城区。江西吉水工业园区城西工业园位于吉水县老城区西南约2km处,吉水县城新区西部,东临赣江,北靠金滩镇,西达赣粤高速公路挂线,赣江大桥联系新区东部与西部。吉水县工业园规划为“一区三园”,分别为城西工业园、黄桥工业园、八都工业园。工业园总面积达854.25公顷(12813.7亩),其中,八都工业园17.19公顷、城西工业园735.68公顷、黄桥工业园101.38公顷。城西工业园分两期:城西工业园Ⅰ规模为218.47公顷,其四至范围为:东至赣江,西至白水路,南至黄金大道,北至金滩镇金滩村。城西工业园Ⅱ规模为517.21公顷,其四至范围为:东至金滩镇白鹭村-双元村,西至金滩镇古塘村-前进村,南至赣粤高速连接线,北至金滩镇前进村。江西吉水工业园区化工集中区位于江西吉水工业园区城西工业园Ⅱ内
                </div>
            </div>
        </div>
 
        <div class="container">
            <div class="box-content-sj" v-for="(item, index) in 6" :key="index">
                <img src="../../../../../public/images/YX.png" alt="">
                <div>
                    <div class="box-content-ss">
                        <div>
                            <div class="box-content-text-title">
                                <span class="box-content-text-title-span">2999</span>
                            </div>
                        </div>
                        <div>
                            <div class="box-content-text-content">
                                <span class="box-content-text-content-span">企业园区</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
 
        <div class="content-qy-info">
            <div class="box-content-title">
                <img src="../../../../../public/images/YX.png" alt="">
                <div class="box-content-title-text">
                    <span class="box-content-title-text-span">企业</span>
                </div>
            </div>
 
            <div class="box-content-title">
                <img src="../../../../../public/images/YX.png" alt="">
                <div class="box-content-title-text">
                    <span class="box-content-title-text-span">分区</span>
                </div>
            </div>
 
            <div class="box-content-title">
                <img src="../../../../../public/images/YX.png" alt="">
                <div class="box-content-title-text">
                    <span class="box-content-title-text-span">图层</span>
                </div>
            </div>
 
 
 
 
        </div>
 
 
    </div>
    <!-- </template>
    </public-content> -->
</template>
 
<style lang="scss" scoped>
.box-content-box {
    color: #fff;
}
 
.box-content {
    display: flex;
    justify-content: space-between;
 
}
 
.content-qy-info {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 15px;
}
 
.box-content-img img {
    margin: 5px;
    width: 120px;
    /* 宽度可以根据实际情况调整 */
    height: 120px;
}
 
.box-content-text {
    padding-left: 5px;
    // width: 60%;
    /* 宽度可以根据实际情况调整 */
    height: 130px;
    /* 高度可以根据实际情况调整 */
    overflow: hidden;
}
 
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
 
.box-content-sj {
    flex: 1 1 31%;
    /* 每个盒子占据大约31%的宽度,留出一些空间用于间距 */
    min-width: 100px;
    /* 最小宽度,防止在非常小的屏幕上变得太窄 */
    box-sizing: border-box;
    padding: 5px;
    // border: 1px solid #ccc;
    display: flex;
    // 设置高度
    align-items: center;
}
 
.box-content-sj img {
    max-width: 60%;
    height: 60px;
}
 
.box-content-ss {
    margin: 0px 0px 0px 10px;
}
 
.box-content-text-title,
.box-content-text-content {
    margin-top: 5px;
}
 
.box-content-text-title-span,
.box-content-text-content-span {
    font-weight: bold;
}
</style>