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
| <template>
| <div class="message">
| <div class="message-top">模拟方案详情</div>
| <div class="message-close" @click="closeMsg"></div>
| <div class="message-context">
| <div v-for="(item, key) in messageList" :key="key" class="message-item">
| <div class="message-name">{{ item.name }}</div>
| <div class="message-value">{{ item.value }}</div>
| </div>
| </div>
| <div class="message-btn" @click="startPlay">开始模拟</div>
| </div>
| </template>
|
| <script>
| export default {
| name: "Message",
| components: {},
| data() {
| return {
| messageList: [
| {
| name: "方案名称：",
| value: "降雨30mm数据",
| },
| {
| name: "模拟区域：",
| value: cityData.listData[0] || "孙胡沟",
| },
| {
| name: "降雨数据：",
| value: "降雨强度30MM",
| },
| {
| name: "预演开始时间：",
| value: "2025-01-15 12:55:18",
| },
| {
| name: "预演结束时间：",
| value: "2025-01-15 18:35:00",
| },
| {
| name: "创建时间：",
| value: "2025-01-15 8:15:28",
| },
| ],
| }
| },
| methods: {
| closeMsg() {
| this.$parent.messageShow = false
| },
| startPlay() {
| this.$parent.rightShow = true
| this.$parent.flowShow = true
| this.$parent.messageShow = false
| },
| },
| }
| </script>
| <style lang="less" scoped>
| .message {
| background: url("@/assets/img/tools/messagebg.png");
| width: 391px;
| height: 392px;
| }
|
| .message-top {
| position: absolute;
| top: 5px;
| left: 20px;
| font-weight: 700;
| font-size: 18px;
| font-weight: 700;
| color: #fff;
| line-height: 40px;
| width: 270px;
| cursor: pointer;
| }
|
| .message-close {
| position: absolute;
| right: 3px;
| top: 27px;
| width: 20px;
| height: 20px;
| text-align: center;
| line-height: 20px;
| text-align: center;
|
| font-weight: 700;
| font-size: 18px;
| font-weight: 700;
| color: #fff;
| cursor: pointer;
| }
|
| .message-context {
| position: absolute;
| top: 60px;
| left: 20px;
| width: 350px;
| }
|
| .message-item {
| height: 23px;
| margin-top: 15px;
| margin-left: 10px;
| }
| .message-name {
| float: left;
| font-weight: 700;
| color: #94e0c4;
| }
|
| .message-value {
| float: left;
| color: #e1eee9;
| }
|
| .message-btn {
| background: url("@/assets/img/tools/messagebtn.png") no-repeat;
| position: absolute;
| bottom: 60px;
| right: 60px;
| width: 105px;
| height: 26px;
| text-align: center;
| color: #fff;
| cursor: pointer;
| }
| </style>
|
|
