kuailelunwen_new_houtai/src/views/agent/siteTemplate.vue

<template>
    <div class="main-content12">
        <div class="pageTemplete-wrap">
            <div class=" flex-common" id="">
                <h3>模板选择</h3>
                <div class="templeteImgs flex">
                    <div class="templeteImgs-item column" v-for="item in templeteList" :key="item.tpl_id" @click="chooseTemplate(item)">
                        <img :src="item.picture" alt="" class="tem_img">
                        <span class="look">预览</span>
                        <!-- v-if="tpl_id== item.tpl_id"  -->
                        <img src="@/assets/site/tem-active.svg" class="tem-active" v-if="tpl_id== item.tpl_id" alt="">
                        <p>{{ item.name }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    // 站点设置
    name: '',
    components: {
        // GuipInput,
        // GuipButton,
        // GuipSwitch,
        // GroupFormBtns
    },
    data() {
        return {
            activeName: '1',
            tpl_id:'',
            addImgList: {
                '万方': require('@/assets/register/wanfang.png'),
                '维普': require('@/assets/register/weipu.svg'),
                '学术不端': require('@/assets/register/xueshubuduan.svg'),
            },
            templeteList:[]
        }
    },
    mounted() {
        this.get_site_tpl_list();
    },
    methods: {
        // 初始化
        get_site_tpl_list(){
            this.$http('POST', '/agentnew/ajax_get_site_tpl_list',{
                uid:this.$route.query?.uid,
            }, {
                headers: {
                    'Auth': this.$token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.templeteList = [...response.data]
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleClick() {

        },
        chooseTemplate(item){
            this.tpl_id = item.id;
        },
      
    }
}
</script>
<style scoped lang="scss">
.pageTemplete-wrap {
    width: 100%;
    letter-spacing: 0.08em;
    box-sizing: border-box;
}

::v-deep .el-tabs__nav-wrap {
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #DFE2E6;
}
.templeteImgs{
    max-width: 100%;
    justify-content: flex-start;
    white-space: nowrap;
    overflow-x: auto;
    gap: 13px;
    .templeteImgs-item {
        position: relative;
        border-radius: 4px;
        
        .tem_img{
            width: 176px;
            height: 110px;
            border-radius: 8px;
            border: 2px solid #E8E9EA;
        }
        p{
            display: inline-block;
            width: 100%;
            text-align: center;
            margin-top: 6px;
            letter-spacing: 0.08em;
            color: #626573;
        }
        .tem-active{
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 30px;
        }
        .look{
            // display: none;
            transition: all .3s;
            position: absolute;
            right: 0;
            bottom: 26px;
            width: 73px;
            height: 30px;
            background: rgba(0, 0, 0, 0.61);
            backdrop-filter: blur(3px);
            line-height: 18px;
            line-height: 30px;
            color: #fff;
            text-align: center;
            border-radius: 0 0 4px 0;
        }
        &:hover{
            .look{
                display: block;
                transition: all .3s;
            }
        }
    }
}
</style>