magazine-web/pages/journal/index.vue

<template>
  <view class="container">
    <navbar></navbar>
    <baner></baner>
    <!-- 管理智慧 -->
    <uni-group title="管理智慧" margin-top="20">
      <uni-grid :column="3" :highlight="true" @change="change">
        <uni-grid-item v-for="(item, index) in data" :index="index" :key="index">
          <view class="grid-item-box" style="background-color: #fff; height: 100%">
            <image v-if="item.thumbnail" style="width: 100%; height: 100%;" mode="scaleToFill" :src="baseurl + item.thumbnail"></image>
            <uni-icons v-else type="image" :size="30" color="#777" />
            <text class="text">{{ item.name }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-group>
    <!-- 财富生活 -->
    <uni-group title="财富生活" margin-top="20">
      <uni-grid :column="3" :highlight="true" @change="change">
        <uni-grid-item v-for="(item, index) in data" :index="index" :key="index">
          <view class="grid-item-box" style="background-color: #fff; height: 100%">
            <image v-if="item.thumbnail" style="width: 100%; height: 100%;" mode="scaleToFill" :src="baseurl + item.thumbnail"></image>
            <uni-icons v-else type="image" :size="30" color="#777" />
            <text class="text">{{ item.name }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-group>
    <!-- 才智青年 -->
    <uni-group title="才智青年" margin-top="20">
      <uni-grid :column="3" :highlight="true" @change="change">
        <uni-grid-item v-for="(item, index) in data" :index="index" :key="index">
          <view class="grid-item-box" style="background-color: #fff; height: 100%">
            <image v-if="item.thumbnail" style="width: 100%; height: 100%;" mode="scaleToFill" :src="baseurl + item.thumbnail"></image>
            <uni-icons v-else type="image" :size="30" color="#777" />
            <text class="text">{{ item.name }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-group>
  </view>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
		data: [],
		baseurl: 'http://192.168.0.45:9002',
    };
  },
  computed: {},
  async mounted() {
    this.data = await this.intactQuery({ type: 0 });
  },
  methods: {
    ...mapActions(["intactQuery"]),
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin: 0;
  padding: 0;
}
.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}
  .more {
    width: 100%;
    text-align: center;
  }
</style>