nongminwang/components/home/AdvertisingClass.vue

<template>
    <div class="banner_2 clearfix">
        <a class="banner_2_left" href="http://nzgxw.org.cn/" v-if="adData1.image_url==null" target="_blank" :title="adData1.introduce">
            <img :src="adData1.thumb" :alt="adData1.introduce" :id="adData1.ad_tag"  data-tag="adData1.ad_tag">
        </a>
        <a class="banner_2_left" :href="adData1.image_url" v-else :title="adData1.introduce">
            <img :src="adData1.image_src" :alt="adData1.introduce" :id="adData1.ad_tag" data-tag="adData1.ad_tag">
        </a>
        <a class="banner_2_right" href="http://nzgxw.org.cn/" v-if="adData2.image_url==null" target="_blank" :title="adData2.introduce">
            <img :src="adData2.thumb" :alt="adData2.introduce" :id="adData2.ad_tag"  data-tag="adData2.ad_tag">
        </a>
        <a class="banner_2_right" :href="adData2.image_url" v-else :title="adData2.introduce">
            <img :src="adData2.image_src" :alt="adData2.introduce" :id="adData2.ad_tag" data-tag="adData2.ad_tag">
        </a>
    </div>
</template>

<script setup>
//import {onMounted } from 'vue';
const props = defineProps({
    adData1: Object,
    adData2: Object
});
//广告移动至客户端获取，并且按照标识单独获取
</script>

<style lang="less" scoped>
    .clearfix {
        overflow: hidden;
        width: 1200px;
        height: 106px;
    }
    .banner_2 img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .banner_2 {
        margin-top: 20px;
        height: 106px;
        .banner_2_left {
            float: left;
            width: 720px;
            height: 100%;
        }
        .banner_2_right {
            float: right;
            width: 450px;
            height: 100%;
        }
    }
</style>