|
|
@@ -4,7 +4,18 @@
|
|
|
<div class="block-title">{{ title }}</div>
|
|
|
</div>
|
|
|
<div class="cityList" :style="{ height: height + 'px' }">
|
|
|
-
|
|
|
+ <div class="listCon" v-for="(item,i) in cityList" :key="i">
|
|
|
+ <div class="listArea">
|
|
|
+ <span>天涯区</span>
|
|
|
+ <span>48.73km²</span>
|
|
|
+ </div>
|
|
|
+ <div class="listItem">
|
|
|
+ <div class="itemBg"></div>
|
|
|
+ </div>
|
|
|
+ <div class="listNum">
|
|
|
+ <span>图斑数152个</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -37,9 +48,45 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.statistics {
|
|
|
- .cityList{
|
|
|
- width: 100%;
|
|
|
- background: rgba(255, 192, 203, 0.445);
|
|
|
+ .cityList {
|
|
|
+ width: 100%;
|
|
|
+ // background: rgba(255, 192, 203, 0.445);
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .listCon {
|
|
|
+ width: 100%;
|
|
|
+ height: 55px;
|
|
|
+ // background: rgba(152, 251, 152, 0.685);
|
|
|
+ margin: 5px 0px;
|
|
|
+ .listArea{
|
|
|
+ width: 365px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .listItem {
|
|
|
+ width: 365px;
|
|
|
+ height: 10px;
|
|
|
+ background: inherit;
|
|
|
+ background-color: rgba(242, 242, 242, 0.43921568627451);
|
|
|
+ border: none;
|
|
|
+ border-radius: 85px;
|
|
|
+ box-shadow: none;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ .itemBg {
|
|
|
+ width: 233px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(30, 159, 255, 1);
|
|
|
+ border: none;
|
|
|
+ border-radius: 85px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .listNum {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
