web-zk-h5/pages/architecture/architecture.vue

<template>
  <view class="content">
    <view class="theflex">
      <view
        @click="goRouter(item.path)"
        class="kuaibox"
        v-for="(item, index) in menus"
        :key="index"
      >
        <view class="">
          {{ item.name }}
        </view>
        <image class="kuaiimg" :src="item.url" mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
import * as mar from '@/config/market.js'
export default {
  data() {
    return {
      menus: [
        {
          name: '方案一',
          url: '../../static/images/my_icon14.png',
          path: '/pages/architecture/resettleArchite/resettle1',
          value: 'marketDynamics',
          isShow: false,
        },
        {
          name: '阶段列表',
          url: '../../static/images/my_icon14.png',
          path: '/pages/architecture/resettleArchite/resettle2',
          value: 'incomeDetail',
          isShow: false,
        },
        // {
        //   name: '安置方案三',
        //   url: '../../static/images/my_icon14.png',
        //   path: '/pages/architecture/resettleArchite/resettle3',
        //   value: 'bonusSource',
        //   isShow: false,
        // },
        // {
        //   name: '安置方案四',
        //   url: '../../static/images/my_icon14.png',
        //   path: '/pages/architecture/resettleArchite/resettle4',
        //   isShow: false,
        //   value: 'appraisal',
        // },
        // {
        //   name: '推荐方案一',
        //   url: '../../static/images/my_icon14.png',
        //   path: '/pages/architecture/recommendArchite/recommend1',
        //   isShow: false,
        //   value: 'registration',
        // },
        // {
        //   name: '推荐方案二',
        //   url: '../../static/images/my_icon14.png',
        //   path: '/pages/architecture/recommendArchite/recommend2',
        //   isShow: false,
        //   // value: 'investment',
        // },
        // {
        //   name: '推荐方案三',
        //   url: '../../static/images/my_icon14.png',
        //   path: '/pages/architecture/recommendArchite/recommend3',
        //   isShow: false,
        //   value: 'activeZone',
        // },
        // {
        //   name: '推荐方案四',
        //   url: '../../static/images/my_icon14.png',
        //   path: '/pages/architecture/recommendArchite/recommend4',
        //   isShow: false,
        //   value: 'activeZone',
        // },
      ],
    }
  },

  methods: {
    goRouter(path) {
      uni.navigateTo({
        url: path,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #f2f2f2;
  height: 100vh;
  padding: 4rpx 21rpx 500rpx 21rpx;

  .theflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .kuaibox {
    width: 40%;
    // height: 150rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60rpx 40rpx 60rpx 22rpx;
    margin: 13rpx 0rpx;
    background-color: #ffffff;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;

    .kuaiimg {
      width: 52rpx;
      height: 53rpx;
    }
  }
}
</style>