完成小区页面

src/store/index.ts

@@ -6,7 +6,7 @@ import actions from './actions'
 export type ThemeType = 'manage' | 'service' | 'safety'
 export interface ViewType {
   name: string
-  type: 'street' | 'work1' | 'work2' | 'work3'
+  type: 'street' | 'work1' | 'work2' | 'work3' | 'community'
 }
 export interface GlobalStateProps {
   showLoading: boolean

src/view/community.vue

@@ -20,10 +20,14 @@
 import { defineComponent } from 'vue'
 import LeftSection from '@/view/community/left-section.vue'
 import RightSection from '@/view/community/right-section.vue'
+import store from '@/store'
 
 export default defineComponent({
   name: 'Main',
   components: { LeftSection, RightSection },
+  setup() {
+    store.commit('SET_CURRENT_VIEW', { name: '振兴小区', type: 'community' }) // 使标题不显示公共的3个按钮
+  },
 })
 </script>
 

src/view/community/combine.vue

+<template>
+  <m-card mode="3" title="联勤联动">
+    <div class="tabs">
+      <span
+        v-for="tab in tabs"
+        :key="tab"
+        :class="{ on: curTab === tab }"
+        @click="curTab = tab"
+      >
+        {{ tab }}
+      </span>
+    </div>
+    <div class="card-container">
+      <m-scroll :length="list.length" :mode="2" :limit="5" :step="1.25">
+        <div v-for="(item, i) in list" :key="i" class="card">
+          <div class="title">
+            {{ item.name }}
+            <span />
+            <p>{{ item.type }}</p>
+          </div>
+          <div class="info">
+            <p>{{ item.address }}</p>
+            <p>{{ item.date }}</p>
+          </div>
+          <Step :current="item.cur" :steps="steps" />
+        </div>
+      </m-scroll>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import Step from '../components/step.vue'
+
+export default defineComponent({
+  name: 'Combine',
+  components: { Step },
+  setup() {
+    const curTab = ref('安全')
+    const list = ref([
+      {
+        name: '振兴小区',
+        type: '电梯困人',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        date: '2020-03-13 13:23:08',
+        cur: 2,
+      },
+      {
+        name: '振兴小区',
+        type: '电梯困人',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        date: '2020-03-13 13:23:08',
+        cur: 3,
+      },
+      {
+        name: '振兴小区',
+        type: '电梯困人',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        date: '2020-03-13 13:23:08',
+        cur: 4,
+      },
+      {
+        name: '振兴小区',
+        type: '电梯困人',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        date: '2020-03-13 13:23:08',
+        cur: 5,
+      },
+      {
+        name: '振兴小区',
+        type: '电梯困人',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        date: '2020-03-13 13:23:08',
+        cur: 2,
+      },
+      {
+        name: '振兴小区',
+        type: '电梯困人',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        date: '2020-03-13 13:23:08',
+        cur: 3,
+      },
+      {
+        name: '振兴小区',
+        type: '电梯困人',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        date: '2020-03-13 13:23:08',
+        cur: 4,
+      },
+      {
+        name: '振兴小区',
+        type: '电梯困人',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        date: '2020-03-13 13:23:08',
+        cur: 5,
+      },
+    ])
+    return {
+      steps: ['发现', '立案', '派遣', '处置', '核查', '结案'],
+      tabs: ['安全', '干净', '有序'],
+      curTab,
+      list,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.tabs
+  border-bottom .01rem solid rgba(255,255,255,.2)
+  padding-bottom .02rem
+  span
+    padding .025rem 0
+    color #ccc
+    margin 0 .15rem
+    cursor pointer
+    transition all .3s ease
+    border-bottom .03rem solid transparent
+    &:hover
+      color #fff
+    &.on
+      color #fff
+      font-weight bold
+      border-color $secondary-color
+.card-container
+  overflow hidden
+  max-height 5rem
+  .card
+    background url('@/assets/images/card-bg.png') 100% / 100% 100% no-repeat
+    box-sizing border-box
+    padding .15rem .1rem 0
+    height 1.25rem
+    overflow hidden
+    display flex
+    flex-direction column
+    justify-content space-between
+    .title
+      font-size .12rem
+      display flex
+      align-items center
+      span
+        margin 0 .1rem
+        flex 1
+        display block
+        height .01rem
+        background $blue
+      p
+        font-size .1rem
+        color $secondary-color
+    .info
+      display flex
+      justify-content space-between
+      color $blue
+</style>

src/view/community/right-section.vue

@@ -6,7 +6,9 @@
     <m-card mode="border">
       <ManageIssue />
     </m-card>
-    <m-card mode="border"> </m-card>
+    <m-card mode="border">
+      <Combine />
+    </m-card>
   </div>
 </template>
 
@@ -14,10 +16,11 @@
 import { defineComponent } from 'vue'
 import CommunityPhoto from './community-photo.vue'
 import ManageIssue from './manage-issue.vue'
+import Combine from './combine.vue'
 
 export default defineComponent({
   name: 'RightSection',
-  components: { CommunityPhoto, ManageIssue },
+  components: { CommunityPhoto, ManageIssue, Combine },
 })
 </script>
 

src/view/components/step.vue

+<template>
+  <div class="step">
+    <div class="step-container">
+      <div
+        v-for="(step, i) in steps"
+        :key="i"
+        class="item"
+        :class="{ on: i == current }"
+      >
+        <p :title="step">
+          {{ step }}
+        </p>
+      </div>
+    </div>
+    <div class="lines">
+      <span v-for="(item, i) in steps" :key="i" :class="{ on: i == current }" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue'
+
+export default defineComponent({
+  name: 'Step',
+  props: {
+    steps: {
+      type: Array as PropType<string[]>,
+      required: true,
+    },
+    current: {
+      type: [Number, String] as PropType<number | string>,
+      default: 0,
+    },
+  },
+  setup(props) {
+    return {}
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.step-container
+  display flex
+  justify-content space-around
+  .item
+    text-align center
+    z-index 1
+    p
+      color #999
+      font-size .08rem
+      position relative
+      &:after
+        content ''
+        position absolute
+        display block
+        width 0
+        height 0
+        bottom -0.1rem
+        left 0
+        right 0
+        margin 0 auto
+        border .04rem solid transparent
+        border-top-color rgba(91,213,255,.2)
+    &.on
+      p
+        color $edge
+        font-weight bold
+        &:after
+          border-top-color $edge
+.lines
+  width 100%
+  height .05rem
+  display flex
+  justify-content space-around
+  background rgba(91,213,255,.2)
+  margin .1rem 0 .15rem
+  >span
+    display block
+    min-width .28rem
+    height 100%
+    z-index 1
+    &.on
+      background linear-gradient(to right, $edge, #fff, $edge)
+      box-shadow 0 0 0.05rem .01rem rgba(0,242,255,.8)
+</style>