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
159
160
161
| <template>
| <view class="box">
| <!-- 自定义导航栏 -->
| <view class="navBarBox fix">
| <!-- 状态栏占位 -->
| <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
| <!-- 真正的导航栏内容 -->
| <view style="display: flex; flex-direction: column;">
| <view class="navBar">
| <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" />
| <view class="barText">叫应率统计</view>
| </view>
| </view>
| </view>
| <view class="responseCard">
| <table class="table">
| <thead class="head">
| <tr>
| <th></th>
| <th>叫应情况</th>
| <th>县市叫应率</th>
| <th>详情</th>
| </tr>
| </thead>
| <tbody class="tableBody">
| <tr v-for="(item, index) in tableData" :key="index" >
| <td align="center" width="90px">{{ item.unit }}</td>
| <td align="center">{{ item.response }}</td>
| <td align="center">{{ item.responsivity }}</td>
| <td>
| <u-button
| size="mini"
| type="text"
| style="color: sandybrown"
| @click="toCity(item)"
| >叫应详情
| </u-button>
| </td>
| </tr>
| </tbody>
| </table>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| data() {
| return {
| page: 'pages/tabBar/count/count',
| statusBarHeight: '',
| tableData: [
| {
| unit:'伊犁州',
| response: '1',
| responsivity: '88.9%'
| },
| {
| unit:'伊犁州1',
| response: '1',
| responsivity: '88.9%'
| },
| {
| unit:'伊犁州2',
| response: '1',
| responsivity: '88.9%'
| },
| {
| unit:'伊犁州3',
| response: '1',
| responsivity: '88.9%'
| }
| ]
| }
|
| },
| onLoad() {
| //获取手机状态栏高度
| this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
| uni.hideTabBar();
| },
| methods: {
| goBack() {
| console.log("1111")
| uni.switchTab({
| url:'/pages/tabBar/current/current'
| });
| },
| toCity(item) {
| console.log("item",item)
| uni.navigateTo({
| url: `/pages/tabBar/responsivity/cityResponsivity?data=` + encodeURIComponent(JSON.stringify(item))
| })
| }
| }
| }
|
| </script>
|
| <style lang='scss' scoped>
| .box {
| display: flex;
| flex-direction: column;
| width: 100%;
| height: 100%;
| }
| .fix{
| position: sticky;
| top: 0;
| left: 0;
| right: 0;
| width: 100%;
| z-index: 1;
| }
| .navBarBox .navBar {
| background-color:#fff;
| height: 50px;
| display: flex;
| flex-direction: row;
| justify-content: center;
| align-items: center;
| box-shadow: 0 3px 12px rgba(0,0,0,0.05);
| }
| .barText{
| text-align: center;
| width: 85%;
| font-size: 16px;
| /* text-align: center; */
| font-weight: 600;
| }
| .statusBar{
| background-color:lightgrey;
| }
| .responseCard{
| display: flex;
| flex-direction: column;
| background: #fff;
| box-shadow: 0 3px 12px rgba(0,0,0,0.05);
| margin: 12px 12px 20px;
| border-radius: 5px;
| padding: 30px 12px;
| }
| .table{
| .head{
| color: white;
| line-height: 35px;
| background-color: rgb(66, 157, 218);
| }
| .tableBody{
| color: black;
| background-color: rgb(207, 223, 241);
| line-height: 35px;
| }
| tr:nth-child(odd+1) {
| background-color: rgb(207, 223, 241); /* 设置奇数行颜色 */
| }
| tr:nth-child(even) {
| background-color: rgb(233, 239, 248); /* 设置偶数行颜色 */
| }
| }
| </style>
|
|
