health-front/pages_order/home/followUsIntro.vue

<template>
  <view class="view">
    <view>
      <view class="card" v-for="article in list" :key="article.id"  @click="jumpToArticle(article.id)">
        <image class="card-img" :src="article.image" mode="scaleToFill"></image>
        <!-- <view class="card-title">{{ article.title }}</view> -->
      </view>
    </view>
    <view class="ways__view">
      <view class="way flex flex-column" v-for="(way, wIdx) in wayList" :key="wIdx"  @click="openQrPopup(way.key)">
        <image class="way-icon" :src="way.url" mode="scaleToFill"></image>
        <view class="way-desc">{{ way.desc }}</view>
        <view class="way-title flex"><text style="margin-right: 4rpx;">{{ way.title }}</text><uv-icon name="arrow-right" color="#252545" size="24rpx"></uv-icon></view>
      </view>
    </view>

    <popupQrCode ref="popupQrCode"></popupQrCode>

  </view>
</template>

<script>
	import popupQrCode from '@/components/config/popupQrCode.vue'

  export default {
    components: {
			popupQrCode,
    },
		data() {
			return {
        list: [],
        wayList: [],
        key: '',
			}
		},
		created() {
			this.getData()

			this.wayList = [
				{ 
					id: '001', 
					title: '公众号',
					desc: 'PETUAL MEDICAL',
					url: '/pages_order/static/index/wx.png', 
          key: 'qrcode_wx_official_account',
				},
				{ 
					id: '002', 
					title: '健康伙伴',
					desc: 'PETUAL MEDICAL',
					url: '/pages_order/static/index/group.png', 
          key: 'qrcode_enterprise_wx',
				},
				{ 
					id: '003', 
					title: '官方号',
					desc: 'PETUAL MEDICAL',
					url: '/pages_order/static/index/xhs.png', 
          key: 'qrcode_xhs',
				},
			]
		},
		methods: {
			async getData() {
				try {
					this.list = await this.$fetch('getAbout')
				} catch (err) {

				}
			},
      jumpToArticle(id) {
        uni.navigateTo({
          url: `/pages_order/home/about?id=${id}`
        })
      },
      openQrPopup(key) {
        this.$refs.popupQrCode.open(key)
      },
    },
  }
</script>

<style scoped lang="scss">

.view {
  padding: 24rpx 32rpx 0 32rpx;
}

.card {
  position: relative;
  font-size: 0;
  overflow: hidden;
  border-radius: 32rpx;
  background-image: linear-gradient(to right, #FAFAFF, #F3F3F3);
  box-shadow: -5rpx -5rpx 20rpx 0 #FFFFFF,
              10rpx 10rpx 20rpx 0 #AAAACC80,
              4rpx 4rpx 10rpx 0 #AAAACC40,
              -2rpx -2rpx 5rpx 0 #FFFFFF;

  & + & {
    margin-top: 32rpx;
  }

  &-img {
    width: 100%;
    height: calc((100vw - 32rpx*2) * 129 / 343);
  }

  &-title {
    position: absolute;
    top: 80rpx;
    left: 60rpx;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 1.4;
    color: #000000;
  }
  
}

.ways__view {
  margin-top: 80rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 24rpx;
}

.way {

  &-icon {
    width: 80rpx;
    height: 80rpx;
  }

  &-desc {
    margin-top: 24rpx;
    font-family: PingFang SC;
    font-size: 22rpx;
    font-weight: 400;
    line-height: 1.4;
    color: #989898;
  }

  &-title {
    font-family: PingFang SC;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 1.4;
    color: #252545;
  }
}

</style>